Merge pull request #1588 from Camc314/migrate-to-ES6-36

Migration of globalize, editorsidebar and playlists to ES6 modules

package.json

@@ -235,6 +235,12 @@
           "src/scripts/filesystem.js",
           "src/scripts/imagehelper.js",
           "src/scripts/inputManager.js",
+          "src/plugins/backdropScreensaver/plugin.js",
+          "src/components/filterdialog/filterdialog.js",
+          "src/components/fetchhelper.js",
+          "src/scripts/editorsidebar.js",
+          "src/scripts/globalize.js",
+          "src/scripts/playlists.js",
           "src/scripts/keyboardNavigation.js",
           "src/scripts/taskbutton.js",
           "src/scripts/touchHelper.js",

src/components/accessSchedule/accessSchedule.js

@@ -66,7 +66,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);

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);

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);

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++) {

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;
 

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

src/components/homeScreenSettings/homeScreenSettings.js

@@ -464,7 +464,7 @@ import 'emby-checkbox';
                 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));

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);

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);
                     });

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);

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);

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

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;
 

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() {

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);

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);

src/components/metadataEditor/metadataEditor.js

@@ -1064,7 +1064,7 @@ import 'flexStyles';
 
             let html = '';
 
-            html += globalize.translateDocument(template, 'core');
+            html += globalize.translateHtml(template, 'core');
 
             dlg.innerHTML = html;
 
@@ -1104,7 +1104,7 @@ import 'flexStyles';
 
                 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');

src/components/metadataEditor/personEditor.js

@@ -39,7 +39,7 @@ import 'css!./../formdialog';
                 let html = '';
                 let submitted = false;
 
-                html += globalize.translateDocument(template, 'core');
+                html += globalize.translateHtml(template, 'core');
 
                 dlg.innerHTML = html;
 

src/components/playbackSettings/playbackSettings.js

@@ -302,7 +302,7 @@ import 'emby-checkbox';
 
         return import('text!./playbackSettings.template.html').then(({default: template}) => {
 
-            options.element.innerHTML = globalize.translateDocument(template, 'core');
+            options.element.innerHTML = globalize.translateHtml(template, 'core');
 
             options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
 

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;
 

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;
 

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));

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;
 

src/components/search/searchfields.js

