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

Merge pull request #1457 from grafixeyehero/es6-migration-6

Browse source 
Migration displaySettings, homeScreenSettings & playbackSettings to ES6 modules
This commit is contained in:
dkanada 2020-07-19 14:13:25 +09:00 • committed by GitHub
commit 8ee90526cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 312 additions and 292 deletions
Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -98,6 +98,8 @@
"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/homeScreenSettings/homeScreenSettings.js",
"src/components/directorybrowser/directorybrowser.js", "src/components/directorybrowser/directorybrowser.js",
"src/components/collectionEditor/collectionEditor.js", "src/components/collectionEditor/collectionEditor.js",
"src/components/dialog/dialog.js", "src/components/dialog/dialog.js",
@ -123,6 +125,7 @@
"src/components/playback/playmethodhelper.js", "src/components/playback/playmethodhelper.js",
"src/components/playback/remotecontrolautoplay.js", "src/components/playback/remotecontrolautoplay.js",
"src/components/playback/volumeosd.js", "src/components/playback/volumeosd.js",
"src/components/playbackSettings/playbackSettings.js",
"src/components/playlisteditor/playlisteditor.js", "src/components/playlisteditor/playlisteditor.js",
"src/components/groupedcards.js", "src/components/groupedcards.js",
"src/components/htmlMediaHelper.js", "src/components/htmlMediaHelper.js",

