From 76a037b7c2fda2a7ce433c1deb94464f83a13643 Mon Sep 17 00:00:00 2001 From: Cameron Date: Sat, 18 Jul 2020 09:21:15 +0100 Subject: [PATCH 1/3] Migration of Globalize to ES6 module --- package.json | 1 + .../accessSchedule/accessSchedule.js | 2 +- src/components/appRouter.js | 2 +- .../displaySettings/displaySettings.js | 2 +- src/components/filterdialog/filterdialog.js | 2 +- src/components/filtermenu/filtermenu.js | 2 +- src/components/guide/guide-settings.js | 2 +- src/components/guide/guide.js | 2 +- .../homeScreenSettings/homeScreenSettings.js | 2 +- .../imageDownloader/imageDownloader.js | 2 +- .../imageOptionsEditor/imageOptionsEditor.js | 2 +- src/components/imageUploader/imageUploader.js | 2 +- src/components/imageeditor/imageeditor.js | 2 +- src/components/itemMediaInfo/itemMediaInfo.js | 2 +- .../itemidentifier/itemidentifier.js | 4 +- .../libraryoptionseditor.js | 2 +- .../mediaLibraryCreator.js | 2 +- .../mediaLibraryEditor/mediaLibraryEditor.js | 2 +- .../metadataEditor/metadataEditor.js | 4 +- src/components/metadataEditor/personEditor.js | 2 +- .../playbackSettings/playbackSettings.js | 2 +- .../recordingcreator/recordingcreator.js | 2 +- .../recordingcreator/recordingeditor.js | 2 +- .../recordingcreator/recordingfields.js | 2 +- .../recordingcreator/seriesrecordingeditor.js | 4 +- src/components/search/searchfields.js | 2 +- src/components/search/searchresults.js | 2 +- src/components/sortmenu/sortmenu.js | 2 +- .../subtitleeditor/subtitleeditor.js | 2 +- .../subtitlesettings/subtitlesettings.js | 2 +- src/components/viewSettings/viewSettings.js | 2 +- src/controllers/livetvguideprovider.js | 2 +- src/scripts/globalize.js | 106 +++++++++--------- src/scripts/site.js | 6 +- 34 files changed, 92 insertions(+), 89 deletions(-) diff --git a/package.json b/package.json index b911778bc2..cfb43eef24 100644 --- a/package.json +++ b/package.json @@ -164,6 +164,7 @@ "src/plugins/backdropScreensaver/plugin.js", "src/components/filterdialog/filterdialog.js", "src/components/fetchhelper.js", + "src/scripts/globalize.js", "src/scripts/keyboardNavigation.js", "src/scripts/settings/appSettings.js", "src/scripts/settings/userSettings.js", diff --git a/src/components/accessSchedule/accessSchedule.js b/src/components/accessSchedule/accessSchedule.js index 166460a025..2a46a8acde 100644 --- a/src/components/accessSchedule/accessSchedule.js +++ b/src/components/accessSchedule/accessSchedule.js @@ -67,7 +67,7 @@ import 'formDialogStyle'; }); dlg.classList.add('formDialog'); let html = ''; - html += globalize.translateDocument(template); + html += globalize.translateHtml(template); dlg.innerHTML = html; populateHours(dlg); loadSchedule(dlg, options.schedule); diff --git a/src/components/appRouter.js b/src/components/appRouter.js index 1791aef7e2..26f3e3c403 100644 --- a/src/components/appRouter.js +++ b/src/components/appRouter.js @@ -465,7 +465,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro function loadContent(ctx, route, html, request) { - html = globalize.translateDocument(html, route.dictionary); + html = globalize.translateHtml(html, route.dictionary); request.view = html; viewManager.loadView(request); diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js index c4eb35f49f..581f7960cc 100644 --- a/src/components/displaySettings/displaySettings.js +++ b/src/components/displaySettings/displaySettings.js @@ -274,7 +274,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' function embed(options, self) { require(['text!./displaySettings.template.html'], function (template) { - options.element.innerHTML = globalize.translateDocument(template, 'core'); + options.element.innerHTML = globalize.translateHtml(template, 'core'); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); if (options.enableSaveButton) { options.element.querySelector('.btnSave').classList.remove('hide'); diff --git a/src/components/filterdialog/filterdialog.js b/src/components/filterdialog/filterdialog.js index 041fa82e76..df17c19dec 100644 --- a/src/components/filterdialog/filterdialog.js +++ b/src/components/filterdialog/filterdialog.js @@ -412,7 +412,7 @@ import 'css!./style.css'; dlg.classList.add('background-theme-a'); dlg.classList.add('formDialog'); dlg.classList.add('filterDialog'); - dlg.innerHTML = globalize.translateDocument(template); + dlg.innerHTML = globalize.translateHtml(template); setVisibility(dlg, this.options); dialogHelper.open(dlg); dlg.addEventListener('close', resolve); diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js index c189856e7b..936e2b0407 100644 --- a/src/components/filtermenu/filtermenu.js +++ b/src/components/filtermenu/filtermenu.js @@ -286,7 +286,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost', html += template; - dlg.innerHTML = globalize.translateDocument(html, 'core'); + dlg.innerHTML = globalize.translateHtml(html, 'core'); var settingElements = dlg.querySelectorAll('.viewSetting'); for (var i = 0, length = settingElements.length; i < length; i++) { diff --git a/src/components/guide/guide-settings.js b/src/components/guide/guide-settings.js index 7409a7e943..77a3637251 100644 --- a/src/components/guide/guide-settings.js +++ b/src/components/guide/guide-settings.js @@ -114,7 +114,7 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio var html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js index 223d3a2063..4ae2041223 100644 --- a/src/components/guide/guide.js +++ b/src/components/guide/guide.js @@ -1151,7 +1151,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', context.classList.add('tvguide'); - context.innerHTML = globalize.translateDocument(template, 'core'); + context.innerHTML = globalize.translateHtml(template, 'core'); programGrid = context.querySelector('.programGrid'); var timeslotHeaders = context.querySelector('.timeslotHeaders'); diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js index 9eae944d26..d62bec4475 100644 --- a/src/components/homeScreenSettings/homeScreenSettings.js +++ b/src/components/homeScreenSettings/homeScreenSettings.js @@ -472,7 +472,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa template = template.replace('{section' + i + 'label}', globalize.translate('LabelHomeScreenSectionValue', i)); } - options.element.innerHTML = globalize.translateDocument(template, 'core'); + options.element.innerHTML = globalize.translateHtml(template, 'core'); options.element.querySelector('.viewOrderList').addEventListener('click', onSectionOrderListClick); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js index a3965279cf..fbe98c532f 100644 --- a/src/components/imageDownloader/imageDownloader.js +++ b/src/components/imageDownloader/imageDownloader.js @@ -339,7 +339,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image var dlg = dialogHelper.createDialog(dialogOptions); - dlg.innerHTML = globalize.translateDocument(template, 'core'); + dlg.innerHTML = globalize.translateHtml(template, 'core'); if (layoutManager.tv) { scrollHelper.centerFocus.on(dlg, false); diff --git a/src/components/imageOptionsEditor/imageOptionsEditor.js b/src/components/imageOptionsEditor/imageOptionsEditor.js index 257921dfa2..22dcf57dc2 100644 --- a/src/components/imageOptionsEditor/imageOptionsEditor.js +++ b/src/components/imageOptionsEditor/imageOptionsEditor.js @@ -92,7 +92,7 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb scrollY: false }); dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateDocument(template); + dlg.innerHTML = globalize.translateHtml(template); dlg.addEventListener('close', function () { saveValues(dlg, options); }); diff --git a/src/components/imageUploader/imageUploader.js b/src/components/imageUploader/imageUploader.js index 3783b8faff..3cf7aa000d 100644 --- a/src/components/imageUploader/imageUploader.js +++ b/src/components/imageUploader/imageUploader.js @@ -161,7 +161,7 @@ import 'css!./style'; dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateDocument(template, 'core'); + dlg.innerHTML = globalize.translateHtml(template, 'core'); if (layoutManager.tv) { scrollHelper.centerFocus.on(dlg, false); diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js index 2927a0b120..af85d5e3eb 100644 --- a/src/components/imageeditor/imageeditor.js +++ b/src/components/imageeditor/imageeditor.js @@ -464,7 +464,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateDocument(template, 'core'); + dlg.innerHTML = globalize.translateHtml(template, 'core'); if (layoutManager.tv) { scrollHelper.centerFocus.on(dlg, false); diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js index 9c2c8c9664..c3fd9e0d0a 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.js +++ b/src/components/itemMediaInfo/itemMediaInfo.js @@ -150,7 +150,7 @@ import 'flexStyles'; const dlg = dialogHelper.createDialog(dialogOptions); dlg.classList.add('formDialog'); let html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; if (layoutManager.tv) { dlg.querySelector('.formDialogContent'); diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js index 6f638dc271..11e164dede 100644 --- a/src/components/itemidentifier/itemidentifier.js +++ b/src/components/itemidentifier/itemidentifier.js @@ -382,7 +382,7 @@ import 'cardStyle'; dlg.classList.add('recordingDialog'); let html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; @@ -464,7 +464,7 @@ import 'cardStyle'; dlg.classList.add('recordingDialog'); let html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js index 832a6ffc5e..6aea530d15 100644 --- a/src/components/libraryoptionseditor/libraryoptionseditor.js +++ b/src/components/libraryoptionseditor/libraryoptionseditor.js @@ -359,7 +359,7 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct xhr.open('GET', 'components/libraryoptionseditor/libraryoptionseditor.template.html', true); xhr.onload = function(e) { var template = this.response; - parent.innerHTML = globalize.translateDocument(template); + parent.innerHTML = globalize.translateHtml(template); populateRefreshInterval(parent.querySelector('#selectAutoRefreshInterval')); var promises = [populateLanguages(parent), populateCountries(parent.querySelector('#selectCountry'))]; Promise.all(promises).then(function() { diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js index c1b7453ca9..4e0d7b026c 100644 --- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js +++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js @@ -211,7 +211,7 @@ export class showEditor { dlg.classList.add('background-theme-a'); dlg.classList.add('dlg-librarycreator'); dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateDocument(template); + dlg.innerHTML = globalize.translateHtml(template); initEditor(dlg, options.collectionTypeOptions); dlg.addEventListener('close', onDialogClosed); dialogHelper.open(dlg); diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js index 4577b67131..1cee6984d9 100644 --- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js +++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js @@ -226,7 +226,7 @@ export class showEditor { dlg.classList.add('ui-body-a'); dlg.classList.add('background-theme-a'); dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateDocument(template); + dlg.innerHTML = globalize.translateHtml(template); dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name; initEditor(dlg, options); dlg.addEventListener('close', onDialogClosed); diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js index 61a4ba7f24..74152c1a4c 100644 --- a/src/components/metadataEditor/metadataEditor.js +++ b/src/components/metadataEditor/metadataEditor.js @@ -1045,7 +1045,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi var html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; @@ -1085,7 +1085,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi require(['text!./metadataEditor.template.html'], function (template) { - elem.innerHTML = globalize.translateDocument(template, 'core'); + elem.innerHTML = globalize.translateHtml(template, 'core'); elem.querySelector('.formDialogFooter').classList.remove('formDialogFooter'); elem.querySelector('.btnHeaderSave').classList.remove('hide'); diff --git a/src/components/metadataEditor/personEditor.js b/src/components/metadataEditor/personEditor.js index fc6a0595f2..afbf33f680 100644 --- a/src/components/metadataEditor/personEditor.js +++ b/src/components/metadataEditor/personEditor.js @@ -31,7 +31,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but var html = ''; var submitted = false; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js index 06d2e38d2c..c367c2fc8e 100644 --- a/src/components/playbackSettings/playbackSettings.js +++ b/src/components/playbackSettings/playbackSettings.js @@ -291,7 +291,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality require(['text!./playbackSettings.template.html'], function (template) { - options.element.innerHTML = globalize.translateDocument(template, 'core'); + options.element.innerHTML = globalize.translateHtml(template, 'core'); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js index ae26d0debc..d18d5fcb6c 100644 --- a/src/components/recordingcreator/recordingcreator.js +++ b/src/components/recordingcreator/recordingcreator.js @@ -156,7 +156,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c var html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js index 86c731ad26..c3f40fcddb 100644 --- a/src/components/recordingcreator/recordingeditor.js +++ b/src/components/recordingcreator/recordingeditor.js @@ -116,7 +116,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c var html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; diff --git a/src/components/recordingcreator/recordingfields.js b/src/components/recordingcreator/recordingfields.js index b4cbdfab0a..84348fcfbc 100644 --- a/src/components/recordingcreator/recordingfields.js +++ b/src/components/recordingcreator/recordingfields.js @@ -219,7 +219,7 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa require(['text!./recordingfields.template.html'], function (template) { var options = self.options; var context = options.parent; - context.innerHTML = globalize.translateDocument(template, 'core'); + context.innerHTML = globalize.translateHtml(template, 'core'); context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self)); context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self)); diff --git a/src/components/recordingcreator/seriesrecordingeditor.js b/src/components/recordingcreator/seriesrecordingeditor.js index 62accd5b63..a101ce53ec 100644 --- a/src/components/recordingcreator/seriesrecordingeditor.js +++ b/src/components/recordingcreator/seriesrecordingeditor.js @@ -168,7 +168,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c var dlg = options.context; dlg.classList.add('hide'); - dlg.innerHTML = globalize.translateDocument(template, 'core'); + dlg.innerHTML = globalize.translateHtml(template, 'core'); dlg.querySelector('.formDialogHeader').classList.add('hide'); dlg.querySelector('.formDialogFooter').classList.add('hide'); @@ -221,7 +221,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c var html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; diff --git a/src/components/search/searchfields.js b/src/components/search/searchfields.js index 7e77814772..af58291ff3 100644 --- a/src/components/search/searchfields.js +++ b/src/components/search/searchfields.js @@ -62,7 +62,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick require(['text!./searchfields.template.html'], function (template) { - var html = globalize.translateDocument(template, 'core'); + var html = globalize.translateHtml(template, 'core'); if (browser.tizen || browser.orsay) { html = html.replace(' 1) { module = parts[0]; @@ -195,7 +198,7 @@ define(['userSettings', 'events'], function (userSettings, events) { } function translateKeyFromModule(key, module) { - var dictionary = getDictionary(module, getCurrentLocale()); + let dictionary = getDictionary(module, getCurrentLocale()); if (!dictionary || !dictionary[key]) { dictionary = getDictionary(module, fallbackCulture); } @@ -209,15 +212,15 @@ define(['userSettings', 'events'], function (userSettings, events) { return str.split(find).join(replace); } - function translate(key) { - var val = translateKey(key); - for (var i = 1; i < arguments.length; i++) { + export function translate(key) { + let val = translateKey(key); + for (let i = 1; i < arguments.length; i++) { val = replaceAll(val, '{' + (i - 1) + '}', arguments[i]); } return val; } - function translateHtml(html, module) { + export function translateHtml(html, module) { if (!module) { module = defaultModule(); } @@ -225,26 +228,26 @@ define(['userSettings', 'events'], function (userSettings, events) { throw new Error('module cannot be null or empty'); } - var startIndex = html.indexOf('${'); + let startIndex = html.indexOf('${'); if (startIndex === -1) { return html; } startIndex += 2; - var endIndex = html.indexOf('}', startIndex); + const endIndex = html.indexOf('}', startIndex); if (endIndex === -1) { return html; } - var key = html.substring(startIndex, endIndex); - var val = translateKeyFromModule(key, module); + const key = html.substring(startIndex, endIndex); + const val = translateKeyFromModule(key, module); html = html.replace('${' + key + '}', val); return translateHtml(html, module); } - var _defaultModule; - function defaultModule(val) { + let _defaultModule; + export function defaultModule(val) { if (val) { _defaultModule = val; } @@ -259,16 +262,15 @@ define(['userSettings', 'events'], function (userSettings, events) { } }); - return { - getString: translate, - translate: translate, - translateDocument: translateHtml, - translateHtml: translateHtml, - loadStrings: loadStrings, - defaultModule: defaultModule, - getCurrentLocale: getCurrentLocale, - getCurrentDateTimeLocale: getCurrentDateTimeLocale, - register: register, - updateCurrentCulture: updateCurrentCulture - }; -}); +export default { + translate, + translateHtml, + loadStrings, + defaultModule, + getCurrentLocale, + getCurrentDateTimeLocale, + register, + updateCurrentCulture +}; + +/* eslint-enable indent */ diff --git a/src/scripts/site.js b/src/scripts/site.js index c3f93d9545..c805c40fdc 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -422,7 +422,7 @@ var AppInfo = {}; require(['globalize', 'browser'], function (globalize, browser) { window.Globalize = globalize; loadCoreDictionary(globalize).then(function () { - onGlobalizeInit(browser); + onGlobalizeInit(browser, globalize); }); }); require(['keyboardnavigation'], function(keyboardnavigation) { @@ -455,14 +455,14 @@ var AppInfo = {}; }); } - function onGlobalizeInit(browser) { + function onGlobalizeInit(browser, globalize) { if ('android' === self.appMode) { if (-1 !== self.location.href.toString().toLowerCase().indexOf('start=backgroundsync')) { return onAppReady(browser); } } - document.title = Globalize.translateDocument(document.title, 'core'); + document.title = globalize.translateHtml(document.title, 'core'); if (browser.tv && !browser.android) { console.debug('using system fonts with explicit sizes'); From fc96cbd9ad76c56b8e543e6cd58c2fbe21889c86 Mon Sep 17 00:00:00 2001 From: Cameron Date: Sat, 18 Jul 2020 09:23:00 +0100 Subject: [PATCH 2/3] Migration of editorsidebar to ES6 module --- package.json | 1 + src/scripts/editorsidebar.js | 11 ++++++++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index cfb43eef24..af9bfaaf57 100644 --- a/package.json +++ b/package.json @@ -164,6 +164,7 @@ "src/plugins/backdropScreensaver/plugin.js", "src/components/filterdialog/filterdialog.js", "src/components/fetchhelper.js", + "src/scripts/editorsidebar.js", "src/scripts/globalize.js", "src/scripts/keyboardNavigation.js", "src/scripts/settings/appSettings.js", diff --git a/src/scripts/editorsidebar.js b/src/scripts/editorsidebar.js index 8168389566..ddda248c87 100644 --- a/src/scripts/editorsidebar.js +++ b/src/scripts/editorsidebar.js @@ -1,5 +1,9 @@ -define(['datetime', 'jQuery', 'globalize', 'material-icons'], function (datetime, $, globalize) { - 'use strict'; +import datetime from 'datetime'; +import $ from 'jQuery'; +import globalize from 'globalize'; +import 'material-icons'; + +/* eslint-disable indent */ function getNode(item, folderState, selected) { var htmlName = getNodeInnerHtml(item); @@ -331,4 +335,5 @@ define(['datetime', 'jQuery', 'globalize', 'material-icons'], function (datetime getCurrentItemId: getCurrentItemId, setCurrentItemId: setCurrentItemId }; -}); + +/* eslint-enable indent */ From 28bf9c3e6fa796464cf6f6c1bb6d66b9c8497053 Mon Sep 17 00:00:00 2001 From: Cameron Date: Sat, 18 Jul 2020 09:28:07 +0100 Subject: [PATCH 3/3] Migration of playlists to ES6 module --- package.json | 1 + src/scripts/editorsidebar.js | 4 +- src/scripts/playlists.js | 353 ++++++++++++++++++----------------- 3 files changed, 183 insertions(+), 175 deletions(-) diff --git a/package.json b/package.json index af9bfaaf57..50217331cf 100644 --- a/package.json +++ b/package.json @@ -166,6 +166,7 @@ "src/components/fetchhelper.js", "src/scripts/editorsidebar.js", "src/scripts/globalize.js", + "src/scripts/playlists.js", "src/scripts/keyboardNavigation.js", "src/scripts/settings/appSettings.js", "src/scripts/settings/userSettings.js", diff --git a/src/scripts/editorsidebar.js b/src/scripts/editorsidebar.js index ddda248c87..5d0e237a0d 100644 --- a/src/scripts/editorsidebar.js +++ b/src/scripts/editorsidebar.js @@ -183,7 +183,7 @@ import 'material-icons'; } function initializeTree(page, currentUser, openItems, selectedId) { - require(['jstree'], function () { + import('jstree').then(() => { initializeTreeInternal(page, currentUser, openItems, selectedId); }); } @@ -303,7 +303,7 @@ import 'material-icons'; $(document).on('itemsaved', '.metadataEditorPage', function (e, item) { updateEditorNode(this, item); }).on('pagebeforeshow', '.metadataEditorPage', function () { - require(['css!assets/css/metadataeditor.css']); + import('css!assets/css/metadataeditor.css'); }).on('pagebeforeshow', '.metadataEditorPage', function () { var page = this; Dashboard.getCurrentUser().then(function (user) { diff --git a/src/scripts/playlists.js b/src/scripts/playlists.js index a1868d3131..4a014e7605 100644 --- a/src/scripts/playlists.js +++ b/src/scripts/playlists.js @@ -1,195 +1,202 @@ -define(['loading', 'listView', 'cardBuilder', 'libraryMenu', 'libraryBrowser', 'apphost', 'imageLoader', 'userSettings', 'emby-itemscontainer'], function (loading, listView, cardBuilder, libraryMenu, libraryBrowser, appHost, imageLoader, userSettings) { - 'use strict'; +import loading from 'loading'; +import listView from 'listView'; +import cardBuilder from 'cardBuilder'; +import libraryMenu from 'libraryMenu'; +import libraryBrowser from 'libraryBrowser'; +import appHost from 'apphost'; +import imageLoader from 'imageLoader'; +import userSettings from 'userSettings'; +import 'emby-itemscontainer'; - return function (view, params) { - function getPageData(context) { - var key = getSavedQueryKey(context); - var pageData = data[key]; +export default function (view, params) { + function getPageData(context) { + const key = getSavedQueryKey(context); + let pageData = data[key]; - if (!pageData) { - pageData = data[key] = { - query: { - SortBy: 'SortName', - SortOrder: 'Ascending', - IncludeItemTypes: 'Playlist', - Recursive: true, - Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete', - StartIndex: 0 - }, - view: libraryBrowser.getSavedView(key) || 'Poster' - }; + if (!pageData) { + pageData = data[key] = { + query: { + SortBy: 'SortName', + SortOrder: 'Ascending', + IncludeItemTypes: 'Playlist', + Recursive: true, + Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete', + StartIndex: 0 + }, + view: libraryBrowser.getSavedView(key) || 'Poster' + }; - if (userSettings.libraryPageSize() > 0) { - pageData.query['Limit'] = userSettings.libraryPageSize(); - } - - pageData.query.ParentId = libraryMenu.getTopParentId(); - libraryBrowser.loadSavedQueryValues(key, pageData.query); + if (userSettings.libraryPageSize() > 0) { + pageData.query['Limit'] = userSettings.libraryPageSize(); } - return pageData; + pageData.query.ParentId = libraryMenu.getTopParentId(); + libraryBrowser.loadSavedQueryValues(key, pageData.query); } - function getQuery(context) { - return getPageData(context).query; + return pageData; + } + + function getQuery(context) { + return getPageData(context).query; + } + + function getSavedQueryKey(context) { + if (!context.savedQueryKey) { + context.savedQueryKey = libraryBrowser.getSavedQueryKey(); } - function getSavedQueryKey(context) { - if (!context.savedQueryKey) { - context.savedQueryKey = libraryBrowser.getSavedQueryKey(); - } + return context.savedQueryKey; + } - return context.savedQueryKey; + function showLoadingMessage() { + loading.show(); + } + + function hideLoadingMessage() { + loading.hide(); + } + + function onViewStyleChange() { + const viewStyle = getPageData(view).view; + const itemsContainer = view.querySelector('.itemsContainer'); + + if ('List' == viewStyle) { + itemsContainer.classList.add('vertical-list'); + itemsContainer.classList.remove('vertical-wrap'); + } else { + itemsContainer.classList.remove('vertical-list'); + itemsContainer.classList.add('vertical-wrap'); } - function showLoadingMessage() { - loading.show(); - } + itemsContainer.innerHTML = ''; + } - function hideLoadingMessage() { - loading.hide(); - } + function reloadItems() { + showLoadingMessage(); + const query = getQuery(view); + const promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query); + // TODO: promise2 is unused, check if necessary. + const promise2 = Dashboard.getCurrentUser(); + Promise.all([promise1, promise2]).then(function (responses) { + const result = responses[0]; + // TODO: Is the scroll necessary? + window.scrollTo(0, 0); + let html = ''; + const viewStyle = getPageData(view).view; + view.querySelector('.listTopPaging').innerHTML = libraryBrowser.getQueryPagingHtml({ + startIndex: query.StartIndex, + limit: query.Limit, + totalRecordCount: result.TotalRecordCount, + viewButton: false, + showLimit: false, + updatePageSizeSetting: false, + addLayoutButton: true, + layouts: 'List,Poster,PosterCard,Thumb,ThumbCard', + currentLayout: viewStyle + }); - function onViewStyleChange() { - var viewStyle = getPageData(view).view; - var itemsContainer = view.querySelector('.itemsContainer'); - - if ('List' == viewStyle) { - itemsContainer.classList.add('vertical-list'); - itemsContainer.classList.remove('vertical-wrap'); - } else { - itemsContainer.classList.remove('vertical-list'); - itemsContainer.classList.add('vertical-wrap'); - } - - itemsContainer.innerHTML = ''; - } - - function reloadItems() { - showLoadingMessage(); - var query = getQuery(view); - var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query); - // TODO: promise2 is unused, check if necessary. - var promise2 = Dashboard.getCurrentUser(); - Promise.all([promise1, promise2]).then(function (responses) { - var result = responses[0]; - // TODO: Is the scroll necessary? - window.scrollTo(0, 0); - var html = ''; - var viewStyle = getPageData(view).view; - view.querySelector('.listTopPaging').innerHTML = libraryBrowser.getQueryPagingHtml({ - startIndex: query.StartIndex, - limit: query.Limit, - totalRecordCount: result.TotalRecordCount, - viewButton: false, - showLimit: false, - updatePageSizeSetting: false, - addLayoutButton: true, - layouts: 'List,Poster,PosterCard,Thumb,ThumbCard', - currentLayout: viewStyle - }); - - if (result.TotalRecordCount) { - if (viewStyle == 'List') { - html = listView.getListViewHtml({ - items: result.Items, - sortBy: query.SortBy - }); - } else if (viewStyle == 'PosterCard') { - html = cardBuilder.getCardsHtml({ - items: result.Items, - shape: 'square', - coverImage: true, - showTitle: true, - cardLayout: true - }); - } else if (viewStyle == 'Thumb') { - html = cardBuilder.getCardsHtml({ - items: result.Items, - shape: 'backdrop', - showTitle: true, - centerText: true, - preferThumb: true, - overlayPlayButton: true - }); - } else if (viewStyle == 'ThumbCard') { - html = cardBuilder.getCardsHtml({ - items: result.Items, - shape: 'backdrop', - showTitle: true, - preferThumb: true, - cardLayout: true - }); - } else { - html = cardBuilder.getCardsHtml({ - items: result.Items, - shape: 'square', - showTitle: true, - coverImage: true, - centerText: true, - overlayPlayButton: true - }); - } - view.querySelector('.noItemsMessage').classList.add('hide'); + if (result.TotalRecordCount) { + if (viewStyle == 'List') { + html = listView.getListViewHtml({ + items: result.Items, + sortBy: query.SortBy + }); + } else if (viewStyle == 'PosterCard') { + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: 'square', + coverImage: true, + showTitle: true, + cardLayout: true + }); + } else if (viewStyle == 'Thumb') { + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: 'backdrop', + showTitle: true, + centerText: true, + preferThumb: true, + overlayPlayButton: true + }); + } else if (viewStyle == 'ThumbCard') { + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: 'backdrop', + showTitle: true, + preferThumb: true, + cardLayout: true + }); } else { - view.querySelector('.noItemsMessage').classList.remove('hide'); - } - - var elem = view.querySelector('.itemsContainer'); - elem.innerHTML = html; - imageLoader.lazyChildren(elem); - var btnNextPage = view.querySelector('.btnNextPage'); - - if (btnNextPage) { - btnNextPage.addEventListener('click', function () { - if (userSettings.libraryPageSize() > 0) { - query.StartIndex += query.Limit; - } - reloadItems(); + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: 'square', + showTitle: true, + coverImage: true, + centerText: true, + overlayPlayButton: true }); } + view.querySelector('.noItemsMessage').classList.add('hide'); + } else { + view.querySelector('.noItemsMessage').classList.remove('hide'); + } - var btnPreviousPage = view.querySelector('.btnPreviousPage'); + const elem = view.querySelector('.itemsContainer'); + elem.innerHTML = html; + imageLoader.lazyChildren(elem); + const btnNextPage = view.querySelector('.btnNextPage'); - if (btnPreviousPage) { - btnPreviousPage.addEventListener('click', function () { - if (userSettings.libraryPageSize() > 0) { - query.StartIndex = Math.max(0, query.StartIndex - query.Limit); - } - reloadItems(); - }); - } - - var btnChangeLayout = view.querySelector('.btnChangeLayout'); - - if (btnChangeLayout) { - btnChangeLayout.addEventListener('layoutchange', function (e) { - var layout = e.detail.viewStyle; - getPageData(view).view = layout; - libraryBrowser.saveViewSetting(getSavedQueryKey(view), layout); - onViewStyleChange(); - reloadItems(); - }); - } - - libraryBrowser.saveQueryValues(getSavedQueryKey(view), query); - hideLoadingMessage(); - }); - } - - var data = {}; - view.addEventListener('viewbeforeshow', function () { - reloadItems(); - }); - view.querySelector('.btnNewPlaylist').addEventListener('click', function () { - require(['playlistEditor'], function (playlistEditor) { - var serverId = ApiClient.serverInfo().Id; - new playlistEditor.showEditor({ - items: [], - serverId: serverId + if (btnNextPage) { + btnNextPage.addEventListener('click', function () { + if (userSettings.libraryPageSize() > 0) { + query.StartIndex += query.Limit; + } + reloadItems(); }); + } + + const btnPreviousPage = view.querySelector('.btnPreviousPage'); + + if (btnPreviousPage) { + btnPreviousPage.addEventListener('click', function () { + if (userSettings.libraryPageSize() > 0) { + query.StartIndex = Math.max(0, query.StartIndex - query.Limit); + } + reloadItems(); + }); + } + + const btnChangeLayout = view.querySelector('.btnChangeLayout'); + + if (btnChangeLayout) { + btnChangeLayout.addEventListener('layoutchange', function (e) { + const layout = e.detail.viewStyle; + getPageData(view).view = layout; + libraryBrowser.saveViewSetting(getSavedQueryKey(view), layout); + onViewStyleChange(); + reloadItems(); + }); + } + + libraryBrowser.saveQueryValues(getSavedQueryKey(view), query); + hideLoadingMessage(); + }); + } + + const data = {}; + view.addEventListener('viewbeforeshow', function () { + reloadItems(); + }); + view.querySelector('.btnNewPlaylist').addEventListener('click', function () { + import('playlistEditor').then(({default: playlistEditor}) => { + const serverId = ApiClient.serverInfo().Id; + new playlistEditor.showEditor({ + items: [], + serverId: serverId }); }); - onViewStyleChange(); - }; -}); + }); + onViewStyleChange(); +} +