diff --git a/src/App.tsx b/src/App.tsx index 13ae93dec0..1a544723a1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 ( - {layoutMode === 'experimental' ? : } +
+
+ +
+
+
+
+ +
+
+ {layoutMode === 'experimental' ? : } +
+ +
); diff --git a/src/components/viewContainer.js b/src/components/viewContainer.js index 82e7ef40c7..c65b5f8a03 100644 --- a/src/components/viewContainer.js +++ b/src/components/viewContainer.js @@ -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 */ diff --git a/src/index.html b/src/index.html index 6d58a3dcd1..e406f11343 100644 --- a/src/index.html +++ b/src/index.html @@ -159,16 +159,8 @@ -
-
-
-
-
-
-
+
-
-
diff --git a/src/index.jsx b/src/index.jsx index 08b3bfada3..87e4fde803 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -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( , - document.getElementById('reactRoot') + root ); if (!browser.tv && !browser.xboxOne && !browser.ps4) {