Merge branch 'master' into deinterlace-improvements

.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

@@ -95,6 +95,7 @@
           "src/components/alert.js",
           "src/components/alphaPicker/alphaPicker.js",
           "src/components/appFooter/appFooter.js",
+          "src/components/apphost.js",
           "src/components/autoFocuser.js",
           "src/components/backdrop/backdrop.js",
           "src/components/cardbuilder/cardBuilder.js",
@@ -110,6 +111,7 @@
           "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",
@@ -140,6 +142,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",
@@ -162,6 +165,7 @@
           "src/components/recordingcreator/seriesrecordingeditor.js",
           "src/components/recordingcreator/recordinghelper.js",
           "src/components/refreshdialog/refreshdialog.js",
+          "src/components/qualityOptions.js",
           "src/components/remotecontrol/remotecontrol.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
@@ -184,13 +188,17 @@
           "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",
@@ -218,8 +226,8 @@
           "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",
@@ -253,6 +261,7 @@
           "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",

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

@@ -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/appRouter.js

@@ -1,6 +1,7 @@
 define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdrop', 'browser', 'page', 'appSettings', 'apphost', 'connectionManager'], function (loading, globalize, events, viewManager, skinManager, backdrop, browser, page, appSettings, appHost, connectionManager) {
     'use strict';
 
+    appHost = appHost.default || appHost;
     viewManager = viewManager.default || viewManager;
     browser = browser.default || browser;
     loading = loading.default || loading;

src/components/apphost.js

