Feat/ Navigation with React Router V6

package.json

@@ -40,6 +40,8 @@
         "react-focus-lock": "2.13.2",
         "react-i18next": "^15.1.3",
         "react-is": "18.3.1",
+        "react-router": "6.30.0",
+        "react-router-dom": "6.30.0",
         "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
         "stremio-translations": "github:Stremio/stremio-translations#176c69f3bdede824f37979a046ee27cef355affc",
         "url": "0.11.4",

src/App/App.js

@@ -5,28 +5,21 @@ const React = require('react');
 const { useTranslation } = require('react-i18next');
 const { Router } = require('stremio-router');
 const { Core, Shell, Chromecast, DragAndDrop, KeyboardShortcuts, ServicesProvider, GamepadProvider } = require('stremio/services');
-const { NotFound } = require('stremio/routes');
 const { FileDropProvider, PlatformProvider, ToastProvider, TooltipProvider, ShortcutsProvider, CONSTANTS, withCoreSuspender, useShell, useBinaryState } = require('stremio/common');
 const ServicesToaster = require('./ServicesToaster');
-const DeepLinkHandler = require('./DeepLinkHandler');
 const SearchParamsHandler = require('./SearchParamsHandler');
 const { default: UpdaterBanner } = require('./UpdaterBanner');
 const { default: ShortcutsModal } = require('./ShortcutsModal');
 const { default: GamepadModal } = require('./GamepadModal');
 const ErrorDialog = require('./ErrorDialog');
-const withProtectedRoutes = require('./withProtectedRoutes');
-const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
 
