Merge pull request #551 from storytold/feature/comp/playbar-w-trim

repeat button done

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}
+    />
+  )
+}

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>

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,

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);

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}
     />
   );
 };