@@ -1,10 +1,12 @@
-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) {
-        var disableHlsVideoAudioCodecs = [];
 
     if (item && htmlMediaHelper.enableHlsJsPlayer(item.RunTimeTicks, item.MediaType)) {
         if (browser.edge) {
@@ -20,35 +22,17 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
         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 getDeviceProfile(item, options) {
-        options = options || {};
-
-        if (self.Windows) {
-            return getDeviceProfileForWindowsUwp(item);
-        }
 
+function getDeviceProfile(item, options = {}) {
     return new Promise(function (resolve) {
-            require(['browserdeviceprofile'], function (profileBuilder) {
+        import('browserdeviceprofile').then(({default: profileBuilder}) => {
-                var profile;
+            let profile;
 
             if (window.NativeShell) {
                 profile = window.NativeShell.AppHost.getDeviceProfile(profileBuilder);
             } else {
-                    var builderOpts = getBaseProfileOptions(item);
+                const builderOpts = getBaseProfileOptions(item);
                 builderOpts.enableSsaRender = (item && !options.isRetry && appSettings.get('subtitleburnin') !== 'allcomplexformats');
                 profile = profileBuilder(builderOpts);
             }
@@ -56,32 +40,32 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
             resolve(profile);
         });
     });
-    }
+}
 
-    function escapeRegExp(str) {
+function escapeRegExp(str) {
-        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1');
+    return str.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1');
-    }
+}
 
-    function replaceAll(originalString, strReplace, strWith) {
+function replaceAll(originalString, strReplace, strWith) {
-        var strReplace2 = escapeRegExp(strReplace);
+    const strReplace2 = escapeRegExp(strReplace);
-        var reg = new RegExp(strReplace2, 'ig');
+    const reg = new RegExp(strReplace2, 'ig');
     return originalString.replace(reg, strWith);
-    }
+}
 
-    function generateDeviceId() {
+function generateDeviceId() {
-        var keys = [];
+    const keys = [];
 
     if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), self.btoa) {
-            var result = replaceAll(btoa(keys.join('|')), '=', '1');
+        const result = replaceAll(btoa(keys.join('|')), '=', '1');
         return Promise.resolve(result);
     }
 
     return Promise.resolve(new Date().getTime());
-    }
+}
 
-    function getDeviceId() {
+function getDeviceId() {
-        var key = '_deviceId2';
+    const key = '_deviceId2';
-        var deviceId = appSettings.get(key);
+    const deviceId = appSettings.get(key);
 
     if (deviceId) {
         return Promise.resolve(deviceId);
@@ -91,9 +75,9 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
         appSettings.set(key, deviceId);
         return deviceId;
     });
-    }
+}
 
-    function getDeviceName() {
+function getDeviceName() {
     var deviceName;
     if (browser.tizen) {
         deviceName = 'Samsung Smart TV';
@@ -130,47 +114,30 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
     }
 
     return deviceName;
-    }
+}
 
-    function supportsVoiceInput() {
+function supportsVoiceInput() {
     if (!browser.tv) {
         return window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.oSpeechRecognition || window.msSpeechRecognition;
     }
 
     return false;
-    }
+}
 
-    function supportsFullscreen() {
+function supportsFullscreen() {
     if (browser.tv) {
         return false;
     }
 
-        var element = document.documentElement;
+    const element = document.documentElement;
     return (element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen || element.msRequestFullscreen) || document.createElement('video').webkitEnterFullscreen;
-    }
+}
 
-    function getSyncProfile() {
+function getDefaultLayout() {
-        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() {
+function supportsHtmlMediaAutoplay() {
     if (browser.edgeUwp || browser.tizen || browser.web0s || browser.orsay || browser.operaTv || browser.ps4 || browser.xboxOne) {
         return true;
     }
@@ -180,18 +147,18 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
     }
 
     return true;
-    }
+}
 
-    function supportsCue() {
+function supportsCue() {
     try {
-            var video = document.createElement('video');
+        const video = document.createElement('video');
-            var style = document.createElement('style');
+        const 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;
+        const cue = window.getComputedStyle(video, '::cue').background;
         document.body.removeChild(style);
         document.body.removeChild(video);
 
@@ -200,25 +167,25 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
         console.error('error detecting cue support: ' + err);
         return false;
     }
-    }
+}
 
-    function onAppVisible() {
+function onAppVisible() {
     if (isHidden) {
         isHidden = false;
         console.debug('triggering app resume event');
         events.trigger(appHost, 'resume');
     }
-    }
+}
 
-    function onAppHidden() {
+function onAppHidden() {
     if (!isHidden) {
         isHidden = true;
         console.debug('app is hidden');
     }
-    }
+}
 
-    var supportedFeatures = function () {
+const supportedFeatures = function () {
-        var features = [];
+    const features = [];
 
     if (navigator.share) {
         features.push('sharing');
@@ -300,12 +267,12 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
     }
 
     return features;
-    }();
+}();
 
-    /**
+/**
      * Do exit according to platform
      */
-    function doExit() {
+function doExit() {
     try {
         if (window.NativeShell) {
             window.NativeShell.AppHost.exit();
@@ -319,19 +286,19 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
     } catch (err) {
         console.error('error closing application: ' + err);
     }
-    }
+}
 
-    var exitPromise;
+let exitPromise;
 
-    /**
+/**
      * Ask user for exit
      */
-    function askForExit() {
+function askForExit() {
     if (exitPromise) {
         return;
     }
 
-        require(['actionsheet'], function (actionsheet) {
+    import('actionsheet').then(({default: actionsheet}) => {
         exitPromise = actionsheet.show({
             title: globalize.translate('MessageConfirmAppExit'),
             items: [
@@ -346,18 +313,18 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
             exitPromise = null;
         });
     });
-    }
+}
 
-    var deviceId;
+let deviceId;
-    var deviceName;
+let deviceName;
-    var appName = 'Jellyfin Web';
+const appName = 'Jellyfin Web';
-    var appVersion = '10.7.0';
+const appVersion = '10.7.0';
 
-    var appHost = {
+const appHost = {
     getWindowState: function () {
         return document.windowState || 'Normal';
     },
-        setWindowState: function (state) {
+    setWindowState: function () {
         alert('setWindowState is not supported and should not be called');
     },
     exit: function () {
@@ -375,7 +342,6 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
         return supportedFeatures.indexOf(command.toLowerCase()) !== -1;
     },
     preferVisualCards: browser.android || browser.chrome,
-        getSyncProfile: getSyncProfile,
     getDefaultLayout: function () {
         if (window.NativeShell) {
             return window.NativeShell.AppHost.getDefaultLayout();
@@ -411,37 +377,36 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
     },
     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';
+            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);
         }
     }
-    };
+};
 
-    var isHidden = false;
+let isHidden = false;
-    var hidden;
+let hidden;
-    var visibilityChange;
+let visibilityChange;
 
-    if (typeof document.hidden !== 'undefined') { /* eslint-disable-line compat/compat */
+if (typeof document.hidden !== 'undefined') { /* eslint-disable-line compat/compat */
     hidden = 'hidden';
     visibilityChange = 'visibilitychange';
-    } else if (typeof document.webkitHidden !== 'undefined') {
+} else if (typeof document.webkitHidden !== 'undefined') {
     hidden = 'webkitHidden';
     visibilityChange = 'webkitvisibilitychange';
-    }
+}
 
-    document.addEventListener(visibilityChange, function () {
+document.addEventListener(visibilityChange, function () {
     /* eslint-disable-next-line compat/compat */
     if (document[hidden]) {
         onAppHidden();
     } else {
         onAppVisible();
     }
-    }, false);
+}, false);
 
-    if (self.addEventListener) {
+if (self.addEventListener) {
     self.addEventListener('focus', onAppVisible);
     self.addEventListener('blur', onAppHidden);
-    }
+}
 
-    return appHost;
+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/dialogHelper/dialogHelper.js

@@ -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/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>
@@ -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,15 +1,25 @@
-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';
 
-    layoutManager = layoutManager.default || layoutManager;
+function onSubmit(e) {
-
-    function onSubmit(e) {
     e.preventDefault();
     return false;
-    }
+}
-
+function renderOptions(context, selector, cssClass, items, isCheckedFn) {
-    function renderOptions(context, selector, cssClass, items, isCheckedFn) {
     var elem = context.querySelector(selector);
 
     if (items.length) {
@@ -33,32 +43,116 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
     }).join('');
 
     elem.querySelector('.filterOptions').innerHTML = html;
-    }
+}
 
-    function renderDynamicFilters(context, result, options) {
+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;
+        }
     }
 
-    function loadDynamicFilters(context, options) {
+    index += offset;
-        var apiClient = connectionManager.getApiClient(options.serverId);
 
-        var filterMenuOptions = Object.assign(options.filterMenuOptions, {
+    index = Math.min(elems.length - 1, index);
+    index = Math.max(0, index);
 
-            UserId: apiClient.getCurrentUserId(),
+    var newElem = elems[index];
-            ParentId: options.parentId,
+    if (newElem) {
-            IncludeItemTypes: options.itemTypes.join(',')
+        focusManager.focus(newElem);
-        });
+    }
-
+}
-        apiClient.getFilters(filterMenuOptions).then(function (result) {
+function centerFocus(elem, horiz, on) {
-            renderDynamicFilters(context, result, options);
+    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 {
+            setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
+        }
     }
 
-    function initEditor(context, settings) {
+    // Video type
+    var videoTypes = [];
+    elems = context.querySelectorAll('.chkVideoTypeFilter');
+
+    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'));
+        }
+    }
+
+    // Genres
+    var genres = [];
+    elems = context.querySelectorAll('.chkGenreFilter');
+
+    for (let 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 bindCheckboxInput(context, on) {
+    var elems = context.querySelectorAll('.checkboxList-verticalwrap');
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (on) {
+            inputManager.on(elems[i], onInputCommand);
+        } else {
+            inputManager.off(elems[i], onInputCommand);
+        }
+    }
+}
+function initEditor(context, settings) {
     context.querySelector('form').addEventListener('submit', onSubmit);
 
     var elems = context.querySelectorAll('.simpleFilter');
@@ -98,128 +192,29 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
     } else {
         context.querySelector('.featureSection').classList.add('hide');
     }
-    }
+}
+function loadDynamicFilters(context, options) {
+    var apiClient = connectionManager.getApiClient(options.serverId);
 
-    function saveValues(context, settings, settingsKey) {
+    var filterMenuOptions = Object.assign(options.filterMenuOptions, {
-        var elems = context.querySelectorAll('.simpleFilter');
-        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
+        UserId: apiClient.getCurrentUserId(),
-        var videoTypes = [];
+        ParentId: options.parentId,
-        elems = context.querySelectorAll('.chkVideoTypeFilter');
+        IncludeItemTypes: options.itemTypes.join(',')
-
-        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 value = elem.checked;
-        value = value ? value : null;
-        userSettings.setFilter(key, value);
-    }
-
-    function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
-            scrollHelper = scrollHelper.default || scrollHelper;
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
     });
-    }
 
-    function moveCheckboxFocus(elem, offset) {
+    apiClient.getFilters(filterMenuOptions).then((result) => {
-        var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
+        renderDynamicFilters(context, result, options);
-        var elems = focusManager.getFocusableElements(parent);
+    });
-
+}
-        var index = -1;
+class FilterMenu {
-        for (var i = 0, length = elems.length; i < length; i++) {
+    show(options) {
-            if (elems[i] === elem) {
+        return new Promise( (resolve, reject) => {
-                index = i;
+            import('text!./filtermenu.template.html').then(({ default: template }) => {
-                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 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 FilterMenu() {
-
-    }
-
-    function bindCheckboxInput(context, on) {
-        var elems = context.querySelectorAll('.checkboxList-verticalwrap');
-        for (var i = 0, length = elems.length; i < length; i++) {
-            if (on) {
-                inputManager.on(elems[i], onInputCommand);
-            } else {
-                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 {
@@ -243,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 {
@@ -255,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);
                 });
@@ -270,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) {
@@ -280,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();
+export default FilterMenu;
-                });
-            });
-        });
-    };
-
-    return FilterMenu;
-});

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

@@ -16,7 +16,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 +367,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/mediaLibraryCreator/mediaLibraryCreator.template.html

@@ -25,7 +25,7 @@
         <div class="folders">
             <div style="display: flex; align-items: center;">
                 <h1 style="margin: .5em 0;">${HeadersFolders}</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.template.html

@@ -19,7 +19,7 @@
         <div class="folders hide">
             <div style="display: flex; align-items: center;">
                 <h1 style="margin: .5em 0;">${HeadersFolders}</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/metadataEditor/metadataEditor.js

@@ -906,7 +906,7 @@ import 'flexStyles';
     }
 
     function populatePeople(context, people) {
-        let lastType = '';
+        const lastType = '';
         let html = '';
 
         const elem = context.querySelector('#peopleList');

src/components/notifications/notifications.js

@@ -1,10 +1,9 @@
-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;
-
-    function onOneDocumentClick() {
     document.removeEventListener('click', onOneDocumentClick);
     document.removeEventListener('keydown', onOneDocumentClick);
 
@@ -13,14 +12,14 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         /* eslint-disable-next-line compat/compat */
         Notification.requestPermission();
     }
-    }
+}
 
-    document.addEventListener('click', onOneDocumentClick);
+document.addEventListener('click', onOneDocumentClick);
-    document.addEventListener('keydown', onOneDocumentClick);
+document.addEventListener('keydown', onOneDocumentClick);
 
-    var serviceWorkerRegistration;
+let serviceWorkerRegistration;
 
-    function closeAfter(notification, timeoutMs) {
+function closeAfter(notification, timeoutMs) {
     setTimeout(function () {
         if (notification.close) {
             notification.close();
@@ -28,27 +27,27 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             notification.cancel();
         }
     }, timeoutMs);
-    }
+}
 
-    function resetRegistration() {
+function resetRegistration() {
     /* eslint-disable-next-line compat/compat */
-        var serviceWorker = navigator.serviceWorker;
+    let serviceWorker = navigator.serviceWorker;
     if (serviceWorker) {
         serviceWorker.ready.then(function (registration) {
             serviceWorkerRegistration = registration;
         });
     }
-    }
+}
 
-    resetRegistration();
+resetRegistration();
 
-    function showPersistentNotification(title, options, timeoutMs) {
+function showPersistentNotification(title, options, timeoutMs) {
     serviceWorkerRegistration.showNotification(title, options);
-    }
+}
 
-    function showNonPersistentNotification(title, options, timeoutMs) {
+function showNonPersistentNotification(title, options, timeoutMs) {
     try {
-            var notif = new Notification(title, options); /* eslint-disable-line compat/compat */
+        let notif = new Notification(title, options); /* eslint-disable-line compat/compat */
 
         if (notif.show) {
             notif.show();
@@ -65,10 +64,10 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             throw err;
         }
     }
-    }
+}
 
-    function showNotification(options, timeoutMs, apiClient) {
+function showNotification(options, timeoutMs, apiClient) {
-        var title = options.title;
+    let title = options.title;
 
     options.data = options.data || {};
     options.data.serverId = apiClient.serverInfo().Id;
@@ -83,20 +82,20 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     }
 
     showNonPersistentNotification(title, options, timeoutMs);
-    }
+}
 
-    function showNewItemNotification(item, apiClient) {
+function showNewItemNotification(item, apiClient) {
     if (playbackManager.isPlayingLocally(['Video'])) {
         return;
     }
 
-        var body = item.Name;
+    let body = item.Name;
 
     if (item.SeriesName) {
         body = item.SeriesName + ' - ' + body;
     }
 
-        var notification = {
+    let notification = {
         title: 'New ' + item.Type,
         body: body,
         vibrate: true,
@@ -104,7 +103,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         data: {}
     };
 
-        var imageTags = item.ImageTags || {};
+    let imageTags = item.ImageTags || {};
 
     if (imageTags.Primary) {
         notification.icon = apiClient.getScaledImageUrl(item.Id, {
@@ -115,10 +114,10 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     }
 
     showNotification(notification, 15000, apiClient);
-    }
+}
 
-    function onLibraryChanged(data, apiClient) {
+function onLibraryChanged(data, apiClient) {
-        var newItems = data.ItemsAdded;
+    let newItems = data.ItemsAdded;
 
     if (!newItems.length) {
         return;
@@ -141,26 +140,26 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         EnableTotalRecordCount: false
 
     }).then(function (result) {
-            var items = result.Items;
+        let items = result.Items;
 
-            for (var i = 0, length = items.length ; i < length; i++) {
+        for (const item of items) {
-                showNewItemNotification(items[i], apiClient);
+            showNewItemNotification(item, apiClient);
         }
     });
-    }
+}
 
-    function getIconUrl(name) {
+function getIconUrl(name) {
     name = name || 'notificationicon.png';
-        return require.toUrl('.').split('?')[0] + '/' + name;
+    return './components/notifications/' + name;
-    }
+}
 
-    function showPackageInstallNotification(apiClient, installation, status) {
+function showPackageInstallNotification(apiClient, installation, status) {
     apiClient.getCurrentUser().then(function (user) {
         if (!user.Policy.IsAdministrator) {
             return;
         }
 
-            var notification = {
+        let notification = {
             tag: 'install' + installation.Id,
             data: {}
         };
@@ -189,58 +188,58 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         }
 
         if (status === 'progress') {
-                var percentComplete = Math.round(installation.PercentComplete || 0);
+            let percentComplete = Math.round(installation.PercentComplete || 0);
 
             notification.body = percentComplete + '% complete.';
         }
 
-            var timeout = status === 'cancelled' ? 5000 : 0;
+        let timeout = status === 'cancelled' ? 5000 : 0;
 
         showNotification(notification, timeout, apiClient);
     });
-    }
+}
 
-    events.on(serverNotifications, 'LibraryChanged', function (e, apiClient, data) {
+events.on(serverNotifications, 'LibraryChanged', function (e, apiClient, data) {
     onLibraryChanged(data, apiClient);
-    });
+});
 
-    events.on(serverNotifications, 'PackageInstallationCompleted', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstallationCompleted', function (e, apiClient, data) {
     showPackageInstallNotification(apiClient, data, 'completed');
-    });
+});
 
-    events.on(serverNotifications, 'PackageInstallationFailed', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstallationFailed', function (e, apiClient, data) {
     showPackageInstallNotification(apiClient, data, 'failed');
-    });
+});
 
