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

Fix client-side CSS not applied on page load

Browse source
This commit is contained in:
Niels van Velzen 2024-04-26 18:53:35 +02:00
parent 0b70da751f
commit d113f22256
1 changed files with 19 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/index.jsx
View file

@ -193,21 +193,10 @@ async function onAppReady() {
} }
} }
// Apply custom CSS
const apiClient = ServerConnections.currentApiClient(); const apiClient = ServerConnections.currentApiClient();
if (apiClient) { if (apiClient) {
const updateStyle = (css) => { const brandingCss = fetch(apiClient.getUrl('Branding/Css'))
let style = document.querySelector('#cssBranding');
if (!style) {
// Inject the branding css as a dom element in body so it will take
// precedence over other stylesheets
style = document.createElement('style');
style.id = 'cssBranding';
document.body.appendChild(style);
}
style.textContent = css;
};
const style = fetch(apiClient.getUrl('Branding/Css'))
.then(function(response) { .then(function(response) {
if (!response.ok) { if (!response.ok) {
throw new Error(response.status + ' ' + response.statusText); throw new Error(response.status + ' ' + response.statusText);
@ -219,41 +208,33 @@ async function onAppReady() {
}); });
const handleStyleChange = async () => { const handleStyleChange = async () => {
if (currentSettings.disableCustomCss()) { let style = document.querySelector('#cssBranding');
updateStyle(''); if (!style) {
} else { // Inject the branding css as a dom element in body so it will take
updateStyle(await style); // precedence over other stylesheets
style = document.createElement('style');
style.id = 'cssBranding';
document.body.appendChild(style);
} }
const localCss = currentSettings.customCss(); const css = [];
let localStyle = document.querySelector('#localCssBranding'); // Only add branding CSS when enabled
if (localCss) { if (!currentSettings.disableCustomCss()) css.push(await brandingCss);
if (!localStyle) { // Always add user CSS
// Inject the branding css as a dom element in body so it will take css.push(currentSettings.customCss());
// precedence over other stylesheets
localStyle = document.createElement('style'); style.textContent = css.join('\n');
localStyle.id = 'localCssBranding';
document.body.appendChild(localStyle);
}
localStyle.textContent = localCss;
} else if (localStyle) {
localStyle.textContent = '';
}
}; };
const handleUserChange = () => { Events.on(ServerConnections, 'localusersignedin', handleStyleChange);
handleStyleChange(); Events.on(ServerConnections, 'localusersignedout', handleStyleChange);
};
Events.on(ServerConnections, 'localusersignedin', handleUserChange);
Events.on(ServerConnections, 'localusersignedout', handleUserChange);
Events.on(currentSettings, 'change', (e, prop) => { Events.on(currentSettings, 'change', (e, prop) => {
if (prop == 'disableCustomCss' || prop == 'customCss') { if (prop == 'disableCustomCss' || prop == 'customCss') {
handleStyleChange(); handleStyleChange();
} }
}); });
style.then(updateStyle); brandingCss.then(handleStyleChange);
} }
} }