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 homeScreenSettings to ES6 modules

Browse source
This commit is contained in:
grafixeyehero 2020-06-21 04:38:42 +03:00
parent 0aeff0b464
commit 30bddd04b0
3 changed files with 137 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -97,6 +97,7 @@
"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/displaySettings/displaySettings.js",
"src/components/homeScreenSettings/homeScreenSettings.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",

277
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,47 +484,48 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
}); });
} }
function HomeScreenSettings(options) { class HomeScreenSettings {
constructor(options) {
this.options = options;
embed(options, this);
}
this.options = options; loadData(autoFocus) {
embed(options, this); const self = this;
const context = self.options.element;
loading.show();
const userId = self.options.userId;
const apiClient = connectionManager.getApiClient(self.options.serverId);
const userSettings = self.options.userSettings;
apiClient.getUser(userId).then(user => {
userSettings.setUserInfo(userId, apiClient).then(() => {
self.dataLoaded = true;
loadForm(context, user, userSettings, apiClient);
if (autoFocus) {
focusManager.autoFocus(context);
}
});
});
}
submit() {
onSubmit.call(this);
}
destroy() {
this.options = null;
}
} }
HomeScreenSettings.prototype.loadData = function (autoFocus) { /* eslint-enable indent */
var self = this; export default HomeScreenSettings;
var context = self.options.element;
loading.show();
var userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId);
var userSettings = self.options.userSettings;
apiClient.getUser(userId).then(function (user) {
userSettings.setUserInfo(userId, apiClient).then(function () {
self.dataLoaded = true;
loadForm(context, user, userSettings, apiClient);
if (autoFocus) {
focusManager.autoFocus(context);
}
});
});
};
HomeScreenSettings.prototype.submit = function () {
onSubmit.call(this);
};
HomeScreenSettings.prototype.destroy = function () {
this.options = null;
};
return HomeScreenSettings;
});

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