Merge pull request #473 from Stremio/update-stremio-video

update stremio-video
Stremio · Oct 13, 2023 · 5708451 · 5708451
2 parents 0c02a68 + 585315d
commit 5708451
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,9 +15,9 @@
         "@babel/runtime": "7.16.0",
         "@sentry/browser": "6.13.3",
         "@stremio/stremio-colors": "5.0.1",
-        "@stremio/stremio-core-web": "0.44.23",
+        "@stremio/stremio-core-web": "0.44.25",
         "@stremio/stremio-icons": "5.0.0-beta.3",
-        "@stremio/stremio-video": "0.0.24",
+        "@stremio/stremio-video": "0.0.25-rc.2",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
         "buffer": "6.0.3",

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
@@ -33,6 +33,28 @@ const Player = ({ urlParams, queryParams }) => {
             queryParams.has('maxAudioChannels') ? parseInt(queryParams.get('maxAudioChannels'), 10) : null
         ];
     }, [queryParams]);
+    const [player, videoParamsChanged, timeChanged, pausedChanged, ended] = usePlayer(urlParams);
+    const [settings, updateSettings] = useSettings();
+    const streamingServer = useStreamingServer();
+    const routeFocused = useRouteFocused();
+    const toast = useToast();
+    const [, , , toggleFullscreen] = useFullscreen();
+    const [casting, setCasting] = React.useState(() => {
+        return chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED;
+    });
+    const [immersed, setImmersed] = React.useState(true);
+    const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
+    const [optionsMenuOpen, , closeOptionsMenu, toggleOptionsMenu] = useBinaryState(false);
+    const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
+    const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
+    const [speedMenuOpen, , closeSpeedMenu, toggleSpeedMenu] = useBinaryState(false);
+    const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
+    const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
+    const [statisticsMenuOpen, , closeStatisticsMenu, toggleStatisticsMenu] = useBinaryState(false);
+    const nextVideoPopupDismissed = React.useRef(false);
+    const defaultSubtitlesSelected = React.useRef(false);
+    const defaultAudioTrackSelected = React.useRef(false);
+    const [error, setError] = React.useState(null);
     const [videoState, setVideoState] = React.useReducer(
         (videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
         {
@@ -66,28 +88,6 @@ const Player = ({ urlParams, queryParams }) => {
             extraSubtitlesOutlineColor: null
         }
     );
-    const [player, timeChanged, pausedChanged, ended] = usePlayer(urlParams, videoState.videoParams);
-    const [settings, updateSettings] = useSettings();
-    const streamingServer = useStreamingServer();
-    const routeFocused = useRouteFocused();
-    const toast = useToast();
-    const [, , , toggleFullscreen] = useFullscreen();
-    const [casting, setCasting] = React.useState(() => {
-        return chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED;
-    });
-    const [immersed, setImmersed] = React.useState(true);
-    const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
-    const [optionsMenuOpen, , closeOptionsMenu, toggleOptionsMenu] = useBinaryState(false);
-    const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
-    const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
-    const [speedMenuOpen, , closeSpeedMenu, toggleSpeedMenu] = useBinaryState(false);
-    const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
-    const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
-    const [statisticsMenuOpen, , closeStatisticsMenu, toggleStatisticsMenu] = useBinaryState(false);
-    const nextVideoPopupDismissed = React.useRef(false);
-    const defaultSubtitlesSelected = React.useRef(false);
-    const defaultAudioTrackSelected = React.useRef(false);
-    const [error, setError] = React.useState(null);
     const videoRef = React.useRef(null);
     const dispatch = React.useCallback((action, options) => {
         if (videoRef.current !== null) {
@@ -353,6 +353,9 @@ const Player = ({ urlParams, queryParams }) => {
             pausedChanged(videoState.paused);
         }
     }, [videoState.paused]);
+    React.useEffect(() => {
+        videoParamsChanged(videoState.videoParams);
+    }, [videoState.videoParams]);
     React.useEffect(() => {
         if (!!settings.bingeWatching && player.nextVideo !== null && !nextVideoPopupDismissed.current) {
             if (videoState.time !== null && videoState.duration !== null && videoState.time < videoState.duration && (videoState.duration - videoState.time) <= settings.nextVideoNotificationDuration) {

diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
@@ -32,7 +32,7 @@ const map = (player) => ({
         player.metaItem,
 });
 
-const usePlayer = (urlParams, videoParams) => {
+const usePlayer = (urlParams) => {
     const { core } = useServices();
     const { decodeStream } = useCoreSuspender();
     const stream = decodeStream(urlParams.stream);
@@ -44,7 +44,6 @@ const usePlayer = (urlParams, videoParams) => {
                     model: 'Player',
                     args: {
                         stream,
-                        videoParams,
                         streamRequest: typeof urlParams.streamTransportUrl === 'string' && typeof urlParams.type === 'string' && typeof urlParams.videoId === 'string' ?
                             {
                                 base: urlParams.streamTransportUrl,
@@ -86,7 +85,16 @@ const usePlayer = (urlParams, videoParams) => {
                 action: 'Unload'
             };
         }
-    }, [urlParams, videoParams]);
+    }, [urlParams]);
+    const videoParamsChanged = React.useCallback((videoParams) => {
+        core.transport.dispatch({
+            action: 'Player',
+            args: {
+                action: 'VideoParamsChanged',
+                args: { videoParams }
+            }
+        }, 'player');
+    }, []);
     const timeChanged = React.useCallback((time, duration, device) => {
         core.transport.dispatch({
             action: 'Player',
@@ -114,7 +122,7 @@ const usePlayer = (urlParams, videoParams) => {
         }, 'player');
     }, []);
     const player = useModelState({ model: 'player', action, map });
-    return [player, timeChanged, pausedChanged, ended];
+    return [player, videoParamsChanged, timeChanged, pausedChanged, ended];
 };
 
 module.exports = usePlayer;