autopause fix

mentorpal · Oct 8, 2024 · 3b19c0e · 3b19c0e
1 parent d905d94
commit 3b19c0e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/client/src/components/video-player.tsx b/client/src/components/video-player.tsx
@@ -89,9 +89,9 @@ export default function VideoPlayer(args: VideoPlayerParams): JSX.Element {
       getUtterance(state.mentorsById[state.curMentor], UtteranceName.INTRO)
   );
   const [introEnded, setIntroEnded] = useState<boolean>(false);
-  const [paused, setPaused] = useState<boolean>(true);
+  const [firstPauseCleared, setFirstPauseCleared] = useState<boolean>(false);
   const { enabled: controlsEnabled, interacted } =
-    controlsDisableHelper(paused);
+    controlsDisableHelper(firstPauseCleared);
 
   useEffect(() => {
     if (isIntro && videoUrl) {
@@ -364,12 +364,15 @@ export default function VideoPlayer(args: VideoPlayerParams): JSX.Element {
       data-cy={"answer-video-player-wrapper"}
       style={{ width: "100%", height: "auto", justifyContent: "center" }}
       onMouseOver={() => {
+        console.log("mouse over");
         interacted();
       }}
       onClick={() => {
+        console.log("clicked");
         interacted();
       }}
       onMouseMove={() => {
+        console.log("mouse move");
         interacted();
       }}
     >
@@ -379,20 +382,16 @@ export default function VideoPlayer(args: VideoPlayerParams): JSX.Element {
         style={answerReactPlayerStyling}
         className="player-wrapper react-player-wrapper"
         data-cy="react-player-answer-video"
-        controls={controlsEnabled || paused}
+        controls={controlsEnabled || !firstPauseCleared}
         url={state.urlToPlay}
         pip={false}
-        onPause={() => {
-          interacted();
-          setPaused(true);
-        }}
         muted={false}
         onEnded={endVideo}
         ref={reactPlayerRef}
         onPlay={() => {
           onPlay();
-          if (paused) {
-            setPaused(false);
+          if (!firstPauseCleared) {
+            setFirstPauseCleared(true);
           }
         }}
         onProgress={({ playedSeconds }) => {
@@ -454,6 +453,7 @@ export default function VideoPlayer(args: VideoPlayerParams): JSX.Element {
           }
         }}
         onSeek={() => {
+          console.log("seeked");
           interacted();
         }}
         loop={false}

diff --git a/client/src/hooks/controls-disable-helper.tsx b/client/src/hooks/controls-disable-helper.tsx
@@ -12,7 +12,9 @@ export interface ControlsDisableHelper {
   interacted: () => void;
 }
 
-export function controlsDisableHelper(paused: boolean): ControlsDisableHelper {
+export function controlsDisableHelper(
+  firstPauseCleared: boolean
+): ControlsDisableHelper {
   const [enabled, setEnabled] = useState(true);
   const [lastInteractionTime, setLastInteractionTime] = useState(Date.now());
 
@@ -23,10 +25,11 @@ export function controlsDisableHelper(paused: boolean): ControlsDisableHelper {
         setEnabled(false);
       }
     },
-    enabled && !paused ? 1000 : null
+    enabled && firstPauseCleared ? 1000 : null
   );
 
   function interacted() {
+    console.log("interacted");
     setLastInteractionTime(Date.now());
     if (!enabled) {
       setEnabled(true);