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

24
src/App.tsx
View file

@ -1,5 +1,5 @@
import { History } from '@remix-run/router';
import React from 'react';
import React, { useEffect } from 'react';
import { HistoryRouter } from './components/HistoryRouter';
import { ApiProvider } from './hooks/useApi';
@ -7,10 +7,32 @@ import { AppRoutes, ExperimentalAppRoutes } from './routes';
const App = ({ history }: { history: History }) => {
const layoutMode = localStorage.getItem('layout');
useEffect(() => {
Promise.all([
// Initialize the UI components after first render
import('./scripts/libraryMenu'),
import('./scripts/autoBackdrops')
]);
}, []);
return (
<ApiProvider>
<HistoryRouter history={history}>
<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>
</ApiProvider>
);

19
src/components/viewContainer.js
View file

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

10
src/index.html
View file

@ -159,16 +159,8 @@
</style>
</head>
<body dir="ltr">
<div class="backdropContainer"></div>
<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 id="reactRoot">
<div class="splashLogo"></div>
</div>
<div id="reactRoot" class="skinBody"></div>
<div class="mainDrawerHandle"></div>
</body>
</html>

8
src/index.jsx
View file

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