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/upnextdialog/upnextdialog.js b/src/components/upnextdialog/upnextdialog.js index 2a37fcbe45..bfb3ca18cd 100644 --- a/src/components/upnextdialog/upnextdialog.js +++ b/src/components/upnextdialog/upnextdialog.js @@ -69,9 +69,9 @@ import '../../styles/flexstyles.scss'; const elem = instance.options.parent; elem.querySelector('.upNextDialog-mediainfo').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(item, { - criticRating: false, + criticRating: true, originalAirDate: false, - starRating: false, + starRating: true, subtitles: false }); 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/controllers/playback/video/index.html b/src/controllers/playback/video/index.html index 002a818314..ca49f872c9 100644 --- a/src/controllers/playback/video/index.html +++ b/src/controllers/playback/video/index.html @@ -65,6 +65,9 @@
+ +
+