Merge pull request #5827 from thornbill/router-v13-unstable

src/RootApp.tsx

@@ -1,4 +1,3 @@
-import { History } from '@remix-run/router';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
@@ -9,11 +8,11 @@ import { queryClient } from 'utils/query/queryClient';
 
 import RootAppRouter from 'RootAppRouter';
 
-const RootApp = ({ history }: Readonly<{ history: History }>) => (
+const RootApp = () => (
     <QueryClientProvider client={queryClient}>
         <ApiProvider>
             <WebConfigProvider>
-                <RootAppRouter history={history} />
+                <RootAppRouter />
             </WebConfigProvider>
         </ApiProvider>
         <ReactQueryDevtools initialIsOpen={false} />

src/RootAppRouter.tsx

@@ -1,5 +1,4 @@
 
-import { History } from '@remix-run/router';
 import React from 'react';
 import {
     RouterProvider,
@@ -8,13 +7,13 @@ import {
     useLocation
 } from 'react-router-dom';
 
+import { DASHBOARD_APP_PATHS, DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
 import { EXPERIMENTAL_APP_ROUTES } from 'apps/experimental/routes/routes';
+import { STABLE_APP_ROUTES } from 'apps/stable/routes/routes';
 import AppHeader from 'components/AppHeader';
 import Backdrop from 'components/Backdrop';
-import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
-import { DASHBOARD_APP_PATHS, DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
+import { createRouterHistory } from 'components/router/routerHistory';
 import UserThemeProvider from 'themes/UserThemeProvider';
-import { STABLE_APP_ROUTES } from 'apps/stable/routes/routes';
 
 const layoutMode = localStorage.getItem('layout');
 const isExperimentalLayout = layoutMode === 'experimental';
@@ -29,9 +28,9 @@ const router = createHashRouter([
     }
 ]);
 
-export default function RootAppRouter({ history }: Readonly<{ history: History}>) {
-    useLegacyRouterSync({ router, history });
+export const history = createRouterHistory(router);
 
+export default function RootAppRouter() {
     return <RouterProvider router={router} />;
 }
 

src/apps/experimental/routes/routes.tsx

@@ -4,6 +4,7 @@ import { RouteObject, redirect } from 'react-router-dom';
 import { REDIRECTS } from 'apps/dashboard/routes/_redirects';
 import ConnectionRequired from 'components/ConnectionRequired';
 import { toAsyncPageRoute } from 'components/router/AsyncRoute';
+import BangRedirect from 'components/router/BangRedirect';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 import { toRedirectRoute } from 'components/router/Redirect';
 import ErrorBoundary from 'components/router/ErrorBoundary';
@@ -39,6 +40,11 @@ export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
         ]
     },
 
+    {
+        path: '!/*',
+        Component: BangRedirect
+    },
+
     /* Redirects for old paths */
     ...REDIRECTS.map(toRedirectRoute)
 ];

src/apps/stable/routes/routes.tsx

@@ -12,6 +12,7 @@ import AppLayout from '../AppLayout';
 import { REDIRECTS } from './_redirects';
 import { ASYNC_USER_ROUTES } from './asyncRoutes';
 import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
+import BangRedirect from 'components/router/BangRedirect';
 
 export const STABLE_APP_ROUTES: RouteObject[] = [
     {
@@ -34,6 +35,11 @@ export const STABLE_APP_ROUTES: RouteObject[] = [
         ]
     },
 
+    {
+        path: '!/*',
+        Component: BangRedirect
+    },
+
     /* Redirects for old paths */
     ...REDIRECTS.map(toRedirectRoute)
 ];

src/components/dialogHelper/dialogHelper.js

@@ -1,11 +1,12 @@
-import { history } from '../router/appRouter';
 import focusManager from '../focusManager';
 import browser from '../../scripts/browser';
 import layoutManager from '../layoutManager';
 import inputManager from '../../scripts/inputManager';
 import { toBoolean } from '../../utils/string.ts';
 import dom from '../../scripts/dom';
 
+import { history } from 'RootAppRouter';
+
 import './dialoghelper.scss';
 import '../../styles/scrollstyles.scss';
 

src/components/router/BangRedirect.tsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+
+const BangRedirect = () => {
+    const location = useLocation();
+
+    const to = useMemo(() => {
+        const _to = {
+            search: location.search,
+            hash: location.hash
+        };
+
+        if (location.pathname.startsWith('/!/')) {
+            return { ..._to, pathname: location.pathname.substring(2) };
+        } else if (location.pathname.startsWith('/!')) {
+            return { ..._to, pathname: location.pathname.replace(/^\/!/, '/') };
+        } else if (location.pathname.startsWith('!')) {
+            return { ..._to, pathname: location.pathname.substring(1) };
+        }
+    }, [ location ]);
+
+    if (!to) return null;
+
+    console.warn('[BangRedirect] You are using a deprecated URL format. This will stop working in a future Jellyfin update.');
+
+    return (
+        <Navigate
+            replace
+            to={to}
+        />
+    );
+};
+
+export default BangRedirect;

src/components/router/appRouter.js

@@ -1,5 +1,5 @@
 import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
-import { Action, createHashHistory } from 'history';
+import { Action } from 'history';
 
 import { appHost } from '../apphost';
 import { clearBackdrop, setBackdropTransparency } from '../backdrop/backdrop';
@@ -15,8 +15,7 @@ import { queryClient } from 'utils/query/queryClient';
 import { getItemQuery } from 'hooks/useItem';
 import { toApi } from 'utils/jellyfin-apiclient/compat';
 import { ConnectionState } from 'utils/jellyfin-apiclient/ConnectionState.ts';
-
-export const history = createHashHistory();
+import { history } from 'RootAppRouter';
 
 /**
  * Page types of "no return" (when "Go back" should behave differently, probably quitting the application).

src/components/router/routerHistory.ts

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Router, RouterState } from '@remix-run/router';
+import type { History, Listener, To } from 'history';
+
+import Events, { type Event } from 'utils/events';
+
+const HISTORY_UPDATE_EVENT = 'HISTORY_UPDATE';
+
+export class RouterHistory implements History {
+    _router: Router;
+    createHref: (arg: any) => string;
+
+    constructor(router: Router) {
+        this._router = router;
+
+        this._router.subscribe(state => {
+            console.debug('[RouterHistory] history update', state);
+            Events.trigger(document, HISTORY_UPDATE_EVENT, [ state ]);
+        });
+
+        this.createHref = router.createHref;
+    }
+
+    get action() {
+        return this._router.state.historyAction;
+    }
+
+    get location() {
+        return this._router.state.location;
+    }
+
+    back() {
+        void this._router.navigate(-1);
+    }
+
+    forward() {
+        void this._router.navigate(1);
+    }
+
+    go(delta: number) {
+        void this._router.navigate(delta);
+    }
+
+    push(to: To, state?: any) {
+        void this._router.navigate(to, { state });
+    }
+
+    replace(to: To, state?: any): void {
+        void this._router.navigate(to, { state, replace: true });
+    }
+
+    block() {
+        // NOTE: We don't seem to use this functionality, so leaving it unimplemented.
+        throw new Error('`history.block()` is not implemented');
+        return () => undefined;
+    }
+
+    listen(listener: Listener) {
+        const compatListener = (_e: Event, state: RouterState) => {
+            return listener({ action: state.historyAction, location: state.location });
+        };
+
+        Events.on(document, HISTORY_UPDATE_EVENT, compatListener);
+
+        return () => Events.off(document, HISTORY_UPDATE_EVENT, compatListener);
+    }
+}
+
+export const createRouterHistory = (router: Router): History => {
+    return new RouterHistory(router);
+};
+
+/* eslint-enable @typescript-eslint/no-explicit-any */

src/index.jsx

@@ -22,7 +22,7 @@ import { getPlugins } from './scripts/settings/webSettings';
 import { pluginManager } from './components/pluginManager';
 import packageManager from './components/packageManager';
 import './components/playback/displayMirrorManager.ts';
-import { appRouter, history } from './components/router/appRouter';
+import { appRouter } from './components/router/appRouter';
 import './elements/emby-button/emby-button';
 import './scripts/autoThemes';
 import './components/themeMediaPlayer';
@@ -39,6 +39,7 @@ import './legacy/vendorStyles';
 import { currentSettings } from './scripts/settings/userSettings';
 import taskButton from './scripts/taskbutton';
 import RootApp from './RootApp.tsx';
+import { history } from 'RootAppRouter';
 
 import './styles/livetv.scss';
 import './styles/dashboard.scss';