Merge remote-tracking branch 'upstream/master' into site-js-prepare-es6

.eslintrc.js

@@ -44,6 +44,7 @@ module.exports = {
         'no-unused-vars': ['error', { 'vars': 'all', 'args': 'none', 'ignoreRestSiblings': true }],
         'one-var': ['error', 'never'],
         'padded-blocks': ['error', 'never'],
+        //'prefer-const': ['error', {'destructuring': 'all'}],
         'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
         'semi': ['error'],
         'space-before-blocks': ['error'],

package.json

@@ -6,8 +6,8 @@
   "license": "GPL-2.0-or-later",
   "devDependencies": {
     "@babel/core": "^7.11.1",
-    "@babel/eslint-parser": "^7.11.0",
+    "@babel/eslint-parser": "^7.11.3",
-    "@babel/eslint-plugin": "^7.11.0",
+    "@babel/eslint-plugin": "^7.11.3",
     "@babel/plugin-proposal-class-properties": "^7.10.1",
     "@babel/plugin-proposal-private-methods": "^7.10.1",
     "@babel/plugin-transform-modules-amd": "^7.10.5",
@@ -20,7 +20,7 @@
     "css-loader": "^4.2.1",
     "cssnano": "^4.1.10",
     "del": "^5.1.0",
-    "eslint": "^7.6.0",
+    "eslint": "^7.7.0",
     "eslint-plugin-compat": "^3.5.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.21.2",
@@ -95,6 +95,8 @@
           "src/components/alert.js",
           "src/components/alphaPicker/alphaPicker.js",
           "src/components/appFooter/appFooter.js",
+          "src/components/apphost.js",
+          "src/components/appRouter.js",
           "src/components/autoFocuser.js",
           "src/components/backdrop/backdrop.js",
           "src/components/cardbuilder/cardBuilder.js",
@@ -110,8 +112,11 @@
           "src/components/favoriteitems.js",
           "src/components/fetchhelper.js",
           "src/components/filterdialog/filterdialog.js",
+          "src/components/filtermenu/filtermenu.js",
           "src/components/focusManager.js",
           "src/components/groupedcards.js",
+          "src/components/guide/guide.js",
+          "src/components/guide/guide-settings.js",
           "src/components/homeScreenSettings/homeScreenSettings.js",
           "src/components/homesections/homesections.js",
           "src/components/htmlMediaHelper.js",
@@ -125,6 +130,8 @@
           "src/components/itemHelper.js",
           "src/components/itemidentifier/itemidentifier.js",
           "src/components/itemMediaInfo/itemMediaInfo.js",
+          "src/components/itemsrefresher.js",
+          "src/components/layoutManager.js",
           "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
           "src/components/libraryoptionseditor/libraryoptionseditor.js",
           "src/components/listview/listview.js",
@@ -136,6 +143,7 @@
           "src/components/metadataEditor/metadataEditor.js",
           "src/components/metadataEditor/personEditor.js",
           "src/components/multiSelect/multiSelect.js",
+          "src/components/notifications/notifications.js",
           "src/components/nowPlayingBar/nowPlayingBar.js",
           "src/components/playback/brightnessosd.js",
           "src/components/playback/mediasession.js",
@@ -153,28 +161,49 @@
           "src/components/playlisteditor/playlisteditor.js",
           "src/components/playmenu.js",
           "src/components/prompt/prompt.js",
+          "src/components/recordingcreator/recordingbutton.js",
+          "src/components/recordingcreator/recordingcreator.js",
           "src/components/recordingcreator/seriesrecordingeditor.js",
           "src/components/recordingcreator/recordinghelper.js",
           "src/components/refreshdialog/refreshdialog.js",
+          "src/components/recordingcreator/recordingeditor.js",
+          "src/components/recordingcreator/recordingfields.js",
+          "src/components/qualityOptions.js",
+          "src/components/remotecontrol/remotecontrol.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
+          "src/plugins/experimentalWarnings/plugin.js",
+          "src/plugins/sessionPlayer/plugin.js",
+          "src/plugins/htmlAudioPlayer/plugin.js",
+          "src/plugins/chromecastPlayer/plugin.js",
+          "src/components/slideshow/slideshow.js",
+          "src/components/sortmenu/sortmenu.js",
           "src/plugins/htmlVideoPlayer/plugin.js",
+          "src/plugins/logoScreensaver/plugin.js",
+          "src/plugins/playAccessValidation/plugin.js",
           "src/components/search/searchfields.js",
           "src/components/search/searchresults.js",
           "src/components/settingshelper.js",
           "src/components/shortcuts.js",
+          "src/components/subtitleeditor/subtitleeditor.js",
+          "src/components/subtitlesync/subtitlesync.js",
           "src/components/subtitlesettings/subtitleappearancehelper.js",
           "src/components/subtitlesettings/subtitlesettings.js",
           "src/components/syncPlay/groupSelectionMenu.js",
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
+          "src/components/themeMediaPlayer.js",
+          "src/components/tabbedview/tabbedview.js",
           "src/components/viewManager/viewManager.js",
           "src/components/tvproviders/schedulesdirect.js",
           "src/components/tvproviders/xmltv.js",
           "src/components/toast/toast.js",
+          "src/components/tunerPicker.js",
           "src/components/upnextdialog/upnextdialog.js",
+          "src/components/userdatabuttons/userdatabuttons.js",
           "src/components/viewContainer.js",
+          "src/components/viewSettings/viewSettings.js",
           "src/components/castSenderApi.js",
           "src/controllers/session/addServer/index.js",
           "src/controllers/session/forgotPassword/index.js",
@@ -198,13 +227,16 @@
           "src/controllers/music/musicplaylists.js",
           "src/controllers/music/musicrecommended.js",
           "src/controllers/music/songs.js",
-          "src/controllers/dashboard/mediaLibrary.js",
+          "src/controllers/dashboard/library.js",
           "src/controllers/dashboard/metadataImages.js",
           "src/controllers/dashboard/metadatanfo.js",
           "src/controllers/dashboard/networking.js",
-          "src/controllers/dashboard/notifications/notification.js",
+          "src/controllers/dashboard/notifications/notification/index.js",
-          "src/controllers/dashboard/notifications/notifications.js",
+          "src/controllers/dashboard/notifications/notifications/index.js",
           "src/controllers/dashboard/playback.js",
+          "src/controllers/dashboard/plugins/add/index.js",
+          "src/controllers/dashboard/plugins/installed/index.js",
+          "src/controllers/dashboard/plugins/available/index.js",
           "src/controllers/dashboard/plugins/repositories/index.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtask.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtasks.js",
@@ -216,6 +248,7 @@
           "src/controllers/dashboard/users/userparentalcontrol.js",
           "src/controllers/dashboard/users/userpasswordpage.js",
           "src/controllers/dashboard/users/userprofilespage.js",
+          "src/controllers/home.js",
           "src/controllers/list.js",
           "src/controllers/edititemmetadata.js",
           "src/controllers/favorites.js",
@@ -231,7 +264,9 @@
           "src/controllers/playback/queue/index.js",
           "src/controllers/playback/video/index.js",
           "src/controllers/searchpage.js",
+          "src/controllers/livetv/livetvguide.js",
           "src/controllers/livetvtuner.js",
+          "src/controllers/livetv/livetvsuggested.js",
           "src/controllers/livetvstatus.js",
           "src/controllers/livetvguideprovider.js",
           "src/controllers/livetvsettings.js",
@@ -298,11 +333,14 @@
           "src/scripts/filesystem.js",
           "src/scripts/globalize.js",
           "src/scripts/imagehelper.js",
+          "src/scripts/itembynamedetailpage.js",
           "src/scripts/inputManager.js",
           "src/scripts/autoThemes.js",
           "src/scripts/themeManager.js",
           "src/scripts/keyboardNavigation.js",
+          "src/scripts/libraryMenu.js",
           "src/scripts/libraryBrowser.js",
+          "src/scripts/livetvcomponents.js",
           "src/scripts/mouseManager.js",
           "src/scripts/multiDownload.js",
           "src/scripts/playlists.js",

src/assets/css/videoosd.css

@@ -7,7 +7,6 @@
 }
 
 .osdPoster img,
-.pageContainer,
 .videoOsdBottom {
     bottom: 0;
     left: 0;
@@ -248,11 +247,6 @@
     animation: spin 4s linear infinite;
 }
 
-.pageContainer {
-    top: 0;
-    position: fixed;
-}
-
 @media all and (max-width: 30em) {
     .btnFastForward,
     .btnRewind,

src/bundle.js

@@ -2,159 +2,159 @@
  * require.js module definitions bundled by webpack
  */
 // Use define from require.js not webpack's define
-var _define = window.define;
+const _define = window.define;
 
 // fetch
-var fetch = require('whatwg-fetch');
+const fetch = require('whatwg-fetch');
 _define('fetch', function() {
     return fetch;
 });
 
 // Blurhash
-var blurhash = require('blurhash');
+const blurhash = require('blurhash');
 _define('blurhash', function() {
     return blurhash;
 });
 
 // query-string
-var query = require('query-string');
+const query = require('query-string');
 _define('queryString', function() {
     return query;
 });
 
 // flvjs
-var flvjs = require('flv.js/dist/flv').default;
+const flvjs = require('flv.js/dist/flv').default;
 _define('flvjs', function() {
     return flvjs;
 });
 
 // jstree
-var jstree = require('jstree');
+const jstree = require('jstree');
 require('jstree/dist/themes/default/style.css');
 _define('jstree', function() {
     return jstree;
 });
 
 // jquery
-var jquery = require('jquery');
+const jquery = require('jquery');
 _define('jQuery', function() {
     return jquery;
 });
 
 // hlsjs
-var hlsjs = require('hls.js');
+const hlsjs = require('hls.js');
 _define('hlsjs', function() {
     return hlsjs;
 });
 
 // howler
-var howler = require('howler');
+const howler = require('howler');
 _define('howler', function() {
     return howler;
 });
 
 // resize-observer-polyfill
-var resize = require('resize-observer-polyfill').default;
+const resize = require('resize-observer-polyfill').default;
 _define('resize-observer-polyfill', function() {
     return resize;
 });
 
 // swiper
-var swiper = require('swiper/js/swiper');
+const swiper = require('swiper/js/swiper');
 require('swiper/css/swiper.min.css');
 _define('swiper', function() {
     return swiper;
 });
 
 // sortable
-var sortable = require('sortablejs').default;
+const sortable = require('sortablejs').default;
 _define('sortable', function() {
     return sortable;
 });
 
 // webcomponents
-var webcomponents = require('webcomponents.js/webcomponents-lite');
+const webcomponents = require('webcomponents.js/webcomponents-lite');
 _define('webcomponents', function() {
     return webcomponents;
 });
 
 // libass-wasm
-var libassWasm = require('libass-wasm');
+const libassWasm = require('libass-wasm');
 _define('JavascriptSubtitlesOctopus', function() {
     return libassWasm;
 });
 
 // material-icons
-var materialIcons = require('material-design-icons-iconfont/dist/material-design-icons.css');
+const materialIcons = require('material-design-icons-iconfont/dist/material-design-icons.css');
 _define('material-icons', function() {
     return materialIcons;
 });
 
 // noto font
-var noto = require('jellyfin-noto');
+const noto = require('jellyfin-noto');
 _define('jellyfin-noto', function () {
     return noto;
 });
 
-var epubjs = require('epubjs');
+const epubjs = require('epubjs');
 _define('epubjs', function () {
     return epubjs;
 });
 
 // page.js
-var page = require('page');
+const page = require('page');
 _define('page', function() {
     return page;
 });
 
 // core-js
-var polyfill = require('@babel/polyfill/dist/polyfill');
+const polyfill = require('@babel/polyfill/dist/polyfill');
 _define('polyfill', function () {
     return polyfill;
 });
 
 // domtokenlist-shim
-var classlist = require('classlist.js');
+const classlist = require('classlist.js');
 _define('classlist-polyfill', function () {
     return classlist;
 });
 
 // Date-FNS
-var dateFns = require('date-fns');
+const dateFns = require('date-fns');
 _define('date-fns', function () {
     return dateFns;
 });
 
-var dateFnsLocale = require('date-fns/locale');
+const dateFnsLocale = require('date-fns/locale');
 _define('date-fns/locale', function () {
     return dateFnsLocale;
 });
 
-var fast_text_encoding = require('fast-text-encoding');
+const fast_text_encoding = require('fast-text-encoding');
 _define('fast-text-encoding', function () {
     return fast_text_encoding;
 });
 
 // intersection-observer
-var intersection_observer = require('intersection-observer');
+const intersection_observer = require('intersection-observer');
 _define('intersection-observer', function () {
     return intersection_observer;
 });
 
 // screenfull
-var screenfull = require('screenfull');
+const screenfull = require('screenfull');
 _define('screenfull', function () {
     return screenfull;
 });
 
 // headroom.js
-var headroom = require('headroom.js/dist/headroom');
+const headroom = require('headroom.js/dist/headroom');
 _define('headroom', function () {
     return headroom;
 });
 
 // apiclient
-var apiclient = require('jellyfin-apiclient');
+const apiclient = require('jellyfin-apiclient');
 
 _define('apiclient', function () {
     return apiclient.ApiClient;

src/components/accessSchedule/accessSchedule.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" title="${LabelPrevious}" tabindex="-1">
+    <button is="paper-icon-button-light" class="btnCancel autoSize" title="${Previous}" tabindex="-1">
         <span class="material-icons arrow_back" aria-hidden="true"></span>
     </button>
     <h3 class="formDialogHeaderTitle">
@@ -12,13 +12,13 @@
 
             <div class="selectContainer">
                 <select is="emby-select" id="selectDay" label="${LabelAccessDay}">
-                    <option value="Sunday">${OptionSunday}</option>
+                    <option value="Sunday">${Sunday}</option>
-                    <option value="Monday">${OptionMonday}</option>
+                    <option value="Monday">${Monday}</option>
-                    <option value="Tuesday">${OptionTuesday}</option>
+                    <option value="Tuesday">${Tuesday}</option>
-                    <option value="Wednesday">${OptionWednesday}</option>
+                    <option value="Wednesday">${Wednesday}</option>
-                    <option value="Thursday">${OptionThursday}</option>
+                    <option value="Thursday">${Thursday}</option>
-                    <option value="Friday">${OptionFriday}</option>
+                    <option value="Friday">${Friday}</option>
-                    <option value="Saturday">${OptionSaturday}</option>
+                    <option value="Saturday">${Saturday}</option>
                     <option value="Everyday">${OptionEveryday}</option>
                     <option value="Weekday">${OptionWeekdays}</option>
                     <option value="Weekend">${OptionWeekends}</option>
@@ -33,7 +33,7 @@
 
             <div class="formDialogFooter">
                 <button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">
-                    <span>${ButtonAdd}</span>
+                    <span>${Add}</span>
                 </button>
             </div>
         </form>

src/components/actionSheet/actionSheet.js

@@ -9,14 +9,14 @@ import 'scrollStyles';
 import 'listViewStyle';
 
 function getOffsets(elems) {
-    let results = [];
+    const results = [];
 
     if (!document) {
         return results;
     }
 
     for (const elem of elems) {
-        let box = elem.getBoundingClientRect();
+        const box = elem.getBoundingClientRect();
 
         results.push({
             top: box.top,
@@ -34,7 +34,7 @@ function getPosition(options, dlg) {
     const windowHeight = windowSize.innerHeight;
     const windowWidth = windowSize.innerWidth;
 
-    let pos = getOffsets([options.positionTo])[0];
+    const pos = getOffsets([options.positionTo])[0];
 
     if (options.positionY !== 'top') {
         pos.top += (pos.height || 0) / 2;
@@ -82,7 +82,7 @@ export function show(options) {
     // positionTo
     // showCancel
     // title
-    let dialogOptions = {
+    const dialogOptions = {
         removeOnClose: true,
         enableHistory: options.enableHistory,
         scrollY: false
@@ -103,7 +103,7 @@ export function show(options) {
         dialogOptions.autoFocus = false;
     }
 
-    let dlg = dialogHelper.createDialog(dialogOptions);
+    const dlg = dialogHelper.createDialog(dialogOptions);
 
     if (isFullscreen) {
         dlg.classList.add('actionsheet-fullscreen');
@@ -129,7 +129,7 @@ export function show(options) {
     }
 
     let renderIcon = false;
-    let icons = [];
+    const icons = [];
     let itemIcon;
     for (const item of options.items) {
         itemIcon = item.icon || (item.selected ? 'check' : null);
@@ -241,7 +241,7 @@ export function show(options) {
         centerFocus(dlg.querySelector('.actionSheetScroller'), false, true);
     }
 
-    let btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet');
+    const btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet');
     if (btnCloseActionSheet) {
         btnCloseActionSheet.addEventListener('click', function () {
             dialogHelper.close(dlg);

src/components/apphost.js

@@ -1,447 +1,412 @@
-define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'globalize'], function (appSettings, browser, events, htmlMediaHelper, webSettings, globalize) {
+import appSettings from 'appSettings';
-    'use strict';
+import browser from 'browser';
+import events from 'events';
+import * as htmlMediaHelper from 'htmlMediaHelper';
+import * as webSettings from 'webSettings';
+import globalize from 'globalize';
 
-    browser = browser.default || browser;
+function getBaseProfileOptions(item) {
+    const disableHlsVideoAudioCodecs = [];
 
-    function getBaseProfileOptions(item) {
+    if (item && htmlMediaHelper.enableHlsJsPlayer(item.RunTimeTicks, item.MediaType)) {
-        var disableHlsVideoAudioCodecs = [];
+        if (browser.edge) {
+            disableHlsVideoAudioCodecs.push('mp3');
+        }
 
-        if (item && htmlMediaHelper.enableHlsJsPlayer(item.RunTimeTicks, item.MediaType)) {
+        disableHlsVideoAudioCodecs.push('ac3');
-            if (browser.edge) {
+        disableHlsVideoAudioCodecs.push('eac3');
-                disableHlsVideoAudioCodecs.push('mp3');
+        disableHlsVideoAudioCodecs.push('opus');
+    }
+
+    return {
+        enableMkvProgressive: false,
+        disableHlsVideoAudioCodecs: disableHlsVideoAudioCodecs
+    };
+}
+
+function getDeviceProfile(item, options = {}) {
+    return new Promise(function (resolve) {
+        import('browserdeviceprofile').then(({default: profileBuilder}) => {
+            let profile;
+
+            if (window.NativeShell) {
+                profile = window.NativeShell.AppHost.getDeviceProfile(profileBuilder);
+            } else {
+                const builderOpts = getBaseProfileOptions(item);
+                builderOpts.enableSsaRender = (item && !options.isRetry && appSettings.get('subtitleburnin') !== 'allcomplexformats');
+                profile = profileBuilder(builderOpts);
             }
 
-            disableHlsVideoAudioCodecs.push('ac3');
+            resolve(profile);
-            disableHlsVideoAudioCodecs.push('eac3');
-            disableHlsVideoAudioCodecs.push('opus');
-        }
-
-        return {
-            enableMkvProgressive: false,
-            disableHlsVideoAudioCodecs: disableHlsVideoAudioCodecs
-        };
-    }
-
-    function getDeviceProfileForWindowsUwp(item) {
-        return new Promise(function (resolve, reject) {
-            require(['browserdeviceprofile', 'environments/windows-uwp/mediacaps'], function (profileBuilder, uwpMediaCaps) {
-                var profileOptions = getBaseProfileOptions(item);
-                profileOptions.supportsDts = uwpMediaCaps.supportsDTS();
-                profileOptions.supportsTrueHd = uwpMediaCaps.supportsDolby();
-                profileOptions.audioChannels = uwpMediaCaps.getAudioChannels();
-                resolve(profileBuilder(profileOptions));
-            });
         });
+    });
+}
+
+function escapeRegExp(str) {
+    return str.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1');
+}
+
+function replaceAll(originalString, strReplace, strWith) {
+    const strReplace2 = escapeRegExp(strReplace);
+    const reg = new RegExp(strReplace2, 'ig');
+    return originalString.replace(reg, strWith);
+}
+
+function generateDeviceId() {
+    const keys = [];
+
+    if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), self.btoa) {
+        const result = replaceAll(btoa(keys.join('|')), '=', '1');
+        return Promise.resolve(result);
     }
 
-    function getDeviceProfile(item, options) {
+    return Promise.resolve(new Date().getTime());
-        options = options || {};
+}
 
-        if (self.Windows) {
+function getDeviceId() {
-            return getDeviceProfileForWindowsUwp(item);
+    const key = '_deviceId2';
-        }
+    const deviceId = appSettings.get(key);
 
-        return new Promise(function (resolve) {
+    if (deviceId) {
-            require(['browserdeviceprofile'], function (profileBuilder) {
+        return Promise.resolve(deviceId);
-                var profile;
-
-                if (window.NativeShell) {
-                    profile = window.NativeShell.AppHost.getDeviceProfile(profileBuilder);
-                } else {
-                    var builderOpts = getBaseProfileOptions(item);
-                    builderOpts.enableSsaRender = (item && !options.isRetry && appSettings.get('subtitleburnin') !== 'allcomplexformats');
-                    profile = profileBuilder(builderOpts);
-                }
-
-                resolve(profile);
-            });
-        });
     }
 
-    function escapeRegExp(str) {
+    return generateDeviceId().then(function (deviceId) {
-        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1');
+        appSettings.set(key, deviceId);
+        return deviceId;
+    });
+}
+
+function getDeviceName() {
+    var deviceName;
+    if (browser.tizen) {
+        deviceName = 'Samsung Smart TV';
+    } else if (browser.web0s) {
+        deviceName = 'LG Smart TV';
+    } else if (browser.operaTv) {
+        deviceName = 'Opera TV';
+    } else if (browser.xboxOne) {
+        deviceName = 'Xbox One';
+    } else if (browser.ps4) {
+        deviceName = 'Sony PS4';
+    } else if (browser.chrome) {
+        deviceName = 'Chrome';
+    } else if (browser.edgeChromium) {
+        deviceName = 'Edge Chromium';
+    } else if (browser.edge) {
+        deviceName = 'Edge';
+    } else if (browser.firefox) {
+        deviceName = 'Firefox';
+    } else if (browser.opera) {
+        deviceName = 'Opera';
+    } else if (browser.safari) {
+        deviceName = 'Safari';
+    } else {
+        deviceName = 'Web Browser';
     }
 
-    function replaceAll(originalString, strReplace, strWith) {
+    if (browser.ipad) {
-        var strReplace2 = escapeRegExp(strReplace);
+        deviceName += ' iPad';
-        var reg = new RegExp(strReplace2, 'ig');
+    } else if (browser.iphone) {
-        return originalString.replace(reg, strWith);
+        deviceName += ' iPhone';
+    } else if (browser.android) {
+        deviceName += ' Android';
     }
 
-    function generateDeviceId() {
+    return deviceName;
-        var keys = [];
+}
 
-        if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), self.btoa) {
+function supportsVoiceInput() {
-            var result = replaceAll(btoa(keys.join('|')), '=', '1');
+    if (!browser.tv) {
-            return Promise.resolve(result);
+        return window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.oSpeechRecognition || window.msSpeechRecognition;
-        }
-
-        return Promise.resolve(new Date().getTime());
     }
 
-    function getDeviceId() {
+    return false;
-        var key = '_deviceId2';
+}
-        var deviceId = appSettings.get(key);
-
-        if (deviceId) {
-            return Promise.resolve(deviceId);
-        }
-
-        return generateDeviceId().then(function (deviceId) {
-            appSettings.set(key, deviceId);
-            return deviceId;
-        });
-    }
-
-    function getDeviceName() {
-        var deviceName;
-        if (browser.tizen) {
-            deviceName = 'Samsung Smart TV';
-        } else if (browser.web0s) {
-            deviceName = 'LG Smart TV';
-        } else if (browser.operaTv) {
-            deviceName = 'Opera TV';
-        } else if (browser.xboxOne) {
-            deviceName = 'Xbox One';
-        } else if (browser.ps4) {
-            deviceName = 'Sony PS4';
-        } else if (browser.chrome) {
-            deviceName = 'Chrome';
-        } else if (browser.edgeChromium) {
-            deviceName = 'Edge Chromium';
-        } else if (browser.edge) {
-            deviceName = 'Edge';
-        } else if (browser.firefox) {
-            deviceName = 'Firefox';
-        } else if (browser.opera) {
-            deviceName = 'Opera';
-        } else if (browser.safari) {
-            deviceName = 'Safari';
-        } else {
-            deviceName = 'Web Browser';
-        }
-
-        if (browser.ipad) {
-            deviceName += ' iPad';
-        } else if (browser.iphone) {
-            deviceName += ' iPhone';
-        } else if (browser.android) {
-            deviceName += ' Android';
-        }
-
-        return deviceName;
-    }
-
-    function supportsVoiceInput() {
-        if (!browser.tv) {
-            return window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.oSpeechRecognition || window.msSpeechRecognition;
-        }
 
+function supportsFullscreen() {
+    if (browser.tv) {
         return false;
     }
 
-    function supportsFullscreen() {
+    const element = document.documentElement;
-        if (browser.tv) {
+    return (element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen || element.msRequestFullscreen) || document.createElement('video').webkitEnterFullscreen;
-            return false;
+}
-        }
 
-        var element = document.documentElement;
+function getDefaultLayout() {
-        return (element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen || element.msRequestFullscreen) || document.createElement('video').webkitEnterFullscreen;
+    return 'desktop';
-    }
+}
-
-    function getSyncProfile() {
-        return new Promise(function (resolve) {
-            require(['browserdeviceprofile', 'appSettings'], function (profileBuilder, appSettings) {
-                var profile;
-
-                if (window.NativeShell) {
-                    profile = window.NativeShell.AppHost.getSyncProfile(profileBuilder, appSettings);
-                } else {
-                    profile = profileBuilder();
-                    profile.MaxStaticMusicBitrate = appSettings.maxStaticMusicBitrate();
-                }
-
-                resolve(profile);
-            });
-        });
-    }
-
-    function getDefaultLayout() {
-        return 'desktop';
-    }
-
-    function supportsHtmlMediaAutoplay() {
-        if (browser.edgeUwp || browser.tizen || browser.web0s || browser.orsay || browser.operaTv || browser.ps4 || browser.xboxOne) {
-            return true;
-        }
-
-        if (browser.mobile) {
-            return false;
-        }
 
+function supportsHtmlMediaAutoplay() {
+    if (browser.edgeUwp || browser.tizen || browser.web0s || browser.orsay || browser.operaTv || browser.ps4 || browser.xboxOne) {
         return true;
     }
 
-    function supportsCue() {
+    if (browser.mobile) {
-        try {
+        return false;
-            var video = document.createElement('video');
-            var style = document.createElement('style');
-
-            style.textContent = 'video::cue {background: inherit}';
-            document.body.appendChild(style);
-            document.body.appendChild(video);
-
-            var cue = window.getComputedStyle(video, '::cue').background;
-            document.body.removeChild(style);
-            document.body.removeChild(video);
-
-            return !!cue.length;
-        } catch (err) {
-            console.error('error detecting cue support: ' + err);
-            return false;
-        }
     }
 
-    function onAppVisible() {
+    return true;
-        if (isHidden) {
+}
-            isHidden = false;
+
-            console.debug('triggering app resume event');
+function supportsCue() {
-            events.trigger(appHost, 'resume');
+    try {
-        }
+        const video = document.createElement('video');
+        const style = document.createElement('style');
+
+        style.textContent = 'video::cue {background: inherit}';
+        document.body.appendChild(style);
+        document.body.appendChild(video);
+
+        const cue = window.getComputedStyle(video, '::cue').background;
+        document.body.removeChild(style);
+        document.body.removeChild(video);
+
+        return !!cue.length;
+    } catch (err) {
+        console.error('error detecting cue support: ' + err);
+        return false;
+    }
+}
+
+function onAppVisible() {
+    if (isHidden) {
+        isHidden = false;
+        console.debug('triggering app resume event');
+        events.trigger(appHost, 'resume');
+    }
+}
+
+function onAppHidden() {
+    if (!isHidden) {
+        isHidden = true;
+        console.debug('app is hidden');
+    }
+}
+
+const supportedFeatures = function () {
+    const features = [];
+
+    if (navigator.share) {
+        features.push('sharing');
     }
 
-    function onAppHidden() {
+    if (!browser.edgeUwp && !browser.tv && !browser.xboxOne && !browser.ps4) {
-        if (!isHidden) {
+        features.push('filedownload');
-            isHidden = true;
-            console.debug('app is hidden');
-        }
     }
 
-    var supportedFeatures = function () {
+    if (browser.operaTv || browser.tizen || browser.orsay || browser.web0s) {
-        var features = [];
+        features.push('exit');
+    } else {
+        features.push('exitmenu');
+        features.push('plugins');
+    }
 
-        if (navigator.share) {
+    if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.ps4) {
-            features.push('sharing');
+        features.push('externallinks');
-        }
+        features.push('externalpremium');
+    }
 
-        if (!browser.edgeUwp && !browser.tv && !browser.xboxOne && !browser.ps4) {
+    if (!browser.operaTv) {
-            features.push('filedownload');
+        features.push('externallinkdisplay');
-        }
+    }
 
-        if (browser.operaTv || browser.tizen || browser.orsay || browser.web0s) {
+    if (supportsVoiceInput()) {
-            features.push('exit');
+        features.push('voiceinput');
+    }
+
+    if (supportsHtmlMediaAutoplay()) {
+        features.push('htmlaudioautoplay');
+        features.push('htmlvideoautoplay');
+    }
+
+    if (browser.edgeUwp) {
+        features.push('sync');
+    }
+
+    if (supportsFullscreen()) {
+        features.push('fullscreenchange');
+    }
+
+    if (browser.tv || browser.xboxOne || browser.ps4 || browser.mobile) {
+        features.push('physicalvolumecontrol');
+    }
+
+    if (!browser.tv && !browser.xboxOne && !browser.ps4) {
+        features.push('remotecontrol');
+    }
+
+    if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.edgeUwp) {
+        features.push('remotevideo');
+    }
+
+    features.push('displaylanguage');
+    features.push('otherapppromotions');
+    features.push('displaymode');
+    features.push('targetblank');
+    features.push('screensaver');
+
+    webSettings.getMultiServer().then(enabled => {
+        if (enabled) features.push('multiserver');
+    });
+
+    if (!browser.orsay && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
+        features.push('subtitleappearancesettings');
+    }
+
+    if (!browser.orsay) {
+        features.push('subtitleburnsettings');
+    }
+
+    if (!browser.tv && !browser.ps4 && !browser.xboxOne) {
+        features.push('fileinput');
+    }
+
+    if (browser.chrome || browser.edgeChromium) {
+        features.push('chromecast');
+    }
+
+    return features;
+}();
+
+/**
+     * Do exit according to platform
+     */
+function doExit() {
+    try {
+        if (window.NativeShell) {
+            window.NativeShell.AppHost.exit();
+        } else if (browser.tizen) {
+            tizen.application.getCurrentApplication().exit();
+        } else if (browser.web0s) {
+            webOS.platformBack();
         } else {
-            features.push('exitmenu');
+            window.close();
-            features.push('plugins');
         }
+    } catch (err) {
+        console.error('error closing application: ' + err);
+    }
+}
 
-        if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.ps4) {
+let exitPromise;
-            features.push('externallinks');
-            features.push('externalpremium');
-        }
 
-        if (!browser.operaTv) {
+/**
-            features.push('externallinkdisplay');
+     * Ask user for exit
-        }
+     */
-
+function askForExit() {
-        if (supportsVoiceInput()) {
+    if (exitPromise) {
-            features.push('voiceinput');
+        return;
-        }
-
-        if (supportsHtmlMediaAutoplay()) {
-            features.push('htmlaudioautoplay');
-            features.push('htmlvideoautoplay');
-        }
-
-        if (browser.edgeUwp) {
-            features.push('sync');
-        }
-
-        if (supportsFullscreen()) {
-            features.push('fullscreenchange');
-        }
-
-        if (browser.tv || browser.xboxOne || browser.ps4 || browser.mobile) {
-            features.push('physicalvolumecontrol');
-        }
-
-        if (!browser.tv && !browser.xboxOne && !browser.ps4) {
-            features.push('remotecontrol');
-        }
-
-        if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.edgeUwp) {
-            features.push('remotevideo');
-        }
-
-        features.push('displaylanguage');
-        features.push('otherapppromotions');
-        features.push('displaymode');
-        features.push('targetblank');
-        features.push('screensaver');
-
-        webSettings.getMultiServer().then(enabled => {
-            if (enabled) features.push('multiserver');
-        });
-
-        if (!browser.orsay && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
-            features.push('subtitleappearancesettings');
-        }
-
-        if (!browser.orsay) {
-            features.push('subtitleburnsettings');
-        }
-
-        if (!browser.tv && !browser.ps4 && !browser.xboxOne) {
-            features.push('fileinput');
-        }
-
-        if (browser.chrome || browser.edgeChromium) {
-            features.push('chromecast');
-        }
-
-        return features;
-    }();
-
-    /**
-      * Do exit according to platform
-      */
-    function doExit() {
-        try {
-            if (window.NativeShell) {
-                window.NativeShell.AppHost.exit();
-            } else if (browser.tizen) {
-                tizen.application.getCurrentApplication().exit();
-            } else if (browser.web0s) {
-                webOS.platformBack();
-            } else {
-                window.close();
-            }
-        } catch (err) {
-            console.error('error closing application: ' + err);
-        }
     }
 
-    var exitPromise;
+    import('actionsheet').then(({default: actionsheet}) => {
-
+        exitPromise = actionsheet.show({
-    /**
+            title: globalize.translate('MessageConfirmAppExit'),
-      * Ask user for exit
+            items: [
-      */
+                {id: 'yes', name: globalize.translate('Yes')},
-    function askForExit() {
+                {id: 'no', name: globalize.translate('No')}
-        if (exitPromise) {
+            ]
-            return;
+        }).then(function (value) {
-        }
+            if (value === 'yes') {
-
-        require(['actionsheet'], function (actionsheet) {
-            exitPromise = actionsheet.show({
-                title: globalize.translate('MessageConfirmAppExit'),
-                items: [
-                    {id: 'yes', name: globalize.translate('Yes')},
-                    {id: 'no', name: globalize.translate('No')}
-                ]
-            }).then(function (value) {
-                if (value === 'yes') {
-                    doExit();
-                }
-            }).finally(function () {
-                exitPromise = null;
-            });
-        });
-    }
-
-    var deviceId;
-    var deviceName;
-    var appName = 'Jellyfin Web';
-    var appVersion = '10.7.0';
-
-    var appHost = {
-        getWindowState: function () {
-            return document.windowState || 'Normal';
-        },
-        setWindowState: function (state) {
-            alert('setWindowState is not supported and should not be called');
-        },
-        exit: function () {
-            if (!!window.appMode && browser.tizen) {
-                askForExit();
-            } else {
                 doExit();
             }
-        },
+        }).finally(function () {
-        supports: function (command) {
+            exitPromise = null;
-            if (window.NativeShell) {
+        });
-                return window.NativeShell.AppHost.supports(command);
+    });
-            }
+}
 
-            return supportedFeatures.indexOf(command.toLowerCase()) !== -1;
+let deviceId;
-        },
+let deviceName;
-        preferVisualCards: browser.android || browser.chrome,
+const appName = 'Jellyfin Web';
-        getSyncProfile: getSyncProfile,
+const appVersion = '10.7.0';
-        getDefaultLayout: function () {
-            if (window.NativeShell) {
-                return window.NativeShell.AppHost.getDefaultLayout();
-            }
 
-            return getDefaultLayout();
+const appHost = {
-        },
+    getWindowState: function () {
-        getDeviceProfile: getDeviceProfile,
+        return document.windowState || 'Normal';
-        init: function () {
+    },
-            if (window.NativeShell) {
+    setWindowState: function () {
-                return window.NativeShell.AppHost.init();
+        alert('setWindowState is not supported and should not be called');
-            }
+    },
-
+    exit: function () {
-            deviceName = getDeviceName();
+        if (!!window.appMode && browser.tizen) {
-            getDeviceId().then(function (id) {
+            askForExit();
-                deviceId = id;
-            });
-        },
-        deviceName: function () {
-            return window.NativeShell ? window.NativeShell.AppHost.deviceName() : deviceName;
-        },
-        deviceId: function () {
-            return window.NativeShell ? window.NativeShell.AppHost.deviceId() : deviceId;
-        },
-        appName: function () {
-            return window.NativeShell ? window.NativeShell.AppHost.appName() : appName;
-        },
-        appVersion: function () {
-            return window.NativeShell ? window.NativeShell.AppHost.appVersion() : appVersion;
-        },
-        getPushTokenInfo: function () {
-            return {};
-        },
-        setUserScalable: function (scalable) {
-            if (!browser.tv) {
-                var att = scalable ? 'width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes' : 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no';
-                document.querySelector('meta[name=viewport]').setAttribute('content', att);
-            }
-        }
-    };
-
-    var isHidden = false;
-    var hidden;
-    var visibilityChange;
-
-    if (typeof document.hidden !== 'undefined') { /* eslint-disable-line compat/compat */
-        hidden = 'hidden';
-        visibilityChange = 'visibilitychange';
-    } else if (typeof document.webkitHidden !== 'undefined') {
-        hidden = 'webkitHidden';
-        visibilityChange = 'webkitvisibilitychange';
-    }
-
-    document.addEventListener(visibilityChange, function () {
-        /* eslint-disable-next-line compat/compat */
-        if (document[hidden]) {
-            onAppHidden();
         } else {
-            onAppVisible();
+            doExit();
+        }
+    },
+    supports: function (command) {
+        if (window.NativeShell) {
+            return window.NativeShell.AppHost.supports(command);
         }
-    }, false);
 
-    if (self.addEventListener) {
+        return supportedFeatures.indexOf(command.toLowerCase()) !== -1;
-        self.addEventListener('focus', onAppVisible);
+    },
-        self.addEventListener('blur', onAppHidden);
+    preferVisualCards: browser.android || browser.chrome,
+    getDefaultLayout: function () {
+        if (window.NativeShell) {
+            return window.NativeShell.AppHost.getDefaultLayout();
+        }
+
+        return getDefaultLayout();
+    },
+    getDeviceProfile: getDeviceProfile,
+    init: function () {
+        if (window.NativeShell) {
+            return window.NativeShell.AppHost.init();
+        }
+
+        deviceName = getDeviceName();
+        getDeviceId().then(function (id) {
+            deviceId = id;
+        });
+    },
+    deviceName: function () {
+        return window.NativeShell ? window.NativeShell.AppHost.deviceName() : deviceName;
+    },
+    deviceId: function () {
+        return window.NativeShell ? window.NativeShell.AppHost.deviceId() : deviceId;
+    },
+    appName: function () {
+        return window.NativeShell ? window.NativeShell.AppHost.appName() : appName;
+    },
+    appVersion: function () {
+        return window.NativeShell ? window.NativeShell.AppHost.appVersion() : appVersion;
+    },
+    getPushTokenInfo: function () {
+        return {};
+    },
+    setUserScalable: function (scalable) {
+        if (!browser.tv) {
+            const att = scalable ? 'width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes' : 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no';
+            document.querySelector('meta[name=viewport]').setAttribute('content', att);
+        }
     }
+};
 
-    return appHost;
+let isHidden = false;
-});
+let hidden;
+let visibilityChange;
+
+if (typeof document.hidden !== 'undefined') { /* eslint-disable-line compat/compat */
+    hidden = 'hidden';
+    visibilityChange = 'visibilitychange';
+} else if (typeof document.webkitHidden !== 'undefined') {
+    hidden = 'webkitHidden';
+    visibilityChange = 'webkitvisibilitychange';
+}
+
+document.addEventListener(visibilityChange, function () {
+    /* eslint-disable-next-line compat/compat */
+    if (document[hidden]) {
+        onAppHidden();
+    } else {
+        onAppVisible();
+    }
+}, false);
+
+if (self.addEventListener) {
+    self.addEventListener('focus', onAppVisible);
+    self.addEventListener('blur', onAppHidden);
+}
+
+export default appHost;

src/components/cardbuilder/cardBuilder.js

@@ -362,12 +362,12 @@ import 'programStyles';
             let hasOpenRow;
             let hasOpenSection;
 
-            let sectionTitleTagName = options.sectionTitleTagName || 'div';
+            const sectionTitleTagName = options.sectionTitleTagName || 'div';
             let apiClient;
             let lastServerId;
 
             for (const [i, item] of items.entries()) {
-                let serverId = item.ServerId || options.serverId;
+                const serverId = item.ServerId || options.serverId;
 
                 if (serverId !== lastServerId) {
                     lastServerId = serverId;
@@ -621,7 +621,7 @@ import 'programStyles';
                 });
             }
 
-            let blurHashes = options.imageBlurhashes || item.ImageBlurHashes || {};
+            const blurHashes = options.imageBlurhashes || item.ImageBlurHashes || {};
 
             return {
                 imgUrl: imgUrl,
@@ -656,7 +656,7 @@ import 'programStyles';
                 for (let i = 0; i < character.length; i++) {
                     sum += parseInt(character.charAt(i));
                 }
-                let index = String(sum).substr(-1);
+                const index = String(sum).substr(-1);
 
                 return (index % numRandomColors) + 1;
             } else {
@@ -682,7 +682,7 @@ import 'programStyles';
 
             for (let i = 0; i < lines.length; i++) {
                 let currentCssClass = cssClass;
-                let text = lines[i];
+                const text = lines[i];
 
                 if (valid > 0 && isOuterFooter) {
                     currentCssClass += ' cardText-secondary';
@@ -707,7 +707,7 @@ import 'programStyles';
             }
 
             if (forceLines) {
-                let linesLength = maxLines || Math.min(lines.length, maxLines || lines.length);
+                const linesLength = maxLines || Math.min(lines.length, maxLines || lines.length);
 
                 while (valid < linesLength) {
                     html += "<div class='" + cssClass + "'>&nbsp;</div>";
@@ -1036,7 +1036,7 @@ import 'programStyles';
          * @returns {string} HTML markup for the item count indicator.
          */
         function getItemCountsHtml(options, item) {
-            let counts = [];
+            const counts = [];
             let childText;
 
             if (item.Type === 'Playlist') {
@@ -1318,7 +1318,7 @@ import 'programStyles';
             let cardBoxClose = '';
             let cardScalableClose = '';
 
-            let cardContentClass = 'cardContent';
+            const cardContentClass = 'cardContent';
 
             let blurhashAttrib = '';
             if (blurhash && blurhash.length > 0) {
@@ -1337,7 +1337,7 @@ import 'programStyles';
                 cardImageContainerClose = '</button>';
             }
 
-            let cardScalableClass = 'cardScalable';
+            const cardScalableClass = 'cardScalable';
 
             cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
             cardBoxClose = '</div>';
@@ -1681,7 +1681,7 @@ import 'programStyles';
             const cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]');
 
             for (let i = 0, length = cells.length; i < length; i++) {
-                let cell = cells[i];
+                const cell = cells[i];
                 const icon = cell.querySelector('.timerIndicator');
                 if (!icon) {
                     const indicatorsElem = ensureIndicators(cell);
@@ -1700,8 +1700,8 @@ import 'programStyles';
             const cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]');
 
             for (let i = 0; i < cells.length; i++) {
-                let cell = cells[i];
+                const cell = cells[i];
-                let icon = cell.querySelector('.timerIndicator');
+                const icon = cell.querySelector('.timerIndicator');
                 if (icon) {
                     icon.parentNode.removeChild(icon);
                 }
@@ -1718,8 +1718,8 @@ import 'programStyles';
             const cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + cancelledTimerId + '"]');
 
             for (let i = 0; i < cells.length; i++) {
-                let cell = cells[i];
+                const cell = cells[i];
-                let icon = cell.querySelector('.timerIndicator');
+                const icon = cell.querySelector('.timerIndicator');
                 if (icon) {
                     icon.parentNode.removeChild(icon);
                 }

src/components/channelMapper/channelMapper.js

@@ -19,11 +19,11 @@ export default class channelMapper {
             connectionManager.getApiClient(options.serverId).ajax({
                 type: 'POST',
                 url: ApiClient.getUrl('LiveTv/ChannelMappings'),
-                data: {
+                data: JSON.stringify({
                     providerId: providerId,
                     tunerChannelId: channelId,
                     providerChannelId: providerChannelId
-                },
+                }),
                 dataType: 'json'
             }).then(mapping => {
                 const listItem = dom.parentWithClass(button, 'listItem');
@@ -93,7 +93,7 @@ export default class channelMapper {
             html += '<div class="formDialogContent smoothScrollY">';
             html += '<div class="dialogContentInner dialog-content-centered">';
             html += '<form style="margin:auto;">';
-            html += `<h1>${globalize.translate('HeaderChannels')}</h1>`;
+            html += `<h1>${globalize.translate('Channels')}</h1>`;
             html += '<div class="channels paperList">';
             html += '</div>';
             html += '</form>';

src/components/dialogHelper/dialogHelper.js

@@ -375,7 +375,7 @@ import 'scrollStyles';
             dlg.setAttribute('data-lockscroll', 'true');
         }
 
-        if (options.enableHistory !== false && appRouter.enableNativeHistory()) {
+        if (options.enableHistory !== false) {
             dlg.setAttribute('data-history', 'true');
         }
 
@@ -391,11 +391,8 @@ import 'scrollStyles';
             dlg.setAttribute('data-autofocus', 'true');
         }
 
-        let defaultEntryAnimation;
+        const defaultEntryAnimation = 'scaleup';
-        let defaultExitAnimation;
+        const defaultExitAnimation = 'scaledown';
-
-        defaultEntryAnimation = 'scaleup';
-        defaultExitAnimation = 'scaledown';
         const entryAnimation = options.entryAnimation || defaultEntryAnimation;
         const exitAnimation = options.exitAnimation || defaultExitAnimation;
 

src/components/directorybrowser/directorybrowser.js

@@ -166,10 +166,10 @@ import 'emby-button';
         return apiClient.ajax({
             type: 'POST',
             url: apiClient.getUrl('Environment/ValidatePath'),
-            data: {
+            data: JSON.stringify({
                 ValidateWriteable: validateWriteable,
                 Path: path
-            }
+            })
         }).catch(response => {
             if (response) {
                 if (response.status === 404) {

src/components/displaySettings/displaySettings.template.html

@@ -162,7 +162,7 @@
     <div class="checkboxContainer checkboxContainer-withDescription fldBackdrops hide">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkBackdrops" />
-            <span>${EnableBackdrops}</span>
+            <span>${Backdrops}</span>
         </label>
         <div class="fieldDescription checkboxFieldDescription">${EnableBackdropsHelp}</div>
     </div>

src/components/filterdialog/filterdialog.template.html

@@ -1,6 +1,6 @@
 <div style="margin: 0;padding:1.5em 2em;" class="filterDialogContent">
 
-    <div is="emby-collapse" title="${HeaderFilters}">
+    <div is="emby-collapse" title="${Filters}">
         <div class="collapseContent">
             <div class="checkboxList">
                 <label>
@@ -63,7 +63,7 @@
         </div>
     </div>
 
-    <div is="emby-collapse" title="${HeaderFeatures}" class="features hide">
+    <div is="emby-collapse" title="${Features}" class="features hide">
         <div class="collapseContent">
             <div class="checkboxList">
                 <label>
@@ -90,7 +90,7 @@
         </div>
     </div>
 
-    <div is="emby-collapse" title="${HeaderGenres}" class="genreFilters hide">
+    <div is="emby-collapse" title="${Genres}" class="genreFilters hide">
         <div class="collapseContent filterOptions">
         </div>
     </div>
@@ -100,7 +100,7 @@
         </div>
     </div>
 
-    <div is="emby-collapse" title="${HeaderTags}" class="tagFilters hide">
+    <div is="emby-collapse" title="${Tags}" class="tagFilters hide">
         <div class="collapseContent filterOptions">
         </div>
     </div>

src/components/filtermenu/filtermenu.js

@@ -1,223 +1,220 @@
-define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost', 'inputManager', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'userSettings', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, appHost, inputManager, layoutManager, connectionManager, appRouter, globalize, userSettings) {
+import dom from 'dom';
-    'use strict';
+import focusManager from 'focusManager';
-    focusManager = focusManager.default || focusManager;
+import dialogHelper from 'dialogHelper';
+import inputManager from 'inputManager';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import 'emby-checkbox';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'emby-select';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
+import 'flexStyles';
 
-    function onSubmit(e) {
+function onSubmit(e) {
-        e.preventDefault();
+    e.preventDefault();
-        return false;
+    return false;
+}
+function renderOptions(context, selector, cssClass, items, isCheckedFn) {
+    var elem = context.querySelector(selector);
+
+    if (items.length) {
+        elem.classList.remove('hide');
+    } else {
+        elem.classList.add('hide');
     }
 
-    function renderOptions(context, selector, cssClass, items, isCheckedFn) {
+    var html = '';
-        var elem = context.querySelector(selector);
 
-        if (items.length) {
+    html += items.map(function (filter) {
-            elem.classList.remove('hide');
+        var itemHtml = '';
+
+        var checkedHtml = isCheckedFn(filter) ? ' checked' : '';
+        itemHtml += '<label>';
+        itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter.Id + '" class="' + cssClass + '"/>';
+        itemHtml += '<span>' + filter.Name + '</span>';
+        itemHtml += '</label>';
+
+        return itemHtml;
+    }).join('');
+
+    elem.querySelector('.filterOptions').innerHTML = html;
+}
+
+function renderDynamicFilters(context, result, options) {
+    renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
+        // Switching from | to ,
+        var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
+        return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -1;
+    });
+}
+
+function setBasicFilter(context, key, elem) {
+    var value = elem.checked;
+    value = value ? value : null;
+    userSettings.setFilter(key, value);
+}
+function moveCheckboxFocus(elem, offset) {
+    var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
+    var elems = focusManager.getFocusableElements(parent);
+
+    var index = -1;
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i] === elem) {
+            index = i;
+            break;
+        }
+    }
+
+    index += offset;
+
+    index = Math.min(elems.length - 1, index);
+    index = Math.max(0, index);
+
+    var newElem = elems[index];
+    if (newElem) {
+        focusManager.focus(newElem);
+    }
+}
+function centerFocus(elem, horiz, on) {
+    import('scrollHelper').then(({ default: scrollHelper }) => {
+        var fn = on ? 'on' : 'off';
+        scrollHelper.centerFocus[fn](elem, horiz);
+    });
+}
+function onInputCommand(e) {
+    switch (e.detail.command) {
+        case 'left':
+            moveCheckboxFocus(e.target, -1);
+            e.preventDefault();
+            break;
+        case 'right':
+            moveCheckboxFocus(e.target, 1);
+            e.preventDefault();
+            break;
+        default:
+            break;
+    }
+}
+function saveValues(context, settings, settingsKey) {
+    var elems = context.querySelectorAll('.simpleFilter');
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].tagName === 'INPUT') {
+            setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
         } else {
-            elem.classList.add('hide');
+            setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
         }
-
-        var html = '';
-
-        html += items.map(function (filter) {
-            var itemHtml = '';
-
-            var checkedHtml = isCheckedFn(filter) ? ' checked' : '';
-            itemHtml += '<label>';
-            itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter.Id + '" class="' + cssClass + '"/>';
-            itemHtml += '<span>' + filter.Name + '</span>';
-            itemHtml += '</label>';
-
-            return itemHtml;
-        }).join('');
-
-        elem.querySelector('.filterOptions').innerHTML = html;
     }
 
-    function renderDynamicFilters(context, result, options) {
+    // Video type
-        renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
+    var videoTypes = [];
-            // Switching from | to ,
+    elems = context.querySelectorAll('.chkVideoTypeFilter');
-            var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
+
-            return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -1;
+    for (let i = 0, length = elems.length; i < length; i++) {
-        });
+        if (elems[i].checked) {
+            videoTypes.push(elems[i].getAttribute('data-filter'));
+        }
+    }
+    userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(','));
+
+    // Series status
+    var seriesStatuses = [];
+    elems = context.querySelectorAll('.chkSeriesStatus');
+
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].checked) {
+            seriesStatuses.push(elems[i].getAttribute('data-filter'));
+        }
     }
 
-    function loadDynamicFilters(context, options) {
+    // Genres
-        var apiClient = connectionManager.getApiClient(options.serverId);
+    var genres = [];
+    elems = context.querySelectorAll('.chkGenreFilter');
 
-        var filterMenuOptions = Object.assign(options.filterMenuOptions, {
+    for (let i = 0, length = elems.length; i < length; i++) {
-
+        if (elems[i].checked) {
-            UserId: apiClient.getCurrentUserId(),
+            genres.push(elems[i].getAttribute('data-filter'));
-            ParentId: options.parentId,
+        }
-            IncludeItemTypes: options.itemTypes.join(',')
-        });
-
-        apiClient.getFilters(filterMenuOptions).then(function (result) {
-            renderDynamicFilters(context, result, options);
-        });
     }
-
+    userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
-    function initEditor(context, settings) {
+}
-        context.querySelector('form').addEventListener('submit', onSubmit);
+function bindCheckboxInput(context, on) {
-
+    var elems = context.querySelectorAll('.checkboxList-verticalwrap');
-        var elems = context.querySelectorAll('.simpleFilter');
+    for (let i = 0, length = elems.length; i < length; i++) {
-        var i;
+        if (on) {
-        var length;
+            inputManager.on(elems[i], onInputCommand);
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            if (elems[i].tagName === 'INPUT') {
-                elems[i].checked = settings[elems[i].getAttribute('data-settingname')] || false;
-            } else {
-                elems[i].querySelector('input').checked = settings[elems[i].getAttribute('data-settingname')] || false;
-            }
-        }
-
-        var videoTypes = settings.VideoTypes ? settings.VideoTypes.split(',') : [];
-        elems = context.querySelectorAll('.chkVideoTypeFilter');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            elems[i].checked = videoTypes.indexOf(elems[i].getAttribute('data-filter')) !== -1;
-        }
-
-        var seriesStatuses = settings.SeriesStatus ? settings.SeriesStatus.split(',') : [];
-        elems = context.querySelectorAll('.chkSeriesStatus');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            elems[i].checked = seriesStatuses.indexOf(elems[i].getAttribute('data-filter')) !== -1;
-        }
-
-        if (context.querySelector('.basicFilterSection .viewSetting:not(.hide)')) {
-            context.querySelector('.basicFilterSection').classList.remove('hide');
         } else {
-            context.querySelector('.basicFilterSection').classList.add('hide');
+            inputManager.off(elems[i], onInputCommand);
         }
+    }
+}
+function initEditor(context, settings) {
+    context.querySelector('form').addEventListener('submit', onSubmit);
 
-        if (context.querySelector('.featureSection .viewSetting:not(.hide)')) {
+    var elems = context.querySelectorAll('.simpleFilter');
-            context.querySelector('.featureSection').classList.remove('hide');
+    var i;
+    var length;
+
+    for (i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].tagName === 'INPUT') {
+            elems[i].checked = settings[elems[i].getAttribute('data-settingname')] || false;
         } else {
-            context.querySelector('.featureSection').classList.add('hide');
+            elems[i].querySelector('input').checked = settings[elems[i].getAttribute('data-settingname')] || false;
         }
     }
 
-    function saveValues(context, settings, settingsKey) {
+    var videoTypes = settings.VideoTypes ? settings.VideoTypes.split(',') : [];
-        var elems = context.querySelectorAll('.simpleFilter');
+    elems = context.querySelectorAll('.chkVideoTypeFilter');
-        var i;
-        var length;
-        for (i = 0, length = elems.length; i < length; i++) {
-            if (elems[i].tagName === 'INPUT') {
-                setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
-            } else {
-                setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
-            }
-        }
 
-        // Video type
+    for (i = 0, length = elems.length; i < length; i++) {
-        var videoTypes = [];
+        elems[i].checked = videoTypes.indexOf(elems[i].getAttribute('data-filter')) !== -1;
-        elems = context.querySelectorAll('.chkVideoTypeFilter');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            if (elems[i].checked) {
-                videoTypes.push(elems[i].getAttribute('data-filter'));
-            }
-        }
-        userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(','));
-
-        // Series status
-        var seriesStatuses = [];
-        elems = context.querySelectorAll('.chkSeriesStatus');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            if (elems[i].checked) {
-                seriesStatuses.push(elems[i].getAttribute('data-filter'));
-            }
-        }
-
-        // Genres
-        var genres = [];
-        elems = context.querySelectorAll('.chkGenreFilter');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            if (elems[i].checked) {
-                genres.push(elems[i].getAttribute('data-filter'));
-            }
-        }
-        userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
     }
 
-    function setBasicFilter(context, key, elem) {
+    var seriesStatuses = settings.SeriesStatus ? settings.SeriesStatus.split(',') : [];
-        var value = elem.checked;
+    elems = context.querySelectorAll('.chkSeriesStatus');
-        value = value ? value : null;
+
-        userSettings.setFilter(key, value);
+    for (i = 0, length = elems.length; i < length; i++) {
+        elems[i].checked = seriesStatuses.indexOf(elems[i].getAttribute('data-filter')) !== -1;
     }
 
-    function centerFocus(elem, horiz, on) {
+    if (context.querySelector('.basicFilterSection .viewSetting:not(.hide)')) {
-        require(['scrollHelper'], function (scrollHelper) {
+        context.querySelector('.basicFilterSection').classList.remove('hide');
-            scrollHelper = scrollHelper.default || scrollHelper;
+    } else {
-            var fn = on ? 'on' : 'off';
+        context.querySelector('.basicFilterSection').classList.add('hide');
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
     }
 
-    function moveCheckboxFocus(elem, offset) {
+    if (context.querySelector('.featureSection .viewSetting:not(.hide)')) {
-        var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
+        context.querySelector('.featureSection').classList.remove('hide');
-        var elems = focusManager.getFocusableElements(parent);
+    } else {
-
+        context.querySelector('.featureSection').classList.add('hide');
-        var index = -1;
-        for (var i = 0, length = elems.length; i < length; i++) {
-            if (elems[i] === elem) {
-                index = i;
-                break;
-            }
-        }
-
-        index += offset;
-
-        index = Math.min(elems.length - 1, index);
-        index = Math.max(0, index);
-
-        var newElem = elems[index];
-        if (newElem) {
-            focusManager.focus(newElem);
-        }
     }
+}
+function loadDynamicFilters(context, options) {
+    var apiClient = connectionManager.getApiClient(options.serverId);
 
-    function onInputCommand(e) {
+    var filterMenuOptions = Object.assign(options.filterMenuOptions, {
-        switch (e.detail.command) {
-            case 'left':
-                moveCheckboxFocus(e.target, -1);
-                e.preventDefault();
-                break;
-            case 'right':
-                moveCheckboxFocus(e.target, 1);
-                e.preventDefault();
-                break;
-            default:
-                break;
-        }
-    }
 
-    function FilterMenu() {
+        UserId: apiClient.getCurrentUserId(),
+        ParentId: options.parentId,
+        IncludeItemTypes: options.itemTypes.join(',')
+    });
 
-    }
+    apiClient.getFilters(filterMenuOptions).then((result) => {
-
+        renderDynamicFilters(context, result, options);
-    function bindCheckboxInput(context, on) {
+    });
-        var elems = context.querySelectorAll('.checkboxList-verticalwrap');
+}
-        for (var i = 0, length = elems.length; i < length; i++) {
+class FilterMenu {
-            if (on) {
+    show(options) {
-                inputManager.on(elems[i], onInputCommand);
+        return new Promise( (resolve, reject) => {
-            } else {
+            import('text!./filtermenu.template.html').then(({ default: template }) => {
-                inputManager.off(elems[i], onInputCommand);
-            }
-        }
-    }
-
-    FilterMenu.prototype.show = function (options) {
-        return new Promise(function (resolve, reject) {
-            require(['text!./filtermenu.template.html'], function (template) {
                 var dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
-
                 if (layoutManager.tv) {
                     dialogOptions.size = 'fullscreen';
                 } else {
@@ -241,7 +238,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                 dlg.innerHTML = globalize.translateHtml(html, 'core');
 
                 var settingElements = dlg.querySelectorAll('.viewSetting');
-                for (var i = 0, length = settingElements.length; i < length; i++) {
+                for (let i = 0, length = settingElements.length; i < length; i++) {
                     if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) {
                         settingElements[i].classList.add('hide');
                     } else {
@@ -253,7 +250,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                 loadDynamicFilters(dlg, options);
 
                 bindCheckboxInput(dlg, true);
-
                 dlg.querySelector('.btnCancel').addEventListener('click', function () {
                     dialogHelper.close(dlg);
                 });
@@ -268,7 +264,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                     submitted = true;
                 }, true);
 
-                dialogHelper.open(dlg).then(function () {
+                dialogHelper.open(dlg).then( function() {
                     bindCheckboxInput(dlg, false);
 
                     if (layoutManager.tv) {
@@ -278,16 +274,14 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                     if (submitted) {
                         //if (!options.onChange) {
                         saveValues(dlg, options.settings, options.settingsKey);
-                        resolve();
+                        return resolve();
                         //}
-                        return;
                     }
-
+                    return resolve();
-                    reject();
                 });
             });
         });
-    };
+    }
+}
 
-    return FilterMenu;
+export default FilterMenu;
-});

src/components/guide/guide-settings.js

@@ -1,149 +1,149 @@
-define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import layoutManager from 'layoutManager';
+import scrollHelper from 'scrollHelper';
+import 'emby-checkbox';
+import 'emby-radio';
+import 'css!./../formdialog';
+import 'material-icons';
 
-    scrollHelper = scrollHelper.default || scrollHelper;
+function saveCategories(context, options) {
+    const categories = [];
 
-    function saveCategories(context, options) {
+    const chkCategorys = context.querySelectorAll('.chkCategory');
-        var categories = [];
+    for (const chkCategory of chkCategorys) {
+        const type = chkCategory.getAttribute('data-type');
 
-        var chkCategorys = context.querySelectorAll('.chkCategory');
+        if (chkCategory.checked) {
-        for (var i = 0, length = chkCategorys.length; i < length; i++) {
+            categories.push(type);
-            var type = chkCategorys[i].getAttribute('data-type');
-
-            if (chkCategorys[i].checked) {
-                categories.push(type);
-            }
-        }
-
-        if (categories.length >= 4) {
-            categories.push('series');
-        }
-
-        // differentiate between none and all
-        categories.push('all');
-        options.categories = categories;
-    }
-
-    function loadCategories(context, options) {
-        var selectedCategories = options.categories || [];
-
-        var chkCategorys = context.querySelectorAll('.chkCategory');
-        for (var i = 0, length = chkCategorys.length; i < length; i++) {
-            var type = chkCategorys[i].getAttribute('data-type');
-
-            chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
         }
     }
 
-    function save(context) {
+    if (categories.length >= 4) {
-        var i;
+        categories.push('series');
-        var length;
+    }
 
-        var chkIndicators = context.querySelectorAll('.chkIndicator');
+    // differentiate between none and all
-        for (i = 0, length = chkIndicators.length; i < length; i++) {
+    categories.push('all');
-            var type = chkIndicators[i].getAttribute('data-type');
+    options.categories = categories;
-            userSettings.set('guide-indicator-' + type, chkIndicators[i].checked);
+}
+
+function loadCategories(context, options) {
+    const selectedCategories = options.categories || [];
+
+    const chkCategorys = context.querySelectorAll('.chkCategory');
+    for (const chkCategory of chkCategorys) {
+        const type = chkCategory.getAttribute('data-type');
+
+        chkCategory.checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
+    }
+}
+
+function save(context) {
+    const chkIndicators = context.querySelectorAll('.chkIndicator');
+
+    for (const chkIndicator of chkIndicators) {
+        const type = chkIndicator.getAttribute('data-type');
+        userSettings.set('guide-indicator-' + type, chkIndicator.checked);
+    }
+
+    userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked);
+    userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked);
+
+    const sortBys = context.querySelectorAll('.chkSortOrder');
+    for (const sortBy of sortBys) {
+        if (sortBy.checked) {
+            userSettings.set('livetv-channelorder', sortBy.value);
+            break;
         }
+    }
+}
 
-        userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked);
+function load(context) {
-        userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked);
+    const chkIndicators = context.querySelectorAll('.chkIndicator');
 
-        var sortBys = context.querySelectorAll('.chkSortOrder');
+    for (const chkIndicator of chkIndicators) {
-        for (i = 0, length = sortBys.length; i < length; i++) {
+        const type = chkIndicator.getAttribute('data-type');
-            if (sortBys[i].checked) {
+
-                userSettings.set('livetv-channelorder', sortBys[i].value);
+        if (chkIndicator.getAttribute('data-default') === 'true') {
-                break;
+            chkIndicator.checked = userSettings.get('guide-indicator-' + type) !== 'false';
-            }
+        } else {
+            chkIndicator.checked = userSettings.get('guide-indicator-' + type) === 'true';
         }
     }
 
-    function load(context) {
+    context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true';
-        var i;
+    context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false';
-        var length;
 
-        var chkIndicators = context.querySelectorAll('.chkIndicator');
+    const sortByValue = userSettings.get('livetv-channelorder') || 'Number';
-        for (i = 0, length = chkIndicators.length; i < length; i++) {
-            var type = chkIndicators[i].getAttribute('data-type');
 
-            if (chkIndicators[i].getAttribute('data-default') === 'true') {
+    const sortBys = context.querySelectorAll('.chkSortOrder');
-                chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) !== 'false';
+    for (const sortBy of sortBys) {
+        sortBy.checked = sortBy.value === sortByValue;
+    }
+}
+
+function showEditor(options) {
+    return new Promise(function (resolve, reject) {
+        let settingsChanged = false;
+
+        import('text!./guide-settings.template.html').then(({ default: template }) => {
+            const dialogOptions = {
+                removeOnClose: true,
+                scrollY: false
+            };
+
+            if (layoutManager.tv) {
+                dialogOptions.size = 'fullscreen';
             } else {
-                chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) === 'true';
+                dialogOptions.size = 'small';
             }
-        }
 
-        context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true';
+            const dlg = dialogHelper.createDialog(dialogOptions);
-        context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false';
 
-        var sortByValue = userSettings.get('livetv-channelorder') || 'Number';
+            dlg.classList.add('formDialog');
 
-        var sortBys = context.querySelectorAll('.chkSortOrder');
+            let html = '';
-        for (i = 0, length = sortBys.length; i < length; i++) {
-            sortBys[i].checked = sortBys[i].value === sortByValue;
-        }
-    }
 
-    function showEditor(options) {
+            html += globalize.translateHtml(template, 'core');
-        return new Promise(function (resolve, reject) {
-            var settingsChanged = false;
 
-            require(['text!./guide-settings.template.html'], function (template) {
+            dlg.innerHTML = html;
-                var dialogOptions = {
-                    removeOnClose: true,
-                    scrollY: false
-                };
 
-                if (layoutManager.tv) {
+            dlg.addEventListener('change', function () {
-                    dialogOptions.size = 'fullscreen';
+                settingsChanged = true;
-                } else {
-                    dialogOptions.size = 'small';
-                }
-
-                var dlg = dialogHelper.createDialog(dialogOptions);
-
-                dlg.classList.add('formDialog');
-
-                var html = '';
-
-                html += globalize.translateHtml(template, 'core');
-
-                dlg.innerHTML = html;
-
-                dlg.addEventListener('change', function () {
-                    settingsChanged = true;
-                });
-
-                dlg.addEventListener('close', function () {
-                    if (layoutManager.tv) {
-                        scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
-                    }
-
-                    save(dlg);
-                    saveCategories(dlg, options);
-
-                    if (settingsChanged) {
-                        resolve();
-                    } else {
-                        reject();
-                    }
-                });
-
-                dlg.querySelector('.btnCancel').addEventListener('click', function () {
-                    dialogHelper.close(dlg);
-                });
-
-                if (layoutManager.tv) {
-                    scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
-                }
-
-                load(dlg);
-                loadCategories(dlg, options);
-                dialogHelper.open(dlg);
             });
-        });
-    }
 
-    return {
+            dlg.addEventListener('close', function () {
-        show: showEditor
+                if (layoutManager.tv) {
-    };
+                    scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
-});
+                }
+
+                save(dlg);
+                saveCategories(dlg, options);
+
+                if (settingsChanged) {
+                    resolve();
+                } else {
+                    reject();
+                }
+            });
+
+            dlg.querySelector('.btnCancel').addEventListener('click', function () {
+                dialogHelper.close(dlg);
+            });
+
+            if (layoutManager.tv) {
+                scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+            }
+
+            load(dlg);
+            loadCategories(dlg, options);
+            dialogHelper.open(dlg);
+        });
+    });
+}
+
+export default {
+    show: showEditor
+};

src/components/guide/guide-settings.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" title="${LabelPrevious}" tabindex="-1">
+    <button is="paper-icon-button-light" class="btnCancel autoSize" title="${Previous}" tabindex="-1">
         <span class="material-icons arrow_back" aria-hidden="true"></span>
     </button>
     <h3 class="formDialogHeaderTitle">

src/components/guide/tvguide.template.html

@@ -29,10 +29,10 @@
 </div>
 
 <div class="guideOptions hide">
-    <button is="paper-icon-button-light" type="button" class="btnPreviousPage" title="${LabelPrevious}">
+    <button is="paper-icon-button-light" type="button" class="btnPreviousPage" title="${Previous}">
         <span class="material-icons arrow_back" aria-hidden="true"></span>
     </button>
-    <button is="paper-icon-button-light" type="button" class="btnNextPage" title="${LabelNext}">
+    <button is="paper-icon-button-light" type="button" class="btnNextPage" title="${Next}">
         <span class="material-icons arrow_forward" aria-hidden="true"></span>
     </button>
 </div>

src/components/homeScreenSettings/homeScreenSettings.template.html

@@ -25,7 +25,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -38,7 +38,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -51,7 +51,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -64,7 +64,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -77,7 +77,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -90,7 +90,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -103,7 +103,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>

src/components/homesections/homesections.js

@@ -696,12 +696,12 @@ import 'css!./homesections';
                 serverId: apiClient.serverId()
             }) + '" class="button-flat button-flat-mini sectionTitleTextButton">';
             html += '<h2 class="sectionTitle sectionTitle-cards">';
-            html += globalize.translate('HeaderNextUp');
+            html += globalize.translate('NextUp');
             html += '</h2>';
             html += '<span class="material-icons chevron_right"></span>';
             html += '</a>';
         } else {
-            html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';
+            html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('NextUp') + '</h2>';
         }
         html += '</div>';
 

src/components/imageDownloader/imageDownloader.js

@@ -8,7 +8,6 @@ import browser from 'browser';
 import layoutManager from 'layoutManager';
 import scrollHelper from 'scrollHelper';
 import globalize from 'globalize';
-import require from 'require';
 import 'emby-checkbox';
 import 'paper-icon-button-light';
 import 'emby-button';
@@ -317,7 +316,7 @@ import 'cardStyle';
     function showEditor(itemId, serverId, itemType) {
         loading.show();
 
-        require(['text!./imageDownloader.template.html'], function (template) {
+        import('text!./imageDownloader.template.html').then(({default: template}) => {
             const apiClient = connectionManager.getApiClient(serverId);
 
             currentItemId = itemId;

src/components/images/imageLoader.js

@@ -17,8 +17,8 @@ import 'css!./style';
             // Although the default values recommended by Blurhash developers is 32x32, a size of 18x18 seems to be the sweet spot for us,
             // improving the performance and reducing the memory usage, while retaining almost full blur quality.
             // Lower values had more visible pixelation
-            let width = 18;
+            const width = 18;
-            let height = 18;
+            const height = 18;
             let pixels;
             try {
                 pixels = blurhash.decode(blurhashstr, width, height);
@@ -27,11 +27,11 @@ import 'css!./style';
                 target.classList.add('non-blurhashable');
                 return;
             }
-            let canvas = document.createElement('canvas');
+            const canvas = document.createElement('canvas');
             canvas.width = width;
             canvas.height = height;
-            let ctx = canvas.getContext('2d');
+            const ctx = canvas.getContext('2d');
-            let imgData = ctx.createImageData(width, height);
+            const imgData = ctx.createImageData(width, height);
 
             imgData.data.set(pixels);
             ctx.putImageData(imgData, 0, 0);
@@ -55,7 +55,7 @@ import 'css!./style';
         if (!entry) {
             throw new Error('entry cannot be null');
         }
-        let target = entry.target;
+        const target = entry.target;
         var source = undefined;
 
         if (target) {
@@ -78,7 +78,7 @@ import 'css!./style';
             throw new TypeError('url cannot be undefined');
         }
 
-        let preloaderImg = new Image();
+        const preloaderImg = new Image();
         preloaderImg.src = url;
 
         elem.classList.add('lazy-hidden');

src/components/indicators/indicators.js

@@ -82,7 +82,7 @@ export function enablePlayedIndicator(item) {
 
 export function getPlayedIndicatorHtml(item) {
     if (enablePlayedIndicator(item)) {
-        let userData = item.UserData || {};
+        const userData = item.UserData || {};
         if (userData.UnplayedItemCount) {
             return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
         }

src/components/itemContextMenu.js

@@ -8,7 +8,6 @@ import browser from 'browser';
 import actionsheet from 'actionsheet';
 
 /* eslint-disable indent */
-
     export function getCommands(options) {
         const item = options.item;
         const user = options.user;
@@ -16,7 +15,7 @@ import actionsheet from 'actionsheet';
         const canPlay = playbackManager.canPlay(item);
         const restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
 
-        let commands = [];
+        const commands = [];
 
         if (canPlay && item.MediaType !== 'Photo') {
             if (options.play !== false) {
@@ -367,7 +366,7 @@ import actionsheet from 'actionsheet';
                 case 'copy-stream': {
                     const downloadHref = apiClient.getItemDownloadUrl(itemId);
                     const textAreaCopy = function () {
-                        let textArea = document.createElement('textarea');
+                        const textArea = document.createElement('textarea');
                         textArea.value = downloadHref;
                         document.body.appendChild(textArea);
                         textArea.focus();

src/components/itemsrefresher.js

@@ -1,131 +1,130 @@
-define(['playbackManager', 'serverNotifications', 'events'], function (playbackManager, serverNotifications, events) {
+import playbackManager from 'playbackManager';
-    'use strict';
+import serverNotifications from 'serverNotifications';
+import events from 'events';
 
-    serverNotifications = serverNotifications.default || serverNotifications;
+function onUserDataChanged(e, apiClient, userData) {
-    playbackManager = playbackManager.default || playbackManager;
+    const instance = this;
 
-    function onUserDataChanged(e, apiClient, userData) {
+    const eventsToMonitor = getEventsToMonitor(instance);
-        var instance = this;
-
-        var eventsToMonitor = getEventsToMonitor(instance);
-
-        // TODO: Check user data change reason?
-        if (eventsToMonitor.indexOf('markfavorite') !== -1) {
-            instance.notifyRefreshNeeded();
-        } else if (eventsToMonitor.indexOf('markplayed') !== -1) {
-            instance.notifyRefreshNeeded();
-        }
-    }
-
-    function getEventsToMonitor(instance) {
-        var options = instance.options;
-        var monitor = options ? options.monitorEvents : null;
-        if (monitor) {
-            return monitor.split(',');
-        }
-
-        return [];
-    }
-
-    function onTimerCreated(e, apiClient, data) {
-        var instance = this;
-
-        if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
-            instance.notifyRefreshNeeded();
-            return;
-        }
-    }
-
-    function onSeriesTimerCreated(e, apiClient, data) {
-        var instance = this;
-        if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
-            instance.notifyRefreshNeeded();
-            return;
-        }
-    }
-
-    function onTimerCancelled(e, apiClient, data) {
-        var instance = this;
-
-        if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
-            instance.notifyRefreshNeeded();
-            return;
-        }
-    }
-
-    function onSeriesTimerCancelled(e, apiClient, data) {
-        var instance = this;
-        if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
-            instance.notifyRefreshNeeded();
-            return;
-        }
-    }
-
-    function onLibraryChanged(e, apiClient, data) {
-        var instance = this;
-        var eventsToMonitor = getEventsToMonitor(instance);
-        if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
-            // yes this is an assumption
-            return;
-        }
-
-        var itemsAdded = data.ItemsAdded || [];
-        var itemsRemoved = data.ItemsRemoved || [];
-        if (!itemsAdded.length && !itemsRemoved.length) {
-            return;
-        }
-
-        var options = instance.options || {};
-        var parentId = options.parentId;
-        if (parentId) {
-            var foldersAddedTo = data.FoldersAddedTo || [];
-            var foldersRemovedFrom = data.FoldersRemovedFrom || [];
-            var collectionFolders = data.CollectionFolders || [];
-
-            if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
-                return;
-            }
-        }
 
+    // TODO: Check user data change reason?
+    if (eventsToMonitor.indexOf('markfavorite') !== -1) {
+        instance.notifyRefreshNeeded();
+    } else if (eventsToMonitor.indexOf('markplayed') !== -1) {
         instance.notifyRefreshNeeded();
     }
+}
 
-    function onPlaybackStopped(e, stopInfo) {
+function getEventsToMonitor(instance) {
-        var instance = this;
+    const options = instance.options;
+    const monitor = options ? options.monitorEvents : null;
+    if (monitor) {
+        return monitor.split(',');
+    }
 
-        var state = stopInfo.state;
+    return [];
+}
 
-        var eventsToMonitor = getEventsToMonitor(instance);
+function onTimerCreated(e, apiClient, data) {
-        if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
+    const instance = this;
-            if (eventsToMonitor.indexOf('videoplayback') !== -1) {
+
-                instance.notifyRefreshNeeded(true);
+    if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
-                return;
+        instance.notifyRefreshNeeded();
-            }
+        return;
-        } else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
+    }
-            if (eventsToMonitor.indexOf('audioplayback') !== -1) {
+}
-                instance.notifyRefreshNeeded(true);
+
-                return;
+function onSeriesTimerCreated(e, apiClient, data) {
-            }
+    const instance = this;
+    if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
+        instance.notifyRefreshNeeded();
+        return;
+    }
+}
+
+function onTimerCancelled(e, apiClient, data) {
+    const instance = this;
+
+    if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
+        instance.notifyRefreshNeeded();
+        return;
+    }
+}
+
+function onSeriesTimerCancelled(e, apiClient, data) {
+    const instance = this;
+    if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
+        instance.notifyRefreshNeeded();
+        return;
+    }
+}
+
+function onLibraryChanged(e, apiClient, data) {
+    const instance = this;
+    const eventsToMonitor = getEventsToMonitor(instance);
+    if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
+        // yes this is an assumption
+        return;
+    }
+
+    const itemsAdded = data.ItemsAdded || [];
+    const itemsRemoved = data.ItemsRemoved || [];
+    if (!itemsAdded.length && !itemsRemoved.length) {
+        return;
+    }
+
+    const options = instance.options || {};
+    const parentId = options.parentId;
+    if (parentId) {
+        const foldersAddedTo = data.FoldersAddedTo || [];
+        const foldersRemovedFrom = data.FoldersRemovedFrom || [];
+        const collectionFolders = data.CollectionFolders || [];
+
+        if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
+            return;
         }
     }
 
-    function addNotificationEvent(instance, name, handler, owner) {
+    instance.notifyRefreshNeeded();
-        var localHandler = handler.bind(instance);
+}
+
+function onPlaybackStopped(e, stopInfo) {
+    const instance = this;
+
+    const state = stopInfo.state;
+
+    const eventsToMonitor = getEventsToMonitor(instance);
+    if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
+        if (eventsToMonitor.indexOf('videoplayback') !== -1) {
+            instance.notifyRefreshNeeded(true);
+            return;
+        }
+    } else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
+        if (eventsToMonitor.indexOf('audioplayback') !== -1) {
+            instance.notifyRefreshNeeded(true);
+            return;
+        }
+    }
+}
+
+function addNotificationEvent(instance, name, handler, owner) {
+    const localHandler = handler.bind(instance);
+    owner = owner || serverNotifications;
+    events.on(owner, name, localHandler);
+    instance['event_' + name] = localHandler;
+}
+
+function removeNotificationEvent(instance, name, owner) {
+    const handler = instance['event_' + name];
+    if (handler) {
         owner = owner || serverNotifications;
-        events.on(owner, name, localHandler);
+        events.off(owner, name, handler);
-        instance['event_' + name] = localHandler;
+        instance['event_' + name] = null;
     }
+}
 
-    function removeNotificationEvent(instance, name, owner) {
+class ItemsRefresher {
-        var handler = instance['event_' + name];
+    constructor(options) {
-        if (handler) {
-            owner = owner || serverNotifications;
-            events.off(owner, name, handler);
-            instance['event_' + name] = null;
-        }
-    }
-
-    function ItemsRefresher(options) {
         this.options = options || {};
 
         addNotificationEvent(this, 'UserDataChanged', onUserDataChanged);
@@ -137,18 +136,18 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         addNotificationEvent(this, 'playbackstop', onPlaybackStopped, playbackManager);
     }
 
-    ItemsRefresher.prototype.pause = function () {
+    pause() {
         clearRefreshInterval(this, true);
 
         this.paused = true;
-    };
+    }
 
-    ItemsRefresher.prototype.resume = function (options) {
+    resume(options) {
         this.paused = false;
 
-        var refreshIntervalEndTime = this.refreshIntervalEndTime;
+        const refreshIntervalEndTime = this.refreshIntervalEndTime;
         if (refreshIntervalEndTime) {
-            var remainingMs = refreshIntervalEndTime - new Date().getTime();
+            const remainingMs = refreshIntervalEndTime - new Date().getTime();
             if (remainingMs > 0 && !this.needsRefresh) {
                 resetRefreshInterval(this, remainingMs);
             } else {
@@ -162,9 +161,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         }
 
         return Promise.resolve();
-    };
+    }
 
-    ItemsRefresher.prototype.refreshItems = function () {
+    refreshItems() {
         if (!this.fetchData) {
             return Promise.resolve();
         }
@@ -177,15 +176,15 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         this.needsRefresh = false;
 
         return this.fetchData().then(onDataFetched.bind(this));
-    };
+    }
 
-    ItemsRefresher.prototype.notifyRefreshNeeded = function (isInForeground) {
+    notifyRefreshNeeded(isInForeground) {
         if (this.paused) {
             this.needsRefresh = true;
             return;
         }
 
-        var timeout = this.refreshTimeout;
+        const timeout = this.refreshTimeout;
         if (timeout) {
             clearTimeout(timeout);
         }
@@ -195,44 +194,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         } else {
             this.refreshTimeout = setTimeout(this.refreshItems.bind(this), 10000);
         }
-    };
-
-    function clearRefreshInterval(instance, isPausing) {
-        if (instance.refreshInterval) {
-            clearInterval(instance.refreshInterval);
-            instance.refreshInterval = null;
-
-            if (!isPausing) {
-                instance.refreshIntervalEndTime = null;
-            }
-        }
     }
 
-    function resetRefreshInterval(instance, intervalMs) {
+    destroy() {
-        clearRefreshInterval(instance);
-
-        if (!intervalMs) {
-            var options = instance.options;
-            if (options) {
-                intervalMs = options.refreshIntervalMs;
-            }
-        }
-
-        if (intervalMs) {
-            instance.refreshInterval = setInterval(instance.notifyRefreshNeeded.bind(instance), intervalMs);
-            instance.refreshIntervalEndTime = new Date().getTime() + intervalMs;
-        }
-    }
-
-    function onDataFetched(result) {
-        resetRefreshInterval(this);
-
-        if (this.afterRefresh) {
-            this.afterRefresh(result);
-        }
-    }
-
-    ItemsRefresher.prototype.destroy = function () {
         clearRefreshInterval(this);
 
         removeNotificationEvent(this, 'UserDataChanged');
@@ -245,7 +209,42 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
 
         this.fetchData = null;
         this.options = null;
-    };
+    }
+}
 
-    return ItemsRefresher;
+function clearRefreshInterval(instance, isPausing) {
-});
+    if (instance.refreshInterval) {
+        clearInterval(instance.refreshInterval);
+        instance.refreshInterval = null;
+
+        if (!isPausing) {
+            instance.refreshIntervalEndTime = null;
+        }
+    }
+}
+
+function resetRefreshInterval(instance, intervalMs) {
+    clearRefreshInterval(instance);
+
+    if (!intervalMs) {
+        const options = instance.options;
+        if (options) {
+            intervalMs = options.refreshIntervalMs;
+        }
+    }
+
+    if (intervalMs) {
+        instance.refreshInterval = setInterval(instance.notifyRefreshNeeded.bind(instance), intervalMs);
+        instance.refreshIntervalEndTime = new Date().getTime() + intervalMs;
+    }
+}
+
+function onDataFetched(result) {
+    resetRefreshInterval(this);
+
+    if (this.afterRefresh) {
+        this.afterRefresh(result);
+    }
+}
+
+export default ItemsRefresher;

src/components/layoutManager.js

@@ -1,23 +1,19 @@
-define(['browser', 'appSettings', 'events'], function (browser, appSettings, events) {
+import browser from 'browser';
-    'use strict';
+import appSettings from 'appSettings';
+import events from 'events';
 
-    browser = browser.default || browser;
+function setLayout(instance, layout, selectedLayout) {
-
+    if (layout === selectedLayout) {
-    function setLayout(instance, layout, selectedLayout) {
+        instance[layout] = true;
-        if (layout === selectedLayout) {
+        document.documentElement.classList.add('layout-' + layout);
-            instance[layout] = true;
+    } else {
-            document.documentElement.classList.add('layout-' + layout);
+        instance[layout] = false;
-        } else {
+        document.documentElement.classList.remove('layout-' + layout);
-            instance[layout] = false;
-            document.documentElement.classList.remove('layout-' + layout);
-        }
     }
+}
 
-    function LayoutManager() {
+class LayoutManager {
-
+    setLayout(layout, save) {
-    }
-
-    LayoutManager.prototype.setLayout = function (layout, save) {
         if (!layout || layout === 'auto') {
             this.autoLayout();
 
@@ -35,13 +31,13 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
         }
 
         events.trigger(this, 'modechange');
-    };
+    }
 
-    LayoutManager.prototype.getSavedLayout = function (layout) {
+    getSavedLayout(layout) {
         return appSettings.get('layout');
-    };
+    }
 
-    LayoutManager.prototype.autoLayout = function () {
+    autoLayout() {
         // Take a guess at initial layout. The consuming app can override
         if (browser.mobile) {
             this.setLayout('mobile', false);
@@ -50,16 +46,16 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
         } else {
             this.setLayout(this.defaultLayout || 'tv', false);
         }
-    };
+    }
 
-    LayoutManager.prototype.init = function () {
+    init() {
-        var saved = this.getSavedLayout();
+        const saved = this.getSavedLayout();
         if (saved) {
             this.setLayout(saved, false);
         } else {
             this.autoLayout();
         }
-    };
+    }
+}
 
-    return new LayoutManager();
+export default new LayoutManager();
-});

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -75,9 +75,9 @@ import 'emby-input';
             html += '</h3>';
             html += '</div>';
             if (i > 0) {
-                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('ButtonUp')}" class="btnSortableMoveUp btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_up"></span></button>`;
+                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('Up')}" class="btnSortableMoveUp btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_up"></span></button>`;
             } else if (plugins.length > 1) {
-                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('ButtonDown')}" class="btnSortableMoveDown btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_down"></span></button>`;
+                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('Down')}" class="btnSortableMoveDown btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_down"></span></button>`;
             }
             html += '</div>';
         }
@@ -131,9 +131,9 @@ import 'emby-input';
             html += '</h3>';
             html += '</div>';
             if (index > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonUp') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + index + '"><span class="material-icons keyboard_arrow_up"></span></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('Up') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + index + '"><span class="material-icons keyboard_arrow_up"></span></button>';
             } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonDown') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + index + '"><span class="material-icons keyboard_arrow_down"></span></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('Down') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + index + '"><span class="material-icons keyboard_arrow_down"></span></button>';
             }
             html += '</div>';
         });
@@ -197,9 +197,9 @@ import 'emby-input';
             html += '</h3>';
             html += '</div>';
             if (i > 0) {
-                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('ButtonUp')}" class="btnSortableMoveUp btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_up"></span></button>`;
+                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('Up')}" class="btnSortableMoveUp btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_up"></span></button>`;
             } else if (plugins.length > 1) {
-                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('ButtonDown')}" class="btnSortableMoveDown btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_down"></span></button>`;
+                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('Down')}" class="btnSortableMoveDown btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_down"></span></button>`;
             }
             html += '</div>';
         }
@@ -236,9 +236,9 @@ import 'emby-input';
             html += '</h3>';
             html += '</div>';
             if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonUp') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_up"></span></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('Up') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_up"></span></button>';
             } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonDown') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('Down') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>';
             }
             html += '</div>';
         }
@@ -291,13 +291,13 @@ import 'emby-input';
         const btnSortable = elem.querySelector('.btnSortable');
         const inner = btnSortable.querySelector('.material-icons');
         if (elem.previousSibling) {
-            btnSortable.title = globalize.translate('ButtonUp');
+            btnSortable.title = globalize.translate('Up');
             btnSortable.classList.add('btnSortableMoveUp');
             btnSortable.classList.remove('btnSortableMoveDown');
             inner.classList.remove('keyboard_arrow_down');
             inner.classList.add('keyboard_arrow_up');
         } else {
-            btnSortable.title = globalize.translate('ButtonDown');
+            btnSortable.title = globalize.translate('Down');
             btnSortable.classList.remove('btnSortableMoveUp');
             btnSortable.classList.add('btnSortableMoveDown');
             inner.classList.remove('keyboard_arrow_up');

src/components/mediaLibraryCreator/mediaLibraryCreator.template.html

@@ -24,8 +24,8 @@
 
         <div class="folders">
             <div style="display: flex; align-items: center;">
-                <h1 style="margin: .5em 0;">${HeadersFolders}</h1>
+                <h1 style="margin: .5em 0;">${Folders}</h1>
-                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
+                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
                     <span class="material-icons add"></span>
                 </button>
             </div>

src/components/mediaLibraryEditor/mediaLibraryEditor.js

@@ -76,7 +76,7 @@ import 'flexStyles';
             confirm({
                 title: globalize.translate('HeaderRemoveMediaLocation'),
                 text: globalize.translate('MessageConfirmRemoveMediaLocation'),
-                confirmText: globalize.translate('ButtonDelete'),
+                confirmText: globalize.translate('Delete'),
                 primary: 'delete'
             }).then(() => {
                 const refreshAfterChange = currentOptions.refresh;

src/components/mediaLibraryEditor/mediaLibraryEditor.template.html

@@ -18,8 +18,8 @@
 
         <div class="folders hide">
             <div style="display: flex; align-items: center;">
-                <h1 style="margin: .5em 0;">${HeadersFolders}</h1>
+                <h1 style="margin: .5em 0;">${Folders}</h1>
-                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
+                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
                     <span class="material-icons add"></span>
                 </button>
             </div>

src/components/mediainfo/mediainfo.js

@@ -9,7 +9,6 @@ import 'programStyles';
 import 'emby-button';
 
 /* eslint-disable indent */
-
     function getTimerIndicator(item) {
         let status;
 
@@ -208,7 +207,7 @@ import 'emby-button';
                     });
                 } else if (item.IsSeries && !item.IsRepeat) {
                     miscInfo.push({
-                        html: `<div class="mediaInfoProgramAttribute mediaInfoItem newTvProgram">${globalize.translate('AttributeNew')}</div>`
+                        html: `<div class="mediaInfoProgramAttribute mediaInfoItem newTvProgram">${globalize.translate('New')}</div>`
                     });
                 } else if (item.IsSeries && item.IsRepeat) {
                     miscInfo.push({

src/components/metadataEditor/metadataEditor.js

@@ -6,7 +6,6 @@ import loading from 'loading';
 import focusManager from 'focusManager';
 import connectionManager from 'connectionManager';
 import globalize from 'globalize';
-import require from 'require';
 import shell from 'shell';
 import 'emby-checkbox';
 import 'emby-input';
@@ -37,7 +36,7 @@ import 'flexStyles';
 
     function submitUpdatedItem(form, item) {
         function afterContentTypeUpdated() {
-            require(['toast'], function (toast) {
+            import('toast').then(({default: toast}) => {
                 toast(globalize.translate('MessageItemSaved'));
             });
 
@@ -227,7 +226,7 @@ import 'flexStyles';
     }
 
     function editPerson(context, person, index) {
-        require(['personEditor'], function (personEditor) {
+        import('personEditor').then(({default: personEditor}) => {
             personEditor.show(person).then(function (updatedPerson) {
                 const isNew = index === -1;
 
@@ -246,14 +245,14 @@ import 'flexStyles';
         if (parentId) {
             reload(context, parentId, item.ServerId);
         } else {
-            require(['appRouter'], function (appRouter) {
+            import('appRouter').then(({default: appRouter}) => {
                 appRouter.goHome();
             });
         }
     }
 
     function showMoreMenu(context, button, user) {
-        require(['itemContextMenu'], function (itemContextMenu) {
+        import('itemContextMenu').then(({default: itemContextMenu}) => {
             var item = currentItem;
 
             itemContextMenu.show({
@@ -907,7 +906,7 @@ import 'flexStyles';
     }
 
     function populatePeople(context, people) {
-        let lastType = '';
+        const lastType = '';
         let html = '';
 
         const elem = context.querySelector('#peopleList');

src/components/multiSelect/multiSelect.js

@@ -198,7 +198,7 @@ import 'css!./multiSelect';
 
             if (user.Policy.EnableContentDownloading && appHost.supports('filedownload')) {
                 menuItems.push({
-                    name: globalize.translate('ButtonDownload'),
+                    name: globalize.translate('Download'),
                     id: 'download',
                     icon: 'file_download'
                 });

src/components/notifications/notifications.js

@@ -1,182 +1,181 @@
-define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'require'], function (serverNotifications, playbackManager, events, globalize, require) {
+import serverNotifications from 'serverNotifications';
-    'use strict';
+import playbackManager from 'playbackManager';
+import events from 'events';
+import globalize from 'globalize';
 
-    playbackManager = playbackManager.default || playbackManager;
+function onOneDocumentClick() {
-    serverNotifications = serverNotifications.default || serverNotifications;
+    document.removeEventListener('click', onOneDocumentClick);
+    document.removeEventListener('keydown', onOneDocumentClick);
 
-    function onOneDocumentClick() {
+    // don't request notification permissions if they're already granted or denied
-        document.removeEventListener('click', onOneDocumentClick);
+    if (window.Notification && window.Notification.permission === 'default') {
-        document.removeEventListener('keydown', onOneDocumentClick);
-
-        // don't request notification permissions if they're already granted or denied
-        if (window.Notification && window.Notification.permission === 'default') {
-            /* eslint-disable-next-line compat/compat */
-            Notification.requestPermission();
-        }
-    }
-
-    document.addEventListener('click', onOneDocumentClick);
-    document.addEventListener('keydown', onOneDocumentClick);
-
-    var serviceWorkerRegistration;
-
-    function closeAfter(notification, timeoutMs) {
-        setTimeout(function () {
-            if (notification.close) {
-                notification.close();
-            } else if (notification.cancel) {
-                notification.cancel();
-            }
-        }, timeoutMs);
-    }
-
-    function resetRegistration() {
         /* eslint-disable-next-line compat/compat */
-        var serviceWorker = navigator.serviceWorker;
+        Notification.requestPermission();
-        if (serviceWorker) {
+    }
-            serviceWorker.ready.then(function (registration) {
+}
-                serviceWorkerRegistration = registration;
+
-            });
+document.addEventListener('click', onOneDocumentClick);
+document.addEventListener('keydown', onOneDocumentClick);
+
+let serviceWorkerRegistration;
+
+function closeAfter(notification, timeoutMs) {
+    setTimeout(function () {
+        if (notification.close) {
+            notification.close();
+        } else if (notification.cancel) {
+            notification.cancel();
+        }
+    }, timeoutMs);
+}
+
+function resetRegistration() {
+    /* eslint-disable-next-line compat/compat */
+    let serviceWorker = navigator.serviceWorker;
+    if (serviceWorker) {
+        serviceWorker.ready.then(function (registration) {
+            serviceWorkerRegistration = registration;
+        });
+    }
+}
+
+resetRegistration();
+
+function showPersistentNotification(title, options, timeoutMs) {
+    serviceWorkerRegistration.showNotification(title, options);
+}
+
+function showNonPersistentNotification(title, options, timeoutMs) {
+    try {
+        let notif = new Notification(title, options); /* eslint-disable-line compat/compat */
+
+        if (notif.show) {
+            notif.show();
+        }
+
+        if (timeoutMs) {
+            closeAfter(notif, timeoutMs);
+        }
+    } catch (err) {
+        if (options.actions) {
+            options.actions = [];
+            showNonPersistentNotification(title, options, timeoutMs);
+        } else {
+            throw err;
         }
     }
+}
+
+function showNotification(options, timeoutMs, apiClient) {
+    let title = options.title;
+
+    options.data = options.data || {};
+    options.data.serverId = apiClient.serverInfo().Id;
+    options.icon = options.icon || getIconUrl();
+    options.badge = options.badge || getIconUrl('badge.png');
 
     resetRegistration();
 
-    function showPersistentNotification(title, options, timeoutMs) {
+    if (serviceWorkerRegistration) {
-        serviceWorkerRegistration.showNotification(title, options);
+        showPersistentNotification(title, options, timeoutMs);
+        return;
     }
 
-    function showNonPersistentNotification(title, options, timeoutMs) {
+    showNonPersistentNotification(title, options, timeoutMs);
-        try {
+}
-            var notif = new Notification(title, options); /* eslint-disable-line compat/compat */
 
-            if (notif.show) {
+function showNewItemNotification(item, apiClient) {
-                notif.show();
+    if (playbackManager.isPlayingLocally(['Video'])) {
-            }
+        return;
-
-            if (timeoutMs) {
-                closeAfter(notif, timeoutMs);
-            }
-        } catch (err) {
-            if (options.actions) {
-                options.actions = [];
-                showNonPersistentNotification(title, options, timeoutMs);
-            } else {
-                throw err;
-            }
-        }
     }
 
-    function showNotification(options, timeoutMs, apiClient) {
+    let body = item.Name;
-        var title = options.title;
 
-        options.data = options.data || {};
+    if (item.SeriesName) {
-        options.data.serverId = apiClient.serverInfo().Id;
+        body = item.SeriesName + ' - ' + body;
-        options.icon = options.icon || getIconUrl();
-        options.badge = options.badge || getIconUrl('badge.png');
-
-        resetRegistration();
-
-        if (serviceWorkerRegistration) {
-            showPersistentNotification(title, options, timeoutMs);
-            return;
-        }
-
-        showNonPersistentNotification(title, options, timeoutMs);
     }
 
-    function showNewItemNotification(item, apiClient) {
+    let notification = {
-        if (playbackManager.isPlayingLocally(['Video'])) {
+        title: 'New ' + item.Type,
-            return;
+        body: body,
-        }
+        vibrate: true,
+        tag: 'newItem' + item.Id,
+        data: {}
+    };
 
-        var body = item.Name;
+    let imageTags = item.ImageTags || {};
 
-        if (item.SeriesName) {
+    if (imageTags.Primary) {
-            body = item.SeriesName + ' - ' + body;
+        notification.icon = apiClient.getScaledImageUrl(item.Id, {
-        }
+            width: 80,
-
+            tag: imageTags.Primary,
-        var notification = {
+            type: 'Primary'
-            title: 'New ' + item.Type,
-            body: body,
-            vibrate: true,
-            tag: 'newItem' + item.Id,
-            data: {}
-        };
-
-        var imageTags = item.ImageTags || {};
-
-        if (imageTags.Primary) {
-            notification.icon = apiClient.getScaledImageUrl(item.Id, {
-                width: 80,
-                tag: imageTags.Primary,
-                type: 'Primary'
-            });
-        }
-
-        showNotification(notification, 15000, apiClient);
-    }
-
-    function onLibraryChanged(data, apiClient) {
-        var newItems = data.ItemsAdded;
-
-        if (!newItems.length) {
-            return;
-        }
-
-        // Don't put a massive number of Id's onto the query string
-        if (newItems.length > 12) {
-            newItems.length = 12;
-        }
-
-        apiClient.getItems(apiClient.getCurrentUserId(), {
-
-            Recursive: true,
-            Limit: 3,
-            Filters: 'IsNotFolder',
-            SortBy: 'DateCreated',
-            SortOrder: 'Descending',
-            Ids: newItems.join(','),
-            MediaTypes: 'Audio,Video',
-            EnableTotalRecordCount: false
-
-        }).then(function (result) {
-            var items = result.Items;
-
-            for (var i = 0, length = items.length ; i < length; i++) {
-                showNewItemNotification(items[i], apiClient);
-            }
         });
     }
 
-    function getIconUrl(name) {
+    showNotification(notification, 15000, apiClient);
-        name = name || 'notificationicon.png';
+}
-        return require.toUrl('.').split('?')[0] + '/' + name;
+
+function onLibraryChanged(data, apiClient) {
+    let newItems = data.ItemsAdded;
+
+    if (!newItems.length) {
+        return;
     }
 
-    function showPackageInstallNotification(apiClient, installation, status) {
+    // Don't put a massive number of Id's onto the query string
-        apiClient.getCurrentUser().then(function (user) {
+    if (newItems.length > 12) {
-            if (!user.Policy.IsAdministrator) {
+        newItems.length = 12;
-                return;
+    }
-            }
 
-            var notification = {
+    apiClient.getItems(apiClient.getCurrentUserId(), {
-                tag: 'install' + installation.Id,
-                data: {}
-            };
 
-            if (status === 'completed') {
+        Recursive: true,
-                notification.title = globalize.translate('PackageInstallCompleted', installation.Name, installation.Version);
+        Limit: 3,
-                notification.vibrate = true;
+        Filters: 'IsNotFolder',
-            } else if (status === 'cancelled') {
+        SortBy: 'DateCreated',
-                notification.title = globalize.translate('PackageInstallCancelled', installation.Name, installation.Version);
+        SortOrder: 'Descending',
-            } else if (status === 'failed') {
+        Ids: newItems.join(','),
-                notification.title = globalize.translate('PackageInstallFailed', installation.Name, installation.Version);
+        MediaTypes: 'Audio,Video',
-                notification.vibrate = true;
+        EnableTotalRecordCount: false
-            } else if (status === 'progress') {
-                notification.title = globalize.translate('InstallingPackage', installation.Name, installation.Version);
 
-                notification.actions =
+    }).then(function (result) {
+        let items = result.Items;
+
+        for (const item of items) {
+            showNewItemNotification(item, apiClient);
+        }
+    });
+}
+
+function getIconUrl(name) {
+    name = name || 'notificationicon.png';
+    return './components/notifications/' + name;
+}
+
+function showPackageInstallNotification(apiClient, installation, status) {
+    apiClient.getCurrentUser().then(function (user) {
+        if (!user.Policy.IsAdministrator) {
+            return;
+        }
+
+        let notification = {
+            tag: 'install' + installation.Id,
+            data: {}
+        };
+
+        if (status === 'completed') {
+            notification.title = globalize.translate('PackageInstallCompleted', installation.Name, installation.Version);
+            notification.vibrate = true;
+        } else if (status === 'cancelled') {
+            notification.title = globalize.translate('PackageInstallCancelled', installation.Name, installation.Version);
+        } else if (status === 'failed') {
+            notification.title = globalize.translate('PackageInstallFailed', installation.Name, installation.Version);
+            notification.vibrate = true;
+        } else if (status === 'progress') {
+            notification.title = globalize.translate('InstallingPackage', installation.Name, installation.Version);
+
+            notification.actions =
                 [
                     {
                         action: 'cancel-install',
@@ -185,67 +184,67 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
                     }
                 ];
 
-                notification.data.id = installation.id;
+            notification.data.id = installation.id;
-            }
+        }
 
-            if (status === 'progress') {
+        if (status === 'progress') {
-                var percentComplete = Math.round(installation.PercentComplete || 0);
+            let percentComplete = Math.round(installation.PercentComplete || 0);
 
-                notification.body = percentComplete + '% complete.';
+            notification.body = percentComplete + '% complete.';
-            }
+        }
 
-            var timeout = status === 'cancelled' ? 5000 : 0;
+        let timeout = status === 'cancelled' ? 5000 : 0;
 
-            showNotification(notification, timeout, apiClient);
+        showNotification(notification, timeout, apiClient);
-        });
-    }
-
-    events.on(serverNotifications, 'LibraryChanged', function (e, apiClient, data) {
-        onLibraryChanged(data, apiClient);
     });
+}
 
-    events.on(serverNotifications, 'PackageInstallationCompleted', function (e, apiClient, data) {
+events.on(serverNotifications, 'LibraryChanged', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, 'completed');
+    onLibraryChanged(data, apiClient);
-    });
+});
 
-    events.on(serverNotifications, 'PackageInstallationFailed', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstallationCompleted', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, 'failed');
+    showPackageInstallNotification(apiClient, data, 'completed');
-    });
+});
 
-    events.on(serverNotifications, 'PackageInstallationCancelled', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstallationFailed', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, 'cancelled');
+    showPackageInstallNotification(apiClient, data, 'failed');
-    });
+});
 
-    events.on(serverNotifications, 'PackageInstalling', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstallationCancelled', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, 'progress');
+    showPackageInstallNotification(apiClient, data, 'cancelled');
-    });
+});
 
-    events.on(serverNotifications, 'ServerShuttingDown', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstalling', function (e, apiClient, data) {
-        var serverId = apiClient.serverInfo().Id;
+    showPackageInstallNotification(apiClient, data, 'progress');
-        var notification = {
+});
-            tag: 'restart' + serverId,
-            title: globalize.translate('ServerNameIsShuttingDown', apiClient.serverInfo().Name)
-        };
-        showNotification(notification, 0, apiClient);
-    });
 
-    events.on(serverNotifications, 'ServerRestarting', function (e, apiClient, data) {
+events.on(serverNotifications, 'ServerShuttingDown', function (e, apiClient, data) {
-        var serverId = apiClient.serverInfo().Id;
+    let serverId = apiClient.serverInfo().Id;
-        var notification = {
+    let notification = {
-            tag: 'restart' + serverId,
+        tag: 'restart' + serverId,
-            title: globalize.translate('ServerNameIsRestarting', apiClient.serverInfo().Name)
+        title: globalize.translate('ServerNameIsShuttingDown', apiClient.serverInfo().Name)
-        };
+    };
-        showNotification(notification, 0, apiClient);
+    showNotification(notification, 0, apiClient);
-    });
+});
 
-    events.on(serverNotifications, 'RestartRequired', function (e, apiClient) {
+events.on(serverNotifications, 'ServerRestarting', function (e, apiClient, data) {
-        var serverId = apiClient.serverInfo().Id;
+    let serverId = apiClient.serverInfo().Id;
-        var notification = {
+    let notification = {
-            tag: 'restart' + serverId,
+        tag: 'restart' + serverId,
-            title: globalize.translate('PleaseRestartServerName', apiClient.serverInfo().Name)
+        title: globalize.translate('ServerNameIsRestarting', apiClient.serverInfo().Name)
-        };
+    };
+    showNotification(notification, 0, apiClient);
+});
 
-        notification.actions =
+events.on(serverNotifications, 'RestartRequired', function (e, apiClient) {
+    let serverId = apiClient.serverInfo().Id;
+    let notification = {
+        tag: 'restart' + serverId,
+        title: globalize.translate('PleaseRestartServerName', apiClient.serverInfo().Name)
+    };
+
+    notification.actions =
         [
             {
                 action: 'restart',
@@ -254,6 +253,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             }
         ];
 
-        showNotification(notification, 0, apiClient);
+    showNotification(notification, 0, apiClient);
-    });
 });
+

src/components/nowPlayingBar/nowPlayingBar.js

@@ -500,20 +500,20 @@ import 'emby-ratingbutton';
         const textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : [];
         nowPlayingTextElement.innerHTML = '';
         if (textLines) {
-            let itemText = document.createElement('div');
+            const itemText = document.createElement('div');
-            let secondaryText = document.createElement('div');
+            const secondaryText = document.createElement('div');
             secondaryText.classList.add('nowPlayingBarSecondaryText');
             if (textLines.length > 1) {
                 textLines[1].secondary = true;
                 if (textLines[1].text) {
-                    let text = document.createElement('a');
+                    const text = document.createElement('a');
                     text.innerHTML = textLines[1].text;
                     secondaryText.appendChild(text);
                 }
             }
 
             if (textLines[0].text) {
-                let text = document.createElement('a');
+                const text = document.createElement('a');
                 text.innerHTML = textLines[0].text;
                 itemText.appendChild(text);
             }
@@ -555,10 +555,10 @@ import 'emby-ratingbutton';
                     if (!layoutManager.mobile) {
                         let contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
                         // We remove the previous event listener by replacing the item in each update event
-                        let contextButtonClone = contextButton.cloneNode(true);
+                        const contextButtonClone = contextButton.cloneNode(true);
                         contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
                         contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
-                        let options = {
+                        const options = {
                             play: false,
                             queue: false,
                             clearQueue: true,
@@ -600,10 +600,10 @@ import 'emby-ratingbutton';
             return;
         }
 
-        let shuffleMode = playbackManager.getQueueShuffleMode();
+        const shuffleMode = playbackManager.getQueueShuffleMode();
-        let context = nowPlayingBarElement;
+        const context = nowPlayingBarElement;
         const cssClass = 'buttonActive';
-        let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
+        const toggleShuffleButton = context.querySelector('.btnShuffleQueue');
         switch (shuffleMode) {
             case 'Shuffle':
                 toggleShuffleButton.classList.add(cssClass);

src/components/playback/mediasession.js

@@ -127,7 +127,7 @@ import connectionManager from 'connectionManager';
                 artwork: getImageUrls(item)
             });
         } else {
-            let itemImageUrl = seriesImageUrl(item, { maxHeight: 3000 }) || imageUrl(item, { maxHeight: 3000 });
+            const itemImageUrl = seriesImageUrl(item, { maxHeight: 3000 }) || imageUrl(item, { maxHeight: 3000 });
 
             window.NativeShell.updateMediaSession({
                 action: eventName,
@@ -244,10 +244,10 @@ import connectionManager from 'connectionManager';
 
         /* eslint-disable-next-line compat/compat */
         navigator.mediaSession.setActionHandler('seekto', function (object) {
-            let item = playbackManager.getPlayerState(currentPlayer).NowPlayingItem;
+            const item = playbackManager.getPlayerState(currentPlayer).NowPlayingItem;
             // Convert to ms
-            let duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0);
+            const duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0);
-            let wantedTime = object.seekTime * 1000;
+            const wantedTime = object.seekTime * 1000;
             playbackManager.seekPercent(wantedTime / duration * 100, currentPlayer);
         });
     }

src/components/playback/playbackmanager.js

@@ -8,7 +8,7 @@ import * as userSettings from 'userSettings';
 import globalize from 'globalize';
 import connectionManager from 'connectionManager';
 import loading from 'loading';
-import apphost from 'apphost';
+import appHost from 'apphost';
 import screenfull from 'screenfull';
 
 function enableLocalPlaylistManagement(player) {
@@ -322,7 +322,7 @@ function getAudioStreamUrl(item, transcodingProfile, directPlayContainers, maxBi
         PlaySessionId: startingPlaySession,
         StartTimeTicks: startPosition || 0,
         EnableRedirection: true,
-        EnableRemoteMedia: apphost.supports('remoteaudio')
+        EnableRemoteMedia: appHost.supports('remoteaudio')
     });
 }
 
@@ -606,7 +606,7 @@ function supportsDirectPlay(apiClient, item, mediaSource) {
     const isFolderRip = mediaSource.VideoType === 'BluRay' || mediaSource.VideoType === 'Dvd' || mediaSource.VideoType === 'HdDvd';
 
     if (mediaSource.SupportsDirectPlay || isFolderRip) {
-        if (mediaSource.IsRemote && !apphost.supports('remotevideo')) {
+        if (mediaSource.IsRemote && !appHost.supports('remotevideo')) {
             return Promise.resolve(false);
         }
 
@@ -1416,8 +1416,8 @@ class PlaybackManager {
 
         self.toggleFullscreen = function (player) {
             player = player || self._currentPlayer;
-            if (!player.isLocalPlayer || player.toggleFulscreen) {
+            if (!player.isLocalPlayer || player.toggleFullscreen) {
-                return player.toggleFulscreen();
+                return player.toggleFullscreen();
             }
 
             if (screenfull.isEnabled) {
@@ -3156,7 +3156,7 @@ class PlaybackManager {
             return streamInfo ? streamInfo.playbackStartTimeTicks : null;
         };
 
-        if (apphost.supports('remotecontrol')) {
+        if (appHost.supports('remotecontrol')) {
             import('serverNotifications').then(({ default: serverNotifications }) => {
                 events.on(serverNotifications, 'ServerShuttingDown', self.setDefaultPlayerActive.bind(self));
                 events.on(serverNotifications, 'ServerRestarting', self.setDefaultPlayerActive.bind(self));
@@ -3520,7 +3520,7 @@ class PlaybackManager {
                 'PlayTrailers'
             ];
 
-            if (apphost.supports('fullscreenchange')) {
+            if (appHost.supports('fullscreenchange')) {
                 list.push('ToggleFullscreen');
             }
 

src/components/playbackSettings/playbackSettings.template.html

@@ -99,6 +99,6 @@
     </div>
 
     <button is="emby-button" type="submit" class="raised button-submit block btnSave hide">
-        <span>${ButtonSave}</span>
+        <span>${Save}</span>
     </button>
 </form>

src/components/qualityOptions.js

@@ -1,160 +1,158 @@
-define(['globalize'], function (globalize) {
+import globalize from 'globalize';
-    'use strict';
 
-    function getVideoQualityOptions(options) {
+export function getVideoQualityOptions(options) {
-        var maxStreamingBitrate = options.currentMaxBitrate;
+    var maxStreamingBitrate = options.currentMaxBitrate;
-        var videoWidth = options.videoWidth;
+    var videoWidth = options.videoWidth;
-        var videoHeight = options.videoHeight;
+    var videoHeight = options.videoHeight;
 
-        // If the aspect ratio is less than 16/9 (1.77), set the width as if it were pillarboxed.
+    // If the aspect ratio is less than 16/9 (1.77), set the width as if it were pillarboxed.
-        // 4:3 1440x1080 -> 1920x1080
+    // 4:3 1440x1080 -> 1920x1080
-        if (videoWidth / videoHeight < 16 / 9) {
+    if (videoWidth / videoHeight < 16 / 9) {
-            videoWidth = videoHeight * (16 / 9);
+        videoWidth = videoHeight * (16 / 9);
-        }
-
-        var maxAllowedWidth = videoWidth || 4096;
-
-        var qualityOptions = [];
-
-        if (maxAllowedWidth >= 3800) {
-            qualityOptions.push({ name: '4K - 120 Mbps', maxHeight: 2160, bitrate: 120000000 });
-            qualityOptions.push({ name: '4K - 100 Mbps', maxHeight: 2160, bitrate: 100000000 });
-            qualityOptions.push({ name: '4K - 80 Mbps', maxHeight: 2160, bitrate: 80000000 });
-        }
-
-        // Some 1080- videos are reported as 1912?
-        if (maxAllowedWidth >= 1900) {
-            qualityOptions.push({ name: '1080p - 60 Mbps', maxHeight: 1080, bitrate: 60000000 });
-            qualityOptions.push({ name: '1080p - 50 Mbps', maxHeight: 1080, bitrate: 50000000 });
-            qualityOptions.push({ name: '1080p - 40 Mbps', maxHeight: 1080, bitrate: 40000000 });
-            qualityOptions.push({ name: '1080p - 30 Mbps', maxHeight: 1080, bitrate: 30000000 });
-            qualityOptions.push({ name: '1080p - 25 Mbps', maxHeight: 1080, bitrate: 25000000 });
-            qualityOptions.push({ name: '1080p - 20 Mbps', maxHeight: 1080, bitrate: 20000000 });
-            qualityOptions.push({ name: '1080p - 15 Mbps', maxHeight: 1080, bitrate: 15000000 });
-            qualityOptions.push({ name: '1080p - 10 Mbps', maxHeight: 1080, bitrate: 10000001 });
-            qualityOptions.push({ name: '1080p - 8 Mbps', maxHeight: 1080, bitrate: 8000001 });
-            qualityOptions.push({ name: '1080p - 6 Mbps', maxHeight: 1080, bitrate: 6000001 });
-            qualityOptions.push({ name: '1080p - 5 Mbps', maxHeight: 1080, bitrate: 5000001 });
-            qualityOptions.push({ name: '1080p - 4 Mbps', maxHeight: 1080, bitrate: 4000002 });
-        } else if (maxAllowedWidth >= 1260) {
-            qualityOptions.push({ name: '720p - 10 Mbps', maxHeight: 720, bitrate: 10000000 });
-            qualityOptions.push({ name: '720p - 8 Mbps', maxHeight: 720, bitrate: 8000000 });
-            qualityOptions.push({ name: '720p - 6 Mbps', maxHeight: 720, bitrate: 6000000 });
-            qualityOptions.push({ name: '720p - 5 Mbps', maxHeight: 720, bitrate: 5000000 });
-        } else if (maxAllowedWidth >= 620) {
-            qualityOptions.push({ name: '480p - 4 Mbps', maxHeight: 480, bitrate: 4000001 });
-            qualityOptions.push({ name: '480p - 3 Mbps', maxHeight: 480, bitrate: 3000001 });
-            qualityOptions.push({ name: '480p - 2.5 Mbps', maxHeight: 480, bitrate: 2500000 });
-            qualityOptions.push({ name: '480p - 2 Mbps', maxHeight: 480, bitrate: 2000001 });
-            qualityOptions.push({ name: '480p - 1.5 Mbps', maxHeight: 480, bitrate: 1500001 });
-        }
-
-        if (maxAllowedWidth >= 1260) {
-            qualityOptions.push({ name: '720p - 4 Mbps', maxHeight: 720, bitrate: 4000000 });
-            qualityOptions.push({ name: '720p - 3 Mbps', maxHeight: 720, bitrate: 3000000 });
-            qualityOptions.push({ name: '720p - 2 Mbps', maxHeight: 720, bitrate: 2000000 });
-
-            // The extra 1 is because they're keyed off the bitrate value
-            qualityOptions.push({ name: '720p - 1.5 Mbps', maxHeight: 720, bitrate: 1500000 });
-            qualityOptions.push({ name: '720p - 1 Mbps', maxHeight: 720, bitrate: 1000001 });
-        }
-
-        qualityOptions.push({ name: '480p - 1 Mbps', maxHeight: 480, bitrate: 1000000 });
-        qualityOptions.push({ name: '480p - 720 kbps', maxHeight: 480, bitrate: 720000 });
-        qualityOptions.push({ name: '480p - 420 kbps', maxHeight: 480, bitrate: 420000 });
-        qualityOptions.push({ name: '360p', maxHeight: 360, bitrate: 400000 });
-        qualityOptions.push({ name: '240p', maxHeight: 240, bitrate: 320000 });
-        qualityOptions.push({ name: '144p', maxHeight: 144, bitrate: 192000 });
-
-        var autoQualityOption = {
-            name: globalize.translate('Auto'),
-            bitrate: 0,
-            selected: options.isAutomaticBitrateEnabled
-        };
-
-        if (options.enableAuto) {
-            qualityOptions.push(autoQualityOption);
-        }
-
-        if (maxStreamingBitrate) {
-            var selectedIndex = -1;
-            for (var i = 0, length = qualityOptions.length; i < length; i++) {
-                var option = qualityOptions[i];
-
-                if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
-                    selectedIndex = i;
-                }
-            }
-
-            if (selectedIndex === -1) {
-                selectedIndex = qualityOptions.length - 1;
-            }
-
-            var currentQualityOption = qualityOptions[selectedIndex];
-
-            if (!options.isAutomaticBitrateEnabled) {
-                currentQualityOption.selected = true;
-            } else {
-                autoQualityOption.autoText = currentQualityOption.name;
-            }
-        }
-
-        return qualityOptions;
     }
 
-    function getAudioQualityOptions(options) {
+    var maxAllowedWidth = videoWidth || 4096;
-        var maxStreamingBitrate = options.currentMaxBitrate;
 
-        var qualityOptions = [];
+    var qualityOptions = [];
 
-        qualityOptions.push({ name: '2 Mbps', bitrate: 2000000 });
+    if (maxAllowedWidth >= 3800) {
-        qualityOptions.push({ name: '1.5 Mbps', bitrate: 1500000 });
+        qualityOptions.push({ name: '4K - 120 Mbps', maxHeight: 2160, bitrate: 120000000 });
-        qualityOptions.push({ name: '1 Mbps', bitrate: 1000000 });
+        qualityOptions.push({ name: '4K - 100 Mbps', maxHeight: 2160, bitrate: 100000000 });
-        qualityOptions.push({ name: '320 kbps', bitrate: 320000 });
+        qualityOptions.push({ name: '4K - 80 Mbps', maxHeight: 2160, bitrate: 80000000 });
-        qualityOptions.push({ name: '256 kbps', bitrate: 256000 });
-        qualityOptions.push({ name: '192 kbps', bitrate: 192000 });
-        qualityOptions.push({ name: '128 kbps', bitrate: 128000 });
-        qualityOptions.push({ name: '96 kbps', bitrate: 96000 });
-        qualityOptions.push({ name: '64 kbps', bitrate: 64000 });
-
-        var autoQualityOption = {
-            name: globalize.translate('Auto'),
-            bitrate: 0,
-            selected: options.isAutomaticBitrateEnabled
-        };
-
-        if (options.enableAuto) {
-            qualityOptions.push(autoQualityOption);
-        }
-
-        if (maxStreamingBitrate) {
-            var selectedIndex = -1;
-            for (var i = 0, length = qualityOptions.length; i < length; i++) {
-                var option = qualityOptions[i];
-
-                if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
-                    selectedIndex = i;
-                }
-            }
-
-            if (selectedIndex === -1) {
-                selectedIndex = qualityOptions.length - 1;
-            }
-
-            var currentQualityOption = qualityOptions[selectedIndex];
-
-            if (!options.isAutomaticBitrateEnabled) {
-                currentQualityOption.selected = true;
-            } else {
-                autoQualityOption.autoText = currentQualityOption.name;
-            }
-        }
-
-        return qualityOptions;
     }
 
-    return {
+    // Some 1080- videos are reported as 1912?
-        getVideoQualityOptions: getVideoQualityOptions,
+    if (maxAllowedWidth >= 1900) {
-        getAudioQualityOptions: getAudioQualityOptions
+        qualityOptions.push({ name: '1080p - 60 Mbps', maxHeight: 1080, bitrate: 60000000 });
+        qualityOptions.push({ name: '1080p - 50 Mbps', maxHeight: 1080, bitrate: 50000000 });
+        qualityOptions.push({ name: '1080p - 40 Mbps', maxHeight: 1080, bitrate: 40000000 });
+        qualityOptions.push({ name: '1080p - 30 Mbps', maxHeight: 1080, bitrate: 30000000 });
+        qualityOptions.push({ name: '1080p - 25 Mbps', maxHeight: 1080, bitrate: 25000000 });
+        qualityOptions.push({ name: '1080p - 20 Mbps', maxHeight: 1080, bitrate: 20000000 });
+        qualityOptions.push({ name: '1080p - 15 Mbps', maxHeight: 1080, bitrate: 15000000 });
+        qualityOptions.push({ name: '1080p - 10 Mbps', maxHeight: 1080, bitrate: 10000001 });
+        qualityOptions.push({ name: '1080p - 8 Mbps', maxHeight: 1080, bitrate: 8000001 });
+        qualityOptions.push({ name: '1080p - 6 Mbps', maxHeight: 1080, bitrate: 6000001 });
+        qualityOptions.push({ name: '1080p - 5 Mbps', maxHeight: 1080, bitrate: 5000001 });
+        qualityOptions.push({ name: '1080p - 4 Mbps', maxHeight: 1080, bitrate: 4000002 });
+    } else if (maxAllowedWidth >= 1260) {
+        qualityOptions.push({ name: '720p - 10 Mbps', maxHeight: 720, bitrate: 10000000 });
+        qualityOptions.push({ name: '720p - 8 Mbps', maxHeight: 720, bitrate: 8000000 });
+        qualityOptions.push({ name: '720p - 6 Mbps', maxHeight: 720, bitrate: 6000000 });
+        qualityOptions.push({ name: '720p - 5 Mbps', maxHeight: 720, bitrate: 5000000 });
+    } else if (maxAllowedWidth >= 620) {
+        qualityOptions.push({ name: '480p - 4 Mbps', maxHeight: 480, bitrate: 4000001 });
+        qualityOptions.push({ name: '480p - 3 Mbps', maxHeight: 480, bitrate: 3000001 });
+        qualityOptions.push({ name: '480p - 2.5 Mbps', maxHeight: 480, bitrate: 2500000 });
+        qualityOptions.push({ name: '480p - 2 Mbps', maxHeight: 480, bitrate: 2000001 });
+        qualityOptions.push({ name: '480p - 1.5 Mbps', maxHeight: 480, bitrate: 1500001 });
+    }
+
+    if (maxAllowedWidth >= 1260) {
+        qualityOptions.push({ name: '720p - 4 Mbps', maxHeight: 720, bitrate: 4000000 });
+        qualityOptions.push({ name: '720p - 3 Mbps', maxHeight: 720, bitrate: 3000000 });
+        qualityOptions.push({ name: '720p - 2 Mbps', maxHeight: 720, bitrate: 2000000 });
+
+        // The extra 1 is because they're keyed off the bitrate value
+        qualityOptions.push({ name: '720p - 1.5 Mbps', maxHeight: 720, bitrate: 1500000 });
+        qualityOptions.push({ name: '720p - 1 Mbps', maxHeight: 720, bitrate: 1000001 });
+    }
+
+    qualityOptions.push({ name: '480p - 1 Mbps', maxHeight: 480, bitrate: 1000000 });
+    qualityOptions.push({ name: '480p - 720 kbps', maxHeight: 480, bitrate: 720000 });
+    qualityOptions.push({ name: '480p - 420 kbps', maxHeight: 480, bitrate: 420000 });
+    qualityOptions.push({ name: '360p', maxHeight: 360, bitrate: 400000 });
+    qualityOptions.push({ name: '240p', maxHeight: 240, bitrate: 320000 });
+    qualityOptions.push({ name: '144p', maxHeight: 144, bitrate: 192000 });
+
+    var autoQualityOption = {
+        name: globalize.translate('Auto'),
+        bitrate: 0,
+        selected: options.isAutomaticBitrateEnabled
     };
-});
+
+    if (options.enableAuto) {
+        qualityOptions.push(autoQualityOption);
+    }
+
+    if (maxStreamingBitrate) {
+        var selectedIndex = -1;
+        for (var i = 0, length = qualityOptions.length; i < length; i++) {
+            var option = qualityOptions[i];
+
+            if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
+                selectedIndex = i;
+            }
+        }
+
+        if (selectedIndex === -1) {
+            selectedIndex = qualityOptions.length - 1;
+        }
+
+        var currentQualityOption = qualityOptions[selectedIndex];
+
+        if (!options.isAutomaticBitrateEnabled) {
+            currentQualityOption.selected = true;
+        } else {
+            autoQualityOption.autoText = currentQualityOption.name;
+        }
+    }
+
+    return qualityOptions;
+}
+
+export function getAudioQualityOptions(options) {
+    var maxStreamingBitrate = options.currentMaxBitrate;
+
+    var qualityOptions = [];
+
+    qualityOptions.push({ name: '2 Mbps', bitrate: 2000000 });
+    qualityOptions.push({ name: '1.5 Mbps', bitrate: 1500000 });
+    qualityOptions.push({ name: '1 Mbps', bitrate: 1000000 });
+    qualityOptions.push({ name: '320 kbps', bitrate: 320000 });
+    qualityOptions.push({ name: '256 kbps', bitrate: 256000 });
+    qualityOptions.push({ name: '192 kbps', bitrate: 192000 });
+    qualityOptions.push({ name: '128 kbps', bitrate: 128000 });
+    qualityOptions.push({ name: '96 kbps', bitrate: 96000 });
+    qualityOptions.push({ name: '64 kbps', bitrate: 64000 });
+
+    var autoQualityOption = {
+        name: globalize.translate('Auto'),
+        bitrate: 0,
+        selected: options.isAutomaticBitrateEnabled
+    };
+
+    if (options.enableAuto) {
+        qualityOptions.push(autoQualityOption);
+    }
+
+    if (maxStreamingBitrate) {
+        var selectedIndex = -1;
+        for (var i = 0, length = qualityOptions.length; i < length; i++) {
+            var option = qualityOptions[i];
+
+            if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
+                selectedIndex = i;
+            }
+        }
+
+        if (selectedIndex === -1) {
+            selectedIndex = qualityOptions.length - 1;
+        }
+
+        var currentQualityOption = qualityOptions[selectedIndex];
+
+        if (!options.isAutomaticBitrateEnabled) {
+            currentQualityOption.selected = true;
+        } else {
+            autoQualityOption.autoText = currentQualityOption.name;
+        }
+    }
+
+    return qualityOptions;
+}
+
+export default {
+    getVideoQualityOptions,
+    getAudioQualityOptions
+};

src/components/recordingcreator/recordingbutton.js

@@ -1,37 +1,40 @@
-define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields'], function (globalize, connectionManager, require, loading, appHost, dom, recordingHelper, events) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import dom from 'dom';
+import recordingHelper from 'recordingHelper';
+import 'paper-icon-button-light';
+import 'emby-button';
+import 'css!./recordingfields';
 
-    recordingHelper = recordingHelper.default || recordingHelper;
+function onRecordingButtonClick(e) {
+    const item = this.item;
 
-    function onRecordingButtonClick(e) {
+    if (item) {
-        var item = this.item;
+        const serverId = item.ServerId;
+        const programId = item.Id;
+        const timerId = item.TimerId;
+        const timerStatus = item.Status;
+        const seriesTimerId = item.SeriesTimerId;
 
-        if (item) {
+        const instance = this;
-            var serverId = item.ServerId;
-            var programId = item.Id;
-            var timerId = item.TimerId;
-            var timerStatus = item.Status;
-            var seriesTimerId = item.SeriesTimerId;
 
-            var instance = this;
+        recordingHelper.toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId).then(function () {
-
+            instance.refresh(serverId, programId);
-            recordingHelper.toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId).then(function () {
+        });
-                instance.refresh(serverId, programId);
-            });
-        }
     }
+}
 
-    function setButtonIcon(button, icon) {
+function setButtonIcon(button, icon) {
-        var inner = button.querySelector('.material-icons');
+    const inner = button.querySelector('.material-icons');
-        inner.classList.remove('fiber_smart_record');
+    inner.classList.remove('fiber_smart_record');
-        inner.classList.remove('fiber_manual_record');
+    inner.classList.remove('fiber_manual_record');
-        inner.classList.add(icon);
+    inner.classList.add(icon);
-    }
+}
 
-    function RecordingButton(options) {
+class RecordingButton {
+    constructor(options) {
         this.options = options;
 
-        var button = options.button;
+        const button = options.button;
 
         setButtonIcon(button, 'fiber_manual_record');
 
@@ -41,7 +44,7 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
             this.refresh(options.itemId, options.serverId);
         }
 
-        var clickFn = onRecordingButtonClick.bind(this);
+        const clickFn = onRecordingButtonClick.bind(this);
         this.clickFn = clickFn;
 
         dom.addEventListener(button, 'click', clickFn, {
@@ -49,39 +52,17 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
         });
     }
 
-    function getIndicatorIcon(item) {
+    refresh(serverId, itemId) {
-        var status;
+        const apiClient = connectionManager.getApiClient(serverId);
-
+        const self = this;
-        if (item.Type === 'SeriesTimer') {
-            return 'fiber_smart_record';
-        } else if (item.TimerId || item.SeriesTimerId) {
-            status = item.Status || 'Cancelled';
-        } else if (item.Type === 'Timer') {
-            status = item.Status;
-        } else {
-            return 'fiber_manual_record';
-        }
-
-        if (item.SeriesTimerId) {
-            if (status !== 'Cancelled') {
-                return 'fiber_smart_record';
-            }
-        }
-
-        return 'fiber_manual_record';
-    }
-
-    RecordingButton.prototype.refresh = function (serverId, itemId) {
-        var apiClient = connectionManager.getApiClient(serverId);
-        var self = this;
         apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
             self.refreshItem(item);
         });
-    };
+    }
 
-    RecordingButton.prototype.refreshItem = function (item) {
+    refreshItem(item) {
-        var options = this.options;
+        const options = this.options;
-        var button = options.button;
+        const button = options.button;
         this.item = item;
         setButtonIcon(button, getIndicatorIcon(item));
 
@@ -90,15 +71,15 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
         } else {
             button.classList.remove('recordingIcon-active');
         }
-    };
+    }
 
-    RecordingButton.prototype.destroy = function () {
+    destroy() {
-        var options = this.options;
+        const options = this.options;
 
         if (options) {
-            var button = options.button;
+            const button = options.button;
 
-            var clickFn = this.clickFn;
+            const clickFn = this.clickFn;
 
             if (clickFn) {
                 dom.removeEventListener(button, 'click', clickFn, {
@@ -109,7 +90,29 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
 
         this.options = null;
         this.item = null;
-    };
+    }
+}
 
-    return RecordingButton;
+function getIndicatorIcon(item) {
-});
+    let status;
+
+    if (item.Type === 'SeriesTimer') {
+        return 'fiber_smart_record';
+    } else if (item.TimerId || item.SeriesTimerId) {
+        status = item.Status || 'Cancelled';
+    } else if (item.Type === 'Timer') {
+        status = item.Status;
+    } else {
+        return 'fiber_manual_record';
+    }
+
+    if (item.SeriesTimerId) {
+        if (status !== 'Cancelled') {
+            return 'fiber_smart_record';
+        }
+    }
+
+    return 'fiber_manual_record';
+}
+
+export default RecordingButton;

src/components/recordingcreator/recordingcreator.js

@@ -1,189 +1,204 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'recordingFields', 'events', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, recordingFields, events) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import mediaInfo from 'mediaInfo';
+import connectionManager from 'connectionManager';
+import require from 'require';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import datetime from 'datetime';
+import imageLoader from 'imageLoader';
+import recordingFields from 'recordingFields';
+import events from 'events';
+import 'emby-checkbox';
+import 'emby-button';
+import 'emby-collapse';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
 
-    scrollHelper = scrollHelper.default || scrollHelper;
+let currentDialog;
+let closeAction;
+let currentRecordingFields;
 
-    var currentDialog;
+function closeDialog() {
-    var closeAction;
+    dialogHelper.close(currentDialog);
-    var currentRecordingFields;
+}
 
-    function closeDialog() {
+function init(context) {
-        dialogHelper.close(currentDialog);
+    context.querySelector('.btnPlay').addEventListener('click', function () {
+        closeAction = 'play';
+        closeDialog();
+    });
+
+    context.querySelector('.btnCancel').addEventListener('click', function () {
+        closeAction = null;
+        closeDialog();
+    });
+}
+
+function getImageUrl(item, apiClient, imageHeight) {
+    const imageTags = item.ImageTags || {};
+
+    if (item.PrimaryImageTag) {
+        imageTags.Primary = item.PrimaryImageTag;
     }
 
-    function init(context) {
+    if (imageTags.Primary) {
-        context.querySelector('.btnPlay').addEventListener('click', function () {
+        return apiClient.getScaledImageUrl(item.Id, {
-            closeAction = 'play';
+            type: 'Primary',
-            closeDialog();
+            maxHeight: imageHeight,
+            tag: item.ImageTags.Primary
         });
-
+    } else if (imageTags.Thumb) {
-        context.querySelector('.btnCancel').addEventListener('click', function () {
+        return apiClient.getScaledImageUrl(item.Id, {
-            closeAction = null;
+            type: 'Thumb',
-            closeDialog();
+            maxHeight: imageHeight,
+            tag: item.ImageTags.Thumb
         });
     }
 
-    function getImageUrl(item, apiClient, imageHeight) {
+    return null;
-        var imageTags = item.ImageTags || {};
+}
 
-        if (item.PrimaryImageTag) {
+function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
-            imageTags.Primary = item.PrimaryImageTag;
+    if (!refreshRecordingStateOnly) {
+        const imgUrl = getImageUrl(program, apiClient, 200);
+        const imageContainer = context.querySelector('.recordingDialog-imageContainer');
+
+        if (imgUrl) {
+            imageContainer.innerHTML = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
+            imageContainer.classList.remove('hide');
+
+            imageLoader.lazyChildren(imageContainer);
+        } else {
+            imageContainer.innerHTML = '';
+            imageContainer.classList.add('hide');
         }
 
-        if (imageTags.Primary) {
+        context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
-            return apiClient.getScaledImageUrl(item.Id, {
+        context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
-                type: 'Primary',
+        context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
-                maxHeight: imageHeight,
+        context.querySelector('.itemOverview').innerHTML = program.Overview || '';
-                tag: item.ImageTags.Primary
+
-            });
+        const formDialogFooter = context.querySelector('.formDialogFooter');
-        } else if (imageTags.Thumb) {
+        const now = new Date();
-            return apiClient.getScaledImageUrl(item.Id, {
+        if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
-                type: 'Thumb',
+            formDialogFooter.classList.remove('hide');
-                maxHeight: imageHeight,
+        } else {
-                tag: item.ImageTags.Thumb
+            formDialogFooter.classList.add('hide');
-            });
         }
 
-        return null;
+        context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
     }
 
-    function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
+    context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
-        if (!refreshRecordingStateOnly) {
+    });
-            var imgUrl = getImageUrl(program, apiClient, 200);
-            var imageContainer = context.querySelector('.recordingDialog-imageContainer');
 
-            if (imgUrl) {
+    loading.hide();
-                imageContainer.innerHTML = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
+}
-                imageContainer.classList.remove('hide');
 
-                imageLoader.lazyChildren(imageContainer);
+function reload(context, programId, serverId, refreshRecordingStateOnly) {
-            } else {
+    loading.show();
-                imageContainer.innerHTML = '';
-                imageContainer.classList.add('hide');
-            }
 
-            context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
+    const apiClient = connectionManager.getApiClient(serverId);
-            context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
-            context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
-            context.querySelector('.itemOverview').innerHTML = program.Overview || '';
 
-            var formDialogFooter = context.querySelector('.formDialogFooter');
+    const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
-            var now = new Date();
+    const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
-            if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
-                formDialogFooter.classList.remove('hide');
-            } else {
-                formDialogFooter.classList.add('hide');
-            }
 
-            context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
+    Promise.all([promise1, promise2]).then(function (responses) {
-        }
+        const defaults = responses[0];
+        const program = responses[1];
 
-        context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
+        renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
-        });
+    });
+}
 
-        loading.hide();
+function executeCloseAction(action, programId, serverId) {
-    }
+    if (action === 'play') {
+        import('playbackManager').then(({ default: playbackManager }) => {
+            const apiClient = connectionManager.getApiClient(serverId);
 
-    function reload(context, programId, serverId, refreshRecordingStateOnly) {
+            apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
-        loading.show();
+                playbackManager.play({
-
+                    ids: [item.ChannelId],
-        var apiClient = connectionManager.getApiClient(serverId);
-
-        var promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
-        var promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
-
-        Promise.all([promise1, promise2]).then(function (responses) {
-            var defaults = responses[0];
-            var program = responses[1];
-
-            renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
-        });
-    }
-
-    function executeCloseAction(action, programId, serverId) {
-        if (action === 'play') {
-            require(['playbackManager'], function (playbackManager) {
-                var apiClient = connectionManager.getApiClient(serverId);
-
-                apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
-                    playbackManager.default.play({
-                        ids: [item.ChannelId],
-                        serverId: serverId
-                    });
-                });
-            });
-            return;
-        }
-    }
-
-    function showEditor(itemId, serverId) {
-        return new Promise(function (resolve, reject) {
-            closeAction = null;
-
-            loading.show();
-
-            require(['text!./recordingcreator.template.html'], function (template) {
-                var dialogOptions = {
-                    removeOnClose: true,
-                    scrollY: false
-                };
-
-                if (layoutManager.tv) {
-                    dialogOptions.size = 'fullscreen';
-                } else {
-                    dialogOptions.size = 'small';
-                }
-
-                var dlg = dialogHelper.createDialog(dialogOptions);
-
-                dlg.classList.add('formDialog');
-                dlg.classList.add('recordingDialog');
-
-                var html = '';
-
-                html += globalize.translateHtml(template, 'core');
-
-                dlg.innerHTML = html;
-
-                currentDialog = dlg;
-
-                function onRecordingChanged() {
-                    reload(dlg, itemId, serverId, true);
-                }
-
-                dlg.addEventListener('close', function () {
-                    events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
-                    executeCloseAction(closeAction, itemId, serverId);
-
-                    if (currentRecordingFields && currentRecordingFields.hasChanged()) {
-                        resolve();
-                    } else {
-                        reject();
-                    }
-                });
-
-                if (layoutManager.tv) {
-                    scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
-                }
-
-                init(dlg);
-
-                reload(dlg, itemId, serverId);
-
-                currentRecordingFields = new recordingFields({
-                    parent: dlg.querySelector('.recordingFields'),
-                    programId: itemId,
                     serverId: serverId
                 });
-
-                events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
-
-                dialogHelper.open(dlg);
             });
         });
+        return;
     }
+}
 
-    return {
+function showEditor(itemId, serverId) {
-        show: showEditor
+    return new Promise(function (resolve, reject) {
-    };
+        closeAction = null;
-});
+
+        loading.show();
+
+        import('text!./recordingcreator.template.html').then(({ default: template }) => {
+            const dialogOptions = {
+                removeOnClose: true,
+                scrollY: false
+            };
+
+            if (layoutManager.tv) {
+                dialogOptions.size = 'fullscreen';
+            } else {
+                dialogOptions.size = 'small';
+            }
+
+            const dlg = dialogHelper.createDialog(dialogOptions);
+
+            dlg.classList.add('formDialog');
+            dlg.classList.add('recordingDialog');
+
+            let html = '';
+
+            html += globalize.translateHtml(template, 'core');
+
+            dlg.innerHTML = html;
+
+            currentDialog = dlg;
+
+            function onRecordingChanged() {
+                reload(dlg, itemId, serverId, true);
+            }
+
+            dlg.addEventListener('close', function () {
+                events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+                executeCloseAction(closeAction, itemId, serverId);
+
+                if (currentRecordingFields && currentRecordingFields.hasChanged()) {
+                    resolve();
+                } else {
+                    reject();
+                }
+            });
+
+            if (layoutManager.tv) {
+                scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+            }
+
+            init(dlg);
+
+            reload(dlg, itemId, serverId);
+
+            currentRecordingFields = new recordingFields({
+                parent: dlg.querySelector('.recordingFields'),
+                programId: itemId,
+                serverId: serverId
+            });
+
+            events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+
+            dialogHelper.open(dlg);
+        });
+    });
+}
+
+export default {
+    show: showEditor
+};

src/components/recordingcreator/recordingeditor.js

@@ -1,150 +1,155 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import 'scrollStyles';
+import 'emby-button';
+import 'emby-collapse';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
+import 'flexStyles';
 
-    scrollHelper = scrollHelper.default || scrollHelper;
+let currentDialog;
-    loading = loading.default || loading;
+let recordingDeleted = false;
+let currentItemId;
+let currentServerId;
+let currentResolve;
 
-    var currentDialog;
+function deleteTimer(apiClient, timerId) {
-    var recordingDeleted = false;
+    return import('recordingHelper').then(({ default: recordingHelper }) => {
-    var currentItemId;
+        recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId());
-    var currentServerId;
+    });
-    var currentResolve;
+}
 
-    function deleteTimer(apiClient, timerId) {
+function renderTimer(context, item, apiClient) {
-        return new Promise(function (resolve, reject) {
+    context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
-            require(['recordingHelper'], function (recordingHelper) {
+    context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
-                recordingHelper = recordingHelper.default || recordingHelper;
 
-                recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
+    loading.hide();
-            });
+}
+
+function closeDialog(isDeleted) {
+    recordingDeleted = isDeleted;
+    dialogHelper.close(currentDialog);
+}
+
+function onSubmit(e) {
+    const form = this;
+
+    const apiClient = connectionManager.getApiClient(currentServerId);
+
+    apiClient.getLiveTvTimer(currentItemId).then(function (item) {
+        item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
+        item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
+        apiClient.updateLiveTvTimer(item).then(currentResolve);
+    });
+
+    e.preventDefault();
+
+    // Disable default form submission
+    return false;
+}
+
+function init(context) {
+    context.querySelector('.btnCancel').addEventListener('click', function () {
+        closeDialog(false);
+    });
+
+    context.querySelector('.btnCancelRecording').addEventListener('click', function () {
+        const apiClient = connectionManager.getApiClient(currentServerId);
+
+        deleteTimer(apiClient, currentItemId).then(function () {
+            closeDialog(true);
         });
-    }
+    });
 
-    function renderTimer(context, item, apiClient) {
+    context.querySelector('form').addEventListener('submit', onSubmit);
-        context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
+}
-        context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
 
+function reload(context, id) {
+    loading.show();
+    currentItemId = id;
+
+    const apiClient = connectionManager.getApiClient(currentServerId);
+    apiClient.getLiveTvTimer(id).then(function (result) {
+        renderTimer(context, result, apiClient);
         loading.hide();
-    }
+    });
+}
 
-    function closeDialog(isDeleted) {
+function showEditor(itemId, serverId, options) {
-        recordingDeleted = isDeleted;
+    return new Promise(function (resolve, reject) {
-
+        recordingDeleted = false;
-        dialogHelper.close(currentDialog);
+        currentServerId = serverId;
-    }
-
-    function onSubmit(e) {
-        var form = this;
-
-        var apiClient = connectionManager.getApiClient(currentServerId);
-
-        apiClient.getLiveTvTimer(currentItemId).then(function (item) {
-            item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
-            item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
-            apiClient.updateLiveTvTimer(item).then(currentResolve);
-        });
-
-        e.preventDefault();
-
-        // Disable default form submission
-        return false;
-    }
-
-    function init(context) {
-        context.querySelector('.btnCancel').addEventListener('click', function () {
-            closeDialog(false);
-        });
-
-        context.querySelector('.btnCancelRecording').addEventListener('click', function () {
-            var apiClient = connectionManager.getApiClient(currentServerId);
-            deleteTimer(apiClient, currentItemId).then(function () {
-                closeDialog(true);
-            });
-        });
-
-        context.querySelector('form').addEventListener('submit', onSubmit);
-    }
-
-    function reload(context, id) {
         loading.show();
-        currentItemId = id;
+        options = options || {};
+        currentResolve = resolve;
 
-        var apiClient = connectionManager.getApiClient(currentServerId);
+        import('text!./recordingeditor.template.html').then(({default: template}) => {
-        apiClient.getLiveTvTimer(id).then(function (result) {
+            const dialogOptions = {
-            renderTimer(context, result, apiClient);
+                removeOnClose: true,
-            loading.hide();
+                scrollY: false
-        });
+            };
-    }
 
-    function showEditor(itemId, serverId, options) {
+            if (layoutManager.tv) {
-        return new Promise(function (resolve, reject) {
+                dialogOptions.size = 'fullscreen';
-            recordingDeleted = false;
+            }
-            currentServerId = serverId;
-            loading.show();
-            options = options || {};
-            currentResolve = resolve;
 
-            require(['text!./recordingeditor.template.html'], function (template) {
+            const dlg = dialogHelper.createDialog(dialogOptions);
-                var dialogOptions = {
-                    removeOnClose: true,
-                    scrollY: false
-                };
 
-                if (layoutManager.tv) {
+            dlg.classList.add('formDialog');
-                    dialogOptions.size = 'fullscreen';
+            dlg.classList.add('recordingDialog');
+
+            if (!layoutManager.tv) {
+                dlg.style['min-width'] = '20%';
+                dlg.classList.add('dialog-fullscreen-lowres');
+            }
+
+            let html = '';
+
+            html += globalize.translateHtml(template, 'core');
+
+            dlg.innerHTML = html;
+
+            if (options.enableCancel === false) {
+                dlg.querySelector('.formDialogFooter').classList.add('hide');
+            }
+
+            currentDialog = dlg;
+
+            dlg.addEventListener('closing', function () {
+                if (!recordingDeleted) {
+                    dlg.querySelector('.btnSubmit').click();
                 }
-
-                var dlg = dialogHelper.createDialog(dialogOptions);
-
-                dlg.classList.add('formDialog');
-                dlg.classList.add('recordingDialog');
-
-                if (!layoutManager.tv) {
-                    dlg.style['min-width'] = '20%';
-                    dlg.classList.add('dialog-fullscreen-lowres');
-                }
-
-                var html = '';
-
-                html += globalize.translateHtml(template, 'core');
-
-                dlg.innerHTML = html;
-
-                if (options.enableCancel === false) {
-                    dlg.querySelector('.formDialogFooter').classList.add('hide');
-                }
-
-                currentDialog = dlg;
-
-                dlg.addEventListener('closing', function () {
-                    if (!recordingDeleted) {
-                        dlg.querySelector('.btnSubmit').click();
-                    }
-                });
-
-                dlg.addEventListener('close', function () {
-                    if (recordingDeleted) {
-                        resolve({
-                            updated: true,
-                            deleted: true
-                        });
-                    }
-                });
-
-                if (layoutManager.tv) {
-                    scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
-                }
-
-                init(dlg);
-
-                reload(dlg, itemId);
-
-                dialogHelper.open(dlg);
             });
-        });
-    }
 
-    return {
+            dlg.addEventListener('close', function () {
-        show: showEditor
+                if (recordingDeleted) {
-    };
+                    resolve({
-});
+                        updated: true,
+                        deleted: true
+                    });
+                }
+            });
+
+            if (layoutManager.tv) {
+                scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+            }
+
+            init(dlg);
+
+            reload(dlg, itemId);
+
+            dialogHelper.open(dlg);
+        });
+    });
+}
+
+export default {
+    show: showEditor
+};

src/components/recordingcreator/recordingfields.js

@@ -1,223 +1,126 @@
-define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields', 'flexStyles'], function (globalize, connectionManager, serverNotifications, require, loading, appHost, dom, recordingHelper, events) {
+import globalize from 'globalize';
-    'use strict';
+import connectionManager from 'connectionManager';
+import serverNotifications from 'serverNotifications';
+import loading from 'loading';
+import dom from 'dom';
+import recordingHelper from 'recordingHelper';
+import events from 'events';
+import 'paper-icon-button-light';
+import 'emby-button';
+import 'css!./recordingfields';
+import 'flexStyles';
 
-    serverNotifications = serverNotifications.default || serverNotifications;
+/*eslint prefer-const: "error"*/
-    recordingHelper = recordingHelper.default || recordingHelper;
-    loading = loading.default || loading;
 
-    function loadData(parent, program, apiClient) {
+function loadData(parent, program, apiClient) {
-        if (program.IsSeries) {
+    if (program.IsSeries) {
-            parent.querySelector('.recordSeriesContainer').classList.remove('hide');
+        parent.querySelector('.recordSeriesContainer').classList.remove('hide');
+    } else {
+        parent.querySelector('.recordSeriesContainer').classList.add('hide');
+    }
+
+    if (program.SeriesTimerId) {
+        parent.querySelector('.btnManageSeriesRecording').classList.remove('hide');
+        parent.querySelector('.seriesRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+        parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('CancelSeries');
+    } else {
+        parent.querySelector('.btnManageSeriesRecording').classList.add('hide');
+        parent.querySelector('.seriesRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
+        parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('RecordSeries');
+    }
+
+    if (program.TimerId && program.Status !== 'Cancelled') {
+        parent.querySelector('.btnManageRecording').classList.remove('hide');
+        parent.querySelector('.singleRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+        if (program.Status === 'InProgress') {
+            parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('StopRecording');
         } else {
-            parent.querySelector('.recordSeriesContainer').classList.add('hide');
+            parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('DoNotRecord');
         }
+    } else {
+        parent.querySelector('.btnManageRecording').classList.add('hide');
+        parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
+        parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record');
+    }
+}
 
-        if (program.SeriesTimerId) {
+function fetchData(instance) {
-            parent.querySelector('.btnManageSeriesRecording').classList.remove('hide');
+    const options = instance.options;
-            parent.querySelector('.seriesRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+    const apiClient = connectionManager.getApiClient(options.serverId);
-            parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('CancelSeries');
+
-        } else {
+    options.parent.querySelector('.recordingFields').classList.remove('hide');
-            parent.querySelector('.btnManageSeriesRecording').classList.add('hide');
+    return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
-            parent.querySelector('.seriesRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
+        instance.TimerId = program.TimerId;
-            parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('RecordSeries');
+        instance.Status = program.Status;
+        instance.SeriesTimerId = program.SeriesTimerId;
+        loadData(options.parent, program, apiClient);
+    });
+}
+
+function onTimerChangedExternally(e, apiClient, data) {
+    const options = this.options;
+    let refresh = false;
+
+    if (data.Id) {
+        if (this.TimerId === data.Id) {
+            refresh = true;
         }
-
+    }
-        if (program.TimerId && program.Status !== 'Cancelled') {
+    if (data.ProgramId && options) {
-            parent.querySelector('.btnManageRecording').classList.remove('hide');
+        if (options.programId === data.ProgramId) {
-            parent.querySelector('.singleRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+            refresh = true;
-            if (program.Status === 'InProgress') {
-                parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('StopRecording');
-            } else {
-                parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('DoNotRecord');
-            }
-        } else {
-            parent.querySelector('.btnManageRecording').classList.add('hide');
-            parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
-            parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record');
         }
     }
 
-    function fetchData(instance) {
+    if (refresh) {
-        var options = instance.options;
+        this.refresh();
-        var apiClient = connectionManager.getApiClient(options.serverId);
-
-        options.parent.querySelector('.recordingFields').classList.remove('hide');
-        return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
-            instance.TimerId = program.TimerId;
-            instance.Status = program.Status;
-            instance.SeriesTimerId = program.SeriesTimerId;
-            loadData(options.parent, program, apiClient);
-        });
     }
+}
 
-    function onTimerChangedExternally(e, apiClient, data) {
+function onSeriesTimerChangedExternally(e, apiClient, data) {
-        var options = this.options;
+    const options = this.options;
-        var refresh = false;
+    let refresh = false;
 
-        if (data.Id) {
+    if (data.Id) {
-            if (this.TimerId === data.Id) {
+        if (this.SeriesTimerId === data.Id) {
-                refresh = true;
+            refresh = true;
-            }
         }
-        if (data.ProgramId && options) {
+    }
-            if (options.programId === data.ProgramId) {
+    if (data.ProgramId && options) {
-                refresh = true;
+        if (options.programId === data.ProgramId) {
-            }
+            refresh = true;
-        }
-
-        if (refresh) {
-            this.refresh();
         }
     }
 
-    function onSeriesTimerChangedExternally(e, apiClient, data) {
+    if (refresh) {
-        var options = this.options;
+        this.refresh();
-        var refresh = false;
-
-        if (data.Id) {
-            if (this.SeriesTimerId === data.Id) {
-                refresh = true;
-            }
-        }
-        if (data.ProgramId && options) {
-            if (options.programId === data.ProgramId) {
-                refresh = true;
-            }
-        }
-
-        if (refresh) {
-            this.refresh();
-        }
     }
+}
 
-    function RecordingEditor(options) {
+class RecordingEditor {
+    constructor(options) {
         this.options = options;
         this.embed();
 
-        var timerChangedHandler = onTimerChangedExternally.bind(this);
+        const timerChangedHandler = onTimerChangedExternally.bind(this);
         this.timerChangedHandler = timerChangedHandler;
 
         events.on(serverNotifications, 'TimerCreated', timerChangedHandler);
         events.on(serverNotifications, 'TimerCancelled', timerChangedHandler);
 
-        var seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this);
+        const seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this);
         this.seriesTimerChangedHandler = seriesTimerChangedHandler;
 
         events.on(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
         events.on(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
     }
 
-    function onManageRecordingClick(e) {
+    embed() {
-        var options = this.options;
+        const self = this;
-        if (!this.TimerId || this.Status === 'Cancelled') {
-            return;
-        }
-
-        var self = this;
-        require(['recordingEditor'], function (recordingEditor) {
-            recordingEditor.show(self.TimerId, options.serverId, {
-                enableCancel: false
-            }).then(function () {
-                self.changed = true;
-            });
-        });
-    }
-
-    function onManageSeriesRecordingClick(e) {
-        var options = this.options;
-
-        if (!this.SeriesTimerId) {
-            return;
-        }
-
-        var self = this;
-
-        require(['seriesRecordingEditor'], function (seriesRecordingEditor) {
-            seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
-
-                enableCancel: false
-
-            }).then(function () {
-                self.changed = true;
-            });
-        });
-    }
-
-    function onRecordChange(e) {
-        this.changed = true;
-
-        var self = this;
-        var options = this.options;
-        var apiClient = connectionManager.getApiClient(options.serverId);
-
-        var button = dom.parentWithTag(e.target, 'BUTTON');
-        var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
-
-        var hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled';
-
-        if (isChecked) {
-            if (!hasEnabledTimer) {
-                loading.show();
-                recordingHelper.createRecording(apiClient, options.programId, false).then(function () {
-                    events.trigger(self, 'recordingchanged');
-                    fetchData(self);
-                    loading.hide();
-                });
-            }
-        } else {
-            if (hasEnabledTimer) {
-                loading.show();
-                recordingHelper.cancelTimer(apiClient, this.TimerId, true).then(function () {
-                    events.trigger(self, 'recordingchanged');
-                    fetchData(self);
-                    loading.hide();
-                });
-            }
-        }
-    }
-
-    function sendToast(msg) {
-        require(['toast'], function (toast) {
-            toast(msg);
-        });
-    }
-
-    function onRecordSeriesChange(e) {
-        this.changed = true;
-
-        var self = this;
-        var options = this.options;
-        var apiClient = connectionManager.getApiClient(options.serverId);
-
-        var button = dom.parentWithTag(e.target, 'BUTTON');
-        var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
-
-        if (isChecked) {
-            options.parent.querySelector('.recordSeriesContainer').classList.remove('hide');
-            if (!this.SeriesTimerId) {
-                var promise = this.TimerId ?
-                    recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) :
-                    recordingHelper.createRecording(apiClient, options.programId, true);
-                promise.then(function () {
-                    fetchData(self);
-                });
-            }
-        } else {
-            if (this.SeriesTimerId) {
-                apiClient.cancelLiveTvSeriesTimer(this.SeriesTimerId).then(function () {
-                    sendToast(globalize.translate('RecordingCancelled'));
-                    fetchData(self);
-                });
-            }
-        }
-    }
-
-    RecordingEditor.prototype.embed = function () {
-        var self = this;
         return new Promise(function (resolve, reject) {
-            require(['text!./recordingfields.template.html'], function (template) {
+            import('text!./recordingfields.template.html').then(({default: template}) => {
-                var options = self.options;
+                const options = self.options;
-                var context = options.parent;
+                const context = options.parent;
                 context.innerHTML = globalize.translateHtml(template, 'core');
 
                 context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self));
@@ -228,29 +131,134 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
                 fetchData(self).then(resolve);
             });
         });
-    };
+    }
 
-    RecordingEditor.prototype.hasChanged = function () {
+    hasChanged() {
         return this.changed;
-    };
+    }
 
-    RecordingEditor.prototype.refresh = function () {
+    refresh() {
         fetchData(this);
-    };
+    }
 
-    RecordingEditor.prototype.destroy = function () {
+    destroy() {
-        var timerChangedHandler = this.timerChangedHandler;
+        const timerChangedHandler = this.timerChangedHandler;
         this.timerChangedHandler = null;
 
         events.off(serverNotifications, 'TimerCreated', timerChangedHandler);
         events.off(serverNotifications, 'TimerCancelled', timerChangedHandler);
 
-        var seriesTimerChangedHandler = this.seriesTimerChangedHandler;
+        const seriesTimerChangedHandler = this.seriesTimerChangedHandler;
         this.seriesTimerChangedHandler = null;
 
         events.off(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
         events.off(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
-    };
+    }
+}
 
-    return RecordingEditor;
+function onManageRecordingClick(e) {
-});
+    const options = this.options;
+    if (!this.TimerId || this.Status === 'Cancelled') {
+        return;
+    }
+
+    const self = this;
+    import('recordingEditor').then(({default: recordingEditor}) => {
+        recordingEditor.show(self.TimerId, options.serverId, {
+            enableCancel: false
+        }).then(function () {
+            self.changed = true;
+        });
+    });
+}
+
+function onManageSeriesRecordingClick(e) {
+    const options = this.options;
+
+    if (!this.SeriesTimerId) {
+        return;
+    }
+
+    const self = this;
+
+    import('seriesRecordingEditor').then(({default: seriesRecordingEditor}) => {
+        seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
+
+            enableCancel: false
+
+        }).then(function () {
+            self.changed = true;
+        });
+    });
+}
+
+function onRecordChange(e) {
+    this.changed = true;
+
+    const self = this;
+    const options = this.options;
+    const apiClient = connectionManager.getApiClient(options.serverId);
+
+    const button = dom.parentWithTag(e.target, 'BUTTON');
+    const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
+
+    const hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled';
+
+    if (isChecked) {
+        if (!hasEnabledTimer) {
+            loading.show();
+            recordingHelper.createRecording(apiClient, options.programId, false).then(function () {
+                events.trigger(self, 'recordingchanged');
+                fetchData(self);
+                loading.hide();
+            });
+        }
+    } else {
+        if (hasEnabledTimer) {
+            loading.show();
+            recordingHelper.cancelTimer(apiClient, this.TimerId, true).then(function () {
+                events.trigger(self, 'recordingchanged');
+                fetchData(self);
+                loading.hide();
+            });
+        }
+    }
+}
+
+function sendToast(msg) {
+    import('toast').then(({default: toast}) => {
+        toast(msg);
+    });
+}
+
+function onRecordSeriesChange(e) {
+    this.changed = true;
+
+    const self = this;
+    const options = this.options;
+    const apiClient = connectionManager.getApiClient(options.serverId);
+
+    const button = dom.parentWithTag(e.target, 'BUTTON');
+    const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
+
+    if (isChecked) {
+        options.parent.querySelector('.recordSeriesContainer').classList.remove('hide');
+        if (!this.SeriesTimerId) {
+            const promise = this.TimerId ?
+                recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) :
+                recordingHelper.createRecording(apiClient, options.programId, true);
+            promise.then(function () {
+                fetchData(self);
+            });
+        }
+    } else {
+        if (this.SeriesTimerId) {
+            apiClient.cancelLiveTvSeriesTimer(this.SeriesTimerId).then(function () {
+                sendToast(globalize.translate('RecordingCancelled'));
+                fetchData(self);
+            });
+        }
+    }
+}
+
+export default RecordingEditor;

src/components/scrollManager.js

@@ -251,7 +251,7 @@ import layoutManager from 'layoutManager';
      * @return {ScrollerData} Scroller data.
      */
     function getScrollerData(scroller, vertical) {
-        let data = {};
+        const data = {};
 
         if (!vertical) {
             data.scrollPos = scroller.scrollLeft;

src/components/sortmenu/sortmenu.js

@@ -1,49 +1,51 @@
-define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'globalize', 'userSettings', 'emby-select', 'paper-icon-button-light', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, layoutManager, connectionManager, globalize, userSettings) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
+import 'flexStyles';
 
-    focusManager = focusManager.default || focusManager;
+function onSubmit(e) {
+    e.preventDefault();
+    return false;
+}
 
-    function onSubmit(e) {
+function initEditor(context, settings) {
-        e.preventDefault();
+    context.querySelector('form').addEventListener('submit', onSubmit);
-        return false;
-    }
 
-    function initEditor(context, settings) {
+    context.querySelector('.selectSortOrder').value = settings.sortOrder;
-        context.querySelector('form').addEventListener('submit', onSubmit);
+    context.querySelector('.selectSortBy').value = settings.sortBy;
+}
 
-        context.querySelector('.selectSortOrder').value = settings.sortOrder;
+function centerFocus(elem, horiz, on) {
-        context.querySelector('.selectSortBy').value = settings.sortBy;
+    import('scrollHelper').then(({default: scrollHelper}) => {
-    }
+        const fn = on ? 'on' : 'off';
+        scrollHelper.centerFocus[fn](elem, horiz);
+    });
+}
 
-    function centerFocus(elem, horiz, on) {
+function fillSortBy(context, options) {
-        require(['scrollHelper'], function (scrollHelper) {
+    const selectSortBy = context.querySelector('.selectSortBy');
-            scrollHelper = scrollHelper.default || scrollHelper;
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
-    }
 
-    function fillSortBy(context, options) {
+    selectSortBy.innerHTML = options.map(function (o) {
-        var selectSortBy = context.querySelector('.selectSortBy');
+        return '<option value="' + o.value + '">' + o.name + '</option>';
+    }).join('');
+}
 
-        selectSortBy.innerHTML = options.map(function (o) {
+function saveValues(context, settingsKey) {
-            return '<option value="' + o.value + '">' + o.name + '</option>';
+    userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
-        }).join('');
+    userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
-    }
+}
 
-    function saveValues(context, settings, settingsKey) {
+class SortMenu {
-        userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
+    show(options) {
-        userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
-    }
-
-    function SortMenu() {
-
-    }
-
-    SortMenu.prototype.show = function (options) {
         return new Promise(function (resolve, reject) {
-            require(['text!./sortmenu.template.html'], function (template) {
+            import('text!./sortmenu.template.html').then(({default: template}) => {
-                var dialogOptions = {
+                const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
@@ -54,11 +56,11 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                     dialogOptions.size = 'small';
                 }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+                const dlg = dialogHelper.createDialog(dialogOptions);
 
                 dlg.classList.add('formDialog');
 
-                var html = '';
+                let html = '';
 
                 html += '<div class="formDialogHeader">';
                 html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@@ -81,7 +83,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                     centerFocus(dlg.querySelector('.formDialogContent'), false, true);
                 }
 
-                var submitted;
+                let submitted;
 
                 dlg.querySelector('form').addEventListener('change', function () {
                     submitted = true;
@@ -93,7 +95,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                     }
 
                     if (submitted) {
-                        saveValues(dlg, options.settings, options.settingsKey);
+                        saveValues(dlg, options.settingsKey);
                         resolve();
                         return;
                     }
@@ -102,7 +104,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                 });
             });
         });
-    };
+    }
+}
 
-    return SortMenu;
+export default SortMenu;
-});

src/components/subtitleeditor/subtitleeditor.js

@@ -1,428 +1,437 @@
-define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'css!./subtitleeditor', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import focusManager from 'focusManager';
+import dom from 'dom';
+import 'emby-select';
+import 'listViewStyle';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'material-icons';
+import 'css!./subtitleeditor';
+import 'emby-button';
+import 'flexStyles';
 
-    loading = loading.default || loading;
+let currentItem;
-    focusManager = focusManager.default || focusManager;
+let hasChanges;
 
-    var currentItem;
+function downloadRemoteSubtitles(context, id) {
-    var hasChanges;
+    let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
 
-    function downloadRemoteSubtitles(context, id) {
+    let apiClient = connectionManager.getApiClient(currentItem.ServerId);
-        var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
+    apiClient.ajax({
 
-        var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+        type: 'POST',
-        apiClient.ajax({
+        url: apiClient.getUrl(url)
 
-            type: 'POST',
+    }).then(function () {
-            url: apiClient.getUrl(url)
+        hasChanges = true;
+
+        import('toast').then(({default: toast}) => {
+            toast(globalize.translate('MessageDownloadQueued'));
+        });
+
+        focusManager.autoFocus(context);
+    });
+}
+
+function deleteLocalSubtitle(context, index) {
+    let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
+
+    import('confirm').then(({default: confirm}) => {
+        confirm({
+
+            title: globalize.translate('ConfirmDeletion'),
+            text: msg,
+            confirmText: globalize.translate('Delete'),
+            primary: 'delete'
 
         }).then(function () {
-            hasChanges = true;
+            loading.show();
 
-            require(['toast'], function (toast) {
+            let itemId = currentItem.Id;
-                toast(globalize.translate('MessageDownloadQueued'));
+            let url = 'Videos/' + itemId + '/Subtitles/' + index;
-            });
 
-            focusManager.autoFocus(context);
+            let apiClient = connectionManager.getApiClient(currentItem.ServerId);
-        });
-    }
 
-    function deleteLocalSubtitle(context, index) {
+            apiClient.ajax({
-        var msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
 
-        require(['confirm'], function (confirm) {
+                type: 'DELETE',
-            confirm.default({
+                url: apiClient.getUrl(url)
-
-                title: globalize.translate('ConfirmDeletion'),
-                text: msg,
-                confirmText: globalize.translate('Delete'),
-                primary: 'delete'
 
             }).then(function () {
-                loading.show();
+                hasChanges = true;
-
+                reload(context, apiClient, itemId);
-                var itemId = currentItem.Id;
-                var url = 'Videos/' + itemId + '/Subtitles/' + index;
-
-                var apiClient = connectionManager.getApiClient(currentItem.ServerId);
-
-                apiClient.ajax({
-
-                    type: 'DELETE',
-                    url: apiClient.getUrl(url)
-
-                }).then(function () {
-                    hasChanges = true;
-                    reload(context, apiClient, itemId);
-                });
             });
         });
-    }
+    });
+}
 
-    function fillSubtitleList(context, item) {
+function fillSubtitleList(context, item) {
-        var streams = item.MediaStreams || [];
+    let streams = item.MediaStreams || [];
 
-        var subs = streams.filter(function (s) {
+    let subs = streams.filter(function (s) {
-            return s.Type === 'Subtitle';
+        return s.Type === 'Subtitle';
-        });
+    });
 
-        var html = '';
+    let html = '';
 
-        if (subs.length) {
+    if (subs.length) {
-            html += '<h2>' + globalize.translate('MySubtitles') + '</h2>';
+        html += '<h2>' + globalize.translate('MySubtitles') + '</h2>';
 
-            html += '<div>';
+        html += '<div>';
 
-            html += subs.map(function (s) {
+        html += subs.map(function (s) {
-                var itemHtml = '';
+            let itemHtml = '';
 
-                var tagName = layoutManager.tv ? 'button' : 'div';
+            let tagName = layoutManager.tv ? 'button' : 'div';
-                var className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
+            let className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
 
-                if (layoutManager.tv) {
-                    className += ' listItem-focusscale listItem-button';
-                }
-
-                className += ' listItem-noborder';
-
-                itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
-
-                itemHtml += '<span class="listItemIcon material-icons closed_caption"></span>';
-
-                itemHtml += '<div class="listItemBody two-line">';
-
-                itemHtml += '<div>';
-                itemHtml += s.DisplayTitle || '';
-                itemHtml += '</div>';
-
-                if (s.Path) {
-                    itemHtml += '<div class="secondary listItemBodyText">' + (s.Path) + '</div>';
-                }
-
-                itemHtml += '</a>';
-                itemHtml += '</div>';
-
-                if (!layoutManager.tv) {
-                    if (s.Path) {
-                        itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('Delete') + '" class="btnDelete listItemButton"><span class="material-icons delete"></span></button>';
-                    }
-                }
-
-                itemHtml += '</' + tagName + '>';
-
-                return itemHtml;
-            }).join('');
-
-            html += '</div>';
-        }
-
-        var elem = context.querySelector('.subtitleList');
-
-        if (subs.length) {
-            elem.classList.remove('hide');
-        } else {
-            elem.classList.add('hide');
-        }
-        elem.innerHTML = html;
-    }
-
-    function fillLanguages(context, apiClient, languages) {
-        var selectLanguage = context.querySelector('#selectLanguage');
-
-        selectLanguage.innerHTML = languages.map(function (l) {
-            return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
-        });
-
-        var lastLanguage = userSettings.get('subtitleeditor-language');
-        if (lastLanguage) {
-            selectLanguage.value = lastLanguage;
-        } else {
-            apiClient.getCurrentUser().then(function (user) {
-                var lang = user.Configuration.SubtitleLanguagePreference;
-
-                if (lang) {
-                    selectLanguage.value = lang;
-                }
-            });
-        }
-    }
-
-    function renderSearchResults(context, results) {
-        var lastProvider = '';
-        var html = '';
-
-        if (!results.length) {
-            context.querySelector('.noSearchResults').classList.remove('hide');
-            context.querySelector('.subtitleResults').innerHTML = '';
-            loading.hide();
-            return;
-        }
-
-        context.querySelector('.noSearchResults').classList.add('hide');
-
-        for (var i = 0, length = results.length; i < length; i++) {
-            var result = results[i];
-
-            var provider = result.ProviderName;
-
-            if (provider !== lastProvider) {
-                if (i > 0) {
-                    html += '</div>';
-                }
-                html += '<h2>' + provider + '</h2>';
-                html += '<div>';
-                lastProvider = provider;
-            }
-
-            var tagName = layoutManager.tv ? 'button' : 'div';
-            var className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
             if (layoutManager.tv) {
                 className += ' listItem-focusscale listItem-button';
             }
 
-            html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
+            className += ' listItem-noborder';
 
-            html += '<span class="listItemIcon material-icons closed_caption"></span>';
+            itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
 
-            var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
+            itemHtml += '<span class="listItemIcon material-icons closed_caption"></span>';
 
-            html += '<div class="listItemBody ' + bodyClass + '">';
+            itemHtml += '<div class="listItemBody two-line">';
 
-            html += '<div>' + (result.Name) + '</div>';
+            itemHtml += '<div>';
-            html += '<div class="secondary listItemBodyText">';
+            itemHtml += s.DisplayTitle || '';
+            itemHtml += '</div>';
 
-            if (result.Format) {
+            if (s.Path) {
-                html += '<span style="margin-right:1em;">' + globalize.translate('FormatValue', result.Format) + '</span>';
+                itemHtml += '<div class="secondary listItemBodyText">' + (s.Path) + '</div>';
             }
 
-            if (result.DownloadCount != null) {
+            itemHtml += '</a>';
-                html += '<span>' + globalize.translate('DownloadsValue', result.DownloadCount) + '</span>';
+            itemHtml += '</div>';
-            }
-            html += '</div>';
-
-            if (result.Comment) {
-                html += '<div class="secondary listItemBodyText">' + (result.Comment) + '</div>';
-            }
-
-            if (result.IsHashMatch) {
-                html += '<div class="secondary listItemBodyText"><div class="inline-flex align-items-center justify-content-center" style="background:#3388cc;color:#fff;padding: .3em 1em;border-radius:1000em;">' + globalize.translate('PerfectMatch') + '</div></div>';
-            }
-
-            html += '</div>';
 
             if (!layoutManager.tv) {
-                html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><span class="material-icons file_download"></span></button>';
+                if (s.Path) {
+                    itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('Delete') + '" class="btnDelete listItemButton"><span class="material-icons delete"></span></button>';
+                }
             }
 
-            html += '</' + tagName + '>';
+            itemHtml += '</' + tagName + '>';
+
+            return itemHtml;
+        }).join('');
+
+        html += '</div>';
+    }
+
+    let elem = context.querySelector('.subtitleList');
+
+    if (subs.length) {
+        elem.classList.remove('hide');
+    } else {
+        elem.classList.add('hide');
+    }
+    elem.innerHTML = html;
+}
+
+function fillLanguages(context, apiClient, languages) {
+    let selectLanguage = context.querySelector('#selectLanguage');
+
+    selectLanguage.innerHTML = languages.map(function (l) {
+        return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
+    });
+
+    let lastLanguage = userSettings.get('subtitleeditor-language');
+    if (lastLanguage) {
+        selectLanguage.value = lastLanguage;
+    } else {
+        apiClient.getCurrentUser().then(function (user) {
+            let lang = user.Configuration.SubtitleLanguagePreference;
+
+            if (lang) {
+                selectLanguage.value = lang;
+            }
+        });
+    }
+}
+
+function renderSearchResults(context, results) {
+    let lastProvider = '';
+    let html = '';
+
+    if (!results.length) {
+        context.querySelector('.noSearchResults').classList.remove('hide');
+        context.querySelector('.subtitleResults').innerHTML = '';
+        loading.hide();
+        return;
+    }
+
+    context.querySelector('.noSearchResults').classList.add('hide');
+
+    for (let i = 0, length = results.length; i < length; i++) {
+        let result = results[i];
+
+        let provider = result.ProviderName;
+
+        if (provider !== lastProvider) {
+            if (i > 0) {
+                html += '</div>';
+            }
+            html += '<h2>' + provider + '</h2>';
+            html += '<div>';
+            lastProvider = provider;
         }
 
-        if (results.length) {
+        let tagName = layoutManager.tv ? 'button' : 'div';
-            html += '</div>';
+        let className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
+        if (layoutManager.tv) {
+            className += ' listItem-focusscale listItem-button';
         }
 
-        var elem = context.querySelector('.subtitleResults');
+        html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
-        elem.innerHTML = html;
+
+        html += '<span class="listItemIcon material-icons closed_caption"></span>';
+
+        let bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
+
+        html += '<div class="listItemBody ' + bodyClass + '">';
+
+        html += '<div>' + (result.Name) + '</div>';
+        html += '<div class="secondary listItemBodyText">';
+
+        if (result.Format) {
+            html += '<span style="margin-right:1em;">' + globalize.translate('FormatValue', result.Format) + '</span>';
+        }
+
+        if (result.DownloadCount != null) {
+            html += '<span>' + globalize.translate('DownloadsValue', result.DownloadCount) + '</span>';
+        }
+        html += '</div>';
+
+        if (result.Comment) {
+            html += '<div class="secondary listItemBodyText">' + (result.Comment) + '</div>';
+        }
+
+        if (result.IsHashMatch) {
+            html += '<div class="secondary listItemBodyText"><div class="inline-flex align-items-center justify-content-center" style="background:#3388cc;color:#fff;padding: .3em 1em;border-radius:1000em;">' + globalize.translate('PerfectMatch') + '</div></div>';
+        }
+
+        html += '</div>';
+
+        if (!layoutManager.tv) {
+            html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><span class="material-icons file_download"></span></button>';
+        }
+
+        html += '</' + tagName + '>';
+    }
+
+    if (results.length) {
+        html += '</div>';
+    }
+
+    let elem = context.querySelector('.subtitleResults');
+    elem.innerHTML = html;
+
+    loading.hide();
+}
+
+function searchForSubtitles(context, language) {
+    userSettings.set('subtitleeditor-language', language);
+
+    loading.show();
+
+    let apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    let url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
+
+    apiClient.getJSON(url).then(function (results) {
+        renderSearchResults(context, results);
+    });
+}
+
+function reload(context, apiClient, itemId) {
+    context.querySelector('.noSearchResults').classList.add('hide');
+
+    function onGetItem(item) {
+        currentItem = item;
+
+        fillSubtitleList(context, item);
+        let file = item.Path || '';
+        let index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
+        if (index > -1) {
+            file = file.substring(index + 1);
+        }
+
+        if (file) {
+            context.querySelector('.pathValue').innerHTML = file;
+            context.querySelector('.originalFile').classList.remove('hide');
+        } else {
+            context.querySelector('.pathValue').innerHTML = '';
+            context.querySelector('.originalFile').classList.add('hide');
+        }
 
         loading.hide();
     }
 
-    function searchForSubtitles(context, language) {
+    if (typeof itemId === 'string') {
-        userSettings.set('subtitleeditor-language', language);
+        apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
+    } else {
+        onGetItem(itemId);
+    }
+}
 
-        loading.show();
+function onSearchSubmit(e) {
+    let form = this;
 
-        var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    let lang = form.querySelector('#selectLanguage', form).value;
-        var url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
 
-        apiClient.getJSON(url).then(function (results) {
+    searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
-            renderSearchResults(context, results);
+
-        });
+    e.preventDefault();
+    return false;
+}
+
+function onSubtitleListClick(e) {
+    let btnDelete = dom.parentWithClass(e.target, 'btnDelete');
+    if (btnDelete) {
+        let index = btnDelete.getAttribute('data-index');
+        let context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
+        deleteLocalSubtitle(context, index);
+    }
+}
+
+function onSubtitleResultsClick(e) {
+    let subtitleId;
+    let context;
+
+    let btnOptions = dom.parentWithClass(e.target, 'btnOptions');
+    if (btnOptions) {
+        subtitleId = btnOptions.getAttribute('data-subid');
+        context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
+        showDownloadOptions(btnOptions, context, subtitleId);
     }
 
-    function reload(context, apiClient, itemId) {
+    let btnDownload = dom.parentWithClass(e.target, 'btnDownload');
-        context.querySelector('.noSearchResults').classList.add('hide');
+    if (btnDownload) {
+        subtitleId = btnDownload.getAttribute('data-subid');
+        context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
+        downloadRemoteSubtitles(context, subtitleId);
+    }
+}
 
-        function onGetItem(item) {
+function showDownloadOptions(button, context, subtitleId) {
-            currentItem = item;
+    let items = [];
 
-            fillSubtitleList(context, item);
+    items.push({
-            var file = item.Path || '';
+        name: globalize.translate('Download'),
-            var index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
+        id: 'download'
-            if (index > -1) {
+    });
-                file = file.substring(index + 1);
+
+    import('actionsheet').then(({default: actionsheet}) => {
+        actionsheet.show({
+            items: items,
+            positionTo: button
+
+        }).then(function (id) {
+            switch (id) {
+                case 'download':
+                    downloadRemoteSubtitles(context, subtitleId);
+                    break;
+                default:
+                    break;
             }
+        });
+    });
+}
 
-            if (file) {
+function centerFocus(elem, horiz, on) {
-                context.querySelector('.pathValue').innerHTML = file;
+    import('scrollHelper').then(({default: scrollHelper}) => {
-                context.querySelector('.originalFile').classList.remove('hide');
+        let fn = on ? 'on' : 'off';
-            } else {
+        scrollHelper.centerFocus[fn](elem, horiz);
-                context.querySelector('.pathValue').innerHTML = '';
+    });
-                context.querySelector('.originalFile').classList.add('hide');
+}
-            }
 
-            loading.hide();
+function showEditorInternal(itemId, serverId, template) {
-        }
+    hasChanges = false;
 
-        if (typeof itemId === 'string') {
+    let apiClient = connectionManager.getApiClient(serverId);
-            apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
+    return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
+        let dialogOptions = {
+            removeOnClose: true,
+            scrollY: false
+        };
+
+        if (layoutManager.tv) {
+            dialogOptions.size = 'fullscreen';
         } else {
-            onGetItem(itemId);
+            dialogOptions.size = 'small';
-        }
-    }
-
-    function onSearchSubmit(e) {
-        var form = this;
-
-        var lang = form.querySelector('#selectLanguage', form).value;
-
-        searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
-
-        e.preventDefault();
-        return false;
-    }
-
-    function onSubtitleListClick(e) {
-        var btnDelete = dom.parentWithClass(e.target, 'btnDelete');
-        if (btnDelete) {
-            var index = btnDelete.getAttribute('data-index');
-            var context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
-            deleteLocalSubtitle(context, index);
-        }
-    }
-
-    function onSubtitleResultsClick(e) {
-        var subtitleId;
-        var context;
-
-        var btnOptions = dom.parentWithClass(e.target, 'btnOptions');
-        if (btnOptions) {
-            subtitleId = btnOptions.getAttribute('data-subid');
-            context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
-            showDownloadOptions(btnOptions, context, subtitleId);
         }
 
-        var btnDownload = dom.parentWithClass(e.target, 'btnDownload');
+        let dlg = dialogHelper.createDialog(dialogOptions);
-        if (btnDownload) {
+
-            subtitleId = btnDownload.getAttribute('data-subid');
+        dlg.classList.add('formDialog');
-            context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
+        dlg.classList.add('subtitleEditorDialog');
-            downloadRemoteSubtitles(context, subtitleId);
+
+        dlg.innerHTML = globalize.translateHtml(template, 'core');
+
+        dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
+
+        dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
+
+        let btnSubmit = dlg.querySelector('.btnSubmit');
+
+        if (layoutManager.tv) {
+            centerFocus(dlg.querySelector('.formDialogContent'), false, true);
+            dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
+        } else {
+            btnSubmit.classList.add('hide');
         }
-    }
 
-    function showDownloadOptions(button, context, subtitleId) {
+        let editorContent = dlg.querySelector('.formDialogContent');
-        var items = [];
 
-        items.push({
+        dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
-            name: globalize.translate('Download'),
+        dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
-            id: 'download'
+
+        apiClient.getCultures().then(function (languages) {
+            fillLanguages(editorContent, apiClient, languages);
         });
 
-        require(['actionsheet'], function (actionsheet) {
+        dlg.querySelector('.btnCancel').addEventListener('click', function () {
-            actionsheet.show({
+            dialogHelper.close(dlg);
-                items: items,
-                positionTo: button
-
-            }).then(function (id) {
-                switch (id) {
-                    case 'download':
-                        downloadRemoteSubtitles(context, subtitleId);
-                        break;
-                    default:
-                        break;
-                }
-            });
         });
-    }
-
-    function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
-            scrollHelper = scrollHelper.default || scrollHelper;
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
-    }
-
-    function showEditorInternal(itemId, serverId, template) {
-        hasChanges = false;
-
-        var apiClient = connectionManager.getApiClient(serverId);
-        return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
-            var dialogOptions = {
-                removeOnClose: true,
-                scrollY: false
-            };
-
-            if (layoutManager.tv) {
-                dialogOptions.size = 'fullscreen';
-            } else {
-                dialogOptions.size = 'small';
-            }
-
-            var dlg = dialogHelper.createDialog(dialogOptions);
-
-            dlg.classList.add('formDialog');
-            dlg.classList.add('subtitleEditorDialog');
-
-            dlg.innerHTML = globalize.translateHtml(template, 'core');
-
-            dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
-
-            dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
-
-            var btnSubmit = dlg.querySelector('.btnSubmit');
-
-            if (layoutManager.tv) {
-                centerFocus(dlg.querySelector('.formDialogContent'), false, true);
-                dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
-            } else {
-                btnSubmit.classList.add('hide');
-            }
-
-            var editorContent = dlg.querySelector('.formDialogContent');
-
-            dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
-            dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
-
-            apiClient.getCultures().then(function (languages) {
-                fillLanguages(editorContent, apiClient, languages);
-            });
-
-            dlg.querySelector('.btnCancel').addEventListener('click', function () {
-                dialogHelper.close(dlg);
-            });
-
-            return new Promise(function (resolve, reject) {
-                dlg.addEventListener('close', function () {
-                    if (layoutManager.tv) {
-                        centerFocus(dlg.querySelector('.formDialogContent'), false, false);
-                    }
-
-                    if (hasChanges) {
-                        resolve();
-                    } else {
-                        reject();
-                    }
-                });
-
-                dialogHelper.open(dlg);
-
-                reload(editorContent, apiClient, item);
-            });
-        });
-    }
-
-    function showEditor(itemId, serverId) {
-        loading.show();
 
         return new Promise(function (resolve, reject) {
-            require(['text!./subtitleeditor.template.html'], function (template) {
+            dlg.addEventListener('close', function () {
-                showEditorInternal(itemId, serverId, template).then(resolve, reject);
+                if (layoutManager.tv) {
-            });
+                    centerFocus(dlg.querySelector('.formDialogContent'), false, false);
-        });
+                }
-    }
 
-    return {
+                if (hasChanges) {
-        show: showEditor
+                    resolve();
-    };
+                } else {
-});
+                    reject();
+                }
+            });
+
+            dialogHelper.open(dlg);
+
+            reload(editorContent, apiClient, item);
+        });
+    });
+}
+
+function showEditor(itemId, serverId) {
+    loading.show();
+
+    return new Promise(function (resolve, reject) {
+        import('text!./subtitleeditor.template.html').then(({default: template}) => {
+            showEditorInternal(itemId, serverId, template).then(resolve, reject);
+        });
+    });
+}
+
+export default {
+    show: showEditor
+};

src/components/subtitlesettings/subtitleappearancehelper.js

@@ -4,7 +4,7 @@
  */
 
 function getTextStyles(settings, preview) {
-    let list = [];
+    const list = [];
 
     switch (settings.textSize || '') {
         case 'smaller':
@@ -130,14 +130,14 @@ export function getStyles(settings, preview) {
 
 function applyStyleList(styles, elem) {
     for (let i = 0, length = styles.length; i < length; i++) {
-        let style = styles[i];
+        const style = styles[i];
 
         elem.style[style.name] = style.value;
     }
 }
 
 export function applyStyles(elements, appearanceSettings) {
-    let styles = getStyles(appearanceSettings, !!elements.preview);
+    const styles = getStyles(appearanceSettings, !!elements.preview);
 
     if (elements.text) {
         applyStyleList(styles.text, elements.text);

src/components/subtitlesettings/subtitlesettings.js

@@ -23,7 +23,7 @@ import 'css!./subtitlesettings';
  */
 
 function getSubtitleAppearanceObject(context) {
-    let appearanceSettings = {};
+    const appearanceSettings = {};
 
     appearanceSettings.textSize = context.querySelector('#selectTextSize').value;
     appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value;
@@ -41,7 +41,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
             context.querySelector('.fldBurnIn').classList.remove('hide');
         }
 
-        let selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');
+        const selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');
 
         settingsHelper.populateLanguages(selectSubtitleLanguage, allCultures);
 
@@ -101,9 +101,9 @@ function save(instance, context, userId, userSettings, apiClient, enableSaveConf
 }
 
 function onSubtitleModeChange(e) {
-    let view = dom.parentWithClass(e.target, 'subtitlesettings');
+    const view = dom.parentWithClass(e.target, 'subtitlesettings');
 
-    let subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
+    const subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
     for (let i = 0, length = subtitlesHelp.length; i < length; i++) {
         subtitlesHelp[i].classList.add('hide');
     }
@@ -111,11 +111,11 @@ function onSubtitleModeChange(e) {
 }
 
 function onAppearanceFieldChange(e) {
-    let view = dom.parentWithClass(e.target, 'subtitlesettings');
+    const view = dom.parentWithClass(e.target, 'subtitlesettings');
 
-    let appearanceSettings = getSubtitleAppearanceObject(view);
+    const appearanceSettings = getSubtitleAppearanceObject(view);
 
-    let elements = {
+    const elements = {
         window: view.querySelector('.subtitleappearance-preview-window'),
         text: view.querySelector('.subtitleappearance-preview-text'),
         preview: true
@@ -226,20 +226,20 @@ export class SubtitleSettings {
     }
 
     loadData() {
-        let self = this;
+        const self = this;
-        let context = self.options.element;
+        const context = self.options.element;
 
         loading.show();
 
-        let userId = self.options.userId;
+        const userId = self.options.userId;
-        let apiClient = connectionManager.getApiClient(self.options.serverId);
+        const apiClient = connectionManager.getApiClient(self.options.serverId);
-        let userSettings = self.options.userSettings;
+        const userSettings = self.options.userSettings;
 
         apiClient.getUser(userId).then(function (user) {
             userSettings.setUserInfo(userId, apiClient).then(function () {
                 self.dataLoaded = true;
 
-                let appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
+                const appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
 
                 loadForm(context, user, userSettings, appearanceSettings, apiClient);
             });
@@ -256,12 +256,12 @@ export class SubtitleSettings {
 
     onSubmit(e) {
         const self = this;
-        let apiClient = connectionManager.getApiClient(self.options.serverId);
+        const apiClient = connectionManager.getApiClient(self.options.serverId);
-        let userId = self.options.userId;
+        const userId = self.options.userId;
-        let userSettings = self.options.userSettings;
+        const userSettings = self.options.userSettings;
 
         userSettings.setUserInfo(userId, apiClient).then(function () {
-            let enableSaveConfirmation = self.options.enableSaveConfirmation;
+            const enableSaveConfirmation = self.options.enableSaveConfirmation;
             save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
         });
 

src/components/subtitlesettings/subtitlesettings.template.html

@@ -14,7 +14,7 @@
                 <option value="Smart">${Smart}</option>
                 <option value="OnlyForced">${OnlyForcedSubtitles}</option>
                 <option value="Always">${AlwaysPlaySubtitles}</option>
-                <option value="None">${NoSubtitles}</option>
+                <option value="None">${None}</option>
             </select>
             <div class="fieldDescription subtitlesDefaultHelp subtitlesHelp hide">${DefaultSubtitlesHelp}</div>
             <div class="fieldDescription subtitlesSmartHelp subtitlesHelp hide">${SmartSubtitlesHelp}</div>

src/components/subtitlesync/subtitlesync.js

@@ -1,147 +1,148 @@
-define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, layoutManager, template, css) {
+import playbackManager from 'playbackManager';
-    'use strict';
+import layoutManager from 'layoutManager';
+import template from 'text!./subtitlesync.template.html';
+import 'css!./subtitlesync';
 
-    playbackManager = playbackManager.default || playbackManager;
+let player;
+let subtitleSyncSlider;
+let subtitleSyncTextField;
+let subtitleSyncCloseButton;
+let subtitleSyncContainer;
 
-    var player;
+function init(instance) {
-    var subtitleSyncSlider;
+    const parent = document.createElement('div');
-    var subtitleSyncTextField;
+    document.body.appendChild(parent);
-    var subtitleSyncCloseButton;
+    parent.innerHTML = template;
-    var subtitleSyncContainer;
 
-    function init(instance) {
+    subtitleSyncSlider = parent.querySelector('.subtitleSyncSlider');
-        var parent = document.createElement('div');
+    subtitleSyncTextField = parent.querySelector('.subtitleSyncTextField');
-        document.body.appendChild(parent);
+    subtitleSyncCloseButton = parent.querySelector('.subtitleSync-closeButton');
-        parent.innerHTML = template;
+    subtitleSyncContainer = parent.querySelector('.subtitleSyncContainer');
 
-        subtitleSyncSlider = parent.querySelector('.subtitleSyncSlider');
+    if (layoutManager.tv) {
-        subtitleSyncTextField = parent.querySelector('.subtitleSyncTextField');
+        subtitleSyncSlider.classList.add('focusable');
-        subtitleSyncCloseButton = parent.querySelector('.subtitleSync-closeButton');
+        // HACK: Delay to give time for registered element attach (Firefox)
-        subtitleSyncContainer = parent.querySelector('.subtitleSyncContainer');
+        setTimeout(function () {
+            subtitleSyncSlider.enableKeyboardDragging();
+        }, 0);
+    }
 
-        if (layoutManager.tv) {
+    subtitleSyncContainer.classList.add('hide');
-            subtitleSyncSlider.classList.add('focusable');
-            // HACK: Delay to give time for registered element attach (Firefox)
-            setTimeout(function () {
-                subtitleSyncSlider.enableKeyboardDragging();
-            }, 0);
-        }
 
-        subtitleSyncContainer.classList.add('hide');
+    subtitleSyncTextField.updateOffset = function (offset) {
+        this.textContent = offset + 's';
+    };
 
-        subtitleSyncTextField.updateOffset = function(offset) {
+    subtitleSyncTextField.addEventListener('click', function () {
-            this.textContent = offset + 's';
+        // keep focus to prevent fade with osd
-        };
+        this.hasFocus = true;
+    });
 
-        subtitleSyncTextField.addEventListener('click', function () {
+    subtitleSyncTextField.addEventListener('keydown', function (event) {
+        if (event.key === 'Enter') {
+            // if input key is enter search for float pattern
+            let inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
+            if (inputOffset) {
+                inputOffset = inputOffset[0];
+
+                // replace current text by considered offset
+                this.textContent = inputOffset + 's';
+
+                inputOffset = parseFloat(inputOffset);
+                // set new offset
+                playbackManager.setSubtitleOffset(inputOffset, player);
+                // synchronize with slider value
+                subtitleSyncSlider.updateOffset(
+                    getPercentageFromOffset(inputOffset));
+            } else {
+                this.textContent = (playbackManager.getPlayerSubtitleOffset(player) || 0) + 's';
+            }
+            this.hasFocus = false;
+            event.preventDefault();
+        } else {
             // keep focus to prevent fade with osd
             this.hasFocus = true;
-        });
+            if (event.key.match(/[+-\d.s]/) === null) {
-
-        subtitleSyncTextField.addEventListener('keydown', function(event) {
-            if (event.key === 'Enter') {
-                // if input key is enter search for float pattern
-                var inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
-                if (inputOffset) {
-                    inputOffset = inputOffset[0];
-
-                    // replace current text by considered offset
-                    this.textContent = inputOffset + 's';
-
-                    inputOffset = parseFloat(inputOffset);
-                    // set new offset
-                    playbackManager.setSubtitleOffset(inputOffset, player);
-                    // synchronize with slider value
-                    subtitleSyncSlider.updateOffset(
-                        getPercentageFromOffset(inputOffset));
-                } else {
-                    this.textContent = (playbackManager.getPlayerSubtitleOffset(player) || 0) + 's';
-                }
-                this.hasFocus = false;
                 event.preventDefault();
-            } else {
-                // keep focus to prevent fade with osd
-                this.hasFocus = true;
-                if (event.key.match(/[+-\d.s]/) === null) {
-                    event.preventDefault();
-                }
             }
+        }
 
-            // FIXME: TV layout will require special handling for navigation keys. But now field is not focusable
+        // FIXME: TV layout will require special handling for navigation keys. But now field is not focusable
-            event.stopPropagation();
+        event.stopPropagation();
-        });
+    });
 
-        subtitleSyncTextField.blur = function() {
+    subtitleSyncTextField.blur = function () {
-            // prevent textfield to blur while element has focus
+        // prevent textfield to blur while element has focus
-            if (!this.hasFocus && this.prototype) {
+        if (!this.hasFocus && this.prototype) {
-                this.prototype.blur();
+            this.prototype.blur();
-            }
+        }
-        };
+    };
 
-        subtitleSyncSlider.updateOffset = function(percent) {
+    subtitleSyncSlider.updateOffset = function (percent) {
-            // default value is 0s = 50%
+        // default value is 0s = 50%
-            this.value = percent === undefined ? 50 : percent;
+        this.value = percent === undefined ? 50 : percent;
-        };
+    };
 
-        subtitleSyncSlider.addEventListener('change', function () {
+    subtitleSyncSlider.addEventListener('change', function () {
-            // set new offset
+        // set new offset
-            playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
+        playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
-            // synchronize with textField value
+        // synchronize with textField value
-            subtitleSyncTextField.updateOffset(
+        subtitleSyncTextField.updateOffset(
-                getOffsetFromPercentage(this.value));
+            getOffsetFromPercentage(this.value));
-        });
+    });
 
-        subtitleSyncSlider.getBubbleHtml = function (value) {
+    subtitleSyncSlider.getBubbleHtml = function (value) {
-            var newOffset = getOffsetFromPercentage(value);
+        const newOffset = getOffsetFromPercentage(value);
-            return '<h1 class="sliderBubbleText">' +
+        return '<h1 class="sliderBubbleText">' +
             (newOffset > 0 ? '+' : '') + parseFloat(newOffset) + 's' +
             '</h1>';
-        };
+    };
 
-        subtitleSyncCloseButton.addEventListener('click', function() {
+    subtitleSyncCloseButton.addEventListener('click', function () {
-            playbackManager.disableShowingSubtitleOffset(player);
+        playbackManager.disableShowingSubtitleOffset(player);
-            SubtitleSync.prototype.toggle('forceToHide');
+        SubtitleSync.prototype.toggle('forceToHide');
-        });
+    });
 
-        instance.element = parent;
+    instance.element = parent;
-    }
+}
 
-    function getOffsetFromPercentage(value) {
+function getOffsetFromPercentage(value) {
-        // convert percent to fraction
+    // convert percent to fraction
-        var offset = (value - 50) / 50;
+    let offset = (value - 50) / 50;
-        // multiply by offset min/max range value (-x to +x) :
+    // multiply by offset min/max range value (-x to +x) :
-        offset *= 30;
+    offset *= 30;
-        return offset.toFixed(1);
+    return offset.toFixed(1);
-    }
+}
 
-    function getPercentageFromOffset(value) {
+function getPercentageFromOffset(value) {
-        // divide by offset min/max range value (-x to +x) :
+    // divide by offset min/max range value (-x to +x) :
-        var percentValue = value / 30;
+    let percentValue = value / 30;
-        // convert fraction to percent
+    // convert fraction to percent
-        percentValue *= 50;
+    percentValue *= 50;
-        percentValue += 50;
+    percentValue += 50;
-        return Math.min(100, Math.max(0, percentValue.toFixed()));
+    return Math.min(100, Math.max(0, percentValue.toFixed()));
-    }
+}
 
-    function SubtitleSync(currentPlayer) {
+class SubtitleSync {
+    constructor(currentPlayer) {
         player = currentPlayer;
         init(this);
     }
 
-    SubtitleSync.prototype.destroy = function() {
+    destroy() {
         SubtitleSync.prototype.toggle('forceToHide');
         if (player) {
             playbackManager.disableShowingSubtitleOffset(player);
             playbackManager.setSubtitleOffset(0, player);
         }
-        var elem = this.element;
+        const elem = this.element;
         if (elem) {
             elem.parentNode.removeChild(elem);
             this.element = null;
         }
-    };
+    }
 
-    SubtitleSync.prototype.toggle = function(action) {
+    toggle(action) {
         if (player && playbackManager.supportSubtitleOffset(player)) {
             /* eslint-disable no-fallthrough */
             switch (action) {
@@ -170,7 +171,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
             }
             /* eslint-enable no-fallthrough */
         }
-    };
+    }
+}
 
-    return SubtitleSync;
+export default SubtitleSync;
-});

src/components/tabbedview/tabbedview.js

@@ -1,30 +1,33 @@
-define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (backdrop, mainTabsManager, layoutManager) {
+import backdrop from 'backdrop';
-    'use strict';
+import * as mainTabsManager from 'mainTabsManager';
+import layoutManager from 'layoutManager';
+import 'emby-tabs';
 
-    function onViewDestroy(e) {
+function onViewDestroy(e) {
-        var tabControllers = this.tabControllers;
+    var tabControllers = this.tabControllers;
 
-        if (tabControllers) {
+    if (tabControllers) {
-            tabControllers.forEach(function (t) {
+        tabControllers.forEach(function (t) {
-                if (t.destroy) {
+            if (t.destroy) {
-                    t.destroy();
+                t.destroy();
-                }
+            }
-            });
+        });
 
-            this.tabControllers = null;
+        this.tabControllers = null;
-        }
-
-        this.view = null;
-        this.params = null;
-        this.currentTabController = null;
-        this.initialTabIndex = null;
     }
 
-    function onBeforeTabChange() {
+    this.view = null;
+    this.params = null;
+    this.currentTabController = null;
+    this.initialTabIndex = null;
+}
 
-    }
+function onBeforeTabChange() {
 
-    function TabbedView(view, params) {
+}
+
+class TabbedView {
+    constructor(view, params) {
         this.tabControllers = [];
         this.view = view;
         this.params = params;
@@ -85,7 +88,7 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
         view.addEventListener('viewdestroy', onViewDestroy.bind(this));
     }
 
-    TabbedView.prototype.onResume = function (options) {
+    onResume(options) {
         this.setTitle();
         backdrop.clearBackdrop();
 
@@ -96,19 +99,18 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
         } else if (currentTabController && currentTabController.onResume) {
             currentTabController.onResume({});
         }
-    };
+    }
 
-    TabbedView.prototype.onPause = function () {
+    onPause() {
         var currentTabController = this.currentTabController;
 
         if (currentTabController && currentTabController.onPause) {
             currentTabController.onPause();
         }
-    };
+    }
-
+    setTitle() {
-    TabbedView.prototype.setTitle = function () {
         Emby.Page.setTitle('');
-    };
+    }
+}
 
-    return TabbedView;
+export default TabbedView;
-});

src/components/themeMediaPlayer.js

@@ -1,103 +1,101 @@
-define(['playbackManager', 'userSettings', 'connectionManager'], function (playbackManager, userSettings, connectionManager) {
+import playbackManager from 'playbackManager';
-    'use strict';
+import * as userSettings from 'userSettings';
+import connectionManager from 'connectionManager';
 
-    playbackManager = playbackManager.default || playbackManager;
+let currentOwnerId;
+let currentThemeIds = [];
 
-    var currentOwnerId;
+function playThemeMedia(items, ownerId) {
-    var currentThemeIds = [];
+    const currentThemeItems = items.filter(function (i) {
+        return enabled(i.MediaType);
+    });
 
-    function playThemeMedia(items, ownerId) {
+    if (currentThemeItems.length) {
-        var currentThemeItems = items.filter(function (i) {
+        // Stop if a theme song from another ownerId
-            return enabled(i.MediaType);
+        // Leave it alone if anything else (e.g user playing a movie)
+        if (!currentOwnerId && playbackManager.isPlaying()) {
+            return;
+        }
+
+        currentThemeIds = currentThemeItems.map(function (i) {
+            return i.Id;
         });
 
-        if (currentThemeItems.length) {
+        playbackManager.play({
-            // Stop if a theme song from another ownerId
+            items: currentThemeItems,
-            // Leave it alone if anything else (e.g user playing a movie)
+            fullscreen: false,
-            if (!currentOwnerId && playbackManager.isPlaying()) {
+            enableRemotePlayers: false
-                return;
+        }).then(function () {
-            }
+            currentOwnerId = ownerId;
-
-            currentThemeIds = currentThemeItems.map(function (i) {
-                return i.Id;
-            });
-
-            playbackManager.play({
-                items: currentThemeItems,
-                fullscreen: false,
-                enableRemotePlayers: false
-            }).then(function () {
-                currentOwnerId = ownerId;
-            });
-        } else {
-            stopIfPlaying();
-        }
-    }
-
-    function stopIfPlaying() {
-        if (currentOwnerId) {
-            playbackManager.stop();
-        }
-
-        currentOwnerId = null;
-    }
-
-    function enabled(mediaType) {
-        if (mediaType === 'Video') {
-            return userSettings.enableThemeVideos();
-        }
-
-        return userSettings.enableThemeSongs();
-    }
-
-    var excludeTypes = ['CollectionFolder', 'UserView', 'Program', 'SeriesTimer', 'Person', 'TvChannel', 'Channel'];
-
-    function loadThemeMedia(item) {
-        if (item.CollectionType) {
-            stopIfPlaying();
-            return;
-        }
-
-        if (excludeTypes.indexOf(item.Type) !== -1) {
-            stopIfPlaying();
-            return;
-        }
-
-        var apiClient = connectionManager.getApiClient(item.ServerId);
-        apiClient.getThemeMedia(apiClient.getCurrentUserId(), item.Id, true).then(function (themeMediaResult) {
-            var ownerId = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.OwnerId : themeMediaResult.ThemeSongsResult.OwnerId;
-
-            if (ownerId !== currentOwnerId) {
-                var items = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.Items : themeMediaResult.ThemeSongsResult.Items;
-
-                playThemeMedia(items, ownerId);
-            }
         });
+    } else {
+        stopIfPlaying();
+    }
+}
+
+function stopIfPlaying() {
+    if (currentOwnerId) {
+        playbackManager.stop();
     }
 
-    document.addEventListener('viewshow', function (e) {
+    currentOwnerId = null;
-        var state = e.detail.state || {};
+}
-        var item = state.item;
 
-        if (item && item.ServerId) {
+function enabled(mediaType) {
-            loadThemeMedia(item);
+    if (mediaType === 'Video') {
-            return;
+        return userSettings.enableThemeVideos();
-        }
+    }
 
-        var viewOptions = e.detail.options || {};
+    return userSettings.enableThemeSongs();
+}
 
-        if (viewOptions.supportsThemeMedia) {
+const excludeTypes = ['CollectionFolder', 'UserView', 'Program', 'SeriesTimer', 'Person', 'TvChannel', 'Channel'];
-            // Do nothing here, allow it to keep playing
-        } else {
-            playThemeMedia([], null);
-        }
-    }, true);
 
-    Events.on(playbackManager, 'playbackstart', function (e, player) {
+function loadThemeMedia(item) {
-        var item = playbackManager.currentItem(player);
+    if (item.CollectionType) {
-        // User played something manually
+        stopIfPlaying();
-        if (currentThemeIds.indexOf(item.Id) == -1) {
+        return;
-            currentOwnerId = null;
+    }
+
+    if (excludeTypes.indexOf(item.Type) !== -1) {
+        stopIfPlaying();
+        return;
+    }
+
+    const apiClient = connectionManager.getApiClient(item.ServerId);
+    apiClient.getThemeMedia(apiClient.getCurrentUserId(), item.Id, true).then(function (themeMediaResult) {
+        const ownerId = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.OwnerId : themeMediaResult.ThemeSongsResult.OwnerId;
+
+        if (ownerId !== currentOwnerId) {
+            const items = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.Items : themeMediaResult.ThemeSongsResult.Items;
+
+            playThemeMedia(items, ownerId);
         }
     });
+}
+
+document.addEventListener('viewshow', function (e) {
+    const state = e.detail.state || {};
+    const item = state.item;
+
+    if (item && item.ServerId) {
+        loadThemeMedia(item);
+        return;
+    }
+
+    const viewOptions = e.detail.options || {};
+
+    if (viewOptions.supportsThemeMedia) {
+        // Do nothing here, allow it to keep playing
+    } else {
+        playThemeMedia([], null);
+    }
+}, true);
+
+Events.on(playbackManager, 'playbackstart', function (e, player) {
+    const item = playbackManager.currentItem(player);
+    // User played something manually
+    if (currentThemeIds.indexOf(item.Id) == -1) {
+        currentOwnerId = null;
+    }
 });

src/components/tunerPicker.js

@@ -1,182 +1,185 @@
-define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize', 'loading', 'browser', 'focusManager', 'scrollHelper', 'material-icons', 'formDialogStyle', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading, browser, focusManager, scrollHelper) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import loading from 'loading';
+import browser from 'browser';
+import focusManager from 'focusManager';
+import scrollHelper from 'scrollHelper';
+import 'material-icons';
+import 'formDialogStyle';
+import 'emby-button';
+import 'emby-itemscontainer';
+import 'cardStyle';
 
-    browser = browser.default || browser;
+const enableFocusTransform = !browser.slow && !browser.edge;
-    loading = loading.default || loading;
-    focusManager = focusManager.default || focusManager;
-    scrollHelper = scrollHelper.default || scrollHelper;
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+function getEditorHtml() {
+    let html = '';
+    html += '<div class="formDialogContent scrollY">';
+    html += '<div class="dialogContentInner dialog-content-centered">';
+    html += '<div class="loadingContent hide">';
+    html += '<h1>' + globalize.translate('DetectingDevices') + '...</h1>';
+    html += '<p>' + globalize.translate('MessagePleaseWait') + '</p>';
+    html += '</div>';
+    html += '<h1 style="margin-bottom:.25em;" class="devicesHeader hide">' + globalize.translate('HeaderNewDevices') + '</h1>';
+    html += '<div is="emby-itemscontainer" class="results vertical-wrap">';
+    html += '</div>';
+    html += '</div>';
+    return html += '</div>';
+}
 
-    function getEditorHtml() {
+function getDeviceHtml(device) {
-        var html = '';
+    let html = '';
-        html += '<div class="formDialogContent scrollY">';
+    let cssClass = 'card scalableCard backdropCard backdropCard-scalable';
-        html += '<div class="dialogContentInner dialog-content-centered">';
+    const cardBoxCssClass = 'cardBox visualCardBox';
-        html += '<div class="loadingContent hide">';
+    const padderClass = 'cardPadder-backdrop';
-        html += '<h1>' + globalize.translate('DetectingDevices') + '...</h1>';
-        html += '<p>' + globalize.translate('MessagePleaseWait') + '</p>';
-        html += '</div>';
-        html += '<h1 style="margin-bottom:.25em;" class="devicesHeader hide">' + globalize.translate('HeaderNewDevices') + '</h1>';
-        html += '<div is="emby-itemscontainer" class="results vertical-wrap">';
-        html += '</div>';
-        html += '</div>';
-        return html += '</div>';
-    }
 
-    function getDeviceHtml(device) {
+    // TODO move card creation code to Card component
-        var padderClass;
-        var html = '';
-        var cssClass = 'card scalableCard';
-        var cardBoxCssClass = 'cardBox visualCardBox';
-        cssClass += ' backdropCard backdropCard-scalable';
-        padderClass = 'cardPadder-backdrop';
 
-        // TODO move card creation code to Card component
+    if (layoutManager.tv) {
+        cssClass += ' show-focus';
 
-        if (layoutManager.tv) {
+        if (enableFocusTransform) {
-            cssClass += ' show-focus';
+            cssClass += ' show-animation';
-
-            if (enableFocusTransform) {
-                cssClass += ' show-animation';
-            }
-        }
-
-        html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">';
-        html += '<div class="' + cardBoxCssClass + '">';
-        html += '<div class="cardScalable visualCardBox-cardScalable">';
-        html += '<div class="' + padderClass + '"></div>';
-        html += '<div class="cardContent searchImage">';
-        html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
-        html += '</div>';
-        html += '</div>';
-        html += '<div class="cardFooter visualCardBox-cardFooter">';
-        html += '<div class="cardText cardTextCentered">' + getTunerName(device.Type) + '</div>';
-        html += '<div class="cardText cardTextCentered cardText-secondary">' + device.FriendlyName + '</div>';
-        html += '<div class="cardText cardText-secondary cardTextCentered">';
-        html += device.Url || '&nbsp;';
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        return html += '</button>';
-    }
-
-    function getTunerName(providerId) {
-        switch (providerId = providerId.toLowerCase()) {
-            case 'm3u':
-                return 'M3U';
-
-            case 'hdhomerun':
-                return 'HDHomerun';
-
-            case 'hauppauge':
-                return 'Hauppauge';
-
-            case 'satip':
-                return 'DVB';
-
-            default:
-                return 'Unknown';
         }
     }
 
-    function renderDevices(view, devices) {
+    html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">';
-        var i;
+    html += '<div class="' + cardBoxCssClass + '">';
-        var length;
+    html += '<div class="cardScalable visualCardBox-cardScalable">';
-        var html = '';
+    html += '<div class="' + padderClass + '"></div>';
+    html += '<div class="cardContent searchImage">';
+    html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
+    html += '</div>';
+    html += '</div>';
+    html += '<div class="cardFooter visualCardBox-cardFooter">';
+    html += '<div class="cardText cardTextCentered">' + getTunerName(device.Type) + '</div>';
+    html += '<div class="cardText cardTextCentered cardText-secondary">' + device.FriendlyName + '</div>';
+    html += '<div class="cardText cardText-secondary cardTextCentered">';
+    html += device.Url || '&nbsp;';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html += '</button>';
+}
 
-        for (i = 0, length = devices.length; i < length; i++) {
+function getTunerName(providerId) {
-            html += getDeviceHtml(devices[i]);
+    switch (providerId = providerId.toLowerCase()) {
-        }
+        case 'm3u':
+            return 'M3U';
 
-        if (devices.length) {
+        case 'hdhomerun':
-            view.querySelector('.devicesHeader').classList.remove('hide');
+            return 'HDHomerun';
-        } else {
-            html = '<p><br/>' + globalize.translate('NoNewDevicesFound') + '</p>';
-            view.querySelector('.devicesHeader').classList.add('hide');
-        }
 
-        var elem = view.querySelector('.results');
+        case 'hauppauge':
-        elem.innerHTML = html;
+            return 'Hauppauge';
 
-        if (layoutManager.tv) {
+        case 'satip':
-            focusManager.autoFocus(elem);
+            return 'DVB';
-        }
+
+        default:
+            return 'Unknown';
+    }
+}
+
+function renderDevices(view, devices) {
+    let html = '';
+
+    for (let i = 0, length = devices.length; i < length; i++) {
+        html += getDeviceHtml(devices[i]);
     }
 
-    function discoverDevices(view, apiClient) {
+    if (devices.length) {
-        loading.show();
+        view.querySelector('.devicesHeader').classList.remove('hide');
-        view.querySelector('.loadingContent').classList.remove('hide');
+    } else {
-        return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', {
+        html = '<p><br/>' + globalize.translate('NoNewDevicesFound') + '</p>';
-            NewDevicesOnly: true
+        view.querySelector('.devicesHeader').classList.add('hide');
-        })).then(function (devices) {
-            currentDevices = devices;
-            renderDevices(view, devices);
-            view.querySelector('.loadingContent').classList.add('hide');
-            loading.hide();
-        });
     }
 
-    function tunerPicker() {
+    const elem = view.querySelector('.results');
-        this.show = function (options) {
+    elem.innerHTML = html;
-            var dialogOptions = {
-                removeOnClose: true,
-                scrollY: false
-            };
 
-            if (layoutManager.tv) {
+    if (layoutManager.tv) {
-                dialogOptions.size = 'fullscreen';
+        focusManager.autoFocus(elem);
-            } else {
+    }
-                dialogOptions.size = 'small';
+}
-            }
 
-            var dlg = dialogHelper.createDialog(dialogOptions);
+function discoverDevices(view, apiClient) {
-            dlg.classList.add('formDialog');
+    loading.show();
-            var html = '';
+    view.querySelector('.loadingContent').classList.remove('hide');
-            html += '<div class="formDialogHeader">';
+    return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', {
-            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
+        NewDevicesOnly: true
-            html += '<h3 class="formDialogHeaderTitle">';
+    })).then(function (devices) {
-            html += globalize.translate('HeaderLiveTvTunerSetup');
+        currentDevices = devices;
-            html += '</h3>';
+        renderDevices(view, devices);
-            html += '</div>';
+        view.querySelector('.loadingContent').classList.add('hide');
-            html += getEditorHtml();
+        loading.hide();
-            dlg.innerHTML = html;
+    });
-            dlg.querySelector('.btnCancel').addEventListener('click', function () {
+}
-                dialogHelper.close(dlg);
-            });
-            var deviceResult;
-            dlg.querySelector('.results').addEventListener('click', function (e) {
-                var tunerCard = dom.parentWithClass(e.target, 'card');
 
-                if (tunerCard) {
+function tunerPicker() {
-                    var deviceId = tunerCard.getAttribute('data-id');
+    this.show = function (options) {
-                    deviceResult = currentDevices.filter(function (d) {
+        const dialogOptions = {
-                        return d.DeviceId === deviceId;
+            removeOnClose: true,
-                    })[0];
+            scrollY: false
-                    dialogHelper.close(dlg);
-                }
-            });
-
-            if (layoutManager.tv) {
-                scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
-            }
-
-            var apiClient = connectionManager.getApiClient(options.serverId);
-            discoverDevices(dlg, apiClient);
-
-            if (layoutManager.tv) {
-                scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
-            }
-
-            return dialogHelper.open(dlg).then(function () {
-                if (deviceResult) {
-                    return Promise.resolve(deviceResult);
-                }
-
-                return Promise.reject();
-            });
         };
-    }
 
-    var currentDevices = [];
+        if (layoutManager.tv) {
-    return tunerPicker;
+            dialogOptions.size = 'fullscreen';
-});
+        } else {
+            dialogOptions.size = 'small';
+        }
+
+        const dlg = dialogHelper.createDialog(dialogOptions);
+        dlg.classList.add('formDialog');
+        let html = '';
+        html += '<div class="formDialogHeader">';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
+        html += '<h3 class="formDialogHeaderTitle">';
+        html += globalize.translate('HeaderLiveTvTunerSetup');
+        html += '</h3>';
+        html += '</div>';
+        html += getEditorHtml();
+        dlg.innerHTML = html;
+        dlg.querySelector('.btnCancel').addEventListener('click', function () {
+            dialogHelper.close(dlg);
+        });
+        let deviceResult;
+        dlg.querySelector('.results').addEventListener('click', function (e) {
+            const tunerCard = dom.parentWithClass(e.target, 'card');
+
+            if (tunerCard) {
+                const deviceId = tunerCard.getAttribute('data-id');
+                deviceResult = currentDevices.filter(function (d) {
+                    return d.DeviceId === deviceId;
+                })[0];
+                dialogHelper.close(dlg);
+            }
+        });
+
+        if (layoutManager.tv) {
+            scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+        }
+
+        const apiClient = connectionManager.getApiClient(options.serverId);
+        discoverDevices(dlg, apiClient);
+
+        if (layoutManager.tv) {
+            scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
+        }
+
+        return dialogHelper.open(dlg).then(function () {
+            if (deviceResult) {
+                return Promise.resolve(deviceResult);
+            }
+
+            return Promise.reject();
+        });
+    };
+}
+
+let currentDevices = [];
+
+export default tunerPicker;

src/components/tvproviders/schedulesdirect.template.html

@@ -27,7 +27,7 @@
             <input is="emby-input" class="txtPass" label="${LabelPassword}" required="required" autocomplete="off" type="password" />
         </div>
         <div>
-            <button is="emby-button" type="submit" class="raised button-submit block"><span>${ButtonSave}</span></button>
+            <button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button>
         </div>
     </div>
 </form>
@@ -65,7 +65,7 @@
             </div>
             <br />
             <div>
-                <button is="emby-button" type="submit" class="raised button-submit block btnSubmitListingsContainer btnSubmitListings hide"><span>${ButtonSave}</span></button>
+                <button is="emby-button" type="submit" class="raised button-submit block btnSubmitListingsContainer btnSubmitListings hide"><span>${Save}</span></button>
                 <button is="emby-button" type="button" class="raised button-cancel block btnCancel hide" onclick="history.back();"><span>${ButtonCancel}</span></button>
             </div>
         </div>

src/components/tvproviders/xmltv.template.html

@@ -56,7 +56,7 @@
         </div>
     </div>
     <div>
-        <button is="emby-button" type="submit" class="raised button-submit block btnSubmitListings hide"><span>${ButtonSave}</span></button>
+        <button is="emby-button" type="submit" class="raised button-submit block btnSubmitListings hide"><span>${Save}</span></button>
         <button is="emby-button" type="button" class="raised button-cancel block btnCancel hide" onclick="history.back();"><span>${ButtonCancel}</span></button>
     </div>
 </form>

src/components/userdatabuttons/userdatabuttons.js

@@ -1,214 +1,219 @@
-define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-button-light', 'material-icons', 'emby-button', 'css!./userdatabuttons'], function (connectionManager, globalize, dom, itemHelper) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import globalize from 'globalize';
+import dom from 'dom';
+import itemHelper from 'itemHelper';
+import 'paper-icon-button-light';
+import 'material-icons';
+import 'emby-button';
+import 'css!./userdatabuttons';
 
-    var userDataMethods = {
+const userDataMethods = {
-        markPlayed: markPlayed,
+    markPlayed: markPlayed,
-        markDislike: markDislike,
+    markDislike: markDislike,
-        markLike: markLike,
+    markLike: markLike,
-        markFavorite: markFavorite
+    markFavorite: markFavorite
-    };
+};
 
-    function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCssClass, icon, tooltip, style) {
+function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCssClass, icon, tooltip, style) {
-        if (style === 'fab-mini') {
+    if (style === 'fab-mini') {
-            style = 'fab';
+        style = 'fab';
-            buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini';
+        buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini';
-        }
-
-        var is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
-        var className = style === 'fab' ? 'autoSize fab' : 'autoSize';
-
-        if (buttonCssClass) {
-            className += ' ' + buttonCssClass;
-        }
-
-        if (iconCssClass) {
-            iconCssClass += ' ';
-        } else {
-            iconCssClass = '';
-        }
-
-        iconCssClass += 'material-icons';
-
-        return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><span class="' + iconCssClass + ' ' + icon + '"></span></button>';
     }
 
-    function onContainerClick(e) {
+    const is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
-        var btnUserData = dom.parentWithClass(e.target, 'btnUserData');
+    let className = style === 'fab' ? 'autoSize fab' : 'autoSize';
 
-        if (!btnUserData) {
+    if (buttonCssClass) {
-            return;
+        className += ' ' + buttonCssClass;
-        }
-
-        var method = btnUserData.getAttribute('data-method');
-        userDataMethods[method](btnUserData);
     }
 
-    function fill(options) {
+    if (iconCssClass) {
-        var html = getIconsHtml(options);
+        iconCssClass += ' ';
-
+    } else {
-        if (options.fillMode === 'insertAdjacent') {
+        iconCssClass = '';
-            options.element.insertAdjacentHTML(options.insertLocation || 'beforeend', html);
-        } else {
-            options.element.innerHTML = html;
-        }
-
-        dom.removeEventListener(options.element, 'click', onContainerClick, {
-            passive: true
-        });
-
-        dom.addEventListener(options.element, 'click', onContainerClick, {
-            passive: true
-        });
     }
 
-    function destroy(options) {
+    iconCssClass += 'material-icons';
-        options.element.innerHTML = '';
 
-        dom.removeEventListener(options.element, 'click', onContainerClick, {
+    return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><span class="' + iconCssClass + ' ' + icon + '"></span></button>';
-            passive: true
+}
-        });
+
+function onContainerClick(e) {
+    const btnUserData = dom.parentWithClass(e.target, 'btnUserData');
+
+    if (!btnUserData) {
+        return;
     }
 
-    function getIconsHtml(options) {
+    const method = btnUserData.getAttribute('data-method');
-        var item = options.item;
+    userDataMethods[method](btnUserData);
-        var includePlayed = options.includePlayed;
+}
-        var cssClass = options.cssClass;
-        var style = options.style;
 
-        var html = '';
+function fill(options) {
+    const html = getIconsHtml(options);
 
-        var userData = item.UserData || {};
+    if (options.fillMode === 'insertAdjacent') {
+        options.element.insertAdjacentHTML(options.insertLocation || 'beforeend', html);
+    } else {
+        options.element.innerHTML = html;
+    }
 
-        var itemId = item.Id;
+    dom.removeEventListener(options.element, 'click', onContainerClick, {
+        passive: true
+    });
 
-        if (itemHelper.isLocalItem(item)) {
+    dom.addEventListener(options.element, 'click', onContainerClick, {
-            return html;
+        passive: true
-        }
+    });
+}
 
-        var btnCssClass = 'btnUserData';
+function destroy(options) {
+    options.element.innerHTML = '';
 
-        if (cssClass) {
+    dom.removeEventListener(options.element, 'click', onContainerClick, {
-            btnCssClass += ' ' + cssClass;
+        passive: true
-        }
+    });
+}
 
-        var iconCssClass = options.iconCssClass;
+function getIconsHtml(options) {
+    const item = options.item;
+    const includePlayed = options.includePlayed;
+    const cssClass = options.cssClass;
+    const style = options.style;
 
-        var serverId = item.ServerId;
+    let html = '';
 
-        if (includePlayed !== false) {
+    const userData = item.UserData || {};
-            var tooltipPlayed = globalize.translate('MarkPlayed');
 
-            if (itemHelper.canMarkPlayed(item)) {
+    const itemId = item.Id;
-                if (userData.Played) {
-                    html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass + ' btnUserDataOn', iconCssClass, 'check', tooltipPlayed, style);
-                } else {
-                    html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass, iconCssClass, 'check', tooltipPlayed, style);
-                }
-            }
-        }
-
-        var tooltipFavorite = globalize.translate('Favorite');
-        if (userData.IsFavorite) {
-            html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style);
-        } else {
-            html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData', iconCssClass, 'favorite', tooltipFavorite, style);
-        }
 
+    if (itemHelper.isLocalItem(item)) {
         return html;
     }
 
-    function markFavorite(link) {
+    let btnCssClass = 'btnUserData';
-        var id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
 
-        var markAsFavorite = !link.classList.contains('btnUserDataOn');
+    if (cssClass) {
+        btnCssClass += ' ' + cssClass;
+    }
 
-        favorite(id, serverId, markAsFavorite);
+    const iconCssClass = options.iconCssClass;
 
-        if (markAsFavorite) {
+    const serverId = item.ServerId;
-            link.classList.add('btnUserDataOn');
+
-        } else {
+    if (includePlayed !== false) {
-            link.classList.remove('btnUserDataOn');
+        const tooltipPlayed = globalize.translate('MarkPlayed');
+
+        if (itemHelper.canMarkPlayed(item)) {
+            if (userData.Played) {
+                html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass + ' btnUserDataOn', iconCssClass, 'check', tooltipPlayed, style);
+            } else {
+                html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass, iconCssClass, 'check', tooltipPlayed, style);
+            }
         }
     }
 
-    function markLike(link) {
+    const tooltipFavorite = globalize.translate('Favorite');
-        var id = link.getAttribute('data-itemid');
+    if (userData.IsFavorite) {
-        var serverId = link.getAttribute('data-serverid');
+        html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style);
-
+    } else {
-        if (!link.classList.contains('btnUserDataOn')) {
+        html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData', iconCssClass, 'favorite', tooltipFavorite, style);
-            likes(id, serverId, true);
-
-            link.classList.add('btnUserDataOn');
-        } else {
-            clearLike(id, serverId);
-
-            link.classList.remove('btnUserDataOn');
-        }
-
-        link.parentNode.querySelector('.btnDislike').classList.remove('btnUserDataOn');
     }
 
-    function markDislike(link) {
+    return html;
-        var id = link.getAttribute('data-itemid');
+}
-        var serverId = link.getAttribute('data-serverid');
 
-        if (!link.classList.contains('btnUserDataOn')) {
+function markFavorite(link) {
-            likes(id, serverId, false);
+    const id = link.getAttribute('data-itemid');
+    const serverId = link.getAttribute('data-serverid');
 
-            link.classList.add('btnUserDataOn');
+    const markAsFavorite = !link.classList.contains('btnUserDataOn');
-        } else {
-            clearLike(id, serverId);
 
-            link.classList.remove('btnUserDataOn');
+    favorite(id, serverId, markAsFavorite);
-        }
 
-        link.parentNode.querySelector('.btnLike').classList.remove('btnUserDataOn');
+    if (markAsFavorite) {
+        link.classList.add('btnUserDataOn');
+    } else {
+        link.classList.remove('btnUserDataOn');
+    }
+}
+
+function markLike(link) {
+    const id = link.getAttribute('data-itemid');
+    const serverId = link.getAttribute('data-serverid');
+
+    if (!link.classList.contains('btnUserDataOn')) {
+        likes(id, serverId, true);
+
+        link.classList.add('btnUserDataOn');
+    } else {
+        clearLike(id, serverId);
+
+        link.classList.remove('btnUserDataOn');
     }
 
-    function markPlayed(link) {
+    link.parentNode.querySelector('.btnDislike').classList.remove('btnUserDataOn');
-        var id = link.getAttribute('data-itemid');
+}
-        var serverId = link.getAttribute('data-serverid');
 
-        if (!link.classList.contains('btnUserDataOn')) {
+function markDislike(link) {
-            played(id, serverId, true);
+    const id = link.getAttribute('data-itemid');
+    const serverId = link.getAttribute('data-serverid');
 
-            link.classList.add('btnUserDataOn');
+    if (!link.classList.contains('btnUserDataOn')) {
-        } else {
+        likes(id, serverId, false);
-            played(id, serverId, false);
 
-            link.classList.remove('btnUserDataOn');
+        link.classList.add('btnUserDataOn');
-        }
+    } else {
+        clearLike(id, serverId);
+
+        link.classList.remove('btnUserDataOn');
     }
 
-    function likes(id, serverId, isLiked) {
+    link.parentNode.querySelector('.btnLike').classList.remove('btnUserDataOn');
-        var apiClient = connectionManager.getApiClient(serverId);
+}
-        return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
+
+function markPlayed(link) {
+    const id = link.getAttribute('data-itemid');
+    const serverId = link.getAttribute('data-serverid');
+
+    if (!link.classList.contains('btnUserDataOn')) {
+        played(id, serverId, true);
+
+        link.classList.add('btnUserDataOn');
+    } else {
+        played(id, serverId, false);
+
+        link.classList.remove('btnUserDataOn');
     }
+}
 
-    function played(id, serverId, isPlayed) {
+function likes(id, serverId, isLiked) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
+    return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
+}
 
-        var method = isPlayed ? 'markPlayed' : 'markUnplayed';
+function played(id, serverId, isPlayed) {
+    const apiClient = connectionManager.getApiClient(serverId);
 
-        return apiClient[method](apiClient.getCurrentUserId(), id, new Date());
+    const method = isPlayed ? 'markPlayed' : 'markUnplayed';
-    }
 
-    function favorite(id, serverId, isFavorite) {
+    return apiClient[method](apiClient.getCurrentUserId(), id, new Date());
-        var apiClient = connectionManager.getApiClient(serverId);
+}
 
-        return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
+function favorite(id, serverId, isFavorite) {
-    }
+    const apiClient = connectionManager.getApiClient(serverId);
 
-    function clearLike(id, serverId) {
+    return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
-        var apiClient = connectionManager.getApiClient(serverId);
+}
 
-        return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
+function clearLike(id, serverId) {
-    }
+    const apiClient = connectionManager.getApiClient(serverId);
 
-    return {
+    return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
-        fill: fill,
+}
-        destroy: destroy,
+
-        getIconsHtml: getIconsHtml
+export default {
-    };
+    fill: fill,
-});
+    destroy: destroy,
+    getIconsHtml: getIconsHtml
+};

src/components/viewSettings/viewSettings.js

@@ -1,58 +1,66 @@
-define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'userSettings', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize, userSettings) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import 'emby-checkbox';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'emby-select';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
+import 'flexStyles';
 
-    function onSubmit(e) {
+function onSubmit(e) {
-        e.preventDefault();
+    e.preventDefault();
-        return false;
+    return false;
+}
+
+function initEditor(context, settings) {
+    context.querySelector('form').addEventListener('submit', onSubmit);
+
+    const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+
+    for (const elem of elems) {
+        elem.querySelector('input').checked = settings[elem.getAttribute('data-settingname')] || false;
     }
 
-    function initEditor(context, settings) {
+    context.querySelector('.selectImageType').value = settings.imageType || 'primary';
-        context.querySelector('form').addEventListener('submit', onSubmit);
+}
 
-        var elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+function saveValues(context, settings, settingsKey) {
-
+    const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
-        for (var i = 0, length = elems.length; i < length; i++) {
+    for (const elem of elems) {
-            elems[i].querySelector('input').checked = settings[elems[i].getAttribute('data-settingname')] || false;
+        userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked);
-        }
-
-        context.querySelector('.selectImageType').value = settings.imageType || 'primary';
     }
 
-    function saveValues(context, settings, settingsKey) {
+    userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
-        var elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+}
-        for (var i = 0, length = elems.length; i < length; i++) {
-            userSettings.set(settingsKey + '-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input').checked);
-        }
 
-        userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
+function centerFocus(elem, horiz, on) {
+    import('scrollHelper').then(({default: scrollHelper}) => {
+        const fn = on ? 'on' : 'off';
+        scrollHelper.centerFocus[fn](elem, horiz);
+    });
+}
+
+function showIfAllowed(context, selector, visible) {
+    const elem = context.querySelector(selector);
+
+    if (visible && !elem.classList.contains('hiddenFromViewSettings')) {
+        elem.classList.remove('hide');
+    } else {
+        elem.classList.add('hide');
     }
+}
 
-    function centerFocus(elem, horiz, on) {
+class ViewSettings {
-        require(['scrollHelper'], function (scrollHelper) {
+    constructor() {
-            scrollHelper = scrollHelper.default || scrollHelper;
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
     }
-
+    show(options) {
-    function showIfAllowed(context, selector, visible) {
-        var elem = context.querySelector(selector);
-
-        if (visible && !elem.classList.contains('hiddenFromViewSettings')) {
-            elem.classList.remove('hide');
-        } else {
-            elem.classList.add('hide');
-        }
-    }
-
-    function ViewSettings() {
-
-    }
-
-    ViewSettings.prototype.show = function (options) {
         return new Promise(function (resolve, reject) {
-            require(['text!./viewSettings.template.html'], function (template) {
+            import('text!./viewSettings.template.html').then(({default: template}) => {
-                var dialogOptions = {
+                const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
@@ -63,11 +71,11 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
                     dialogOptions.size = 'small';
                 }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+                const dlg = dialogHelper.createDialog(dialogOptions);
 
                 dlg.classList.add('formDialog');
 
-                var html = '';
+                let html = '';
 
                 html += '<div class="formDialogHeader">';
                 html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@@ -79,14 +87,14 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
 
                 dlg.innerHTML = globalize.translateHtml(html, 'core');
 
-                var settingElements = dlg.querySelectorAll('.viewSetting');
+                const settingElements = dlg.querySelectorAll('.viewSetting');
-                for (var i = 0, length = settingElements.length; i < length; i++) {
+                for (const settingElement of settingElements) {
-                    if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) {
+                    if (options.visibleSettings.indexOf(settingElement.getAttribute('data-settingname')) === -1) {
-                        settingElements[i].classList.add('hide');
+                        settingElement.classList.add('hide');
-                        settingElements[i].classList.add('hiddenFromViewSettings');
+                        settingElement.classList.add('hiddenFromViewSettings');
                     } else {
-                        settingElements[i].classList.remove('hide');
+                        settingElement.classList.remove('hide');
-                        settingElements[i].classList.remove('hiddenFromViewSettings');
+                        settingElement.classList.remove('hiddenFromViewSettings');
                     }
                 }
 
@@ -105,7 +113,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
                     centerFocus(dlg.querySelector('.formDialogContent'), false, true);
                 }
 
-                var submitted;
+                let submitted;
 
                 dlg.querySelector('.selectImageType').dispatchEvent(new CustomEvent('change', {}));
 
@@ -128,7 +136,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
                 });
             });
         });
-    };
+    }
+}
 
-    return ViewSettings;
+export default ViewSettings;
-});

src/controllers/dashboard/apikeys.html

@@ -3,7 +3,7 @@
         <div class="content-primary">
             <div class="detailSectionHeader">
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2>
-                <button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${ButtonAdd}">
+                <button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>

src/controllers/dashboard/dashboard.js

@@ -24,7 +24,7 @@ import 'emby-itemscontainer';
     function showPlaybackInfo(btn, session) {
         import('alert').then(({default: alert}) => {
             let title;
-            let text = [];
+            const text = [];
             const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
 
             if (displayPlayMethod === 'DirectStream') {
@@ -737,7 +737,7 @@ import 'emby-itemscontainer';
         shutdown: function (btn) {
             import('confirm').then(({default: confirm}) => {
                 confirm({
-                    title: globalize.translate('HeaderShutdown'),
+                    title: globalize.translate('ButtonShutdown'),
                     text: globalize.translate('MessageConfirmShutdown'),
                     confirmText: globalize.translate('ButtonShutdown'),
                     primary: 'delete'

src/controllers/dashboard/devices/device.html

@@ -15,7 +15,7 @@
                 </div>
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${ButtonSave}</span>
+                        <span>${Save}</span>
                     </button>
                 </div>
             </form>

src/controllers/dashboard/devices/devices.html

@@ -3,7 +3,7 @@
         <div class="content-primary">
             <div class="verticalSection verticalSection">
                 <div class="sectionTitleContainer sectionTitleContainer-cards flex align-items-center">
-                    <h2 class="sectionTitle sectionTitle-cards">${TabDevices}</h2>
+                    <h2 class="sectionTitle sectionTitle-cards">${HeaderDevices}</h2>
                     <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/devices.html">${Help}</a>
                 </div>
             </div>

src/controllers/dashboard/devices/devices.js

@@ -21,7 +21,7 @@ import 'cardStyle';
             confirm({
                 text: msg,
                 title: globalize.translate('HeaderDeleteDevice'),
-                confirmText: globalize.translate('ButtonDelete'),
+                confirmText: globalize.translate('Delete'),
                 primary: 'delete'
             }).then(function () {
                 loading.show();
@@ -38,7 +38,7 @@ import 'cardStyle';
     }
 
     function showDeviceMenu(view, btn, deviceId) {
-        let menuItems = [];
+        const menuItems = [];
 
         if (canEdit) {
             menuItems.push({

src/controllers/dashboard/dlna/profile.html

@@ -10,7 +10,7 @@
                 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
                     <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioInfo" data-value="tabInfo">${TabInfo}</a>
                     <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioDirectPlay" data-value="tabDirectPlayProfiles">${TabDirectPlay}</a>
-                    <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioTranscoding" data-value="tabTranscodingProfiles">${TabTranscoding}</a>
+                    <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioTranscoding" data-value="tabTranscodingProfiles">${Transcoding}</a>
                     <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioContainers" data-value="tabContainerProfiles">${TabContainers}</a>
                     <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioCodecs" data-value="tabCodecProfiles">${TabCodecs}</a>
                     <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioMediaProfiles" data-value="tabMediaProfiles">${TabResponses}</a>
@@ -96,14 +96,14 @@
                             </div>
                             <div>
                                 <h2 style="vertical-align:middle;display:inline-block;">${HeaderHttpHeaders}</h2>
-                                <button is="emby-button" type="button" class="fab btnAddIdentificationHttpHeader submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAdd}">
+                                <button is="emby-button" type="button" class="fab btnAddIdentificationHttpHeader submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
                                     <span class="material-icons add"></span>
                                 </button>
                             </div>
                             <div class="httpHeaderIdentificationList"></div>
                         </div>
                     </div>
-                    <div is="emby-collapse" title="${HeaderDisplay}">
+                    <div is="emby-collapse" title="${Display}">
                         <div class="collapseContent">
                             <br />
                             <div class="checkboxContainer checkboxContainer-withDescription">
@@ -209,7 +209,7 @@
                         <div class="collapseContent">
                             <p>${HeaderSubtitleProfilesHelp}</p>
                             <button is="emby-button" type="button" class="raised submit block btnAddSubtitleProfile">
-                                <span>${ButtonAdd}</span>
+                                <span>${Add}</span>
                             </button>
                             <div class="subtitleProfileList"></div>
                             <br />
@@ -219,7 +219,7 @@
                         <div class="collapseContent">
                             <div>
                                 <h2 style="vertical-align:middle;display:inline-block;">${HeaderXmlDocumentAttributes}</h2>
-                                <button is="emby-button" type="button" class="fab btnAddXmlDocumentAttribute submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAdd}">
+                                <button is="emby-button" type="button" class="fab btnAddXmlDocumentAttribute submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
                                     <span class="material-icons add"></span>
                                 </button>
                             </div>
@@ -231,38 +231,38 @@
                 </div>
                 <div class="tabContent tabDirectPlayProfiles">
                     <p>${HeaderDirectPlayProfileHelp}</p>
-                    <button is="emby-button" class="raised submit block btnAddDirectPlayProfile" type="button" data-mini="true" data-icon="plus">${ButtonNew}</button>
+                    <button is="emby-button" class="raised submit block btnAddDirectPlayProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
                     <br />
                     <div class="directPlayProfiles"></div>
                 </div>
                 <div class="tabContent tabTranscodingProfiles">
                     <p>${HeaderTranscodingProfileHelp}</p>
-                    <button is="emby-button" class="raised submit block btnAddTranscodingProfile" type="button" data-mini="true" data-icon="plus">${ButtonNew}</button>
+                    <button is="emby-button" class="raised submit block btnAddTranscodingProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
                     <br />
                     <div class="transcodingProfiles"></div>
                 </div>
                 <div class="tabContent tabContainerProfiles">
                     <p>${HeaderContainerProfileHelp}</p>
-                    <button is="emby-button" class="raised submit block btnAddContainerProfile" type="button" data-mini="true" data-icon="plus">${ButtonNew}</button>
+                    <button is="emby-button" class="raised submit block btnAddContainerProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
                     <br />
                     <div class="containerProfiles"></div>
                 </div>
                 <div class="tabContent tabCodecProfiles">
                     <p>${HeaderCodecProfileHelp}</p>
-                    <button is="emby-button" class="raised submit block btnAddCodecProfile" type="button" data-icon="plus">${ButtonNew}</button>
+                    <button is="emby-button" class="raised submit block btnAddCodecProfile" type="button" data-icon="plus">${New}</button>
                     <br />
                     <div class="codecProfiles"></div>
                 </div>
                 <div class="tabContent tabMediaProfiles">
                     <p>${HeaderResponseProfileHelp}</p>
-                    <button is="emby-button" class="raised submit block btnAddResponseProfile" type="button" data-mini="true" data-icon="plus">${ButtonNew}</button>
+                    <button is="emby-button" class="raised submit block btnAddResponseProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
                     <br />
                     <div class="mediaProfiles"></div>
                 </div>
                 <br />
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${ButtonSave}</span>
+                        <span>${Save}</span>
                     </button>
                     <button is="emby-button" type="button" class="button-cancel raised block" onclick="Dashboard.navigate('dlnaprofiles.html');">
                         <span>${ButtonCancel}</span>

src/controllers/dashboard/dlna/profile.js

@@ -315,7 +315,7 @@ import 'listViewStyle';
         let currentType;
 
         for (let i = 0, length = profiles.length; i < length; i++) {
-            let profile = profiles[i];
+            const profile = profiles[i];
 
             if (profile.Type !== currentType) {
                 html += '<li data-role="list-divider">' + profile.Type + '</li>';
@@ -401,7 +401,7 @@ import 'listViewStyle';
         let currentType;
 
         for (let i = 0, length = profiles.length; i < length; i++) {
-            let profile = profiles[i];
+            const profile = profiles[i];
 
             if (profile.Type !== currentType) {
                 html += '<li data-role="list-divider">' + profile.Type + '</li>';
@@ -472,7 +472,7 @@ import 'listViewStyle';
         let currentType;
 
         for (let i = 0, length = profiles.length; i < length; i++) {
-            let profile = profiles[i];
+            const profile = profiles[i];
             const type = profile.Type.replace('VideoAudio', 'Video Audio');
 
             if (type !== currentType) {
@@ -696,7 +696,7 @@ import 'listViewStyle';
     let currentProfile;
     let currentSubProfile;
     let isSubProfileNew;
-    const allText = globalize.translate('LabelAll');
+    const allText = globalize.translate('All');
 
     $(document).on('pageinit', '#dlnaProfilePage', function () {
         const page = this;

src/controllers/dashboard/dlna/profiles.js

@@ -36,7 +36,7 @@ import 'emby-button';
         }
 
         for (let i = 0, length = profiles.length; i < length; i++) {
-            let profile = profiles[i];
+            const profile = profiles[i];
             html += '<div class="listItem listItem-border">';
             html += '<span class="listItemIcon material-icons live_tv"></span>';
             html += '<div class="listItemBody two-line">';
@@ -46,7 +46,7 @@ import 'emby-button';
             html += '</div>';
 
             if (profile.Type == 'User') {
-                html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + globalize.translate('ButtonDelete') + '"><span class="material-icons delete"></span></button>';
+                html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + globalize.translate('Delete') + '"><span class="material-icons delete"></span></button>';
             }
 
             html += '</div>';

src/controllers/dashboard/dlna/settings.html

@@ -59,7 +59,7 @@
                 </div>
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${ButtonSave}</span>
+                        <span>${Save}</span>
                     </button>
                 </div>
             </form>

src/controllers/dashboard/encodingsettings.html

@@ -4,7 +4,7 @@
             <form class="encodingSettingsForm">
                 <div class="verticalSection">
                     <div class="sectionTitleContainer flex align-items-center">
-                        <h2 class="sectionTitle">${TabTranscoding}</h2>
+                        <h2 class="sectionTitle">${Transcoding}</h2>
                         <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/transcoding.html">${Help}</a>
                     </div>
                 </div>
@@ -176,7 +176,7 @@
 
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${ButtonSave}</span>
+                        <span>${Save}</span>
                     </button>
                 </div>
             </form>

src/controllers/dashboard/encodingsettings.js

@@ -45,10 +45,10 @@ import libraryMenu from 'libraryMenu';
             return ApiClient.ajax({
                 url: ApiClient.getUrl('System/MediaEncoder/Path'),
                 type: 'POST',
-                data: {
+                data: JSON.stringify({
                     Path: form.querySelector('.txtEncoderPath').value,
                     PathType: 'Custom'
-                }
+                })
             }).then(Dashboard.processServerConfigurationUpdateResult, onSaveEncodingPathFailure);
         });
     }

src/controllers/dashboard/general.html

@@ -19,7 +19,7 @@
                         <div class="fieldDescription">
                             <div>${LabelPreferredDisplayLanguageHelp}</div>
                             <div style="margin-top: .25em;">
-                                <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://docs.jellyfin.org/general/contributing/index.html" target="_blank">${LabelReadHowYouCanContribute}</a>
+                                <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://docs.jellyfin.org/general/contributing/index.html" target="_blank">${LearnHowYouCanContribute}</a>
                             </div>
                         </div>
                     </div>
@@ -63,7 +63,7 @@
                 <br />
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${ButtonSave}</span>
+                        <span>${Save}</span>
                     </button>
                 </div>
             </form>

src/controllers/dashboard/library.js

@@ -363,10 +363,10 @@ import 'emby-itemrefreshindicator';
             name: globalize.translate('HeaderLibraries')
         }, {
             href: 'librarydisplay.html',
-            name: globalize.translate('TabDisplay')
+            name: globalize.translate('Display')
         }, {
             href: 'metadataimages.html',
-            name: globalize.translate('TabMetadata')
+            name: globalize.translate('Metadata')
         }, {
             href: 'metadatanfo.html',
             name: globalize.translate('TabNfoSettings')

src/controllers/dashboard/librarydisplay.html

@@ -49,7 +49,7 @@
 
                 <br/>
                 <button is="emby-button" type="submit" class="raised button-submit block">
-                    <span>${ButtonSave}</span>
+                    <span>${Save}</span>
                 </button>
             </form>
         </div>

src/controllers/dashboard/librarydisplay.js

@@ -12,10 +12,10 @@ import 'emby-button';
             name: globalize.translate('HeaderLibraries')
         }, {
             href: 'librarydisplay.html',
-            name: globalize.translate('TabDisplay')
+            name: globalize.translate('Display')
         }, {
             href: 'metadataimages.html',
-            name: globalize.translate('TabMetadata')
+            name: globalize.translate('Metadata')
         }, {
             href: 'metadatanfo.html',
             name: globalize.translate('TabNfoSettings')

src/controllers/dashboard/metadataImages.js

@@ -55,10 +55,10 @@ import 'listViewStyle';
             name: globalize.translate('HeaderLibraries')
         }, {
             href: 'librarydisplay.html',
-            name: globalize.translate('TabDisplay')
+            name: globalize.translate('Display')
         }, {
             href: 'metadataimages.html',
-            name: globalize.translate('TabMetadata')
+            name: globalize.translate('Metadata')
         }, {
             href: 'metadatanfo.html',
             name: globalize.translate('TabNfoSettings')

src/controllers/dashboard/metadataimages.html

@@ -17,7 +17,7 @@
                     <select is="emby-select" id="selectCountry" required="required" label="${LabelCountry}"></select>
                 </div>
                 <br />
-                <div><button is="emby-button" type="submit" class="raised button-submit block"><span>${ButtonSave}</span></button></div>
+                <div><button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button></div>
             </form>
         </div>
 

src/controllers/dashboard/metadatanfo.html

@@ -41,7 +41,7 @@
                     </label>
                     <div class="fieldDescription checkboxFieldDescription">${LabelKodiMetadataEnableExtraThumbsHelp}</div>
                 </div>
-                <div><button is="emby-button" type="submit" class="raised button-submit block"><span>${ButtonSave}</span></button></div>
+                <div><button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button></div>
             </form>
         </div>
 

src/controllers/dashboard/metadatanfo.js

@@ -52,10 +52,10 @@ import globalize from 'globalize';
             name: globalize.translate('HeaderLibraries')
         }, {
             href: 'librarydisplay.html',
-            name: globalize.translate('TabDisplay')
+            name: globalize.translate('Display')
         }, {
             href: 'metadataimages.html',
-            name: globalize.translate('TabMetadata')
+            name: globalize.translate('Metadata')
         }, {
             href: 'metadatanfo.html',
             name: globalize.translate('TabNfoSettings')

src/controllers/dashboard/networking.html

@@ -112,7 +112,7 @@
                 </div>
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${ButtonSave}</span>
+                        <span>${Save}</span>
                     </button>
                 </div>
             </form>

src/controllers/dashboard/notifications/notification/index.html

@@ -54,7 +54,7 @@
                 <div>
                     <br />
                     <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${ButtonSave}</span>
+                        <span>${Save}</span>
                     </button>
 
                     <button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">

src/controllers/dashboard/playback.html

@@ -23,7 +23,7 @@
                         ${LabelMinResumeDurationHelp}
                     </div>
                 </div>
-                <div><button is="emby-button" type="submit" class="raised button-submit block"><span>${ButtonSave}</span></button></div>
+                <div><button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button></div>
             </form>
         </div>
     </div>

src/controllers/dashboard/plugins/add/index.js

@@ -1,143 +1,146 @@
-define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'emby-button'], function ($, loading, libraryMenu, globalize, connectionManager) {
+import $ from 'jQuery';
-    'use strict';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-button';
 
-    loading = loading.default || loading;
+function populateHistory(packageInfo, page) {
+    let html = '';
+    const length = Math.min(packageInfo.versions.length, 10);
 
-    function populateHistory(packageInfo, page) {
+    for (let i = 0; i < length; i++) {
-        var html = '';
+        const version = packageInfo.versions[i];
-        var length = Math.min(packageInfo.versions.length, 10);
+        html += '<h2 style="margin:.5em 0;">' + version.version + '</h2>';
-
+        html += '<div style="margin-bottom:1.5em;">' + version.changelog + '</div>';
-        for (var i = 0; i < length; i++) {
-            var version = packageInfo.versions[i];
-            html += '<h2 style="margin:.5em 0;">' + version.version + '</h2>';
-            html += '<div style="margin-bottom:1.5em;">' + version.changelog + '</div>';
-        }
-
-        $('#revisionHistory', page).html(html);
     }
 
-    function populateVersions(packageInfo, page, installedPlugin) {
+    $('#revisionHistory', page).html(html);
-        var html = '';
+}
 
-        for (var i = 0; i < packageInfo.versions.length; i++) {
+function populateVersions(packageInfo, page, installedPlugin) {
-            var version = packageInfo.versions[i];
+    let html = '';
-            html += '<option value="' + version.version + '">' + version.version + '</option>';
-        }
 
-        var selectmenu = $('#selectVersion', page).html(html);
+    for (let i = 0; i < packageInfo.versions.length; i++) {
-
+        const version = packageInfo.versions[i];
-        if (!installedPlugin) {
+        html += '<option value="' + version.version + '">' + version.version + '</option>';
-            $('#pCurrentVersion', page).hide().html('');
-        }
-
-        var packageVersion = packageInfo.versions[0];
-        if (packageVersion) {
-            selectmenu.val(packageVersion.version);
-        }
     }
 
-    function renderPackage(pkg, installedPlugins, page) {
+    const selectmenu = $('#selectVersion', page).html(html);
-        var installedPlugin = installedPlugins.filter(function (ip) {
-            return ip.Name == pkg.name;
-        })[0];
 
-        populateVersions(pkg, page, installedPlugin);
+    if (!installedPlugin) {
-        populateHistory(pkg, page);
+        $('#pCurrentVersion', page).hide().html('');
-
-        $('.pluginName', page).html(pkg.name);
-        $('#btnInstallDiv', page).removeClass('hide');
-        $('#pSelectVersion', page).removeClass('hide');
-
-        if (pkg.overview) {
-            $('#overview', page).show().html(pkg.overview);
-        } else {
-            $('#overview', page).hide();
-        }
-
-        $('#description', page).html(pkg.description);
-        $('#developer', page).html(pkg.owner);
-
-        if (installedPlugin) {
-            var currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
-            $('#pCurrentVersion', page).show().html(currentVersionText);
-        } else {
-            $('#pCurrentVersion', page).hide().html('');
-        }
-
-        loading.hide();
     }
 
-    function alertText(options) {
+    const packageVersion = packageInfo.versions[0];
-        require(['alert'], function ({default: alert}) {
+    if (packageVersion) {
-            alert(options);
+        selectmenu.val(packageVersion.version);
-        });
+    }
+}
+
+function renderPackage(pkg, installedPlugins, page) {
+    const installedPlugin = installedPlugins.filter(function (ip) {
+        return ip.Name == pkg.name;
+    })[0];
+
+    populateVersions(pkg, page, installedPlugin);
+    populateHistory(pkg, page);
+
+    $('.pluginName', page).html(pkg.name);
+    $('#btnInstallDiv', page).removeClass('hide');
+    $('#pSelectVersion', page).removeClass('hide');
+
+    if (pkg.overview) {
+        $('#overview', page).show().html(pkg.overview);
+    } else {
+        $('#overview', page).hide();
     }
 
-    function performInstallation(page, name, guid, version) {
+    $('#description', page).html(pkg.description);
-        var developer = $('#developer', page).html().toLowerCase();
+    $('#developer', page).html(pkg.owner);
 
-        var alertCallback = function () {
+    if (installedPlugin) {
-            loading.show();
+        const currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
-            page.querySelector('#btnInstall').disabled = true;
+        $('#pCurrentVersion', page).show().html(currentVersionText);
-            ApiClient.installPlugin(name, guid, version).then(function () {
+    } else {
-                loading.hide();
+        $('#pCurrentVersion', page).hide().html('');
-                alertText(globalize.translate('MessagePluginInstalled'));
+    }
-            });
-        };
 
-        if (developer !== 'jellyfin') {
+    loading.hide();
+}
+
+function alertText(options) {
+    import('alert').then(({default: alert}) => {
+        alert(options);
+    });
+}
+
+function performInstallation(page, name, guid, version) {
+    const developer = $('#developer', page).html().toLowerCase();
+
+    const alertCallback = function () {
+        loading.show();
+        page.querySelector('#btnInstall').disabled = true;
+        ApiClient.installPlugin(name, guid, version).then(() => {
             loading.hide();
-            var msg = globalize.translate('MessagePluginInstallDisclaimer');
+            alertText(globalize.translate('MessagePluginInstalled'));
-            msg += '<br/>';
+        }).catch(() => {
-            msg += '<br/>';
+            alertText(globalize.translate('MessagePluginInstallError'));
-            msg += globalize.translate('PleaseConfirmPluginInstallation');
-
-            require(['confirm'], function (confirm) {
-                confirm.default(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
-                    alertCallback();
-                }, function () {
-                    console.debug('plugin not installed');
-                });
-            });
-        } else {
-            alertCallback();
-        }
-    }
-
-    return function (view, params) {
-        $('.addPluginForm', view).on('submit', function () {
-            loading.show();
-            var page = $(this).parents('#addPluginPage')[0];
-            var name = params.name;
-            var guid = params.guid;
-            ApiClient.getInstalledPlugins().then(function (plugins) {
-                var installedPlugin = plugins.filter(function (plugin) {
-                    return plugin.Name == name;
-                })[0];
-
-                var version = $('#selectVersion', page).val();
-                if (installedPlugin && installedPlugin.Version === version) {
-                    loading.hide();
-                    Dashboard.alert({
-                        message: globalize.translate('MessageAlreadyInstalled'),
-                        title: globalize.translate('HeaderPluginInstallation')
-                    });
-                } else {
-                    performInstallation(page, name, guid, version);
-                }
-            });
-            return false;
-        });
-        view.addEventListener('viewshow', function () {
-            var page = this;
-            loading.show();
-            var name = params.name;
-            var guid = params.guid;
-            var promise1 = ApiClient.getPackageInfo(name, guid);
-            var promise2 = ApiClient.getInstalledPlugins();
-            Promise.all([promise1, promise2]).then(function (responses) {
-                renderPackage(responses[0], responses[1], page);
-            });
         });
     };
-});
+
+    if (developer !== 'jellyfin') {
+        loading.hide();
+        let msg = globalize.translate('MessagePluginInstallDisclaimer');
+        msg += '<br/>';
+        msg += '<br/>';
+        msg += globalize.translate('PleaseConfirmPluginInstallation');
+
+        import('confirm').then(({default: confirm}) => {
+            confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
+                alertCallback();
+            }).catch(() => {
+                console.debug('plugin not installed');
+            });
+        });
+    } else {
+        alertCallback();
+    }
+}
+
+export default function(view, params) {
+    $('.addPluginForm', view).on('submit', function () {
+        loading.show();
+        const page = $(this).parents('#addPluginPage')[0];
+        const name = params.name;
+        const guid = params.guid;
+        ApiClient.getInstalledPlugins().then(function (plugins) {
+            const installedPlugin = plugins.filter(function (plugin) {
+                return plugin.Name == name;
+            })[0];
+
+            const version = $('#selectVersion', page).val();
+            if (installedPlugin && installedPlugin.Version === version) {
+                loading.hide();
+                Dashboard.alert({
+                    message: globalize.translate('MessageAlreadyInstalled'),
+                    title: globalize.translate('HeaderPluginInstallation')
+                });
+            } else {
+                performInstallation(page, name, guid, version);
+            }
+        }).catch(() => {
+            alertText(globalize.translate('MessageGetInstalledPluginsError'));
+        });
+        return false;
+    });
+    view.addEventListener('viewshow', function () {
+        const page = this;
+        loading.show();
+        const name = params.name;
+        const guid = params.guid;
+        const promise1 = ApiClient.getPackageInfo(name, guid);
+        const promise2 = ApiClient.getInstalledPlugins();
+        Promise.all([promise1, promise2]).then(function (responses) {
+            renderPackage(responses[0], responses[1], page);
+        });
+    });
+}

src/controllers/dashboard/plugins/available/index.js

@@ -1,143 +1,142 @@
-define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
+import loading from 'loading';
-    'use strict';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+import 'cardStyle';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-select';
 
-    loading = loading.default || loading;
+function reloadList(page) {
-
+    loading.show();
-    function reloadList(page) {
+    const promise1 = ApiClient.getAvailablePlugins();
-        loading.show();
+    const promise2 = ApiClient.getInstalledPlugins();
-        var promise1 = ApiClient.getAvailablePlugins();
+    Promise.all([promise1, promise2]).then(function (responses) {
-        var promise2 = ApiClient.getInstalledPlugins();
+        populateList({
-        Promise.all([promise1, promise2]).then(function (responses) {
+            catalogElement: page.querySelector('#pluginTiles'),
-            populateList({
+            noItemsElement: page.querySelector('#noPlugins'),
-                catalogElement: page.querySelector('#pluginTiles'),
+            availablePlugins: responses[0],
-                noItemsElement: page.querySelector('#noPlugins'),
+            installedPlugins: responses[1]
-                availablePlugins: responses[0],
-                installedPlugins: responses[1]
-            });
         });
+    });
+}
+
+function getHeaderText(category) {
+    category = category.replace(' ', '');
+    // TODO: Replace with switch
+    if (category === 'Channel') {
+        category = 'Channels';
+    } else if (category === 'Theme') {
+        category = 'Themes';
+    } else if (category === 'LiveTV') {
+        category = 'LiveTV';
+    } else if (category === 'ScreenSaver') {
+        category = 'HeaderScreenSavers';
     }
 
-    function getHeaderText(category) {
+    return globalize.translate(category);
-        category = category.replace(' ', '');
+}
-        if (category === 'Channel') {
+
-            category = 'Channels';
+function populateList(options) {
-        } else if (category === 'Theme') {
+    const availablePlugins = options.availablePlugins;
-            category = 'Themes';
+    const installedPlugins = options.installedPlugins;
-        } else if (category === 'LiveTV') {
+
-            category = 'HeaderLiveTV';
+    availablePlugins.forEach(function (plugin, index, array) {
-        } else if (category === 'ScreenSaver') {
+        plugin.category = plugin.category || 'General';
-            category = 'HeaderScreenSavers';
+        plugin.categoryDisplayName = getHeaderText(plugin.category);
+        array[index] = plugin;
+    });
+
+    availablePlugins.sort(function (a, b) {
+        if (a.category > b.category) {
+            return 1;
+        } else if (b.category > a.category) {
+            return -1;
         }
+        if (a.name > b.name) {
+            return 1;
+        } else if (b.name > a.name) {
+            return -1;
+        }
+        return 0;
+    });
 
-        return globalize.translate(category);
+    let currentCategory = null;
-    }
+    let html = '';
 
-    function populateList(options) {
+    for (let i = 0; i < availablePlugins.length; i++) {
-        var availablePlugins = options.availablePlugins;
+        const plugin = availablePlugins[i];
-        var installedPlugins = options.installedPlugins;
+        const category = plugin.categoryDisplayName;
-
+        if (category != currentCategory) {
-        availablePlugins.forEach(function (plugin, index, array) {
+            if (currentCategory) {
-            plugin.category = plugin.category || 'General';
+                html += '</div>';
-            plugin.categoryDisplayName = getHeaderText(plugin.category);
+                html += '</div>';
-            array[index] = plugin;
-        });
-
-        availablePlugins.sort(function (a, b) {
-            if (a.category > b.category) {
-                return 1;
-            } else if (b.category > a.category) {
-                return -1;
             }
-            if (a.name > b.name) {
+            html += '<div class="verticalSection">';
-                return 1;
+            html += '<h2 class="sectionTitle sectionTitle-cards">' + category + '</h2>';
-            } else if (b.name > a.name) {
+            html += '<div class="itemsContainer vertical-wrap">';
-                return -1;
+            currentCategory = category;
-            }
-            return 0;
-        });
-
-        var currentCategory = null;
-        var html = '';
-
-        for (var i = 0; i < availablePlugins.length; i++) {
-            var plugin = availablePlugins[i];
-            var category = plugin.categoryDisplayName;
-            if (category != currentCategory) {
-                if (currentCategory) {
-                    html += '</div>';
-                    html += '</div>';
-                }
-                html += '<div class="verticalSection">';
-                html += '<h2 class="sectionTitle sectionTitle-cards">' + category + '</h2>';
-                html += '<div class="itemsContainer vertical-wrap">';
-                currentCategory = category;
-            }
-            html += getPluginHtml(plugin, options, installedPlugins);
         }
-        html += '</div>';
+        html += getPluginHtml(plugin, options, installedPlugins);
-        html += '</div>';
+    }
+    html += '</div>';
+    html += '</div>';
 
-        if (!availablePlugins.length && options.noItemsElement) {
+    if (!availablePlugins.length && options.noItemsElement) {
-            options.noItemsElement.classList.remove('hide');
+        options.noItemsElement.classList.remove('hide');
-        }
-
-        options.catalogElement.innerHTML = html;
-        loading.hide();
     }
 
-    function getPluginHtml(plugin, options, installedPlugins) {
+    options.catalogElement.innerHTML = html;
-        var html = '';
+    loading.hide();
-        var href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
+}
 
-        if (options.context) {
+function getPluginHtml(plugin, options, installedPlugins) {
-            href += '&context=' + options.context;
+    let html = '';
-        }
+    let href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
 
-        var target = plugin.externalUrl ? ' target="_blank"' : '';
+    if (options.context) {
-        html += "<div class='card backdropCard'>";
+        href += '&context=' + options.context;
-        html += '<div class="cardBox visualCardBox">';
-        html += '<div class="cardScalable visualCardBox-cardScalable">';
-        html += '<div class="cardPadder cardPadder-backdrop"></div>';
-        html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + '>';
-        html += '<span class="cardImageIcon material-icons folder"></span>';
-        html += '</a>';
-        html += '</div>';
-        html += '<div class="cardFooter">';
-        html += "<div class='cardText'>";
-        html += plugin.name;
-        html += '</div>';
-        var installedPlugin = installedPlugins.filter(function (ip) {
-            return ip.Id == plugin.guid;
-        })[0];
-        html += "<div class='cardText cardText-secondary'>";
-        html += installedPlugin ? globalize.translate('LabelVersionInstalled', installedPlugin.Version) : '&nbsp;';
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        return html += '</div>';
     }
 
-    function getTabs() {
+    const target = plugin.externalUrl ? ' target="_blank"' : '';
-        return [{
+    html += "<div class='card backdropCard'>";
-            href: 'installedplugins.html',
+    html += '<div class="cardBox visualCardBox">';
-            name: globalize.translate('TabMyPlugins')
+    html += '<div class="cardScalable visualCardBox-cardScalable">';
-        }, {
+    html += '<div class="cardPadder cardPadder-backdrop"></div>';
-            href: 'availableplugins.html',
+    html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + '>';
-            name: globalize.translate('TabCatalog')
+    html += '<span class="cardImageIcon material-icons folder"></span>';
-        }, {
+    html += '</a>';
-            href: 'repositories.html',
+    html += '</div>';
-            name: globalize.translate('TabRepositories')
+    html += '<div class="cardFooter">';
-        }];
+    html += "<div class='cardText'>";
-    }
+    html += plugin.name;
+    html += '</div>';
+    const installedPlugin = installedPlugins.filter(function (ip) {
+        return ip.Id == plugin.guid;
+    })[0];
+    html += "<div class='cardText cardText-secondary'>";
+    html += installedPlugin ? globalize.translate('LabelVersionInstalled', installedPlugin.Version) : '&nbsp;';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html += '</div>';
+}
 
-    window.PluginCatalog = {
+function getTabs() {
-        renderCatalog: populateList
+    return [{
-    };
+        href: 'installedplugins.html',
+        name: globalize.translate('TabMyPlugins')
+    }, {
+        href: 'availableplugins.html',
+        name: globalize.translate('TabCatalog')
+    }, {
+        href: 'repositories.html',
+        name: globalize.translate('TabRepositories')
+    }];
+}
 
-    return function (view, params) {
+export default function (view) {
-        view.addEventListener('viewshow', function () {
+    view.addEventListener('viewshow', function () {
-            libraryMenu.setTabs('plugins', 1, getTabs);
+        libraryMenu.setTabs('plugins', 1, getTabs);
-            reloadList(this);
+        reloadList(this);
-        });
+    });
-    };
+}
-});

src/controllers/dashboard/plugins/installed/index.js

@@ -1,192 +1,193 @@
-define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'], function (loading, libraryMenu, dom, globalize) {
+import loading from 'loading';
-    'use strict';
+import libraryMenu from 'libraryMenu';
+import dom from 'dom';
+import globalize from 'globalize';
+import 'cardStyle';
+import 'emby-button';
 
-    loading = loading.default || loading;
+function deletePlugin(page, uniqueid, name) {
+    const msg = globalize.translate('UninstallPluginConfirmation', name);
 
-    function deletePlugin(page, uniqueid, name) {
+    import('confirm').then(({default: confirm}) => {
-        var msg = globalize.translate('UninstallPluginConfirmation', name);
+        confirm.default({
-
+            title: globalize.translate('HeaderUninstallPlugin'),
-        require(['confirm'], function (confirm) {
+            text: msg,
-            confirm.default({
+            primary: 'delete',
-                title: globalize.translate('HeaderUninstallPlugin'),
+            confirmText: globalize.translate('HeaderUninstallPlugin')
-                text: msg,
+        }).then(function () {
-                primary: 'delete',
+            loading.show();
-                confirmText: globalize.translate('HeaderUninstallPlugin')
+            ApiClient.uninstallPlugin(uniqueid).then(function () {
-            }).then(function () {
+                reloadList(page);
-                loading.show();
-                ApiClient.uninstallPlugin(uniqueid).then(function () {
-                    reloadList(page);
-                });
             });
         });
-    }
+    });
+}
 
-    function showNoConfigurationMessage() {
+function showNoConfigurationMessage() {
-        Dashboard.alert({
+    Dashboard.alert({
-            message: globalize.translate('MessageNoPluginConfiguration')
+        message: globalize.translate('MessageNoPluginConfiguration')
-        });
+    });
-    }
+}
 
-    function showConnectMessage() {
+function showConnectMessage() {
-        Dashboard.alert({
+    Dashboard.alert({
-            message: globalize.translate('MessagePluginConfigurationRequiresLocalAccess')
+        message: globalize.translate('MessagePluginConfigurationRequiresLocalAccess')
-        });
+    });
-    }
+}
 
-    function getPluginCardHtml(plugin, pluginConfigurationPages) {
+function getPluginCardHtml(plugin, pluginConfigurationPages) {
-        var configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
+    const configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
-            return pluginConfigurationPage.PluginId == plugin.Id;
+        return pluginConfigurationPage.PluginId == plugin.Id;
-        })[0];
+    })[0];
-        var configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;
+    const configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;
-        var html = '';
+    let html = '';
-        html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' data-removable='" + plugin.CanUninstall + "' class='card backdropCard'>";
+    html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' data-removable='" + plugin.CanUninstall + "' class='card backdropCard'>";
-        html += '<div class="cardBox visualCardBox">';
+    html += '<div class="cardBox visualCardBox">';
-        html += '<div class="cardScalable">';
+    html += '<div class="cardScalable">';
-        html += '<div class="cardPadder cardPadder-backdrop"></div>';
+    html += '<div class="cardPadder cardPadder-backdrop"></div>';
-        html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer emby-button">';
+    html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer emby-button">';
-        html += '<span class="cardImageIcon material-icons folder"></span>';
+    html += '<span class="cardImageIcon material-icons folder"></span>';
-        html += configPageUrl ? '</a>' : '</div>';
+    html += configPageUrl ? '</a>' : '</div>';
+    html += '</div>';
+    html += '<div class="cardFooter">';
+
+    if (configPage || plugin.CanUninstall) {
+        html += '<div style="text-align:right; float:right;padding-top:5px;">';
+        html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert"></span></button>';
         html += '</div>';
-        html += '<div class="cardFooter">';
+    }
 
-        if (configPage || plugin.CanUninstall) {
+    html += "<div class='cardText'>";
-            html += '<div style="text-align:right; float:right;padding-top:5px;">';
+    html += configPage && configPage.DisplayName ? configPage.DisplayName : plugin.Name;
-            html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert"></span></button>';
+    html += '</div>';
-            html += '</div>';
+    html += "<div class='cardText cardText-secondary'>";
+    html += plugin.Version;
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html;
+}
+
+function renderPlugins(page, plugins) {
+    ApiClient.getJSON(ApiClient.getUrl('web/configurationpages') + '?pageType=PluginConfiguration').then(function (configPages) {
+        populateList(page, plugins, configPages);
+    });
+}
+
+function populateList(page, plugins, pluginConfigurationPages) {
+    plugins = plugins.sort(function (plugin1, plugin2) {
+        if (plugin1.Name > plugin2.Name) {
+            return 1;
         }
 
-        html += "<div class='cardText'>";
+        return -1;
-        html += configPage && configPage.DisplayName ? configPage.DisplayName : plugin.Name;
-        html += '</div>';
-        html += "<div class='cardText cardText-secondary'>";
-        html += plugin.Version;
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        return html;
-    }
-
-    function renderPlugins(page, plugins) {
-        ApiClient.getJSON(ApiClient.getUrl('web/configurationpages') + '?pageType=PluginConfiguration').then(function (configPages) {
-            populateList(page, plugins, configPages);
-        });
-    }
-
-    function populateList(page, plugins, pluginConfigurationPages) {
-        plugins = plugins.sort(function (plugin1, plugin2) {
-            if (plugin1.Name > plugin2.Name) {
-                return 1;
-            }
-
-            return -1;
-        });
-
-        var html = plugins.map(function (p) {
-            return getPluginCardHtml(p, pluginConfigurationPages);
-        }).join('');
-
-        var installedPluginsElement = page.querySelector('.installedPlugins');
-        installedPluginsElement.removeEventListener('click', onInstalledPluginsClick);
-        installedPluginsElement.addEventListener('click', onInstalledPluginsClick);
-
-        if (plugins.length) {
-            installedPluginsElement.classList.add('itemsContainer');
-            installedPluginsElement.classList.add('vertical-wrap');
-        } else {
-            html += '<div class="centerMessage">';
-            html += '<h1>' + globalize.translate('MessageNoPluginsInstalled') + '</h1>';
-            html += '<p><a is="emby-linkbutton" class="button-link" href="availableplugins.html">';
-            html += globalize.translate('MessageBrowsePluginCatalog');
-            html += '</a></p>';
-            html += '</div>';
-        }
-
-        installedPluginsElement.innerHTML = html;
-        loading.hide();
-    }
-
-    function showPluginMenu(page, elem) {
-        var card = dom.parentWithClass(elem, 'card');
-        var id = card.getAttribute('data-id');
-        var name = card.getAttribute('data-name');
-        var removable = card.getAttribute('data-removable');
-        var configHref = card.querySelector('.cardContent').getAttribute('href');
-        var menuItems = [];
-
-        if (configHref) {
-            menuItems.push({
-                name: globalize.translate('ButtonSettings'),
-                id: 'open',
-                icon: 'mode_edit'
-            });
-        }
-
-        if (removable === 'true') {
-            menuItems.push({
-                name: globalize.translate('ButtonUninstall'),
-                id: 'delete',
-                icon: 'delete'
-            });
-        }
-
-        require(['actionsheet'], function (actionsheet) {
-            actionsheet.show({
-                items: menuItems,
-                positionTo: elem,
-                callback: function (resultId) {
-                    switch (resultId) {
-                        case 'open':
-                            Dashboard.navigate(configHref);
-                            break;
-                        case 'delete':
-                            deletePlugin(page, id, name);
-                            break;
-                    }
-                }
-            });
-        });
-    }
-
-    function reloadList(page) {
-        loading.show();
-        ApiClient.getInstalledPlugins().then(function (plugins) {
-            renderPlugins(page, plugins);
-        });
-    }
-
-    function getTabs() {
-        return [{
-            href: 'installedplugins.html',
-            name: globalize.translate('TabMyPlugins')
-        }, {
-            href: 'availableplugins.html',
-            name: globalize.translate('TabCatalog')
-        }, {
-            href: 'repositories.html',
-            name: globalize.translate('TabRepositories')
-        }];
-    }
-
-    function onInstalledPluginsClick(e) {
-        if (dom.parentWithClass(e.target, 'noConfigPluginCard')) {
-            showNoConfigurationMessage();
-        } else if (dom.parentWithClass(e.target, 'connectModePluginCard')) {
-            showConnectMessage();
-        } else {
-            var btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
-            if (btnCardMenu) {
-                showPluginMenu(dom.parentWithClass(btnCardMenu, 'page'), btnCardMenu);
-            }
-        }
-    }
-
-    pageIdOn('pageshow', 'pluginsPage', function () {
-        libraryMenu.setTabs('plugins', 0, getTabs);
-        reloadList(this);
     });
 
-    window.PluginsPage = {
+    let html = plugins.map(function (p) {
-        renderPlugins: renderPlugins
+        return getPluginCardHtml(p, pluginConfigurationPages);
-    };
+    }).join('');
+
+    const installedPluginsElement = page.querySelector('.installedPlugins');
+    installedPluginsElement.removeEventListener('click', onInstalledPluginsClick);
+    installedPluginsElement.addEventListener('click', onInstalledPluginsClick);
+
+    if (plugins.length) {
+        installedPluginsElement.classList.add('itemsContainer');
+        installedPluginsElement.classList.add('vertical-wrap');
+    } else {
+        html += '<div class="centerMessage">';
+        html += '<h1>' + globalize.translate('MessageNoPluginsInstalled') + '</h1>';
+        html += '<p><a is="emby-linkbutton" class="button-link" href="availableplugins.html">';
+        html += globalize.translate('MessageBrowsePluginCatalog');
+        html += '</a></p>';
+        html += '</div>';
+    }
+
+    installedPluginsElement.innerHTML = html;
+    loading.hide();
+}
+
+function showPluginMenu(page, elem) {
+    const card = dom.parentWithClass(elem, 'card');
+    const id = card.getAttribute('data-id');
+    const name = card.getAttribute('data-name');
+    const removable = card.getAttribute('data-removable');
+    const configHref = card.querySelector('.cardContent').getAttribute('href');
+    const menuItems = [];
+
+    if (configHref) {
+        menuItems.push({
+            name: globalize.translate('ButtonSettings'),
+            id: 'open',
+            icon: 'mode_edit'
+        });
+    }
+
+    if (removable === 'true') {
+        menuItems.push({
+            name: globalize.translate('ButtonUninstall'),
+            id: 'delete',
+            icon: 'delete'
+        });
+    }
+
+    import('actionsheet').then(({default: actionsheet}) => {
+        actionsheet.show({
+            items: menuItems,
+            positionTo: elem,
+            callback: function (resultId) {
+                switch (resultId) {
+                    case 'open':
+                        Dashboard.navigate(configHref);
+                        break;
+                    case 'delete':
+                        deletePlugin(page, id, name);
+                        break;
+                }
+            }
+        });
+    });
+}
+
+function reloadList(page) {
+    loading.show();
+    ApiClient.getInstalledPlugins().then(function (plugins) {
+        renderPlugins(page, plugins);
+    });
+}
+
+function getTabs() {
+    return [{
+        href: 'installedplugins.html',
+        name: globalize.translate('TabMyPlugins')
+    }, {
+        href: 'availableplugins.html',
+        name: globalize.translate('TabCatalog')
+    }, {
+        href: 'repositories.html',
+        name: globalize.translate('TabRepositories')
+    }];
+}
+
+function onInstalledPluginsClick(e) {
+    if (dom.parentWithClass(e.target, 'noConfigPluginCard')) {
+        showNoConfigurationMessage();
+    } else if (dom.parentWithClass(e.target, 'connectModePluginCard')) {
+        showConnectMessage();
+    } else {
+        const btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
+        if (btnCardMenu) {
+            showPluginMenu(dom.parentWithClass(btnCardMenu, 'page'), btnCardMenu);
+        }
+    }
+}
+
+pageIdOn('pageshow', 'pluginsPage', function () {
+    libraryMenu.setTabs('plugins', 0, getTabs);
+    reloadList(this);
 });
+
+window.PluginsPage = {
+    renderPlugins: renderPlugins
+};

src/controllers/dashboard/plugins/repositories/index.html

@@ -3,7 +3,7 @@
         <div class="content-primary">
             <div class="sectionTitleContainer flex align-items-center">
                 <h2 class="sectionTitle">${TabRepositories}</h2>
-                <button is="emby-button" type="button" class="fab btnNewRepository submit" style="margin-left:1em;" title="${ButtonAdd}">
+                <button is="emby-button" type="button" class="fab btnNewRepository submit" style="margin-left:1em;" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>

src/controllers/dashboard/plugins/repositories/index.js

@@ -69,7 +69,7 @@ function getRepositoryHtml(repository) {
     html += `<h3 class="listItemBodyText">${repository.Name}</h3>`;
     html += `<div class="listItemBodyText secondary">${repository.Url}</div>`;
     html += '</div>';
-    html += `<button type="button" is="paper-icon-button-light" id="${repository.Url}" class="btnDelete" title="${globalize.translate('ButtonDelete')}"><span class="material-icons delete"></span></button>`;
+    html += `<button type="button" is="paper-icon-button-light" id="${repository.Url}" class="btnDelete" title="${globalize.translate('Delete')}"><span class="material-icons delete"></span></button>`;
     html += '</div>';
 
     return html;
@@ -105,7 +105,7 @@ export default function(view, params) {
     });
 
     view.querySelector('.btnNewRepository').addEventListener('click', () => {
-        let dialog = dialogHelper.createDialog({
+        const dialog = dialogHelper.createDialog({
             scrollY: false,
             size: 'large',
             modal: false,
@@ -127,7 +127,7 @@ export default function(view, params) {
         html += `<input is="emby-input" id="txtRepositoryUrl" label="${globalize.translate('LabelRepositoryUrl')}" type="url" required />`;
         html += `<div class="fieldDescription">${globalize.translate('LabelRepositoryUrlHelp')}</div>`;
         html += '</div>';
-        html += `<button is="emby-button" type="submit" class="raised button-submit block"><span>${globalize.translate('ButtonSave')}</span></button>`;
+        html += `<button is="emby-button" type="submit" class="raised button-submit block"><span>${globalize.translate('Save')}</span></button>`;
         html += '</div>';
         html += '</form>';
 

src/controllers/dashboard/scheduledtasks/scheduledtask.html

@@ -31,18 +31,18 @@
                         <option value="DailyTrigger">${OptionDaily}</option>
                         <option value="WeeklyTrigger">${OptionWeekly}</option>
                         <option value="IntervalTrigger">${OptionOnInterval}</option>
-                        <option value="StartupTrigger">${OptionOnAppStartup}</option>
+                        <option value="StartupTrigger">${OnApplicationStartup}</option>
                     </select>
                 </div>
                 <div id="fldDayOfWeek" class="selectContainer">
                     <select is="emby-select" id="selectDayOfWeek" name="selectDayOfWeek" label="${LabelDay}">
-                        <option value="Sunday">${OptionSunday}</option>
+                        <option value="Sunday">${Sunday}</option>
-                        <option value="Monday">${OptionMonday}</option>
+                        <option value="Monday">${Monday}</option>
-                        <option value="Tuesday">${OptionTuesday}</option>
+                        <option value="Tuesday">${Tuesday}</option>
-                        <option value="Wednesday">${OptionWednesday}</option>
+                        <option value="Wednesday">${Wednesday}</option>
-                        <option value="Thursday">${OptionThursday}</option>
+                        <option value="Thursday">${Thursday}</option>
-                        <option value="Friday">${OptionFriday}</option>
+                        <option value="Friday">${Friday}</option>
-                        <option value="Saturday">${OptionSaturday}</option>
+                        <option value="Saturday">${Saturday}</option>
                     </select>
                 </div>
                 <div id="fldTimeOfDay" class="selectContainer">
@@ -73,7 +73,7 @@
                 </div>
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block" data-icon="check">
-                        <span>${ButtonAdd}</span>
+                        <span>${Add}</span>
                     </button>
                     <button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');">
                         <span>${ButtonCancel}</span>

src/controllers/dashboard/scheduledtasks/scheduledtask.js

@@ -33,7 +33,7 @@ import 'emby-select';
     const ScheduledTaskPage = {
         refreshScheduledTask: function (view) {
             loading.show();
-            let id = getParameterByName('id');
+            const id = getParameterByName('id');
             ApiClient.getScheduledTask(id).then(function (task) {
                 ScheduledTaskPage.loadScheduledTask(view, task);
             });
@@ -75,7 +75,7 @@ import 'emby-select';
                 }
 
                 html += '</div>';
-                html += '<button class="btnDeleteTrigger" data-index="' + i + '" type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonDelete') + '"><span class="material-icons delete"></span></button>';
+                html += '<button class="btnDeleteTrigger" data-index="' + i + '" type="button" is="paper-icon-button-light" title="' + globalize.translate('Delete') + '"><span class="material-icons delete"></span></button>';
                 html += '</div>';
             }
 
@@ -143,7 +143,7 @@ import 'emby-select';
         },
         deleteTrigger: function (view, index) {
             loading.show();
-            let id = getParameterByName('id');
+            const id = getParameterByName('id');
             ApiClient.getScheduledTask(id).then(function (task) {
                 task.Triggers.remove(index);
                 ApiClient.updateScheduledTaskTriggers(task.Id, task.Triggers).then(function () {
@@ -211,7 +211,7 @@ import 'emby-select';
     export default function (view, params) {
         function onSubmit(e) {
             loading.show();
-            let id = getParameterByName('id');
+            const id = getParameterByName('id');
             ApiClient.getScheduledTask(id).then(function (task) {
                 task.Triggers.push(ScheduledTaskPage.getTriggerToAdd(view));
                 ApiClient.updateScheduledTaskTriggers(task.Id, task.Triggers).then(function () {

src/controllers/dashboard/scheduledtasks/scheduledtasks.js

@@ -103,7 +103,7 @@ import 'emby-button';
     }
 
     function setTaskButtonIcon(button, icon) {
-        let inner = button.querySelector('.material-icons');
+        const inner = button.querySelector('.material-icons');
         inner.classList.remove('stop', 'play_arrow');
         inner.classList.add(icon);
     }
@@ -160,7 +160,7 @@ import 'emby-button';
 
         $('.divScheduledTasks', view).on('click', '.btnStartTask', function() {
             const button = this;
-            let id = button.getAttribute('data-taskid');
+            const id = button.getAttribute('data-taskid');
             ApiClient.startScheduledTask(id).then(function() {
                 updateTaskButton(button, 'Running');
                 reloadList(view);
@@ -169,7 +169,7 @@ import 'emby-button';
 
         $('.divScheduledTasks', view).on('click', '.btnStopTask', function() {
             const button = this;
-            let id = button.getAttribute('data-taskid');
+            const id = button.getAttribute('data-taskid');
             ApiClient.stopScheduledTask(id).then(function() {
                 updateTaskButton(button, '');
                 reloadList(view);

src/controllers/dashboard/streaming.html

@@ -12,7 +12,7 @@
                     </div>
                 </div>
                 <button is="emby-button" type="submit" class="raised button-submit block">
-                    <span>${ButtonSave}</span>
+                    <span>${Save}</span>
                 </button>
             </form>
         </div>

src/controllers/dashboard/users/useredit.html

@@ -14,7 +14,7 @@
                 <a href="#" is="emby-linkbutton" data-role="button" class="ui-btn-active">${TabProfile}</a>
                 <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);">${TabAccess}</a>
                 <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
-                <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${TabPassword}</a>
+                <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>
             </div>
             <p class="lnkEditUserPreferencesContainer">
                 <a class="lnkEditUserPreferences button-link" href="#" is="emby-linkbutton">${ButtonEditOtherUserPreferences}</a>
@@ -192,7 +192,7 @@
                 <br />
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${ButtonSave}</span>
+                        <span>${Save}</span>
                     </button>
 
                     <button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">

src/controllers/dashboard/users/userlibraryaccess.html

@@ -14,7 +14,7 @@
                 <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${TabProfile}</a>
                 <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);" class="ui-btn-active">${TabAccess}</a>
                 <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
-                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${TabPassword}</a>
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>
             </div>
             <form class="userLibraryAccessForm">
 
@@ -59,7 +59,7 @@
                 <br />
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${ButtonSave}</span>
+                        <span>${Save}</span>
                     </button>
                 </div>
             </form>

src/controllers/dashboard/users/userlibraryaccess.js

@@ -32,7 +32,7 @@ import globalize from 'globalize';
 
     function loadChannels(page, user, channels) {
         let html = '';
-        html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderChannels') + '</h3>';
+        html += '<h3 class="checkboxListLabel">' + globalize.translate('Channels') + '</h3>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
 
         for (let i = 0, length = channels.length; i < length; i++) {