Restore dashboard theme option

This commit is contained in:
Bill Thornton 2020-12-21 10:38:54 -05:00
parent 0585806c0b
commit 95d58db5f9
3 changed files with 23 additions and 10 deletions

View File

@ -17,21 +17,17 @@ import template from './displaySettings.template.html';
/* eslint-disable indent */
function fillThemes(context, userSettings) {
const select = context.querySelector('#selectTheme');
function fillThemes(select, selectedTheme) {
skinManager.getThemes().then(themes => {
select.innerHTML = themes.map(t => {
return `<option value="${t.id}">${t.name}</option>`;
}).join('');
// get default theme
const defaultTheme = themes.find(theme => {
return theme.default;
});
const defaultTheme = themes.find(theme => theme.default);
// set the current theme
select.value = userSettings.theme() || defaultTheme.id;
select.value = selectedTheme || defaultTheme.id;
});
}
@ -89,6 +85,8 @@ import template from './displaySettings.template.html';
context.querySelector('.learnHowToContributeContainer').classList.add('hide');
}
context.querySelector('.selectDashboardThemeContainer').classList.toggle('hide', !user.Policy.IsAdministrator);
if (appHost.supports('screensaver')) {
context.querySelector('.selectScreensaverContainer').classList.remove('hide');
} else {
@ -111,7 +109,9 @@ import template from './displaySettings.template.html';
context.querySelector('.fldThemeVideo').classList.add('hide');
}
fillThemes(context, userSettings);
fillThemes(context.querySelector('#selectTheme'), userSettings.theme());
fillThemes(context.querySelector('#selectDashboardTheme'), userSettings.dashboardTheme());
loadScreensavers(context, userSettings);
context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
@ -147,6 +147,7 @@ import template from './displaySettings.template.html';
userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked);
userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked);
userSettingsInstance.theme(context.querySelector('#selectTheme').value);
userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);

View File

@ -126,6 +126,10 @@
<select id="selectTheme" is="emby-select" label="${LabelTheme}"></select>
</div>
<div class="selectContainer selectDashboardThemeContainer hide">
<select id="selectDashboardTheme" is="emby-select" label="${LabelDashboardTheme}"></select>
</div>
<div class="selectContainer hide selectScreensaverContainer">
<select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
</div>

View File

@ -1,8 +1,8 @@
import * as userSettings from './settings/userSettings';
import * as webSettings from './settings/webSettings';
import skinManager from './themeManager';
import { Events } from 'jellyfin-apiclient';
import ServerConnections from '../components/ServerConnections';
import { pageClassOn } from '../scripts/clientUtils';
// Set the default theme when loading
skinManager.setTheme(userSettings.theme())
@ -12,6 +12,14 @@ skinManager.setTheme(userSettings.theme())
.then(() => document.body.classList.add('force-scroll'));
// set the saved theme once a user authenticates
Events.on(ServerConnections, 'localusersignedin', function (e, user) {
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());
}
});