-    events.on(serverNotifications, 'PackageInstallationCancelled', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstallationCancelled', function (e, apiClient, data) {
     showPackageInstallNotification(apiClient, data, 'cancelled');
-    });
+});
 
-    events.on(serverNotifications, 'PackageInstalling', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstalling', function (e, apiClient, data) {
     showPackageInstallNotification(apiClient, data, 'progress');
-    });
+});
 
-    events.on(serverNotifications, 'ServerShuttingDown', 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,
         title: globalize.translate('ServerNameIsShuttingDown', apiClient.serverInfo().Name)
     };
     showNotification(notification, 0, apiClient);
-    });
+});
 
-    events.on(serverNotifications, 'ServerRestarting', function (e, apiClient, data) {
+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,
         title: globalize.translate('ServerNameIsRestarting', apiClient.serverInfo().Name)
     };
     showNotification(notification, 0, apiClient);
-    });
+});
 
-    events.on(serverNotifications, 'RestartRequired', function (e, apiClient) {
+events.on(serverNotifications, 'RestartRequired', function (e, apiClient) {
-        var serverId = apiClient.serverInfo().Id;
+    let serverId = apiClient.serverInfo().Id;
-        var notification = {
+    let notification = {
         tag: 'restart' + serverId,
         title: globalize.translate('PleaseRestartServerName', apiClient.serverInfo().Name)
     };
@@ -255,5 +254,5 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         ];
 
     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);
         }
 
@@ -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,7 +1,6 @@
-define(['globalize'], function (globalize) {
+import globalize from 'globalize';
-    'use strict';
 
-    function getVideoQualityOptions(options) {
+export function getVideoQualityOptions(options) {
     var maxStreamingBitrate = options.currentMaxBitrate;
     var videoWidth = options.videoWidth;
     var videoHeight = options.videoHeight;
@@ -100,9 +99,9 @@ define(['globalize'], function (globalize) {
     }
 
     return qualityOptions;
-    }
+}
 
-    function getAudioQualityOptions(options) {
+export function getAudioQualityOptions(options) {
     var maxStreamingBitrate = options.currentMaxBitrate;
 
     var qualityOptions = [];
@@ -151,10 +150,9 @@ define(['globalize'], function (globalize) {
     }
 
     return qualityOptions;
-    }
+}
 
-    return {
+export default {
-        getVideoQualityOptions: getVideoQualityOptions,
+    getVideoQualityOptions,
-        getAudioQualityOptions: getAudioQualityOptions
+    getAudioQualityOptions
-    };
+};
-});

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/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/themeMediaPlayer.js

@@ -1,13 +1,12 @@
-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) {
-
-    function playThemeMedia(items, ownerId) {
-        var currentThemeItems = items.filter(function (i) {
         return enabled(i.MediaType);
     });
 
@@ -32,27 +31,27 @@ define(['playbackManager', 'userSettings', 'connectionManager'], function (playb
     } else {
         stopIfPlaying();
     }
-    }
+}
 
-    function stopIfPlaying() {
+function stopIfPlaying() {
     if (currentOwnerId) {
         playbackManager.stop();
     }
 
     currentOwnerId = null;
-    }
+}
 
-    function enabled(mediaType) {
+function enabled(mediaType) {
     if (mediaType === 'Video') {
         return userSettings.enableThemeVideos();
     }
 
     return userSettings.enableThemeSongs();
-    }
+}
 
-    var excludeTypes = ['CollectionFolder', 'UserView', 'Program', 'SeriesTimer', 'Person', 'TvChannel', 'Channel'];
+const excludeTypes = ['CollectionFolder', 'UserView', 'Program', 'SeriesTimer', 'Person', 'TvChannel', 'Channel'];
 
-    function loadThemeMedia(item) {
+function loadThemeMedia(item) {
     if (item.CollectionType) {
         stopIfPlaying();
         return;
@@ -63,41 +62,40 @@ define(['playbackManager', 'userSettings', 'connectionManager'], function (playb
         return;
     }
 
-        var apiClient = connectionManager.getApiClient(item.ServerId);
+    const 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;
+        const 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;
+            const items = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.Items : themeMediaResult.ThemeSongsResult.Items;
 
             playThemeMedia(items, ownerId);
         }
     });
-    }
+}
 
-    document.addEventListener('viewshow', function (e) {
+document.addEventListener('viewshow', function (e) {
-        var state = e.detail.state || {};
+    const state = e.detail.state || {};
-        var item = state.item;
+    const item = state.item;
 
     if (item && item.ServerId) {
         loadThemeMedia(item);
         return;
     }
 
-        var viewOptions = e.detail.options || {};
+    const viewOptions = e.detail.options || {};
 
     if (viewOptions.supportsThemeMedia) {
         // Do nothing here, allow it to keep playing
     } else {
         playThemeMedia([], null);
     }
-    }, true);
+}, true);
 
-    Events.on(playbackManager, 'playbackstart', function (e, player) {
+Events.on(playbackManager, 'playbackstart', function (e, player) {
-        var item = playbackManager.currentItem(player);
+    const item = playbackManager.currentItem(player);
     // User played something manually
     if (currentThemeIds.indexOf(item.Id) == -1) {
         currentOwnerId = null;
     }
-    });
 });

src/components/tunerPicker.js

@@ -1,16 +1,22 @@
-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;
-    layoutManager = layoutManager.default || layoutManager;
-    focusManager = focusManager.default || focusManager;
-    scrollHelper = scrollHelper.default || scrollHelper;
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+function getEditorHtml() {
-
+    let html = '';
-    function getEditorHtml() {
-        var html = '';
     html += '<div class="formDialogContent scrollY">';
     html += '<div class="dialogContentInner dialog-content-centered">';
     html += '<div class="loadingContent hide">';
@@ -22,15 +28,13 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
     html += '</div>';
     html += '</div>';
     return html += '</div>';
-    }
+}
 
-    function getDeviceHtml(device) {
+function getDeviceHtml(device) {
-        var padderClass;
+    let html = '';
-        var html = '';
+    let cssClass = 'card scalableCard backdropCard backdropCard-scalable';
-        var cssClass = 'card scalableCard';
+    const cardBoxCssClass = 'cardBox visualCardBox';
-        var cardBoxCssClass = 'cardBox visualCardBox';
+    const padderClass = 'cardPadder-backdrop';
-        cssClass += ' backdropCard backdropCard-scalable';
-        padderClass = 'cardPadder-backdrop';
 
     // TODO move card creation code to Card component
 
@@ -59,9 +63,9 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
     html += '</div>';
     html += '</div>';
     return html += '</button>';
-    }
+}
 
-    function getTunerName(providerId) {
+function getTunerName(providerId) {
     switch (providerId = providerId.toLowerCase()) {
         case 'm3u':
             return 'M3U';
@@ -78,14 +82,12 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
         default:
             return 'Unknown';
     }
-    }
+}
 
-    function renderDevices(view, devices) {
+function renderDevices(view, devices) {
-        var i;
+    let html = '';
-        var length;
-        var html = '';
 
-        for (i = 0, length = devices.length; i < length; i++) {
+    for (let i = 0, length = devices.length; i < length; i++) {
         html += getDeviceHtml(devices[i]);
     }
 
@@ -96,15 +98,15 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
         view.querySelector('.devicesHeader').classList.add('hide');
     }
 
-        var elem = view.querySelector('.results');
+    const elem = view.querySelector('.results');
     elem.innerHTML = html;
 
     if (layoutManager.tv) {
         focusManager.autoFocus(elem);
     }
-    }
+}
 
-    function discoverDevices(view, apiClient) {
+function discoverDevices(view, apiClient) {
     loading.show();
     view.querySelector('.loadingContent').classList.remove('hide');
     return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', {
@@ -115,11 +117,11 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
         view.querySelector('.loadingContent').classList.add('hide');
         loading.hide();
     });
-    }
+}
 
-    function tunerPicker() {
+function tunerPicker() {
     this.show = function (options) {
-            var dialogOptions = {
+        const dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
@@ -130,9 +132,9 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
             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 autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
         html += '<h3 class="formDialogHeaderTitle">';
@@ -144,12 +146,12 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
         dlg.querySelector('.btnCancel').addEventListener('click', function () {
             dialogHelper.close(dlg);
         });
-            var deviceResult;
+        let deviceResult;
         dlg.querySelector('.results').addEventListener('click', function (e) {
-                var tunerCard = dom.parentWithClass(e.target, 'card');
+            const tunerCard = dom.parentWithClass(e.target, 'card');
 
             if (tunerCard) {
-                    var deviceId = tunerCard.getAttribute('data-id');
+                const deviceId = tunerCard.getAttribute('data-id');
                 deviceResult = currentDevices.filter(function (d) {
                     return d.DeviceId === deviceId;
                 })[0];
@@ -161,7 +163,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
             scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
         }
 
-            var apiClient = connectionManager.getApiClient(options.serverId);
+        const apiClient = connectionManager.getApiClient(options.serverId);
         discoverDevices(dlg, apiClient);
 
         if (layoutManager.tv) {
@@ -176,8 +178,8 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
             return Promise.reject();
         });
     };
-    }
+}
 
-    var currentDevices = [];
+let currentDevices = [];
-    return tunerPicker;
+
-});
+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,21 +1,27 @@
-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,
     markDislike: markDislike,
     markLike: markLike,
     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') {
         style = 'fab';
         buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini';
     }
 
