#4 feat(button): 스킵 버튼 구간 반복 설정 시 구간 반복 시작점/종료점 넘어가지 않도록 로직 추가

StockfolioOfficial · Aug 3, 2021 · f492870 · f492870
1 parent a11bbf6
commit f492870
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -64,13 +64,17 @@ function App(): ReactElement {
       <MuteButton videoRef={videoRef} setMute={setMute} />
       <SkipButton
         videoRef={videoRef}
-        moveCurrentTime={moveCurrentTime}
         skipTime={-skipTime}
+        moveCurrentTime={moveCurrentTime}
+        repeatOn={repeatOn}
+        repeatTime={repeatTime}
       />
       <SkipButton
         videoRef={videoRef}
-        moveCurrentTime={moveCurrentTime}
         skipTime={skipTime}
+        moveCurrentTime={moveCurrentTime}
+        repeatOn={repeatOn}
+        repeatTime={repeatTime}
       />
       <FullscreenButton videoRef={videoRef} />
       <br />

diff --git a/src/components/SkipButton.tsx b/src/components/SkipButton.tsx
@@ -4,17 +4,31 @@ interface SkipButtonProps {
   videoRef: HTMLVideoElement | null;
   skipTime: number;
   moveCurrentTime: (time: number) => void;
+  repeatOn: boolean;
+  repeatTime: {
+    startTime: number;
+    endTime: number;
+  };
 }
 
 function SkipButton({
   videoRef,
   skipTime,
   moveCurrentTime,
+  repeatOn,
+  repeatTime,
   children,
 }: SkipButtonProps & React.HTMLProps<HTMLButtonElement>) {
   function clickSkipButton() {
     if (videoRef === null) return;
-    moveCurrentTime(videoRef.currentTime + skipTime);
+    let afterTime = videoRef.currentTime + skipTime;
+    if (repeatOn) {
+      const { startTime, endTime } = repeatTime;
+
+      if (afterTime < startTime) afterTime = startTime;
+      if (afterTime > endTime) afterTime = endTime;
+    }
+    moveCurrentTime(afterTime);
   }
 
   return (