diff --git a/client/src/components/video-player.tsx b/client/src/components/video-player.tsx index 8ced0ef0..b0899c2d 100644 --- 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(false); - const [paused, setPaused] = useState(true); + const [firstPauseCleared, setFirstPauseCleared] = useState(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 index afbc9d55..11ba52b2 100644 --- 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);