Merge remote-tracking branch 'upstream/master' into another-es6-pr

.eslintignore

@@ -2,4 +2,3 @@ node_modules
 dist
 .idea
 .vscode
-src/libraries

package.json

@@ -6,8 +6,8 @@
   "license": "GPL-2.0-or-later",
   "devDependencies": {
     "@babel/core": "^7.11.1",
-    "@babel/eslint-parser": "^7.11.0",
+    "@babel/eslint-parser": "^7.11.3",
-    "@babel/eslint-plugin": "^7.11.0",
+    "@babel/eslint-plugin": "^7.11.3",
     "@babel/plugin-proposal-class-properties": "^7.10.1",
     "@babel/plugin-proposal-private-methods": "^7.10.1",
     "@babel/plugin-transform-modules-amd": "^7.10.5",
@@ -17,7 +17,7 @@
     "babel-loader": "^8.0.6",
     "browser-sync": "^2.26.12",
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^4.2.0",
+    "css-loader": "^4.2.1",
     "cssnano": "^4.1.10",
     "del": "^5.1.0",
     "eslint": "^7.6.0",
@@ -63,7 +63,7 @@
     "fast-text-encoding": "^1.0.3",
     "flv.js": "^1.5.0",
     "headroom.js": "^0.11.0",
-    "hls.js": "^0.14.7",
+    "hls.js": "^0.14.8",
     "howler": "^2.2.0",
     "intersection-observer": "^0.11.0",
     "jellyfin-apiclient": "^1.4.1",
@@ -80,7 +80,7 @@
     "sortablejs": "^1.10.2",
     "swiper": "^5.4.5",
     "webcomponents.js": "^0.7.24",
-    "whatwg-fetch": "^3.3.1"
+    "whatwg-fetch": "^3.4.0"
   },
   "babel": {
     "presets": [
@@ -95,6 +95,7 @@
           "src/components/alert.js",
           "src/components/alphaPicker/alphaPicker.js",
           "src/components/appFooter/appFooter.js",
+          "src/components/apphost.js",
           "src/components/appRouter.js",
           "src/components/autoFocuser.js",
           "src/components/backdrop/backdrop.js",
@@ -113,6 +114,8 @@
           "src/components/filterdialog/filterdialog.js",
           "src/components/focusManager.js",
           "src/components/groupedcards.js",
+          "src/components/guide/guide.js",
+          "src/components/guide/guide-settings.js",
           "src/components/homeScreenSettings/homeScreenSettings.js",
           "src/components/homesections/homesections.js",
           "src/components/htmlMediaHelper.js",
@@ -126,6 +129,8 @@
           "src/components/itemHelper.js",
           "src/components/itemidentifier/itemidentifier.js",
           "src/components/itemMediaInfo/itemMediaInfo.js",
+          "src/components/itemsrefresher.js",
+          "src/components/layoutManager.js",
           "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
           "src/components/libraryoptionseditor/libraryoptionseditor.js",
           "src/components/listview/listview.js",
@@ -154,22 +159,36 @@
           "src/components/playlisteditor/playlisteditor.js",
           "src/components/playmenu.js",
           "src/components/prompt/prompt.js",
+          "src/components/recordingcreator/recordingbutton.js",
+          "src/components/recordingcreator/recordingcreator.js",
           "src/components/recordingcreator/seriesrecordingeditor.js",
           "src/components/recordingcreator/recordinghelper.js",
           "src/components/refreshdialog/refreshdialog.js",
+          "src/components/qualityOptions.js",
+          "src/components/remotecontrol/remotecontrol.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
+          "src/plugins/htmlAudioPlayer/plugin.js",
+          "src/plugins/chromecastPlayer/plugin.js",
+          "src/components/slideshow/slideshow.js",
+          "src/components/sortmenu/sortmenu.js",
           "src/plugins/htmlVideoPlayer/plugin.js",
+          "src/plugins/logoScreensaver/plugin.js",
+          "src/plugins/playAccessValidation/plugin.js",
           "src/components/search/searchfields.js",
           "src/components/search/searchresults.js",
           "src/components/settingshelper.js",
           "src/components/shortcuts.js",
+          "src/components/subtitleeditor/subtitleeditor.js",
+          "src/components/subtitlesync/subtitlesync.js",
           "src/components/subtitlesettings/subtitleappearancehelper.js",
           "src/components/subtitlesettings/subtitlesettings.js",
           "src/components/syncPlay/groupSelectionMenu.js",
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
+          "src/components/tabbedview/tabbedview.js",
+          "src/components/viewManager/viewManager.js",
           "src/components/tvproviders/schedulesdirect.js",
           "src/components/tvproviders/xmltv.js",
           "src/components/toast/toast.js",
@@ -198,13 +217,16 @@
           "src/controllers/music/musicplaylists.js",
           "src/controllers/music/musicrecommended.js",
           "src/controllers/music/songs.js",
-          "src/controllers/dashboard/mediaLibrary.js",
+          "src/controllers/dashboard/library.js",
           "src/controllers/dashboard/metadataImages.js",
           "src/controllers/dashboard/metadatanfo.js",
           "src/controllers/dashboard/networking.js",
           "src/controllers/dashboard/notifications/notification.js",
           "src/controllers/dashboard/notifications/notifications.js",
           "src/controllers/dashboard/playback.js",
+          "src/controllers/dashboard/plugins/add/index.js",
+          "src/controllers/dashboard/plugins/installed/index.js",
+          "src/controllers/dashboard/plugins/available/index.js",
           "src/controllers/dashboard/plugins/repositories/index.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtask.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtasks.js",
@@ -216,6 +238,8 @@
           "src/controllers/dashboard/users/userparentalcontrol.js",
           "src/controllers/dashboard/users/userpasswordpage.js",
           "src/controllers/dashboard/users/userprofilespage.js",
+          "src/controllers/home.js",
+          "src/controllers/list.js",
           "src/controllers/edititemmetadata.js",
           "src/controllers/favorites.js",
           "src/controllers/hometab.js",
@@ -230,6 +254,7 @@
           "src/controllers/playback/queue/index.js",
           "src/controllers/playback/video/index.js",
           "src/controllers/searchpage.js",
+          "src/controllers/livetv/livetvguide.js",
           "src/controllers/livetvtuner.js",
           "src/controllers/livetvstatus.js",
           "src/controllers/livetvguideprovider.js",
@@ -276,6 +301,9 @@
           "src/elements/emby-tabs/emby-tabs.js",
           "src/elements/emby-textarea/emby-textarea.js",
           "src/elements/emby-toggle/emby-toggle.js",
+          "src/libraries/screensavermanager.js",
+          "src/libraries/navdrawer/navdrawer.js",
+          "src/libraries/scroller.js",
           "src/plugins/backdropScreensaver/plugin.js",
           "src/plugins/bookPlayer/plugin.js",
           "src/plugins/bookPlayer/tableOfContents.js",
@@ -293,18 +321,24 @@
           "src/scripts/filesystem.js",
           "src/scripts/globalize.js",
           "src/scripts/imagehelper.js",
+          "src/scripts/itembynamedetailpage.js",
           "src/scripts/inputManager.js",
           "src/scripts/autoThemes.js",
           "src/scripts/themeManager.js",
           "src/scripts/keyboardNavigation.js",
+          "src/scripts/libraryMenu.js",
           "src/scripts/libraryBrowser.js",
+          "src/scripts/livetvcomponents.js",
           "src/scripts/mouseManager.js",
           "src/scripts/multiDownload.js",
           "src/scripts/playlists.js",
+          "src/scripts/scrollHelper.js",
+          "src/scripts/serverNotifications.js",
           "src/scripts/routes.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",
           "src/scripts/settings/webSettings.js",
+          "src/scripts/shell.js",
           "src/scripts/taskbutton.js",
           "src/scripts/themeLoader.js",
           "src/scripts/touchHelper.js"

src/assets/css/librarybrowser.css

@@ -236,12 +236,6 @@
     text-align: center;
 }
 
-.layout-desktop .searchTabButton,
-.layout-mobile .searchTabButton,
-.layout-tv .headerSearchButton {
-    display: none !important;
-}
-
 .mainDrawer-scrollContainer {
     padding-bottom: 10vh;
 }

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/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';
-    browser = browser.default || browser;
+import * as htmlMediaHelper from 'htmlMediaHelper';
+import * as webSettings from 'webSettings';
+import globalize from 'globalize';
 
 function getBaseProfileOptions(item) {
-        var disableHlsVideoAudioCodecs = [];
+    const disableHlsVideoAudioCodecs = [];
 
     if (item && htmlMediaHelper.enableHlsJsPlayer(item.RunTimeTicks, item.MediaType)) {
         if (browser.edge) {
@@ -22,33 +24,15 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
     };
 }
 
-    function getDeviceProfileForWindowsUwp(item) {
+function getDeviceProfile(item, options = {}) {
-        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);
-        }
-
     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);
             }
@@ -59,20 +43,20 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
 }
 
 function escapeRegExp(str) {
-        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1');
+    return str.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1');
 }
 
 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() {
-        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);
     }
 
@@ -80,8 +64,8 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
 }
 
 function getDeviceId() {
-        var key = '_deviceId2';
+    const key = '_deviceId2';
-        var deviceId = appSettings.get(key);
+    const deviceId = appSettings.get(key);
 
     if (deviceId) {
         return Promise.resolve(deviceId);
@@ -145,27 +129,10 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
         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() {
-        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';
 }
@@ -184,14 +151,14 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
 
 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);
 
@@ -217,8 +184,8 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
     }
 }
 
-    var supportedFeatures = function () {
+const supportedFeatures = function () {
-        var features = [];
+    const features = [];
 
     if (navigator.share) {
         features.push('sharing');
@@ -321,7 +288,7 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
     }
 }
 
-    var exitPromise;
+let exitPromise;
 
 /**
      * Ask user for exit
@@ -331,7 +298,7 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
         return;
     }
 
-        require(['actionsheet'], function (actionsheet) {
+    import('actionsheet').then(({default: actionsheet}) => {
         exitPromise = actionsheet.show({
             title: globalize.translate('MessageConfirmAppExit'),
             items: [
@@ -348,16 +315,16 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
     });
 }
 
-    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,15 +377,15 @@ 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 */
     hidden = 'hidden';
@@ -443,5 +409,4 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
     self.addEventListener('blur', onAppHidden);
 }
 
-    return appHost;
+export default appHost;
-});

src/components/collectionEditor/collectionEditor.js

@@ -200,7 +200,7 @@ import 'flexStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/dialogHelper/dialogHelper.js