-        var is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
+    const is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
-        var className = style === 'fab' ? 'autoSize fab' : 'autoSize';
+    let className = style === 'fab' ? 'autoSize fab' : 'autoSize';
 
     if (buttonCssClass) {
         className += ' ' + buttonCssClass;
@@ -30,21 +36,21 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     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) {
+function onContainerClick(e) {
-        var btnUserData = dom.parentWithClass(e.target, 'btnUserData');
+    const btnUserData = dom.parentWithClass(e.target, 'btnUserData');
 
     if (!btnUserData) {
         return;
     }
 
-        var method = btnUserData.getAttribute('data-method');
+    const method = btnUserData.getAttribute('data-method');
     userDataMethods[method](btnUserData);
-    }
+}
 
-    function fill(options) {
+function fill(options) {
-        var html = getIconsHtml(options);
+    const html = getIconsHtml(options);
 
     if (options.fillMode === 'insertAdjacent') {
         options.element.insertAdjacentHTML(options.insertLocation || 'beforeend', html);
@@ -59,44 +65,44 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     dom.addEventListener(options.element, 'click', onContainerClick, {
         passive: true
     });
-    }
+}
 
-    function destroy(options) {
+function destroy(options) {
     options.element.innerHTML = '';
 
     dom.removeEventListener(options.element, 'click', onContainerClick, {
         passive: true
     });
-    }
+}
 
-    function getIconsHtml(options) {
+function getIconsHtml(options) {
-        var item = options.item;
+    const item = options.item;
-        var includePlayed = options.includePlayed;
+    const includePlayed = options.includePlayed;
-        var cssClass = options.cssClass;
+    const cssClass = options.cssClass;
-        var style = options.style;
+    const style = options.style;
 
-        var html = '';
+    let html = '';
 
-        var userData = item.UserData || {};
+    const userData = item.UserData || {};
 
-        var itemId = item.Id;
+    const itemId = item.Id;
 
     if (itemHelper.isLocalItem(item)) {
         return html;
     }
 
-        var btnCssClass = 'btnUserData';
+    let btnCssClass = 'btnUserData';
 
     if (cssClass) {
         btnCssClass += ' ' + cssClass;
     }
 
-        var iconCssClass = options.iconCssClass;
+    const iconCssClass = options.iconCssClass;
 
-        var serverId = item.ServerId;
+    const serverId = item.ServerId;
 
     if (includePlayed !== false) {
-            var tooltipPlayed = globalize.translate('MarkPlayed');
+        const tooltipPlayed = globalize.translate('MarkPlayed');
 
         if (itemHelper.canMarkPlayed(item)) {
             if (userData.Played) {
@@ -107,7 +113,7 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
         }
     }
 
-        var tooltipFavorite = globalize.translate('Favorite');
+    const tooltipFavorite = globalize.translate('Favorite');
     if (userData.IsFavorite) {
         html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style);
     } else {
@@ -115,13 +121,13 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     }
 
     return html;
-    }
+}
 
-    function markFavorite(link) {
+function markFavorite(link) {
-        var id = link.getAttribute('data-itemid');
+    const id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
+    const serverId = link.getAttribute('data-serverid');
 
-        var markAsFavorite = !link.classList.contains('btnUserDataOn');
+    const markAsFavorite = !link.classList.contains('btnUserDataOn');
 
     favorite(id, serverId, markAsFavorite);
 
@@ -130,11 +136,11 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     } else {
         link.classList.remove('btnUserDataOn');
     }
-    }
+}
 
-    function markLike(link) {
+function markLike(link) {
-        var id = link.getAttribute('data-itemid');
+    const id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
+    const serverId = link.getAttribute('data-serverid');
 
     if (!link.classList.contains('btnUserDataOn')) {
         likes(id, serverId, true);
@@ -147,11 +153,11 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     }
 
     link.parentNode.querySelector('.btnDislike').classList.remove('btnUserDataOn');
-    }
+}
 
-    function markDislike(link) {
+function markDislike(link) {
-        var id = link.getAttribute('data-itemid');
+    const id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
+    const serverId = link.getAttribute('data-serverid');
 
     if (!link.classList.contains('btnUserDataOn')) {
         likes(id, serverId, false);
@@ -164,11 +170,11 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     }
 
     link.parentNode.querySelector('.btnLike').classList.remove('btnUserDataOn');
-    }
+}
 
-    function markPlayed(link) {
+function markPlayed(link) {
-        var id = link.getAttribute('data-itemid');
+    const id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
+    const serverId = link.getAttribute('data-serverid');
 
     if (!link.classList.contains('btnUserDataOn')) {
         played(id, serverId, true);
@@ -179,36 +185,35 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
 
         link.classList.remove('btnUserDataOn');
     }
-    }
+}
 
-    function likes(id, serverId, isLiked) {
+function likes(id, serverId, isLiked) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
     return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
-    }
+}
 
-    function played(id, serverId, isPlayed) {
+function played(id, serverId, isPlayed) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
 
-        var method = isPlayed ? 'markPlayed' : 'markUnplayed';
+    const method = isPlayed ? 'markPlayed' : 'markUnplayed';
 
     return apiClient[method](apiClient.getCurrentUserId(), id, new Date());
-    }
+}
 
-    function favorite(id, serverId, isFavorite) {
+function favorite(id, serverId, isFavorite) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
 
     return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
-    }
+}
 
-    function clearLike(id, serverId) {
+function clearLike(id, serverId) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
 
     return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
-    }
+}
 
-    return {
+export default {
     fill: fill,
     destroy: destroy,
     getIconsHtml: getIconsHtml
-    };
+};
-});

src/components/viewSettings/viewSettings.js

@@ -1,60 +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';
 
-    layoutManager = layoutManager.default || layoutManager;
+function onSubmit(e) {
-
-    function onSubmit(e) {
     e.preventDefault();
     return false;
-    }
+}
 
-    function initEditor(context, settings) {
+function initEditor(context, settings) {
     context.querySelector('form').addEventListener('submit', onSubmit);
 
-        var elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+    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;
+        elem.querySelector('input').checked = settings[elem.getAttribute('data-settingname')] || false;
     }
 
     context.querySelector('.selectImageType').value = settings.imageType || 'primary';
-    }
+}
 
-    function saveValues(context, settings, settingsKey) {
+function saveValues(context, settings, settingsKey) {
-        var elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+    const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
-        for (var i = 0, length = elems.length; i < length; i++) {
+    for (const elem of elems) {
-            userSettings.set(settingsKey + '-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input').checked);
+        userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked);
     }
 
     userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
-    }
+}
 