@@ -72,7 +72,7 @@ import 'css!./searchfields';
 
         import('text!./searchfields.template.html').then(({default: template}) => {
 
-            let html = globalize.translateDocument(template, 'core');
+            let html = globalize.translateHtml(template, 'core');
 
             if (browser.tizen || browser.orsay) {
                 html = html.replace('<input ', '<input readonly ');

src/components/search/searchresults.js

@@ -611,7 +611,7 @@ import 'emby-button';
                 template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap');
             }
 
-            const html = globalize.translateDocument(template, 'core');
+            const html = globalize.translateHtml(template, 'core');
 
             elem.innerHTML = html;
 

src/components/sortmenu/sortmenu.js

@@ -73,7 +73,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
 
                 html += template;
 
-                dlg.innerHTML = globalize.translateDocument(html, 'core');
+                dlg.innerHTML = globalize.translateHtml(html, 'core');
 
                 fillSortBy(dlg, options.sortOptions);
                 initEditor(dlg, options.settings);

src/components/subtitleeditor/subtitleeditor.js

@@ -448,7 +448,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
             dlg.classList.add('formDialog');
             dlg.classList.add('subtitleEditorDialog');
 
-            dlg.innerHTML = globalize.translateDocument(template, 'core');
+            dlg.innerHTML = globalize.translateHtml(template, 'core');
 
             dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
 

src/components/subtitlesettings/subtitlesettings.js

@@ -133,7 +133,7 @@ function embed(options, self) {
     import('text!./subtitlesettings.template.html').then(({default: template}) => {
 
         options.element.classList.add('subtitlesettings');
-        options.element.innerHTML = globalize.translateDocument(template, 'core');
+        options.element.innerHTML = globalize.translateHtml(template, 'core');
 
         options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self));
 

src/components/viewSettings/viewSettings.js

@@ -84,7 +84,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
 
                 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++) {

src/controllers/livetvguideprovider.js

@@ -17,7 +17,7 @@ define(['events', 'loading', 'globalize'], function (events, loading, globalize)
 
     function loadTemplate(page, type, providerId) {
         require(['text!./components/tvproviders/' + type + '.template.html'], function (html) {
-            page.querySelector('.providerTemplate').innerHTML = globalize.translateDocument(html);
+            page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html);
             init(page, type, providerId);
         });
     }

src/scripts/editorsidebar.js

@@ -1,5 +1,9 @@
-define(['datetime', 'jQuery', 'globalize', 'material-icons'], function (datetime, $, globalize) {
+import datetime from 'datetime';
-    'use strict';
+import $ from 'jQuery';
+import globalize from 'globalize';
+import 'material-icons';
+
+/* eslint-disable indent */
 
     function getNode(item, folderState, selected) {
         var htmlName = getNodeInnerHtml(item);
@@ -179,7 +183,7 @@ define(['datetime', 'jQuery', 'globalize', 'material-icons'], function (datetime
     }
 
     function initializeTree(page, currentUser, openItems, selectedId) {
-        require(['jstree'], function () {
+        import('jstree').then(() => {
             initializeTreeInternal(page, currentUser, openItems, selectedId);
         });
     }
@@ -299,7 +303,7 @@ define(['datetime', 'jQuery', 'globalize', 'material-icons'], function (datetime
     $(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) {
@@ -331,4 +335,5 @@ define(['datetime', 'jQuery', 'globalize', 'material-icons'], function (datetime
         getCurrentItemId: getCurrentItemId,
         setCurrentItemId: setCurrentItemId
     };
-});
+
+/* eslint-enable indent */

src/scripts/globalize.js

@@ -1,21 +1,24 @@
-define(['userSettings', 'events'], function (userSettings, events) {
+import * as userSettings from 'userSettings';
-    'use strict';
+import events from 'events';
-    var fallbackCulture = 'en-us';
 
-    var allTranslations = {};
+/* eslint-disable indent */
-    var currentCulture;
-    var currentDateTimeCulture;
 
-    function getCurrentLocale() {
+    const fallbackCulture = 'en-us';
+
+    const allTranslations = {};
+    let currentCulture;
+    let currentDateTimeCulture;
+
+    export function getCurrentLocale() {
         return currentCulture;
     }
 
-    function getCurrentDateTimeLocale() {
+    export function getCurrentDateTimeLocale() {
         return currentDateTimeCulture;
     }
 
     function getDefaultLanguage() {
-        var culture = document.documentElement.getAttribute('data-culture');
+        const culture = document.documentElement.getAttribute('data-culture');
         if (culture) {
             return culture;
         }
@@ -33,8 +36,8 @@ define(['userSettings', 'events'], function (userSettings, events) {
         return fallbackCulture;
     }
 
-    function updateCurrentCulture() {
+    export function updateCurrentCulture() {
-        var culture;
+        let culture;
         try {
             culture = userSettings.language();
         } catch (err) {
@@ -44,7 +47,7 @@ define(['userSettings', 'events'], function (userSettings, events) {
 
         currentCulture = normalizeLocaleName(culture);
 
-        var dateTimeCulture;
+        let dateTimeCulture;
         try {
             dateTimeCulture = userSettings.dateTimeLocale();
         } catch (err) {
@@ -60,11 +63,11 @@ define(['userSettings', 'events'], function (userSettings, events) {
     }
 
     function ensureTranslations(culture) {
-        for (var i in allTranslations) {
+        for (let i in allTranslations) {
             ensureTranslation(allTranslations[i], culture);
         }
         if (culture !== fallbackCulture) {
-            for (var i in allTranslations) {
+            for (let i in allTranslations) {
                 ensureTranslation(allTranslations[i], fallbackCulture);
             }
         }
@@ -85,14 +88,14 @@ define(['userSettings', 'events'], function (userSettings, events) {
         culture = culture.replace('_', '-');
 
         // convert de-DE to de
-        var parts = culture.split('-');
+        const parts = culture.split('-');
         if (parts.length === 2) {
             if (parts[0].toLowerCase() === parts[1].toLowerCase()) {
                 culture = parts[0].toLowerCase();
             }
         }
 
-        var lower = culture.toLowerCase();
+        const lower = culture.toLowerCase();
         if (lower === 'ca-es') {
             return 'ca';
         }
@@ -110,7 +113,7 @@ define(['userSettings', 'events'], function (userSettings, events) {
             module = defaultModule();
         }
 
-        var translations = allTranslations[module];
+        const translations = allTranslations[module];
         if (!translations) {
             return {};
         }
@@ -118,17 +121,17 @@ define(['userSettings', 'events'], function (userSettings, events) {
         return translations.dictionaries[locale];
     }
 
-    function register(options) {
+    export function register(options) {
         allTranslations[options.name] = {
             translations: options.strings || options.translations,
             dictionaries: {}
         };
     }
 
-    function loadStrings(options) {
+    export function loadStrings(options) {
-        var locale = getCurrentLocale();
+        const locale = getCurrentLocale();
-        var promises = [];
+        const promises = [];
-        var optionsName;
+        let optionsName;
         if (typeof options === 'string') {
             optionsName = options;
         } else {
@@ -140,10 +143,10 @@ define(['userSettings', 'events'], function (userSettings, events) {
         return Promise.all(promises);
     }
 
-    var cacheParam = new Date().getTime();
+    const cacheParam = new Date().getTime();
     function loadTranslation(translations, lang) {
         lang = normalizeLocaleName(lang);
-        var filtered = translations.filter(function (t) {
+        let filtered = translations.filter(function (t) {
             return normalizeLocaleName(t.lang) === lang;
         });
 
@@ -159,12 +162,12 @@ define(['userSettings', 'events'], function (userSettings, events) {
                 return;
             }
 
-            var url = filtered[0].path;
+            let url = filtered[0].path;
 
             url += url.indexOf('?') === -1 ? '?' : '&';
             url += 'v=' + cacheParam;
 
-            var xhr = new XMLHttpRequest();
+            const xhr = new XMLHttpRequest();
             xhr.open('GET', url, true);
 
             xhr.onload = function (e) {
@@ -183,8 +186,8 @@ define(['userSettings', 'events'], function (userSettings, events) {
     }
 
     function translateKey(key) {
-        var parts = key.split('#');
+        const parts = key.split('#');
-        var module;
+        let module;
 
         if (parts.length > 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) {
+    export function translate(key) {
-        var val = translateKey(key);
+        let val = translateKey(key);
-        for (var i = 1; i < arguments.length; i++) {
+        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);
+        const key = html.substring(startIndex, endIndex);
-        var val = translateKeyFromModule(key, module);
+        const val = translateKeyFromModule(key, module);
 
         html = html.replace('${' + key + '}', val);
         return translateHtml(html, module);
     }
 
-    var _defaultModule;
+    let _defaultModule;
-    function defaultModule(val) {
+    export function defaultModule(val) {
         if (val) {
             _defaultModule = val;
         }
@@ -259,16 +262,15 @@ define(['userSettings', 'events'], function (userSettings, events) {
         }
     });
 
-    return {
+export default {
-        getString: translate,
+    translate,
-        translate: translate,
+    translateHtml,
-        translateDocument: translateHtml,
+    loadStrings,
-        translateHtml: translateHtml,
+    defaultModule,
-        loadStrings: loadStrings,
+    getCurrentLocale,
-        defaultModule: defaultModule,
+    getCurrentDateTimeLocale,
-        getCurrentLocale: getCurrentLocale,
+    register,
-        getCurrentDateTimeLocale: getCurrentDateTimeLocale,
+    updateCurrentCulture
-        register: register,
+};
-        updateCurrentCulture: updateCurrentCulture
+
-    };
+/* eslint-enable indent */
-});

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) {
+import loading from 'loading';
-    'use strict';
+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) {
+export default function (view, params) {
-        function getPageData(context) {
+    function getPageData(context) {
-            var key = getSavedQueryKey(context);
+        const key = getSavedQueryKey(context);
-            var pageData = data[key];
+        let pageData = data[key];
 
-            if (!pageData) {
+        if (!pageData) {
-                pageData = data[key] = {
+            pageData = data[key] = {
-                    query: {
+                query: {
-                        SortBy: 'SortName',
+                    SortBy: 'SortName',
-                        SortOrder: 'Ascending',
+                    SortOrder: 'Ascending',
-                        IncludeItemTypes: 'Playlist',
+                    IncludeItemTypes: 'Playlist',
-                        Recursive: true,
+                    Recursive: true,
-                        Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete',
+                    Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete',
-                        StartIndex: 0
+                    StartIndex: 0
-                    },
+                },
-                    view: libraryBrowser.getSavedView(key) || 'Poster'
+                view: libraryBrowser.getSavedView(key) || 'Poster'
-                };
+            };
 
-                if (userSettings.libraryPageSize() > 0) {
+            if (userSettings.libraryPageSize() > 0) {
-                    pageData.query['Limit'] = userSettings.libraryPageSize();
+                pageData.query['Limit'] = userSettings.libraryPageSize();
-                }
-
-                pageData.query.ParentId = libraryMenu.getTopParentId();
-                libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
 
-            return pageData;
+            pageData.query.ParentId = libraryMenu.getTopParentId();
+            libraryBrowser.loadSavedQueryValues(key, pageData.query);
         }
 
-        function getQuery(context) {
+        return pageData;
-            return getPageData(context).query;
+    }
+
+    function getQuery(context) {
+        return getPageData(context).query;
+    }
+
+    function getSavedQueryKey(context) {
+        if (!context.savedQueryKey) {
+            context.savedQueryKey = libraryBrowser.getSavedQueryKey();
         }
 
-        function getSavedQueryKey(context) {
+        return context.savedQueryKey;
-            if (!context.savedQueryKey) {
+    }
-                context.savedQueryKey = libraryBrowser.getSavedQueryKey();
-            }
 
-            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() {
+        itemsContainer.innerHTML = '';
-            loading.show();
+    }
-        }
 
-        function hideLoadingMessage() {
+    function reloadItems() {
-            loading.hide();
+        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() {
+            if (result.TotalRecordCount) {
-            var viewStyle = getPageData(view).view;
+                if (viewStyle == 'List') {
-            var itemsContainer = view.querySelector('.itemsContainer');
+                    html = listView.getListViewHtml({
-
+                        items: result.Items,
-            if ('List' == viewStyle) {
+                        sortBy: query.SortBy
-                itemsContainer.classList.add('vertical-list');
+                    });
-                itemsContainer.classList.remove('vertical-wrap');
+                } else if (viewStyle == 'PosterCard') {
-            } else {
+                    html = cardBuilder.getCardsHtml({
-                itemsContainer.classList.remove('vertical-list');
+                        items: result.Items,
-                itemsContainer.classList.add('vertical-wrap');
+                        shape: 'square',
-            }
+                        coverImage: true,
-
+                        showTitle: true,
-            itemsContainer.innerHTML = '';
+                        cardLayout: true
-        }
+                    });
-
+                } else if (viewStyle == 'Thumb') {
-        function reloadItems() {
+                    html = cardBuilder.getCardsHtml({
-            showLoadingMessage();
+                        items: result.Items,
-            var query = getQuery(view);
+                        shape: 'backdrop',
-            var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
+                        showTitle: true,
-            // TODO: promise2 is unused, check if necessary.
+                        centerText: true,
-            var promise2 = Dashboard.getCurrentUser();
+                        preferThumb: true,
-            Promise.all([promise1, promise2]).then(function (responses) {
+                        overlayPlayButton: true
-                var result = responses[0];
+                    });
-                // TODO: Is the scroll necessary?
+                } else if (viewStyle == 'ThumbCard') {
-                window.scrollTo(0, 0);
+                    html = cardBuilder.getCardsHtml({
-                var html = '';
+                        items: result.Items,
-                var viewStyle = getPageData(view).view;
+                        shape: 'backdrop',
-                view.querySelector('.listTopPaging').innerHTML = libraryBrowser.getQueryPagingHtml({
+                        showTitle: true,
-                    startIndex: query.StartIndex,
+                        preferThumb: true,
-                    limit: query.Limit,
+                        cardLayout: true
-                    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');
                 } else {
-                    view.querySelector('.noItemsMessage').classList.remove('hide');
+                    html = cardBuilder.getCardsHtml({
-                }
+                        items: result.Items,
-
+                        shape: 'square',
-                var elem = view.querySelector('.itemsContainer');
+                        showTitle: true,
-                elem.innerHTML = html;
+                        coverImage: true,
-                imageLoader.lazyChildren(elem);
+                        centerText: true,
-                var btnNextPage = view.querySelector('.btnNextPage');
+                        overlayPlayButton: true
-
-                if (btnNextPage) {
-                    btnNextPage.addEventListener('click', function () {
-                        if (userSettings.libraryPageSize() > 0) {
-                            query.StartIndex += query.Limit;
-                        }
-                        reloadItems();
                     });
                 }
+                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) {
+            if (btnNextPage) {
-                    btnPreviousPage.addEventListener('click', function () {
+                btnNextPage.addEventListener('click', function () {
-                        if (userSettings.libraryPageSize() > 0) {
+                    if (userSettings.libraryPageSize() > 0) {
-                            query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                        query.StartIndex += query.Limit;
-                        }
+                    }
-                        reloadItems();
+                    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
                 });
+            }
+
+            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();
-});
+}
+

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