Shell: Fix binge watching flow

src/routes/Player/Player.js

@@ -114,17 +114,22 @@ const Player = ({ urlParams, queryParams }) => {
     }, []);
 
     const onEnded = React.useCallback(() => {
+        // here we need to explicitly check for isNavigating.current
+        // the ended event can be called multiple times by MPV inside Shell
         if (isNavigating.current) {
             return;
         }
 
         ended();
-        if (player.nextVideo !== null) {
-            onNextVideoRequested();
+        if (window.playerNextVideo !== null) {
+            nextVideo();
+
+            const deepLinks = window.playerNextVideo.deepLinks;
+            handleNextVideoNavigation(deepLinks);
         } else {
             window.history.back();
         }
-    }, [player.nextVideo, onNextVideoRequested]);
+    }, []);
 
     const onError = React.useCallback((error) => {
         console.error('Player', error);
@@ -394,6 +399,14 @@ const Player = ({ urlParams, queryParams }) => {
                 closeNextVideoPopup();
             }
         }
+        if (player.nextVideo) {
+            // This is a workaround for the fact that when we call onEnded nextVideo from the player is already set to null since core unloads the stream
+            // we explicitly set it to a global variable so we can access it in the onEnded function
+            // this is not a good solution but it works for now
+            window.playerNextVideo = player.nextVideo;
+        } else {
+            window.playerNextVideo = null;
+        }
     }, [player.nextVideo, video.state.time, video.state.duration]);
 
     React.useEffect(() => {
@@ -429,6 +442,9 @@ const Player = ({ urlParams, queryParams }) => {
         defaultSubtitlesSelected.current = false;
         defaultAudioTrackSelected.current = false;
         nextVideoPopupDismissed.current = false;
+        // we need a timeout here to make sure that previous page unloads and the new one loads
+        // avoiding race conditions and flickering
+        setTimeout(() => isNavigating.current = false, 1000);
     }, [video.state.stream]);
 
     React.useEffect(() => {