1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Merge pull request #4816 from thornbill/dashboard-app

Migrate dashboard to separate app
This commit is contained in:
Bill Thornton 2023-10-04 02:11:22 -04:00 committed by GitHub
commit 8f32341c92
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
68 changed files with 491 additions and 776 deletions

View file

@ -77,8 +77,9 @@ Jellyfin Web is the frontend used for most of the clients available for end user
. .
└── src └── src
├── apps ├── apps
│   ├── experimental # New experimental app layout │   ├── dashboard # Admin dashboard app layout and routes
│   └── stable # Classic (stable) app layout │   ├── experimental # New experimental app layout and routes
│   └── stable # Classic (stable) app layout and routes
├── assets # Static assets ├── assets # Static assets
├── components # Higher order visual components and React components ├── components # Higher order visual components and React components
├── controllers # Legacy page views and controllers 🧹 ├── controllers # Legacy page views and controllers 🧹
@ -87,7 +88,6 @@ Jellyfin Web is the frontend used for most of the clients available for end user
├── legacy # Polyfills for legacy browsers ├── legacy # Polyfills for legacy browsers
├── libraries # Third party libraries 🧹 ├── libraries # Third party libraries 🧹
├── plugins # Client plugins ├── plugins # Client plugins
├── routes # React routes/pages
├── scripts # Random assortment of visual components and utilities 🐉 ├── scripts # Random assortment of visual components and utilities 🐉
├── strings # Translation files ├── strings # Translation files
├── styles # Common app Sass stylesheets ├── styles # Common app Sass stylesheets

View file

@ -1,10 +1,12 @@
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import { ThemeProvider } from '@mui/material/styles'; import { ThemeProvider } from '@mui/material/styles';
import { History } from '@remix-run/router'; import { History } from '@remix-run/router';
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import React from 'react';
import { useLocation } from 'react-router-dom';
import { DASHBOARD_APP_PATHS } from 'apps/dashboard/App';
import AppHeader from 'components/AppHeader'; import AppHeader from 'components/AppHeader';
import Backdrop from 'components/Backdrop'; import Backdrop from 'components/Backdrop';
import { HistoryRouter } from 'components/router/HistoryRouter'; import { HistoryRouter } from 'components/router/HistoryRouter';
@ -12,6 +14,7 @@ import { ApiProvider } from 'hooks/useApi';
import { WebConfigProvider } from 'hooks/useWebConfig'; import { WebConfigProvider } from 'hooks/useWebConfig';
import theme from 'themes/theme'; import theme from 'themes/theme';
const DashboardApp = loadable(() => import('./apps/dashboard/App'));
const ExperimentalApp = loadable(() => import('./apps/experimental/App')); const ExperimentalApp = loadable(() => import('./apps/experimental/App'));
const StableApp = loadable(() => import('./apps/stable/App')); const StableApp = loadable(() => import('./apps/stable/App'));
@ -21,16 +24,22 @@ const RootAppLayout = () => {
const layoutMode = localStorage.getItem('layout'); const layoutMode = localStorage.getItem('layout');
const isExperimentalLayout = layoutMode === 'experimental'; const isExperimentalLayout = layoutMode === 'experimental';
const location = useLocation();
const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
.some(path => location.pathname.startsWith(`/${path}`));
return ( return (
<> <>
<Backdrop /> <Backdrop />
<AppHeader isHidden={isExperimentalLayout} /> <AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
{ {
isExperimentalLayout ? isExperimentalLayout ?
<ExperimentalApp /> : <ExperimentalApp /> :
<StableApp /> <StableApp />
} }
<DashboardApp />
</> </>
); );
}; };

View file

