cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 10:58:20 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4095 from thornbill/view-manager-react

Browse Source
This commit is contained in:
Bill Thornton 2022-11-01 21:30:35 -04:00 committed by GitHub
commit e64e4ce355
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 203 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/viewManager/ViewManagerPage.tsx Normal file
View File

@ -0,0 +1,80 @@
import React, { FunctionComponent, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import globalize from '../../scripts/globalize';
import viewManager from './viewManager';
export interface ViewManagerPageProps {
controller: string
view: string
type?: string
isFullscreen?: boolean
isNowPlayingBarEnabled?: boolean
isThemeMediaSupported?: boolean
transition?: string
}
/**
* Page component that renders legacy views via the ViewManager.
* NOTE: Any new pages should use the generic Page component instead.
*/
const ViewManagerPage: FunctionComponent<ViewManagerPageProps> = ({
controller,
view,
type,
isFullscreen = false,
isNowPlayingBarEnabled = true,
isThemeMediaSupported = false,
transition
}) => {
const location = useLocation();
useEffect(() => {
const loadPage = async () => {
const [ controllerFactory, viewHtml ] = await Promise.all([
import(/* webpackChunkName: "[request]" */ `../../controllers/${controller}`),
import(/* webpackChunkName: "[request]" */ `../../controllers/${view}`)
.then(html => globalize.translateHtml(html))
]);
const viewOptions = {
url: location.pathname + location.search,
controllerFactory,
view: viewHtml,
type,
state: location.state,
autoFocus: false,
fullscreen: isFullscreen,
transition,
options: {
supportsThemeMedia: isThemeMediaSupported,
enableMediaControl: isNowPlayingBarEnabled
}
};
viewManager.tryRestoreView(viewOptions)
.catch((result?: any) => {
if (!result || !result.cancelled) {
viewManager.loadView(viewOptions);
}
});
};
loadPage();
}, [
controller,
view,
type,
isFullscreen,
isNowPlayingBarEnabled,
isThemeMediaSupported,
transition,
location.pathname,
location.search,
location.state
]);
return <></>;
};
export default ViewManagerPage;

2
src/components/viewManager/viewManager.js
View File

@ -167,7 +167,7 @@ class ViewManager {
}
return viewContainer.tryRestoreView(options).then(function (view) {
onViewChanging();
if (onViewChanging) onViewChanging();
onViewChange(view, options, true);
});
}