123
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 {
constructor(options) {
this.options = options; this.options = options;
embed(options, this); 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;

235
src/components/homeScreenSettings/homeScreenSettings.js
View file

@ -1,26 +1,37 @@
define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'homeSections', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager, homeSections, dom, events) { import layoutManager from 'layoutManager';
'use strict'; import focusManager from 'focusManager';
import globalize from 'globalize';
import loading from 'loading';
import connectionManager from 'connectionManager';
import homeSections from 'homeSections';
import dom from 'dom';
import events from 'events';
import 'listViewStyle';
import 'emby-select';
import 'emby-checkbox';
var numConfigurableSections = 7; /* eslint-disable indent */
const numConfigurableSections = 7;
function renderViews(page, user, result) { function renderViews(page, user, result) {
var folderHtml = ''; let folderHtml = '';
folderHtml += '<div class="checkboxList">'; folderHtml += '<div class="checkboxList">';
folderHtml += result.map(function (i) { folderHtml += result.map(i => {
var currentHtml = ''; let currentHtml = '';
var id = 'chkGroupFolder' + i.Id; const id = `chkGroupFolder${i.Id}`;
var isChecked = user.Configuration.GroupedFolders.indexOf(i.Id) !== -1; const isChecked = user.Configuration.GroupedFolders.includes(i.Id);
var checkedHtml = isChecked ? ' checked="checked"' : ''; const checkedHtml = isChecked ? ' checked="checked"' : '';
currentHtml += '<label>'; currentHtml += '<label>';
currentHtml += '<input type="checkbox" is="emby-checkbox" class="chkGroupFolder" data-folderid="' + i.Id + '" id="' + id + '"' + checkedHtml + '/>'; currentHtml += `<input type="checkbox" is="emby-checkbox" class="chkGroupFolder" data-folderid="${i.Id}" id="${id}"${checkedHtml}/>`;
currentHtml += '<span>' + i.Name + '</span>'; currentHtml += `<span>${i.Name}</span>`;
currentHtml += '</label>'; currentHtml += '</label>';
return currentHtml; return currentHtml;
@ -34,7 +45,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function getLandingScreenOptions(type) { function getLandingScreenOptions(type) {
var list = []; const list = [];
if (type === 'movies') { if (type === 'movies') {
list.push({ list.push({
@ -123,27 +134,27 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function getLandingScreenOptionsHtml(type, userValue) { function getLandingScreenOptionsHtml(type, userValue) {
return getLandingScreenOptions(type).map(function (o) { return getLandingScreenOptions(type).map(o => {
var selected = userValue === o.value || (o.isDefault && !userValue); const selected = userValue === o.value || (o.isDefault && !userValue);
var selectedHtml = selected ? ' selected' : ''; const selectedHtml = selected ? ' selected' : '';
var optionValue = o.isDefault ? '' : o.value; const optionValue = o.isDefault ? '' : o.value;
return '<option value="' + optionValue + '"' + selectedHtml + '>' + o.name + '</option>'; return `<option value="${optionValue}"${selectedHtml}>${o.name}</option>`;
}).join(''); }).join('');
} }
function renderViewOrder(context, user, result) { function renderViewOrder(context, user, result) {
var html = ''; let html = '';
var index = 0; let index = 0;
html += result.Items.map(function (view) { html += result.Items.map(view => {
var currentHtml = ''; let currentHtml = '';
currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">'; currentHtml += `<div class="listItem viewItem" data-viewid="${view.Id}">`;
currentHtml += '<span class="material-icons listItemIcon folder_open"></span>'; currentHtml += '<span class="material-icons listItemIcon folder_open"></span>';
@ -155,8 +166,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
currentHtml += '</div>'; currentHtml += '</div>';
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><span class="material-icons keyboard_arrow_up"></span></button>'; currentHtml += `<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="${globalize.translate('Up')}"><span class="material-icons keyboard_arrow_up"></span></button>`;
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><span class="material-icons keyboard_arrow_down"></span></button>'; currentHtml += `<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="${globalize.translate('Down')}"><span class="material-icons keyboard_arrow_down"></span></button>`;
currentHtml += '</div>'; currentHtml += '</div>';
@ -170,14 +181,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function updateHomeSectionValues(context, userSettings) { function updateHomeSectionValues(context, userSettings) {
for (var i = 1; i <= 7; i++) { for (let i = 1; i <= 7; i++) {
var select = context.querySelector('#selectHomeSection' + i); const select = context.querySelector(`#selectHomeSection${i}`);
var defaultValue = homeSections.getDefaultSection(i - 1); const defaultValue = homeSections.getDefaultSection(i - 1);
var option = select.querySelector('option[value=' + defaultValue + ']') || select.querySelector('option[value=""]'); const option = select.querySelector(`option[value=${defaultValue}]`) || select.querySelector('option[value=""]');
var userValue = userSettings.get('homesection' + (i - 1)); const userValue = userSettings.get(`homesection${i - 1}`);
option.value = ''; option.value = '';
@ -193,42 +204,42 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function getPerLibrarySettingsHtml(item, user, userSettings, apiClient) { function getPerLibrarySettingsHtml(item, user, userSettings, apiClient) {
var html = ''; let html = '';
var isChecked; let isChecked;
if (item.Type === 'Channel' || item.CollectionType === 'boxsets' || item.CollectionType === 'playlists') { if (item.Type === 'Channel' || item.CollectionType === 'boxsets' || item.CollectionType === 'playlists') {
isChecked = (user.Configuration.MyMediaExcludes || []).indexOf(item.Id) === -1; isChecked = !(user.Configuration.MyMediaExcludes || []).includes(item.Id);
html += '<div>'; html += '<div>';
html += '<label>'; html += '<label>';
html += '<input type="checkbox" is="emby-checkbox" class="chkIncludeInMyMedia" data-folderid="' + item.Id + '"' + (isChecked ? ' checked="checked"' : '') + '/>'; html += `<input type="checkbox" is="emby-checkbox" class="chkIncludeInMyMedia" data-folderid="${item.Id}"${isChecked ? ' checked="checked"' : ''}/>`;
html += '<span>' + globalize.translate('DisplayInMyMedia') + '</span>'; html += `<span>${globalize.translate('DisplayInMyMedia')}</span>`;
html += '</label>'; html += '</label>';
html += '</div>'; html += '</div>';
} }
var excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels']; const excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels'];
if (excludeFromLatest.indexOf(item.CollectionType || '') === -1) { if (!excludeFromLatest.includes(item.CollectionType || '')) {
isChecked = user.Configuration.LatestItemsExcludes.indexOf(item.Id) === -1; isChecked = !user.Configuration.LatestItemsExcludes.includes(item.Id);
html += '<label class="fldIncludeInLatest">'; html += '<label class="fldIncludeInLatest">';
html += '<input type="checkbox" is="emby-checkbox" class="chkIncludeInLatest" data-folderid="' + item.Id + '"' + (isChecked ? ' checked="checked"' : '') + '/>'; html += `<input type="checkbox" is="emby-checkbox" class="chkIncludeInLatest" data-folderid="${item.Id}"${isChecked ? ' checked="checked"' : ''}/>`;
html += '<span>' + globalize.translate('DisplayInOtherHomeScreenSections') + '</span>'; html += `<span>${globalize.translate('DisplayInOtherHomeScreenSections')}</span>`;
html += '</label>'; html += '</label>';
} }
if (html) { if (html) {
html = '<div class="checkboxListContainer">' + html + '</div>'; html = `<div class="checkboxListContainer">${html}</div>`;
} }
if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') { if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') {
var idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id; const idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id;
html += '<div class="selectContainer">'; html += '<div class="selectContainer">';
html += '<select is="emby-select" class="selectLanding" data-folderid="' + idForLanding + '" label="' + globalize.translate('LabelDefaultScreen') + '">'; html += `<select is="emby-select" class="selectLanding" data-folderid="${idForLanding}" label="${globalize.translate('LabelDefaultScreen')}">`;
var userValue = userSettings.get('landing-' + idForLanding); const userValue = userSettings.get(`landing-${idForLanding}`);
html += getLandingScreenOptionsHtml(item.CollectionType, userValue); html += getLandingScreenOptionsHtml(item.CollectionType, userValue);
@ -238,7 +249,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
if (html) { if (html) {
var prefix = ''; let prefix = '';
prefix += '<div class="verticalSection">'; prefix += '<div class="verticalSection">';
prefix += '<h2 class="sectionTitle">'; prefix += '<h2 class="sectionTitle">';
@ -254,10 +265,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function renderPerLibrarySettings(context, user, userViews, userSettings, apiClient) { function renderPerLibrarySettings(context, user, userViews, userSettings, apiClient) {
var elem = context.querySelector('.perLibrarySettings'); const elem = context.querySelector('.perLibrarySettings');
var html = ''; let html = '';
for (var i = 0, length = userViews.length; i < length; i++) { for (let i = 0, length = userViews.length; i < length; i++) {
html += getPerLibrarySettingsHtml(userViews[i], user, userSettings, apiClient); html += getPerLibrarySettingsHtml(userViews[i], user, userSettings, apiClient);
} }
@ -271,10 +282,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
updateHomeSectionValues(context, userSettings); updateHomeSectionValues(context, userSettings);
var promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id); const promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id);
var promise2 = apiClient.getJSON(apiClient.getUrl('Users/' + user.Id + '/GroupingOptions')); const promise2 = apiClient.getJSON(apiClient.getUrl(`Users/${user.Id}/GroupingOptions`));
Promise.all([promise1, promise2]).then(function (responses) { Promise.all([promise1, promise2]).then(responses => {
renderViewOrder(context, user, responses[0]); renderViewOrder(context, user, responses[0]);
@ -286,38 +297,19 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
}); });
} }
function getSibling(elem, type, className) {
var sibling = elem[type];
while (sibling != null) {
if (sibling.classList.contains(className)) {
break;
}
}
if (sibling != null) {
if (!sibling.classList.contains(className)) {
sibling = null;
}
}
return sibling;
}
function onSectionOrderListClick(e) { function onSectionOrderListClick(e) {
var target = dom.parentWithClass(e.target, 'btnViewItemMove'); const target = dom.parentWithClass(e.target, 'btnViewItemMove');
if (target) { if (target) {
var viewItem = dom.parentWithClass(target, 'viewItem'); const viewItem = dom.parentWithClass(target, 'viewItem');
if (viewItem) { if (viewItem) {
var ul = dom.parentWithClass(viewItem, 'paperList'); const ul = dom.parentWithClass(viewItem, 'paperList');
if (target.classList.contains('btnViewItemDown')) { if (target.classList.contains('btnViewItemDown')) {
var next = viewItem.nextSibling; const next = viewItem.nextSibling;
if (next) { if (next) {
viewItem.parentNode.removeChild(viewItem); viewItem.parentNode.removeChild(viewItem);
@ -327,7 +319,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} else { } else {
var prev = viewItem.previousSibling; const prev = viewItem.previousSibling;
if (prev) { if (prev) {
viewItem.parentNode.removeChild(viewItem); viewItem.parentNode.removeChild(viewItem);
@ -341,10 +333,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function getCheckboxItems(selector, context, isChecked) { function getCheckboxItems(selector, context, isChecked) {
var inputs = context.querySelectorAll(selector); const inputs = context.querySelectorAll(selector);
var list = []; const list = [];
for (var i = 0, length = inputs.length; i < length; i++) { for (let i = 0, length = inputs.length; i < length; i++) {
if (inputs[i].checked === isChecked) { if (inputs[i].checked === isChecked) {
list.push(inputs[i]); list.push(inputs[i]);
@ -359,25 +351,25 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
user.Configuration.HidePlayedInLatest = context.querySelector('.chkHidePlayedFromLatest').checked; user.Configuration.HidePlayedInLatest = context.querySelector('.chkHidePlayedFromLatest').checked;
user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(function (i) { user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(i => {
return i.getAttribute('data-folderid'); return i.getAttribute('data-folderid');
}); });
user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(function (i) { user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(i => {
return i.getAttribute('data-folderid'); return i.getAttribute('data-folderid');
}); });
user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(function (i) { user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(i => {
return i.getAttribute('data-folderid'); return i.getAttribute('data-folderid');
}); });
var viewItems = context.querySelectorAll('.viewItem'); const viewItems = context.querySelectorAll('.viewItem');
var orderedViews = []; const orderedViews = [];
var i; let i;
var length; let length;
for (i = 0, length = viewItems.length; i < length; i++) { for (i = 0, length = viewItems.length; i < length; i++) {
orderedViews.push(viewItems[i].getAttribute('data-viewid')); orderedViews.push(viewItems[i].getAttribute('data-viewid'));
} }
@ -394,10 +386,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value); userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value);
userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').value); userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').value);
var selectLandings = context.querySelectorAll('.selectLanding'); const selectLandings = context.querySelectorAll('.selectLanding');
for (i = 0, length = selectLandings.length; i < length; i++) { for (i = 0, length = selectLandings.length; i < length; i++) {
var selectLanding = selectLandings[i]; const selectLanding = selectLandings[i];
userSettingsInstance.set('landing-' + selectLanding.getAttribute('data-folderid'), selectLanding.value); userSettingsInstance.set(`landing-${selectLanding.getAttribute('data-folderid')}`, selectLanding.value);
} }
return apiClient.updateUserConfiguration(user.Id, user.Configuration); return apiClient.updateUserConfiguration(user.Id, user.Configuration);
@ -407,20 +399,20 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
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();
}); });
}); });
@ -428,14 +420,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
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);
}); });
@ -448,13 +440,13 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function onChange(e) { function onChange(e) {
var chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia'); const chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia');
if (!chkIncludeInMyMedia) { if (!chkIncludeInMyMedia) {
return; return;
} }
var section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection'); const section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection');
var fldIncludeInLatest = section.querySelector('.fldIncludeInLatest'); const fldIncludeInLatest = section.querySelector('.fldIncludeInLatest');
if (fldIncludeInLatest) { if (fldIncludeInLatest) {
if (chkIncludeInMyMedia.checked) { if (chkIncludeInMyMedia.checked) {
fldIncludeInLatest.classList.remove('hide'); fldIncludeInLatest.classList.remove('hide');
@ -466,10 +458,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function embed(options, self) { function embed(options, self) {
require(['text!./homeScreenSettings.template.html'], function (template) { return import('text!./homeScreenSettings.template.html').then(({default: template}) => {
for (var i = 1; i <= numConfigurableSections; i++) { for (let i = 1; i <= numConfigurableSections; i++) {
template = template.replace('{section' + i + 'label}', globalize.translate('LabelHomeScreenSectionValue', i)); template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i));
} }
options.element.innerHTML = globalize.translateDocument(template, 'core'); options.element.innerHTML = globalize.translateDocument(template, 'core');
@ -492,27 +484,26 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
}); });
} }
function HomeScreenSettings(options) { class HomeScreenSettings {
constructor(options) {
this.options = options; this.options = options;
embed(options, this); embed(options, this);
} }
HomeScreenSettings.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;
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(user => {
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(() => {
self.dataLoaded = true; self.dataLoaded = true;
@ -523,16 +514,18 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
}); });
}); });
}; }
HomeScreenSettings.prototype.submit = function () { submit() {
onSubmit.call(this); onSubmit.call(this);
}; }
HomeScreenSettings.prototype.destroy = function () { destroy() {
this.options = null; this.options = null;
}; }
}
return HomeScreenSettings; /* eslint-enable indent */
});
export default HomeScreenSettings;

125
src/components/playbackSettings/playbackSettings.js
View file

@ -1,31 +1,42 @@
define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'qualityoptions', 'globalize', 'loading', 'connectionManager', 'dom', 'events', 'emby-select', 'emby-checkbox'], function (require, browser, appSettings, appHost, focusManager, qualityoptions, globalize, loading, connectionManager, dom, events) { import browser from 'browser';
'use strict'; import appSettings from 'appSettings';
import appHost from 'apphost';
import focusManager from 'focusManager';
import qualityoptions from 'qualityoptions';
import globalize from 'globalize';
import loading from 'loading';
import connectionManager from 'connectionManager';
import events from 'events';
import 'emby-select';
import 'emby-checkbox';
/* eslint-disable indent */
function fillSkipLengths(select) { function fillSkipLengths(select) {
var options = [5, 10, 15, 20, 25, 30]; const options = [5, 10, 15, 20, 25, 30];
select.innerHTML = options.map(function (option) { select.innerHTML = options.map(option => {
return { return {
name: globalize.translate('ValueSeconds', option), name: globalize.translate('ValueSeconds', option),
value: option * 1000 value: option * 1000
}; };
}).map(function (o) { }).map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
} }
function populateLanguages(select, languages) { function populateLanguages(select, languages) {
var html = ''; let html = '';
html += "<option value=''>" + globalize.translate('AnyLanguage') + '</option>'; html += `<option value=''>${globalize.translate('AnyLanguage')}</option>`;
for (var i = 0, length = languages.length; i < length; i++) { for (let i = 0, length = languages.length; i < length; i++) {
var culture = languages[i]; const culture = languages[i];
html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + '</option>'; html += `<option value='${culture.ThreeLetterISOLanguageName}'>${culture.DisplayName}</option>`;
} }
select.innerHTML = html; select.innerHTML = html;
@ -33,7 +44,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
function setMaxBitrateIntoField(select, isInNetwork, mediatype) { function setMaxBitrateIntoField(select, isInNetwork, mediatype) {
var options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({ const options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({
currentMaxBitrate: appSettings.maxStreamingBitrate(isInNetwork, mediatype), currentMaxBitrate: appSettings.maxStreamingBitrate(isInNetwork, mediatype),
isAutomaticBitrateEnabled: appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype), isAutomaticBitrateEnabled: appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype),
@ -47,10 +58,10 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
}); });
select.innerHTML = options.map(function (i) { select.innerHTML = options.map(i => {
// render empty string instead of 0 for the auto option // render empty string instead of 0 for the auto option
return '<option value="' + (i.bitrate || '') + '">' + i.name + '</option>'; return `<option value="${i.bitrate || ''}">${i.name}</option>`;
}).join(''); }).join('');
if (appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype)) { if (appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype)) {
@ -62,23 +73,23 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
function fillChromecastQuality(select) { function fillChromecastQuality(select) {
var options = qualityoptions.getVideoQualityOptions({ const options = qualityoptions.getVideoQualityOptions({
currentMaxBitrate: appSettings.maxChromecastBitrate(), currentMaxBitrate: appSettings.maxChromecastBitrate(),
isAutomaticBitrateEnabled: !appSettings.maxChromecastBitrate(), isAutomaticBitrateEnabled: !appSettings.maxChromecastBitrate(),
enableAuto: true enableAuto: true
}); });
select.innerHTML = options.map(function (i) { select.innerHTML = options.map(i => {
// render empty string instead of 0 for the auto option // render empty string instead of 0 for the auto option
return '<option value="' + (i.bitrate || '') + '">' + i.name + '</option>'; return `<option value="${i.bitrate || ''}">${i.name}</option>`;
}).join(''); }).join('');
select.value = appSettings.maxChromecastBitrate() || ''; select.value = appSettings.maxChromecastBitrate() || '';
} }
function setMaxBitrateFromField(select, isInNetwork, mediatype, value) { function setMaxBitrateFromField(select, isInNetwork, mediatype) {
if (select.value) { if (select.value) {
appSettings.maxStreamingBitrate(isInNetwork, mediatype, select.value); appSettings.maxStreamingBitrate(isInNetwork, mediatype, select.value);
@ -110,7 +121,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
return; return;
} }
apiClient.getEndpointInfo().then(function (endpointInfo) { apiClient.getEndpointInfo().then(endpointInfo => {
if (endpointInfo.IsInNetwork) { if (endpointInfo.IsInNetwork) {
@ -133,7 +144,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
}); });
} }
function showOrHideEpisodesField(context, user, apiClient) { function showOrHideEpisodesField(context) {
if (browser.tizen || browser.web0s) { if (browser.tizen || browser.web0s) {
context.querySelector('.fldEpisodeAutoPlay').classList.add('hide'); context.querySelector('.fldEpisodeAutoPlay').classList.add('hide');
@ -145,12 +156,12 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
function loadForm(context, user, userSettings, apiClient) { function loadForm(context, user, userSettings, apiClient) {
var loggedInUserId = apiClient.getCurrentUserId(); const loggedInUserId = apiClient.getCurrentUserId();
var userId = user.Id; const userId = user.Id;
showHideQualityFields(context, user, apiClient); showHideQualityFields(context, user, apiClient);
apiClient.getCultures().then(function (allCultures) { apiClient.getCultures().then(allCultures => {
populateLanguages(context.querySelector('#selectAudioLanguage'), allCultures); populateLanguages(context.querySelector('#selectAudioLanguage'), allCultures);
@ -159,7 +170,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
}); });
// hide cinema mode options if disabled at server level // hide cinema mode options if disabled at server level
apiClient.getNamedConfiguration('cinemamode').then(function (cinemaConfig) { apiClient.getNamedConfiguration('cinemamode').then(cinemaConfig => {
if (cinemaConfig.EnableIntrosForMovies || cinemaConfig.EnableIntrosForEpisodes) { if (cinemaConfig.EnableIntrosForMovies || cinemaConfig.EnableIntrosForEpisodes) {
context.querySelector('.cinemaModeOptions').classList.remove('hide'); context.querySelector('.cinemaModeOptions').classList.remove('hide');
@ -204,18 +215,18 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
fillChromecastQuality(context.querySelector('.selectChromecastVideoQuality')); fillChromecastQuality(context.querySelector('.selectChromecastVideoQuality'));
var selectChromecastVersion = context.querySelector('.selectChromecastVersion'); const selectChromecastVersion = context.querySelector('.selectChromecastVersion');
selectChromecastVersion.value = userSettings.chromecastVersion(); selectChromecastVersion.value = userSettings.chromecastVersion();
var selectSkipForwardLength = context.querySelector('.selectSkipForwardLength'); const selectSkipForwardLength = context.querySelector('.selectSkipForwardLength');
fillSkipLengths(selectSkipForwardLength); fillSkipLengths(selectSkipForwardLength);
selectSkipForwardLength.value = userSettings.skipForwardLength(); selectSkipForwardLength.value = userSettings.skipForwardLength();
var selectSkipBackLength = context.querySelector('.selectSkipBackLength'); const selectSkipBackLength = context.querySelector('.selectSkipBackLength');
fillSkipLengths(selectSkipBackLength); fillSkipLengths(selectSkipBackLength);
selectSkipBackLength.value = userSettings.skipBackLength(); selectSkipBackLength.value = userSettings.skipBackLength();
showOrHideEpisodesField(context, user, apiClient); showOrHideEpisodesField(context);
loading.hide(); loading.hide();
} }
@ -248,20 +259,20 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
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();
}); });
}); });
@ -269,14 +280,14 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
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);
}); });
@ -289,7 +300,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
function embed(options, self) { function embed(options, self) {
require(['text!./playbackSettings.template.html'], function (template) { return import('text!./playbackSettings.template.html').then(({default: template}) => {
options.element.innerHTML = globalize.translateDocument(template, 'core'); options.element.innerHTML = globalize.translateDocument(template, 'core');
@ -307,43 +318,43 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
}); });
} }
function PlaybackSettings(options) { class PlaybackSettings {
constructor(options) {
this.options = options; this.options = options;
embed(options, this); embed(options, this);
} }
PlaybackSettings.prototype.loadData = function () { loadData() {
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;
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(user => {
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(() => {
self.dataLoaded = true; self.dataLoaded = true;
loadForm(context, user, userSettings, apiClient); loadForm(context, user, userSettings, apiClient);
}); });
}); });
}; }
PlaybackSettings.prototype.submit = function () { submit() {
onSubmit.call(this); onSubmit.call(this);
}; }
PlaybackSettings.prototype.destroy = function () { destroy() {
this.options = null; this.options = null;
}; }
}
return PlaybackSettings; /* eslint-enable indent */
}); export default PlaybackSettings;

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'),

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

@ -21,7 +21,7 @@ define(['homescreenSettings', 'dom', 'globalize', 'loading', 'userSettings', 'au
if (homescreenSettingsInstance) { if (homescreenSettingsInstance) {
homescreenSettingsInstance.loadData(); homescreenSettingsInstance.loadData();
} else { } else {
homescreenSettingsInstance = new HomescreenSettings({ homescreenSettingsInstance = new HomescreenSettings.default({
serverId: ApiClient.serverId(), serverId: ApiClient.serverId(),
userId: userId, userId: userId,
element: view.querySelector('.homeScreenSettingsContainer'), element: view.querySelector('.homeScreenSettingsContainer'),

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

@ -21,7 +21,7 @@ define(['playbackSettings', 'dom', 'globalize', 'loading', 'userSettings', 'auto
if (settingsInstance) { if (settingsInstance) {
settingsInstance.loadData(); settingsInstance.loadData();
} else { } else {
settingsInstance = new PlaybackSettings({ settingsInstance = new PlaybackSettings.default({
serverId: ApiClient.serverId(), serverId: ApiClient.serverId(),
userId: userId, userId: userId,
element: view.querySelector('.settingsContainer'), element: view.querySelector('.settingsContainer'),