From 3d9cab35786cbe6d6cf410f50c70f5a30afd216e Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Mon, 18 Mar 2024 21:29:32 -0400
Subject: [PATCH] repeat button done

---
 .../components/ControlBar/ButtonRepeat.tsx    | 53 +++++++++++++++++++
 .../components/ControlBar/ControlBar.tsx      |  2 +
 .../components/ControlBar/SelectTrims.tsx     |  2 +-
 .../components/ScrubberBar/ProgressBar.tsx    |  2 +-
 .../components/ScrubberBar/TimeCursor.tsx     | 13 ++---
 5 files changed, 60 insertions(+), 12 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/ButtonRepeat.tsx

diff --git a/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/ButtonRepeat.tsx b/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/ButtonRepeat.tsx
new file mode 100644
index 0000000000..dc8dcd05cd
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/ButtonRepeat.tsx
@@ -0,0 +1,53 @@
+import React, {
+  useContext,
+  useEffect,
+  useState
+} from "react";
+
+import {
+  faArrowsRepeat
+} from "@fortawesome/pro-solid-svg-icons";
+
+import { Button } from "components/common";
+import { ONE_MS } from "../../utilities";
+import { 
+  VideoElementContext,
+  TrimContext
+} from '../../contexts';
+
+
+export function ButtonRepeat (){
+  const vidEl = useContext(VideoElementContext);
+  const trimVals = useContext(TrimContext);
+  const [isRepeatOn, setIsRepeat] = useState<boolean>(true);
+
+  const toggleRepeat = ()=>{
+    setIsRepeat((curr)=>(!curr));
+  }
+
+  useEffect(()=>{
+    function handleRepeat(){
+      if(isRepeatOn && vidEl !==null && trimVals!==null){
+        const currentMs = Math.round(vidEl.currentTime * 1000)
+        if(currentMs > trimVals.trimEndMs
+          || currentMs < trimVals.trimStartMs
+        ){
+          vidEl.currentTime = trimVals.trimStartMs/1000 + ONE_MS
+        }
+      }
+    }
+    vidEl?.addEventListener("timeupdate", handleRepeat);
+    return ()=>{
+      vidEl?.removeEventListener("timeupdate", handleRepeat);
+    };
+  },[isRepeatOn, vidEl, trimVals]);
+
+  return(
+    <Button
+      className="button-repeat"
+      icon={ faArrowsRepeat }
+      variant={ isRepeatOn ? "primary":"secondary"}
+      onClick={toggleRepeat}
+    />
+  )
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/ControlBar.tsx b/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/ControlBar.tsx
index ea6be72e49..460a5bf69f 100644
--- a/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/ControlBar.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/ControlBar.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { STATE_STATUSES } from "../../reducer";
 import { ButtonPlaypause } from './ButtonPlaypause';
+import { ButtonRepeat } from './ButtonRepeat';
 import { ButtonMute } from './ButtonMute';
 import { LabelTimeDuration } from  "./LabelTimeDuration"
 import { SelectTrim } from './SelectTrims';
@@ -22,6 +23,7 @@ export const ControlBar = ({
       <div className="d-flex w-100 justify-content-between mt-3 flex-wrap">
         <div className="playpause-external d-flex align-items-center flex-wrap mb-2">
           <ButtonPlaypause />
+          <ButtonRepeat />
           <ButtonMute />
           <LabelTimeDuration />
         </div>
diff --git a/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/SelectTrims.tsx b/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/SelectTrims.tsx
index 830d5f2911..29822b40a1 100644
--- a/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/SelectTrims.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ControlBar/SelectTrims.tsx
@@ -11,7 +11,7 @@ export const SelectTrim = ()=>{
   const trimValues = useContext(TrimContext);
 
   const handleSetTrimDuration = useCallback((selected: string)=>{
-    console.log(`trimDurationString: ${selected}`);
+    // console.log(`trimDurationString: ${selected}`);
     if (trimValues!==null) {
       trimValues.onChange({
         trimStartMs: trimValues.trimStartMs,
diff --git a/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ScrubberBar/ProgressBar.tsx b/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ScrubberBar/ProgressBar.tsx
index 1d96171c5f..943143e400 100644
--- a/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ScrubberBar/ProgressBar.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ScrubberBar/ProgressBar.tsx
@@ -7,7 +7,7 @@ import React, {
 import { VideoElementContext } from '../../contexts';
 
 export const ProgressBar = ()=>{
-    // console.log("reRENDERING -------- ScrubberBar");
+  // console.log("reRENDERING -------- ScrubberBar");
 
   const vidEl = useContext(VideoElementContext);
   const [buffered, setBuffered] = useState<number>(0);
diff --git a/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ScrubberBar/TimeCursor.tsx b/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ScrubberBar/TimeCursor.tsx
index 9761959c80..10c6a4a522 100644
--- a/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ScrubberBar/TimeCursor.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoPlayerQuickTrim/components/ScrubberBar/TimeCursor.tsx
@@ -10,16 +10,9 @@ import React, {
 import { VideoElementContext } from '../../contexts';
 import { withScrubbing, withScrubbingPropsI } from './withScrubbing';
 
-interface TimeCursorPropsI {
-  debug?: boolean
-}
 
-export const TimeCursor = ({
-  debug: propsDebug = false,
-  ...rest
-}:TimeCursorPropsI)=>{
-  const debug = false || propsDebug;
-  if (debug) console.log("reRENDERING ----- Time Cursor");
+export const TimeCursor = (props:{})=>{
+  // console.log("reRENDERING ----- Time Cursor");
 
   const videoElement = useContext(VideoElementContext);
   const [timeCursorOffset, setTimeCursorOffset] = useState(0);
@@ -90,7 +83,7 @@ export const TimeCursor = ({
       onScrubStart={handleOnScrubStart}
       onScrubEnd={handleOnScrubEnd}
       scrubPosition={timeCursorOffset}
-      {...rest}
+      {...props}
     />
   );
 };