-    function centerFocus(elem, horiz, on) {
+function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
+    import('scrollHelper').then(({default: scrollHelper}) => {
-            scrollHelper = scrollHelper.default || scrollHelper;
+        const fn = on ? 'on' : 'off';
-            var fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
-    }
+}
 
-    function showIfAllowed(context, selector, visible) {
+function showIfAllowed(context, selector, visible) {
-        var elem = context.querySelector(selector);
+    const elem = context.querySelector(selector);
 
     if (visible && !elem.classList.contains('hiddenFromViewSettings')) {
         elem.classList.remove('hide');
     } else {
         elem.classList.add('hide');
     }
+}
+
+class ViewSettings {
+    constructor() {
     }
-
+    show(options) {
-    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
                 };
@@ -65,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>';
@@ -81,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');
                     }
                 }
 
@@ -107,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', {}));
 
@@ -130,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') {

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.js

@@ -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>
@@ -262,7 +262,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="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">';

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>
@@ -184,7 +184,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/general.html

@@ -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

@@ -8,7 +8,7 @@ function populateHistory(packageInfo, page) {
     const length = Math.min(packageInfo.versions.length, 10);
 
     for (let i = 0; i < length; i++) {
-        let version = packageInfo.versions[i];
+        const version = packageInfo.versions[i];
         html += '<h2 style="margin:.5em 0;">' + version.version + '</h2>';
         html += '<div style="margin-bottom:1.5em;">' + version.changelog + '</div>';
     }

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

@@ -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

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

@@ -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

@@ -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/usernew.html

@@ -49,7 +49,7 @@
 
                 <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/userparentalcontrol.html

@@ -30,7 +30,7 @@
                 <div class="verticalSection" style="margin-bottom:2em;">
                     <div class="detailSectionHeader sectionTitleContainer">
                         <h2 class="sectionTitle">${LabelBlockContentWithTags}</h2>
-                        <button is="emby-button" type="button" class="fab btnAddBlockedTag submit" style="margin-left:1em;" title="${ButtonAdd}">
+                        <button is="emby-button" type="button" class="fab btnAddBlockedTag submit" style="margin-left:1em;" title="${Add}">
                             <span class="material-icons add"></span>
                         </button>
                     </div>
@@ -40,7 +40,7 @@
                 <div class="accessScheduleSection verticalSection" style="margin-bottom:2em;">
                     <div class="sectionTitleContainer">
                         <h2 class="sectionTitle">${HeaderAccessSchedule}</h2>
-                        <button is="emby-button" type="button" class="fab btnAddSchedule submit" style="margin-left:1em;" title="${ButtonAdd}">
+                        <button is="emby-button" type="button" class="fab btnAddSchedule submit" style="margin-left:1em;" title="${Add}">
                             <span class="material-icons add"></span>
                         </button>
                     </div>
@@ -51,7 +51,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/users/userpassword.html

@@ -29,7 +29,7 @@
                         </div>
                         <br />
                         <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>
                             <button is="emby-button" type="button" id="btnResetPassword" class="raised button-cancel block hide">
                                 <span>${ButtonResetPassword}</span>
                             </button>
@@ -58,7 +58,7 @@
                         </div>
                         <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" id="btnResetEasyPassword" class="raised button-cancel block hide">
                                 <span>${ButtonResetEasyPassword}</span>

src/controllers/itemDetails/index.js

@@ -374,7 +374,7 @@ import 'emby-select';
     }
 
     function getArtistLinksHtml(artists, serverId, context) {
-        let html = [];
+        const html = [];
 
         for (const artist of artists) {
             const href = appRouter.getRouteUrl(artist, {

src/controllers/livetv/livetvsuggested.js

@@ -1,38 +1,45 @@
-define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize', 'libraryBrowser', 'mainTabsManager', 'cardBuilder', 'apphost', 'imageLoader', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (layoutManager, userSettings, inputManager, loading, globalize, libraryBrowser, mainTabsManager, cardBuilder, appHost, imageLoader) {
+import layoutManager from 'layoutManager';
-    'use strict';
+import * as userSettings from 'userSettings';
+import inputManager from 'inputManager';
+import loading from 'loading';
+import globalize from 'globalize';
+import * as mainTabsManager from 'mainTabsManager';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import 'scrollStyles';
+import 'emby-itemscontainer';
+import 'emby-tabs';
+import 'emby-button';
 
-    loading = loading.default || loading;
+function enableScrollX() {
-    layoutManager = layoutManager.default || layoutManager;
-
-    function enableScrollX() {
     return !layoutManager.desktop;
-    }
+}
 
-    function getBackdropShape() {
+function getBackdropShape() {
     if (enableScrollX()) {
         return 'overflowBackdrop';
     }
     return 'backdrop';
-    }
+}
 
-    function getPortraitShape() {
+function getPortraitShape() {
     if (enableScrollX()) {
         return 'overflowPortrait';
     }
     return 'portrait';
-    }
+}
 
-    function getLimit() {
+function getLimit() {
     if (enableScrollX()) {
         return 12;
     }
 
     return 9;
-    }
+}
 
-    function loadRecommendedPrograms(page) {
+function loadRecommendedPrograms(page) {
     loading.show();
-        var limit = getLimit();
+    let limit = getLimit();
 
     if (enableScrollX()) {
         limit *= 2;
@@ -53,13 +60,13 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
         });
         loading.hide();
 
-            require(['autoFocuser'], function (autoFocuser) {
+        import('autoFocuser').then(({default: autoFocuser}) => {
             autoFocuser.autoFocus(page);
         });
     });
-    }
+}
 
-    function reload(page, enableFullRender) {
+function reload(page, enableFullRender) {
     if (enableFullRender) {
         loadRecommendedPrograms(page);
         ApiClient.getLiveTvPrograms({
@@ -130,10 +137,10 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
             });
         });
     }
-    }
+}
 
-    function renderItems(page, items, sectionClass, overlayButton, cardOptions) {
+function renderItems(page, items, sectionClass, overlayButton, cardOptions) {
-        var html = cardBuilder.getCardsHtml(Object.assign({
+    const html = cardBuilder.getCardsHtml(Object.assign({
         items: items,
         preferThumb: 'auto',
         inheritThumb: false,
@@ -152,12 +159,12 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
         showAirTime: true,
         showAirDateTime: true
     }, cardOptions || {}));
-        var elem = page.querySelector('.' + sectionClass);
+    const elem = page.querySelector('.' + sectionClass);
     elem.innerHTML = html;
     imageLoader.lazyChildren(elem);
-    }
+}
 
-    function getTabs() {
+function getTabs() {
     return [{
         name: globalize.translate('Programs')
     }, {
@@ -171,9 +178,9 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
     }, {
         name: globalize.translate('TabSeries')
     }];
-    }
+}
 
-    function setScrollClasses(elem, scrollX) {
+function setScrollClasses(elem, scrollX) {
     if (scrollX) {
         elem.classList.add('hiddenScrollX');
 
@@ -189,17 +196,17 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
         elem.classList.remove('scrollX');
         elem.classList.add('vertical-wrap');
     }
-    }
+}
 
-    function getDefaultTabIndex(folderId) {
+function getDefaultTabIndex(folderId) {
     if (userSettings.get('landing-' + folderId) === 'guide') {
         return 1;
     }
 
     return 0;
-    }
+}
 
-    return function (view, params) {
+export default function (view, params) {
     function enableFullRender() {
         return new Date().getTime() - lastFullRender > 3e5;
     }
@@ -209,7 +216,7 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
     }
 
     function onTabChange(evt) {
-            var previousTabController = tabControllers[parseInt(evt.detail.previousIndex)];
+        const previousTabController = tabControllers[parseInt(evt.detail.previousIndex)];
 
         if (previousTabController && previousTabController.onHide) {
             previousTabController.onHide();
@@ -227,48 +234,47 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
     }
 
     function getTabController(page, index, callback) {
-            var depends = [];
+        let depends;
 
         // TODO int is a little hard to read
         switch (index) {
             case 0:
+                depends = 'controllers/livetv/livetvsuggested';
                 break;
 
             case 1:
-                    depends.push('controllers/livetv/livetvguide');
+                depends = 'controllers/livetv/livetvguide';
                 break;
 
             case 2:
-                    depends.push('controllers/livetv/livetvchannels');
+                depends = 'controllers/livetv/livetvchannels';
                 break;
 
             case 3:
-                    depends.push('controllers/livetv/livetvrecordings');
+                depends = 'controllers/livetv/livetvrecordings';
                 break;
 
             case 4:
-                    depends.push('controllers/livetv/livetvschedule');
+                depends = 'controllers/livetv/livetvschedule';
                 break;
 
             case 5:
-                    depends.push('controllers/livetv/livetvseriestimers');
+                depends = 'controllers/livetv/livetvseriestimers';
                 break;
         }
 
-            require(depends, function (controllerFactory) {
+        import(depends).then(({default: controllerFactory}) => {
-                controllerFactory = controllerFactory.default || controllerFactory;
+            let tabContent;
 
-                var tabContent;
+            if (index === 0) {
-
+                tabContent = view.querySelector(`.pageTabContent[data-index="${index}"]`);
-                if (index == 0) {
-                    tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
                 self.tabContent = tabContent;
             }
 
-                var controller = tabControllers[index];
+            let controller = tabControllers[index];
 
             if (!controller) {
-                    tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
+                tabContent = view.querySelector(`.pageTabContent[data-index="${index}"]`);
 
                 if (index === 0) {
                     controller = self;
@@ -304,7 +310,7 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
         getTabController(page, index, function (controller) {
             initialTabIndex = null;
 
-                if (renderedTabs.indexOf(index) == -1) {
+            if (renderedTabs.indexOf(index) === -1) {
                 if (index === 1) {
                     renderedTabs.push(index);
                 }
@@ -325,13 +331,13 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
         }
     }
 
-        var isViewRestored;
+    let isViewRestored;
-        var self = this;
+    const self = this;
-        var currentTabIndex = parseInt(params.tab || getDefaultTabIndex('livetv'));
+    let currentTabIndex = parseInt(params.tab || getDefaultTabIndex('livetv'));
-        var initialTabIndex = currentTabIndex;
+    let initialTabIndex = currentTabIndex;
-        var lastFullRender = 0;
+    let lastFullRender = 0;
     [].forEach.call(view.querySelectorAll('.sectionTitleTextButton-programs'), function (link) {
-            var href = link.href;
+        const href = link.href;
 
         if (href) {
             link.href = href + '&serverId=' + ApiClient.serverId();
@@ -339,16 +345,16 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
     });
 
     self.initTab = function () {
-            var tabContent = view.querySelector(".pageTabContent[data-index='0']");
+        const tabContent = view.querySelector('.pageTabContent[data-index="0"]');
-            var containers = tabContent.querySelectorAll('.itemsContainer');
+        const containers = tabContent.querySelectorAll('.itemsContainer');
 
-            for (var i = 0, length = containers.length; i < length; i++) {
+        for (let i = 0, length = containers.length; i < length; i++) {
             setScrollClasses(containers[i], enableScrollX());
         }
     };
 
     self.renderTab = function () {
-            var tabContent = view.querySelector(".pageTabContent[data-index='0']");
+        const tabContent = view.querySelector('.pageTabContent[data-index="0"]');
 
         if (enableFullRender()) {
             reload(tabContent, true);
@@ -358,9 +364,9 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
         }
     };
 
-        var currentTabController;
+    let currentTabController;
-        var tabControllers = [];
+    const tabControllers = [];
-        var renderedTabs = [];
+    const renderedTabs = [];
     view.addEventListener('viewbeforeshow', function (evt) {
         isViewRestored = evt.detail.isRestored;
         initTabs();
@@ -374,19 +380,18 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
 
         inputManager.on(window, onInputCommand);
     });
-        view.addEventListener('viewbeforehide', function (e) {
+    view.addEventListener('viewbeforehide', function () {
         if (currentTabController && currentTabController.onHide) {
             currentTabController.onHide();
         }
 
         inputManager.off(window, onInputCommand);
     });
-        view.addEventListener('viewdestroy', function (evt) {
+    view.addEventListener('viewdestroy', function () {
         tabControllers.forEach(function (tabController) {
             if (tabController.destroy) {
                 tabController.destroy();
             }
         });
     });
-    };
+}
-});

src/controllers/livetvsettings.html

@@ -94,7 +94,7 @@
                 </div>
                 <br />
                 <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>
             </form>
         </div>

src/controllers/livetvstatus.html

@@ -7,7 +7,7 @@
                         <h2 class="sectionTitle sectionTitle-cards">
                             <span>${HeaderTunerDevices}</span>
                         </h2>
-                        <button is="emby-button" type="button" class="fab btnAddDevice submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAdd}">
+                        <button is="emby-button" type="button" class="fab btnAddDevice submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
                             <span class="material-icons add"></span>
                         </button>
                         <a is="emby-linkbutton" rel="noopener noreferrer" style="margin-left:2em!important;" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/live-tv/index.html">${Help}</a>
@@ -20,7 +20,7 @@
                 <div class="verticalSection">
                     <div class="sectionTitleContainer">
                         <h2 class="sectionTitle">${HeaderGuideProviders}</h2>
-                        <button is="emby-button" type="button" class="fab btnAddProvider submit" style="margin-left:1em;" title="${ButtonAdd}">
+                        <button is="emby-button" type="button" class="fab btnAddProvider submit" style="margin-left:1em;" title="${Add}">
                             <span class="material-icons add"></span>
                         </button>
                     </div>

src/controllers/livetvstatus.js

@@ -15,12 +15,10 @@ import 'emby-button';
 const enableFocusTransform = !browser.slow && !browser.edge;
 
 function getDeviceHtml(device) {
-    let padderClass;
+    const padderClass = 'cardPadder-backdrop';
+    let cssClass = 'card scalableCard backdropCard backdropCard-scalable';
+    const cardBoxCssClass = 'cardBox visualCardBox';
     let html = '';
-    let cssClass = 'card scalableCard';
-    let cardBoxCssClass = 'cardBox visualCardBox';
-    cssClass += ' backdropCard backdropCard-scalable';
-    padderClass = 'cardPadder-backdrop';
 
     // TODO move card creation code to Card component
 

src/controllers/livetvtuner.html

@@ -67,7 +67,7 @@
                 <input type="hidden" class="fldDeviceId" />
                 <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();">
                         <span>${ButtonCancel}</span>

src/controllers/movies/moviesrecommended.js

@@ -227,7 +227,7 @@ import 'emby-button';
         return [{
             name: globalize.translate('Movies')
         }, {
-            name: globalize.translate('TabSuggestions')
+            name: globalize.translate('Suggestions')
         }, {
             name: globalize.translate('TabTrailers')
         }, {

src/controllers/music/musicrecommended.js

@@ -104,7 +104,6 @@ import 'flexStyles';
             }
 
             var itemsContainer = elem.querySelector('.itemsContainer');
-
             itemsContainer.innerHTML = cardBuilder.getCardsHtml({
                 items: result.Items,
                 showUnplayedIndicator: false,
@@ -178,13 +177,13 @@ import 'flexStyles';
 
     function getTabs() {
         return [{
-            name: globalize.translate('TabSuggestions')
+            name: globalize.translate('Suggestions')
         }, {
             name: globalize.translate('TabAlbums')
         }, {
             name: globalize.translate('TabAlbumArtists')
         }, {
-            name: globalize.translate('TabArtists')
+            name: globalize.translate('Artists')
         }, {
             name: globalize.translate('TabPlaylists')
         }, {

src/controllers/playback/queue/index.html

@@ -30,7 +30,7 @@
 
                     <div class="nowPlayingInfoButtons">
 
-                        <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
+                        <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${Repeat}"
                             data-command="SetRepeatMode">
                             <span class="material-icons repeat"></span>
                         </button>
@@ -85,7 +85,7 @@
                             <span class="material-icons shuffle"></span>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
+                        <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${Repeat}"
                             data-command="SetRepeatMode">
                             <span class="material-icons repeat"></span>
                         </button>
@@ -132,7 +132,7 @@
                             <button is="paper-icon-button-light" class="btnGoHome btnCommand autoSize" title="${ButtonHome}" data-command="GoHome">
                                 <span class="material-icons home"></span>
                             </button>
-                            <button is="paper-icon-button-light" class="btnShowSearch btnCommand autoSize" title="${ButtonSearch}" data-command="GoToSearch">
+                            <button is="paper-icon-button-light" class="btnShowSearch btnCommand autoSize" title="${Search}" data-command="GoToSearch">
                                 <span class="material-icons search"></span>
                             </button>
                             <button is="paper-icon-button-light" class="bthShowSettings btnCommand autoSize" title="${ButtonSettings}" data-command="GoToSettings">
@@ -180,10 +180,10 @@
                 <button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist hide" title="${ButtonTogglePlaylist}">
                     <span class="material-icons queue_music"></span>
                 </button>
-                <button is="paper-icon-button-light" class="btnSavePlaylist hide" title="${ButtonSave}">
+                <button is="paper-icon-button-light" class="btnSavePlaylist hide" title="${Save}">
                     <span class="material-icons save"></span>
                 </button>
-                <button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title="${ButtonToggleContextMenu}">
+                <button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title="${ButtonMore}">
                     <span class="material-icons more_vert"></span>
                 </button>
             </div>

src/controllers/playback/video/index.html

@@ -1,5 +1,4 @@
 <div id="videoOsdPage" data-role="page" class="page libraryPage" data-backbutton="true">
-    <div class="pageContainer flex"></div>
     <div class="upNextContainer hide"></div>
     <div class="videoOsdBottom videoOsdBottom-maincontrols">
         <div class="osdPoster"></div>

src/controllers/playback/video/index.js

@@ -172,9 +172,7 @@ import 'css!assets/css/videoosd';
             }
 
             setTitle(displayItem, parentName);
-            let titleElement;
+            const titleElement = view.querySelector('.osdTitle');
-            const osdTitle = view.querySelector('.osdTitle');
-            titleElement = osdTitle;
             let displayName = itemHelper.getDisplayName(displayItem, {
                 includeParentInfo: displayItem.Type !== 'Program',
                 includeIndexNumber: displayItem.Type !== 'Program'
@@ -1619,7 +1617,7 @@ import 'css!assets/css/videoosd';
             const item = currentItem;
 
             if (item && item.Chapters && item.Chapters.length && item.Chapters[0].ImageTag) {
-                let html = getChapterBubbleHtml(connectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks);
+                const html = getChapterBubbleHtml(connectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks);
 
                 if (html) {
                     return html;

src/controllers/search.html

@@ -1,4 +1,4 @@
-<div id="searchPage" data-role="page" class="page libraryPage allLibraryPage noSecondaryNavPage" data-title="${ButtonSearch}" data-backbutton="true">
+<div id="searchPage" data-role="page" class="page libraryPage allLibraryPage noSecondaryNavPage" data-title="${Search}" data-backbutton="true">
     <div class="padded-left padded-right searchFields"></div>
     <div class="searchResults padded-bottom-page padded-top"></div>
 </div>

src/controllers/shows/tvrecommended.js

@@ -19,7 +19,7 @@ import 'emby-button';
         return [{
             name: globalize.translate('TabShows')
         }, {
-            name: globalize.translate('TabSuggestions')
+            name: globalize.translate('Suggestions')
         }, {
             name: globalize.translate('TabLatest')
         }, {

src/controllers/user/display/index.html

@@ -1,4 +1,4 @@
-<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderDisplay}" data-backbutton="true">
+<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${Display}" data-backbutton="true">
     <div class="settingsContainer padded-left padded-right padded-bottom-page">
     </div>
 </div>

src/controllers/user/menu/index.html

@@ -16,7 +16,7 @@
                     <div class="listItem">
                         <span class="material-icons listItemIcon listItemIcon-transparent tv"></span>
                         <div class="listItemBody">
-                            <div class="listItemBodyText">${HeaderDisplay}</div>
+                            <div class="listItemBodyText">${Display}</div>
                         </div>
                     </div>
                 </a>

src/controllers/user/profile/index.html

@@ -32,7 +32,7 @@
                 </div>
                 <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" id="btnResetPassword" class="raised cancel block hide">
                         <span>${ButtonResetPassword}</span>
@@ -57,7 +57,7 @@
                 </div>
                 <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" id="btnResetEasyPassword" class="raised cancel block hide">
                         <span>${ButtonResetEasyPassword}</span>

src/controllers/wizard/library.html

@@ -3,7 +3,7 @@
         <div class="ui-corner-all ui-shadow wizardContent">
             <div>
                 <h1 style="display:inline-block;">${HeaderSetupLibrary}</h1>
-                <a href="https://docs.jellyfin.org/general/server/libraries.html" rel="noopener noreferrer" target="_blank" class="clearLink" style="margin-top:-10px;display:inline-block;vertical-align:middle;margin-left:2em;"><button is="emby-button" type="button" class="raised"><span class="material-icons info"></span><span>${ButtonHelp}</span></button></a>
+                <a href="https://docs.jellyfin.org/general/server/libraries.html" rel="noopener noreferrer" target="_blank" class="clearLink" style="margin-top:-10px;display:inline-block;vertical-align:middle;margin-left:2em;"><button is="emby-button" type="button" class="raised"><span class="material-icons info"></span><span>${Help}</span></button></a>
             </div>
             <br />
             <div id="divVirtualFolders"></div>

src/elements/emby-checkbox/emby-checkbox.js

@@ -5,7 +5,7 @@ import 'webcomponents';
 
 /* eslint-disable indent */
 
-    let EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
+    const EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
 
     function onKeyDown(e) {
         // Don't submit form on enter
@@ -26,7 +26,7 @@ import 'webcomponents';
     const enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
 
     function forceRefresh(loading) {
-        let elem = this.parentNode;
+        const elem = this.parentNode;
 
         elem.style.webkitAnimationName = 'repaintChrome';
         elem.style.webkitAnimationDelay = (loading === true ? '500ms' : '');

src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js

@@ -40,7 +40,7 @@ import 'webcomponents';
         }
     }
 
-    let EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing);
+    const EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing);
 
     EmbyItemRefreshIndicatorPrototype.createdCallback = function () {
         // base method

src/elements/emby-itemscontainer/emby-itemscontainer.js

@@ -18,7 +18,7 @@ import 'webcomponents';
 
     function onClick(e) {
         const itemsContainer = this;
-        let multiSelect = itemsContainer.multiSelect;
+        const multiSelect = itemsContainer.multiSelect;
 
         if (multiSelect) {
             if (multiSelect.onContainerClick.call(itemsContainer, e) === false) {
@@ -164,7 +164,7 @@ import 'webcomponents';
     }
 
     function getEventsToMonitor(itemsContainer) {
-        let monitor = itemsContainer.getAttribute('data-monitor');
+        const monitor = itemsContainer.getAttribute('data-monitor');
         if (monitor) {
             return monitor.split(',');
         }
@@ -356,7 +356,7 @@ import 'webcomponents';
     ItemsContainerPrototype.resume = function (options) {
         this.paused = false;
 
-        let refreshIntervalEndTime = this.refreshIntervalEndTime;
+        const refreshIntervalEndTime = this.refreshIntervalEndTime;
         if (refreshIntervalEndTime) {
             const remainingMs = refreshIntervalEndTime - new Date().getTime();
             if (remainingMs > 0 && !this.needsRefresh) {
@@ -395,7 +395,7 @@ import 'webcomponents';
             return;
         }
 
-        let timeout = this.refreshTimeout;
+        const timeout = this.refreshTimeout;
         if (timeout) {
             clearTimeout(timeout);
         }
@@ -434,7 +434,7 @@ import 'webcomponents';
     function onDataFetched(result) {
         const items = result.Items || result;
 
-        let parentContainer = this.parentContainer;
+        const parentContainer = this.parentContainer;
         if (parentContainer) {
             if (items.length) {
                 parentContainer.classList.remove('hide');

src/elements/emby-playstatebutton/emby-playstatebutton.js

@@ -75,7 +75,7 @@ import EmbyButtonPrototype from 'emby-button';
             button.title = globalize.translate('Played');
         }
 
-        let text = button.querySelector('.button-text');
+        const text = button.querySelector('.button-text');
         if (text) {
             text.innerHTML = button.title;
         }

src/elements/emby-progressbar/emby-progressbar.js

@@ -1,6 +1,6 @@
 /* eslint-disable indent */
 
-    let ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
+    const ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
 
     function onAutoTimeProgress() {
         const start = parseInt(this.getAttribute('data-starttime'));

src/elements/emby-progressring/emby-progressring.js

@@ -3,7 +3,7 @@ import 'webcomponents';
 
 /* eslint-disable indent */
 
-    let EmbyProgressRing = Object.create(HTMLDivElement.prototype);
+    const EmbyProgressRing = Object.create(HTMLDivElement.prototype);
 
     EmbyProgressRing.createdCallback = function () {
         this.classList.add('progressring');
@@ -79,7 +79,7 @@ import 'webcomponents';
     };
 
     EmbyProgressRing.detachedCallback = function () {
-        let observer = this.observer;
+        const observer = this.observer;
 
         if (observer) {
             // later, you can stop observing

src/elements/emby-radio/emby-radio.js

@@ -4,7 +4,7 @@ import 'webcomponents';
 
 /* eslint-disable indent */
 
-    let EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
+    const EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
 
     function onKeyDown(e) {
         // Don't submit form on enter
@@ -35,7 +35,7 @@ import 'webcomponents';
 
         this.classList.add('mdl-radio__button');
 
-        let labelElement = this.parentNode;
+        const labelElement = this.parentNode;
         labelElement.classList.add('mdl-radio');
         labelElement.classList.add('mdl-js-radio');
         labelElement.classList.add('mdl-js-ripple-effect');
@@ -43,7 +43,7 @@ import 'webcomponents';
             labelElement.classList.add('show-focus');
         }
 
-        let labelTextElement = labelElement.querySelector('span');
+        const labelTextElement = labelElement.querySelector('span');
 
         labelTextElement.classList.add('radioButtonLabel');
         labelTextElement.classList.add('mdl-radio__label');

src/elements/emby-scrollbuttons/emby-scrollbuttons.js

@@ -118,7 +118,7 @@ const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
     }
 
     function onScrollButtonClick(e) {
-        let scroller = this.parentNode.nextSibling;
+        const scroller = this.parentNode.nextSibling;
 
         const direction = this.getAttribute('data-direction');
         const scrollSize = getScrollSize(scroller);
@@ -161,7 +161,7 @@ const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
         const parent = this.scroller;
         this.scroller = null;
 
-        let scrollHandler = this.scrollHandler;
+        const scrollHandler = this.scrollHandler;
         if (parent && scrollHandler) {
             parent.removeScrollEventListener(scrollHandler, {
                 capture: false,

src/elements/emby-scroller/emby-scroller.js

@@ -9,7 +9,7 @@ import 'css!./emby-scroller';
 
 /* eslint-disable indent */
 
-    let ScrollerPrototype = Object.create(HTMLDivElement.prototype);
+    const ScrollerPrototype = Object.create(HTMLDivElement.prototype);
 
     ScrollerPrototype.createdCallback = function () {
         this.classList.add('emby-scroller');

src/elements/emby-slider/emby-slider.js

@@ -8,7 +8,7 @@ import 'emby-input';
 
 /* eslint-disable indent */
 
-    let EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
+    const EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
 
     let supportsValueSetOverride = false;
 
@@ -94,7 +94,7 @@ import 'emby-input';
         // Keep only one per slider frame request
         cancelAnimationFrame(range.updateValuesFrame);
         range.updateValuesFrame = requestAnimationFrame(function () {
-            let backgroundLower = range.backgroundLower;
+            const backgroundLower = range.backgroundLower;
 
             if (backgroundLower) {
                 let fraction = (value - range.min) / (range.max - range.min);

src/elements/emby-tabs/emby-tabs.js

@@ -8,7 +8,7 @@ import 'scrollStyles';
 
 /* eslint-disable indent */
 
-    let EmbyTabs = Object.create(HTMLDivElement.prototype);
+    const EmbyTabs = Object.create(HTMLDivElement.prototype);
     const buttonClass = 'emby-tab-button';
     const activeButtonClass = buttonClass + '-active';
 
@@ -21,7 +21,7 @@ import 'scrollStyles';
     }
 
     function removeActivePanelClass(tabs, index) {
-        let tabPanel = getTabPanel(tabs, index);
+        const tabPanel = getTabPanel(tabs, index);
         if (tabPanel) {
             tabPanel.classList.remove('is-active');
         }
@@ -52,7 +52,7 @@ import 'scrollStyles';
             removeActivePanelClass(tabs, previousIndex);
         }
 
-        let newPanel = getTabPanel(tabs, index);
+        const newPanel = getTabPanel(tabs, index);
 
         if (newPanel) {
             // animate new panel ?
@@ -225,7 +225,7 @@ import 'scrollStyles';
                 }
             }));
 
-            let currentTabButton = tabButtons[current];
+            const currentTabButton = tabButtons[current];
             setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false);
 
             if (current !== selected && currentTabButton) {

src/plugins/bookPlayer/plugin.js

@@ -27,16 +27,16 @@ export class BookPlayer {
         this._loaded = false;
 
         loading.show();
-        let elem = this.createMediaElement();
+        const elem = this.createMediaElement();
         return this.setCurrentSrc(elem, options);
     }
 
     stop() {
         this.unbindEvents();
 
-        let elem = this._mediaElement;
+        const elem = this._mediaElement;
-        let tocElement = this._tocElement;
+        const tocElement = this._tocElement;
-        let rendition = this._rendition;
+        const rendition = this._rendition;
 
         if (elem) {
             dialogHelper.close(elem);
@@ -93,11 +93,11 @@ export class BookPlayer {
     }
 
     onWindowKeyUp(e) {
-        let key = keyboardnavigation.getKeyName(e);
+        const key = keyboardnavigation.getKeyName(e);
 
         // TODO: depending on the event this can be the document or the rendition itself
-        let rendition = this._rendition || this;
+        const rendition = this._rendition || this;
-        let book = rendition.book;
+        const book = rendition.book;
 
         if (this._loaded === false) return;
         switch (key) {
@@ -125,8 +125,8 @@ export class BookPlayer {
 
     onTouchStart(e) {
         // TODO: depending on the event this can be the document or the rendition itself
-        let rendition = this._rendition || this;
+        const rendition = this._rendition || this;
-        let book = rendition.book;
+        const book = rendition.book;
 
         // check that the event is from the book or the document
         if (!book || this._loaded === false) return;
@@ -134,7 +134,8 @@ export class BookPlayer {
         // epubjs stores pages off the screen or something for preloading
         // get the modulus of the touch event to account for the increased width
         if (!e.touches || e.touches.length === 0) return;
-        let touch = e.touches[0].clientX % dom.getWindowSize().innerWidth;
+
+        const touch = e.touches[0].clientX % dom.getWindowSize().innerWidth;
         if (touch < dom.getWindowSize().innerWidth / 2) {
             book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
         } else {
@@ -147,7 +148,7 @@ export class BookPlayer {
     }
 
     bindMediaElementEvents() {
-        let elem = this._mediaElement;
+        const elem = this._mediaElement;
 
         elem.addEventListener('close', this.onDialogClosed, {once: true});
         elem.querySelector('.btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true});
@@ -166,7 +167,7 @@ export class BookPlayer {
     }
 
     unbindMediaElementEvents() {
-        let elem = this._mediaElement;
+        const elem = this._mediaElement;
 
         elem.removeEventListener('close', this.onDialogClosed);
         elem.querySelector('.btnBookplayerExit').removeEventListener('click', this.onDialogClosed);
@@ -231,7 +232,7 @@ export class BookPlayer {
     }
 
     setCurrentSrc(elem, options) {
-        let item = options.items[0];
+        const item = options.items[0];
         this._currentItem = item;
         this.streamInfo = {
             started: true,
@@ -241,25 +242,25 @@ export class BookPlayer {
             }
         };
 
-        let serverId = item.ServerId;
+        const serverId = item.ServerId;
-        let apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
         return new Promise((resolve, reject) => {
             import('epubjs').then(({default: epubjs}) => {
-                let downloadHref = apiClient.getItemDownloadUrl(item.Id);
+                const downloadHref = apiClient.getItemDownloadUrl(item.Id);
-                let book = epubjs(downloadHref, {openAs: 'epub'});
+                const book = epubjs(downloadHref, {openAs: 'epub'});
-                let rendition = book.renderTo(elem, {width: '100%', height: '97%'});
+                const rendition = book.renderTo(elem, {width: '100%', height: '97%'});
 
                 this._currentSrc = downloadHref;
                 this._rendition = rendition;
-                let cancellationToken = {
+                const cancellationToken = {
                     shouldCancel: false
                 };
 
                 this._cancellationToken = cancellationToken;
 
                 return rendition.display().then(() => {
-                    let epubElem = document.querySelector('.epub-container');
+                    const epubElem = document.querySelector('.epub-container');
                     epubElem.style.display = 'none';
 
                     this.bindEvents();

src/plugins/bookPlayer/tableOfContents.js

@@ -11,7 +11,7 @@ export default class TableOfContents {
     }
 
     destroy() {
-        let elem = this._elem;
+        const elem = this._elem;
         if (elem) {
             this.unbindEvents();
             dialogHelper.close(elem);
@@ -21,14 +21,14 @@ export default class TableOfContents {
     }
 
     bindEvents() {
-        let elem = this._elem;
+        const elem = this._elem;
 
         elem.addEventListener('close', this.onDialogClosed, {once: true});
         elem.querySelector('.btnBookplayerTocClose').addEventListener('click', this.onDialogClosed, {once: true});
     }
 
     unbindEvents() {
-        let elem = this._elem;
+        const elem = this._elem;
 
         elem.removeEventListener('close', this.onDialogClosed);
         elem.querySelector('.btnBookplayerTocClose').removeEventListener('click', this.onDialogClosed);
@@ -39,10 +39,10 @@ export default class TableOfContents {
     }
 
     replaceLinks(contents, f) {
-        let links = contents.querySelectorAll('a[href]');
+        const links = contents.querySelectorAll('a[href]');
 
         links.forEach((link) => {
-            let href = link.getAttribute('href');
+            const href = link.getAttribute('href');
 
             link.onclick = () => {
                 f(href);
@@ -52,9 +52,9 @@ export default class TableOfContents {
     }
 
     createMediaElement() {
-        let rendition = this._rendition;
+        const rendition = this._rendition;
 
-        let elem = dialogHelper.createDialog({
+        const elem = dialogHelper.createDialog({
             size: 'small',
             autoFocus: false,
             removeOnClose: true
@@ -69,7 +69,7 @@ export default class TableOfContents {
         rendition.book.navigation.forEach((chapter) => {
             tocHtml += '<li>';
             // Remove '../' from href
-            let link = chapter.href.startsWith('../') ? chapter.href.substr(3) : chapter.href;
+            const link = chapter.href.startsWith('../') ? chapter.href.substr(3) : chapter.href;
             tocHtml += `<a href="${rendition.book.path.directory + link}">${chapter.label}</a>`;
             tocHtml += '</li>';
         });
@@ -78,7 +78,7 @@ export default class TableOfContents {
         elem.innerHTML = tocHtml;
 
         this.replaceLinks(elem, (href) => {
-            let relative = rendition.book.path.relative(href);
+            const relative = rendition.book.path.relative(href);
             rendition.display(relative);
             this.destroy();
         });

src/plugins/experimentalWarnings/plugin.js

@@ -1,6 +1,8 @@
 define(['connectionManager', 'globalize', 'userSettings', 'apphost'], function (connectionManager, globalize, userSettings, appHost) {
     'use strict';
 
+    appHost = appHost.default || appHost;
+
     // TODO: Replace with date-fns
     // https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
     function getWeek(date) {

src/plugins/htmlVideoPlayer/plugin.js

@@ -105,7 +105,7 @@ function tryRemoveElement(elem) {
     }
 
     function hidePrePlaybackPage() {
-        let animatedPage = document.querySelector('.page:not(.hide)');
+        const animatedPage = document.querySelector('.page:not(.hide)');
         animatedPage.classList.add('hide');
         // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded
         document.body.classList.remove('force-scroll');
@@ -1299,7 +1299,7 @@ function tryRemoveElement(elem) {
                         }
 
                         let html = '';
-                        let cssClass = 'htmlvideoplayer';
+                        const cssClass = 'htmlvideoplayer';
 
                         // Can't autoplay in these browsers so we need to use the full controls, at least until playback starts
                         if (!appHost.supports('htmlvideoautoplay')) {

src/scripts/apploader.js

@@ -1,12 +1,10 @@
 (function() {
-    'use strict';
-
     function injectScriptElement(src, onload) {
         if (!src) {
             return;
         }
 
-        var script = document.createElement('script');
+        const script = document.createElement('script');
         if (self.dashboardVersion) {
             src += `?v=${self.dashboardVersion}`;
         }

src/scripts/autoThemes.js

@@ -3,6 +3,10 @@ import skinManager from 'skinManager';
 import connectionManager from 'connectionManager';
 import events from 'events';
 
+// Set the default theme when loading
+skinManager.setTheme(userSettings.theme());
+
+// Set the user's prefered theme when signing in
 events.on(connectionManager, 'localusersignedin', function (e, user) {
     skinManager.setTheme(userSettings.theme());
 });

src/scripts/datetime.js

@@ -24,7 +24,7 @@ import globalize from 'globalize';
 
         // parse strings, leading zeros into proper ints
         const a = [1, 2, 3, 4, 5, 6, 10, 11];
-        for (let i in a) {
+        for (const i in a) {
             d[a[i]] = parseInt(d[a[i]], 10);
         }
         d[7] = parseFloat(d[7]);