3
src/routes/index.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import ConnectionRequired from '../components/ConnectionRequired';
import { LEGACY_USER_ROUTES, toViewManagerPageRoute } from './legacyRoutes';
import UserNew from './user/usernew';
import Search from './search';
import UserEdit from './user/useredit';
@ -22,6 +23,8 @@ const AppRoutes = () => (
<Route path='userprofile.html' element={<UserProfile />} />
<Route path='home.html' element={<Home />} />
<Route path='movies.html' element={<Movies />} />
{LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
</Route>
{/* Admin routes */}

23
src/routes/legacyRoutes/index.tsx Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
import { Route } from 'react-router-dom';
import ViewManagerPage, { ViewManagerPageProps } from '../../components/viewManager/ViewManagerPage';
export interface LegacyRoute {
path: string,
pageProps: ViewManagerPageProps
}
export function toViewManagerPageRoute(route: LegacyRoute) {
return (
<Route
key={route.path}
path={route.path}
element={
<ViewManagerPage {...route.pageProps} />
}
/>
);
}
export * from './user';

96
src/routes/legacyRoutes/user.ts Normal file
View File

@ -0,0 +1,96 @@
import { LegacyRoute } from '.';
export const LEGACY_USER_ROUTES: LegacyRoute[] = [
{
path: 'details',
pageProps: {
controller: 'itemDetails/index',
view: 'itemDetails/index.html'
}
}, {
path: 'list.html',
pageProps: {
controller: 'list',
view: 'list.html'
}
}, {
path: 'livetv.html',
pageProps: {
controller: 'livetv/livetvsuggested',
view: 'livetv.html'
}
}, {
path: 'music.html',
pageProps: {
controller: 'music/musicrecommended',
view: 'music/music.html'
}
}, {
path: 'mypreferencesmenu.html',
pageProps: {
controller: 'user/menu/index',
view: 'user/menu/index.html'
}
}, {
path: 'mypreferencescontrols.html',
pageProps: {
controller: 'user/controls/index',
view: 'user/controls/index.html'
}
}, {
path: 'mypreferencesdisplay.html',
pageProps: {
controller: 'user/display/index',
view: 'user/display/index.html'
}
}, {
path: 'mypreferenceshome.html',
pageProps: {
controller: 'user/home/index',
view: 'user/home/index.html'
}
}, {
path: 'mypreferencesquickconnect.html',
pageProps: {
controller: 'user/quickConnect/index',
view: 'user/quickConnect/index.html'
}
}, {
path: 'mypreferencesplayback.html',
pageProps: {
controller: 'user/playback/index',
view: 'user/playback/index.html'
}
}, {
path: 'mypreferencessubtitles.html',
pageProps: {
controller: 'user/subtitles/index',
view: 'user/subtitles/index.html'
}
}, {
path: 'tv.html',
pageProps: {
controller: 'shows/tvrecommended',
view: 'shows/tvrecommended.html'
}
}, {
path: 'video',
pageProps: {
controller: 'playback/video/index',
view: 'playback/video/index.html',
type: 'video-osd',
isFullscreen: true,
isNowPlayingBarEnabled: false,
isThemeMediaSupported: true
}
}, {
path: 'queue',
pageProps: {
controller: 'playback/queue/index',
view: 'playback/queue/index.html',
isFullscreen: true,
isNowPlayingBarEnabled: false,
isThemeMediaSupported: true
}
}
];

105
src/scripts/routes.js
View File

@ -70,55 +70,6 @@ import { appRouter } from '../components/appRouter';
controller: 'session/resetPassword/index'
});
defineRoute({
alias: '/mypreferencesmenu.html',
path: 'user/menu/index.html',
autoFocus: false,
controller: 'user/menu/index'
});
defineRoute({
alias: '/mypreferencescontrols.html',
path: 'user/controls/index.html',
autoFocus: false,
controller: 'user/controls/index'
});
defineRoute({
alias: '/mypreferencesdisplay.html',
path: 'user/display/index.html',
autoFocus: false,
controller: 'user/display/index'
});
defineRoute({
alias: '/mypreferenceshome.html',
path: 'user/home/index.html',
autoFocus: false,
controller: 'user/home/index'
});
defineRoute({
alias: '/mypreferencesquickconnect.html',
path: 'user/quickConnect/index.html',
autoFocus: false,
transition: 'fade',
controller: 'user/quickConnect/index'
});
defineRoute({
alias: '/mypreferencesplayback.html',
path: 'user/playback/index.html',
autoFocus: false,
controller: 'user/playback/index'
});
defineRoute({
alias: '/mypreferencessubtitles.html',
path: 'user/subtitles/index.html',
autoFocus: false,
controller: 'user/subtitles/index'
});
defineRoute({
alias: '/dashboard.html',
path: 'dashboard/dashboard.html',
@ -293,27 +244,6 @@ import { appRouter } from '../components/appRouter';
controller: 'dashboard/plugins/repositories/index'
});
defineRoute({
alias: '/list.html',
path: 'list.html',
autoFocus: false,
controller: 'list'
});
defineRoute({
alias: '/details',
path: 'itemDetails/index.html',
controller: 'itemDetails/index',
autoFocus: false
});
defineRoute({
alias: '/livetv.html',
path: 'livetv.html',
controller: 'livetv/livetvsuggested',
autoFocus: false
});
defineRoute({
alias: '/livetvguideprovider.html',
path: 'livetvguideprovider.html',
@ -345,13 +275,6 @@ import { appRouter } from '../components/appRouter';
controller: 'livetvtuner'
});
defineRoute({
alias: '/music.html',
path: 'music/music.html',
controller: 'music/musicrecommended',
autoFocus: false
});
defineRoute({
alias: '/installedplugins.html',
path: 'dashboard/plugins/installed/index.html',
@ -400,13 +323,6 @@ import { appRouter } from '../components/appRouter';
controller: 'dashboard/streaming'
});
defineRoute({
alias: '/tv.html',
path: 'shows/tvrecommended.html',
autoFocus: false,
controller: 'shows/tvrecommended'
});
defineRoute({
alias: '/wizardremoteaccess.html',
path: 'wizard/remote/index.html',
@ -455,27 +371,6 @@ import { appRouter } from '../components/appRouter';
anonymous: true
});
defineRoute({
alias: '/video',
path: 'playback/video/index.html',
controller: 'playback/video/index',
autoFocus: false,
type: 'video-osd',
supportsThemeMedia: true,
fullscreen: true,
enableMediaControl: false
});
defineRoute({
alias: '/queue',
path: 'playback/queue/index.html',
controller: 'playback/queue/index',
autoFocus: false,
fullscreen: true,
supportsThemeMedia: true,
enableMediaControl: false
});
defineRoute({
path: '/configurationpage',
autoFocus: false,