@ -0,0 +1,66 @@
import loadable from '@loadable/component';
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import ConnectionRequired from 'components/ConnectionRequired';
import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
import { AsyncPageProps, AsyncRoute, toAsyncPageRoute } from 'components/router/AsyncRoute';
import { toRedirectRoute } from 'components/router/Redirect';
import ServerContentPage from 'components/ServerContentPage';
import AppLayout from './AppLayout';
import { REDIRECTS } from './routes/_redirects';
import { ASYNC_ADMIN_ROUTES } from './routes/_asyncRoutes';
import { LEGACY_ADMIN_ROUTES } from './routes/_legacyRoutes';
const DashboardAsyncPage = loadable(
(props: { page: string }) => import(/* webpackChunkName: "[request]" */ `./routes/${props.page}`),
{ cacheKey: (props: AsyncPageProps) => props.page }
);
const toDashboardAsyncPageRoute = (route: AsyncRoute) => (
toAsyncPageRoute({
...route,
element: DashboardAsyncPage
})
);
export const DASHBOARD_APP_PATHS = {
Dashboard: 'dashboard',
MetadataManager: 'metadata',
PluginConfig: 'configurationpage'
};
const DashboardApp = () => (
<Routes>
<Route element={<ConnectionRequired isAdminRequired />}>
<Route element={<AppLayout drawerlessPaths={[ DASHBOARD_APP_PATHS.MetadataManager ]} />}>
<Route path={DASHBOARD_APP_PATHS.Dashboard}>
{ASYNC_ADMIN_ROUTES.map(toDashboardAsyncPageRoute)}
{LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
</Route>
{/* NOTE: The metadata editor might deserve a dedicated app in the future */}
{toViewManagerPageRoute({
path: DASHBOARD_APP_PATHS.MetadataManager,
pageProps: {
controller: 'edititemmetadata',
view: 'edititemmetadata.html'
}
})}
<Route path={DASHBOARD_APP_PATHS.PluginConfig} element={
<ServerContentPage view='/web/configurationpage' />
} />
</Route>
{/* Suppress warnings for unhandled routes */}
<Route path='*' element={null} />
</Route>
{/* Redirects for old paths */}
{REDIRECTS.map(toRedirectRoute)}
</Routes>
);
export default DashboardApp;

View file

@ -0,0 +1,108 @@
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import { useTheme } from '@mui/material/styles';
import React, { FC, useCallback, useEffect, useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import AppBody from 'components/AppBody';
import AppToolbar from 'components/toolbar/AppToolbar';
import ElevationScroll from 'components/ElevationScroll';
import { DRAWER_WIDTH } from 'components/ResponsiveDrawer';
import { useApi } from 'hooks/useApi';
import { useLocalStorage } from 'hooks/useLocalStorage';
import AppDrawer from './components/drawer/AppDrawer';
import './AppOverrides.scss';
interface AppLayoutProps {
drawerlessPaths: string[]
}
interface DashboardAppSettings {
isDrawerPinned: boolean
}
const DEFAULT_APP_SETTINGS: DashboardAppSettings = {
isDrawerPinned: false
};
const AppLayout: FC<AppLayoutProps> = ({
drawerlessPaths
}) => {
const [ appSettings, setAppSettings ] = useLocalStorage<DashboardAppSettings>('DashboardAppSettings', DEFAULT_APP_SETTINGS);
const [ isDrawerActive, setIsDrawerActive ] = useState(appSettings.isDrawerPinned);
const location = useLocation();
const theme = useTheme();
const { user } = useApi();
const isDrawerAvailable = !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`));
const isDrawerOpen = isDrawerActive && isDrawerAvailable && Boolean(user);
useEffect(() => {
if (isDrawerActive !== appSettings.isDrawerPinned) {
setAppSettings({
...appSettings,
isDrawerPinned: isDrawerActive
});
}
}, [ appSettings, isDrawerActive, setAppSettings ]);
const onToggleDrawer = useCallback(() => {
setIsDrawerActive(!isDrawerActive);
}, [ isDrawerActive, setIsDrawerActive ]);
return (
<Box sx={{ display: 'flex' }}>
<ElevationScroll elevate={isDrawerOpen}>
<AppBar
position='fixed'
sx={{ zIndex: (muiTheme) => muiTheme.zIndex.drawer + 1 }}
>
<AppToolbar
isDrawerAvailable={isDrawerAvailable}
isDrawerOpen={isDrawerOpen}
onDrawerButtonClick={onToggleDrawer}
/>
</AppBar>
</ElevationScroll>
<AppDrawer
open={isDrawerOpen}
onClose={onToggleDrawer}
onOpen={onToggleDrawer}
/>
<Box
component='main'
sx={{
width: '100%',
flexGrow: 1,
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
marginLeft: 0,
...(isDrawerAvailable && {
marginLeft: {
sm: `-${DRAWER_WIDTH}px`
}
}),
...(isDrawerActive && {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen
}),
marginLeft: 0
})
}}
>
<AppBody>
<Outlet />
</AppBody>
</Box>
</Box>
);
};
export default AppLayout;

View file

@ -0,0 +1,22 @@
// Default MUI breakpoints
// https://mui.com/material-ui/customization/breakpoints/#default-breakpoints
$mui-bp-sm: 600px;
$mui-bp-md: 900px;
$mui-bp-lg: 1200px;
$mui-bp-xl: 1536px;
// Fix dashboard pages layout to work with drawer
.dashboardDocument {
.mainAnimatedPage {
position: relative;
}
.skinBody {
position: unset !important;
}
// Fix the padding of dashboard pages
.content-primary.content-primary {
padding-top: 3.25rem !important;
}
}

View file

@ -0,0 +1,29 @@
import React, { FC } from 'react';
import ResponsiveDrawer, { ResponsiveDrawerProps } from 'components/ResponsiveDrawer';
import ServerDrawerSection from './sections/ServerDrawerSection';
import DevicesDrawerSection from './sections/DevicesDrawerSection';
import LiveTvDrawerSection from './sections/LiveTvDrawerSection';
import AdvancedDrawerSection from './sections/AdvancedDrawerSection';
import PluginDrawerSection from './sections/PluginDrawerSection';
const AppDrawer: FC<ResponsiveDrawerProps> = ({
open = false,
onClose,
onOpen
}) => (
<ResponsiveDrawer
open={open}
onClose={onClose}
onOpen={onOpen}
>
<ServerDrawerSection />
<DevicesDrawerSection />
<LiveTvDrawerSection />
<AdvancedDrawerSection />
<PluginDrawerSection />
</ResponsiveDrawer>
);
export default AppDrawer;

View file

@ -19,10 +19,10 @@ import ListItemLink from 'components/ListItemLink';
import globalize from 'scripts/globalize'; import globalize from 'scripts/globalize';
const PLUGIN_PATHS = [ const PLUGIN_PATHS = [
'/installedplugins.html', '/dashboard/plugins',
'/availableplugins.html', '/dashboard/plugins/catalog',
'/repositories.html', '/dashboard/plugins/repositories',
'/addplugin.html', '/dashboard/plugins/add',
'/configurationpage' '/configurationpage'
]; ];
@ -41,7 +41,7 @@ const AdvancedDrawerSection = () => {
} }
> >
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/networking.html'> <ListItemLink to='/dashboard/networking'>
<ListItemIcon> <ListItemIcon>
<Lan /> <Lan />
</ListItemIcon> </ListItemIcon>
@ -49,7 +49,7 @@ const AdvancedDrawerSection = () => {
</ListItemLink> </ListItemLink>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/apikeys.html'> <ListItemLink to='/dashboard/keys'>
<ListItemIcon> <ListItemIcon>
<VpnKey /> <VpnKey />
</ListItemIcon> </ListItemIcon>
@ -57,7 +57,7 @@ const AdvancedDrawerSection = () => {
</ListItemLink> </ListItemLink>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/log.html'> <ListItemLink to='/dashboard/logs'>
<ListItemIcon> <ListItemIcon>
<Article /> <Article />
</ListItemIcon> </ListItemIcon>
@ -65,7 +65,7 @@ const AdvancedDrawerSection = () => {
</ListItemLink> </ListItemLink>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/notificationsettings.html'> <ListItemLink to='/dashboard/notifications'>
<ListItemIcon> <ListItemIcon>
<EditNotifications /> <EditNotifications />
</ListItemIcon> </ListItemIcon>
@ -73,7 +73,7 @@ const AdvancedDrawerSection = () => {
</ListItemLink> </ListItemLink>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/installedplugins.html' selected={false}> <ListItemLink to='/dashboard/plugins' selected={false}>
<ListItemIcon> <ListItemIcon>
<Extension /> <Extension />
</ListItemIcon> </ListItemIcon>
@ -83,19 +83,19 @@ const AdvancedDrawerSection = () => {
</ListItem> </ListItem>
<Collapse in={isPluginSectionOpen} timeout='auto' unmountOnExit> <Collapse in={isPluginSectionOpen} timeout='auto' unmountOnExit>
<List component='div' disablePadding> <List component='div' disablePadding>
<ListItemLink to='/installedplugins.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/plugins' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('TabMyPlugins')} /> <ListItemText inset primary={globalize.translate('TabMyPlugins')} />
</ListItemLink> </ListItemLink>
<ListItemLink to='/availableplugins.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/plugins/catalog' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('TabCatalog')} /> <ListItemText inset primary={globalize.translate('TabCatalog')} />
</ListItemLink> </ListItemLink>
<ListItemLink to='/repositories.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/plugins/repositories' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('TabRepositories')} /> <ListItemText inset primary={globalize.translate('TabRepositories')} />
</ListItemLink> </ListItemLink>
</List> </List>
</Collapse> </Collapse>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/scheduledtasks.html'> <ListItemLink to='/dashboard/tasks'>
<ListItemIcon> <ListItemIcon>
<Schedule /> <Schedule />
</ListItemIcon> </ListItemIcon>

View file

@ -12,8 +12,8 @@ import ListItemLink from 'components/ListItemLink';
import globalize from 'scripts/globalize'; import globalize from 'scripts/globalize';
const DLNA_PATHS = [ const DLNA_PATHS = [
'/dlnasettings.html', '/dashboard/dlna',
'/dlnaprofiles.html' '/dashboard/dlna/profiles'
]; ];
const DevicesDrawerSection = () => { const DevicesDrawerSection = () => {
@ -31,7 +31,7 @@ const DevicesDrawerSection = () => {
} }
> >
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/devices.html'> <ListItemLink to='/dashboard/devices'>
<ListItemIcon> <ListItemIcon>
<Devices /> <Devices />
</ListItemIcon> </ListItemIcon>
@ -47,7 +47,7 @@ const DevicesDrawerSection = () => {
</ListItemLink> </ListItemLink>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/dlnasettings.html' selected={false}> <ListItemLink to='/dashboard/dlna' selected={false}>
<ListItemIcon> <ListItemIcon>
<Input /> <Input />
</ListItemIcon> </ListItemIcon>
@ -57,10 +57,10 @@ const DevicesDrawerSection = () => {
</ListItem> </ListItem>
<Collapse in={isDlnaSectionOpen} timeout='auto' unmountOnExit> <Collapse in={isDlnaSectionOpen} timeout='auto' unmountOnExit>
<List component='div' disablePadding> <List component='div' disablePadding>
<ListItemLink to='/dlnasettings.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/dlna' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('Settings')} /> <ListItemText inset primary={globalize.translate('Settings')} />
</ListItemLink> </ListItemLink>
<ListItemLink to='/dlnaprofiles.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/dlna/profiles' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('TabProfiles')} /> <ListItemText inset primary={globalize.translate('TabProfiles')} />
</ListItemLink> </ListItemLink>
</List> </List>

View file

@ -20,7 +20,7 @@ const LiveTvDrawerSection = () => {
} }
> >
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/livetvstatus.html'> <ListItemLink to='/dashboard/livetv'>
<ListItemIcon> <ListItemIcon>
<LiveTv /> <LiveTv />
</ListItemIcon> </ListItemIcon>
@ -28,7 +28,7 @@ const LiveTvDrawerSection = () => {
</ListItemLink> </ListItemLink>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/livetvsettings.html'> <ListItemLink to='/dashboard/recordings'>
<ListItemIcon> <ListItemIcon>
<Dvr /> <Dvr />
</ListItemIcon> </ListItemIcon>

View file

@ -12,16 +12,16 @@ import ListItemLink from 'components/ListItemLink';
import globalize from 'scripts/globalize'; import globalize from 'scripts/globalize';
const LIBRARY_PATHS = [ const LIBRARY_PATHS = [
'/library.html', '/dashboard/libraries',
'/librarydisplay.html', '/dashboard/libraries/display',
'/metadataimages.html', '/dashboard/libraries/metadata',
'/metadatanfo.html' '/dashboard/libraries/nfo'
]; ];
const PLAYBACK_PATHS = [ const PLAYBACK_PATHS = [
'/encodingsettings.html', '/dashboard/playback/transcoding',
'/playbackconfiguration.html', '/dashboard/playback/resume',
'/streamingsettings.html' '/dashboard/playback/streaming'
]; ];
const ServerDrawerSection = () => { const ServerDrawerSection = () => {
@ -40,7 +40,7 @@ const ServerDrawerSection = () => {
} }
> >
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/dashboard.html'> <ListItemLink to='/dashboard'>
<ListItemIcon> <ListItemIcon>
<Dashboard /> <Dashboard />
</ListItemIcon> </ListItemIcon>
@ -48,7 +48,7 @@ const ServerDrawerSection = () => {
</ListItemLink> </ListItemLink>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/dashboardgeneral.html'> <ListItemLink to='/dashboard/settings'>
<ListItemIcon> <ListItemIcon>
<Settings /> <Settings />
</ListItemIcon> </ListItemIcon>
@ -56,7 +56,7 @@ const ServerDrawerSection = () => {
</ListItemLink> </ListItemLink>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/userprofiles.html'> <ListItemLink to='/dashboard/users'>
<ListItemIcon> <ListItemIcon>
<People /> <People />
</ListItemIcon> </ListItemIcon>
@ -64,7 +64,7 @@ const ServerDrawerSection = () => {
</ListItemLink> </ListItemLink>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/library.html' selected={false}> <ListItemLink to='/dashboard/libraries' selected={false}>
<ListItemIcon> <ListItemIcon>
<LibraryAdd /> <LibraryAdd />
</ListItemIcon> </ListItemIcon>
@ -74,22 +74,22 @@ const ServerDrawerSection = () => {
</ListItem> </ListItem>
<Collapse in={isLibrarySectionOpen} timeout='auto' unmountOnExit> <Collapse in={isLibrarySectionOpen} timeout='auto' unmountOnExit>
<List component='div' disablePadding> <List component='div' disablePadding>
<ListItemLink to='/library.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/libraries' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('HeaderLibraries')} /> <ListItemText inset primary={globalize.translate('HeaderLibraries')} />
</ListItemLink> </ListItemLink>
<ListItemLink to='/librarydisplay.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/libraries/display' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('Display')} /> <ListItemText inset primary={globalize.translate('Display')} />
</ListItemLink> </ListItemLink>
<ListItemLink to='/metadataimages.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/libraries/metadata' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('Metadata')} /> <ListItemText inset primary={globalize.translate('Metadata')} />
</ListItemLink> </ListItemLink>
<ListItemLink to='/metadatanfo.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/libraries/nfo' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('TabNfoSettings')} /> <ListItemText inset primary={globalize.translate('TabNfoSettings')} />
</ListItemLink> </ListItemLink>
</List> </List>
</Collapse> </Collapse>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/encodingsettings.html' selected={false}> <ListItemLink to='/dashboard/playback/transcoding' selected={false}>
<ListItemIcon> <ListItemIcon>
<PlayCircle /> <PlayCircle />
</ListItemIcon> </ListItemIcon>
@ -99,13 +99,13 @@ const ServerDrawerSection = () => {
</ListItem> </ListItem>
<Collapse in={isPlaybackSectionOpen} timeout='auto' unmountOnExit> <Collapse in={isPlaybackSectionOpen} timeout='auto' unmountOnExit>
<List component='div' disablePadding> <List component='div' disablePadding>
<ListItemLink to='/encodingsettings.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/playback/transcoding' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('Transcoding')} /> <ListItemText inset primary={globalize.translate('Transcoding')} />
</ListItemLink> </ListItemLink>
<ListItemLink to='/playbackconfiguration.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/playback/resume' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('ButtonResume')} /> <ListItemText inset primary={globalize.translate('ButtonResume')} />
</ListItemLink> </ListItemLink>
<ListItemLink to='/streamingsettings.html' sx={{ pl: 4 }}> <ListItemLink to='/dashboard/playback/streaming' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('TabStreaming')} /> <ListItemText inset primary={globalize.translate('TabStreaming')} />
</ListItemLink> </ListItemLink>
</List> </List>

View file

@ -0,0 +1,12 @@
import type { AsyncRoute } from 'components/router/AsyncRoute';
export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
{ path: 'activity' },
{ path: 'notifications' },
{ path: 'users' },
{ path: 'users/access' },
{ path: 'users/add' },
{ path: 'users/parentalcontrol' },
{ path: 'users/password' },
{ path: 'users/profile' }
];

View file

@ -1,170 +1,164 @@
import { LegacyRoute } from '../../../../components/router/LegacyRoute'; import type { LegacyRoute } from 'components/router/LegacyRoute';
export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
{ {
path: 'dashboard.html', path: '/dashboard',
pageProps: { pageProps: {
controller: 'dashboard/dashboard', controller: 'dashboard/dashboard',
view: 'dashboard/dashboard.html' view: 'dashboard/dashboard.html'
} }
}, { }, {
path: 'dashboardgeneral.html', path: 'settings',
pageProps: { pageProps: {
controller: 'dashboard/general', controller: 'dashboard/general',
view: 'dashboard/general.html' view: 'dashboard/general.html'
} }
}, { }, {
path: 'networking.html', path: 'networking',
pageProps: { pageProps: {
controller: 'dashboard/networking', controller: 'dashboard/networking',
view: 'dashboard/networking.html' view: 'dashboard/networking.html'
} }
}, { }, {
path: 'devices.html', path: 'devices',
pageProps: { pageProps: {
controller: 'dashboard/devices/devices', controller: 'dashboard/devices/devices',
view: 'dashboard/devices/devices.html' view: 'dashboard/devices/devices.html'
} }
}, { }, {
path: 'device.html', path: 'devices/edit',
pageProps: { pageProps: {
controller: 'dashboard/devices/device', controller: 'dashboard/devices/device',
view: 'dashboard/devices/device.html' view: 'dashboard/devices/device.html'
} }
}, { }, {
path: 'dlnaprofile.html', path: 'dlna/profiles/edit',
pageProps: { pageProps: {
controller: 'dashboard/dlna/profile', controller: 'dashboard/dlna/profile',
view: 'dashboard/dlna/profile.html' view: 'dashboard/dlna/profile.html'
} }
}, { }, {
path: 'dlnaprofiles.html', path: 'dlna/profiles',
pageProps: { pageProps: {
controller: 'dashboard/dlna/profiles', controller: 'dashboard/dlna/profiles',
view: 'dashboard/dlna/profiles.html' view: 'dashboard/dlna/profiles.html'
} }
}, { }, {
path: 'dlnasettings.html', path: 'dlna',
pageProps: { pageProps: {
controller: 'dashboard/dlna/settings', controller: 'dashboard/dlna/settings',
view: 'dashboard/dlna/settings.html' view: 'dashboard/dlna/settings.html'
} }
}, { }, {
path: 'addplugin.html', path: 'plugins/add',
pageProps: { pageProps: {
controller: 'dashboard/plugins/add/index', controller: 'dashboard/plugins/add/index',
view: 'dashboard/plugins/add/index.html' view: 'dashboard/plugins/add/index.html'
} }
}, { }, {
path: 'library.html', path: 'libraries',
pageProps: { pageProps: {
controller: 'dashboard/library', controller: 'dashboard/library',
view: 'dashboard/library.html' view: 'dashboard/library.html'
} }
}, { }, {
path: 'librarydisplay.html', path: 'libraries/display',
pageProps: { pageProps: {
controller: 'dashboard/librarydisplay', controller: 'dashboard/librarydisplay',
view: 'dashboard/librarydisplay.html' view: 'dashboard/librarydisplay.html'
} }
}, { }, {
path: 'edititemmetadata.html', path: 'playback/transcoding',
pageProps: {
controller: 'edititemmetadata',
view: 'edititemmetadata.html'
}
}, {
path: 'encodingsettings.html',
pageProps: { pageProps: {
controller: 'dashboard/encodingsettings', controller: 'dashboard/encodingsettings',
view: 'dashboard/encodingsettings.html' view: 'dashboard/encodingsettings.html'
} }
}, { }, {
path: 'log.html', path: 'logs',
pageProps: { pageProps: {
controller: 'dashboard/logs', controller: 'dashboard/logs',
view: 'dashboard/logs.html' view: 'dashboard/logs.html'
} }
}, { }, {
path: 'metadataimages.html', path: 'libraries/metadata',
pageProps: { pageProps: {
controller: 'dashboard/metadataImages', controller: 'dashboard/metadataImages',
view: 'dashboard/metadataimages.html' view: 'dashboard/metadataimages.html'
} }
}, { }, {
path: 'metadatanfo.html', path: 'libraries/nfo',
pageProps: { pageProps: {
controller: 'dashboard/metadatanfo', controller: 'dashboard/metadatanfo',
view: 'dashboard/metadatanfo.html' view: 'dashboard/metadatanfo.html'
} }
}, { }, {
path: 'playbackconfiguration.html', path: 'playback/resume',
pageProps: { pageProps: {
controller: 'dashboard/playback', controller: 'dashboard/playback',
view: 'dashboard/playback.html' view: 'dashboard/playback.html'
} }
}, { }, {
path: 'availableplugins.html', path: 'plugins/catalog',
pageProps: { pageProps: {
controller: 'dashboard/plugins/available/index', controller: 'dashboard/plugins/available/index',
view: 'dashboard/plugins/available/index.html' view: 'dashboard/plugins/available/index.html'
} }
}, { }, {
path: 'repositories.html', path: 'plugins/repositories',
pageProps: { pageProps: {
controller: 'dashboard/plugins/repositories/index', controller: 'dashboard/plugins/repositories/index',
view: 'dashboard/plugins/repositories/index.html' view: 'dashboard/plugins/repositories/index.html'
} }
}, { }, {
path: 'livetvguideprovider.html', path: 'livetv/guide',
pageProps: { pageProps: {
controller: 'livetvguideprovider', controller: 'livetvguideprovider',
view: 'livetvguideprovider.html' view: 'livetvguideprovider.html'
} }
}, { }, {
path: 'livetvsettings.html', path: 'recordings',
pageProps: { pageProps: {
controller: 'livetvsettings', controller: 'livetvsettings',
view: 'livetvsettings.html' view: 'livetvsettings.html'
} }
}, { }, {
path: 'livetvstatus.html', path: 'livetv',
pageProps: { pageProps: {
controller: 'livetvstatus', controller: 'livetvstatus',
view: 'livetvstatus.html' view: 'livetvstatus.html'
} }
}, { }, {
path: 'livetvtuner.html', path: 'livetv/tuner',
pageProps: { pageProps: {
controller: 'livetvtuner', controller: 'livetvtuner',
view: 'livetvtuner.html' view: 'livetvtuner.html'
} }
}, { }, {
path: 'installedplugins.html', path: 'plugins',
pageProps: { pageProps: {
controller: 'dashboard/plugins/installed/index', controller: 'dashboard/plugins/installed/index',
view: 'dashboard/plugins/installed/index.html' view: 'dashboard/plugins/installed/index.html'
} }
}, { }, {
path: 'scheduledtask.html', path: 'tasks/edit',
pageProps: { pageProps: {
controller: 'dashboard/scheduledtasks/scheduledtask', controller: 'dashboard/scheduledtasks/scheduledtask',
view: 'dashboard/scheduledtasks/scheduledtask.html' view: 'dashboard/scheduledtasks/scheduledtask.html'
} }
}, { }, {
path: 'scheduledtasks.html', path: 'tasks',
pageProps: { pageProps: {
controller: 'dashboard/scheduledtasks/scheduledtasks', controller: 'dashboard/scheduledtasks/scheduledtasks',
view: 'dashboard/scheduledtasks/scheduledtasks.html' view: 'dashboard/scheduledtasks/scheduledtasks.html'
} }
}, { }, {
path: 'apikeys.html', path: 'keys',
pageProps: { pageProps: {
controller: 'dashboard/apikeys', controller: 'dashboard/apikeys',
view: 'dashboard/apikeys.html' view: 'dashboard/apikeys.html'
} }
}, { }, {
path: 'streamingsettings.html', path: 'playback/streaming',
pageProps: { pageProps: {
view: 'dashboard/streaming.html', view: 'dashboard/streaming.html',
controller: 'dashboard/streaming' controller: 'dashboard/streaming'

View file

@ -0,0 +1,40 @@
import type { Redirect } from 'components/router/Redirect';
export const REDIRECTS: Redirect[] = [
{ from: 'addplugin.html', to: '/dashboard/plugins/add' },
{ from: 'apikeys.html', to: '/dashboard/keys' },
{ from: 'availableplugins.html', to: '/dashboard/plugins/catalog' },
{ from: 'dashboard.html', to: '/dashboard' },
{ from: 'dashboardgeneral.html', to: '/dashboard/settings' },
{ from: 'device.html', to: '/dashboard/devices/edit' },
{ from: 'devices.html', to: '/dashboard/devices' },
{ from: 'dlnaprofile.html', to: '/dashboard/dlna/profiles/edit' },
{ from: 'dlnaprofiles.html', to: '/dashboard/dlna/profiles' },
{ from: 'dlnasettings.html', to: '/dashboard/dlna' },
{ from: 'edititemmetadata.html', to: '/metadata' },
{ from: 'encodingsettings.html', to: '/dashboard/playback/transcoding' },
{ from: 'installedplugins.html', to: '/dashboard/plugins' },
{ from: 'library.html', to: '/dashboard/libraries' },
{ from: 'librarydisplay.html', to: '/dashboard/libraries/display' },
{ from: 'livetvguideprovider.html', to: '/dashboard/livetv/guide' },
{ from: 'livetvsettings.html', to: '/dashboard/recordings' },
{ from: 'livetvstatus.html', to: '/dashboard/livetv' },
{ from: 'livetvtuner.html', to: '/dashboard/livetv/tuner' },
{ from: 'log.html', to: '/dashboard/logs' },
{ from: 'metadataimages.html', to: '/dashboard/libraries/metadata' },
{ from: 'metadatanfo.html', to: '/dashboard/libraries/nfo' },
{ from: 'networking.html', to: '/dashboard/networking' },
{ from: 'notificationsettings.html', to: '/dashboard/notifications' },
{ from: 'playbackconfiguration.html', to: '/dashboard/playback/resume' },
{ from: 'repositories.html', to: '/dashboard/plugins/repositories' },
{ from: 'scheduledtask.html', to: '/dashboard/tasks/edit' },
{ from: 'scheduledtasks.html', to: '/dashboard/tasks' },
{ from: 'serveractivity.html', to: '/dashboard/activity' },
{ from: 'streamingsettings.html', to: '/dashboard/playback/streaming' },
{ from: 'useredit.html', to: '/dashboard/users/profile' },
{ from: 'userlibraryaccess.html', to: '/dashboard/users/access' },
{ from: 'usernew.html', to: '/dashboard/users/add' },
{ from: 'userparentalcontrol.html', to: '/dashboard/users/parentalcontrol' },
{ from: 'userpassword.html', to: '/dashboard/users/password' },
{ from: 'userprofiles.html', to: '/dashboard/users' }
];

View file

@ -19,9 +19,9 @@ import { parseISO8601Date, toLocaleDateString, toLocaleTimeString } from 'script
import globalize from 'scripts/globalize'; import globalize from 'scripts/globalize';
import { toBoolean } from 'utils/string'; import { toBoolean } from 'utils/string';
import LogLevelChip from '../../components/activityTable/LogLevelChip'; import LogLevelChip from '../components/activityTable/LogLevelChip';
import OverviewCell from '../../components/activityTable/OverviewCell'; import OverviewCell from '../components/activityTable/OverviewCell';
import GridActionsCellLink from '../../components/GridActionsCellLink'; import GridActionsCellLink from '../components/dataGrid/GridActionsCellLink';
const DEFAULT_PAGE_SIZE = 25; const DEFAULT_PAGE_SIZE = 25;
const VIEW_PARAM = 'useractivity'; const VIEW_PARAM = 'useractivity';
@ -68,7 +68,7 @@ const Activity = () => {
sx={{ padding: 0 }} sx={{ padding: 0 }}
title={users[row.UserId]?.Name ?? undefined} title={users[row.UserId]?.Name ?? undefined}
component={Link} component={Link}
to={`/useredit.html?userId=${row.UserId}`} to={`/dashboard/users/profile?userId=${row.UserId}`}
> >
<UserAvatar user={users[row.UserId]} /> <UserAvatar user={users[row.UserId]} />
</IconButton> </IconButton>

View file

@ -9,7 +9,7 @@ const PluginLink = () => (
__html: `<a __html: `<a
is='emby-linkbutton' is='emby-linkbutton'
class='button-link' class='button-link'
href='#/addplugin.html?name=Webhook&guid=71552a5a5c5c4350a2aeebe451a30173' href='#/dashboard/plugins/add?name=Webhook&guid=71552a5a5c5c4350a2aeebe451a30173'
> >
${globalize.translate('GetThePlugin')} ${globalize.translate('GetThePlugin')}
</a>` </a>`

View file

@ -140,7 +140,7 @@ const UserNew: FunctionComponent = () => {
} }
window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () { window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
Dashboard.navigate('useredit.html?userId=' + user.Id) Dashboard.navigate('/dashboard/users/profile?userId=' + user.Id)
.catch(err => { .catch(err => {
console.error('[usernew] failed to navigate to edit user page', err); console.error('[usernew] failed to navigate to edit user page', err);
}); });

View file

@ -85,21 +85,21 @@ const UserProfiles: FunctionComponent = () => {
callback: function (id: string) { callback: function (id: string) {
switch (id) { switch (id) {
case 'open': case 'open':
Dashboard.navigate('useredit.html?userId=' + userId) Dashboard.navigate('/dashboard/users/profile?userId=' + userId)
.catch(err => { .catch(err => {
console.error('[userprofiles] failed to navigate to user edit page', err); console.error('[userprofiles] failed to navigate to user edit page', err);
}); });
break; break;
case 'access': case 'access':
Dashboard.navigate('userlibraryaccess.html?userId=' + userId) Dashboard.navigate('/dashboard/users/access?userId=' + userId)
.catch(err => { .catch(err => {
console.error('[userprofiles] failed to navigate to user library page', err); console.error('[userprofiles] failed to navigate to user library page', err);
}); });
break; break;
case 'parentalcontrol': case 'parentalcontrol':
Dashboard.navigate('userparentalcontrol.html?userId=' + userId) Dashboard.navigate('/dashboard/users/parentalcontrol?userId=' + userId)
.catch(err => { .catch(err => {
console.error('[userprofiles] failed to navigate to parental control page', err); console.error('[userprofiles] failed to navigate to parental control page', err);
}); });
@ -146,7 +146,7 @@ const UserProfiles: FunctionComponent = () => {
}); });
(page.querySelector('#btnAddUser') as HTMLButtonElement).addEventListener('click', function() { (page.querySelector('#btnAddUser') as HTMLButtonElement).addEventListener('click', function() {
Dashboard.navigate('usernew.html') Dashboard.navigate('/dashboard/users/add')
.catch(err => { .catch(err => {
console.error('[userprofiles] failed to navigate to new user page', err); console.error('[userprofiles] failed to navigate to new user page', err);
}); });

View file

@ -32,7 +32,7 @@ const getCheckedElementDataIds = (elements: NodeListOf<Element>) => (
); );
function onSaveComplete() { function onSaveComplete() {
Dashboard.navigate('userprofiles.html') Dashboard.navigate('/dashboard/users')
.catch(err => { .catch(err => {
console.error('[useredit] failed to navigate to user profile', err); console.error('[useredit] failed to navigate to user profile', err);
}); });

View file

@ -1,16 +1,16 @@
import React from 'react'; import React from 'react';
import { Navigate, Route, Routes } from 'react-router-dom'; import { Navigate, Route, Routes } from 'react-router-dom';
import { DASHBOARD_APP_PATHS } from 'apps/dashboard/App';
import { REDIRECTS } from 'apps/stable/routes/_redirects'; import { REDIRECTS } from 'apps/stable/routes/_redirects';
import ConnectionRequired from 'components/ConnectionRequired'; import ConnectionRequired from 'components/ConnectionRequired';
import ServerContentPage from 'components/ServerContentPage';
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 { toRedirectRoute } from 'components/router/Redirect'; import { toRedirectRoute } from 'components/router/Redirect';
import AppLayout from './AppLayout'; import AppLayout from './AppLayout';
import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './routes/asyncRoutes'; import { ASYNC_USER_ROUTES } from './routes/asyncRoutes';
import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes'; import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
const ExperimentalApp = () => { const ExperimentalApp = () => {
return ( return (
@ -22,16 +22,6 @@ const ExperimentalApp = () => {
{LEGACY_USER_ROUTES.map(toViewManagerPageRoute)} {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
</Route> </Route>
{/* Admin routes */}
<Route element={<ConnectionRequired isAdminRequired />}>
{ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
{LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
<Route path='configurationpage' element={
<ServerContentPage view='/web/configurationpage' />
} />
</Route>
{/* Public routes */} {/* Public routes */}
<Route element={<ConnectionRequired isUserRequired={false} />}> <Route element={<ConnectionRequired isUserRequired={false} />}>
<Route index element={<Navigate replace to='/home.html' />} /> <Route index element={<Navigate replace to='/home.html' />} />
@ -42,6 +32,15 @@ const ExperimentalApp = () => {
{/* Redirects for old paths */} {/* Redirects for old paths */}
{REDIRECTS.map(toRedirectRoute)} {REDIRECTS.map(toRedirectRoute)}
{/* Ignore dashboard routes */}
{Object.entries(DASHBOARD_APP_PATHS).map(([ key, path ]) => (
<Route
key={key}
path={`/${path}/*`}
element={null}
/>
))}
</Routes> </Routes>
); );
}; };

View file

@ -10,11 +10,6 @@ $mui-bp-xl: 1536px;
position: relative; position: relative;
} }
// Fix dashboard pages layout to work with drawer
.dashboardDocument .skinBody {
position: unset;
}
// Hide some items from the user "settings" page that are in the drawer // Hide some items from the user "settings" page that are in the drawer
#myPreferencesMenuPage { #myPreferencesMenuPage {
.lnkQuickConnectPreferences, .lnkQuickConnectPreferences,
@ -26,8 +21,7 @@ $mui-bp-xl: 1536px;
// Fix the padding of some pages // Fix the padding of some pages
.homePage.libraryPage, // Home page .homePage.libraryPage, // Home page
.libraryPage:not(.withTabs), // Tabless library pages .libraryPage:not(.withTabs) { // Tabless library pages
.content-primary.content-primary { // Dashboard pages
padding-top: 3.25rem !important; padding-top: 3.25rem !important;
} }

View file

@ -1,23 +1,15 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { Route, Routes, useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import ResponsiveDrawer, { ResponsiveDrawerProps } from 'components/ResponsiveDrawer'; import ResponsiveDrawer, { ResponsiveDrawerProps } from 'components/ResponsiveDrawer';
import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from '../../routes/asyncRoutes'; import { ASYNC_USER_ROUTES } from '../../routes/asyncRoutes';
import { LEGACY_ADMIN_ROUTES, LEGACY_USER_ROUTES } from '../../routes/legacyRoutes'; import { LEGACY_USER_ROUTES } from '../../routes/legacyRoutes';
import AdvancedDrawerSection from './dashboard/AdvancedDrawerSection';
import DevicesDrawerSection from './dashboard/DevicesDrawerSection';
import LiveTvDrawerSection from './dashboard/LiveTvDrawerSection';
import PluginDrawerSection from './dashboard/PluginDrawerSection';
import ServerDrawerSection from './dashboard/ServerDrawerSection';
import MainDrawerContent from './MainDrawerContent';
import { isTabPath } from '../tabs/tabRoutes'; import { isTabPath } from '../tabs/tabRoutes';
export const DRAWER_WIDTH = 240; import MainDrawerContent from './MainDrawerContent';
const DRAWERLESS_ROUTES = [ const DRAWERLESS_ROUTES = [
'edititemmetadata.html', // metadata manager
'video' // video player 'video' // video player
]; ];
@ -26,77 +18,29 @@ const MAIN_DRAWER_ROUTES = [
...LEGACY_USER_ROUTES ...LEGACY_USER_ROUTES
].filter(route => !DRAWERLESS_ROUTES.includes(route.path)); ].filter(route => !DRAWERLESS_ROUTES.includes(route.path));
const ADMIN_DRAWER_ROUTES = [
...ASYNC_ADMIN_ROUTES,
...LEGACY_ADMIN_ROUTES,
{ path: '/configurationpage' } // Plugin configuration page
].filter(route => !DRAWERLESS_ROUTES.includes(route.path));
/** Utility function to check if a path has a drawer. */ /** Utility function to check if a path has a drawer. */
export const isDrawerPath = (path: string) => ( export const isDrawerPath = (path: string) => (
MAIN_DRAWER_ROUTES.some(route => route.path === path || `/${route.path}` === path) MAIN_DRAWER_ROUTES.some(route => route.path === path || `/${route.path}` === path)
|| ADMIN_DRAWER_ROUTES.some(route => route.path === path || `/${route.path}` === path)
); );
const Drawer: FC<ResponsiveDrawerProps> = ({ children, ...props }) => {
const location = useLocation();
const hasSecondaryToolBar = isTabPath(location.pathname);
return (
<ResponsiveDrawer
{...props}
hasSecondaryToolBar={hasSecondaryToolBar}
>
{children}
</ResponsiveDrawer>
);
};
const AppDrawer: FC<ResponsiveDrawerProps> = ({ const AppDrawer: FC<ResponsiveDrawerProps> = ({
open = false, open = false,
onClose, onClose,
onOpen onOpen
}) => ( }) => {
<Routes> const location = useLocation();
{ const hasSecondaryToolBar = isTabPath(location.pathname);
MAIN_DRAWER_ROUTES.map(route => (
<Route return (
key={route.path} <ResponsiveDrawer
path={route.path} hasSecondaryToolBar={hasSecondaryToolBar}
element={
<Drawer
open={open} open={open}
onClose={onClose} onClose={onClose}
onOpen={onOpen} onOpen={onOpen}
> >
<MainDrawerContent /> <MainDrawerContent />
</Drawer> </ResponsiveDrawer>
} );
/> };
))
}
{
ADMIN_DRAWER_ROUTES.map(route => (
<Route
key={route.path}
path={route.path}
element={
<Drawer
open={open}
onClose={onClose}
onOpen={onOpen}
>
<ServerDrawerSection />
<DevicesDrawerSection />
<LiveTvDrawerSection />
<AdvancedDrawerSection />
<PluginDrawerSection />
</Drawer>
}
/>
))
}
</Routes>
);
export default AppDrawer; export default AppDrawer;

View file

@ -150,7 +150,7 @@ const MainDrawerContent = () => {
} }
> >
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/dashboard.html'> <ListItemLink to='/dashboard'>
<ListItemIcon> <ListItemIcon>
<Dashboard /> <Dashboard />
</ListItemIcon> </ListItemIcon>
@ -158,7 +158,7 @@ const MainDrawerContent = () => {
</ListItemLink> </ListItemLink>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/edititemmetadata.html'> <ListItemLink to='/metadata'>
<ListItemIcon> <ListItemIcon>
<Edit /> <Edit />
</ListItemIcon> </ListItemIcon>

View file

@ -1,12 +0,0 @@
import { AsyncRoute, AsyncRouteType } from 'components/router/AsyncRoute';
export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
{ path: 'dashboard/activity', page: 'dashboard/activity', type: AsyncRouteType.Experimental },
{ path: 'notificationsettings.html', page: 'dashboard/notifications' },
{ path: 'usernew.html', page: 'user/usernew' },
{ path: 'userprofiles.html', page: 'user/userprofiles' },
{ path: 'useredit.html', page: 'user/useredit' },
{ path: 'userlibraryaccess.html', page: 'user/userlibraryaccess' },
{ path: 'userparentalcontrol.html', page: 'user/userparentalcontrol' },
{ path: 'userpassword.html', page: 'user/userpassword' }
];

View file

@ -1,2 +1 @@
export * from './admin';
export * from './user'; export * from './user';

View file

@ -1,3 +1,2 @@
export * from './admin';
export * from './public'; export * from './public';
export * from './user'; export * from './user';

View file

@ -1,17 +1,17 @@
import React from 'react'; import React from 'react';
import { Navigate, Outlet, Route, Routes } from 'react-router-dom'; import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
import { DASHBOARD_APP_PATHS } from 'apps/dashboard/App';
import AppBody from 'components/AppBody'; import AppBody from 'components/AppBody';
import ServerContentPage from 'components/ServerContentPage';
import ConnectionRequired from 'components/ConnectionRequired'; import ConnectionRequired from 'components/ConnectionRequired';
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 { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './routes/asyncRoutes';
import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
import { REDIRECTS } from './routes/_redirects';
import { toRedirectRoute } from 'components/router/Redirect'; import { toRedirectRoute } from 'components/router/Redirect';
import { ASYNC_USER_ROUTES } from './routes/asyncRoutes';
import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
import { REDIRECTS } from './routes/_redirects';
const Layout = () => ( const Layout = () => (
<AppBody> <AppBody>
<Outlet /> <Outlet />
@ -27,16 +27,6 @@ const StableApp = () => (
{LEGACY_USER_ROUTES.map(toViewManagerPageRoute)} {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
</Route> </Route>
{/* Admin routes */}
<Route path='/' element={<ConnectionRequired isAdminRequired />}>
{ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
{LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
<Route path='configurationpage' element={
<ServerContentPage view='/web/configurationpage' />
} />
</Route>
{/* Public routes */} {/* Public routes */}
<Route path='/' element={<ConnectionRequired isUserRequired={false} />}> <Route path='/' element={<ConnectionRequired isUserRequired={false} />}>
<Route index element={<Navigate replace to='/home.html' />} /> <Route index element={<Navigate replace to='/home.html' />} />
@ -50,6 +40,15 @@ const StableApp = () => (
{/* Redirects for old paths */} {/* Redirects for old paths */}
{REDIRECTS.map(toRedirectRoute)} {REDIRECTS.map(toRedirectRoute)}
{/* Ignore dashboard routes */}
{Object.entries(DASHBOARD_APP_PATHS).map(([ key, path ]) => (
<Route
key={key}
path={`/${path}/*`}
element={null}
/>
))}
</Routes> </Routes>
); );

View file

@ -1,6 +1,5 @@
import type { Redirect } from 'components/router/Redirect'; import type { Redirect } from 'components/router/Redirect';
export const REDIRECTS: Redirect[] = [ export const REDIRECTS: Redirect[] = [
{ from: 'mypreferencesquickconnect.html', to: '/quickconnect' }, { from: 'mypreferencesquickconnect.html', to: '/quickconnect' }
{ from: 'serveractivity.html', to: '/dashboard/activity' }
]; ];

View file

@ -1,11 +0,0 @@
import { AsyncRoute } from '../../../../components/router/AsyncRoute';
export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
{ path: 'notificationsettings.html', page: 'dashboard/notifications' },
{ path: 'usernew.html', page: 'user/usernew' },
{ path: 'userprofiles.html', page: 'user/userprofiles' },
{ path: 'useredit.html', page: 'user/useredit' },
{ path: 'userlibraryaccess.html', page: 'user/userlibraryaccess' },
{ path: 'userparentalcontrol.html', page: 'user/userparentalcontrol' },
{ path: 'userpassword.html', page: 'user/userpassword' }
];

View file

@ -1,2 +1 @@
export * from './admin';
export * from './user'; export * from './user';

View file

@ -1,179 +0,0 @@
import { LegacyRoute } from '../../../../components/router/LegacyRoute';
export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
{
path: 'dashboard.html',
pageProps: {
controller: 'dashboard/dashboard',
view: 'dashboard/dashboard.html'
}
}, {
path: 'dashboardgeneral.html',
pageProps: {
controller: 'dashboard/general',
view: 'dashboard/general.html'
}
}, {
path: 'networking.html',
pageProps: {
controller: 'dashboard/networking',
view: 'dashboard/networking.html'
}
}, {
path: 'devices.html',
pageProps: {
controller: 'dashboard/devices/devices',
view: 'dashboard/devices/devices.html'
}
}, {
path: 'device.html',
pageProps: {
controller: 'dashboard/devices/device',
view: 'dashboard/devices/device.html'
}
}, {
path: 'dlnaprofile.html',
pageProps: {
controller: 'dashboard/dlna/profile',
view: 'dashboard/dlna/profile.html'
}
}, {
path: 'dlnaprofiles.html',
pageProps: {
controller: 'dashboard/dlna/profiles',
view: 'dashboard/dlna/profiles.html'
}
}, {
path: 'dlnasettings.html',
pageProps: {
controller: 'dashboard/dlna/settings',
view: 'dashboard/dlna/settings.html'
}
}, {
path: 'addplugin.html',
pageProps: {
controller: 'dashboard/plugins/add/index',
view: 'dashboard/plugins/add/index.html'
}
}, {
path: 'library.html',
pageProps: {
controller: 'dashboard/library',
view: 'dashboard/library.html'
}
}, {
path: 'librarydisplay.html',
pageProps: {
controller: 'dashboard/librarydisplay',
view: 'dashboard/librarydisplay.html'
}
}, {
path: 'edititemmetadata.html',
pageProps: {
controller: 'edititemmetadata',
view: 'edititemmetadata.html'
}
}, {
path: 'encodingsettings.html',
pageProps: {
controller: 'dashboard/encodingsettings',
view: 'dashboard/encodingsettings.html'
}
}, {
path: 'log.html',
pageProps: {
controller: 'dashboard/logs',
view: 'dashboard/logs.html'
}
}, {
path: 'metadataimages.html',
pageProps: {
controller: 'dashboard/metadataImages',
view: 'dashboard/metadataimages.html'
}
}, {
path: 'metadatanfo.html',
pageProps: {
controller: 'dashboard/metadatanfo',
view: 'dashboard/metadatanfo.html'
}
}, {
path: 'playbackconfiguration.html',
pageProps: {
controller: 'dashboard/playback',
view: 'dashboard/playback.html'
}
}, {
path: 'availableplugins.html',
pageProps: {
controller: 'dashboard/plugins/available/index',
view: 'dashboard/plugins/available/index.html'
}
}, {
path: 'repositories.html',
pageProps: {
controller: 'dashboard/plugins/repositories/index',
view: 'dashboard/plugins/repositories/index.html'
}
}, {
path: 'livetvguideprovider.html',
pageProps: {
controller: 'livetvguideprovider',
view: 'livetvguideprovider.html'
}
}, {
path: 'livetvsettings.html',
pageProps: {
controller: 'livetvsettings',
view: 'livetvsettings.html'
}
}, {
path: 'livetvstatus.html',
pageProps: {
controller: 'livetvstatus',
view: 'livetvstatus.html'
}
}, {
path: 'livetvtuner.html',
pageProps: {
controller: 'livetvtuner',
view: 'livetvtuner.html'
}
}, {
path: 'installedplugins.html',
pageProps: {
controller: 'dashboard/plugins/installed/index',
view: 'dashboard/plugins/installed/index.html'
}
}, {
path: 'scheduledtask.html',
pageProps: {
controller: 'dashboard/scheduledtasks/scheduledtask',
view: 'dashboard/scheduledtasks/scheduledtask.html'
}
}, {
path: 'scheduledtasks.html',
pageProps: {
controller: 'dashboard/scheduledtasks/scheduledtasks',
view: 'dashboard/scheduledtasks/scheduledtasks.html'
}
}, {
path: 'dashboard/activity',
pageProps: {
controller: 'dashboard/serveractivity',
view: 'dashboard/serveractivity.html'
}
}, {
path: 'apikeys.html',
pageProps: {
controller: 'dashboard/apikeys',
view: 'dashboard/apikeys.html'
}
}, {
path: 'streamingsettings.html',
pageProps: {
view: 'dashboard/streaming.html',
controller: 'dashboard/streaming'
}
}
];

View file

@ -1,3 +1,2 @@
export * from './admin';
export * from './public'; export * from './public';
export * from './user'; export * from './user';

View file

@ -10,28 +10,28 @@ const createLinkElement = (activeTab: string) => ({
is="emby-linkbutton" is="emby-linkbutton"
data-role="button" data-role="button"
class="${activeTab === 'useredit' ? 'ui-btn-active' : ''}" class="${activeTab === 'useredit' ? 'ui-btn-active' : ''}"
onclick="Dashboard.navigate('useredit.html', true);"> onclick="Dashboard.navigate('/dashboard/users/profile', true);">
${globalize.translate('Profile')} ${globalize.translate('Profile')}
</a> </a>
<a href="#" <a href="#"
is="emby-linkbutton" is="emby-linkbutton"
data-role="button" data-role="button"
class="${activeTab === 'userlibraryaccess' ? 'ui-btn-active' : ''}" class="${activeTab === 'userlibraryaccess' ? 'ui-btn-active' : ''}"
onclick="Dashboard.navigate('userlibraryaccess.html', true);"> onclick="Dashboard.navigate('/dashboard/users/access', true);">
${globalize.translate('TabAccess')} ${globalize.translate('TabAccess')}
</a> </a>
<a href="#" <a href="#"
is="emby-linkbutton" is="emby-linkbutton"
data-role="button" data-role="button"
class="${activeTab === 'userparentalcontrol' ? 'ui-btn-active' : ''}" class="${activeTab === 'userparentalcontrol' ? 'ui-btn-active' : ''}"
onclick="Dashboard.navigate('userparentalcontrol.html', true);"> onclick="Dashboard.navigate('/dashboard/users/parentalcontrol', true);">
${globalize.translate('TabParentalControl')} ${globalize.translate('TabParentalControl')}
</a> </a>
<a href="#" <a href="#"
is="emby-linkbutton" is="emby-linkbutton"
data-role="button" data-role="button"
class="${activeTab === 'userpassword' ? 'ui-btn-active' : ''}" class="${activeTab === 'userpassword' ? 'ui-btn-active' : ''}"
onclick="Dashboard.navigate('userpassword.html', true);"> onclick="Dashboard.navigate('/dashboard/users/password', true);">
${globalize.translate('HeaderPassword')} ${globalize.translate('HeaderPassword')}
</a>` </a>`
}); });

View file

@ -11,7 +11,7 @@ const createLinkElement = ({ user, renderImgUrl }: { user: UserDto, renderImgUrl
__html: `<a __html: `<a
is="emby-linkbutton" is="emby-linkbutton"
class="cardContent" class="cardContent"
href="#/useredit.html?userId=${user.Id}" href="#/dashboard/users/profile?userId=${user.Id}"
> >
${renderImgUrl} ${renderImgUrl}
</a>` </a>`

View file

@ -99,7 +99,7 @@ export function loadSections(elem, apiClient, user, userSettings) {
const createNowLink = elem.querySelector('#button-createLibrary'); const createNowLink = elem.querySelector('#button-createLibrary');
if (createNowLink) { if (createNowLink) {
createNowLink.addEventListener('click', function () { createNowLink.addEventListener('click', function () {
Dashboard.navigate('library.html'); Dashboard.navigate('dashboard/libraries');
}); });
} }
} }

View file

@ -527,7 +527,7 @@ class AppRouter {
} }
if (item === 'manageserver') { if (item === 'manageserver') {
return '#/dashboard.html'; return '#/dashboard';
} }
if (item === 'recordedtv') { if (item === 'recordedtv') {

View file

@ -115,7 +115,7 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
<MenuItem <MenuItem
key='admin-dashboard-link' key='admin-dashboard-link'
component={Link} component={Link}
to='/dashboard.html' to='/dashboard'
onClick={onMenuClose} onClick={onMenuClose}
> >
@ -127,7 +127,7 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
<MenuItem <MenuItem
key='admin-metadata-link' key='admin-metadata-link'
component={Link} component={Link}
to='/edititemmetadata.html' to='/metadata'
onClick={onMenuClose} onClick={onMenuClose}
> >
<ListItemIcon> <ListItemIcon>

View file

@ -3,7 +3,7 @@
<div class="dashboardSections" style="padding-top:.5em;"> <div class="dashboardSections" style="padding-top:.5em;">
<div class="dashboardColumn dashboardColumn-2-60 dashboardColumn-3-46"> <div class="dashboardColumn dashboardColumn-2-60 dashboardColumn-3-46">
<div class="dashboardSection"> <div class="dashboardSection">
<a is="emby-linkbutton" href="#/dashboardgeneral.html" class="button-flat sectionTitleTextButton"> <a is="emby-linkbutton" href="#/dashboard/settings" class="button-flat sectionTitleTextButton">
<h3>${TabServer}</h3> <h3>${TabServer}</h3>
<span class="material-icons chevron_right" aria-hidden="true"></span> <span class="material-icons chevron_right" aria-hidden="true"></span>
</a> </a>
@ -33,7 +33,7 @@
</div> </div>
<div class="dashboardSection"> <div class="dashboardSection">
<a is="emby-linkbutton" href="#/devices.html" class="button-flat sectionTitleTextButton"> <a is="emby-linkbutton" href="#/dashboard/devices" class="button-flat sectionTitleTextButton">
<h3>${HeaderActiveDevices}</h3> <h3>${HeaderActiveDevices}</h3>
<span class="material-icons chevron_right" aria-hidden="true"></span> <span class="material-icons chevron_right" aria-hidden="true"></span>
</a> </a>
@ -70,7 +70,7 @@
</div> </div>
<div class="dashboardSection"> <div class="dashboardSection">
<a is="emby-linkbutton" href="#/dashboardgeneral.html" class="button-flat sectionTitleTextButton"> <a is="emby-linkbutton" href="#/dashboard/settings" class="button-flat sectionTitleTextButton">
<h3>${HeaderPaths}</h3> <h3>${HeaderPaths}</h3>
<span class="material-icons chevron_right" aria-hidden="true"></span> <span class="material-icons chevron_right" aria-hidden="true"></span>
</a> </a>

View file

@ -73,7 +73,7 @@ function showDeviceMenu(view, btn, deviceId) {
callback: function (id) { callback: function (id) {
switch (id) { switch (id) {
case 'open': case 'open':
Dashboard.navigate('device.html?id=' + deviceId); Dashboard.navigate('dashboard/devices/edit?id=' + deviceId);
break; break;
case 'delete': case 'delete':
@ -94,7 +94,7 @@ function load(page, devices) {
deviceHtml += '<div class="cardBox visualCardBox">'; deviceHtml += '<div class="cardBox visualCardBox">';
deviceHtml += '<div class="cardScalable">'; deviceHtml += '<div class="cardScalable">';
deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>'; deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
deviceHtml += `<a is="emby-linkbutton" href="#!/device.html?id=${escapeHtml(device.Id)}" class="cardContent cardImageContainer ${cardBuilder.getDefaultBackgroundClass()}">`; deviceHtml += `<a is="emby-linkbutton" href="#/dashboard/devices/edit?id=${escapeHtml(device.Id)}" class="cardContent cardImageContainer ${cardBuilder.getDefaultBackgroundClass()}">`;
// audit note: getDeviceIcon returns static text // audit note: getDeviceIcon returns static text
const iconUrl = imageHelper.getDeviceIcon(device); const iconUrl = imageHelper.getDeviceIcon(device);

View file

@ -264,7 +264,7 @@
<button is="emby-button" type="submit" class="raised button-submit block"> <button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span> <span>${Save}</span>
</button> </button>
<button is="emby-button" type="button" class="button-cancel raised block" onclick="Dashboard.navigate('dlnaprofiles.html');"> <button is="emby-button" type="button" class="button-cancel raised block" onclick="Dashboard.navigate('dashboard/dlna/profiles');">
<span>${ButtonCancel}</span> <span>${ButtonCancel}</span>
</button> </button>
</div> </div>

View file

@ -639,7 +639,7 @@ function saveProfile(page, profile) {
data: JSON.stringify(profile), data: JSON.stringify(profile),
contentType: 'application/json' contentType: 'application/json'
}).then(function () { }).then(function () {
Dashboard.navigate('dlnaprofiles.html'); Dashboard.navigate('dashboard/dlna/profiles');
}, Dashboard.processErrorResponse); }, Dashboard.processErrorResponse);
} }

View file

@ -8,7 +8,7 @@
<div class="verticalSection verticalSection-extrabottompadding"> <div class="verticalSection verticalSection-extrabottompadding">
<div class="sectionTitleContainer flex align-items-center"> <div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${HeaderCustomDlnaProfiles}</h2> <h2 class="sectionTitle">${HeaderCustomDlnaProfiles}</h2>
<a is="emby-linkbutton" href="#/dlnaprofile.html" class="fab submit" style="margin:0 0 0 1em"> <a is="emby-linkbutton" href="#/dashboard/dlna/profiles/edit" class="fab submit" style="margin:0 0 0 1em">
<span class="material-icons add" aria-hidden="true"></span> <span class="material-icons add" aria-hidden="true"></span>
</a> </a>
</div> </div>

View file

@ -40,7 +40,7 @@ function renderProfiles(page, element, profiles) {
html += '<div class="listItem listItem-border">'; html += '<div class="listItem listItem-border">';
html += '<span class="listItemIcon material-icons live_tv" aria-hidden="true"></span>'; html += '<span class="listItemIcon material-icons live_tv" aria-hidden="true"></span>';
html += '<div class="listItemBody two-line">'; html += '<div class="listItemBody two-line">';
html += "<a is='emby-linkbutton' style='padding:0;margin:0;' data-ripple='false' class='clearLink' href='#/dlnaprofile.html?id=" + profile.Id + "'>"; html += "<a is='emby-linkbutton' style='padding:0;margin:0;' data-ripple='false' class='clearLink' href='#/dashboard/dlna/profiles/edit?id=" + profile.Id + "'>";
html += '<div>' + escapeHtml(profile.Name) + '</div>'; html += '<div>' + escapeHtml(profile.Name) + '</div>';
html += '</a>'; html += '</a>';
html += '</div>'; html += '</div>';
@ -78,10 +78,10 @@ function deleteProfile(page, id) {
function getTabs() { function getTabs() {
return [{ return [{
href: '#/dlnasettings.html', href: '#/dashboard/dlna',
name: globalize.translate('Settings') name: globalize.translate('Settings')
}, { }, {
href: '#/dlnaprofiles.html', href: '#/dashboard/dlna/profiles',
name: globalize.translate('TabProfiles') name: globalize.translate('TabProfiles')
}]; }];
} }

View file

@ -37,10 +37,10 @@ function onSubmit() {
function getTabs() { function getTabs() {
return [{ return [{
href: '#/dlnasettings.html', href: '#/dashboard/dlna',
name: globalize.translate('Settings') name: globalize.translate('Settings')
}, { }, {
href: '#/dlnaprofiles.html', href: '#/dashboard/dlna/profiles',
name: globalize.translate('TabProfiles') name: globalize.translate('TabProfiles')
}]; }];
} }

View file

@ -167,13 +167,13 @@ function setDecodingCodecsVisible(context, value) {
function getTabs() { function getTabs() {
return [{ return [{
href: '#/encodingsettings.html', href: '#/dashboard/playback/transcoding',
name: globalize.translate('Transcoding') name: globalize.translate('Transcoding')
}, { }, {
href: '#/playbackconfiguration.html', href: '#/dashboard/playback/resume',
name: globalize.translate('ButtonResume') name: globalize.translate('ButtonResume')
}, { }, {
href: '#/streamingsettings.html', href: '#/dashboard/playback/streaming',
name: globalize.translate('TabStreaming') name: globalize.translate('TabStreaming')
}]; }];
} }

View file

@ -360,16 +360,16 @@ function getVirtualFolderHtml(page, virtualFolder, index) {
function getTabs() { function getTabs() {
return [{ return [{
href: '#/library.html', href: '#/dashboard/libraries',
name: globalize.translate('HeaderLibraries') name: globalize.translate('HeaderLibraries')
}, { }, {
href: '#/librarydisplay.html', href: '#/dashboard/libraries/display',
name: globalize.translate('Display') name: globalize.translate('Display')
}, { }, {
href: '#/metadataimages.html', href: '#/dashboard/libraries/metadata',
name: globalize.translate('Metadata') name: globalize.translate('Metadata')
}, { }, {
href: '#/metadatanfo.html', href: '#/dashboard/libraries/nfo',
name: globalize.translate('TabNfoSettings') name: globalize.translate('TabNfoSettings')
}]; }];
} }

View file

@ -7,16 +7,16 @@ import Dashboard from '../../utils/dashboard';
function getTabs() { function getTabs() {
return [{ return [{
href: '#/library.html', href: '#/dashboard/libraries',
name: globalize.translate('HeaderLibraries') name: globalize.translate('HeaderLibraries')
}, { }, {
href: '#/librarydisplay.html', href: '#/dashboard/libraries/display',
name: globalize.translate('Display') name: globalize.translate('Display')
}, { }, {
href: '#/metadataimages.html', href: '#/dashboard/libraries/metadata',
name: globalize.translate('Metadata') name: globalize.translate('Metadata')
}, { }, {
href: '#/metadatanfo.html', href: '#/dashboard/libraries/nfo',
name: globalize.translate('TabNfoSettings') name: globalize.translate('TabNfoSettings')
}]; }];
} }

View file

@ -88,16 +88,16 @@ function onSubmit() {
function getTabs() { function getTabs() {
return [{ return [{
href: '#/library.html', href: '#/dashboard/libraries',
name: globalize.translate('HeaderLibraries') name: globalize.translate('HeaderLibraries')
}, { }, {
href: '#/librarydisplay.html', href: '#/dashboard/libraries/display',
name: globalize.translate('Display') name: globalize.translate('Display')
}, { }, {
href: '#/metadataimages.html', href: '#/dashboard/libraries/metadata',
name: globalize.translate('Metadata') name: globalize.translate('Metadata')
}, { }, {
href: '#/metadatanfo.html', href: '#/dashboard/libraries/nfo',
name: globalize.translate('TabNfoSettings') name: globalize.translate('TabNfoSettings')
}]; }];
} }

View file

@ -46,16 +46,16 @@ function showConfirmMessage() {
function getTabs() { function getTabs() {
return [{ return [{
href: '#/library.html', href: '#/dashboard/libraries',
name: globalize.translate('HeaderLibraries') name: globalize.translate('HeaderLibraries')
}, { }, {
href: '#/librarydisplay.html', href: '#/dashboard/libraries/display',
name: globalize.translate('Display') name: globalize.translate('Display')
}, { }, {
href: '#/metadataimages.html', href: '#/dashboard/libraries/metadata',
name: globalize.translate('Metadata') name: globalize.translate('Metadata')
}, { }, {
href: '#/metadatanfo.html', href: '#/dashboard/libraries/nfo',
name: globalize.translate('TabNfoSettings') name: globalize.translate('TabNfoSettings')
}]; }];
} }

View file

@ -31,13 +31,13 @@ function onSubmit() {
function getTabs() { function getTabs() {
return [{ return [{
href: '#/encodingsettings.html', href: '#/dashboard/playback/transcoding',
name: globalize.translate('Transcoding') name: globalize.translate('Transcoding')
}, { }, {
href: '#/playbackconfiguration.html', href: '#/dashboard/playback/resume',
name: globalize.translate('ButtonResume') name: globalize.translate('ButtonResume')
}, { }, {
href: '#/streamingsettings.html', href: '#/dashboard/playback/streaming',
name: globalize.translate('TabStreaming') name: globalize.translate('TabStreaming')
}]; }];
} }

View file

@ -120,7 +120,7 @@ function onSearchBarType(searchBar) {
function getPluginHtml(plugin, options, installedPlugins) { function getPluginHtml(plugin, options, installedPlugins) {
let html = ''; let html = '';
let href = plugin.externalUrl ? plugin.externalUrl : '#/addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid; let href = plugin.externalUrl ? plugin.externalUrl : '#/dashboard/plugins/add?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
if (options.context) { if (options.context) {
href += '&context=' + options.context; href += '&context=' + options.context;
@ -161,13 +161,13 @@ function getPluginHtml(plugin, options, installedPlugins) {
function getTabs() { function getTabs() {
return [{ return [{
href: '#/installedplugins.html', href: '#/dashboard/plugins',
name: globalize.translate('TabMyPlugins') name: globalize.translate('TabMyPlugins')
}, { }, {
href: '#/availableplugins.html', href: '#/dashboard/plugins/catalog',
name: globalize.translate('TabCatalog') name: globalize.translate('TabCatalog')
}, { }, {
href: '#/repositories.html', href: '#/dashboard/plugins/repositories',
name: globalize.translate('TabRepositories') name: globalize.translate('TabRepositories')
}]; }];
} }

View file

@ -130,7 +130,7 @@ function populateList(page, plugins, pluginConfigurationPages) {
} else { } else {
html += '<div class="centerMessage">'; html += '<div class="centerMessage">';
html += '<h1>' + globalize.translate('MessageNoPluginsInstalled') + '</h1>'; html += '<h1>' + globalize.translate('MessageNoPluginsInstalled') + '</h1>';
html += '<p><a is="emby-linkbutton" class="button-link" href="#/availableplugins.html">'; html += '<p><a is="emby-linkbutton" class="button-link" href="#/dashboard/plugins/catalog">';
html += globalize.translate('MessageBrowsePluginCatalog'); html += globalize.translate('MessageBrowsePluginCatalog');
html += '</a></p>'; html += '</a></p>';
html += '</div>'; html += '</div>';
@ -221,13 +221,13 @@ function reloadList(page) {
function getTabs() { function getTabs() {
return [{ return [{
href: '#/installedplugins.html', href: '#/dashboard/plugins',
name: globalize.translate('TabMyPlugins') name: globalize.translate('TabMyPlugins')
}, { }, {
href: '#/availableplugins.html', href: '#/dashboard/plugins/catalog',
name: globalize.translate('TabCatalog') name: globalize.translate('TabCatalog')
}, { }, {
href: '#/repositories.html', href: '#/dashboard/plugins/repositories',
name: globalize.translate('TabRepositories') name: globalize.translate('TabRepositories')
}]; }];
} }

View file

@ -105,13 +105,13 @@ function getRepositoryElement(repository) {
function getTabs() { function getTabs() {
return [{ return [{
href: '#/installedplugins.html', href: '#/dashboard/plugins',
name: globalize.translate('TabMyPlugins') name: globalize.translate('TabMyPlugins')
}, { }, {
href: '#/availableplugins.html', href: '#/dashboard/plugins/catalog',
name: globalize.translate('TabCatalog') name: globalize.translate('TabCatalog')
}, { }, {
href: '#/repositories.html', href: '#/dashboard/plugins/repositories',
name: globalize.translate('TabRepositories') name: globalize.translate('TabRepositories')
}]; }];
} }

View file

@ -53,12 +53,12 @@ function populateList(page, tasks) {
html += '<div class="paperList">'; html += '<div class="paperList">';
} }
html += '<div class="listItem listItem-border scheduledTaskPaperIconItem" data-status="' + task.State + '">'; html += '<div class="listItem listItem-border scheduledTaskPaperIconItem" data-status="' + task.State + '">';
html += "<a is='emby-linkbutton' style='margin:0;padding:0;' class='clearLink listItemIconContainer' href='scheduledtask.html?id=" + task.Id + "'>"; html += "<a is='emby-linkbutton' style='margin:0;padding:0;' class='clearLink listItemIconContainer' href='/dashboard/tasks/edit?id=" + task.Id + "'>";
html += '<span class="material-icons listItemIcon schedule" aria-hidden="true"></span>'; html += '<span class="material-icons listItemIcon schedule" aria-hidden="true"></span>';
html += '</a>'; html += '</a>';
html += '<div class="listItemBody two-line">'; html += '<div class="listItemBody two-line">';
const textAlignStyle = globalize.getIsRTL() ? 'right' : 'left'; const textAlignStyle = globalize.getIsRTL() ? 'right' : 'left';
html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:" + textAlignStyle + ";' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>"; html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:" + textAlignStyle + ";' is='emby-linkbutton' href='/dashboard/tasks/edit?id=" + task.Id + "'>";
html += "<h3 class='listItemBodyText'>" + task.Name + '</h3>'; html += "<h3 class='listItemBodyText'>" + task.Name + '</h3>';
html += "<div class='secondary listItemBodyText' id='taskProgress" + task.Id + "'>" + getTaskProgressHtml(task) + '</div>'; html += "<div class='secondary listItemBodyText' id='taskProgress" + task.Id + "'>" + getTaskProgressHtml(task) + '</div>';
html += '</a>'; html += '</a>';

View file

@ -1,12 +0,0 @@
<div id="serverActivityPage" data-role="page" class="page type-interior serverActivityPage noSecondaryNavPage" data-title="${HeaderActivity}">
<div>
<div class="content-primary">
<div class="verticalSection">
<h2 class="sectionTitle"></h2>
</div>
<div class="readOnlyContent">
<div class="paperList activityItems" data-activitylimit="100"></div>
</div>
</div>
</div>
</div>

View file

@ -1,32 +0,0 @@
import ActivityLog from '../../components/activitylog';
import globalize from '../../scripts/globalize';
import { toBoolean } from '../../utils/string.ts';
export default function (view, params) {
let activityLog;
if (toBoolean(params.useractivity, true)) {
view.querySelector('.activityItems').setAttribute('data-useractivity', 'true');
view.querySelector('.sectionTitle').innerHTML = globalize.translate('HeaderActivity');
} else {
view.querySelector('.activityItems').setAttribute('data-useractivity', 'false');
view.querySelector('.sectionTitle').innerHTML = globalize.translate('Alerts');
}
view.addEventListener('viewshow', function () {
if (!activityLog) {
activityLog = new ActivityLog({
serverId: ApiClient.serverId(),
element: view.querySelector('.activityItems')
});
}
});
view.addEventListener('viewdestroy', function () {
if (activityLog) {
activityLog.destroy();
}
activityLog = null;
});
}

View file

@ -22,13 +22,13 @@ function onSubmit() {
function getTabs() { function getTabs() {
return [{ return [{
href: '#/encodingsettings.html', href: '#/dashboard/playback/transcoding',
name: globalize.translate('Transcoding') name: globalize.translate('Transcoding')
}, { }, {
href: '#/playbackconfiguration.html', href: '#/dashboard/playback/resume',
name: globalize.translate('ButtonResume') name: globalize.translate('ButtonResume')
}, { }, {
href: '#/streamingsettings.html', href: '#/dashboard/playback/streaming',
name: globalize.translate('TabStreaming') name: globalize.translate('TabStreaming')
}]; }];
} }

View file

@ -5,7 +5,7 @@ import { getParameterByName } from '../utils/url.ts';
import Events from '../utils/events.ts'; import Events from '../utils/events.ts';
function onListingsSubmitted() { function onListingsSubmitted() {
Dashboard.navigate('livetvstatus.html'); Dashboard.navigate('dashboard/livetv');
} }
function init(page, type, providerId) { function init(page, type, providerId) {

View file

@ -220,9 +220,9 @@ function getProviderName(providerId) {
function getProviderConfigurationUrl(providerId) { function getProviderConfigurationUrl(providerId) {
switch (providerId.toLowerCase()) { switch (providerId.toLowerCase()) {
case 'xmltv': case 'xmltv':
return '#/livetvguideprovider.html?type=xmltv'; return '#/dashboard/livetv/guide?type=xmltv';
case 'schedulesdirect': case 'schedulesdirect':
return '#/livetvguideprovider.html?type=schedulesdirect'; return '#/dashboard/livetv/guide?type=schedulesdirect';
} }
} }
@ -249,7 +249,7 @@ function addProvider(button) {
} }
function addDevice() { function addDevice() {
Dashboard.navigate('livetvtuner.html'); Dashboard.navigate('dashboard/livetv/tuner');
} }
function showDeviceMenu(button, tunerDeviceId) { function showDeviceMenu(button, tunerDeviceId) {
@ -274,7 +274,7 @@ function showDeviceMenu(button, tunerDeviceId) {
break; break;
case 'edit': case 'edit':
Dashboard.navigate('livetvtuner.html?id=' + tunerDeviceId); Dashboard.navigate('dashboard/livetv/tuner?id=' + tunerDeviceId);
} }
}); });
}); });
@ -290,7 +290,7 @@ function onDevicesListClick(e) {
if (btnCardOptions) { if (btnCardOptions) {
showDeviceMenu(btnCardOptions, id); showDeviceMenu(btnCardOptions, id);
} else { } else {
Dashboard.navigate('livetvtuner.html?id=' + id); Dashboard.navigate('dashboard/livetv/tuner?id=' + id);
} }
} }
} }

View file

@ -96,7 +96,7 @@ function submitForm(page) {
contentType: 'application/json' contentType: 'application/json'
}).then(function () { }).then(function () {
Dashboard.processServerConfigurationUpdateResult(); Dashboard.processServerConfigurationUpdateResult();
Dashboard.navigate('livetvstatus.html'); Dashboard.navigate('dashboard/livetv');
}, function () { }, function () {
loading.hide(); loading.hide();
Dashboard.alert({ Dashboard.alert({

View file

@ -77,7 +77,7 @@
</div> </div>
<div class="adminSection verticalSection verticalSection-extrabottompadding hide"> <div class="adminSection verticalSection verticalSection-extrabottompadding hide">
<h2 class="sectionTitle" style="padding-left:.25em;">${HeaderAdmin}</h2> <h2 class="sectionTitle" style="padding-left:.25em;">${HeaderAdmin}</h2>
<a is="emby-linkbutton" href="#/dashboard.html" style="display:block;padding:0;margin:0;" class="listItem-border"> <a is="emby-linkbutton" href="#/dashboard" style="display:block;padding:0;margin:0;" class="listItem-border">
<div class="listItem"> <div class="listItem">
<span class="material-icons listItemIcon listItemIcon-transparent dashboard" aria-hidden="true"></span> <span class="material-icons listItemIcon listItemIcon-transparent dashboard" aria-hidden="true"></span>
<div class="listItemBody"> <div class="listItemBody">
@ -85,7 +85,7 @@
</div> </div>
</div> </div>
</a> </a>
<a is="emby-linkbutton" href="#/edititemmetadata.html" style="display:block;padding:0;margin:0;" class="listItem-border"> <a is="emby-linkbutton" href="#/metadata" style="display:block;padding:0;margin:0;" class="listItem-border">
<div class="listItem"> <div class="listItem">
<span class="material-icons listItemIcon listItemIcon-transparent mode_edit" aria-hidden="true"></span> <span class="material-icons listItemIcon listItemIcon-transparent mode_edit" aria-hidden="true"></span>
<div class="listItemBody"> <div class="listItemBody">

View file

@ -327,8 +327,8 @@ function refreshLibraryInfoInDrawer(user) {
html += '<h3 class="sidebarHeader">'; html += '<h3 class="sidebarHeader">';
html += globalize.translate('HeaderAdmin'); html += globalize.translate('HeaderAdmin');
html += '</h3>'; html += '</h3>';
html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#/dashboard.html"><span class="material-icons navMenuOptionIcon dashboard" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('TabDashboard')}</span></a>`; html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#/dashboard"><span class="material-icons navMenuOptionIcon dashboard" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('TabDashboard')}</span></a>`;
html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder editorViewMenu" data-itemid="editor" href="#/edititemmetadata.html"><span class="material-icons navMenuOptionIcon mode_edit" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('Metadata')}</span></a>`; html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder editorViewMenu" data-itemid="editor" href="#/metadata"><span class="material-icons navMenuOptionIcon mode_edit" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('Metadata')}</span></a>`;
html += '</div>'; html += '</div>';
} }
@ -376,249 +376,6 @@ function refreshLibraryInfoInDrawer(user) {
} }
} }
function refreshDashboardInfoInDrawer(page, apiClient) {
currentDrawerType = 'admin';
loadNavDrawer();
if (navDrawerScrollContainer.querySelector('.adminDrawerLogo')) {
updateDashboardMenuSelectedItem(page);
} else {
createDashboardMenu(page, apiClient);
}
}
function isUrlInCurrentView(url) {
return window.location.href.toString().toLowerCase().indexOf(url.toLowerCase()) !== -1;
}
function updateDashboardMenuSelectedItem(page) {
const links = navDrawerScrollContainer.querySelectorAll('.navMenuOption');
const currentViewId = page.id;
for (let i = 0, length = links.length; i < length; i++) {
let link = links[i];
let selected = false;
let pageIds = link.getAttribute('data-pageids');
if (pageIds) {
pageIds = pageIds.split('|');
selected = pageIds.indexOf(currentViewId) != -1;
}
let pageUrls = link.getAttribute('data-pageurls');
if (pageUrls) {
pageUrls = pageUrls.split('|');
selected = pageUrls.filter(isUrlInCurrentView).length > 0;
}
if (selected) {
link.classList.add('navMenuOption-selected');
let title = '';
link = link.querySelector('.navMenuOptionText') || link;
title += (link.innerText || link.textContent).trim();
LibraryMenu.setTitle(title);
} else {
link.classList.remove('navMenuOption-selected');
}
}
}
function createToolsMenuList(pluginItems) {
const links = [{
name: globalize.translate('TabServer')
}, {
name: globalize.translate('TabDashboard'),
href: '#/dashboard.html',
pageIds: ['dashboardPage'],
icon: 'dashboard'
}, {
name: globalize.translate('General'),
href: '#/dashboardgeneral.html',
pageIds: ['dashboardGeneralPage'],
icon: 'settings'
}, {
name: globalize.translate('HeaderUsers'),
href: '#/userprofiles.html',
pageIds: ['userProfilesPage', 'newUserPage', 'editUserPage', 'userLibraryAccessPage', 'userParentalControlPage', 'userPasswordPage'],
icon: 'people'
}, {
name: globalize.translate('HeaderLibraries'),
href: '#/library.html',
pageIds: ['mediaLibraryPage', 'librarySettingsPage', 'libraryDisplayPage', 'metadataImagesConfigurationPage', 'metadataNfoPage'],
icon: 'folder'
}, {
name: globalize.translate('TitlePlayback'),
icon: 'play_arrow',
href: '#/encodingsettings.html',
pageIds: ['encodingSettingsPage', 'playbackConfigurationPage', 'streamingSettingsPage']
}];
addPluginPagesToMainMenu(links, pluginItems, 'server');
links.push({
divider: true,
name: globalize.translate('HeaderDevices')
});
links.push({
name: globalize.translate('HeaderDevices'),
href: '#/devices.html',
pageIds: ['devicesPage', 'devicePage'],
icon: 'devices'
});
links.push({
name: globalize.translate('HeaderActivity'),
href: '#/dashboard/activity',
pageIds: ['serverActivityPage'],
icon: 'assessment'
});
links.push({
name: globalize.translate('DLNA'),
href: '#/dlnasettings.html',
pageIds: ['dlnaSettingsPage', 'dlnaProfilesPage', 'dlnaProfilePage'],
icon: 'input'
});
links.push({
divider: true,
name: globalize.translate('LiveTV')
});
links.push({
name: globalize.translate('LiveTV'),
href: '#/livetvstatus.html',
pageIds: ['liveTvStatusPage', 'liveTvTunerPage'],
icon: 'live_tv'
});
links.push({
name: globalize.translate('HeaderDVR'),
href: '#/livetvsettings.html',
pageIds: ['liveTvSettingsPage'],
icon: 'dvr'
});
addPluginPagesToMainMenu(links, pluginItems, 'livetv');
links.push({
divider: true,
name: globalize.translate('TabAdvanced')
});
links.push({
name: globalize.translate('TabNetworking'),
icon: 'cloud',
href: '#/networking.html',
pageIds: ['networkingPage']
});
links.push({
name: globalize.translate('HeaderApiKeys'),
icon: 'vpn_key',
href: '#/apikeys.html',
pageIds: ['apiKeysPage']
});
links.push({
name: globalize.translate('TabLogs'),
href: '#/log.html',
pageIds: ['logPage'],
icon: 'bug_report'
});
links.push({
name: globalize.translate('Notifications'),
icon: 'notifications',
href: '#/notificationsettings.html'
});
links.push({
name: globalize.translate('TabPlugins'),
icon: 'shopping_cart',
href: '#/installedplugins.html',
pageIds: ['pluginsPage', 'pluginCatalogPage']
});
links.push({
name: globalize.translate('TabScheduledTasks'),
href: '#/scheduledtasks.html',
pageIds: ['scheduledTasksPage', 'scheduledTaskPage'],
icon: 'schedule'
});
if (hasUnsortedPlugins(pluginItems)) {
links.push({
divider: true,
name: globalize.translate('TabPlugins')
});
addPluginPagesToMainMenu(links, pluginItems);
}
return links;
}
function hasUnsortedPlugins(pluginItems) {
for (const pluginItem of pluginItems) {
if (pluginItem.EnableInMainMenu && pluginItem.MenuSection === undefined) {
return true;
}
}
return false;
}
function addPluginPagesToMainMenu(links, pluginItems, section) {
for (const pluginItem of pluginItems) {
if (pluginItem.EnableInMainMenu && pluginItem.MenuSection === section) {
links.push({
name: pluginItem.DisplayName,
icon: pluginItem.MenuIcon || 'folder',
href: Dashboard.getPluginUrl(pluginItem.Name),
pageUrls: [Dashboard.getPluginUrl(pluginItem.Name)]
});
}
}
}
function getToolsMenuLinks(apiClient) {
return apiClient.getJSON(apiClient.getUrl('web/configurationpages') + '?pageType=PluginConfiguration&EnableInMainMenu=true').then(createToolsMenuList, function () {
return createToolsMenuList([]);
});
}
function getToolsLinkHtml(item) {
let menuHtml = '';
let pageIds = item.pageIds ? item.pageIds.join('|') : '';
pageIds = pageIds ? ' data-pageids="' + pageIds + '"' : '';
let pageUrls = item.pageUrls ? item.pageUrls.join('|') : '';
pageUrls = pageUrls ? ' data-pageurls="' + pageUrls + '"' : '';
menuHtml += '<a is="emby-linkbutton" class="navMenuOption" href="' + item.href + '"' + pageIds + pageUrls + '>';
if (item.icon) {
menuHtml += '<span class="material-icons navMenuOptionIcon ' + item.icon + '" aria-hidden="true"></span>';
}
menuHtml += '<span class="navMenuOptionText">';
menuHtml += escapeHtml(item.name);
menuHtml += '</span>';
return menuHtml + '</a>';
}
function getToolsMenuHtml(apiClient) {
return getToolsMenuLinks(apiClient).then(function (items) {
let menuHtml = '';
menuHtml += '<div class="drawerContent">';
for (const item of items) {
if (item.href) {
menuHtml += getToolsLinkHtml(item);
} else if (item.name) {
menuHtml += '<h3 class="sidebarHeader">';
menuHtml += escapeHtml(item.name);
menuHtml += '</h3>';
}
}
return menuHtml + '</div>';
});
}
function createDashboardMenu(page, apiClient) {
return getToolsMenuHtml(apiClient).then(function (toolsMenuHtml) {
let html = '';
html += '<a class="adminDrawerLogo clearLink" is="emby-linkbutton" href="#/home.html">';
html += '<img src="assets/img/icon-transparent.png" />';
html += '</a>';
html += toolsMenuHtml;
navDrawerScrollContainer.innerHTML = html;
updateDashboardMenuSelectedItem(page);
});
}
function onSidebarLinkClick() { function onSidebarLinkClick() {
const section = this.getElementsByClassName('sectionName')[0]; const section = this.getElementsByClassName('sectionName')[0];
const text = section ? section.innerHTML : this.innerHTML; const text = section ? section.innerHTML : this.innerHTML;
@ -1026,15 +783,8 @@ pageClassOn('pageshow', 'page', function (e) {
const isDashboardPage = page.classList.contains('type-interior'); const isDashboardPage = page.classList.contains('type-interior');
const isHomePage = page.classList.contains('homePage'); const isHomePage = page.classList.contains('homePage');
const isLibraryPage = !isDashboardPage && page.classList.contains('libraryPage'); const isLibraryPage = !isDashboardPage && page.classList.contains('libraryPage');
const apiClient = getCurrentApiClient();
if (isDashboardPage) { if (!isDashboardPage) {
if (mainDrawerButton) {
mainDrawerButton.classList.remove('hide');
}
refreshDashboardInfoInDrawer(page, apiClient);
} else {
if (mainDrawerButton) { if (mainDrawerButton) {
if (enableLibraryNavDrawer || (isHomePage && enableLibraryNavDrawerHome)) { if (enableLibraryNavDrawer || (isHomePage && enableLibraryNavDrawerHome)) {
mainDrawerButton.classList.remove('hide'); mainDrawerButton.classList.remove('hide');