@@ -354,7 +354,7 @@ import 'scrollStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

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,8 +1,9 @@
 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) {
     'use strict';
-    focusManager = focusManager.default || focusManager;
 
+    focusManager = focusManager.default || focusManager;
     appRouter = appRouter.default || appRouter;
+    layoutManager = layoutManager.default || layoutManager;
 
     function onSubmit(e) {
         e.preventDefault();
@@ -153,6 +154,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/guide/guide-settings.js

@@ -1,14 +1,21 @@
-define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import layoutManager from 'layoutManager';
+import scrollHelper from 'scrollHelper';
+import 'emby-checkbox';
+import 'emby-radio';
+import 'css!./../formdialog';
+import 'material-icons';
 
 function saveCategories(context, options) {
-        var categories = [];
+    const categories = [];
 
-        var chkCategorys = context.querySelectorAll('.chkCategory');
+    const chkCategorys = context.querySelectorAll('.chkCategory');
-        for (var i = 0, length = chkCategorys.length; i < length; i++) {
+    for (const chkCategory of chkCategorys) {
-            var type = chkCategorys[i].getAttribute('data-type');
+        const type = chkCategory.getAttribute('data-type');
 
-            if (chkCategorys[i].checked) {
+        if (chkCategory.checked) {
             categories.push(type);
         }
     }
@@ -23,70 +30,66 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
 }
 
 function loadCategories(context, options) {
-        var selectedCategories = options.categories || [];
+    const selectedCategories = options.categories || [];
 
-        var chkCategorys = context.querySelectorAll('.chkCategory');
+    const chkCategorys = context.querySelectorAll('.chkCategory');
-        for (var i = 0, length = chkCategorys.length; i < length; i++) {
+    for (const chkCategory of chkCategorys) {
-            var type = chkCategorys[i].getAttribute('data-type');
+        const type = chkCategory.getAttribute('data-type');
 
-            chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
+        chkCategory.checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
     }
 }
 
 function save(context) {
-        var i;
+    const chkIndicators = context.querySelectorAll('.chkIndicator');
-        var length;
 
-        var chkIndicators = context.querySelectorAll('.chkIndicator');
+    for (const chkIndicator of chkIndicators) {
-        for (i = 0, length = chkIndicators.length; i < length; i++) {
+        const type = chkIndicator.getAttribute('data-type');
-            var type = chkIndicators[i].getAttribute('data-type');
+        userSettings.set('guide-indicator-' + type, chkIndicator.checked);
-            userSettings.set('guide-indicator-' + type, chkIndicators[i].checked);
     }
 
     userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked);
     userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked);
 
-        var sortBys = context.querySelectorAll('.chkSortOrder');
+    const sortBys = context.querySelectorAll('.chkSortOrder');
-        for (i = 0, length = sortBys.length; i < length; i++) {
+    for (const sortBy of sortBys) {
-            if (sortBys[i].checked) {
+        if (sortBy.checked) {
-                userSettings.set('livetv-channelorder', sortBys[i].value);
+            userSettings.set('livetv-channelorder', sortBy.value);
             break;
         }
     }
 }
 
 function load(context) {
-        var i;
+    const chkIndicators = context.querySelectorAll('.chkIndicator');
-        var length;
 
-        var chkIndicators = context.querySelectorAll('.chkIndicator');
+    for (const chkIndicator of chkIndicators) {
-        for (i = 0, length = chkIndicators.length; i < length; i++) {
+        const type = chkIndicator.getAttribute('data-type');
-            var type = chkIndicators[i].getAttribute('data-type');
 
-            if (chkIndicators[i].getAttribute('data-default') === 'true') {
+        if (chkIndicator.getAttribute('data-default') === 'true') {
-                chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) !== 'false';
+            chkIndicator.checked = userSettings.get('guide-indicator-' + type) !== 'false';
         } else {
-                chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) === 'true';
+            chkIndicator.checked = userSettings.get('guide-indicator-' + type) === 'true';
         }
     }
 
     context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true';
     context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false';
 
-        var sortByValue = userSettings.get('livetv-channelorder') || 'Number';
+    const sortByValue = userSettings.get('livetv-channelorder') || 'Number';
 
-        var sortBys = context.querySelectorAll('.chkSortOrder');
+    const sortBys = context.querySelectorAll('.chkSortOrder');
-        for (i = 0, length = sortBys.length; i < length; i++) {
+    for (const sortBy of sortBys) {
-            sortBys[i].checked = sortBys[i].value === sortByValue;
+        sortBy.checked = sortBy.value === sortByValue;
     }
 }
 
 function showEditor(options) {
     return new Promise(function (resolve, reject) {
-            var settingsChanged = false;
+        let settingsChanged = false;
 
-            require(['text!./guide-settings.template.html'], function (template) {
+        import('text!./guide-settings.template.html').then(({ default: template }) => {
-                var dialogOptions = {
+            const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
             };
@@ -97,11 +100,11 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
                 dialogOptions.size = 'small';
             }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
             dlg.classList.add('formDialog');
 
-                var html = '';
+            let html = '';
 
             html += globalize.translateHtml(template, 'core');
 
@@ -141,7 +144,6 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
     });
 }
 
-    return {
+export default {
     show: showEditor
 };
-});

src/components/guide/guide.js

@@ -1,13 +1,33 @@
-define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', 'scrollHelper', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'playbackManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'dom', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-programcell', 'emby-button', 'paper-icon-button-light', 'emby-tabs', 'emby-scroller', 'flexStyles', 'webcomponents'], function (require, inputManager, browser, globalize, connectionManager, scrollHelper, serverNotifications, loading, datetime, focusManager, playbackManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, dom) {
+import inputManager from 'inputManager';
-    'use strict';
+import browser from 'browser';
-
+import globalize from 'globalize';
-    playbackManager = playbackManager.default || playbackManager;
+import connectionManager from 'connectionManager';
-    browser = browser.default || browser;
+import scrollHelper from 'scrollHelper';
-    loading = loading.default || loading;
+import serverNotifications from 'serverNotifications';
-    focusManager = focusManager.default || focusManager;
+import loading from 'loading';
+import datetime from 'datetime';
+import focusManager from 'focusManager';
+import playbackManager from 'playbackManager';
+import * as userSettings from 'userSettings';
+import imageLoader from 'imageLoader';
+import events from 'events';
+import layoutManager from 'layoutManager';
+import itemShortcuts from 'itemShortcuts';
+import dom from 'dom';
+import 'css!./guide.css';
+import 'programStyles';
+import 'material-icons';
+import 'scrollStyles';
+import 'emby-programcell';
+import 'emby-button';
+import 'paper-icon-button-light';
+import 'emby-tabs';
+import 'emby-scroller';
+import 'flexStyles';
+import 'webcomponents';
 
 function showViewSettings(instance) {
-        require(['guide-settings-dialog'], function (guideSettingsDialog) {
+    import('guide-settings-dialog').then(({default: guideSettingsDialog}) => {
         guideSettingsDialog.show(instance.categoryOptions).then(function () {
             instance.refresh();
         });
@@ -15,30 +35,30 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 }
 
 function updateProgramCellOnScroll(cell, scrollPct) {
-        var left = cell.posLeft;
+    let left = cell.posLeft;
     if (!left) {
         left = parseFloat(cell.style.left.replace('%', ''));
         cell.posLeft = left;
     }
-        var width = cell.posWidth;
+    let width = cell.posWidth;
     if (!width) {
         width = parseFloat(cell.style.width.replace('%', ''));
         cell.posWidth = width;
     }
 
-        var right = left + width;
+    const right = left + width;
-        var newPct = Math.max(Math.min(scrollPct, right), left);
+    const newPct = Math.max(Math.min(scrollPct, right), left);
 
-        var offset = newPct - left;
+    const offset = newPct - left;
-        var pctOfWidth = (offset / width) * 100;
+    const pctOfWidth = (offset / width) * 100;
 
-        var guideProgramName = cell.guideProgramName;
+    let guideProgramName = cell.guideProgramName;
     if (!guideProgramName) {
         guideProgramName = cell.querySelector('.guideProgramName');
         cell.guideProgramName = guideProgramName;
     }
 
-        var caret = cell.caret;
+    let caret = cell.caret;
     if (!caret) {
         caret = cell.querySelector('.guide-programNameCaret');
         cell.caret = caret;
@@ -55,7 +75,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 }
 
-    var isUpdatingProgramCellScroll = false;
+let isUpdatingProgramCellScroll = false;
 function updateProgramCellsOnScroll(programGrid, programCells) {
     if (isUpdatingProgramCellScroll) {
         return;
@@ -64,12 +84,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     isUpdatingProgramCellScroll = true;
 
     requestAnimationFrame(function () {
-            var scrollLeft = programGrid.scrollLeft;
+        const scrollLeft = programGrid.scrollLeft;
 
-            var scrollPct = scrollLeft ? (scrollLeft / programGrid.scrollWidth) * 100 : 0;
+        const scrollPct = scrollLeft ? (scrollLeft / programGrid.scrollWidth) * 100 : 0;
 
-            for (var i = 0, length = programCells.length; i < length; i++) {
+        for (const programCell of programCells) {
-                updateProgramCellOnScroll(programCells[i], scrollPct);
+            updateProgramCellOnScroll(programCell, scrollPct);
         }
 
         isUpdatingProgramCellScroll = false;
@@ -81,17 +101,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         return;
     }
 
-        var programCell = dom.parentWithClass(e.target, 'programCell');
+    const programCell = dom.parentWithClass(e.target, 'programCell');
     if (programCell) {
-            var startDate = programCell.getAttribute('data-startdate');
+        let startDate = programCell.getAttribute('data-startdate');
-            var endDate = programCell.getAttribute('data-enddate');
+        let endDate = programCell.getAttribute('data-enddate');
         startDate = datetime.parseISO8601Date(startDate, { toLocal: true }).getTime();
         endDate = datetime.parseISO8601Date(endDate, { toLocal: true }).getTime();
 
-            var now = new Date().getTime();
+        const now = new Date().getTime();
         if (now >= startDate && now < endDate) {
-                var channelId = programCell.getAttribute('data-channelid');
+            const channelId = programCell.getAttribute('data-channelid');
-                var serverId = programCell.getAttribute('data-serverid');
+            const serverId = programCell.getAttribute('data-serverid');
 
             e.preventDefault();
             e.stopPropagation();
@@ -105,24 +125,24 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 }
 
 function Guide(options) {
-        var self = this;
+    const self = this;
-        var items = {};
+    let items = {};
 
     self.options = options;
     self.categoryOptions = { categories: [] };
 
     // 30 mins
-        var cellCurationMinutes = 30;
+    const cellCurationMinutes = 30;
-        var cellDurationMs = cellCurationMinutes * 60 * 1000;
+    const cellDurationMs = cellCurationMinutes * 60 * 1000;
-        var msPerDay = 86400000;
+    const msPerDay = 86400000;
 
-        var currentDate;
+    let currentDate;
-        var currentStartIndex = 0;
+    let currentStartIndex = 0;
-        var currentChannelLimit = 0;
+    let currentChannelLimit = 0;
-        var autoRefreshInterval;
+    let autoRefreshInterval;
-        var programCells;
+    let programCells;
-        var lastFocusDirection;
+    let lastFocusDirection;
-        var programGrid;
+    let programGrid;
 
     self.refresh = function () {
         currentDate = null;
@@ -158,7 +178,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     function restartAutoRefresh() {
         stopAutoRefresh();
 
-            var intervalMs = 60000 * 15; // (minutes)
+        const intervalMs = 60000 * 15; // (minutes)
 
         autoRefreshInterval = setInterval(function () {
             self.refresh();
@@ -173,7 +193,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function normalizeDateToTimeslot(date) {
-            var minutesOffset = date.getMinutes() - cellCurationMinutes;
+        const minutesOffset = date.getMinutes() - cellCurationMinutes;
 
         if (minutesOffset >= 0) {
             date.setHours(date.getHours(), cellCurationMinutes, 0, 0);
@@ -193,9 +213,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
-            var apiClient = connectionManager.getApiClient(options.serverId);
+        const apiClient = connectionManager.getApiClient(options.serverId);
 
-            var channelQuery = {
+        const channelQuery = {
 
             StartIndex: 0,
             EnableFavoriteSorting: userSettings.get('livetv-favoritechannelsattop') !== 'false'
@@ -203,7 +223,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
         channelQuery.UserId = apiClient.getCurrentUserId();
 
-            var channelLimit = 500;
+        const channelLimit = 500;
         currentChannelLimit = channelLimit;
 
         showLoading();
@@ -214,12 +234,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         channelQuery.EnableUserData = false;
         channelQuery.EnableImageTypes = 'Primary';
 
-            var categories = self.categoryOptions.categories || [];
+        const categories = self.categoryOptions.categories || [];
-            var displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
+        const displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
-            var displaySportsContent = !categories.length || categories.indexOf('sports') !== -1;
+        const displaySportsContent = !categories.length || categories.indexOf('sports') !== -1;
-            var displayNewsContent = !categories.length || categories.indexOf('news') !== -1;
+        const displayNewsContent = !categories.length || categories.indexOf('news') !== -1;
-            var displayKidsContent = !categories.length || categories.indexOf('kids') !== -1;
+        const displayKidsContent = !categories.length || categories.indexOf('kids') !== -1;
-            var displaySeriesContent = !categories.length || categories.indexOf('series') !== -1;
+        const displaySeriesContent = !categories.length || categories.indexOf('series') !== -1;
 
         if (displayMovieContent && displaySportsContent && displayNewsContent && displayKidsContent) {
             channelQuery.IsMovie = null;
@@ -253,19 +273,19 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             channelQuery.SortOrder = null;
         }
 
-            var date = newStartDate;
+        let date = newStartDate;
         // Add one second to avoid getting programs that are just ending
         date = new Date(date.getTime() + 1000);
 
         // Subtract to avoid getting programs that are starting when the grid ends
-            var nextDay = new Date(date.getTime() + msPerDay - 2000);
+        const nextDay = new Date(date.getTime() + msPerDay - 2000);
 
         // Normally we'd want to just let responsive css handle this,
         // but since mobile browsers are often underpowered,
         // it can help performance to get them out of the markup
-            var allowIndicators = dom.getWindowSize().innerWidth >= 600;
+        const allowIndicators = dom.getWindowSize().innerWidth >= 600;
 
-            var renderOptions = {
+        const renderOptions = {
             showHdIcon: allowIndicators && userSettings.get('guide-indicator-hd') === 'true',
             showLiveIndicator: allowIndicators && userSettings.get('guide-indicator-live') !== 'false',
             showPremiereIndicator: allowIndicators && userSettings.get('guide-indicator-premiere') !== 'false',
@@ -275,8 +295,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         };
 
         apiClient.getLiveTvChannels(channelQuery).then(function (channelsResult) {
-                var btnPreviousPage = context.querySelector('.btnPreviousPage');
+            const btnPreviousPage = context.querySelector('.btnPreviousPage');
-                var btnNextPage = context.querySelector('.btnNextPage');
+            const btnNextPage = context.querySelector('.btnNextPage');
 
             if (channelsResult.TotalRecordCount > channelLimit) {
                 context.querySelector('.guideOptions').classList.remove('hide');
@@ -299,9 +319,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 context.querySelector('.guideOptions').classList.add('hide');
             }
 
-                var programFields = [];
+            const programFields = [];
 
-                var programQuery = {
+            const programQuery = {
                 UserId: apiClient.getCurrentUserId(),
                 MaxStartDate: nextDay.toISOString(),
                 MinEndDate: date.toISOString(),
@@ -345,7 +365,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function getTimeslotHeadersHtml(startDate, endDateTime) {
-            var html = '';
+        let html = '';
 
         // clone
         startDate = new Date(startDate.getTime());
@@ -386,7 +406,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function getTimerIndicator(item) {
-            var status;
+        let status;
 
         if (item.Type === 'SeriesTimer') {
             return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>';
@@ -410,30 +430,30 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
-            var html = '';
+        let html = '';
 
-            var startMs = date.getTime();
+        const startMs = date.getTime();
-            var endMs = startMs + msPerDay - 1;
+        const endMs = startMs + msPerDay - 1;
 
-            var outerCssClass = layoutManager.tv ? 'channelPrograms channelPrograms-tv' : 'channelPrograms';
+        const outerCssClass = layoutManager.tv ? 'channelPrograms channelPrograms-tv' : 'channelPrograms';
 
         html += '<div class="' + outerCssClass + '" data-channelid="' + channel.Id + '">';
 
-            var clickAction = layoutManager.tv ? 'link' : 'programdialog';
+        const clickAction = layoutManager.tv ? 'link' : 'programdialog';
 
-            var categories = self.categoryOptions.categories || [];
+        const categories = self.categoryOptions.categories || [];
-            var displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
+        const displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
-            var displaySportsContent = !categories.length || categories.indexOf('sports') !== -1;
+        const displaySportsContent = !categories.length || categories.indexOf('sports') !== -1;
-            var displayNewsContent = !categories.length || categories.indexOf('news') !== -1;
+        const displayNewsContent = !categories.length || categories.indexOf('news') !== -1;
-            var displayKidsContent = !categories.length || categories.indexOf('kids') !== -1;
+        const displayKidsContent = !categories.length || categories.indexOf('kids') !== -1;
-            var displaySeriesContent = !categories.length || categories.indexOf('series') !== -1;
+        const displaySeriesContent = !categories.length || categories.indexOf('series') !== -1;
-            var enableColorCodedBackgrounds = userSettings.get('guide-colorcodedbackgrounds') === 'true';
+        const enableColorCodedBackgrounds = userSettings.get('guide-colorcodedbackgrounds') === 'true';
 
-            var programsFound;
+        let programsFound;
-            var now = new Date().getTime();
+        const now = new Date().getTime();
 
-            for (var i = listInfo.startIndex, length = programs.length; i < length; i++) {
+        for (let i = listInfo.startIndex, length = programs.length; i < length; i++) {
-                var program = programs[i];
+            const program = programs[i];
 
             if (program.ChannelId !== channel.Id) {
                 if (programsFound) {
@@ -448,8 +468,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
             parseDates(program);
 
-                var startDateLocalMs = program.StartDateLocal.getTime();
+            const startDateLocalMs = program.StartDateLocal.getTime();
-                var endDateLocalMs = program.EndDateLocal.getTime();
+            const endDateLocalMs = program.EndDateLocal.getTime();
 
             if (endDateLocalMs < startMs) {
                 continue;
@@ -461,18 +481,18 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
             items[program.Id] = program;
 
-                var renderStartMs = Math.max(startDateLocalMs, startMs);
+            const renderStartMs = Math.max(startDateLocalMs, startMs);
-                var startPercent = (startDateLocalMs - startMs) / msPerDay;
+            let startPercent = (startDateLocalMs - startMs) / msPerDay;
             startPercent *= 100;
             startPercent = Math.max(startPercent, 0);
 
-                var renderEndMs = Math.min(endDateLocalMs, endMs);
+            const renderEndMs = Math.min(endDateLocalMs, endMs);
-                var endPercent = (renderEndMs - renderStartMs) / msPerDay;
+            let endPercent = (renderEndMs - renderStartMs) / msPerDay;
             endPercent *= 100;
 
-                var cssClass = 'programCell itemAction';
+            let cssClass = 'programCell itemAction';
-                var accentCssClass = null;
+            let accentCssClass = null;
-                var displayInnerContent = true;
+            let displayInnerContent = true;
 
             if (program.IsKids) {
                 displayInnerContent = displayKidsContent;
@@ -500,7 +520,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 cssClass += ' programCell-active';
             }
 
-                var timerAttributes = '';
+            let timerAttributes = '';
             if (program.TimerId) {
                 timerAttributes += ' data-timerid="' + program.TimerId + '"';
             }
@@ -508,12 +528,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 timerAttributes += ' data-seriestimerid="' + program.SeriesTimerId + '"';
             }
 
-                var isAttribute = endPercent >= 2 ? ' is="emby-programcell"' : '';
+            const isAttribute = endPercent >= 2 ? ' is="emby-programcell"' : '';
 
             html += '<button' + isAttribute + ' data-action="' + clickAction + '"' + timerAttributes + ' data-channelid="' + program.ChannelId + '" data-id="' + program.Id + '" data-serverid="' + program.ServerId + '" data-startdate="' + program.StartDate + '" data-enddate="' + program.EndDate + '" data-type="' + program.Type + '" class="' + cssClass + '" style="left:' + startPercent + '%;width:' + endPercent + '%;">';
 
             if (displayInnerContent) {
-                    var guideProgramNameClass = 'guideProgramName';
+                const guideProgramNameClass = 'guideProgramName';
 
                 html += '<div class="' + guideProgramNameClass + '">';
 
@@ -521,7 +541,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                 html += '<div class="guideProgramNameText">' + program.Name;
 
-                    var indicatorHtml = null;
+                let indicatorHtml = null;
                 if (program.IsLive && options.showLiveIndicator) {
                     indicatorHtml = '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('Live') + '</span>';
                 } else if (program.IsPremiere && options.showPremiereIndicator) {
@@ -566,19 +586,18 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function renderChannelHeaders(context, channels, apiClient) {
-            var html = '';
+        let html = '';
 
-            for (var i = 0, length = channels.length; i < length; i++) {
+        for (const channel of channels) {
-                var channel = channels[i];
+            const hasChannelImage = channel.ImageTags.Primary;
-                var hasChannelImage = channel.ImageTags.Primary;
 
-                var cssClass = 'guide-channelHeaderCell itemAction';
+            let cssClass = 'guide-channelHeaderCell itemAction';
 
             if (layoutManager.tv) {
                 cssClass += ' guide-channelHeaderCell-tv';
             }
 
-                var title = [];
+            const title = [];
             if (channel.ChannelNumber) {
                 title.push(channel.ChannelNumber);
             }
@@ -589,7 +608,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             html += '<button title="' + title.join(' ') + '" type="button" class="' + cssClass + '"' + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">';
 
             if (hasChannelImage) {
-                    var url = apiClient.getScaledImageUrl(channel.Id, {
+                const url = apiClient.getScaledImageUrl(channel.Id, {
                     maxHeight: 220,
                     tag: channel.ImageTags.Primary,
                     type: 'Primary'
@@ -609,20 +628,20 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             html += '</button>';
         }
 
-            var channelList = context.querySelector('.channelsContainer');
+        const channelList = context.querySelector('.channelsContainer');
         channelList.innerHTML = html;
         imageLoader.lazyChildren(channelList);
     }
 
     function renderPrograms(context, date, channels, programs, options) {
-            var listInfo = {
+        const listInfo = {
             startIndex: 0
         };
 
-            var html = [];
+        const html = [];
 
-            for (var i = 0, length = channels.length; i < length; i++) {
+        for (const channel of channels) {
-                html.push(getChannelProgramsHtml(context, date, channels[i], programs, options, listInfo));
+            html.push(getChannelProgramsHtml(context, date, channel, programs, options, listInfo));
         }
 
         programGrid.innerHTML = html.join('');
@@ -633,17 +652,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function getProgramSortOrder(program, channels) {
-            var channelId = program.ChannelId;
+        const channelId = program.ChannelId;
-            var channelIndex = -1;
+        let channelIndex = -1;
 
-            for (var i = 0, length = channels.length; i < length; i++) {
+        for (let i = 0, length = channels.length; i < length; i++) {
             if (channelId === channels[i].Id) {
                 channelIndex = i;
                 break;
             }
         }
 
-            var start = datetime.parseISO8601Date(program.StartDate, { toLocal: true });
+        const start = datetime.parseISO8601Date(program.StartDate, { toLocal: true });
 
         return (channelIndex * 10000000) + (start.getTime() / 60000);
     }
@@ -653,9 +672,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             return getProgramSortOrder(a, channels) - getProgramSortOrder(b, channels);
         });
 
-            var activeElement = document.activeElement;
+        const activeElement = document.activeElement;
-            var itemId = activeElement && activeElement.getAttribute ? activeElement.getAttribute('data-id') : null;
+        const itemId = activeElement && activeElement.getAttribute ? activeElement.getAttribute('data-id') : null;
-            var channelRowId = null;
+        let channelRowId = null;
 
         if (activeElement) {
             channelRowId = dom.parentWithClass(activeElement, 'channelPrograms');
@@ -664,8 +683,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
         renderChannelHeaders(context, channels, apiClient);
 
-            var startDate = date;
+        const startDate = date;
-            var endDate = new Date(startDate.getTime() + msPerDay);
+        const endDate = new Date(startDate.getTime() + msPerDay);
         context.querySelector('.timeslotHeaders').innerHTML = getTimeslotHeadersHtml(startDate, endDate);
         items = {};
         renderPrograms(context, date, channels, programs, renderOptions);
@@ -680,17 +699,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     function scrollProgramGridToTimeMs(context, scrollToTimeMs, startTimeOfDayMs) {
         scrollToTimeMs -= startTimeOfDayMs;
 
-            var pct = scrollToTimeMs / msPerDay;
+        const pct = scrollToTimeMs / msPerDay;
 
         programGrid.scrollTop = 0;
 
-            var scrollPos = pct * programGrid.scrollWidth;
+        const scrollPos = pct * programGrid.scrollWidth;
 
         nativeScrollTo(programGrid, scrollPos, true);
     }
 
     function focusProgram(context, itemId, channelRowId, focusToTimeMs, startTimeOfDayMs) {
-            var focusElem;
+        let focusElem;
         if (itemId) {
             focusElem = context.querySelector('[data-id="' + itemId + '"]');
         }
@@ -698,7 +717,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         if (focusElem) {
             focusManager.focus(focusElem);
         } else {
-                var autoFocusParent;
+            let autoFocusParent;
 
             if (channelRowId) {
                 autoFocusParent = context.querySelector('[data-channelid="' + channelRowId + '"]');
@@ -710,14 +729,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
             focusToTimeMs -= startTimeOfDayMs;
 
-                var pct = (focusToTimeMs / msPerDay) * 100;
+            const pct = (focusToTimeMs / msPerDay) * 100;
 
-                var programCell = autoFocusParent.querySelector('.programCell');
+            let programCell = autoFocusParent.querySelector('.programCell');
 
             while (programCell) {
-                    var left = (programCell.style.left || '').replace('%', '');
+                let left = (programCell.style.left || '').replace('%', '');
                 left = left ? parseFloat(left) : 0;
-                    var width = (programCell.style.width || '').replace('%', '');
+                let width = (programCell.style.width || '').replace('%', '');
                 width = width ? parseFloat(width) : 0;
 
                 if (left >= pct || (left + width) >= pct) {
@@ -750,14 +769,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         }
     }
 
-        var lastGridScroll = 0;
+    let lastGridScroll = 0;
-        var lastHeaderScroll = 0;
+    let lastHeaderScroll = 0;
-        var scrollXPct = 0;
+    let scrollXPct = 0;
     function onProgramGridScroll(context, elem, timeslotHeaders) {
         if ((new Date().getTime() - lastHeaderScroll) >= 1000) {
             lastGridScroll = new Date().getTime();
 
-                var scrollLeft = elem.scrollLeft;
+            const scrollLeft = elem.scrollLeft;
             scrollXPct = (scrollLeft * 100) / elem.scrollWidth;
             nativeScrollTo(timeslotHeaders, scrollLeft, true);
         }
@@ -773,17 +792,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
-            var newStartDate = normalizeDateToTimeslot(date);
+        const newStartDate = normalizeDateToTimeslot(date);
         currentDate = newStartDate;
 
         reloadGuide(page, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender);
     }
 
     function getDateTabText(date, isActive, tabIndex) {
-            var cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button';
+        const cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button';
 
-            var html = '<button is="emby-button" class="' + cssClass + '" data-index="' + tabIndex + '" data-date="' + date.getTime() + '">';
+        let html = '<button is="emby-button" class="' + cssClass + '" data-index="' + tabIndex + '" data-date="' + date.getTime() + '">';
-            var tabText = datetime.toLocaleDateString(date, { weekday: 'short' });
+        let tabText = datetime.toLocaleDateString(date, { weekday: 'short' });
 
         tabText += '<br/>';
         tabText += date.getDate();
@@ -794,12 +813,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function setDateRange(page, guideInfo) {
-            var today = new Date();
+        const today = new Date();
-            var nowHours = today.getHours();
+        const nowHours = today.getHours();
         today.setHours(nowHours, 0, 0, 0);
 
-            var start = datetime.parseISO8601Date(guideInfo.StartDate, { toLocal: true });
+        let start = datetime.parseISO8601Date(guideInfo.StartDate, { toLocal: true });
-            var end = datetime.parseISO8601Date(guideInfo.EndDate, { toLocal: true });
+        const end = datetime.parseISO8601Date(guideInfo.EndDate, { toLocal: true });
 
         start.setHours(nowHours, 0, 0, 0);
         end.setHours(0, 0, 0, 0);
@@ -810,11 +829,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
         start = new Date(Math.max(today, start));
 
-            var dateTabsHtml = '';
+        let dateTabsHtml = '';
-            var tabIndex = 0;
+        let tabIndex = 0;
 
         // TODO: Use date-fns
-            var date = new Date();
+        const date = new Date();
 
         if (currentDate) {
             date.setTime(currentDate.getTime());
@@ -822,11 +841,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
         date.setHours(nowHours, 0, 0, 0);
 
-            var startTimeOfDayMs = (start.getHours() * 60 * 60 * 1000);
+        let startTimeOfDayMs = (start.getHours() * 60 * 60 * 1000);
         startTimeOfDayMs += start.getMinutes() * 60 * 1000;
 
         while (start <= end) {
-                var isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear();
+            const isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear();
 
             dateTabsHtml += getDateTabText(start, isActive, tabIndex);
 
@@ -838,23 +857,23 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         page.querySelector('.emby-tabs-slider').innerHTML = dateTabsHtml;
         page.querySelector('.guideDateTabs').refresh();
 
-            var newDate = new Date();
+        const newDate = new Date();
-            var newDateHours = newDate.getHours();
+        const newDateHours = newDate.getHours();
-            var scrollToTimeMs = newDateHours * 60 * 60 * 1000;
+        let scrollToTimeMs = newDateHours * 60 * 60 * 1000;
 
-            var minutes = newDate.getMinutes();
+        const minutes = newDate.getMinutes();
         if (minutes >= 30) {
             scrollToTimeMs += 30 * 60 * 1000;
         }
 
-            var focusToTimeMs = ((newDateHours * 60) + minutes) * 60 * 1000;
+        const focusToTimeMs = ((newDateHours * 60) + minutes) * 60 * 1000;
         changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, layoutManager.tv);
     }
 
     function reloadPage(page) {
         showLoading();
 
-            var apiClient = connectionManager.getApiClient(options.serverId);
+        const apiClient = connectionManager.getApiClient(options.serverId);
 
         apiClient.getLiveTvGuideInfo().then(function (guideInfo) {
             setDateRange(page, guideInfo);
@@ -862,18 +881,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function getChannelProgramsFocusableElements(container) {
-            var elements = container.querySelectorAll('.programCell');
+        const elements = container.querySelectorAll('.programCell');
 
-            var list = [];
+        const list = [];
         // add 1 to avoid programs that are out of view to the left
-            var currentScrollXPct = scrollXPct + 1;
+        const currentScrollXPct = scrollXPct + 1;
 
-            for (var i = 0, length = elements.length; i < length; i++) {
+        for (const elem of elements) {
-                var elem = elements[i];
+            let left = (elem.style.left || '').replace('%', '');
-
-                var left = (elem.style.left || '').replace('%', '');
             left = left ? parseFloat(left) : 0;
-                var width = (elem.style.width || '').replace('%', '');
+
+            let width = (elem.style.width || '').replace('%', '');
             width = width ? parseFloat(width) : 0;
 
             if ((left + width) >= currentScrollXPct) {
@@ -885,12 +903,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function onInputCommand(e) {
-            var target = e.target;
+        const target = e.target;
-            var programCell = dom.parentWithClass(target, 'programCell');
+        const programCell = dom.parentWithClass(target, 'programCell');
-            var container;
+        let container;
-            var channelPrograms;
+        let channelPrograms;
-            var focusableElements;
+        let focusableElements;
-            var newRow;
+        let newRow;
 
         switch (e.detail.command) {
             case 'up':
@@ -974,14 +992,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function onScrollerFocus(e) {
-            var target = e.target;
+        const target = e.target;
-            var programCell = dom.parentWithClass(target, 'programCell');
+        const programCell = dom.parentWithClass(target, 'programCell');
 
         if (programCell) {
-                var focused = target;
+            const focused = target;
 
-                var id = focused.getAttribute('data-id');
+            const id = focused.getAttribute('data-id');
-                var item = items[id];
+            const item = items[id];
 
             if (item) {
                 events.trigger(self, 'focus', [
@@ -1000,9 +1018,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 scrollHelper.toCenter(programGrid, programCell, true, true);
             }
         } else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') {
-                var verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller');
+            const verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller');
             if (verticalScroller) {
-                    var focusedElement = programCell || dom.parentWithTag(target, 'BUTTON');
+                const focusedElement = programCell || dom.parentWithTag(target, 'BUTTON');
                 verticalScroller.toCenter(focusedElement, true);
             }
         }
@@ -1010,7 +1028,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
     function setScrollEvents(view, enabled) {
         if (layoutManager.tv) {
-                var guideVerticalScroller = view.querySelector('.guideVerticalScroller');
+            const guideVerticalScroller = view.querySelector('.guideVerticalScroller');
 
             if (enabled) {
                 inputManager.on(guideVerticalScroller, onInputCommand);
@@ -1021,16 +1039,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function onTimerCreated(e, apiClient, data) {
-            var programId = data.ProgramId;
+        const programId = data.ProgramId;
         // This could be null, not supported by all tv providers
-            var newTimerId = data.Id;
+        const newTimerId = data.Id;
 
         // find guide cells by program id, ensure timer icon
-            var cells = options.element.querySelectorAll('.programCell[data-id="' + programId + '"]');
+        const cells = options.element.querySelectorAll('.programCell[data-id="' + programId + '"]');
-            for (var i = 0, length = cells.length; i < length; i++) {
+        for (const cell of cells) {
-                var cell = cells[i];
+            const icon = cell.querySelector('.timerIcon');
-
-                var icon = cell.querySelector('.timerIcon');
             if (!icon) {
                 cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<span class="timerIcon material-icons programIcon fiber_manual_record"></span>');
             }
@@ -1045,42 +1061,46 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     }
 
     function onTimerCancelled(e, apiClient, data) {
-            var id = data.Id;
+        const id = data.Id;
         // find guide cells by timer id, remove timer icon
-            var cells = options.element.querySelectorAll('.programCell[data-timerid="' + id + '"]');
+        const cells = options.element.querySelectorAll('.programCell[data-timerid="' + id + '"]');
-            for (var i = 0, length = cells.length; i < length; i++) {
+
-                var cell = cells[i];
+        for (const cell of cells) {
-                var icon = cell.querySelector('.timerIcon');
+            const icon = cell.querySelector('.timerIcon');
+
             if (icon) {
                 icon.parentNode.removeChild(icon);
             }
+
             cell.removeAttribute('data-timerid');
         }
     }
 
     function onSeriesTimerCancelled(e, apiClient, data) {
-            var id = data.Id;
+        const id = data.Id;
         // find guide cells by timer id, remove timer icon
-            var cells = options.element.querySelectorAll('.programCell[data-seriestimerid="' + id + '"]');
+        const cells = options.element.querySelectorAll('.programCell[data-seriestimerid="' + id + '"]');
-            for (var i = 0, length = cells.length; i < length; i++) {
+
-                var cell = cells[i];
+        for (const cell of cells) {
-                var icon = cell.querySelector('.seriesTimerIcon');
+            const icon = cell.querySelector('.seriesTimerIcon');
+
             if (icon) {
                 icon.parentNode.removeChild(icon);
             }
+
             cell.removeAttribute('data-seriestimerid');
         }
     }
 
-        require(['text!./tvguide.template.html'], function (template) {
+    import('text!./tvguide.template.html').then(({default: template}) => {
-            var context = options.element;
+        const context = options.element;
 
         context.classList.add('tvguide');
 
         context.innerHTML = globalize.translateHtml(template, 'core');
 
         programGrid = context.querySelector('.programGrid');
-            var timeslotHeaders = context.querySelector('.timeslotHeaders');
+        const timeslotHeaders = context.querySelector('.timeslotHeaders');
 
         if (layoutManager.tv) {
             dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, {
@@ -1129,17 +1149,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         });
 
         context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) {
-                var allTabButtons = e.target.querySelectorAll('.guide-date-tab-button');
+            const allTabButtons = e.target.querySelectorAll('.guide-date-tab-button');
 
-                var tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)];
+            const tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)];
             if (tabButton) {
-                    var previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)];
+                const previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)];
 
-                    var date = new Date();
+                const date = new Date();
                 date.setTime(parseInt(tabButton.getAttribute('data-date')));
 
-                    var scrollWidth = programGrid.scrollWidth;
+                const scrollWidth = programGrid.scrollWidth;
-                    var scrollToTimeMs;
+                let scrollToTimeMs;
                 if (scrollWidth) {
                     scrollToTimeMs = (programGrid.scrollLeft / scrollWidth) * msPerDay;
                 } else {
@@ -1147,14 +1167,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 }
 
                 if (previousButton) {
-                        var previousDate = new Date();
+                    const previousDate = new Date();
                     previousDate.setTime(parseInt(previousButton.getAttribute('data-date')));
 
                     scrollToTimeMs += (previousDate.getHours() * 60 * 60 * 1000);
                     scrollToTimeMs += (previousDate.getMinutes() * 60 * 1000);
                 }
 
-                    var startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000);
+                let startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000);
                 startTimeOfDayMs += (date.getMinutes() * 60 * 1000);
 
                 changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false);
@@ -1175,5 +1195,4 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     });
 }
 
-    return Guide;
+export default Guide;
-});

src/components/imageDownloader/imageDownloader.js

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

src/components/itemsrefresher.js

@@ -1,12 +1,11 @@
-define(['playbackManager', 'serverNotifications', 'events'], function (playbackManager, serverNotifications, events) {
+import playbackManager from 'playbackManager';
-    'use strict';
+import serverNotifications from 'serverNotifications';
-
+import events from 'events';
-    playbackManager = playbackManager.default || playbackManager;
 
 function onUserDataChanged(e, apiClient, userData) {
-        var instance = this;
+    const instance = this;
 
-        var eventsToMonitor = getEventsToMonitor(instance);
+    const eventsToMonitor = getEventsToMonitor(instance);
 
     // TODO: Check user data change reason?
     if (eventsToMonitor.indexOf('markfavorite') !== -1) {
@@ -17,8 +16,8 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
 }
 
 function getEventsToMonitor(instance) {
-        var options = instance.options;
+    const options = instance.options;
-        var monitor = options ? options.monitorEvents : null;
+    const monitor = options ? options.monitorEvents : null;
     if (monitor) {
         return monitor.split(',');
     }
@@ -27,7 +26,7 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
 }
 
 function onTimerCreated(e, apiClient, data) {
-        var instance = this;
+    const instance = this;
 
     if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
         instance.notifyRefreshNeeded();
@@ -36,7 +35,7 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
 }
 
 function onSeriesTimerCreated(e, apiClient, data) {
-        var instance = this;
+    const instance = this;
     if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
         instance.notifyRefreshNeeded();
         return;
@@ -44,7 +43,7 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
 }
 
 function onTimerCancelled(e, apiClient, data) {
-        var instance = this;
+    const instance = this;
 
     if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
         instance.notifyRefreshNeeded();
@@ -53,7 +52,7 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
 }
 
 function onSeriesTimerCancelled(e, apiClient, data) {
-        var instance = this;
+    const instance = this;
     if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
         instance.notifyRefreshNeeded();
         return;
@@ -61,25 +60,25 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
 }
 
 function onLibraryChanged(e, apiClient, data) {
-        var instance = this;
+    const instance = this;
-        var eventsToMonitor = getEventsToMonitor(instance);
+    const eventsToMonitor = getEventsToMonitor(instance);
     if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
         // yes this is an assumption
         return;
     }
 
-        var itemsAdded = data.ItemsAdded || [];
+    const itemsAdded = data.ItemsAdded || [];
-        var itemsRemoved = data.ItemsRemoved || [];
+    const itemsRemoved = data.ItemsRemoved || [];
     if (!itemsAdded.length && !itemsRemoved.length) {
         return;
     }
 
-        var options = instance.options || {};
+    const options = instance.options || {};
-        var parentId = options.parentId;
+    const parentId = options.parentId;
     if (parentId) {
-            var foldersAddedTo = data.FoldersAddedTo || [];
+        const foldersAddedTo = data.FoldersAddedTo || [];
-            var foldersRemovedFrom = data.FoldersRemovedFrom || [];
+        const foldersRemovedFrom = data.FoldersRemovedFrom || [];
-            var collectionFolders = data.CollectionFolders || [];
+        const collectionFolders = data.CollectionFolders || [];
 
         if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
             return;
@@ -90,11 +89,11 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
 }
 
 function onPlaybackStopped(e, stopInfo) {
-        var instance = this;
+    const instance = this;
 
-        var state = stopInfo.state;
+    const state = stopInfo.state;
 
-        var eventsToMonitor = getEventsToMonitor(instance);
+    const eventsToMonitor = getEventsToMonitor(instance);
     if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
         if (eventsToMonitor.indexOf('videoplayback') !== -1) {
             instance.notifyRefreshNeeded(true);
@@ -109,14 +108,14 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
 }
 
 function addNotificationEvent(instance, name, handler, owner) {
-        var localHandler = handler.bind(instance);
+    const localHandler = handler.bind(instance);
     owner = owner || serverNotifications;
     events.on(owner, name, localHandler);
     instance['event_' + name] = localHandler;
 }
 
 function removeNotificationEvent(instance, name, owner) {
-        var handler = instance['event_' + name];
+    const handler = instance['event_' + name];
     if (handler) {
         owner = owner || serverNotifications;
         events.off(owner, name, handler);
@@ -124,7 +123,8 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
     }
 }
 
-    function ItemsRefresher(options) {
+class ItemsRefresher {
+    constructor(options) {
         this.options = options || {};
 
         addNotificationEvent(this, 'UserDataChanged', onUserDataChanged);
@@ -136,18 +136,18 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         addNotificationEvent(this, 'playbackstop', onPlaybackStopped, playbackManager);
     }
 
-    ItemsRefresher.prototype.pause = function () {
+    pause() {
         clearRefreshInterval(this, true);
 
         this.paused = true;
-    };
+    }
 
-    ItemsRefresher.prototype.resume = function (options) {
+    resume(options) {
         this.paused = false;
 
-        var refreshIntervalEndTime = this.refreshIntervalEndTime;
+        const refreshIntervalEndTime = this.refreshIntervalEndTime;
         if (refreshIntervalEndTime) {
-            var remainingMs = refreshIntervalEndTime - new Date().getTime();
+            const remainingMs = refreshIntervalEndTime - new Date().getTime();
             if (remainingMs > 0 && !this.needsRefresh) {
                 resetRefreshInterval(this, remainingMs);
             } else {
@@ -161,9 +161,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         }
 
         return Promise.resolve();
-    };
+    }
 
-    ItemsRefresher.prototype.refreshItems = function () {
+    refreshItems() {
         if (!this.fetchData) {
             return Promise.resolve();
         }
@@ -176,15 +176,15 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         this.needsRefresh = false;
 
         return this.fetchData().then(onDataFetched.bind(this));
-    };
+    }
 
-    ItemsRefresher.prototype.notifyRefreshNeeded = function (isInForeground) {
+    notifyRefreshNeeded(isInForeground) {
         if (this.paused) {
             this.needsRefresh = true;
             return;
         }
 
-        var timeout = this.refreshTimeout;
+        const timeout = this.refreshTimeout;
         if (timeout) {
             clearTimeout(timeout);
         }
@@ -194,7 +194,23 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         } else {
             this.refreshTimeout = setTimeout(this.refreshItems.bind(this), 10000);
         }
-    };
+    }
+
+    destroy() {
+        clearRefreshInterval(this);
+
+        removeNotificationEvent(this, 'UserDataChanged');
+        removeNotificationEvent(this, 'TimerCreated');
+        removeNotificationEvent(this, 'SeriesTimerCreated');
+        removeNotificationEvent(this, 'TimerCancelled');
+        removeNotificationEvent(this, 'SeriesTimerCancelled');
+        removeNotificationEvent(this, 'LibraryChanged');
+        removeNotificationEvent(this, 'playbackstop', playbackManager);
+
+        this.fetchData = null;
+        this.options = null;
+    }
+}
 
 function clearRefreshInterval(instance, isPausing) {
     if (instance.refreshInterval) {
@@ -211,7 +227,7 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
     clearRefreshInterval(instance);
 
     if (!intervalMs) {
-            var options = instance.options;
+        const options = instance.options;
         if (options) {
             intervalMs = options.refreshIntervalMs;
         }
@@ -231,20 +247,4 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
     }
 }
 
-    ItemsRefresher.prototype.destroy = function () {
+export default ItemsRefresher;
-        clearRefreshInterval(this);
-
-        removeNotificationEvent(this, 'UserDataChanged');
-        removeNotificationEvent(this, 'TimerCreated');
-        removeNotificationEvent(this, 'SeriesTimerCreated');
-        removeNotificationEvent(this, 'TimerCancelled');
-        removeNotificationEvent(this, 'SeriesTimerCancelled');
-        removeNotificationEvent(this, 'LibraryChanged');
-        removeNotificationEvent(this, 'playbackstop', playbackManager);
-
-        this.fetchData = null;
-        this.options = null;
-    };
-
-    return ItemsRefresher;
-});

src/components/layoutManager.js

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

src/components/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

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

src/components/notifications/notifications.js

@@ -2,6 +2,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     'use strict';
 
     playbackManager = playbackManager.default || playbackManager;
+    serverNotifications = serverNotifications.default || serverNotifications;
 
     function onOneDocumentClick() {
         document.removeEventListener('click', onOneDocumentClick);

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

@@ -210,7 +210,7 @@ import 'emby-button';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

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;
@@ -102,7 +101,7 @@ define(['globalize'], function (globalize) {
     return qualityOptions;
 }
 
-    function getAudioQualityOptions(options) {
+export function getAudioQualityOptions(options) {
     var maxStreamingBitrate = options.currentMaxBitrate;
 
     var qualityOptions = [];
@@ -153,8 +152,7 @@ define(['globalize'], function (globalize) {
     return qualityOptions;
 }
 
-    return {
+export default {
-        getVideoQualityOptions: getVideoQualityOptions,
+    getVideoQualityOptions,
-        getAudioQualityOptions: getAudioQualityOptions
+    getAudioQualityOptions
 };
-});

src/components/recordingcreator/recordingbutton.js

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

src/components/recordingcreator/recordingcreator.js

@@ -1,9 +1,27 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'recordingFields', 'events', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, recordingFields, events) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import mediaInfo from 'mediaInfo';
+import connectionManager from 'connectionManager';
+import require from 'require';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import datetime from 'datetime';
+import imageLoader from 'imageLoader';
+import recordingFields from 'recordingFields';
+import events from 'events';
+import 'emby-checkbox';
+import 'emby-button';
+import 'emby-collapse';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
 
-    var currentDialog;
+let currentDialog;
-    var closeAction;
+let closeAction;
-    var currentRecordingFields;
+let currentRecordingFields;
 
 function closeDialog() {
     dialogHelper.close(currentDialog);
@@ -22,7 +40,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 }
 
 function getImageUrl(item, apiClient, imageHeight) {
-        var imageTags = item.ImageTags || {};
+    const imageTags = item.ImageTags || {};
 
     if (item.PrimaryImageTag) {
         imageTags.Primary = item.PrimaryImageTag;
@@ -47,8 +65,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
 function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
     if (!refreshRecordingStateOnly) {
-            var imgUrl = getImageUrl(program, apiClient, 200);
+        const imgUrl = getImageUrl(program, apiClient, 200);
-            var imageContainer = context.querySelector('.recordingDialog-imageContainer');
+        const imageContainer = context.querySelector('.recordingDialog-imageContainer');
 
         if (imgUrl) {
             imageContainer.innerHTML = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
@@ -65,8 +83,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
         context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
         context.querySelector('.itemOverview').innerHTML = program.Overview || '';
 
-            var formDialogFooter = context.querySelector('.formDialogFooter');
+        const formDialogFooter = context.querySelector('.formDialogFooter');
-            var now = new Date();
+        const now = new Date();
         if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
             formDialogFooter.classList.remove('hide');
         } else {
@@ -85,14 +103,14 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 function reload(context, programId, serverId, refreshRecordingStateOnly) {
     loading.show();
 
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
 
-        var promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
+    const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
-        var promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
+    const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
 
     Promise.all([promise1, promise2]).then(function (responses) {
-            var defaults = responses[0];
+        const defaults = responses[0];
-            var program = responses[1];
+        const program = responses[1];
 
         renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
     });
@@ -100,11 +118,11 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
 function executeCloseAction(action, programId, serverId) {
     if (action === 'play') {
-            require(['playbackManager'], function (playbackManager) {
+        import('playbackManager').then(({default: playbackManager}) => {
-                var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = connectionManager.getApiClient(serverId);
 
             apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
-                    playbackManager.default.play({
+                playbackManager.play({
                     ids: [item.ChannelId],
                     serverId: serverId
                 });
@@ -120,8 +138,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
         loading.show();
 
-            require(['text!./recordingcreator.template.html'], function (template) {
+        import('text!./recordingcreator.template.html').then(({default: template}) => {
-                var dialogOptions = {
+            const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
             };
@@ -132,12 +150,12 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
                 dialogOptions.size = 'small';
             }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
             dlg.classList.add('formDialog');
             dlg.classList.add('recordingDialog');
 
-                var html = '';
+            let html = '';
 
             html += globalize.translateHtml(template, 'core');
 
@@ -181,7 +199,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     });
 }
 
-    return {
+export default {
     show: showEditor
 };
-});

src/components/recordingcreator/recordingeditor.js

@@ -1,7 +1,9 @@
 define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
     loading = loading.default || loading;
+    layoutManager = layoutManager.default || layoutManager;
 
     var currentDialog;
     var recordingDeleted = false;

src/components/recordingcreator/recordingfields.js

@@ -1,6 +1,7 @@
 define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields', 'flexStyles'], function (globalize, connectionManager, serverNotifications, require, loading, appHost, dom, recordingHelper, events) {
     'use strict';
 
+    serverNotifications = serverNotifications.default || serverNotifications;
     recordingHelper = recordingHelper.default || recordingHelper;
     loading = loading.default || loading;
 

src/components/remotecontrol/remotecontrol.js

@@ -1,16 +1,32 @@
-define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'globalize', 'layoutManager', 'userSettings', 'cardBuilder', 'itemContextMenu', 'cardStyle', 'emby-itemscontainer', 'css!./remotecontrol.css', 'emby-ratingbutton'], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder, itemContextMenu) {
+import datetime from 'datetime';
-    'use strict';
+import backdrop from 'backdrop';
+import listView from 'listView';
+import imageLoader from 'imageLoader';
+import playbackManager from 'playbackManager';
+import nowPlayingHelper from 'nowPlayingHelper';
+import events from 'events';
+import connectionManager from 'connectionManager';
+import appHost from 'apphost';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import * as userSettings from 'userSettings';
+import cardBuilder from 'cardBuilder';
+import itemContextMenu from 'itemContextMenu';
+import 'cardStyle';
+import 'emby-itemscontainer';
+import 'css!./remotecontrol.css';
+import 'emby-ratingbutton';
 
-    playbackManager = playbackManager.default || playbackManager;
+/*eslint prefer-const: "error"*/
 
-    var showMuteButton = true;
+let showMuteButton = true;
-    var showVolumeSlider = true;
+let showVolumeSlider = true;
 
 function showAudioMenu(context, player, button, item) {
-        var currentIndex = playbackManager.getAudioStreamIndex(player);
+    const currentIndex = playbackManager.getAudioStreamIndex(player);
-        var streams = playbackManager.audioTracks(player);
+    const streams = playbackManager.audioTracks(player);
-        var menuItems = streams.map(function (s) {
+    const menuItems = streams.map(function (s) {
-            var menuItem = {
+        const menuItem = {
             name: s.DisplayTitle,
             id: s.Index
         };
@@ -22,7 +38,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         return menuItem;
     });
 
-        require(['actionsheet'], function (actionsheet) {
+    import('actionsheet').then(({ default: actionsheet }) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -34,10 +50,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 }
 
 function showSubtitleMenu(context, player, button, item) {
-        var currentIndex = playbackManager.getSubtitleStreamIndex(player);
+    const currentIndex = playbackManager.getSubtitleStreamIndex(player);
-        var streams = playbackManager.subtitleTracks(player);
+    const streams = playbackManager.subtitleTracks(player);
-        var menuItems = streams.map(function (s) {
+    const menuItems = streams.map(function (s) {
-            var menuItem = {
+        const menuItem = {
             name: s.DisplayTitle,
             id: s.Index
         };
@@ -54,7 +70,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         selected: currentIndex == null
     });
 
-        require(['actionsheet'], function (actionsheet) {
+    import('actionsheet').then(({ default: actionsheet }) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -116,14 +132,14 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 }
 
 function updateNowPlayingInfo(context, state, serverId) {
-        var item = state.NowPlayingItem;
+    const item = state.NowPlayingItem;
-        var displayName = item ? getNowPlayingNameHtml(item).replace('<br/>', ' - ') : '';
+    const displayName = item ? getNowPlayingNameHtml(item).replace('<br/>', ' - ') : '';
     if (typeof item !== 'undefined') {
-            var nowPlayingServerId = (item.ServerId || serverId);
+        const nowPlayingServerId = (item.ServerId || serverId);
         if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') {
-                var songName = item.Name;
+            const songName = item.Name;
-                var artistsSeries = '';
+            let artistsSeries = '';
-                var albumName = '';
+            let albumName = '';
             if (item.Artists != null) {
                 if (item.ArtistItems != null) {
                     for (const artist of item.ArtistItems) {
@@ -154,11 +170,11 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             context.querySelector('.nowPlayingSongName').innerHTML = songName;
         } else if (item.Type == 'Episode') {
             if (item.SeasonName != null) {
-                    var seasonName = item.SeasonName;
+                const seasonName = item.SeasonName;
                 context.querySelector('.nowPlayingSeason').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeasonId + `&serverId=${nowPlayingServerId}">${seasonName}</a>`;
             }
             if (item.SeriesName != null) {
-                    var seriesName = item.SeriesName;
+                const seriesName = item.SeriesName;
                 if (item.SeriesId != null) {
                     context.querySelector('.nowPlayingSerie').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeriesId + `&serverId=${nowPlayingServerId}">${seriesName}</a>`;
                 } else {
@@ -176,7 +192,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             context.querySelector('.nowPlayingPageTitle').classList.add('hide');
         }
 
-            var url = item ? seriesImageUrl(item, {
+        const url = item ? seriesImageUrl(item, {
             maxHeight: 300
         }) || imageUrl(item, {
             maxHeight: 300
@@ -192,7 +208,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             contextButton.focus();
         }
         const stopPlayback = !!layoutManager.mobile;
-            var options = {
+        const options = {
             play: false,
             queue: false,
             stopPlayback: stopPlayback,
@@ -200,7 +216,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             openAlbum: false,
             positionTo: contextButton
         };
-            var apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = connectionManager.getApiClient(item.ServerId);
         apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
             apiClient.getCurrentUser().then(function (user) {
                 contextButton.addEventListener('click', function () {
@@ -215,8 +231,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         if (item) {
             backdrop.setBackdrops([item]);
             apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
-                    var userData = fullItem.UserData || {};
+                const userData = fullItem.UserData || {};
-                    var likes = userData.Likes == null ? '' : userData.Likes;
+                const likes = userData.Likes == null ? '' : userData.Likes;
                 context.querySelector('.nowPlayingPageUserDataButtonsTitle').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>';
                 context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>';
             });
@@ -228,8 +244,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 }
 
 function setImageUrl(context, state, url) {
-        var item = state.NowPlayingItem;
+    const item = state.NowPlayingItem;
-        var imgContainer = context.querySelector('.nowPlayingPageImageContainer');
+    const imgContainer = context.querySelector('.nowPlayingPageImageContainer');
 
     if (url) {
         imgContainer.innerHTML = '<img class="nowPlayingPageImage" src="' + url + '" />';
@@ -254,15 +270,15 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 }
 
 function updateSupportedCommands(context, commands) {
-        var all = context.querySelectorAll('.btnCommand');
+    const all = context.querySelectorAll('.btnCommand');
 
-        for (var i = 0, length = all.length; i < length; i++) {
+    for (let i = 0, length = all.length; i < length; i++) {
-            var enableButton = commands.indexOf(all[i].getAttribute('data-command')) !== -1;
+        const enableButton = commands.indexOf(all[i].getAttribute('data-command')) !== -1;
         all[i].disabled = !enableButton;
     }
 }
 
-    return function () {
+export default function () {
     function toggleRepeat() {
         switch (playbackManager.getRepeatMode()) {
             case 'RepeatAll':
@@ -278,12 +294,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
     function updatePlayerState(player, context, state) {
         lastPlayerState = state;
-            var item = state.NowPlayingItem;
+        const item = state.NowPlayingItem;
-            var playerInfo = playbackManager.getPlayerInfo();
+        const playerInfo = playbackManager.getPlayerInfo();
-            var supportedCommands = playerInfo.supportedCommands;
+        const supportedCommands = playerInfo.supportedCommands;
         currentPlayerSupportedCommands = supportedCommands;
-            var playState = state.PlayState || {};
+        const playState = state.PlayState || {};
-            var isSupportedCommands = supportedCommands.includes('DisplayMessage') || supportedCommands.includes('SendString') || supportedCommands.includes('Select');
+        const isSupportedCommands = supportedCommands.includes('DisplayMessage') || supportedCommands.includes('SendString') || supportedCommands.includes('Select');
         buttonVisible(context.querySelector('.btnToggleFullscreen'), item && item.MediaType == 'Video' && supportedCommands.includes('ToggleFullscreen'));
         updateAudioTracksDisplay(player, context);
         updateSubtitleTracksDisplay(player, context);
@@ -322,7 +338,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             buttonVisible(context.querySelector('.btnRewind'), item != null);
             buttonVisible(context.querySelector('.btnFastForward'), item != null);
         }
-            var positionSlider = context.querySelector('.nowPlayingPositionSlider');
+        const positionSlider = context.querySelector('.nowPlayingPositionSlider');
 
         if (positionSlider && item && item.RunTimeTicks) {
             positionSlider.setKeyboardSteps(userSettings.skipBackLength() * 1000000 / item.RunTimeTicks,
@@ -331,7 +347,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
         if (positionSlider && !positionSlider.dragging) {
             positionSlider.disabled = !playState.CanSeek;
-                var isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null;
+            const isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null;
             positionSlider.setIsClear(isProgressClear);
         }
 
@@ -351,17 +367,17 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     }
 
     function updateAudioTracksDisplay(player, context) {
-            var supportedCommands = currentPlayerSupportedCommands;
+        const supportedCommands = currentPlayerSupportedCommands;
         buttonVisible(context.querySelector('.btnAudioTracks'), playbackManager.audioTracks(player).length > 1 && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
     }
 
     function updateSubtitleTracksDisplay(player, context) {
-            var supportedCommands = currentPlayerSupportedCommands;
+        const supportedCommands = currentPlayerSupportedCommands;
         buttonVisible(context.querySelector('.btnSubtitles'), playbackManager.subtitleTracks(player).length && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
     }
 
     function updateRepeatModeDisplay(repeatMode) {
-            var context = dlg;
+        const context = dlg;
         const toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
         const cssClass = 'buttonActive';
         let innHtml = '<span class="material-icons repeat"></span>';
@@ -386,8 +402,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     }
 
     function updatePlayerVolumeState(context, isMuted, volumeLevel) {
-            var view = context;
+        const view = context;
-            var supportedCommands = currentPlayerSupportedCommands;
+        const supportedCommands = currentPlayerSupportedCommands;
 
         if (supportedCommands.indexOf('Mute') === -1) {
             showMuteButton = false;
@@ -420,8 +436,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         } else {
             buttonMute.classList.toggle('hide', !showMuteButton);
 
-                var nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider');
+            const nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider');
-                var nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer');
+            const nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer');
 
             if (nowPlayingVolumeSlider) {
                 nowPlayingVolumeSliderContainer.classList.toggle('hide', !showVolumeSlider);
@@ -434,8 +450,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     }
 
     function updatePlayPauseState(isPaused, isActive) {
-            var context = dlg;
+        const context = dlg;
-            var btnPlayPause = context.querySelector('.btnPlayPause');
+        const btnPlayPause = context.querySelector('.btnPlayPause');
         const btnPlayPauseIcon = btnPlayPause.querySelector('.material-icons');
 
         btnPlayPauseIcon.classList.remove('play_circle_filled', 'pause_circle_filled');
@@ -445,12 +461,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     }
 
     function updateTimeDisplay(positionTicks, runtimeTicks) {
-            var context = dlg;
+        const context = dlg;
-            var positionSlider = context.querySelector('.nowPlayingPositionSlider');
+        const positionSlider = context.querySelector('.nowPlayingPositionSlider');
 
         if (positionSlider && !positionSlider.dragging) {
             if (runtimeTicks) {
-                    var pct = positionTicks / runtimeTicks;
+                let pct = positionTicks / runtimeTicks;
                 pct *= 100;
                 positionSlider.value = pct;
             } else {
@@ -468,7 +484,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
     function loadPlaylist(context, player) {
         getPlaylistItems(player).then(function (items) {
-                var html = '';
+            let html = '';
             let favoritesEnabled = true;
             if (layoutManager.mobile) {
                 if (items.length > 0) {
@@ -492,7 +508,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 dragHandle: true
             });
 
-                var itemsContainer = context.querySelector('.playlist');
+            const itemsContainer = context.querySelector('.playlist');
             let focusedItemPlaylistId = itemsContainer.querySelector('button:focus');
             itemsContainer.innerHTML = html;
             if (focusedItemPlaylistId !== null) {
@@ -503,10 +519,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 }
             }
 
-                var playlistItemId = playbackManager.getCurrentPlaylistItemId(player);
+            const playlistItemId = playbackManager.getCurrentPlaylistItemId(player);
 
             if (playlistItemId) {
-                    var img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`);
+                const img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`);
 
                 if (img) {
                     img.classList.remove('lazy');
@@ -520,7 +536,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
     function onPlaybackStart(e, state) {
         console.debug('remotecontrol event: ' + e.type);
-            var player = this;
+        const player = this;
         onStateChanged.call(player, e, state);
     }
 
@@ -556,12 +572,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     }
 
     function onPlaylistItemRemoved(e, info) {
-            var context = dlg;
+        const context = dlg;
         if (info !== undefined) {
-                var playlistItemIds = info.playlistItemIds;
+            const playlistItemIds = info.playlistItemIds;
 
-                for (var i = 0, length = playlistItemIds.length; i < length; i++) {
+            for (let i = 0, length = playlistItemIds.length; i < length; i++) {
-                    var listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]');
+                const listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]');
 
                 if (listItem) {
                     listItem.parentNode.removeChild(listItem);
@@ -574,7 +590,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
     function onPlaybackStopped(e, state) {
         console.debug('remotecontrol event: ' + e.type);
-            var player = this;
+        const player = this;
 
         if (!state.NextMediaType) {
             updatePlayerState(player, dlg, {});
@@ -587,29 +603,29 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     }
 
     function onStateChanged(event, state) {
-            var player = this;
+        const player = this;
         updatePlayerState(player, dlg, state);
         onPlaylistUpdate();
     }
 
     function onTimeUpdate(e) {
-            var now = new Date().getTime();
+        const now = new Date().getTime();
 
         if (!(now - lastUpdateTime < 700)) {
             lastUpdateTime = now;
-                var player = this;
+            const player = this;
             currentRuntimeTicks = playbackManager.duration(player);
             updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
         }
     }
 
     function onVolumeChanged(e) {
-            var player = this;
+        const player = this;
         updatePlayerVolumeState(dlg, player.isMuted(), player.getVolume());
     }
 
     function releaseCurrentPlayer() {
-            var player = currentPlayer;
+        const player = currentPlayer;
 
         if (player) {
             events.off(player, 'playbackstart', onPlaybackStart);
@@ -630,7 +646,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
     function bindToPlayer(context, player) {
         if (releaseCurrentPlayer(), currentPlayer = player, player) {
-                var state = playbackManager.getPlayerState(player);
+            const state = playbackManager.getPlayerState(player);
             onStateChanged.call(player, {
                 type: 'init'
             }, state);
@@ -646,8 +662,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             events.on(player, 'pause', onPlayPauseStateChanged);
             events.on(player, 'unpause', onPlayPauseStateChanged);
             events.on(player, 'timeupdate', onTimeUpdate);
-                var playerInfo = playbackManager.getPlayerInfo();
+            const playerInfo = playbackManager.getPlayerInfo();
-                var supportedCommands = playerInfo.supportedCommands;
+            const supportedCommands = playerInfo.supportedCommands;
             currentPlayerSupportedCommands = supportedCommands;
             updateSupportedCommands(context, supportedCommands);
         }
@@ -674,10 +690,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     }
 
     function savePlaylist() {
-            require(['playlistEditor'], function (playlistEditor) {
+        import('playlistEditor').then(({ default: playlistEditor }) => {
             getSaveablePlaylistItems().then(function (items) {
-                    var serverId = items.length ? items[0].ServerId : ApiClient.serverId();
+                const serverId = items.length ? items[0].ServerId : ApiClient.serverId();
-                    new playlistEditor.showEditor({
+                new playlistEditor({
                     items: items.map(function (i) {
                         return i.Id;
                     }),
@@ -690,10 +706,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     }
 
     function bindEvents(context) {
-            var btnCommand = context.querySelectorAll('.btnCommand');
+        const btnCommand = context.querySelectorAll('.btnCommand');
-            var positionSlider = context.querySelector('.nowPlayingPositionSlider');
+        const positionSlider = context.querySelector('.nowPlayingPositionSlider');
 
-            for (var i = 0, length = btnCommand.length; i < length; i++) {
+        for (let i = 0, length = btnCommand.length; i < length; i++) {
             btnCommand[i].addEventListener('click', onBtnCommandClick);
         }
 
@@ -770,22 +786,22 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             }
         });
         positionSlider.addEventListener('change', function () {
-                var value = this.value;
+            const value = this.value;
 
             if (currentPlayer) {
-                    var newPercent = parseFloat(value);
+                const newPercent = parseFloat(value);
                 playbackManager.seekPercent(newPercent, currentPlayer);
             }
         });
 
         positionSlider.getBubbleText = function (value) {
-                var state = lastPlayerState;
+            const state = lastPlayerState;
 
             if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
                 return '--:--';
             }
 
-                var ticks = currentRuntimeTicks;
+            let ticks = currentRuntimeTicks;
             ticks /= 100;
             ticks *= value;
             return datetime.getDisplayRunningTime(ticks);
@@ -798,13 +814,13 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         context.querySelector('.buttonMute').addEventListener('click', function () {
             playbackManager.toggleMute(currentPlayer);
         });
-            var playlistContainer = context.querySelector('.playlist');
+        const playlistContainer = context.querySelector('.playlist');
         playlistContainer.addEventListener('action-remove', function (e) {
             playbackManager.removeFromPlaylist([e.detail.playlistItemId], currentPlayer);
         });
         playlistContainer.addEventListener('itemdrop', function (e) {
-                var newIndex = e.detail.newIndex;
+            const newIndex = e.detail.newIndex;
-                var playlistItemId = e.detail.playlistItemId;
+            const playlistItemId = e.detail.playlistItemId;
             playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer);
         });
         context.querySelector('.btnSavePlaylist').addEventListener('click', savePlaylist);
@@ -834,7 +850,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     }
 
     function onMessageSubmit(e) {
-            var form = e.target;
+        const form = e.target;
         playbackManager.sendCommand({
             Name: 'DisplayMessage',
             Arguments: {
@@ -844,7 +860,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         }, currentPlayer);
         form.querySelector('input').value = '';
 
-            require(['toast'], function (toast) {
+        import('toast').then(({ default: toast }) => {
             toast('Message sent.');
         });
 
@@ -854,7 +870,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     }
 
     function onSendStringSubmit(e) {
-            var form = e.target;
+        const form = e.target;
         playbackManager.sendCommand({
             Name: 'SendString',
             Arguments: {
@@ -863,7 +879,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         }, currentPlayer);
         form.querySelector('input').value = '';
 
-            require(['toast'], function (toast) {
+        import('toast').then(({ default: toast }) => {
             toast('Text sent.');
         });
 
@@ -899,7 +915,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         events.on(playbackManager, 'playerchange', onPlayerChange);
 
         if (layoutManager.tv) {
-                var positionSlider = context.querySelector('.nowPlayingPositionSlider');
+            const positionSlider = context.querySelector('.nowPlayingPositionSlider');
             positionSlider.classList.add('focusable');
             positionSlider.enableKeyboardDragging();
         }
@@ -915,13 +931,13 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         bindToPlayer(context, playbackManager.getCurrentPlayer());
     }
 
-        var dlg;
+    let dlg;
-        var currentPlayer;
+    let currentPlayer;
-        var lastPlayerState;
+    let lastPlayerState;
-        var currentPlayerSupportedCommands = [];
+    let currentPlayerSupportedCommands = [];
-        var lastUpdateTime = 0;
+    let lastUpdateTime = 0;
-        var currentRuntimeTicks = 0;
+    let currentRuntimeTicks = 0;
-        var self = this;
+    const self = this;
 
     self.init = function (ownerView, context) {
         dlg = context;
@@ -935,5 +951,4 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     self.destroy = function () {
         onDialogClosed();
     };
-    };
+}
-});

src/components/slideshow/slideshow.js

@@ -2,11 +2,17 @@
  * Image viewer component
  * @module components/slideshow/slideshow
  */
-define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'dom', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost, dom) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import inputManager from 'inputManager';
-
+import connectionManager from 'connectionManager';
-    browser = browser.default || browser;
+import layoutManager from 'layoutManager';
-    focusManager = focusManager.default || focusManager;
+import focusManager from 'focusManager';
+import browser from 'browser';
+import appHost from 'apphost';
+import dom from 'dom';
+import 'css!./style';
+import 'material-icons';
+import 'paper-icon-button-light';
 
 /**
  * Name of transition event.
@@ -79,8 +85,8 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
  * @returns {string} URL of the item's image.
  */
 function getImgUrl(item, user) {
-        var apiClient = connectionManager.getApiClient(item.ServerId);
+    const apiClient = connectionManager.getApiClient(item.ServerId);
-        var imageOptions = {};
+    const imageOptions = {};
 
     if (item.BackdropImageTags && item.BackdropImageTags.length) {
         return getBackdropImageUrl(item, imageOptions, apiClient);
@@ -102,7 +108,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
  * @returns {string} The HTML markup of the button.
  */
 function getIcon(icon, cssClass, canFocus, autoFocus) {
-        var tabIndex = canFocus ? '' : ' tabindex="-1"';
+    const tabIndex = canFocus ? '' : ' tabindex="-1"';
     autoFocus = autoFocus ? ' autofocus' : '';
     return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><span class="material-icons slideshowButtonIcon ' + icon + '"></span></button>';
 }
@@ -119,18 +125,18 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
     }
 }
 
-    return function (options) {
+export default function (options) {
-        var self = this;
+    const self = this;
     /** Initialized instance of Swiper. */
-        var swiperInstance;
+    let swiperInstance;
     /** Initialized instance of the dialog containing the Swiper instance. */
-        var dialog;
+    let dialog;
     /** Options of the slideshow components */
-        var currentOptions;
+    let currentOptions;
     /** ID of the timeout used to hide the OSD. */
-        var hideTimeout;
+    let hideTimeout;
     /** Last coordinates of the mouse pointer. */
-        var lastMouseMoveData;
+    let lastMouseMoveData;
 
     /**
      * Creates the HTML markup for the dialog and the OSD.
@@ -150,12 +156,12 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
         dialog.classList.add('slideshowDialog');
 
-            var html = '';
+        let html = '';
 
         html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
 
         if (options.interactive && !layoutManager.tv) {
-                var actionButtonsOnTop = layoutManager.mobile;
+            const actionButtonsOnTop = layoutManager.mobile;
 
             html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false);
             html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false);
@@ -196,17 +202,17 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
                 dialogHelper.close(dialog);
             });
 
-                var btnPause = dialog.querySelector('.btnSlideshowPause');
+            const btnPause = dialog.querySelector('.btnSlideshowPause');
             if (btnPause) {
                 btnPause.addEventListener('click', playPause);
             }
 
-                var btnDownload = dialog.querySelector('.btnDownload');
+            const btnDownload = dialog.querySelector('.btnDownload');
             if (btnDownload) {
                 btnDownload.addEventListener('click', download);
             }
 
-                var btnShare = dialog.querySelector('.btnShare');
+            const btnShare = dialog.querySelector('.btnShare');
             if (btnShare) {
                 btnShare.addEventListener('click', share);
             }
@@ -231,7 +237,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Handles OSD changes when the autoplay is started.
      */
     function onAutoplayStart() {
-            var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
+        const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
         if (btnSlideshowPause) {
             btnSlideshowPause.classList.replace('play_arrow', 'pause');
         }
@@ -241,7 +247,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Handles OSD changes when the autoplay is stopped.
      */
     function onAutoplayStop() {
-            var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
+        const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
         if (btnSlideshowPause) {
             btnSlideshowPause.classList.replace('pause', 'play_arrow');
         }
@@ -288,14 +294,14 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * @param {Object} options - Options used to initialize the Swiper instance.
      */
     function loadSwiper(dialog, options) {
-            var slides;
+        let slides;
         if (currentOptions.slides) {
             slides = currentOptions.slides;
         } else {
             slides = currentOptions.items;
         }
 
-            require(['swiper'], function (Swiper) {
+        import('swiper').then(({default: Swiper}) => {
             swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
                 direction: 'horizontal',
                 // Loop is disabled due to the virtual slides option not supporting it.
@@ -369,7 +375,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * @returns {string} The HTML markup of the slide.
      */
     function getSwiperSlideHtmlFromSlide(item) {
-            var html = '';
+        let html = '';
         html += '<div class="swiper-slide" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">';
         html += '<div class="swiper-zoom-container">';
         if (useFakeZoomImage) {
@@ -404,7 +410,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      */
     function getCurrentImageInfo() {
         if (swiperInstance) {
-                var slide = document.querySelector('.swiper-slide-active');
+            const slide = document.querySelector('.swiper-slide-active');
 
             if (slide) {
                 return {
@@ -424,9 +430,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Starts a download for the currently displayed slide.
      */
     function download() {
-            var imageInfo = getCurrentImageInfo();
+        const imageInfo = getCurrentImageInfo();
 
-            require(['fileDownloader'], function (fileDownloader) {
+        import('fileDownloader').then(({default: fileDownloader}) => {
             fileDownloader.download([imageInfo]);
         });
     }
@@ -435,7 +441,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Shares the currently displayed slide using the browser's built-in sharing feature.
      */
     function share() {
-            var imageInfo = getCurrentImageInfo();
+        const imageInfo = getCurrentImageInfo();
 
         navigator.share({
             url: imageInfo.shareUrl
@@ -464,7 +470,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Toggles the autoplay feature of the Swiper instance.
      */
     function playPause() {
-            var paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
+        const paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
         if (paused) {
             play();
         } else {
@@ -476,7 +482,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Closes the dialog and destroys the Swiper instance.
      */
     function onDialogClosed() {
-            var swiper = swiperInstance;
+        const swiper = swiperInstance;
         if (swiper) {
             swiper.destroy(true, true);
             swiperInstance = null;
@@ -494,7 +500,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Shows the OSD.
      */
     function showOsd() {
-            var bottom = dialog.querySelector('.slideshowBottomBar');
+        const bottom = dialog.querySelector('.slideshowBottomBar');
         if (bottom) {
             slideUpToShow(bottom);
             startHideTimer();
@@ -505,7 +511,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Hides the OSD.
      */
     function hideOsd() {
-            var bottom = dialog.querySelector('.slideshowBottomBar');
+        const bottom = dialog.querySelector('.slideshowBottomBar');
         if (bottom) {
             slideDownToHide(bottom);
         }
@@ -540,7 +546,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
         element.classList.remove('hide');
 
-            var onFinish = function () {
+        const onFinish = function () {
             focusManager.focus(element.querySelector('.btnSlideshowPause'));
         };
 
@@ -550,11 +556,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
         }
 
         requestAnimationFrame(function () {
-                var keyframes = [
+            const keyframes = [
                 { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
                 { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
             ];
-                var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
+            const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
             element.animate(keyframes, timing).onfinish = onFinish;
         });
     }
@@ -568,7 +574,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             return;
         }
 
-            var onFinish = function () {
+        const onFinish = function () {
             element.classList.add('hide');
         };
 
@@ -578,11 +584,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
         }
 
         requestAnimationFrame(function () {
-                var keyframes = [
+            const keyframes = [
                 { transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
                 { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
             ];
-                var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
+            const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
             element.animate(keyframes, timing).onfinish = onFinish;
         });
     }
@@ -592,13 +598,13 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * @param {Event} event - Pointer movement event.
      */
     function onPointerMove(event) {
-            var pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
+        const pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
 
         if (pointerType === 'mouse') {
-                var eventX = event.screenX || 0;
+            const eventX = event.screenX || 0;
-                var eventY = event.screenY || 0;
+            const eventY = event.screenY || 0;
 
-                var obj = lastMouseMoveData;
+            const obj = lastMouseMoveData;
             if (!obj) {
                 lastMouseMoveData = {
                     x: eventX,
@@ -664,5 +670,4 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             dialogHelper.close(dialog);
         }
     };
-    };
+}
-});

src/components/sortmenu/sortmenu.js

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

src/components/subtitleeditor/subtitleeditor.js

@@ -1,16 +1,27 @@
-define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'css!./subtitleeditor', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import focusManager from 'focusManager';
+import dom from 'dom';
+import 'emby-select';
+import 'listViewStyle';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'material-icons';
+import 'css!./subtitleeditor';
+import 'emby-button';
+import 'flexStyles';
 
-    loading = loading.default || loading;
+let currentItem;
-    focusManager = focusManager.default || focusManager;
+let hasChanges;
-
-    var currentItem;
-    var hasChanges;
 
 function downloadRemoteSubtitles(context, id) {
-        var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
+    let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
 
-        var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    let apiClient = connectionManager.getApiClient(currentItem.ServerId);
     apiClient.ajax({
 
         type: 'POST',
@@ -19,7 +30,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
     }).then(function () {
         hasChanges = true;
 
-            require(['toast'], function (toast) {
+        import('toast').then(({default: toast}) => {
             toast(globalize.translate('MessageDownloadQueued'));
         });
 
@@ -28,10 +39,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function deleteLocalSubtitle(context, index) {
-        var msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
+    let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
 
-        require(['confirm'], function (confirm) {
+    import('confirm').then(({default: confirm}) => {
-            confirm.default({
+        confirm({
 
             title: globalize.translate('ConfirmDeletion'),
             text: msg,
@@ -41,10 +52,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         }).then(function () {
             loading.show();
 
-                var itemId = currentItem.Id;
+            let itemId = currentItem.Id;
-                var url = 'Videos/' + itemId + '/Subtitles/' + index;
+            let url = 'Videos/' + itemId + '/Subtitles/' + index;
 
-                var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+            let apiClient = connectionManager.getApiClient(currentItem.ServerId);
 
             apiClient.ajax({
 
@@ -60,13 +71,13 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function fillSubtitleList(context, item) {
-        var streams = item.MediaStreams || [];
+    let streams = item.MediaStreams || [];
 
-        var subs = streams.filter(function (s) {
+    let subs = streams.filter(function (s) {
         return s.Type === 'Subtitle';
     });
 
-        var html = '';
+    let html = '';
 
     if (subs.length) {
         html += '<h2>' + globalize.translate('MySubtitles') + '</h2>';
@@ -74,10 +85,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         html += '<div>';
 
         html += subs.map(function (s) {
-                var itemHtml = '';
+            let itemHtml = '';
 
-                var tagName = layoutManager.tv ? 'button' : 'div';
+            let tagName = layoutManager.tv ? 'button' : 'div';
-                var className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
+            let className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
 
             if (layoutManager.tv) {
                 className += ' listItem-focusscale listItem-button';
@@ -116,7 +127,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         html += '</div>';
     }
 
-        var elem = context.querySelector('.subtitleList');
+    let elem = context.querySelector('.subtitleList');
 
     if (subs.length) {
         elem.classList.remove('hide');
@@ -127,18 +138,18 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function fillLanguages(context, apiClient, languages) {
-        var selectLanguage = context.querySelector('#selectLanguage');
+    let selectLanguage = context.querySelector('#selectLanguage');
 
     selectLanguage.innerHTML = languages.map(function (l) {
         return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
     });
 
-        var lastLanguage = userSettings.get('subtitleeditor-language');
+    let lastLanguage = userSettings.get('subtitleeditor-language');
     if (lastLanguage) {
         selectLanguage.value = lastLanguage;
     } else {
         apiClient.getCurrentUser().then(function (user) {
-                var lang = user.Configuration.SubtitleLanguagePreference;
+            let lang = user.Configuration.SubtitleLanguagePreference;
 
             if (lang) {
                 selectLanguage.value = lang;
@@ -148,8 +159,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function renderSearchResults(context, results) {
-        var lastProvider = '';
+    let lastProvider = '';
-        var html = '';
+    let html = '';
 
     if (!results.length) {
         context.querySelector('.noSearchResults').classList.remove('hide');
@@ -160,10 +171,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
     context.querySelector('.noSearchResults').classList.add('hide');
 
-        for (var i = 0, length = results.length; i < length; i++) {
+    for (let i = 0, length = results.length; i < length; i++) {
-            var result = results[i];
+        let result = results[i];
 
-            var provider = result.ProviderName;
+        let provider = result.ProviderName;
 
         if (provider !== lastProvider) {
             if (i > 0) {
@@ -174,8 +185,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
             lastProvider = provider;
         }
 
-            var tagName = layoutManager.tv ? 'button' : 'div';
+        let tagName = layoutManager.tv ? 'button' : 'div';
-            var className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
+        let className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
         if (layoutManager.tv) {
             className += ' listItem-focusscale listItem-button';
         }
@@ -184,7 +195,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
         html += '<span class="listItemIcon material-icons closed_caption"></span>';
 
-            var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
+        let bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
 
         html += '<div class="listItemBody ' + bodyClass + '">';
 
@@ -221,7 +232,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         html += '</div>';
     }
 
-        var elem = context.querySelector('.subtitleResults');
+    let elem = context.querySelector('.subtitleResults');
     elem.innerHTML = html;
 
     loading.hide();
@@ -232,8 +243,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
     loading.show();
 
-        var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    let apiClient = connectionManager.getApiClient(currentItem.ServerId);
-        var url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
+    let url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
 
     apiClient.getJSON(url).then(function (results) {
         renderSearchResults(context, results);
@@ -247,8 +258,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         currentItem = item;
 
         fillSubtitleList(context, item);
-            var file = item.Path || '';
+        let file = item.Path || '';
-            var index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
+        let index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
         if (index > -1) {
             file = file.substring(index + 1);
         }
@@ -272,9 +283,9 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function onSearchSubmit(e) {
-        var form = this;
+    let form = this;
 
-        var lang = form.querySelector('#selectLanguage', form).value;
+    let lang = form.querySelector('#selectLanguage', form).value;
 
     searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
 
@@ -283,26 +294,26 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function onSubtitleListClick(e) {
-        var btnDelete = dom.parentWithClass(e.target, 'btnDelete');
+    let btnDelete = dom.parentWithClass(e.target, 'btnDelete');
     if (btnDelete) {
-            var index = btnDelete.getAttribute('data-index');
+        let index = btnDelete.getAttribute('data-index');
-            var context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
+        let context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
         deleteLocalSubtitle(context, index);
     }
 }
 
 function onSubtitleResultsClick(e) {
-        var subtitleId;
+    let subtitleId;
-        var context;
+    let context;
 
-        var btnOptions = dom.parentWithClass(e.target, 'btnOptions');
+    let btnOptions = dom.parentWithClass(e.target, 'btnOptions');
     if (btnOptions) {
         subtitleId = btnOptions.getAttribute('data-subid');
         context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
         showDownloadOptions(btnOptions, context, subtitleId);
     }
 
-        var btnDownload = dom.parentWithClass(e.target, 'btnDownload');
+    let btnDownload = dom.parentWithClass(e.target, 'btnDownload');
     if (btnDownload) {
         subtitleId = btnDownload.getAttribute('data-subid');
         context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
@@ -311,14 +322,14 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function showDownloadOptions(button, context, subtitleId) {
-        var items = [];
+    let items = [];
 
     items.push({
         name: globalize.translate('Download'),
         id: 'download'
     });
 
-        require(['actionsheet'], function (actionsheet) {
+    import('actionsheet').then(({default: actionsheet}) => {
         actionsheet.show({
             items: items,
             positionTo: button
@@ -336,8 +347,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
+    import('scrollHelper').then(({default: scrollHelper}) => {
-            var fn = on ? 'on' : 'off';
+        let fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
 }
@@ -345,9 +356,9 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 function showEditorInternal(itemId, serverId, template) {
     hasChanges = false;
 
-        var apiClient = connectionManager.getApiClient(serverId);
+    let apiClient = connectionManager.getApiClient(serverId);
     return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
-            var dialogOptions = {
+        let dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
@@ -358,7 +369,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
             dialogOptions.size = 'small';
         }
 
-            var dlg = dialogHelper.createDialog(dialogOptions);
+        let dlg = dialogHelper.createDialog(dialogOptions);
 
         dlg.classList.add('formDialog');
         dlg.classList.add('subtitleEditorDialog');
@@ -369,7 +380,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
         dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
 
-            var btnSubmit = dlg.querySelector('.btnSubmit');
+        let btnSubmit = dlg.querySelector('.btnSubmit');
 
         if (layoutManager.tv) {
             centerFocus(dlg.querySelector('.formDialogContent'), false, true);
@@ -378,7 +389,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
             btnSubmit.classList.add('hide');
         }
 
-            var editorContent = dlg.querySelector('.formDialogContent');
+        let editorContent = dlg.querySelector('.formDialogContent');
 
         dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
         dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
@@ -415,13 +426,12 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
     loading.show();
 
     return new Promise(function (resolve, reject) {
-            require(['text!./subtitleeditor.template.html'], function (template) {
+        import('text!./subtitleeditor.template.html').then(({default: template}) => {
             showEditorInternal(itemId, serverId, template).then(resolve, reject);
         });
     });
 }
 
-    return {
+export default {
     show: showEditor
 };
-});

src/components/subtitlesettings/subtitleappearancehelper.js

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

src/components/subtitlesettings/subtitlesettings.js

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

src/components/subtitlesync/subtitlesync.js

@@ -1,16 +1,16 @@
-define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, layoutManager, template, css) {
+import playbackManager from 'playbackManager';
-    'use strict';
+import layoutManager from 'layoutManager';
+import template from 'text!./subtitlesync.template.html';
+import 'css!./subtitlesync';
 
-    playbackManager = playbackManager.default || playbackManager;
+let player;
-
+let subtitleSyncSlider;
-    var player;
+let subtitleSyncTextField;
-    var subtitleSyncSlider;
+let subtitleSyncCloseButton;
-    var subtitleSyncTextField;
+let subtitleSyncContainer;
-    var subtitleSyncCloseButton;
-    var subtitleSyncContainer;
 
 function init(instance) {
-        var parent = document.createElement('div');
+    const parent = document.createElement('div');
     document.body.appendChild(parent);
     parent.innerHTML = template;
 
@@ -41,7 +41,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
     subtitleSyncTextField.addEventListener('keydown', function (event) {
         if (event.key === 'Enter') {
             // if input key is enter search for float pattern
-                var inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
+            let inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
             if (inputOffset) {
                 inputOffset = inputOffset[0];
 
@@ -92,7 +92,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
     });
 
     subtitleSyncSlider.getBubbleHtml = function (value) {
-            var newOffset = getOffsetFromPercentage(value);
+        const newOffset = getOffsetFromPercentage(value);
         return '<h1 class="sliderBubbleText">' +
             (newOffset > 0 ? '+' : '') + parseFloat(newOffset) + 's' +
             '</h1>';
@@ -108,7 +108,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
 
 function getOffsetFromPercentage(value) {
     // convert percent to fraction
-        var offset = (value - 50) / 50;
+    let offset = (value - 50) / 50;
     // multiply by offset min/max range value (-x to +x) :
     offset *= 30;
     return offset.toFixed(1);
@@ -116,32 +116,33 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
 
 function getPercentageFromOffset(value) {
     // divide by offset min/max range value (-x to +x) :
-        var percentValue = value / 30;
+    let percentValue = value / 30;
     // convert fraction to percent
     percentValue *= 50;
     percentValue += 50;
     return Math.min(100, Math.max(0, percentValue.toFixed()));
 }
 
-    function SubtitleSync(currentPlayer) {
+class SubtitleSync {
+    constructor(currentPlayer) {
         player = currentPlayer;
         init(this);
     }
 
-    SubtitleSync.prototype.destroy = function() {
+    destroy() {
         SubtitleSync.prototype.toggle('forceToHide');
         if (player) {
             playbackManager.disableShowingSubtitleOffset(player);
             playbackManager.setSubtitleOffset(0, player);
         }
-        var elem = this.element;
+        const elem = this.element;
         if (elem) {
             elem.parentNode.removeChild(elem);
             this.element = null;
         }
-    };
+    }
 
-    SubtitleSync.prototype.toggle = function(action) {
+    toggle(action) {
         if (player && playbackManager.supportSubtitleOffset(player)) {
             /* eslint-disable no-fallthrough */
             switch (action) {
@@ -170,7 +171,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
             }
             /* eslint-enable no-fallthrough */
         }
-    };
+    }
+}
 
-    return SubtitleSync;
+export default SubtitleSync;
-});

src/components/tabbedview/tabbedview.js

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

src/components/tunerPicker.js

@@ -3,7 +3,9 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
 
     browser = browser.default || browser;
     loading = loading.default || loading;
+    layoutManager = layoutManager.default || layoutManager;
     focusManager = focusManager.default || focusManager;
+    scrollHelper = scrollHelper.default || scrollHelper;
 
     var enableFocusTransform = !browser.slow && !browser.edge;
 

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

@@ -1,22 +1,22 @@
-define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], function (viewContainer, focusManager, queryString, layoutManager) {
+import viewContainer from 'viewContainer';
-    'use strict';
+import focusManager from 'focusManager';
+import queryString from 'queryString';
+import layoutManager from 'layoutManager';
 
-    focusManager = focusManager.default || focusManager;
+let currentView;
-
+let dispatchPageEvents;
-    var currentView;
-    var dispatchPageEvents;
 
 viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
-        var lastView = currentView;
+    const lastView = currentView;
     if (lastView) {
-            var beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
+        const beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
 
         if (!beforeHideResult) {
             // todo: cancel
         }
     }
 
-        var eventDetail = getViewEventDetail(newView, options, isRestored);
+    const eventDetail = getViewEventDetail(newView, options, isRestored);
 
     if (!newView.initComplete) {
         newView.initComplete = true;
@@ -36,14 +36,14 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
 });
 
 function onViewChange(view, options, isRestore) {
-        var lastView = currentView;
+    const lastView = currentView;
     if (lastView) {
         dispatchViewEvent(lastView, null, 'viewhide');
     }
 
     currentView = view;
 
-        var eventDetail = getViewEventDetail(view, options, isRestore);
+    const eventDetail = getViewEventDetail(view, options, isRestore);
 
     if (!isRestore) {
         if (options.autoFocus !== false) {
@@ -65,7 +65,7 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
 }
 
 function getProperties(view) {
-        var props = view.getAttribute('data-properties');
+    const props = view.getAttribute('data-properties');
 
     if (props) {
         return props.split(',');
@@ -88,7 +88,7 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
 
     eventInfo.cancelable = isCancellable || false;
 
-        var eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
+    const eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
 
     if (dispatchPageEvents) {
         eventInfo.cancelable = false;
@@ -99,9 +99,9 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
 }
 
 function getViewEventDetail(view, options, isRestore) {
-        var url = options.url;
+    const url = options.url;
-        var index = url.indexOf('?');
+    const index = url.indexOf('?');
-        var params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
+    const params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
 
     return {
         detail: {
@@ -126,11 +126,9 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
 
 document.addEventListener('skinunload', resetCachedViews);
 
-    function ViewManager() {
+class ViewManager {
-    }
+    loadView(options) {
-
+        const lastView = currentView;
-    ViewManager.prototype.loadView = function (options) {
-        var lastView = currentView;
 
         // Record the element that has focus
         if (lastView) {
@@ -144,9 +142,9 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
         viewContainer.loadView(options).then(function (view) {
             onViewChange(view, options);
         });
-    };
+    }
 
-    ViewManager.prototype.tryRestoreView = function (options, onViewChanging) {
+    tryRestoreView(options, onViewChanging) {
         if (options.cancel) {
             return Promise.reject({ cancelled: true });
         }
@@ -160,15 +158,15 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
             onViewChanging();
             onViewChange(view, options, true);
         });
-    };
+    }
 
-    ViewManager.prototype.currentView = function () {
+    currentView() {
         return currentView;
-    };
+    }
 
-    ViewManager.prototype.dispatchPageEvents = function (value) {
+    dispatchPageEvents(value) {
         dispatchPageEvents = value;
-    };
+    }
+}
 
-    return new ViewManager();
+export default new ViewManager();
-});

src/components/viewSettings/viewSettings.js

@@ -2,6 +2,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
     'use strict';
 
     appRouter = appRouter.default || appRouter;
+    layoutManager = layoutManager.default || layoutManager;
 
     function onSubmit(e) {
         e.preventDefault();
@@ -31,6 +32,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

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

src/controllers/dashboard/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

@@ -1,14 +1,14 @@
-define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'emby-button'], function ($, loading, libraryMenu, globalize, connectionManager) {
+import $ from 'jQuery';
-    'use strict';
+import loading from 'loading';
-
+import globalize from 'globalize';
-    loading = loading.default || loading;
+import 'emby-button';
 
 function populateHistory(packageInfo, page) {
-        var html = '';
+    let html = '';
-        var length = Math.min(packageInfo.versions.length, 10);
+    const length = Math.min(packageInfo.versions.length, 10);
 
-        for (var i = 0; i < length; i++) {
+    for (let i = 0; i < length; i++) {
-            var 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>';
     }
@@ -17,27 +17,27 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
 }
 
 function populateVersions(packageInfo, page, installedPlugin) {
-        var html = '';
+    let html = '';
 
-        for (var i = 0; i < packageInfo.versions.length; i++) {
+    for (let i = 0; i < packageInfo.versions.length; i++) {
-            var version = packageInfo.versions[i];
+        const version = packageInfo.versions[i];
         html += '<option value="' + version.version + '">' + version.version + '</option>';
     }
 
-        var selectmenu = $('#selectVersion', page).html(html);
+    const selectmenu = $('#selectVersion', page).html(html);
 
     if (!installedPlugin) {
         $('#pCurrentVersion', page).hide().html('');
     }
 
-        var packageVersion = packageInfo.versions[0];
+    const packageVersion = packageInfo.versions[0];
     if (packageVersion) {
         selectmenu.val(packageVersion.version);
     }
 }
 
 function renderPackage(pkg, installedPlugins, page) {
-        var installedPlugin = installedPlugins.filter(function (ip) {
+    const installedPlugin = installedPlugins.filter(function (ip) {
         return ip.Name == pkg.name;
     })[0];
 
@@ -58,7 +58,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
     $('#developer', page).html(pkg.owner);
 
     if (installedPlugin) {
-            var currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
+        const currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
         $('#pCurrentVersion', page).show().html(currentVersionText);
     } else {
         $('#pCurrentVersion', page).hide().html('');
@@ -68,34 +68,36 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
 }
 
 function alertText(options) {
-        require(['alert'], function ({default: alert}) {
+    import('alert').then(({default: alert}) => {
         alert(options);
     });
 }
 
 function performInstallation(page, name, guid, version) {
-        var developer = $('#developer', page).html().toLowerCase();
+    const developer = $('#developer', page).html().toLowerCase();
 
-        var alertCallback = function () {
+    const alertCallback = function () {
         loading.show();
         page.querySelector('#btnInstall').disabled = true;
-            ApiClient.installPlugin(name, guid, version).then(function () {
+        ApiClient.installPlugin(name, guid, version).then(() => {
             loading.hide();
             alertText(globalize.translate('MessagePluginInstalled'));
+        }).catch(() => {
+            alertText(globalize.translate('MessagePluginInstallError'));
         });
     };
 
     if (developer !== 'jellyfin') {
         loading.hide();
-            var msg = globalize.translate('MessagePluginInstallDisclaimer');
+        let msg = globalize.translate('MessagePluginInstallDisclaimer');
         msg += '<br/>';
         msg += '<br/>';
         msg += globalize.translate('PleaseConfirmPluginInstallation');
 
-            require(['confirm'], function (confirm) {
+        import('confirm').then(({default: confirm}) => {
-                confirm.default(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
+            confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
                 alertCallback();
-                }, function () {
+            }).catch(() => {
                 console.debug('plugin not installed');
             });
         });
@@ -104,18 +106,18 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
     }
 }
 
-    return function (view, params) {
+export default function(view, params) {
     $('.addPluginForm', view).on('submit', function () {
         loading.show();
-            var page = $(this).parents('#addPluginPage')[0];
+        const page = $(this).parents('#addPluginPage')[0];
-            var name = params.name;
+        const name = params.name;
-            var guid = params.guid;
+        const guid = params.guid;
         ApiClient.getInstalledPlugins().then(function (plugins) {
-                var installedPlugin = plugins.filter(function (plugin) {
+            const installedPlugin = plugins.filter(function (plugin) {
                 return plugin.Name == name;
             })[0];
 
-                var version = $('#selectVersion', page).val();
+            const version = $('#selectVersion', page).val();
             if (installedPlugin && installedPlugin.Version === version) {
                 loading.hide();
                 Dashboard.alert({
@@ -125,19 +127,20 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
             } else {
                 performInstallation(page, name, guid, version);
             }
+        }).catch(() => {
+            alertText(globalize.translate('MessageGetInstalledPluginsError'));
         });
         return false;
     });
     view.addEventListener('viewshow', function () {
-            var page = this;
+        const page = this;
         loading.show();
-            var name = params.name;
+        const name = params.name;
-            var guid = params.guid;
+        const guid = params.guid;
-            var promise1 = ApiClient.getPackageInfo(name, guid);
+        const promise1 = ApiClient.getPackageInfo(name, guid);
-            var promise2 = ApiClient.getInstalledPlugins();
+        const promise2 = ApiClient.getInstalledPlugins();
         Promise.all([promise1, promise2]).then(function (responses) {
             renderPackage(responses[0], responses[1], page);
         });
     });
-    };
+}
-});

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

@@ -1,12 +1,15 @@
-define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
+import loading from 'loading';
-    'use strict';
+import libraryMenu from 'libraryMenu';
-
+import globalize from 'globalize';
-    loading = loading.default || loading;
+import 'cardStyle';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-select';
 
 function reloadList(page) {
     loading.show();
-        var promise1 = ApiClient.getAvailablePlugins();
+    const promise1 = ApiClient.getAvailablePlugins();
-        var promise2 = ApiClient.getInstalledPlugins();
+    const promise2 = ApiClient.getInstalledPlugins();
     Promise.all([promise1, promise2]).then(function (responses) {
         populateList({
             catalogElement: page.querySelector('#pluginTiles'),
@@ -19,6 +22,7 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
 
 function getHeaderText(category) {
     category = category.replace(' ', '');
+    // TODO: Replace with switch
     if (category === 'Channel') {
         category = 'Channels';
     } else if (category === 'Theme') {
@@ -33,8 +37,8 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
 }
 
 function populateList(options) {
-        var availablePlugins = options.availablePlugins;
+    const availablePlugins = options.availablePlugins;
-        var installedPlugins = options.installedPlugins;
+    const installedPlugins = options.installedPlugins;
 
     availablePlugins.forEach(function (plugin, index, array) {
         plugin.category = plugin.category || 'General';
@@ -56,12 +60,12 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
         return 0;
     });
 
-        var currentCategory = null;
+    let currentCategory = null;
-        var html = '';
+    let html = '';
 
-        for (var i = 0; i < availablePlugins.length; i++) {
+    for (let i = 0; i < availablePlugins.length; i++) {
-            var plugin = availablePlugins[i];
+        const plugin = availablePlugins[i];
-            var category = plugin.categoryDisplayName;
+        const category = plugin.categoryDisplayName;
         if (category != currentCategory) {
             if (currentCategory) {
                 html += '</div>';
@@ -86,14 +90,14 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
 }
 
 function getPluginHtml(plugin, options, installedPlugins) {
-        var html = '';
+    let html = '';
-        var href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
+    let href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
 
     if (options.context) {
         href += '&context=' + options.context;
     }
 
-        var target = plugin.externalUrl ? ' target="_blank"' : '';
+    const target = plugin.externalUrl ? ' target="_blank"' : '';
     html += "<div class='card backdropCard'>";
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable visualCardBox-cardScalable">';
@@ -106,7 +110,7 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
     html += "<div class='cardText'>";
     html += plugin.name;
     html += '</div>';
-        var installedPlugin = installedPlugins.filter(function (ip) {
+    const installedPlugin = installedPlugins.filter(function (ip) {
         return ip.Id == plugin.guid;
     })[0];
     html += "<div class='cardText cardText-secondary'>";
@@ -130,14 +134,9 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
     }];
 }
 
-    window.PluginCatalog = {
+export default function (view) {
-        renderCatalog: populateList
-    };
-
-    return function (view, params) {
     view.addEventListener('viewshow', function () {
         libraryMenu.setTabs('plugins', 1, getTabs);
         reloadList(this);
     });
-    };
+}
-});

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

@@ -1,12 +1,14 @@
-define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'], function (loading, libraryMenu, dom, globalize) {
+import loading from 'loading';
-    'use strict';
+import libraryMenu from 'libraryMenu';
-
+import dom from 'dom';
-    loading = loading.default || loading;
+import globalize from 'globalize';
+import 'cardStyle';
+import 'emby-button';
 
 function deletePlugin(page, uniqueid, name) {
-        var msg = globalize.translate('UninstallPluginConfirmation', name);
+    const msg = globalize.translate('UninstallPluginConfirmation', name);
 
-        require(['confirm'], function (confirm) {
+    import('confirm').then(({default: confirm}) => {
         confirm.default({
             title: globalize.translate('HeaderUninstallPlugin'),
             text: msg,
@@ -34,11 +36,11 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
 }
 
 function getPluginCardHtml(plugin, pluginConfigurationPages) {
-        var configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
+    const configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
         return pluginConfigurationPage.PluginId == plugin.Id;
     })[0];
-        var configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;
+    const configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;
-        var html = '';
+    let html = '';
     html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' data-removable='" + plugin.CanUninstall + "' class='card backdropCard'>";
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable">';
@@ -82,11 +84,11 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
         return -1;
     });
 
-        var html = plugins.map(function (p) {
+    let html = plugins.map(function (p) {
         return getPluginCardHtml(p, pluginConfigurationPages);
     }).join('');
 
-        var installedPluginsElement = page.querySelector('.installedPlugins');
+    const installedPluginsElement = page.querySelector('.installedPlugins');
     installedPluginsElement.removeEventListener('click', onInstalledPluginsClick);
     installedPluginsElement.addEventListener('click', onInstalledPluginsClick);
 
@@ -107,12 +109,12 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
 }
 
 function showPluginMenu(page, elem) {
-        var card = dom.parentWithClass(elem, 'card');
+    const card = dom.parentWithClass(elem, 'card');
-        var id = card.getAttribute('data-id');
+    const id = card.getAttribute('data-id');
-        var name = card.getAttribute('data-name');
+    const name = card.getAttribute('data-name');
-        var removable = card.getAttribute('data-removable');
+    const removable = card.getAttribute('data-removable');
-        var configHref = card.querySelector('.cardContent').getAttribute('href');
+    const configHref = card.querySelector('.cardContent').getAttribute('href');
-        var menuItems = [];
+    const menuItems = [];
 
     if (configHref) {
         menuItems.push({
@@ -130,7 +132,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
         });
     }
 
-        require(['actionsheet'], function (actionsheet) {
+    import('actionsheet').then(({default: actionsheet}) => {
         actionsheet.show({
             items: menuItems,
             positionTo: elem,
@@ -174,7 +176,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
     } else if (dom.parentWithClass(e.target, 'connectModePluginCard')) {
         showConnectMessage();
     } else {
-            var btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
+        const btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
         if (btnCardMenu) {
             showPluginMenu(dom.parentWithClass(btnCardMenu, 'page'), btnCardMenu);
         }
@@ -189,4 +191,3 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
 window.PluginsPage = {
     renderPlugins: renderPlugins
 };
-});

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

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

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

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

@@ -1,7 +1,33 @@
-define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-scroller'], function (TabbedView, globalize, require) {
+import TabbedView from 'tabbedView';
-    'use strict';
+import globalize from 'globalize';
+import 'emby-tabs';
+import 'emby-button';
+import 'emby-scroller';
 
-    function getTabs() {
+class HomeView extends TabbedView {
+    constructor(view, params) {
+        super(view, params);
+    }
+
+    setTitle() {
+        Emby.Page.setTitle(null);
+    }
+
+    onPause() {
+        super.onPause(this);
+        document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
+    }
+
+    onResume(options) {
+        super.onResume(this, options);
+        document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
+    }
+
+    getDefaultTabIndex() {
+        return 0;
+    }
+
+    getTabs() {
         return [{
             name: globalize.translate('Home')
         }, {
@@ -9,67 +35,34 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
         }];
     }
 
-    function getDefaultTabIndex() {
+    getTabController(index) {
-        return 0;
-    }
-
-    function getRequirePromise(deps) {
-        return new Promise(function (resolve, reject) {
-            require(deps, resolve);
-        });
-    }
-
-    function getTabController(index) {
         if (index == null) {
             throw new Error('index cannot be null');
         }
 
-        var depends = [];
+        let depends = '';
 
         switch (index) {
             case 0:
-                depends.push('controllers/hometab');
+                depends = 'controllers/hometab';
                 break;
 
             case 1:
-                depends.push('controllers/favorites');
+                depends = 'controllers/favorites';
         }
 
-        var instance = this;
+        const instance = this;
-        return getRequirePromise(depends).then(function (controllerFactory) {
+        return import(depends).then(({ default: controllerFactory }) => {
-            var controller = instance.tabControllers[index];
+            let controller = instance.tabControllers[index];
 
             if (!controller) {
-                controller = new controllerFactory.default(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
+                controller = new controllerFactory(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
                 instance.tabControllers[index] = controller;
             }
 
             return controller;
         });
     }
-
-    function HomeView(view, params) {
-        TabbedView.call(this, view, params);
 }
 
-    Object.assign(HomeView.prototype, TabbedView.prototype);
+export default HomeView;
-    HomeView.prototype.getTabs = getTabs;
-    HomeView.prototype.getDefaultTabIndex = getDefaultTabIndex;
-    HomeView.prototype.getTabController = getTabController;
-
-    HomeView.prototype.setTitle = function () {
-        Emby.Page.setTitle(null);
-    };
-
-    HomeView.prototype.onPause = function () {
-        TabbedView.prototype.onPause.call(this);
-        document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
-    };
-
-    HomeView.prototype.onResume = function (options) {
-        TabbedView.prototype.onResume.call(this, options);
-        document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
-    };
-
-    return HomeView;
-});

src/controllers/itemDetails/index.js

@@ -1,3 +1,4 @@
+import appHost from 'apphost';
 import loading from 'loading';
 import appRouter from 'appRouter';
 import layoutManager from 'layoutManager';
@@ -373,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, {
@@ -657,7 +658,7 @@ import 'emby-select';
         setPeopleHeader(page, item);
         loading.hide();
 
-        if (item.Type === 'Book') {
+        if (item.Type === 'Book' && item.CanDownload && appHost.supports('filedownload')) {
             hideAll(page, 'btnDownload', true);
         }
 

src/controllers/list.js

@@ -1,12 +1,21 @@
-define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, AlphaPicker) {
+import globalize from 'globalize';
-    'use strict';
+import listView from 'listView';
+import layoutManager from 'layoutManager';
+import * as userSettings from 'userSettings';
+import focusManager from 'focusManager';
+import cardBuilder from 'cardBuilder';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
+import AlphaNumericShortcuts from 'alphaNumericShortcuts';
+import playbackManager from 'playbackManager';
+import AlphaPicker from 'alphaPicker';
+import 'emby-itemscontainer';
+import 'emby-scroller';
 
-    playbackManager = playbackManager.default || playbackManager;
+/* eslint-disable indent */
-    loading = loading.default || loading;
-    focusManager = focusManager.default || focusManager;
 
     function getInitialLiveTvQuery(instance, params) {
-        var query = {
+        const query = {
             UserId: connectionManager.getApiClient(params.serverId).getCurrentUserId(),
             StartIndex: 0,
             Fields: 'ChannelInfo,PrimaryImageAspectRatio',
@@ -63,7 +72,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     }
 
     function modifyQueryWithFilters(instance, query) {
-        var sortValues = instance.getSortValues();
+        const sortValues = instance.getSortValues();
 
         if (!query.SortBy) {
             query.SortBy = sortValues.sortBy;
@@ -72,9 +81,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
 
         query.Fields = query.Fields ? query.Fields + ',PrimaryImageAspectRatio' : 'PrimaryImageAspectRatio';
         query.ImageTypeLimit = 1;
-        var hasFilters;
+        let hasFilters;
-        var queryFilters = [];
+        const queryFilters = [];
-        var filters = instance.getFilters();
+        const filters = instance.getFilters();
 
         if (filters.IsPlayed) {
             queryFilters.push('IsPlayed');
@@ -168,21 +177,21 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     }
 
     function updateSortText(instance) {
-        var btnSortText = instance.btnSortText;
+        const btnSortText = instance.btnSortText;
 
         if (btnSortText) {
-            var options = instance.getSortMenuOptions();
+            const options = instance.getSortMenuOptions();
-            var values = instance.getSortValues();
+            const values = instance.getSortValues();
-            var sortBy = values.sortBy;
+            const sortBy = values.sortBy;
 
-            for (var i = 0, length = options.length; i < length; i++) {
+            for (const option of options) {
-                if (sortBy === options[i].value) {
+                if (sortBy === option.value) {
-                    btnSortText.innerHTML = globalize.translate('SortByValue', options[i].name);
+                    btnSortText.innerHTML = globalize.translate('SortByValue', option.name);
                     break;
                 }
             }
 
-            var btnSortIcon = instance.btnSortIcon;
+            const btnSortIcon = instance.btnSortIcon;
 
             if (btnSortIcon) {
                 setSortButtonIcon(btnSortIcon, values.sortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward');
@@ -202,10 +211,10 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
 
     function updateAlphaPickerState(instance, numItems) {
         if (instance.alphaPicker) {
-            var alphaPicker = instance.alphaPickerElement;
+            const alphaPicker = instance.alphaPickerElement;
 
             if (alphaPicker) {
-                var values = instance.getSortValues();
+                const values = instance.getSortValues();
 
                 if (numItems == null) {
                     numItems = 100;
@@ -223,7 +232,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     }
 
     function getItems(instance, params, item, sortBy, startIndex, limit) {
-        var apiClient = connectionManager.getApiClient(params.serverId);
+        const apiClient = connectionManager.getApiClient(params.serverId);
 
         instance.queryRecursive = false;
         if (params.type === 'Recordings') {
@@ -252,7 +261,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
 
         if (!item) {
             instance.queryRecursive = true;
-            var method = 'getItems';
+            let method = 'getItems';
 
             if (params.type === 'MusicArtist') {
                 method = 'getArtists';
@@ -275,7 +284,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
 
         if (item.Type === 'Genre' || item.Type === 'MusicGenre' || item.Type === 'Studio' || item.Type === 'Person') {
             instance.queryRecursive = true;
-            var query = {
+            const query = {
                 StartIndex: startIndex,
                 Limit: limit,
                 Fields: 'PrimaryImageAspectRatio,SortName',
@@ -324,8 +333,8 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             return Promise.resolve(null);
         }
 
-        var apiClient = connectionManager.getApiClient(params.serverId);
+        const apiClient = connectionManager.getApiClient(params.serverId);
-        var itemId = params.genreId || params.musicGenreId || params.studioId || params.personId || params.parentId;
+        const itemId = params.genreId || params.musicGenreId || params.studioId || params.personId || params.parentId;
 
         if (itemId) {
             return apiClient.getItem(apiClient.getCurrentUserId(), itemId);
@@ -335,9 +344,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     }
 
     function showViewSettingsMenu() {
-        var instance = this;
+        const instance = this;
 
-        require(['viewSettings'], function (ViewSettings) {
+        import('viewSettings').then(({default: ViewSettings}) => {
             new ViewSettings().show({
                 settingsKey: instance.getSettingsKey(),
                 settings: instance.getViewSettings(),
@@ -350,9 +359,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     }
 
     function showFilterMenu() {
-        var instance = this;
+        const instance = this;
 
-        require(['filterMenu'], function (FilterMenu) {
+        import('filterMenu').then(({default: FilterMenu}) => {
             new FilterMenu().show({
                 settingsKey: instance.getSettingsKey(),
                 settings: instance.getFilters(),
@@ -369,9 +378,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     }
 
     function showSortMenu() {
-        var instance = this;
+        const instance = this;
 
-        require(['sortMenu'], function (SortMenu) {
+        import('sortMenu').then(({default: SortMenu}) => {
             new SortMenu().show({
                 settingsKey: instance.getSettingsKey(),
                 settings: instance.getSortValues(),
@@ -387,10 +396,10 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     }
 
     function onNewItemClick() {
-        var instance = this;
+        const instance = this;
 
-        require(['playlistEditor'], function (playlistEditor) {
+        import('playlistEditor').then(({default: playlistEditor}) => {
-            new playlistEditor.showEditor({
+            new playlistEditor({
                 items: [],
                 serverId: instance.params.serverId
             });
@@ -398,22 +407,23 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     }
 
     function hideOrShowAll(elems, hide) {
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (const elem of elems) {
             if (hide) {
-                elems[i].classList.add('hide');
+                elem.classList.add('hide');
             } else {
-                elems[i].classList.remove('hide');
+                elem.classList.remove('hide');
             }
         }
     }
 
     function bindAll(elems, eventName, fn) {
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (const elem of elems) {
-            elems[i].addEventListener(eventName, fn);
+            elem.addEventListener(eventName, fn);
         }
     }
 
-    function ItemsView(view, params) {
+class ItemsView {
+    constructor(view, params) {
         function fetchData() {
             return getItems(self, params, self.currentItem).then(function (result) {
                 if (self.totalItemCount == null) {
@@ -426,7 +436,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         }
 
         function getItemsHtml(items) {
-            var settings = self.getViewSettings();
+            const settings = self.getViewSettings();
 
             if (settings.imageType === 'list') {
                 return listView.getListViewHtml({
@@ -434,13 +444,13 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 });
             }
 
-            var shape;
+            let shape;
-            var preferThumb;
+            let preferThumb;
-            var preferDisc;
+            let preferDisc;
-            var preferLogo;
+            let preferLogo;
-            var defaultShape;
+            let defaultShape;
-            var item = self.currentItem;
+            const item = self.currentItem;
-            var lines = settings.showTitle ? 2 : 0;
+            let lines = settings.showTitle ? 2 : 0;
 
             if (settings.imageType === 'banner') {
                 shape = 'banner';
@@ -464,7 +474,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 shape = 'autoVertical';
             }
 
-            var posterOptions = {
+            let posterOptions = {
                 shape: shape,
                 showTitle: settings.showTitle,
                 showYear: settings.showTitle,
@@ -497,19 +507,19 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 lines = 1;
             } else if (params.type === 'Programs') {
                 lines = settings.showTitle ? 1 : 0;
-                var showParentTitle = settings.showTitle && params.IsMovie !== 'true';
+                const showParentTitle = settings.showTitle && params.IsMovie !== 'true';
 
                 if (showParentTitle) {
                     lines++;
                 }
 
-                var showAirTime = settings.showTitle && params.type !== 'Recordings';
+                const showAirTime = settings.showTitle && params.type !== 'Recordings';
 
                 if (showAirTime) {
                     lines++;
                 }
 
-                var showYear = settings.showTitle && params.IsMovie === 'true' && params.type === 'Recordings';
+                const showYear = settings.showTitle && params.IsMovie === 'true' && params.type === 'Recordings';
 
                 if (showYear) {
                     lines++;
@@ -542,13 +552,13 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
 
         function initAlphaPicker() {
             self.scroller = view.querySelector('.scrollFrameY');
-            var alphaPickerElement = self.alphaPickerElement;
+            const alphaPickerElement = self.alphaPickerElement;
 
             alphaPickerElement.classList.add('alphaPicker-fixed-right');
             alphaPickerElement.classList.add('focuscontainer-right');
             self.itemsContainer.parentNode.classList.add('padded-right-withalphapicker');
 
-            self.alphaPicker = new AlphaPicker.default({
+            self.alphaPicker = new AlphaPicker({
                 element: alphaPickerElement,
                 itemsContainer: layoutManager.tv ? self.itemsContainer : null,
                 itemClass: 'card',
@@ -653,7 +663,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         }
 
         function play() {
-            var currentItem = self.currentItem;
+            const currentItem = self.currentItem;
 
             if (currentItem && !self.hasFilters) {
                 playbackManager.play({
@@ -669,7 +679,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         }
 
         function queue() {
-            var currentItem = self.currentItem;
+            const currentItem = self.currentItem;
 
             if (currentItem && !self.hasFilters) {
                 playbackManager.queue({
@@ -685,7 +695,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         }
 
         function shuffle() {
-            var currentItem = self.currentItem;
+            const currentItem = self.currentItem;
 
             if (currentItem && !self.hasFilters) {
                 playbackManager.shuffle(currentItem);
@@ -698,7 +708,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             }
         }
 
-        var self = this;
+        const self = this;
         self.params = params;
         this.itemsContainer = view.querySelector('.itemsContainer');
 
@@ -712,20 +722,17 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             this.itemsContainer.setAttribute('data-refreshinterval', '300000');
         }
 
-        var i;
+        const btnViewSettings = view.querySelectorAll('.btnViewSettings');
-        var length;
-        var btnViewSettings = view.querySelectorAll('.btnViewSettings');
 
-        for (i = 0, length = btnViewSettings.length; i < length; i++) {
+        for (const btnViewSetting of btnViewSettings) {
-            btnViewSettings[i].addEventListener('click', showViewSettingsMenu.bind(this));
+            btnViewSetting.addEventListener('click', showViewSettingsMenu.bind(this));
         }
 
-        var filterButtons = view.querySelectorAll('.btnFilter');
+        const filterButtons = view.querySelectorAll('.btnFilter');
         this.filterButtons = filterButtons;
-        var hasVisibleFilters = this.getVisibleFilters().length;
+        const hasVisibleFilters = this.getVisibleFilters().length;
 
-        for (i = 0, length = filterButtons.length; i < length; i++) {
+        for (const btnFilter of filterButtons) {
-            var btnFilter = filterButtons[i];
             btnFilter.addEventListener('click', showFilterMenu.bind(this));
 
             if (hasVisibleFilters) {
@@ -735,10 +742,10 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             }
         }
 
-        var sortButtons = view.querySelectorAll('.btnSort');
+        const sortButtons = view.querySelectorAll('.btnSort');
 
-        for (this.sortButtons = sortButtons, i = 0, length = sortButtons.length; i < length; i++) {
+        this.sortButtons = sortButtons;
-            var sortButton = sortButtons[i];
+        for (const sortButton of sortButtons) {
             sortButton.addEventListener('click', showSortMenu.bind(this));
 
             if (params.type !== 'nextup') {
@@ -753,7 +760,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         self.itemsContainer.fetchData = fetchData;
         self.itemsContainer.getItemsHtml = getItemsHtml;
         view.addEventListener('viewshow', function (e) {
-            var isRestored = e.detail.isRestored;
+            const isRestored = e.detail.isRestored;
 
             if (!isRestored) {
                 loading.show();
@@ -765,7 +772,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             getItem(params).then(function (item) {
                 setTitle(item);
                 self.currentItem = item;
-                var refresh = !isRestored;
+                const refresh = !isRestored;
                 self.itemsContainer.resume({
                     refresh: refresh
                 }).then(function () {
@@ -780,7 +787,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                     initAlphaPicker();
                 }
 
-                var itemType = item ? item.Type : null;
+                const itemType = item ? item.Type : null;
 
                 if (itemType === 'MusicGenre' || params.type !== 'Programs' && itemType !== 'Channel') {
                     hideOrShowAll(view.querySelectorAll('.btnPlay'), false);
@@ -807,18 +814,18 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 bindAll(view.querySelectorAll('.btnShuffle'), 'click', shuffle);
             }
 
-            self.alphaNumericShortcuts = new AlphaNumericShortcuts.default({
+            self.alphaNumericShortcuts = new AlphaNumericShortcuts({
                 itemsContainer: self.itemsContainer
             });
         });
         view.addEventListener('viewhide', function (e) {
-            var itemsContainer = self.itemsContainer;
+            const itemsContainer = self.itemsContainer;
 
             if (itemsContainer) {
                 itemsContainer.pause();
             }
 
-            var alphaNumericShortcuts = self.alphaNumericShortcuts;
+            const alphaNumericShortcuts = self.alphaNumericShortcuts;
 
             if (alphaNumericShortcuts) {
                 alphaNumericShortcuts.destroy();
@@ -846,8 +853,8 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         });
     }
 
-    ItemsView.prototype.getFilters = function () {
+    getFilters() {
-        var basekey = this.getSettingsKey();
+        const basekey = this.getSettingsKey();
         return {
             IsPlayed: userSettings.getFilter(basekey + '-filter-IsPlayed') === 'true',
             IsUnplayed: userSettings.getFilter(basekey + '-filter-IsUnplayed') === 'true',
@@ -866,39 +873,37 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             HasThemeVideo: userSettings.getFilter(basekey + '-filter-HasThemeVideo'),
             GenreIds: userSettings.getFilter(basekey + '-filter-GenreIds')
         };
-    };
+    }
 
-    ItemsView.prototype.getSortValues = function () {
+    getSortValues() {
-        var basekey = this.getSettingsKey();
+        const basekey = this.getSettingsKey();
         return {
             sortBy: userSettings.getFilter(basekey + '-sortby') || this.getDefaultSortBy(),
             sortOrder: userSettings.getFilter(basekey + '-sortorder') === 'Descending' ? 'Descending' : 'Ascending'
         };
-    };
+    }
 
-    ItemsView.prototype.getDefaultSortBy = function () {
+    getDefaultSortBy() {
-        var params = this.params;
+        const sortNameOption = this.getNameSortOption(this.params);
-        var sortNameOption = this.getNameSortOption(params);
 
-        if (params.type) {
+        if (this.params.type) {
             return sortNameOption.value;
         }
 
         return 'IsFolder,' + sortNameOption.value;
-    };
+    }
 
-    ItemsView.prototype.getSortMenuOptions = function () {
+    getSortMenuOptions() {
-        var sortBy = [];
+        const sortBy = [];
-        var params = this.params;
 
-        if (params.type === 'Programs') {
+        if (this.params.type === 'Programs') {
             sortBy.push({
                 name: globalize.translate('AirDate'),
                 value: 'StartDate,SortName'
             });
         }
 
-        var option = this.getNameSortOption(params);
+        let option = this.getNameSortOption(this.params);
 
         if (option) {
             sortBy.push(option);
@@ -916,7 +921,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             sortBy.push(option);
         }
 
-        if (params.type !== 'Programs') {
+        if (this.params.type !== 'Programs') {
             sortBy.push({
                 name: globalize.translate('DateAdded'),
                 value: 'DateCreated,SortName'
@@ -929,8 +934,8 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             sortBy.push(option);
         }
 
-        if (!params.type) {
+        if (!this.params.type) {
-            option = this.getNameSortOption(params);
+            option = this.getNameSortOption(this.params);
             sortBy.push({
                 name: globalize.translate('Folders'),
                 value: 'IsFolder,' + option.value
@@ -956,9 +961,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             value: 'Runtime,SortName'
         });
         return sortBy;
-    };
+    }
 
-    ItemsView.prototype.getNameSortOption = function (params) {
+    getNameSortOption(params) {
         if (params.type === 'Episode') {
             return {
                 name: globalize.translate('Name'),
@@ -970,9 +975,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             name: globalize.translate('Name'),
             value: 'SortName'
         };
-    };
+    }
 
-    ItemsView.prototype.getPlayCountSortOption = function () {
+    getPlayCountSortOption() {
         if (this.params.type === 'Programs') {
             return null;
         }
@@ -981,9 +986,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             name: globalize.translate('PlayCount'),
             value: 'PlayCount,SortName'
         };
-    };
+    }
 
-    ItemsView.prototype.getDatePlayedSortOption = function () {
+    getDatePlayedSortOption() {
         if (this.params.type === 'Programs') {
             return null;
         }
@@ -992,9 +997,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             name: globalize.translate('DatePlayed'),
             value: 'DatePlayed,SortName'
         };
-    };
+    }
 
-    ItemsView.prototype.getCriticRatingSortOption = function () {
+    getCriticRatingSortOption() {
         if (this.params.type === 'Programs') {
             return null;
         }
@@ -1003,18 +1008,18 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             name: globalize.translate('CriticRating'),
             value: 'CriticRating,SortName'
         };
-    };
+    }
 
-    ItemsView.prototype.getCommunityRatingSortOption = function () {
+    getCommunityRatingSortOption() {
         return {
             name: globalize.translate('CommunityRating'),
             value: 'CommunityRating,SortName'
         };
-    };
+    }
 
-    ItemsView.prototype.getVisibleFilters = function () {
+    getVisibleFilters() {
-        var filters = [];
+        const filters = [];
-        var params = this.params;
+        const params = this.params;
 
         if (!(params.type === 'nextup')) {
             if (params.type === 'Programs') {
@@ -1038,16 +1043,15 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         }
 
         return filters;
-    };
+    }
 
-    ItemsView.prototype.setFilterStatus = function (hasFilters) {
+    setFilterStatus(hasFilters) {
         this.hasFilters = hasFilters;
-        var filterButtons = this.filterButtons;
+        const filterButtons = this.filterButtons;
 
         if (filterButtons.length) {
-            for (var i = 0, length = filterButtons.length; i < length; i++) {
+            for (const btnFilter of filterButtons) {
-                var btnFilter = filterButtons[i];
+                let bubble = btnFilter.querySelector('.filterButtonBubble');
-                var bubble = btnFilter.querySelector('.filterButtonBubble');
 
                 if (!bubble) {
                     if (!hasFilters) {
@@ -1066,10 +1070,10 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 }
             }
         }
-    };
+    }
 
-    ItemsView.prototype.getFilterMenuOptions = function () {
+    getFilterMenuOptions() {
-        var params = this.params;
+        const params = this.params;
         return {
             IsAiring: params.IsAiring,
             IsMovie: params.IsMovie,
@@ -1079,11 +1083,11 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             IsSeries: params.IsSeries,
             Recursive: this.queryRecursive
         };
-    };
+    }
 
-    ItemsView.prototype.getVisibleViewSettings = function () {
+    getVisibleViewSettings() {
-        var item = (this.params, this.currentItem);
+        const item = (this.params, this.currentItem);
-        var fields = ['showTitle'];
+        const fields = ['showTitle'];
 
         if (!item || item.Type !== 'PhotoAlbum' && item.Type !== 'ChannelFolderItem') {
             fields.push('imageType');
@@ -1091,13 +1095,13 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
 
         fields.push('viewType');
         return fields;
-    };
+    }
 
-    ItemsView.prototype.getViewSettings = function () {
+    getViewSettings() {
-        var basekey = this.getSettingsKey();
+        const basekey = this.getSettingsKey();
-        var params = this.params;
+        const params = this.params;
-        var item = this.currentItem;
+        const item = this.currentItem;
-        var showTitle = userSettings.get(basekey + '-showTitle');
+        let showTitle = userSettings.get(basekey + '-showTitle');
 
         if (showTitle === 'true') {
             showTitle = true;
@@ -1109,7 +1113,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             showTitle = true;
         }
 
-        var imageType = userSettings.get(basekey + '-imageType');
+        let imageType = userSettings.get(basekey + '-imageType');
 
         if (!imageType && params.type === 'nextup') {
             imageType = 'thumb';
@@ -1121,10 +1125,10 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             imageType: imageType || 'primary',
             viewType: userSettings.get(basekey + '-viewType') || 'images'
         };
-    };
+    }
 
-    ItemsView.prototype.getItemTypes = function () {
+    getItemTypes() {
-        var params = this.params;
+        const params = this.params;
 
         if (params.type === 'nextup') {
             return ['Episode'];
@@ -1135,12 +1139,12 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         }
 
         return [];
-    };
+    }
 
-    ItemsView.prototype.getSettingsKey = function () {
+    getSettingsKey() {
-        var values = [];
+        const values = [];
         values.push('items');
-        var params = this.params;
+        const params = this.params;
 
         if (params.type) {
             values.push(params.type);
@@ -1197,7 +1201,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         }
 
         return values.join('-');
-    };
+    }
+}
 
-    return ItemsView;
+export default ItemsView;
-});
+
+/* eslint-enable indent */

src/controllers/livetv/livetvguide.js

@@ -1,9 +1,8 @@
-define(['tvguide'], function (tvguide) {
+import tvguide from 'tvguide';
-    'use strict';
 
-    return function (view, params, tabContent) {
+export default function (view, params, tabContent) {
-        var guideInstance;
+    let guideInstance;
-        var self = this;
+    const self = this;
 
     self.renderTab = function () {
         if (!guideInstance) {
@@ -25,5 +24,4 @@ define(['tvguide'], function (tvguide) {
             guideInstance.pause();
         }
     };
-    };
+}
-});

src/controllers/livetv/livetvsuggested.js

@@ -2,6 +2,7 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
     'use strict';
 
     loading = loading.default || loading;
+    layoutManager = layoutManager.default || layoutManager;
 
     function enableScrollX() {
         return !layoutManager.desktop;
@@ -169,9 +170,6 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
             name: globalize.translate('HeaderSchedule')
         }, {
             name: globalize.translate('TabSeries')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -255,12 +253,11 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
                 case 5:
                     depends.push('controllers/livetv/livetvseriestimers');
                     break;
-
-                case 6:
-                    depends.push('scripts/searchtab');
             }
 
             require(depends, function (controllerFactory) {
+                controllerFactory = controllerFactory.default || controllerFactory;
+
                 var tabContent;
 
                 if (index == 0) {

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')
         }, {
@@ -236,9 +236,6 @@ import 'emby-button';
             name: globalize.translate('TabCollections')
         }, {
             name: globalize.translate('TabGenres')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -306,10 +303,6 @@ import 'emby-button';
                 case 5:
                     depends = 'controllers/movies/moviegenres';
                     break;
-
-                case 6:
-                    depends = 'scripts/searchtab';
-                    break;
             }
 
             import(depends).then(({default: controllerFactory}) => {

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,22 +177,19 @@ 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')
         }, {
             name: globalize.translate('TabSongs')
         }, {
             name: globalize.translate('TabGenres')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -295,10 +291,6 @@ import 'flexStyles';
                 case 6:
                     depends = 'controllers/music/musicgenres';
                     break;
-
-                case 7:
-                    depends = 'scripts/searchtab';
-                    break;
             }
 
             import(depends).then(({default: controllerFactory}) => {