Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(payer): Seekbar action and arrow keys for Seek action

Browse source 
Signed-off-by: Lachezar Lechev <lachezar@ambire.com>
This commit is contained in:
Lachezar Lechev 2024-11-25 15:41:23 +02:00
parent b6e141989c
commit 6ead608086
No known key found for this signature in database
GPG key ID: 69BDCB3ED8CE8037
2 changed files with 49 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/routes/Player/Player.js
View file

@ -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 }) => {

7
src/routes/Player/usePlayer.js
View file

@ -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');
}, []);