-const RouterWithProtectedRoutes = withCoreSuspender(withProtectedRoutes(Router));
+const RouterWithProtectedRoutes = withCoreSuspender(Router);
 
 const App = () => {
     const { i18n } = useTranslation();
     const shell = useShell();
     const [gamepadSupportEnabled, setGamepadSupportEnabled] = React.useState(false);
-    const onPathNotMatch = React.useCallback(() => {
-        return NotFound;
-    }, []);
     const services = React.useMemo(() => {
         const core = new Core({
             appVersion: process.env.VERSION,
@@ -116,31 +109,6 @@ const App = () => {
         };
     }, []);
 
-    // Handle shell events
-    React.useEffect(() => {
-        const onOpenMedia = (data) => {
-            try {
-                const { protocol, hostname, pathname, searchParams } = new URL(data);
-                if (protocol === CONSTANTS.PROTOCOL) {
-                    if (hostname.length) {
-                        const transportUrl = `https://${hostname}${pathname}`;
-                        window.location.href = `#/addons?addon=${encodeURIComponent(transportUrl)}`;
-                    } else {
-                        window.location.href = `#${pathname}?${searchParams.toString()}`;
-                    }
-                }
-            } catch (e) {
-                console.error('Failed to open media:', e);
-            }
-        };
-
-        shell.on('open-media', onOpenMedia);
-
-        return () => {
-            shell.off('open-media', onOpenMedia);
-        };
-    }, []);
-
     React.useEffect(() => {
         const onCoreEvent = ({ event, args }) => {
             switch (event) {
@@ -238,13 +206,10 @@ const App = () => {
                                                         gamepadModalOpen && <GamepadModal onClose={closeGamepadModal}/>
                                                     }
                                                     <ServicesToaster />
-                                                    <DeepLinkHandler />
                                                     <SearchParamsHandler />
                                                     <UpdaterBanner className={styles['updater-banner-container']} />
                                                     <RouterWithProtectedRoutes
                                                         className={styles['router']}
-                                                        viewsConfig={routerViewsConfig}
-                                                        onPathNotMatch={onPathNotMatch}
                                                     />
                                                 </ShortcutsProvider>
                                             </GamepadProvider>

src/App/DeepLinkHandler.js

@@ -1,17 +1,20 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
+const { useNavigate } = require('react-router');
 const { withCoreSuspender, useStreamingServer } = require('stremio/common');
+const { default: toPath } = require('stremio/common/toPath');
 
 const DeepLinkHandler = () => {
+    const navigate = useNavigate();
     const streamingServer = useStreamingServer();
     React.useEffect(() => {
         if (streamingServer.torrent !== null) {
             const [, { type, content }] = streamingServer.torrent;
             if (type === 'Ready') {
                 const [, deepLinks] = content;
                 if (typeof deepLinks.metaDetailsVideos === 'string') {
-                    window.location = deepLinks.metaDetailsVideos;
+                    navigate(toPath(deepLinks.metaDetailsVideos));
                 }
             }
         }

src/App/OpenMediaHandler.tsx

@@ -0,0 +1,35 @@
+// Copyright (C) 2017-2026 Smart code 203358507
+
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+import { useShell, CONSTANTS } from 'stremio/common';
+
+const OpenMediaHandler = () => {
+    const navigate = useNavigate();
+    const shell = useShell();
+
+    useEffect(() => {
+        const onOpenMedia = (data: string) => {
+            try {
+                const { protocol, hostname, pathname, searchParams } = new URL(data);
+                if (protocol === CONSTANTS.PROTOCOL) {
+                    if (hostname.length) {
+                        const transportUrl = `https://${hostname}${pathname}`;
+                        navigate(`/addons?addon=${encodeURIComponent(transportUrl)}`);
+                    } else {
+                        navigate(`${pathname}?${searchParams.toString()}`);
+                    }
+                }
+            } catch (e) {
+                console.error('Failed to open media:', e);
+            }
+        };
+
+        shell.on('open-media', onOpenMedia);
+        return () => shell.off('open-media', onOpenMedia);
+    }, [navigate, shell]);
+
+    return null;
+};
+
+export default OpenMediaHandler;

src/common/index.js

@@ -21,6 +21,7 @@ const useModelState = require('./useModelState');
 const useNotifications = require('./useNotifications');
 const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
+const { default: useRouteFocused } = require('./useRouteFocused');
 const { default: useSettings } = require('./useSettings');
 const { default: useShell } = require('./useShell');
 const useStreamingServer = require('./useStreamingServer');
@@ -60,6 +61,7 @@ module.exports = {
     useNotifications,
     useOnScrollToBottom,
     useProfile,
+    useRouteFocused,
     useSettings,
     useShell,
     useStreamingServer,

src/common/routerPaths.tsx

@@ -0,0 +1,59 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import React from 'react';
+import routes from 'stremio/routes';
+
+export const routerPaths = [
+    {
+        path: '/intro',
+        element: <routes.Intro />,
+    },
+    {
+        path: '/discover/:transportUrl?/:type?/:catalogId?',
+        element: <routes.Discover />,
+    },
+    {
+        path: '/library/:type?',
+        element: <routes.Library />,
+    },
+    {
+        path: '/calendar/:year?/:month?',
+        element: <routes.Calendar />,
+    },
+    {
+        path: '/continuewatching/:type?',
+        element: <routes.Library />,
+    },
+    {
+        path: '/search',
+        element: <routes.Search />,
+    },
+    {
+        path: '/metadetails/:type?/:id?/:videoId?',
+        element: <routes.MetaDetails />,
+    },
+    {
+        path: '/detail/:type?/:id?/:videoId?',
+        element: <routes.MetaDetails />,
+    },
+    {
+        path: '/addons/:type?/:transportUrl?/:catalogId?',
+        element: <routes.Addons />,
+    },
+    {
+        path: '/settings',
+        element: <routes.Settings />,
+    },
+    {
+        path: '/player/:stream?/:streamTransportUrl?/:metaTransportUrl?/:type?/:id?/:videoId?',
+        element: <routes.Player />,
+    },
+    {
+        path: '/',
+        element: <routes.Board />,
+    },
+    {
+        path: '*',
+        element: <routes.NotFound />,
+    },
+];

src/common/toPath.ts

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2026 Smart code 203358507
+
+const toPath = (link: string): string => link.startsWith('#') ? link.slice(1) : link;
+
+export default toPath;

src/common/useModelState.js

@@ -5,7 +5,7 @@ const throttle = require('lodash.throttle');
 const { deepEqual } = require('fast-equals');
 const intersection = require('lodash.intersection');
 const { useCoreSuspender } = require('stremio/common/CoreSuspender');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const { useServices } = require('stremio/services');
 
 const useModelState = ({ action, ...args }) => {
@@ -32,17 +32,17 @@ const useModelState = ({ action, ...args }) => {
             }
         }
     );
-    React.useInsertionEffect(() => {
+    React.useLayoutEffect(() => {
         if (action) {
             core.transport.dispatch(action, model);
         }
     }, [action]);
-    React.useInsertionEffect(() => {
+    React.useLayoutEffect(() => {
         return () => {
             core.transport.dispatch({ action: 'Unload' }, model);
         };
     }, []);
-    React.useInsertionEffect(() => {
+    React.useLayoutEffect(() => {
         const onNewState = async (models) => {
             if (models.indexOf(model) === -1 && (!Array.isArray(deps) || intersection(deps, models).length === 0)) {
                 return;
@@ -67,7 +67,7 @@ const useModelState = ({ action, ...args }) => {
             core.transport.off('NewState', onNewStateThrottled);
         };
     }, [routeFocused]);
-    React.useInsertionEffect(() => {
+    React.useLayoutEffect(() => {
         mountedRef.current = true;
     }, []);
     return state;