Merge pull request #645 from Stremio/feat/seek-player-action

feat(player): add seek action and handle seeking player state

package-lock.json

@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.16.0",
                 "@sentry/browser": "6.13.3",
                 "@stremio/stremio-colors": "5.0.1",
-                "@stremio/stremio-core-web": "0.47.8",
+                "@stremio/stremio-core-web": "0.48.0",
                 "@stremio/stremio-icons": "5.2.0",
                 "@stremio/stremio-video": "0.0.46",
                 "a-color-picker": "1.2.1",
@@ -3131,9 +3131,9 @@
             "license": "MIT"
         },
         "node_modules/@stremio/stremio-core-web": {
-            "version": "0.47.8",
+            "version": "0.48.0",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.47.8.tgz",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.0.tgz",
-            "integrity": "sha512-X5yKSCm5DXR7U6oIO+2kaI1q3TnaWP6df/HFa1RBi/uw+8IYk+FB8GWpryxXyisJTFiUfQgcJDIlHROauaBQkg==",
+            "integrity": "sha512-UEVxb5weAIZ22Hz0iNKM8O1QkALcLShG9AyCe1P2WhZhyiridbwE7MtP5itBtLcLm9f/D6UeRrpUWMCS01n18Q==",
             "dependencies": {
                 "@babel/runtime": "7.24.1"
             }

package.json

@@ -16,7 +16,7 @@
         "@babel/runtime": "7.16.0",
         "@sentry/browser": "6.13.3",
         "@stremio/stremio-colors": "5.0.1",
-        "@stremio/stremio-core-web": "0.47.8",
+        "@stremio/stremio-core-web": "0.48.0",
         "@stremio/stremio-icons": "5.2.0",
         "@stremio/stremio-video": "0.0.46",
         "a-color-picker": "1.2.1",

src/routes/Player/Player.js

@@ -34,7 +34,7 @@ const Player = ({ urlParams, queryParams }) => {
         return queryParams.has('forceTranscoding');
     }, [queryParams]);
 
-    const [player, videoParamsChanged, timeChanged, pausedChanged, ended, nextVideo] = usePlayer(urlParams);
+    const [player, videoParamsChanged, timeChanged, seek, pausedChanged, ended, nextVideo] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
     const streamingServer = useStreamingServer();
     const statistics = useStatistics(player, streamingServer);
@@ -42,6 +42,8 @@ const Player = ({ urlParams, queryParams }) => {
     const routeFocused = useRouteFocused();
     const toast = useToast();
 
+    const [seeking, setSeeking] = React.useState(false);
+
     const [casting, setCasting] = React.useState(() => {
         return chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED;
     });
@@ -136,6 +138,7 @@ const Player = ({ urlParams, queryParams }) => {
 
     const onPlayRequested = React.useCallback(() => {
         video.setProp('paused', false);
+        setSeeking(false);
     }, []);
 
     const onPlayRequestedDebounced = React.useCallback(debounce(onPlayRequested, 200), []);
@@ -159,7 +162,8 @@ const Player = ({ urlParams, queryParams }) => {
 
     const onSeekRequested = React.useCallback((time) => {
         video.setProp('time', time);
-    }, []);
+        seek(time, video.state.duration, video.state.manifest?.name);
+    }, [video.state.duration, video.state.manifest]);
 
     const onPlaybackSpeedChanged = React.useCallback((rate) => {
         video.setProp('playbackSpeed', rate);
@@ -342,12 +346,8 @@ const Player = ({ urlParams, queryParams }) => {
     }, [settings.subtitlesOutlineColor]);
 
     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.time, video.state.duration, video.state.manifest, seeking]);
