diff --git a/package.json b/package.json index 5811839a34..3c2f9ef1d8 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "src/components/cardbuilder/chaptercardbuilder.js", "src/components/cardbuilder/peoplecardbuilder.js", "src/components/displaySettings/displaySettings.js", + "src/components/homeScreenSettings/homeScreenSettings.js", "src/components/images/imageLoader.js", "src/components/indicators/indicators.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js", diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js index 9eae944d26..5e7d6b4c51 100644 --- a/src/components/homeScreenSettings/homeScreenSettings.js +++ b/src/components/homeScreenSettings/homeScreenSettings.js @@ -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) { - 'use strict'; +import layoutManager from 'layoutManager'; +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) { - var folderHtml = ''; + let folderHtml = ''; folderHtml += '
'; - 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 += ''; return currentHtml; @@ -34,7 +45,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getLandingScreenOptions(type) { - var list = []; + const list = []; if (type === 'movies') { list.push({ @@ -123,27 +134,27 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getLandingScreenOptionsHtml(type, userValue) { - return getLandingScreenOptions(type).map(function (o) { + return getLandingScreenOptions(type).map(o => { - var selected = userValue === o.value || (o.isDefault && !userValue); - var selectedHtml = selected ? ' selected' : ''; - var optionValue = o.isDefault ? '' : o.value; + const selected = userValue === o.value || (o.isDefault && !userValue); + const selectedHtml = selected ? ' selected' : ''; + const optionValue = o.isDefault ? '' : o.value; - return ''; + return ``; }).join(''); } 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 += '
'; + currentHtml += `
`; currentHtml += ''; @@ -155,8 +166,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa currentHtml += '
'; - currentHtml += ''; - currentHtml += ''; + currentHtml += ``; + currentHtml += ``; currentHtml += '
'; @@ -170,14 +181,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function updateHomeSectionValues(context, userSettings) { - for (var i = 1; i <= 7; i++) { + for (let i = 1; i <= 7; i++) { - var select = context.querySelector('#selectHomeSection' + i); - var defaultValue = homeSections.getDefaultSection(i - 1); + const select = context.querySelector(`#selectHomeSection${i}`); + 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 = ''; @@ -193,42 +204,42 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getPerLibrarySettingsHtml(item, user, userSettings, apiClient) { - var html = ''; + let html = ''; - var isChecked; + let isChecked; 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 += '
'; html += ''; html += '
'; } - var excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels']; - if (excludeFromLatest.indexOf(item.CollectionType || '') === -1) { + const excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels']; + if (!excludeFromLatest.includes(item.CollectionType || '')) { - isChecked = user.Configuration.LatestItemsExcludes.indexOf(item.Id) === -1; + isChecked = !user.Configuration.LatestItemsExcludes.includes(item.Id); html += ''; } if (html) { - html = '
' + html + '
'; + html = `
${html}
`; } 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 += '
'; - html += '`; - var userValue = userSettings.get('landing-' + idForLanding); + const userValue = userSettings.get(`landing-${idForLanding}`); html += getLandingScreenOptionsHtml(item.CollectionType, userValue); @@ -238,7 +249,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa if (html) { - var prefix = ''; + let prefix = ''; prefix += '
'; prefix += '

'; @@ -254,10 +265,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function renderPerLibrarySettings(context, user, userViews, userSettings, apiClient) { - var elem = context.querySelector('.perLibrarySettings'); - var html = ''; + const elem = context.querySelector('.perLibrarySettings'); + 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); } @@ -271,10 +282,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa updateHomeSectionValues(context, userSettings); - var promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id); - var promise2 = apiClient.getJSON(apiClient.getUrl('Users/' + user.Id + '/GroupingOptions')); + const promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id); + 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]); @@ -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) { - var target = dom.parentWithClass(e.target, 'btnViewItemMove'); + const target = dom.parentWithClass(e.target, 'btnViewItemMove'); if (target) { - var viewItem = dom.parentWithClass(target, 'viewItem'); + const viewItem = dom.parentWithClass(target, 'viewItem'); if (viewItem) { - var ul = dom.parentWithClass(viewItem, 'paperList'); + const ul = dom.parentWithClass(viewItem, 'paperList'); if (target.classList.contains('btnViewItemDown')) { - var next = viewItem.nextSibling; + const next = viewItem.nextSibling; if (next) { viewItem.parentNode.removeChild(viewItem); @@ -327,7 +319,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa } else { - var prev = viewItem.previousSibling; + const prev = viewItem.previousSibling; if (prev) { viewItem.parentNode.removeChild(viewItem); @@ -341,10 +333,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getCheckboxItems(selector, context, isChecked) { - var inputs = context.querySelectorAll(selector); - var list = []; + const inputs = context.querySelectorAll(selector); + 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) { list.push(inputs[i]); @@ -359,25 +351,25 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa 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'); }); - user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(function (i) { + user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(i => { 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'); }); - var viewItems = context.querySelectorAll('.viewItem'); - var orderedViews = []; - var i; - var length; + const viewItems = context.querySelectorAll('.viewItem'); + const orderedViews = []; + let i; + let length; for (i = 0, length = viewItems.length; i < length; i++) { 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('homesection6', context.querySelector('#selectHomeSection7').value); - var selectLandings = context.querySelectorAll('.selectLanding'); + const selectLandings = context.querySelectorAll('.selectLanding'); for (i = 0, length = selectLandings.length; i < length; i++) { - var selectLanding = selectLandings[i]; - userSettingsInstance.set('landing-' + selectLanding.getAttribute('data-folderid'), selectLanding.value); + const selectLanding = selectLandings[i]; + userSettingsInstance.set(`landing-${selectLanding.getAttribute('data-folderid')}`, selectLanding.value); } return apiClient.updateUserConfiguration(user.Id, user.Configuration); @@ -407,20 +399,20 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa 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(); if (enableSaveConfirmation) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('SettingsSaved')); }); } events.trigger(instance, 'saved'); - }, function () { + }, () => { loading.hide(); }); }); @@ -428,14 +420,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function onSubmit(e) { - var self = this; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userId = self.options.userId; - var userSettings = self.options.userSettings; + const self = this; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userId = self.options.userId; + 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); }); @@ -448,13 +440,13 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function onChange(e) { - var chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia'); + const chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia'); if (!chkIncludeInMyMedia) { return; } - var section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection'); - var fldIncludeInLatest = section.querySelector('.fldIncludeInLatest'); + const section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection'); + const fldIncludeInLatest = section.querySelector('.fldIncludeInLatest'); if (fldIncludeInLatest) { if (chkIncludeInMyMedia.checked) { fldIncludeInLatest.classList.remove('hide'); @@ -466,10 +458,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa 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++) { - template = template.replace('{section' + i + 'label}', globalize.translate('LabelHomeScreenSectionValue', i)); + for (let i = 1; i <= numConfigurableSections; i++) { + template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i)); } 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; - 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; -}); +export default HomeScreenSettings; diff --git a/src/controllers/user/home.js b/src/controllers/user/home.js index 8f826c425d..117a457d3f 100644 --- a/src/controllers/user/home.js +++ b/src/controllers/user/home.js @@ -21,7 +21,7 @@ define(['homescreenSettings', 'dom', 'globalize', 'loading', 'userSettings', 'au if (homescreenSettingsInstance) { homescreenSettingsInstance.loadData(); } else { - homescreenSettingsInstance = new HomescreenSettings({ + homescreenSettingsInstance = new HomescreenSettings.default({ serverId: ApiClient.serverId(), userId: userId, element: view.querySelector('.homeScreenSettingsContainer'),