Merge branch 'development' into feat/react-router

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "stremio",
-    "version": "5.0.0-beta.22",
+    "version": "5.0.0-beta.23",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "stremio",
-            "version": "5.0.0-beta.22",
+            "version": "5.0.0-beta.23",
             "license": "gpl-2.0",
             "dependencies": {
                 "@babel/runtime": "7.26.0",

package.json

@@ -1,7 +1,7 @@
 {
     "name": "stremio",
     "displayName": "Stremio",
-    "version": "5.0.0-beta.22",
+    "version": "5.0.0-beta.23",
     "author": "Smart Code OOD",
     "private": true,
     "license": "gpl-2.0",

src/common/useFullscreen.ts

@@ -22,7 +22,9 @@ const useFullscreen = () => {
         if (shell.active) {
             shell.send('win-set-visibility', { fullscreen: false });
         } else {
-            document.exitFullscreen();
+            if (document.fullscreenElement === document.documentElement) {
+                document.exitFullscreen();
+            }
         }
     }, []);
 

src/routes/Player/Player.js

@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
-const { useParams, useNavigate } = require('react-router');
+const { useParams, useNavigate, replace } = require('react-router');
 const { useSearchParams } = require('react-router-dom');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
@@ -92,6 +92,8 @@ const Player = () => {
     const defaultAudioTrackSelected = React.useRef(false);
     const [error, setError] = React.useState(null);
 
+    const isNavigating = React.useRef(false);
+
     const onImplementationChanged = React.useCallback(() => {
         video.setProp('subtitlesSize', settings.subtitlesSize);
         video.setProp('subtitlesOffset', settings.subtitlesOffset);
@@ -105,7 +107,21 @@ const Player = () => {
         video.setProp('extraSubtitlesOutlineColor', settings.subtitlesOutlineColor);
     }, [settings.subtitlesSize, settings.subtitlesOffset, settings.subtitlesTextColor, settings.subtitlesBackgroundColor, settings.subtitlesOutlineColor]);
 
+    const handleNextVideoNavigation = React.useCallback((deepLinks) => {
+        if (deepLinks.player) {
+            isNavigating.current = true;
+            navigate(deepLinks.player.replace('#', '', { replace: true }));
+        } else if (deepLinks.metaDetailsStreams) {
+            isNavigating.current = true;
+            navigate(deepLinks.metaDetailsStreams.replace('#', '', { replace: true }));
+        }
+    }, []);
+
     const onEnded = React.useCallback(() => {
+        if (isNavigating.current) {
+            return;
+        }
+
         ended();
         if (player.nextVideo !== null) {
             onNextVideoRequested();
@@ -222,17 +238,9 @@ const Player = () => {
             nextVideo();
 
             const deepLinks = player.nextVideo.deepLinks;
-            if (deepLinks.metaDetailsStreams && deepLinks.player) {
-                navigate(deepLinks.metaDetailsStreams.replace('#', ''), { replace: true });
-                setTimeout(() => {
-                    navigate(deepLinks.player.replace('#', ''));
-                }, 0);
-            } else {
-                const navigateTo = deepLinks.player ?? deepLinks.metaDetailsStreams;
-                navigate(navigateTo.replace('#', ''));
-            }
+            handleNextVideoNavigation(deepLinks);
         }
-    }, [player.nextVideo]);
+    }, [player.nextVideo, handleNextVideoNavigation]);
 
     const onVideoClick = React.useCallback(() => {
         if (video.state.paused !== null) {
@@ -627,14 +635,7 @@ const Player = () => {
             video.events.off('extraSubtitlesTrackAdded', onExtraSubtitlesTrackAdded);
             video.events.off('implementationChanged', onImplementationChanged);
         };
-    }, [
-        onError,
-        onEnded,
-        onSubtitlesTrackLoaded,
-        onExtraSubtitlesTrackLoaded,
-        onExtraSubtitlesTrackAdded,
-        onImplementationChanged
-    ]);
+    }, []);
 
     React.useLayoutEffect(() => {
         return () => {

src/routes/Player/StatisticsMenu/StatisticsMenu.js

@@ -33,7 +33,7 @@ const StatisticsMenu = ({ className, peers, speed, completed, infoHash }) => {
                         Completed
                     </div>
                     <div className={styles['value']}>
-                        { completed } %
+                        { Math.min(completed, 100) } %
                     </div>
                 </div>
             </div>

src/routes/Search/styles.less

@@ -19,10 +19,12 @@
     .search-content {
         height: 100%;
         width: 100%;
+        padding: 0 1rem;
         overflow-y: auto;
 
         .search-row {
-            margin: 4rem 2rem;
+            margin-top: 1rem;
+            margin-bottom: 2rem;
         }
 
         .search-hints-wrapper {
@@ -272,7 +274,7 @@
     .search-container {
         .search-content {
             .search-row {
-                margin: 2rem 1rem;
+                margin-bottom: 1.5rem;
             }
 
             .search-row-poster, .search-row-square {
@@ -285,8 +287,10 @@
 
             .search-hints-wrapper {
                 margin-top: 4rem;
+
                 .search-hints-container {
                     padding: 4rem 2rem;
+
                     .search-hint-container {
                         padding: 0 1.5rem;
                     }