-            video.state.manifest !== null && typeof video.state.manifest.name === 'string') {
-            timeChanged(video.state.time, video.state.duration, video.state.manifest.name);
-        }
-    }, [video.state.time, video.state.duration, video.state.manifest]);
 
     React.useEffect(() => {
         if (video.state.paused !== null) {
@@ -468,6 +468,7 @@ const Player = ({ urlParams, queryParams }) => {
                     if (!menusOpen && !nextVideoPopupOpen && video.state.paused !== null) {
                         if (video.state.paused) {
                             onPlayRequested();
+                            setSeeking(false);
                         } else {
                             onPauseRequested();
                         }
@@ -478,6 +479,7 @@ const Player = ({ urlParams, queryParams }) => {
                 case 'ArrowRight': {
                     if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
                         const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
+                        setSeeking(true);
                         onSeekRequested(video.state.time + seekDuration);
                     }
 
@@ -486,6 +488,7 @@ const Player = ({ urlParams, queryParams }) => {
                 case 'ArrowLeft': {
                     if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
                         const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
+                        setSeeking(true);
                         onSeekRequested(video.state.time - seekDuration);
                     }
 
@@ -553,6 +556,11 @@ const Player = ({ urlParams, queryParams }) => {
                 }
             }
         };
+        const onKeyUp = (event) => {
+            if (event.code === 'ArrowRight' || event.code === 'ArrowLeft') {
+                setSeeking(false);
+            }
+        };
         const onWheel = ({ deltaY }) => {
             if (deltaY > 0) {
                 if (!menusOpen && video.state.volume !== null) {
@@ -566,10 +574,12 @@ const Player = ({ urlParams, queryParams }) => {
         };
         if (routeFocused) {
             window.addEventListener('keydown', onKeyDown);
+            window.addEventListener('keyup', onKeyUp);
             window.addEventListener('wheel', onWheel);
         }
         return () => {
             window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
             window.removeEventListener('wheel', onWheel);
         };
     }, [player.metaItem, player.selected, streamingServer.statistics, settings.seekTimeDuration, settings.seekShortTimeDuration, routeFocused, menusOpen, nextVideoPopupOpen, video.state.paused, video.state.time, video.state.volume, video.state.audioTracks, video.state.subtitlesTracks, video.state.extraSubtitlesTracks, video.state.playbackSpeed, toggleSubtitlesMenu, toggleInfoMenu, toggleVideosMenu, toggleStatisticsMenu]);

src/routes/Player/usePlayer.d.ts

@@ -1,2 +1,11 @@
-declare const usePlayer: (urlParams: UrlParams, videoParams: any) => [Player, (time: number, duration: number, device: string) => void, (paused: boolean) => void, () => void, () => void];
+declare const usePlayer: (urlParams: UrlParams) => [
+    Player,
+    videoParamsChanged: (videoParams: { hash: string | null, size: number | null, filename: string | null }) => void,
+    timeChanged: (time: number, duration: number, device: string) => void,
+    seek: (time: number, duration: number, device: string) => void,
+    pausedChanged: (paused: boolean) => void, () => void, () => void,
+    ended: () => void,
+    nextVideo: () => void,
+];
+
 export = usePlayer;

src/routes/Player/usePlayer.js

@@ -96,14 +96,37 @@ const usePlayer = (urlParams) => {
         }, 'player');
     }, []);
     const timeChanged = React.useCallback((time, duration, device) => {
-        core.transport.dispatch({
+        if (typeof time === 'number' && typeof duration === 'number' && typeof device === 'string') {
-            action: 'Player',
+            core.transport.dispatch({
-            args: {
+                action: 'Player',
-                action: 'TimeChanged',
+                args: {
-                args: { time, duration, device }
+                    action: 'TimeChanged',
-            }
+                    args: {
-        }, 'player');
+                        time: Math.round(time),
+                        duration,
+                        device,
+                    }
+                }
+            }, 'player');
+        }
     }, []);
+
+    const seek = React.useCallback((time, duration, device) => {
+        if (typeof time === 'number' && typeof duration === 'number' && typeof device === 'string') {
+            core.transport.dispatch({
+                action: 'Player',
+                args: {
+                    action: 'Seek',
+                    args: {
+                        time: Math.round(time),
+                        duration,
+                        device,
+                    }
+                }
+            }, 'player');
+        }
+    }, []);
+
     const ended = React.useCallback(() => {
         core.transport.dispatch({
             action: 'Player',
@@ -129,8 +152,9 @@ const usePlayer = (urlParams) => {
             }
         }, 'player');
     }, []);
+
     const player = useModelState({ model: 'player', action, map });
-    return [player, videoParamsChanged, timeChanged, pausedChanged, ended, nextVideo];
+    return [player, videoParamsChanged, timeChanged, seek, pausedChanged, ended, nextVideo];
 };
 
 module.exports = usePlayer;