#4 refactor(button): 비디오 객체 전달 방식으로 버튼 액션 변경

버튼 모듈화를 위해 액션을 받는 것이 아닌 객체를 전달 받도록 수정 closes #10, #11, #12, #13, #14
StockfolioOfficial · Jul 29, 2021 · bbbe2a7 · bbbe2a7
1 parent bd5d08f
commit bbbe2a7
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 52 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,31 +9,13 @@ import "./App.css";
 
 function App(): ReactElement {
   const [videoRef, setVideoRef] = useState<null | HTMLVideoElement>(null);
-  const [isPause, setIsPause] = useState(true);
-  const [isMute, setIsMute] = useState(true);
+  const skipTime = 1;
 
   function playVideo() {
     if (videoRef === null) return;
-    videoRef
-      .play()
-      .then(() => {
-        setIsPause(false);
-      })
-      .catch(() => {
-        console.error("플레이가 불가능합니다.");
-      });
-  }
-
-  function pauseVideo() {
-    if (videoRef === null) return;
-    videoRef.pause();
-    setIsPause(true);
-  }
-
-  function stopVideo() {
-    if (videoRef === null) return;
-    pauseVideo();
-    videoRef.currentTime = 0;
+    videoRef.play().catch(() => {
+      console.error("플레이가 불가능합니다.");
+    });
   }
 
   function moveCurrentTime(targetTime: number) {
@@ -47,13 +29,12 @@ function App(): ReactElement {
   function setMute(on: boolean) {
     if (videoRef === null) return;
     videoRef.muted = on;
-    setIsMute(on);
   }
 
   function clickVideo() {
     if (videoRef === null) return;
     if (videoRef.paused) playVideo();
-    else pauseVideo();
+    else videoRef.pause();
   }
 
   return (
@@ -66,31 +47,27 @@ function App(): ReactElement {
         />
       </video>
       <br />
-      <PlayButton
-        isPause={isPause}
-        playEvent={playVideo}
-        pauseEvent={pauseVideo}
-      />
-      <StopButton stopVideo={stopVideo} />
-      <MuteButton isMute={isMute} setMute={setMute} />
+      <PlayButton videoRef={videoRef} />
+      <StopButton videoRef={videoRef} moveCurrentTime={moveCurrentTime} />
+      <MuteButton videoRef={videoRef} setMute={setMute} />
       <SkipButton
         videoRef={videoRef}
-        skipTime={-1}
         moveCurrentTime={moveCurrentTime}
+        skipTime={-skipTime}
       />
       <SkipButton
         videoRef={videoRef}
-        skipTime={1}
         moveCurrentTime={moveCurrentTime}
+        skipTime={skipTime}
       />
       <FullscreenButton videoRef={videoRef} />
       <br />
-      <ControlBar
+      {/* <ControlBar
         videoRef={videoRef}
         moveCurrentTime={moveCurrentTime}
         playVideo={playVideo}
         pauseVideo={pauseVideo}
-      />
+      /> */}
     </div>
   );
 }

diff --git a/src/components/MuteButton.tsx b/src/components/MuteButton.tsx
@@ -1,17 +1,29 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 interface MuteButtonProps {
-  isMute: boolean;
+  videoRef: HTMLVideoElement | null;
   setMute: (on: boolean) => void;
 }
 
-function MuteButton({ isMute, setMute }: MuteButtonProps) {
-  function clickMuteButton() {
-    setMute(!isMute);
+function MuteButton({ videoRef, setMute }: MuteButtonProps) {
+  const [muteText, setMuteText] = useState("음소거 해제");
+  function toggleMute() {
+    if (videoRef === null) return;
+    if (videoRef.muted) {
+      setMute(!videoRef.muted);
+      setMuteText("음소거 해제");
+    } else {
+      setMute(!videoRef.muted);
+      setMuteText("음소거");
+    }
   }
+  useEffect(() => {
+    if (videoRef === null) return;
+    setMuteText(videoRef.muted ? "음소거 해제" : "음소거");
+  }, [videoRef]);
   return (
-    <button type="button" onClick={clickMuteButton}>
-      {isMute ? "음소거 해제" : "음소거"}
+    <button type="button" onClick={toggleMute}>
+      {muteText}
     </button>
   );
 }

diff --git a/src/components/PlayButton.tsx b/src/components/PlayButton.tsx
@@ -1,20 +1,35 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 interface PlayButtonProps {
-  isPause: boolean;
-  playEvent: () => void;
-  pauseEvent: () => void;
+  videoRef: HTMLVideoElement | null;
 }
 
-function PlayButton({ isPause, playEvent, pauseEvent }: PlayButtonProps) {
+function PlayButton({ videoRef }: PlayButtonProps) {
+  const [playBtnText, setText] = useState("재생");
   function clickPlayButton() {
-    if (isPause) playEvent();
-    else pauseEvent();
+    if (videoRef === null) return;
+    if (videoRef.paused)
+      videoRef.play().catch(() => {
+        console.error("재생 할 수 없습니다.");
+      });
+    else videoRef.pause();
   }
 
+  function changeButtonText() {
+    if (videoRef === null) return;
+    if (videoRef.paused) setText("재생");
+    else setText("일시정지");
+  }
+
+  useEffect(() => {
+    if (videoRef === null) return;
+    videoRef.addEventListener("playing", changeButtonText);
+    videoRef.addEventListener("pause", changeButtonText);
+  }, [videoRef]);
+
   return (
     <button type="button" onClick={clickPlayButton}>
-      {isPause ? "재생" : "일시정지"}
+      {playBtnText}
     </button>
   );
 }

diff --git a/src/components/StopButton.tsx b/src/components/StopButton.tsx
@@ -1,10 +1,17 @@
 import React from "react";
 
 interface StopButtonProps {
-  stopVideo: () => void;
+  videoRef: HTMLVideoElement | null;
+  moveCurrentTime: (time: number) => void;
 }
 
-function StopButton({ stopVideo }: StopButtonProps) {
+function StopButton({ videoRef, moveCurrentTime }: StopButtonProps) {
+  function stopVideo() {
+    if (videoRef === null) return;
+    videoRef.pause();
+    moveCurrentTime(0);
+  }
+
   return (
     <button type="button" onClick={stopVideo}>
       정지