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

Apply styles using user events and also immediately when changed.

Browse source
This commit is contained in:
Ian Walton 2021-04-24 16:42:21 -04:00
parent 99c902a1a1
commit 8d59d2a0fe
2 changed files with 48 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/scripts/settings/userSettings.js
View file

@ -21,9 +21,6 @@ const defaultSubtitleAppearanceSettings = {
export class UserSettings { export class UserSettings {
constructor() { constructor() {
this._userSetPromise = new Promise(resolve => {
this._userSetPromiseResolve = resolve;
});
} }
/** /**
@ -39,11 +36,6 @@ export class UserSettings {
this.currentUserId = userId; this.currentUserId = userId;
this.currentApiClient = apiClient; this.currentApiClient = apiClient;
if (this._userSetPromiseResolve) {
this._userSetPromiseResolve();
this._userSetPromiseResolve = null;
}
if (!userId) { if (!userId) {
this.displayPrefs = null; this.displayPrefs = null;
return Promise.resolve(); return Promise.resolve();
@ -67,14 +59,6 @@ export class UserSettings {
this.displayPrefs = instance.getData(); this.displayPrefs = instance.getData();
} }
/**
* Allows waiting until the user id is set.
* @returns {Promise}
*/
userIsSet() {
return this._userSetPromise;
}
// FIXME: 'appSettings.set' doesn't return any value // FIXME: 'appSettings.set' doesn't return any value
/** /**
* Set value of setting. * Set value of setting.

61
src/scripts/site.js
View file

@ -176,7 +176,7 @@ function initSyncPlay() {
Events.on(ServerConnections, 'apiclientcreated', (e, newApiClient) => SyncPlay.Manager.init(newApiClient)); Events.on(ServerConnections, 'apiclientcreated', (e, newApiClient) => SyncPlay.Manager.init(newApiClient));
} }
function onAppReady() { async function onAppReady() {
console.debug('begin onAppReady'); console.debug('begin onAppReady');
console.debug('onAppReady: loading dependencies'); console.debug('onAppReady: loading dependencies');
@ -217,21 +217,9 @@ function onAppReady() {
} }
} }
let cssHasLoadedTrigger;
const cssHasLoadedPromise = new Promise(resolve => {
cssHasLoadedTrigger = resolve;
});
const apiClient = ServerConnections.currentApiClient(); const apiClient = ServerConnections.currentApiClient();
if (apiClient) { if (apiClient) {
fetch(apiClient.getUrl('Branding/Css')) const updateStyle = (css) => {
.then(function(response) {
if (!response.ok) {
throw new Error(response.status + ' ' + response.statusText);
}
return response.text();
})
.then(function(css) {
let style = document.querySelector('#cssBranding'); let style = document.querySelector('#cssBranding');
if (!style) { if (!style) {
// Inject the branding css as a dom element in body so it will take // Inject the branding css as a dom element in body so it will take
@ -241,33 +229,54 @@ function onAppReady() {
document.body.appendChild(style); document.body.appendChild(style);
} }
style.textContent = css; style.textContent = css;
cssHasLoadedTrigger(style); };
const style = fetch(apiClient.getUrl('Branding/Css'))
.then(function(response) {
if (!response.ok) {
throw new Error(response.status + ' ' + response.statusText);
}
return response.text();
}) })
.catch(function(err) { .catch(function(err) {
console.warn('Error applying custom css', err); console.warn('Error applying custom css', err);
}); });
}
currentSettings.userIsSet().then(() => { const handleStyleChange = async () => {
if (currentSettings.disableCustomCss()) { if (currentSettings.disableCustomCss()) {
cssHasLoadedPromise.then(style => { updateStyle('');
style.textContent = ''; } else {
}); updateStyle(await style);
} }
const localCss = currentSettings.customCss(); const localCss = currentSettings.customCss();
let localStyle = document.querySelector('#localCssBranding');
if (localCss) { if (localCss) {
let style = document.querySelector('#localCssBranding'); if (!localStyle) {
if (!style) {
// Inject the branding css as a dom element in body so it will take // Inject the branding css as a dom element in body so it will take
// precedence over other stylesheets // precedence over other stylesheets
style = document.createElement('style'); localStyle = document.createElement('style');
style.id = 'localCssBranding'; localStyle.id = 'localCssBranding';
document.body.appendChild(style); document.body.appendChild(localStyle);
} }
style.textContent = localCss; localStyle.textContent = localCss;
} else {
if (localStyle) {
localStyle.textContent = '';
}
}
};
Events.on(ServerConnections, 'localusersignedin', handleStyleChange);
Events.on(ServerConnections, 'localusersignedout', handleStyleChange);
Events.on(currentSettings, 'change', (e, prop) => {
if (prop == 'disableCustomCss' || prop == 'customCss') {
handleStyleChange();
} }
}); });
style.then(updateStyle);
}
} }
function registerServiceWorker() { function registerServiceWorker() {