Merge pull request #8550 from thornbill/fix-metadata-manager-theme

Fix metadata manager using mixed themes

src/components/ThemeCss.tsx

@@ -2,6 +2,7 @@ import React, { type FC, useEffect, useState } from 'react';
 
 import { useUserTheme } from 'hooks/useUserTheme';
 import { getDefaultTheme } from 'scripts/settings/webSettings';
+import themeManager from 'scripts/themeManager';
 
 interface ThemeCssProps {
     dashboard?: boolean
@@ -19,7 +20,10 @@ const ThemeCss: FC<ThemeCssProps> = ({
 
     useEffect(() => {
         const id = dashboard ? dashboardTheme : theme;
-        if (id) setThemeUrl(getThemeUrl(id));
+        if (id) {
+            setThemeUrl(getThemeUrl(id));
+            void themeManager.setTheme(id);
+        }
     }, [dashboard, dashboardTheme, theme]);
 
     return (

src/index.jsx

@@ -38,7 +38,6 @@ import './elements/emby-button/emby-button';
 import './components/playback/displayMirrorManager';
 import './components/playback/playerSelectionMenu';
 import './components/themeMediaPlayer';
-import './scripts/autoThemes';
 import './scripts/mouseManager';
 import './scripts/screensavermanager';
 

src/scripts/autoThemes.js

@@ -1,25 +0,0 @@
-import * as userSettings from './settings/userSettings';
-import skinManager from './themeManager';
-import { ServerConnections } from 'lib/jellyfin-apiclient';
-import { pageClassOn } from 'utils/dashboard';
-import Events from 'utils/events.ts';
-
-// Set the default theme when loading
-skinManager.setTheme(userSettings.theme())
-    /* this keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages
-       that need the scrollbar and pages that don't.
-     */
-    .then(() => document.body.classList.add('force-scroll'));
-
-// set the saved theme once a user authenticates
-Events.on(ServerConnections, 'localusersignedin', () => {
-    skinManager.setTheme(userSettings.theme());
-});
-
-pageClassOn('viewbeforeshow', 'page', function () {
-    if (this.classList.contains('type-interior')) {
-        skinManager.setTheme(userSettings.dashboardTheme());
-    } else {
-        skinManager.setTheme(userSettings.theme());
-    }
-});