From 6ead60808693e68e2a2d9a80131dceca5bca8256 Mon Sep 17 00:00:00 2001 From: Lachezar Lechev Date: Mon, 25 Nov 2024 15:41:23 +0200 Subject: [PATCH] fix(payer): Seekbar action and arrow keys for Seek action Signed-off-by: Lachezar Lechev --- src/routes/Player/Player.js | 54 ++++++++++++++++++++++++++++------ src/routes/Player/usePlayer.js | 7 +++-- 2 files changed, 49 insertions(+), 12 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index e893a6c14..81111e8db 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -160,10 +160,28 @@ const Player = ({ urlParams, queryParams }) => { video.setProp('volume', volume); }, []); + // use only for SeekBar! + // Clicking on the SeekBar needs to send exactly 1 state change + // while sliding does nothing. + // In the other seek places, we need for the user to stop the seek (with arrow keys for example) const onSeekRequested = React.useCallback((time) => { - !seeking && setSeeking(true); + // make sure to update TimeChanged first + if (video.state.time !== null && !isNaN(video.state.time) && + video.state.duration !== null && !isNaN(video.state.duration) && + video.state.manifest !== null && typeof video.state.manifest.name === 'string') { + timeChanged(video.state.time, video.state.duration, video.state.manifest.name); + } + + setSeeking(true); video.setProp('time', time); - }, []); + if (video.state.time !== null && !isNaN(video.state.time) && + video.state.duration !== null && !isNaN(video.state.duration) && + video.state.manifest !== null && typeof video.state.manifest.name === 'string') { + console.error('here!'); + seek(time, video.state.duration, video.state.manifest.name); + } + setSeeking(false); + }, [video.state.time, video.state.duration, video.state.manifest]); const onPlaybackSpeedChanged = React.useCallback((rate) => { video.setProp('playbackSpeed', rate); @@ -349,12 +367,15 @@ const Player = ({ urlParams, queryParams }) => { if (video.state.time !== null && !isNaN(video.state.time) && video.state.duration !== null && !isNaN(video.state.duration) && video.state.manifest !== null && typeof video.state.manifest.name === 'string') { - seeking ? - seek(video.state.time, video.state.duration, video.state.manifest.name) - : + if (seeking) { + seek(video.state.time, video.state.duration, video.state.manifest.name); + // console.warn('Send Seek action'); + } else { timeChanged(video.state.time, video.state.duration, video.state.manifest.name); + // console.warn('Send TimeChanged action'); + } } - }, [video.state.time, video.state.duration, video.state.manifest]); + }, [video.state.time, video.state.duration, video.state.manifest, seeking]); React.useEffect(() => { if (video.state.paused !== null) { @@ -483,18 +504,30 @@ const Player = ({ urlParams, queryParams }) => { break; } + // make sure to set Seeking (if not set already) + // and update the time property to send the Seek Action + // accordingly. + // Continuously holding the arrow key should not trigger TimeChanged + // until releasing. case 'ArrowRight': { if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) { const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration; - onSeekRequested(video.state.time + seekDuration); + !seeking && setSeeking(true); + video.setProp('time', video.state.time + seekDuration); } break; } + // make sure to set Seeking (if not set already) + // and update the time property to send the Seek Action + // accordingly. + // Continuously holding the arrow key should not trigger TimeChanged + // until releasing. case 'ArrowLeft': { if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) { const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration; - onSeekRequested(video.state.time - seekDuration); + !seeking && setSeeking(true); + video.setProp('time', video.state.time - seekDuration); } break; @@ -562,8 +595,11 @@ const Player = ({ urlParams, queryParams }) => { } }; const onKeyUp = (event) => { + // stops the seeking propagation if user holds the arrow continually + // this ensures TimeCHanged is only send when you stop holding the button if (event.code === 'ArrowRight' || event.code === 'ArrowLeft') { - seeking && setSeeking(false); + console.warn('Key Up for Arrows! Stop seek!'); + setSeeking(false); } }; const onWheel = ({ deltaY }) => { diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js index dfdc9efb5..8a4b69873 100644 --- a/src/routes/Player/usePlayer.js +++ b/src/routes/Player/usePlayer.js @@ -81,7 +81,6 @@ const usePlayer = (urlParams) => { } }; } else { - console.warn('Player Unload triggered'); return { action: 'Unload' }; @@ -97,21 +96,23 @@ const usePlayer = (urlParams) => { }, 'player'); }, []); const timeChanged = React.useCallback((time, duration, device) => { + console.log('Time changed triggered: '+ time); core.transport.dispatch({ action: 'Player', args: { action: 'TimeChanged', - args: { time, duration, device } + args: { time: Math.round(time), duration, device } } }, 'player'); }, []); const seek = React.useCallback((time, duration, device) => { + console.log('Seek triggered: ' + time); core.transport.dispatch({ action: 'Player', args: { action: 'Seek', - args: { time, duration, device } + args: { time: Math.round(time), duration, device } } }, 'player'); }, []);