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

Render navigation elements with react

Browse source
This commit is contained in:
Bill Thornton 2022-11-18 18:58:11 -05:00
parent 5922bf082c
commit 1189d28974
4 changed files with 46 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/App.tsx
View file

@ -1,5 +1,5 @@
import { History } from '@remix-run/router'; import { History } from '@remix-run/router';
import React from 'react'; import React, { useEffect } from 'react';
import { HistoryRouter } from './components/HistoryRouter'; import { HistoryRouter } from './components/HistoryRouter';
import { ApiProvider } from './hooks/useApi'; import { ApiProvider } from './hooks/useApi';
@ -7,10 +7,32 @@ import { AppRoutes, ExperimentalAppRoutes } from './routes';
const App = ({ history }: { history: History }) => { const App = ({ history }: { history: History }) => {
const layoutMode = localStorage.getItem('layout'); const layoutMode = localStorage.getItem('layout');
useEffect(() => {
Promise.all([
// Initialize the UI components after first render
import('./scripts/libraryMenu'),
import('./scripts/autoBackdrops')
]);
}, []);
return ( return (
<ApiProvider> <ApiProvider>
<HistoryRouter history={history}> <HistoryRouter history={history}>
{layoutMode === 'experimental' ? <ExperimentalAppRoutes /> : <AppRoutes /> } <div className='backdropContainer' />
<div className='backgroundContainer' />
<div className='mainDrawer hide'>
<div className='mainDrawer-scrollContainer scrollContainer focuscontainer-y' />
</div>
<div className='skinHeader focuscontainer-x' />
<div className='mainAnimatedPages skinBody' />
<div className='skinBody'>
{layoutMode === 'experimental' ? <ExperimentalAppRoutes /> : <AppRoutes /> }
</div>
<div className='mainDrawerHandle' />
</HistoryRouter> </HistoryRouter>
</ApiProvider> </ApiProvider>
); );

19
src/components/viewContainer.js
View file

@ -2,6 +2,14 @@ import { importModule } from '@uupaa/dynamic-import-polyfill';
import './viewManager/viewContainer.scss'; import './viewManager/viewContainer.scss';
import Dashboard from '../utils/dashboard'; import Dashboard from '../utils/dashboard';
const getMainAnimatedPages = () => {
if (!mainAnimatedPages) {
mainAnimatedPages = document.querySelector('.mainAnimatedPages');
}
return mainAnimatedPages;
};
/* eslint-disable indent */ /* eslint-disable indent */
function setControllerClass(view, options) { function setControllerClass(view, options) {
@ -55,6 +63,11 @@ import Dashboard from '../utils/dashboard';
view.classList.add('mainAnimatedPage'); view.classList.add('mainAnimatedPage');
if (!getMainAnimatedPages()) {
console.warn('[viewContainer] main animated pages element is not present');
return;
}
if (currentPage) { if (currentPage) {
if (newViewInfo.hasScript && window.$) { if (newViewInfo.hasScript && window.$) {
mainAnimatedPages.removeChild(currentPage); mainAnimatedPages.removeChild(currentPage);
@ -225,18 +238,18 @@ import Dashboard from '../utils/dashboard';
export function reset() { export function reset() {
allPages = []; allPages = [];
currentUrls = []; currentUrls = [];
mainAnimatedPages.innerHTML = ''; if (mainAnimatedPages) mainAnimatedPages.innerHTML = '';
selectedPageIndex = -1; selectedPageIndex = -1;
} }
let onBeforeChange; let onBeforeChange;
const mainAnimatedPages = document.querySelector('.mainAnimatedPages'); let mainAnimatedPages;
let allPages = []; let allPages = [];
let currentUrls = []; let currentUrls = [];
const pageContainerCount = 3; const pageContainerCount = 3;
let selectedPageIndex = -1; let selectedPageIndex = -1;
reset(); reset();
mainAnimatedPages.classList.remove('hide'); getMainAnimatedPages()?.classList.remove('hide');
/* eslint-enable indent */ /* eslint-enable indent */

10
src/index.html
View file

@ -159,16 +159,8 @@
</style> </style>
</head> </head>
<body dir="ltr"> <body dir="ltr">
<div class="backdropContainer"></div> <div id="reactRoot">
<div class="backgroundContainer"></div>
<div class="mainDrawer hide">
<div class="mainDrawer-scrollContainer scrollContainer focuscontainer-y"></div>
</div>
<div class="skinHeader focuscontainer-x"></div>
<div class="mainAnimatedPages skinBody">
<div class="splashLogo"></div> <div class="splashLogo"></div>
</div> </div>
<div id="reactRoot" class="skinBody"></div>
<div class="mainDrawerHandle"></div>
</body> </body>
</html> </html>

8
src/index.jsx
View file

@ -23,9 +23,7 @@ import packageManager from './components/packageManager';
import { appRouter, history } from './components/appRouter'; import { appRouter, history } from './components/appRouter';
import './elements/emby-button/emby-button'; import './elements/emby-button/emby-button';
import './scripts/autoThemes'; import './scripts/autoThemes';
import './scripts/libraryMenu';
import './components/themeMediaPlayer'; import './components/themeMediaPlayer';
import './scripts/autoBackdrops';
import { pageClassOn, serverAddress } from './utils/dashboard'; import { pageClassOn, serverAddress } from './utils/dashboard';
import './scripts/screensavermanager'; import './scripts/screensavermanager';
import './scripts/serverNotifications'; import './scripts/serverNotifications';
@ -145,13 +143,17 @@ async function onAppReady() {
ServerConnections.currentApiClient()?.ensureWebSocket(); ServerConnections.currentApiClient()?.ensureWebSocket();
}); });
const root = document.getElementById('reactRoot');
// Remove the splash logo
root.innerHTML = '';
await appRouter.start(); await appRouter.start();
ReactDOM.render( ReactDOM.render(
<StrictMode> <StrictMode>
<App history={history} /> <App history={history} />
</StrictMode>, </StrictMode>,
document.getElementById('reactRoot') root
); );
if (!browser.tv && !browser.xboxOne && !browser.ps4) { if (!browser.tv && !browser.xboxOne && !browser.ps4) {