Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 07:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(Player): core seek action

Browse source
This commit is contained in:
Tim 2024-11-26 18:20:59 +01:00
parent 6ead608086
commit bd6367ef50
2 changed files with 32 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -160,27 +160,9 @@ const Player = ({ urlParams, queryParams }) => {
video.setProp('volume', volume); 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) => { const onSeekRequested = React.useCallback((time) => {
// 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); video.setProp('time', time);
if (video.state.time !== null && !isNaN(video.state.time) && seek(time, video.state.duration, video.state.manifest?.name);
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]); }, [video.state.time, video.state.duration, video.state.manifest]);
const onPlaybackSpeedChanged = React.useCallback((rate) => { const onPlaybackSpeedChanged = React.useCallback((rate) => {
@ -364,17 +346,7 @@ const Player = ({ urlParams, queryParams }) => {
}, [settings.subtitlesOutlineColor]); }, [settings.subtitlesOutlineColor]);
React.useEffect(() => { React.useEffect(() => {
if (video.state.time !== null && !isNaN(video.state.time) && !seeking && timeChanged(video.state.time, video.state.duration, video.state.manifest?.name);
video.state.duration !== null && !isNaN(video.state.duration) &&
video.state.manifest !== null && typeof video.state.manifest.name === 'string') {
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, seeking]); }, [video.state.time, video.state.duration, video.state.manifest, seeking]);
React.useEffect(() => { React.useEffect(() => {
@ -512,8 +484,8 @@ const Player = ({ urlParams, queryParams }) => {
case 'ArrowRight': { case 'ArrowRight': {
if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) { if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration; const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
!seeking && setSeeking(true); setSeeking(true);
video.setProp('time', video.state.time + seekDuration); onSeekRequested(video.state.time + seekDuration);
} }
break; break;
@ -526,8 +498,8 @@ const Player = ({ urlParams, queryParams }) => {
case 'ArrowLeft': { case 'ArrowLeft': {
if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) { if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration; const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
!seeking && setSeeking(true); setSeeking(true);
video.setProp('time', video.state.time - seekDuration); onSeekRequested(video.state.time - seekDuration);
} }
break; break;
@ -595,10 +567,7 @@ const Player = ({ urlParams, queryParams }) => {
} }
}; };
const onKeyUp = (event) => { 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') { if (event.code === 'ArrowRight' || event.code === 'ArrowLeft') {
console.warn('Key Up for Arrows! Stop seek!');
setSeeking(false); setSeeking(false);
} }
}; };

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

@ -96,25 +96,35 @@ const usePlayer = (urlParams) => {
}, 'player'); }, 'player');
}, []); }, []);
const timeChanged = React.useCallback((time, duration, device) => { const timeChanged = React.useCallback((time, duration, device) => {
console.log('Time changed triggered: '+ time); if (typeof time === 'number' && typeof duration === 'number' && typeof device === 'string') {
core.transport.dispatch({ core.transport.dispatch({
action: 'Player', action: 'Player',
args: { args: {
action: 'TimeChanged', action: 'TimeChanged',
args: { time: Math.round(time), duration, device } args: {
} time: Math.round(time),
}, 'player'); duration,
device,
}
}
}, 'player');
}
}, []); }, []);
const seek = React.useCallback((time, duration, device) => { const seek = React.useCallback((time, duration, device) => {
console.log('Seek triggered: ' + time); if (typeof time === 'number' && typeof duration === 'number' && typeof device === 'string') {
core.transport.dispatch({ core.transport.dispatch({
action: 'Player', action: 'Player',
args: { args: {
action: 'Seek', action: 'Seek',
args: { time: Math.round(time), duration, device } args: {
} time: Math.round(time),
}, 'player'); duration,
device,
}
}
}, 'player');
}
}, []); }, []);
const ended = React.useCallback(() => { const ended = React.useCallback(() => {