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

Allow client custom css and disabling global server custom css.

Browse source
This commit is contained in:
Ian Walton 2021-04-24 14:33:07 -04:00
parent 1794ab53fe
commit 8cae67d9b9
6 changed files with 108 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/displaySettings/displaySettings.js
View file

@ -11,6 +11,7 @@ import { Events } from 'jellyfin-apiclient';
import '../../elements/emby-select/emby-select';
import '../../elements/emby-checkbox/emby-checkbox';
import '../../elements/emby-button/emby-button';
import '../../elements/emby-textarea/emby-textarea';
import ServerConnections from '../ServerConnections';
import toast from '../toast/toast';
import template from './displaySettings.template.html';
@ -123,6 +124,9 @@ import template from './displaySettings.template.html';
context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops();
context.querySelector('#chkDetailsBanner').checked = userSettings.detailsBanner();
context.querySelector('#chkDisableCustomCss').checked = userSettings.disableCustomCss();
context.querySelector('#txtLocalCustomCss').value = userSettings.customCss();
context.querySelector('#selectLanguage').value = userSettings.language() || '';
context.querySelector('.selectDateTimeLocale').value = userSettings.dateTimeLocale() || '';
@ -157,6 +161,9 @@ import template from './displaySettings.template.html';
userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);
userSettingsInstance.detailsBanner(context.querySelector('#chkDetailsBanner').checked);
userSettingsInstance.disableCustomCss(context.querySelector('#chkDisableCustomCss').checked);
userSettingsInstance.customCss(context.querySelector('#txtLocalCustomCss').value);
if (user.Id === apiClient.getCurrentUserId()) {
skinManager.setTheme(userSettingsInstance.theme());
}

13
src/components/displaySettings/displaySettings.template.html
View file

@ -156,6 +156,19 @@
<select id="selectTheme" is="emby-select" label="${LabelTheme}"></select>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkDisableCustomCss" />
<span>${DisableCustomCss}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelDisableCustomCss}</div>
</div>
<div class="inputContainer customCssContainer">
<textarea is="emby-textarea" id="txtLocalCustomCss" label="${LabelCustomCss}" class="textarea-mono"></textarea>
<div class="fieldDescription">${LabelLocalCustomCss}</div>
</div>
<div class="selectContainer selectDashboardThemeContainer hide">
<select id="selectDashboardTheme" is="emby-select" label="${LabelDashboardTheme}"></select>
</div>

1
src/elements/emby-textarea/emby-textarea.js
View file

@ -56,7 +56,6 @@ import '../emby-input/emby-input';
textarea.style.height = 'auto';
newHeight = textarea.scrollHeight/* - offset*/;
}
$('.customCssContainer').css('height', newHeight + 'px');
textarea.style.height = newHeight + 'px';
}

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

@ -21,6 +21,9 @@ const defaultSubtitleAppearanceSettings = {
export class UserSettings {
constructor() {
this._userSetPromise = new Promise(resolve => {
this._userSetPromiseResolve = resolve;
});
}
/**
@ -36,6 +39,11 @@ export class UserSettings {
this.currentUserId = userId;
this.currentApiClient = apiClient;
if (this._userSetPromiseResolve) {
this._userSetPromiseResolve();
this._userSetPromiseResolve = null;
}
if (!userId) {
this.displayPrefs = null;
return Promise.resolve();
@ -59,6 +67,14 @@ export class UserSettings {
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
/**
* Set value of setting.
@ -239,6 +255,33 @@ export class UserSettings {
return val === 'true';
}
/**
* Get or set 'disableCustomCss' state.
* @param {boolean|undefined} val - Flag to enable 'disableCustomCss' or undefined.
* @return {boolean} 'disableCustomCss' state.
*/
disableCustomCss(val) {
if (val !== undefined) {
return this.set('disableCustomCss', val.toString(), false);
}
val = this.get('disableCustomCss', false);
return val === 'true';
}
/**
* Get or set customCss.
* @param {string|undefined} val - Language.
* @return {string} Language.
*/
customCss(val) {
if (val !== undefined) {
return this.set('customCss', val.toString(), false);
}
return this.get('customCss', false);
}
/**
* Get or set 'Details Banner' state.
* @param {boolean|undefined} val - Flag to enable 'Details Banner' or undefined.
@ -511,3 +554,5 @@ export const getSubtitleAppearanceSettings = currentSettings.getSubtitleAppearan
export const setSubtitleAppearanceSettings = currentSettings.setSubtitleAppearanceSettings.bind(currentSettings);
export const setFilter = currentSettings.setFilter.bind(currentSettings);
export const getFilter = currentSettings.getFilter.bind(currentSettings);
export const customCss = currentSettings.customCss.bind(currentSettings);
export const disableCustomCss = currentSettings.disableCustomCss.bind(currentSettings);

64
src/scripts/site.js
View file

@ -37,6 +37,7 @@ import SyncPlayToasts from '../components/syncPlay/ui/syncPlayToasts';
import SyncPlayNoActivePlayer from '../components/syncPlay/ui/players/NoActivePlayer';
import SyncPlayHtmlVideoPlayer from '../components/syncPlay/ui/players/HtmlVideoPlayer';
import SyncPlayHtmlAudioPlayer from '../components/syncPlay/ui/players/HtmlAudioPlayer';
import { currentSettings } from './settings/userSettings';
// TODO: Move this elsewhere
window.getWindowLocationSearch = function(win) {
@ -216,30 +217,45 @@ function onAppReady() {
}
}
const apiClient = ServerConnections.currentApiClient();
if (apiClient) {
fetch(apiClient.getUrl('Branding/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');
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;
})
.catch(function(err) {
console.warn('Error applying custom css', err);
});
}
currentSettings.userIsSet().then(() => {
const apiClient = ServerConnections.currentApiClient();
if (apiClient && !currentSettings.disableCustomCss()) {
fetch(apiClient.getUrl('Branding/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');
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;
})
.catch(function(err) {
console.warn('Error applying custom css', err);
});
}
const localCss = currentSettings.customCss();
if (localCss) {
let style = document.querySelector('#localCssBranding');
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 = 'localCssBranding';
document.body.appendChild(style);
}
style.textContent = localCss;
}
});
}
function registerServiceWorker() {

3
src/strings/en-us.json
View file

@ -181,6 +181,7 @@
"DirectStreamHelp2": "Power consumed by direct streaming usually depends on the audio profile. Only the video stream is lossless.",
"DirectStreaming": "Direct streaming",
"EnablePlugin": "Enable",
"DisableCustomCss": "Disable Server-Provided Custom CSS",
"DisablePlugin": "Disable",
"Disc": "Disc",
"Disconnect": "Disconnect",
@ -577,6 +578,7 @@
"LabelDeinterlaceMethod": "Deinterlacing method:",
"LabelDeviceDescription": "Device description",
"LabelDidlMode": "DIDL mode:",
"LabelDisableCustomCss": "Disable custom CSS theming/branding provided from the server.",
"LabelDiscNumber": "Disc number:",
"LabelDisplayLanguage": "Display language:",
"LabelDisplayLanguageHelp": "Translating Jellyfin is an ongoing project.",
@ -678,6 +680,7 @@
"LabelLibraryPageSize": "Library page size:",
"LabelLibraryPageSizeHelp": "Sets the amount of items to show on a library page. Set to 0 in order to disable paging.",
"LabelLineup": "Lineup:",
"LabelLocalCustomCss": "Custom CSS styling which applies to this client only. You may want to disable server custom CSS.",
"LabelLocalHttpServerPortNumber": "Local HTTP port number:",
"LabelLocalHttpServerPortNumberHelp": "The TCP port number for the HTTP server.",
"LabelLockItemToPreventChanges": "Lock this item to prevent future changes",