From bd6367ef50632be879e8738e801ffb8b0af914b2 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Tue, 26 Nov 2024 18:20:59 +0100
Subject: [PATCH] refactor(Player): core seek action

---
 src/routes/Player/Player.js    | 43 +++++-----------------------------
 src/routes/Player/usePlayer.js | 42 ++++++++++++++++++++-------------
 2 files changed, 32 insertions(+), 53 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 81111e8db..f3147db82 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -160,27 +160,9 @@ 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) => {
-        // 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);
+        seek(time, video.state.duration, video.state.manifest?.name);
     }, [video.state.time, video.state.duration, video.state.manifest]);
 
     const onPlaybackSpeedChanged = React.useCallback((rate) => {
@@ -364,17 +346,7 @@ const Player = ({ urlParams, queryParams }) => {
     }, [settings.subtitlesOutlineColor]);
 
     React.useEffect(() => {
-        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') {
-            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');
-            }
-        }
+        !seeking && timeChanged(video.state.time, video.state.duration, video.state.manifest?.name);
     }, [video.state.time, video.state.duration, video.state.manifest, seeking]);
 
     React.useEffect(() => {
@@ -512,8 +484,8 @@ const Player = ({ urlParams, queryParams }) => {
                 case 'ArrowRight': {
                     if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
                         const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
-                        !seeking && setSeeking(true);
-                        video.setProp('time', video.state.time + seekDuration);
+                        setSeeking(true);
+                        onSeekRequested(video.state.time + seekDuration);
                     }
 
                     break;
@@ -526,8 +498,8 @@ const Player = ({ urlParams, queryParams }) => {
                 case 'ArrowLeft': {
                     if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
                         const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
-                        !seeking && setSeeking(true);
-                        video.setProp('time', video.state.time - seekDuration);
+                        setSeeking(true);
+                        onSeekRequested(video.state.time - seekDuration);
                     }
 
                     break;
@@ -595,10 +567,7 @@ 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') {
-                console.warn('Key Up for Arrows! Stop seek!');
                 setSeeking(false);
             }
         };
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index 8a4b69873..05036f220 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -96,25 +96,35 @@ 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: Math.round(time), duration, device }
-            }
-        }, 'player');
+        if (typeof time === 'number' && typeof duration === 'number' && typeof device === 'string') {
+            core.transport.dispatch({
+                action: 'Player',
+                args: {
+                    action: 'TimeChanged',
+                    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: Math.round(time), duration, device }
-            }
-        }, 'player');
+        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(() => {