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

Migration displaySettings to ES6 modules

Browse source
This commit is contained in:
grafixeyehero 2020-06-21 05:53:59 +03:00
parent 09c62f110f
commit 0aeff0b464
3 changed files with 87 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -96,6 +96,7 @@
"src/components/cardbuilder/cardBuilder.js", "src/components/cardbuilder/cardBuilder.js",
"src/components/cardbuilder/chaptercardbuilder.js", "src/components/cardbuilder/chaptercardbuilder.js",
"src/components/cardbuilder/peoplecardbuilder.js", "src/components/cardbuilder/peoplecardbuilder.js",
"src/components/displaySettings/displaySettings.js",
"src/components/images/imageLoader.js", "src/components/images/imageLoader.js",
"src/components/indicators/indicators.js", "src/components/indicators/indicators.js",
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",

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

@ -1,22 +1,37 @@
define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', 'apphost', 'focusManager', 'datetime', 'globalize', 'loading', 'connectionManager', 'skinManager', 'dom', 'events', 'emby-select', 'emby-checkbox', 'emby-button'], function (require, browser, layoutManager, appSettings, pluginManager, appHost, focusManager, datetime, globalize, loading, connectionManager, skinManager, dom, events) { import browser from 'browser';
'use strict'; import layoutManager from 'layoutManager';
import appSettings from 'appSettings';
import pluginManager from 'pluginManager';
import appHost from 'apphost';
import focusManager from 'focusManager';
import datetime from 'datetime';
import globalize from 'globalize';
import loading from 'loading';
import connectionManager from 'connectionManager';
import skinManager from 'skinManager';
import events from 'events';
import 'emby-select';
import 'emby-checkbox';
import 'emby-button';
/* eslint-disable indent */
function fillThemes(select, isDashboard) { function fillThemes(select, isDashboard) {
select.innerHTML = skinManager.getThemes().map(function (t) { select.innerHTML = skinManager.getThemes().map(t => {
var value = t.id; let value = t.id;
if (t.isDefault && !isDashboard) { if (t.isDefault && !isDashboard) {
value = ''; value = '';
} else if (t.isDefaultServerDashboard && isDashboard) { } else if (t.isDefaultServerDashboard && isDashboard) {
value = ''; value = '';
} }
return '<option value="' + value + '">' + t.name + '</option>'; return `<option value="${value}">${t.name}</option>`;
}).join(''); }).join('');
} }
function loadScreensavers(context, userSettings) { function loadScreensavers(context, userSettings) {
var selectScreensaver = context.querySelector('.selectScreensaver'); const selectScreensaver = context.querySelector('.selectScreensaver');
var options = pluginManager.ofType('screensaver').map(function (plugin) { const options = pluginManager.ofType('screensaver').map(plugin => {
return { return {
name: plugin.name, name: plugin.name,
value: plugin.id value: plugin.id
@ -28,8 +43,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
value: 'none' value: 'none'
}); });
selectScreensaver.innerHTML = options.map(function (o) { selectScreensaver.innerHTML = options.map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
selectScreensaver.value = userSettings.screensaver(); selectScreensaver.value = userSettings.screensaver();
@ -41,8 +56,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
function loadSoundEffects(context, userSettings) { function loadSoundEffects(context, userSettings) {
var selectSoundEffects = context.querySelector('.selectSoundEffects'); const selectSoundEffects = context.querySelector('.selectSoundEffects');
var options = pluginManager.ofType('soundeffects').map(function (plugin) { const options = pluginManager.ofType('soundeffects').map(plugin => {
return { return {
name: plugin.name, name: plugin.name,
value: plugin.id value: plugin.id
@ -54,8 +69,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
value: 'none' value: 'none'
}); });
selectSoundEffects.innerHTML = options.map(function (o) { selectSoundEffects.innerHTML = options.map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
selectSoundEffects.value = userSettings.soundEffects(); selectSoundEffects.value = userSettings.soundEffects();
@ -67,17 +82,17 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
function loadSkins(context, userSettings) { function loadSkins(context, userSettings) {
var selectSkin = context.querySelector('.selectSkin'); const selectSkin = context.querySelector('.selectSkin');
var options = pluginManager.ofType('skin').map(function (plugin) { const options = pluginManager.ofType('skin').map(plugin => {
return { return {
name: plugin.name, name: plugin.name,
value: plugin.id value: plugin.id
}; };
}); });
selectSkin.innerHTML = options.map(function (o) { selectSkin.innerHTML = options.map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
selectSkin.value = userSettings.skin(); selectSkin.value = userSettings.skin();
@ -92,7 +107,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
} }
} }
function showOrHideMissingEpisodesField(context, user, apiClient) { function showOrHideMissingEpisodesField(context) {
if (browser.tizen || browser.web0s) { if (browser.tizen || browser.web0s) {
context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide'); context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide');
@ -102,10 +117,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide'); context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide');
} }
function loadForm(context, user, userSettings, apiClient) { function loadForm(context, user, userSettings) {
var loggedInUserId = apiClient.getCurrentUserId();
var userId = user.Id;
if (user.Policy.IsAdministrator) { if (user.Policy.IsAdministrator) {
context.querySelector('.selectDashboardThemeContainer').classList.remove('hide'); context.querySelector('.selectDashboardThemeContainer').classList.remove('hide');
@ -167,8 +179,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup(); context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup();
var selectTheme = context.querySelector('#selectTheme'); const selectTheme = context.querySelector('#selectTheme');
var selectDashboardTheme = context.querySelector('#selectDashboardTheme'); const selectDashboardTheme = context.querySelector('#selectDashboardTheme');
fillThemes(selectTheme); fillThemes(selectTheme);
fillThemes(selectDashboardTheme, true); fillThemes(selectDashboardTheme, true);
@ -195,7 +207,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || ''; context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || '';
showOrHideMissingEpisodesField(context, user, apiClient); showOrHideMissingEpisodesField(context);
loading.hide(); loading.hide();
} }
@ -239,29 +251,29 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
loading.show(); loading.show();
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(user => {
saveUser(context, user, userSettings, apiClient).then(function () { saveUser(context, user, userSettings, apiClient).then(() => {
loading.hide(); loading.hide();
if (enableSaveConfirmation) { if (enableSaveConfirmation) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved')); toast(globalize.translate('SettingsSaved'));
}); });
} }
events.trigger(instance, 'saved'); events.trigger(instance, 'saved');
}, function () { }, () => {
loading.hide(); loading.hide();
}); });
}); });
} }
function onSubmit(e) { function onSubmit(e) {
var self = this; const self = this;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userId = self.options.userId; const userId = self.options.userId;
var userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(() => {
var enableSaveConfirmation = self.options.enableSaveConfirmation; const enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
}); });
@ -272,50 +284,51 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
return false; return false;
} }
function embed(options, self) { async function embed(options, self) {
require(['text!./displaySettings.template.html'], function (template) { const { default: template } = await import('text!./displaySettings.template.html');
options.element.innerHTML = globalize.translateDocument(template, 'core'); options.element.innerHTML = globalize.translateDocument(template, 'core');
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
if (options.enableSaveButton) { if (options.enableSaveButton) {
options.element.querySelector('.btnSave').classList.remove('hide'); options.element.querySelector('.btnSave').classList.remove('hide');
} }
self.loadData(options.autoFocus); self.loadData(options.autoFocus);
});
} }
function DisplaySettings(options) { class DisplaySettings {
this.options = options; constructor(options) {
embed(options, this); this.options = options;
} embed(options, this);
}
DisplaySettings.prototype.loadData = function (autoFocus) { loadData(autoFocus) {
var self = this; const self = this;
var context = self.options.element; const context = self.options.element;
loading.show(); loading.show();
var userId = self.options.userId; const userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
return apiClient.getUser(userId).then(function (user) { return apiClient.getUser(userId).then(user => {
return userSettings.setUserInfo(userId, apiClient).then(function () { return userSettings.setUserInfo(userId, apiClient).then(() => {
self.dataLoaded = true; self.dataLoaded = true;
loadForm(context, user, userSettings, apiClient); loadForm(context, user, userSettings);
if (autoFocus) { if (autoFocus) {
focusManager.autoFocus(context); focusManager.autoFocus(context);
} }
});
}); });
}); }
};
DisplaySettings.prototype.submit = function () { submit() {
onSubmit.call(this); onSubmit.call(this);
}; }
DisplaySettings.prototype.destroy = function () { destroy() {
this.options = null; this.options = null;
}; }
}
return DisplaySettings; /* eslint-enable indent */
}); export default DisplaySettings;

2
src/controllers/user/display.js
View file

@ -21,7 +21,7 @@ define(['displaySettings', 'userSettings', 'autoFocuser'], function (DisplaySett
if (settingsInstance) { if (settingsInstance) {
settingsInstance.loadData(); settingsInstance.loadData();
} else { } else {
settingsInstance = new DisplaySettings({ settingsInstance = new DisplaySettings.default({
serverId: ApiClient.serverId(), serverId: ApiClient.serverId(),
userId: userId, userId: userId,
element: view.querySelector('.settingsContainer'), element: view.querySelector('.settingsContainer'),