mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Unify routers and use lazy for app layouts
This commit is contained in:
parent
735f8b06ce
commit
175b2d6c85
8 changed files with 33 additions and 87 deletions
|
@ -1,4 +1,3 @@
|
||||||
import loadable from '@loadable/component';
|
|
||||||
import { History } from '@remix-run/router';
|
import { History } from '@remix-run/router';
|
||||||
import { QueryClientProvider } from '@tanstack/react-query';
|
import { QueryClientProvider } from '@tanstack/react-query';
|
||||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
||||||
|
@ -8,26 +7,17 @@ import { ApiProvider } from 'hooks/useApi';
|
||||||
import { WebConfigProvider } from 'hooks/useWebConfig';
|
import { WebConfigProvider } from 'hooks/useWebConfig';
|
||||||
import { queryClient } from 'utils/query/queryClient';
|
import { queryClient } from 'utils/query/queryClient';
|
||||||
|
|
||||||
const StableAppRouter = loadable(() => import('./apps/stable/AppRouter'));
|
import RootAppRouter from 'RootAppRouter';
|
||||||
const RootAppRouter = loadable(() => import('./RootAppRouter'));
|
|
||||||
|
|
||||||
const RootApp = ({ history }: Readonly<{ history: History }>) => {
|
const RootApp = ({ history }: Readonly<{ history: History }>) => (
|
||||||
const layoutMode = localStorage.getItem('layout');
|
|
||||||
const isExperimentalLayout = layoutMode === 'experimental';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<ApiProvider>
|
<ApiProvider>
|
||||||
<WebConfigProvider>
|
<WebConfigProvider>
|
||||||
{isExperimentalLayout ?
|
<RootAppRouter history={history} />
|
||||||
<RootAppRouter history={history} /> :
|
|
||||||
<StableAppRouter history={history} />
|
|
||||||
}
|
|
||||||
</WebConfigProvider>
|
</WebConfigProvider>
|
||||||
</ApiProvider>
|
</ApiProvider>
|
||||||
<ReactQueryDevtools initialIsOpen={false} />
|
<ReactQueryDevtools initialIsOpen={false} />
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default RootApp;
|
export default RootApp;
|
||||||
|
|
|
@ -4,21 +4,26 @@ import React from 'react';
|
||||||
import {
|
import {
|
||||||
RouterProvider,
|
RouterProvider,
|
||||||
createHashRouter,
|
createHashRouter,
|
||||||
Outlet
|
Outlet,
|
||||||
|
useLocation
|
||||||
} from 'react-router-dom';
|
} from 'react-router-dom';
|
||||||
|
|
||||||
import { EXPERIMENTAL_APP_ROUTES } from 'apps/experimental/routes/routes';
|
import { EXPERIMENTAL_APP_ROUTES } from 'apps/experimental/routes/routes';
|
||||||
import AppHeader from 'components/AppHeader';
|
import AppHeader from 'components/AppHeader';
|
||||||
import Backdrop from 'components/Backdrop';
|
import Backdrop from 'components/Backdrop';
|
||||||
import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
|
import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
|
||||||
import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
|
import { DASHBOARD_APP_PATHS, DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
|
||||||
import UserThemeProvider from 'themes/UserThemeProvider';
|
import UserThemeProvider from 'themes/UserThemeProvider';
|
||||||
|
import { STABLE_APP_ROUTES } from 'apps/stable/routes/routes';
|
||||||
|
|
||||||
|
const layoutMode = localStorage.getItem('layout');
|
||||||
|
const isExperimentalLayout = layoutMode === 'experimental';
|
||||||
|
|
||||||
const router = createHashRouter([
|
const router = createHashRouter([
|
||||||
{
|
{
|
||||||
element: <RootAppLayout />,
|
element: <RootAppLayout />,
|
||||||
children: [
|
children: [
|
||||||
...EXPERIMENTAL_APP_ROUTES,
|
...(isExperimentalLayout ? EXPERIMENTAL_APP_ROUTES : STABLE_APP_ROUTES),
|
||||||
...DASHBOARD_APP_ROUTES
|
...DASHBOARD_APP_ROUTES
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -35,10 +40,14 @@ export default function RootAppRouter({ history }: Readonly<{ history: History}>
|
||||||
* NOTE: The app will crash if these get removed from the DOM.
|
* NOTE: The app will crash if these get removed from the DOM.
|
||||||
*/
|
*/
|
||||||
function RootAppLayout() {
|
function RootAppLayout() {
|
||||||
|
const location = useLocation();
|
||||||
|
const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
|
||||||
|
.some(path => location.pathname.startsWith(`/${path}`));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<UserThemeProvider>
|
<UserThemeProvider>
|
||||||
<Backdrop />
|
<Backdrop />
|
||||||
<AppHeader isHidden />
|
<AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
|
||||||
|
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</UserThemeProvider>
|
</UserThemeProvider>
|
||||||
|
|
|
@ -13,23 +13,20 @@ import { useApi } from 'hooks/useApi';
|
||||||
|
|
||||||
import AppTabs from './components/AppTabs';
|
import AppTabs from './components/AppTabs';
|
||||||
import AppDrawer from './components/drawer/AppDrawer';
|
import AppDrawer from './components/drawer/AppDrawer';
|
||||||
|
import { DASHBOARD_APP_PATHS } from './routes/routes';
|
||||||
|
|
||||||
import './AppOverrides.scss';
|
import './AppOverrides.scss';
|
||||||
|
|
||||||
interface AppLayoutProps {
|
const DRAWERLESS_PATHS = [ DASHBOARD_APP_PATHS.MetadataManager ];
|
||||||
drawerlessPaths: string[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const AppLayout: FC<AppLayoutProps> = ({
|
export const Component: FC = () => {
|
||||||
drawerlessPaths
|
|
||||||
}) => {
|
|
||||||
const [ isDrawerActive, setIsDrawerActive ] = useState(false);
|
const [ isDrawerActive, setIsDrawerActive ] = useState(false);
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const { user } = useApi();
|
const { user } = useApi();
|
||||||
|
|
||||||
const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md'));
|
const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md'));
|
||||||
const isDrawerAvailable = Boolean(user)
|
const isDrawerAvailable = Boolean(user)
|
||||||
&& !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`));
|
&& !DRAWERLESS_PATHS.some(path => location.pathname.startsWith(`/${path}`));
|
||||||
const isDrawerOpen = isDrawerActive && isDrawerAvailable;
|
const isDrawerOpen = isDrawerActive && isDrawerAvailable;
|
||||||
|
|
||||||
const onToggleDrawer = useCallback(() => {
|
const onToggleDrawer = useCallback(() => {
|
||||||
|
@ -86,5 +83,3 @@ const AppLayout: FC<AppLayoutProps> = ({
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AppLayout;
|
|
||||||
|
|
|
@ -1,13 +1,12 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { RouteObject } from 'react-router-dom';
|
import { RouteObject } from 'react-router-dom';
|
||||||
import AppLayout from '../AppLayout';
|
|
||||||
import ConnectionRequired from 'components/ConnectionRequired';
|
import ConnectionRequired from 'components/ConnectionRequired';
|
||||||
import { ASYNC_ADMIN_ROUTES } from './_asyncRoutes';
|
import { ASYNC_ADMIN_ROUTES } from './_asyncRoutes';
|
||||||
import { toAsyncPageRoute } from 'components/router/AsyncRoute';
|
import { toAsyncPageRoute } from 'components/router/AsyncRoute';
|
||||||
import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
|
import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
|
||||||
import { LEGACY_ADMIN_ROUTES } from './_legacyRoutes';
|
import { LEGACY_ADMIN_ROUTES } from './_legacyRoutes';
|
||||||
import ServerContentPage from 'components/ServerContentPage';
|
import ServerContentPage from 'components/ServerContentPage';
|
||||||
import ErrorBoundary from '../../../components/router/ErrorBoundary';
|
import ErrorBoundary from 'components/router/ErrorBoundary';
|
||||||
|
|
||||||
export const DASHBOARD_APP_PATHS = {
|
export const DASHBOARD_APP_PATHS = {
|
||||||
Dashboard: 'dashboard',
|
Dashboard: 'dashboard',
|
||||||
|
@ -20,7 +19,7 @@ export const DASHBOARD_APP_ROUTES: RouteObject[] = [
|
||||||
element: <ConnectionRequired isAdminRequired />,
|
element: <ConnectionRequired isAdminRequired />,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
element: <AppLayout drawerlessPaths={[ DASHBOARD_APP_PATHS.MetadataManager ]} />,
|
lazy: () => import('../AppLayout'),
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: DASHBOARD_APP_PATHS.Dashboard,
|
path: DASHBOARD_APP_PATHS.Dashboard,
|
||||||
|
|
|
@ -15,7 +15,7 @@ import AppDrawer, { isDrawerPath } from './components/drawers/AppDrawer';
|
||||||
|
|
||||||
import './AppOverrides.scss';
|
import './AppOverrides.scss';
|
||||||
|
|
||||||
const AppLayout = () => {
|
export const Component = () => {
|
||||||
const [ isDrawerActive, setIsDrawerActive ] = useState(false);
|
const [ isDrawerActive, setIsDrawerActive ] = useState(false);
|
||||||
const { user } = useApi();
|
const { user } = useApi();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
@ -76,5 +76,3 @@ const AppLayout = () => {
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AppLayout;
|
|
||||||
|
|
|
@ -8,8 +8,6 @@ import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
|
||||||
import { toRedirectRoute } from 'components/router/Redirect';
|
import { toRedirectRoute } from 'components/router/Redirect';
|
||||||
import ErrorBoundary from 'components/router/ErrorBoundary';
|
import ErrorBoundary from 'components/router/ErrorBoundary';
|
||||||
|
|
||||||
import AppLayout from '../AppLayout';
|
|
||||||
|
|
||||||
import { ASYNC_USER_ROUTES } from './asyncRoutes';
|
import { ASYNC_USER_ROUTES } from './asyncRoutes';
|
||||||
import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
|
import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
|
||||||
import VideoPage from './video';
|
import VideoPage from './video';
|
||||||
|
@ -17,7 +15,7 @@ import VideoPage from './video';
|
||||||
export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
|
export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
|
||||||
{
|
{
|
||||||
path: '/*',
|
path: '/*',
|
||||||
element: <AppLayout />,
|
lazy: () => import('../AppLayout'),
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
/* User routes: Any child route of this layout is authenticated */
|
/* User routes: Any child route of this layout is authenticated */
|
||||||
|
|
|
@ -1,43 +0,0 @@
|
||||||
import { History } from '@remix-run/router';
|
|
||||||
import React from 'react';
|
|
||||||
import { Outlet, RouterProvider, createHashRouter, useLocation } from 'react-router-dom';
|
|
||||||
|
|
||||||
import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
|
|
||||||
import { STABLE_APP_ROUTES } from './routes/routes';
|
|
||||||
import Backdrop from 'components/Backdrop';
|
|
||||||
import AppHeader from 'components/AppHeader';
|
|
||||||
import { DASHBOARD_APP_PATHS, DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
|
|
||||||
import UserThemeProvider from 'themes/UserThemeProvider';
|
|
||||||
|
|
||||||
const router = createHashRouter([{
|
|
||||||
element: <StableAppLayout />,
|
|
||||||
children: [
|
|
||||||
...STABLE_APP_ROUTES,
|
|
||||||
...DASHBOARD_APP_ROUTES
|
|
||||||
]
|
|
||||||
}]);
|
|
||||||
|
|
||||||
export default function StableAppRouter({ history }: Readonly<{ history: History }>) {
|
|
||||||
useLegacyRouterSync({ router, history });
|
|
||||||
|
|
||||||
return <RouterProvider router={router} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Layout component that renders legacy components required on all pages.
|
|
||||||
* NOTE: The app will crash if these get removed from the DOM.
|
|
||||||
*/
|
|
||||||
function StableAppLayout() {
|
|
||||||
const location = useLocation();
|
|
||||||
const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
|
|
||||||
.some(path => location.pathname.startsWith(`/${path}`));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<UserThemeProvider>
|
|
||||||
<Backdrop />
|
|
||||||
<AppHeader isHidden={isNewLayoutPath} />
|
|
||||||
|
|
||||||
<Outlet />
|
|
||||||
</UserThemeProvider>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -16,7 +16,7 @@ import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
|
||||||
export const STABLE_APP_ROUTES: RouteObject[] = [
|
export const STABLE_APP_ROUTES: RouteObject[] = [
|
||||||
{
|
{
|
||||||
path: '/*',
|
path: '/*',
|
||||||
element: <AppLayout />,
|
Component: AppLayout,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
/* User routes */
|
/* User routes */
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue