Merge branch 'master' into livetvsuggested-to-es6-module-migration

.eslintignore

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

CONTRIBUTORS.md

@@ -35,6 +35,7 @@
  - [Thibault Nocchi](https://github.com/ThibaultNocchi)
  - [MrTimscampi](https://github.com/MrTimscampi)
  - [Sarab Singh](https://github.com/sarab97)
+ - [GuilhermeHideki](https://github.com/GuilhermeHideki)
  - [Andrei Oanca](https://github.com/OancaAndrei)
  - [Cromefire_](https://github.com/cromefire)
 

package.json

@@ -5,7 +5,7 @@
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",
   "devDependencies": {
-    "@babel/core": "^7.11.0",
+    "@babel/core": "^7.11.1",
     "@babel/eslint-parser": "^7.11.0",
     "@babel/eslint-plugin": "^7.11.0",
     "@babel/plugin-proposal-class-properties": "^7.10.1",
@@ -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",
@@ -38,7 +38,7 @@
     "gulp-postcss": "^8.0.0",
     "gulp-sass": "^4.0.2",
     "gulp-sourcemaps": "^2.6.5",
-    "gulp-terser": "^1.2.1",
+    "gulp-terser": "^1.3.2",
     "html-webpack-plugin": "^4.3.0",
     "lazypipe": "^1.0.2",
     "node-sass": "^4.13.1",
@@ -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.2.0"
+    "whatwg-fetch": "^3.4.0"
   },
   "babel": {
     "presets": [
@@ -110,6 +110,7 @@
           "src/components/favoriteitems.js",
           "src/components/fetchhelper.js",
           "src/components/filterdialog/filterdialog.js",
+          "src/components/focusManager.js",
           "src/components/groupedcards.js",
           "src/components/homeScreenSettings/homeScreenSettings.js",
           "src/components/homesections/homesections.js",
@@ -124,6 +125,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",
@@ -140,6 +143,7 @@
           "src/components/playback/mediasession.js",
           "src/components/playback/nowplayinghelper.js",
           "src/components/playback/playbackorientation.js",
+          "src/components/playback/playbackmanager.js",
           "src/components/playback/playerSelectionMenu.js",
           "src/components/playback/playersettingsmenu.js",
           "src/components/playback/playmethodhelper.js",
@@ -151,20 +155,35 @@
           "src/components/playlisteditor/playlisteditor.js",
           "src/components/playmenu.js",
           "src/components/prompt/prompt.js",
+          "src/components/recordingcreator/seriesrecordingeditor.js",
+          "src/components/recordingcreator/recordinghelper.js",
           "src/components/refreshdialog/refreshdialog.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.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/viewManager/viewManager.js",
+          "src/components/tvproviders/schedulesdirect.js",
+          "src/components/tvproviders/xmltv.js",
+          "src/components/toast/toast.js",
+          "src/components/upnextdialog/upnextdialog.js",
+          "src/components/viewContainer.js",
+          "src/components/castSenderApi.js",
           "src/controllers/session/addServer/index.js",
           "src/controllers/session/forgotPassword/index.js",
           "src/controllers/session/redeemPassword/index.js",
@@ -191,7 +210,12 @@
           "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",
@@ -203,6 +227,17 @@
           "src/controllers/dashboard/users/userparentalcontrol.js",
           "src/controllers/dashboard/users/userpasswordpage.js",
           "src/controllers/dashboard/users/userprofilespage.js",
+          "src/controllers/list.js",
+          "src/controllers/edititemmetadata.js",
+          "src/controllers/favorites.js",
+          "src/controllers/hometab.js",
+          "src/controllers/movies/moviecollections.js",
+          "src/controllers/movies/moviegenres.js",
+          "src/controllers/movies/movies.js",
+          "src/controllers/movies/moviesrecommended.js",
+          "src/controllers/movies/movietrailers.js",
+          "src/controllers/playback/nowplaying.js",
+          "src/controllers/playback/videoosd.js",
           "src/controllers/itemDetails/index.js",
           "src/controllers/playback/queue/index.js",
           "src/controllers/playback/video/index.js",
@@ -210,7 +245,12 @@
           "src/controllers/livetvtuner.js",
           "src/controllers/livetv/livetvsuggested.js",
           "src/controllers/livetvstatus.js",
+          "src/controllers/livetvguideprovider.js",
           "src/controllers/livetvsettings.js",
+          "src/controllers/livetv/livetvrecordings.js",
+          "src/controllers/livetv/livetvschedule.js",
+          "src/controllers/livetv/livetvseriestimers.js",
+          "src/controllers/livetv/livetvchannels.js",
           "src/controllers/shows/episodes.js",
           "src/controllers/shows/tvgenres.js",
           "src/controllers/shows/tvlatest.js",
@@ -249,6 +289,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",
@@ -267,13 +310,20 @@
           "src/scripts/globalize.js",
           "src/scripts/imagehelper.js",
           "src/scripts/inputManager.js",
+          "src/scripts/autoThemes.js",
+          "src/scripts/themeManager.js",
           "src/scripts/keyboardNavigation.js",
           "src/scripts/libraryBrowser.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"
@@ -303,6 +353,7 @@
     "Firefox ESR"
   ],
   "scripts": {
+    "start": "yarn serve",
     "serve": "gulp serve --development",
     "prepare": "gulp --production",
     "build:development": "gulp --development",

scripts/duplicates.py

@@ -0,0 +1,33 @@
+import sys
+import os
+import json
+
+# load every string in the source language
+# print all duplicate values to a file
+
+cwd = os.getcwd()
+source = cwd + '/../src/strings/en-us.json'
+
+reverse = {}
+duplicates = {}
+
+with open(source) as en:
+    strings = json.load(en)
+    for key, value in strings.items():
+        if value not in reverse:
+            reverse[value] = [key]
+        else:
+            reverse[value].append(key)
+
+for key, value in reverse.items():
+    if len(value) > 1:
+        duplicates[key] = value
+
+print('LENGTH: ' + str(len(duplicates)))
+with open('duplicates.txt', 'w') as out:
+    for item in duplicates:
+      out.write(json.dumps(item) + ': ')
+      out.write(json.dumps(duplicates[item]) + '\n')
+    out.close()
+
+print('DONE')

scripts/remove.py

@@ -11,7 +11,7 @@ langlst = os.listdir(langdir)
 
 keys = []
 
-with open('scout.txt', 'r') as f:
+with open('unused.txt', 'r') as f:
     for line in f:
         keys.append(line.strip('\n'))
 

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

@@ -1,6 +1,8 @@
 define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdrop', 'browser', 'page', 'appSettings', 'apphost', 'connectionManager'], function (loading, globalize, events, viewManager, skinManager, backdrop, browser, page, appSettings, appHost, connectionManager) {
     'use strict';
 
+    viewManager = viewManager.default || viewManager;
+    browser = browser.default || browser;
     loading = loading.default || loading;
 
     var appRouter = {
@@ -36,7 +38,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
         switch (result.State) {
             case 'SignedIn':
                 loading.hide();
-                skinManager.loadUserSkin();
+                Emby.Page.goHome();
                 break;
             case 'ServerSignIn':
                 result.ApiClient.getPublicUsers().then(function (users) {
@@ -149,7 +151,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
             if (typeof route.path === 'string') {
                 loadContentUrl(ctx, next, route, currentRequest);
             } else {
-                // ? TODO
                 next();
             }
         };
@@ -287,12 +288,9 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
 
         connectionManager.connect({
             enableAutoLogin: appSettings.enableAutoLogin()
-
         }).then(function (result) {
             firstConnectionResult = result;
-
             options = options || {};
-
             page({
                 click: options.click !== false,
                 hashbang: options.hashbang !== false
@@ -344,7 +342,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
 
             if (route.isDefaultRoute) {
                 console.debug('appRouter - loading skin home page');
-                loadUserSkinWithOptions(ctx);
+                Emby.Page.goHome();
                 return;
             } else if (route.roles) {
                 validateRoles(apiClient, route.roles).then(function () {
@@ -358,15 +356,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
         callback();
     }
 
-    function loadUserSkinWithOptions(ctx) {
-        require(['queryString'], function (queryString) {
-            var params = queryString.parse(ctx.querystring);
-            skinManager.loadUserSkin({
-                start: params.start
-            });
-        });
-    }
-
     function validateRoles(apiClient, roles) {
         return Promise.all(roles.split(',').map(function (role) {
             return validateRole(apiClient, role);

src/components/apphost.js

@@ -1,6 +1,8 @@
 define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'globalize'], function (appSettings, browser, events, htmlMediaHelper, webSettings, globalize) {
     'use strict';
 
+    browser = browser.default || browser;
+
     function getBaseProfileOptions(item) {
         var disableHlsVideoAudioCodecs = [];
 
@@ -277,7 +279,7 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
         features.push('targetblank');
         features.push('screensaver');
 
-        webSettings.enableMultiServer().then(enabled => {
+        webSettings.getMultiServer().then(enabled => {
             if (enabled) features.push('multiserver');
         });
 
@@ -407,13 +409,6 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
         getPushTokenInfo: function () {
             return {};
         },
-        setThemeColor: function (color) {
-            var metaThemeColor = document.querySelector('meta[name=theme-color]');
-
-            if (metaThemeColor) {
-                metaThemeColor.setAttribute('content', color);
-            }
-        },
         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';

src/components/castSenderApi.js

@@ -1,23 +1,16 @@
-define([], function() {
+class CastSenderApi {
-    'use strict';
+    load() {
-
         if (window.appMode === 'cordova' || window.appMode === 'android') {
-        return {
-            load: function () {
             window.chrome = window.chrome || {};
             return Promise.resolve();
-            }
-        };
         } else {
-        var ccLoaded = false;
+            let ccLoaded = false;
-        return {
-            load: function () {
             if (ccLoaded) {
                 return Promise.resolve();
             }
 
-                return new Promise(function (resolve, reject) {
+            return new Promise(function (resolve) {
-                    var fileref = document.createElement('script');
+                const fileref = document.createElement('script');
                 fileref.setAttribute('type', 'text/javascript');
 
                 fileref.onload = function () {
@@ -29,6 +22,7 @@ define([], function() {
                 document.querySelector('head').appendChild(fileref);
             });
         }
-        };
     }
-});
+}
+
+export default CastSenderApi;

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

@@ -1,6 +1,5 @@
 import browser from 'browser';
 import layoutManager from 'layoutManager';
-import appSettings from 'appSettings';
 import pluginManager from 'pluginManager';
 import appHost from 'apphost';
 import focusManager from 'focusManager';
@@ -16,17 +15,22 @@ import 'emby-button';
 
 /* eslint-disable indent */
 
-    function fillThemes(select, isDashboard) {
+    function fillThemes(context, userSettings) {
-        select.innerHTML = skinManager.getThemes().map(t => {
+        const select = context.querySelector('#selectTheme');
-            let value = t.id;
-            if (t.isDefault && !isDashboard) {
-                value = '';
-            } else if (t.isDefaultServerDashboard && isDashboard) {
-                value = '';
-            }
 
-            return `<option value="${value}">${t.name}</option>`;
+        skinManager.getThemes().then(themes => {
+            select.innerHTML = themes.map(t => {
+                return `<option value="${t.id}">${t.name}</option>`;
             }).join('');
+
+            // get default theme
+            var defaultTheme = themes.find(theme => {
+                return theme.default;
+            });
+
+            // set the current theme
+            select.value = userSettings.theme() || defaultTheme.id;
+        });
     }
 
     function loadScreensavers(context, userSettings) {
@@ -46,6 +50,7 @@ import 'emby-button';
         selectScreensaver.innerHTML = options.map(o => {
             return `<option value="${o.value}">${o.name}</option>`;
         }).join('');
+
         selectScreensaver.value = userSettings.screensaver();
 
         if (!selectScreensaver.value) {
@@ -54,57 +59,6 @@ import 'emby-button';
         }
     }
 
-    function loadSoundEffects(context, userSettings) {
-        const selectSoundEffects = context.querySelector('.selectSoundEffects');
-        const options = pluginManager.ofType('soundeffects').map(plugin => {
-            return {
-                name: plugin.name,
-                value: plugin.id
-            };
-        });
-
-        options.unshift({
-            name: globalize.translate('None'),
-            value: 'none'
-        });
-
-        selectSoundEffects.innerHTML = options.map(o => {
-            return `<option value="${o.value}">${o.name}</option>`;
-        }).join('');
-        selectSoundEffects.value = userSettings.soundEffects();
-
-        if (!selectSoundEffects.value) {
-            // TODO: set the default instead of none
-            selectSoundEffects.value = 'none';
-        }
-    }
-
-    function loadSkins(context, userSettings) {
-        const selectSkin = context.querySelector('.selectSkin');
-
-        const options = pluginManager.ofType('skin').map(plugin => {
-            return {
-                name: plugin.name,
-                value: plugin.id
-            };
-        });
-
-        selectSkin.innerHTML = options.map(o => {
-            return `<option value="${o.value}">${o.name}</option>`;
-        }).join('');
-        selectSkin.value = userSettings.skin();
-
-        if (!selectSkin.value && options.length) {
-            selectSkin.value = options[0].value;
-        }
-
-        if (options.length > 1 && appHost.supports('skins')) {
-            context.querySelector('.selectSkinContainer').classList.remove('hide');
-        } else {
-            context.querySelector('.selectSkinContainer').classList.add('hide');
-        }
-    }
-
     function showOrHideMissingEpisodesField(context) {
         if (browser.tizen || browser.web0s) {
             context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide');
@@ -115,12 +69,6 @@ import 'emby-button';
     }
 
     function loadForm(context, user, userSettings) {
-        if (user.Policy.IsAdministrator) {
-            context.querySelector('.selectDashboardThemeContainer').classList.remove('hide');
-        } else {
-            context.querySelector('.selectDashboardThemeContainer').classList.add('hide');
-        }
-
         if (appHost.supports('displaylanguage')) {
             context.querySelector('.languageSection').classList.remove('hide');
         } else {
@@ -139,18 +87,6 @@ import 'emby-button';
             context.querySelector('.learnHowToContributeContainer').classList.add('hide');
         }
 
-        if (appHost.supports('runatstartup')) {
-            context.querySelector('.fldAutorun').classList.remove('hide');
-        } else {
-            context.querySelector('.fldAutorun').classList.add('hide');
-        }
-
-        if (appHost.supports('soundeffects')) {
-            context.querySelector('.fldSoundEffects').classList.remove('hide');
-        } else {
-            context.querySelector('.fldSoundEffects').classList.add('hide');
-        }
-
         if (appHost.supports('screensaver')) {
             context.querySelector('.selectScreensaverContainer').classList.remove('hide');
         } else {
@@ -173,16 +109,8 @@ import 'emby-button';
             context.querySelector('.fldThemeVideo').classList.add('hide');
         }
 
-        context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup();
+        fillThemes(context, userSettings);
-
-        const selectTheme = context.querySelector('#selectTheme');
-        const selectDashboardTheme = context.querySelector('#selectDashboardTheme');
-
-        fillThemes(selectTheme);
-        fillThemes(selectDashboardTheme, true);
         loadScreensavers(context, userSettings);
-        loadSoundEffects(context, userSettings);
-        loadSkins(context, userSettings);
 
         context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
 
@@ -198,9 +126,6 @@ import 'emby-button';
 
         context.querySelector('#txtLibraryPageSize').value = userSettings.libraryPageSize();
 
-        selectDashboardTheme.value = userSettings.dashboardTheme() || '';
-        selectTheme.value = userSettings.theme() || '';
-
         context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || '';
 
         showOrHideMissingEpisodesField(context);
@@ -209,8 +134,6 @@ import 'emby-button';
     }
 
     function saveUser(context, user, userSettingsInstance, apiClient) {
-        appSettings.runAtStartup(context.querySelector('.chkRunAtStartup').checked);
-
         user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked;
 
         if (appHost.supports('displaylanguage')) {
@@ -221,15 +144,11 @@ import 'emby-button';
 
         userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked);
         userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked);
-        userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
         userSettingsInstance.theme(context.querySelector('#selectTheme').value);
-        userSettingsInstance.soundEffects(context.querySelector('.selectSoundEffects').value);
         userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
 
         userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);
 
-        userSettingsInstance.skin(context.querySelector('.selectSkin').value);
-
         userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
         userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked);
         userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);

src/components/displaySettings/displaySettings.template.html

@@ -1,5 +1,4 @@
 <form style="margin: 0 auto;">
-
     <h2 class="sectionTitle">
         ${Display}
     </h2>
@@ -123,26 +122,14 @@
         <div class="fieldDescription">${LabelPleaseRestart}</div>
     </div>
 
-    <div class="selectContainer hide selectSkinContainer">
-        <select is="emby-select" class="selectSkin" label="${LabelSkin}"></select>
-    </div>
-
     <div class="selectContainer">
         <select id="selectTheme" is="emby-select" label="${LabelTheme}"></select>
     </div>
 
-    <div class="selectContainer selectDashboardThemeContainer hide">
-        <select id="selectDashboardTheme" is="emby-select" label="${LabelDashboardTheme}"></select>
-    </div>
-
     <div class="selectContainer hide selectScreensaverContainer">
         <select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
     </div>
 
-    <div class="selectContainer fldSoundEffects hide">
-        <select is="emby-select" class="selectSoundEffects" label="${LabelSoundEffects}"></select>
-    </div>
-
     <div class="inputContainer inputContainer-withDescription">
         <input is="emby-input" type="number" id="txtLibraryPageSize" pattern="[0-9]*" required="required" min="0" max="1000" step="1" label="${LabelLibraryPageSize}" />
         <div class="fieldDescription">${LabelLibraryPageSizeHelp}</div>
@@ -196,13 +183,6 @@
         <div class="fieldDescription checkboxFieldDescription">${EnableThemeVideosHelp}</div>
     </div>
 
-    <div class="checkboxContainer hide fldAutorun">
-        <label>
-            <input type="checkbox" is="emby-checkbox" class="chkRunAtStartup" />
-            <span>${RunAtStartup}</span>
-        </label>
-    </div>
-
     <div class="checkboxContainer checkboxContainer-withDescription fldDisplayMissingEpisodes hide">
         <label>
             <input type="checkbox" is="emby-checkbox" class="chkDisplayMissingEpisodes" />

src/components/filtermenu/filtermenu.js

@@ -1,5 +1,8 @@
 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;
+
+    layoutManager = layoutManager.default || layoutManager;
 
     function onSubmit(e) {
         e.preventDefault();
@@ -150,6 +153,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/focusManager.js

@@ -1,5 +1,7 @@
-define(['dom', 'scrollManager'], function (dom, scrollManager) {
+/* eslint-disable indent */
-    'use strict';
+
+import dom from 'dom';
+import scrollManager from 'scrollManager';
 
     var scopes = [];
     function pushScope(elem) {
@@ -472,7 +474,9 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
         }
     }
 
-    return {
+/* eslint-enable indent */
+
+export default {
     autoFocus: autoFocus,
     focus: focus,
     focusableParent: focusableParent,
@@ -505,4 +509,3 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
     focusLast: focusLast,
     moveFocus: moveFocus
 };
-});

src/components/guide/guide-settings.js

@@ -1,6 +1,9 @@
 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) {
     'use strict';
 
+    layoutManager = layoutManager.default || layoutManager;
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     function saveCategories(context, options) {
         var categories = [];
 

src/components/guide/guide.js

@@ -1,7 +1,13 @@
 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) {
     'use strict';
 
+    playbackManager = playbackManager.default || playbackManager;
+    browser = browser.default || browser;
     loading = loading.default || loading;
+    layoutManager = layoutManager.default || layoutManager;
+    focusManager = focusManager.default || focusManager;
+    scrollHelper = scrollHelper.default || scrollHelper;
+    serverNotifications = serverNotifications.default || serverNotifications;
 
     function showViewSettings(instance) {
         require(['guide-settings-dialog'], function (guideSettingsDialog) {

src/components/imageeditor/imageeditor.js

@@ -19,8 +19,6 @@ import 'css!./imageeditor';
 
     const enableFocusTransform = !browser.slow && !browser.edge;
 
-    loading = loading.default || loading;
-
     let currentItem;
     let hasChanges = false;
 
@@ -61,8 +59,8 @@ import 'css!./imageeditor';
         currentItem = item;
 
         apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) {
-            const btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
+            var btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
-            for (let i = 0, length = btnBrowseAllImages.length; i < length; i++) {
+            for (var i = 0, length = btnBrowseAllImages.length; i < length; i++) {
                 if (providers.length) {
                     btnBrowseAllImages[i].classList.remove('hide');
                 } else {

src/components/images/imageLoader.js

@@ -205,7 +205,7 @@ import 'css!./style';
 
 /* eslint-enable indent */
 export default {
-    serLazyImage: setLazyImage,
+    setLazyImage: setLazyImage,
     fillImages: fillImages,
     fillImage: fillImage,
     lazyImage: lazyImage,

src/components/itemsrefresher.js

@@ -1,10 +1,11 @@
-define(['playbackManager', 'serverNotifications', 'events'], function (playbackManager, serverNotifications, events) {
+import playbackManager from 'playbackManager';
-    'use strict';
+import serverNotifications from 'serverNotifications';
+import events from 'events';
 
 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) {
@@ -15,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(',');
     }
@@ -25,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();
@@ -34,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;
@@ -42,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();
@@ -51,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;
@@ -59,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;
@@ -88,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);
@@ -107,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);
@@ -122,7 +123,8 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
     }
 }
 
-    function ItemsRefresher(options) {
+class ItemsRefresher {
+    constructor(options) {
         this.options = options || {};
 
         addNotificationEvent(this, 'UserDataChanged', onUserDataChanged);
@@ -134,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 {
@@ -159,9 +161,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         }
 
         return Promise.resolve();
-    };
+    }
 
-    ItemsRefresher.prototype.refreshItems = function () {
+    refreshItems() {
         if (!this.fetchData) {
             return Promise.resolve();
         }
@@ -174,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);
         }
@@ -192,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) {
@@ -209,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;
         }
@@ -229,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,5 +1,6 @@
-define(['browser', 'appSettings', 'events'], function (browser, appSettings, events) {
+import browser from 'browser';
-    'use strict';
+import appSettings from 'appSettings';
+import events from 'events';
 
 function setLayout(instance, layout, selectedLayout) {
     if (layout === selectedLayout) {
@@ -11,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();
 
@@ -33,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);
@@ -48,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/notifications/notifications.js

@@ -1,6 +1,9 @@
 define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'require'], function (serverNotifications, playbackManager, events, globalize, require) {
     'use strict';
 
+    playbackManager = playbackManager.default || playbackManager;
+    serverNotifications = serverNotifications.default || serverNotifications;
+
     function onOneDocumentClick() {
         document.removeEventListener('click', onOneDocumentClick);
         document.removeEventListener('keydown', onOneDocumentClick);

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/recordingcreator/recordingbutton.js

@@ -1,6 +1,8 @@
 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) {
     'use strict';
 
+    recordingHelper = recordingHelper.default || recordingHelper;
+
     function onRecordingButtonClick(e) {
         var item = this.item;
 

src/components/recordingcreator/recordingcreator.js

@@ -1,6 +1,9 @@
 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) {
     'use strict';
 
+    layoutManager = layoutManager.default || layoutManager;
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     var currentDialog;
     var closeAction;
     var currentRecordingFields;
@@ -104,7 +107,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
                 var apiClient = connectionManager.getApiClient(serverId);
 
                 apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
-                    playbackManager.play({
+                    playbackManager.default.play({
                         ids: [item.ChannelId],
                         serverId: serverId
                     });

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;
@@ -12,6 +14,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     function deleteTimer(apiClient, timerId) {
         return new Promise(function (resolve, reject) {
             require(['recordingHelper'], function (recordingHelper) {
+                recordingHelper = recordingHelper.default || recordingHelper;
+
                 recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
             });
         });

src/components/recordingcreator/recordingfields.js

@@ -1,6 +1,8 @@
 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;
 
     function loadData(parent, program, apiClient) {

src/components/recordingcreator/recordinghelper.js

@@ -1,7 +1,8 @@
-define(['globalize', 'loading', 'connectionManager'], function (globalize, loading, connectionManager) {
+import globalize from 'globalize';
-    'use strict';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
 
-    loading = loading.default || loading;
+/*eslint prefer-const: "error"*/
 
 function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCancellation) {
     loading.show();
@@ -28,7 +29,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 
 function cancelTimerWithConfirmation(timerId, serverId) {
     return new Promise(function (resolve, reject) {
-            require(['confirm'], function (confirm) {
+        import('confirm').then(({ default: confirm }) => {
             confirm.default({
 
                 text: globalize.translate('MessageConfirmRecordingCancellation'),
@@ -39,7 +40,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
             }).then(function () {
                 loading.show();
 
-                    var apiClient = connectionManager.getApiClient(serverId);
+                const apiClient = connectionManager.getApiClient(serverId);
                 cancelTimer(apiClient, timerId, true).then(resolve, reject);
             }, reject);
         });
@@ -48,7 +49,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 
 function cancelSeriesTimerWithConfirmation(timerId, serverId) {
     return new Promise(function (resolve, reject) {
-            require(['confirm'], function (confirm) {
+        import('confirm').then(({ default: confirm }) => {
             confirm.default({
 
                 text: globalize.translate('MessageConfirmRecordingCancellation'),
@@ -59,9 +60,9 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
             }).then(function () {
                 loading.show();
 
-                    var apiClient = connectionManager.getApiClient(serverId);
+                const apiClient = connectionManager.getApiClient(serverId);
                 apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
-                        require(['toast'], function (toast) {
+                    import('toast').then(({default: toast}) => {
                         toast(globalize.translate('SeriesCancelled'));
                     });
 
@@ -86,7 +87,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 function createRecording(apiClient, programId, isSeries) {
     loading.show();
     return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
-            var promise = isSeries ?
+        const promise = isSeries ?
             apiClient.createLiveTvSeriesTimer(item) :
             apiClient.createLiveTvTimer(item);
 
@@ -98,15 +99,15 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 }
 
 function sendToast(msg) {
-        require(['toast'], function (toast) {
+    import('toast').then(({ default: toast }) => {
         toast(msg);
     });
 }
 
 function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
     return new Promise(function (resolve, reject) {
-            require(['dialog'], function (dialog) {
+        import('dialog').then(({ default: dialog }) => {
-                var items = [];
+            const items = [];
 
             items.push({
                 name: globalize.translate('HeaderKeepRecording'),
@@ -140,7 +141,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
                 buttons: items
 
             }).then(function (result) {
-                    var apiClient = connectionManager.getApiClient(serverId);
+                const apiClient = connectionManager.getApiClient(serverId);
 
                 if (result === 'canceltimer') {
                     loading.show();
@@ -150,7 +151,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
                     loading.show();
 
                     apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
-                            require(['toast'], function (toast) {
+                        import('toast').then(({ default: toast }) => {
                             toast(globalize.translate('SeriesCancelled'));
                         });
 
@@ -166,8 +167,8 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 }
 
 function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
-        var hasTimer = timerId && timerStatus !== 'Cancelled';
+    const hasTimer = timerId && timerStatus !== 'Cancelled';
     if (seriesTimerId && hasTimer) {
         // cancel
         return showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId);
@@ -183,7 +184,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
     }
 }
 
-    return {
+export default {
     cancelTimer: cancelTimer,
     createRecording: createRecording,
     changeRecordingToSeries: changeRecordingToSeries,
@@ -191,4 +192,4 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
     cancelTimerWithConfirmation: cancelTimerWithConfirmation,
     cancelSeriesTimerWithConfirmation: cancelSeriesTimerWithConfirmation
 };
-});
+

src/components/recordingcreator/seriesrecordingeditor.js

@@ -1,23 +1,38 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'datetime', 'scrollStyles', 'emby-button', 'emby-checkbox', 'emby-input', 'emby-select', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader, datetime) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import datetime from 'datetime';
+import 'scrollStyles';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-input';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
+import 'flexStyles';
 
-    loading = loading.default || loading;
+/*eslint prefer-const: "error"*/
 
-    var currentDialog;
+let currentDialog;
-    var recordingUpdated = false;
+let recordingUpdated = false;
-    var recordingDeleted = false;
+let recordingDeleted = false;
-    var currentItemId;
+let currentItemId;
-    var currentServerId;
+let currentServerId;
 
 function deleteTimer(apiClient, timerId) {
     return new Promise(function (resolve, reject) {
-            require(['recordingHelper'], function (recordingHelper) {
+        import('recordingHelper').then(({ default: recordingHelper }) => {
             recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
         });
     });
 }
 
-    function renderTimer(context, item, apiClient) {
+function renderTimer(context, item) {
     context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
     context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
 
@@ -47,9 +62,9 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 }
 
 function onSubmit(e) {
-        var form = this;
+    const form = this;
 
-        var apiClient = connectionManager.getApiClient(currentServerId);
+    const apiClient = connectionManager.getApiClient(currentServerId);
 
     apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
         item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
@@ -77,7 +92,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     });
 
     context.querySelector('.btnCancelRecording').addEventListener('click', function () {
-            var apiClient = connectionManager.getApiClient(currentServerId);
+        const apiClient = connectionManager.getApiClient(currentServerId);
         deleteTimer(apiClient, currentItemId).then(function () {
             closeDialog(true);
         });
@@ -87,29 +102,29 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 }
 
 function reload(context, id) {
-        var apiClient = connectionManager.getApiClient(currentServerId);
+    const apiClient = connectionManager.getApiClient(currentServerId);
 
     loading.show();
     if (typeof id === 'string') {
         currentItemId = id;
 
         apiClient.getLiveTvSeriesTimer(id).then(function (result) {
-                renderTimer(context, result, apiClient);
+            renderTimer(context, result);
             loading.hide();
         });
     } else if (id) {
         currentItemId = id.Id;
 
-            renderTimer(context, id, apiClient);
+        renderTimer(context, id);
         loading.hide();
     }
 }
 
 function fillKeepUpTo(context) {
-        var html = '';
+    let html = '';
 
-        for (var i = 0; i <= 50; i++) {
+    for (let i = 0; i <= 50; i++) {
-            var text;
+        let text;
 
         if (i === 0) {
             text = globalize.translate('AsManyAsPossible');
@@ -125,7 +140,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     context.querySelector('.selectKeepUpTo').innerHTML = html;
 }
 
-    function onFieldChange(e) {
+function onFieldChange() {
     this.querySelector('.btnSubmit').click();
 }
 
@@ -136,8 +151,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     loading.show();
     options = options || {};
 
-        require(['text!./seriesrecordingeditor.template.html'], function (template) {
+    import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
-            var dialogOptions = {
+        const dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
@@ -148,7 +163,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
             dialogOptions.size = 'small';
         }
 
-            var dlg = options.context;
+        const dlg = options.context;
 
         dlg.classList.add('hide');
         dlg.innerHTML = globalize.translateHtml(template, 'core');
@@ -178,8 +193,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
         loading.show();
         options = options || {};
 
-            require(['text!./seriesrecordingeditor.template.html'], function (template) {
+        import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
-                var dialogOptions = {
+            const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
             };
@@ -190,7 +205,7 @@ 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');
@@ -199,7 +214,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
                 dlg.style['min-width'] = '20%';
             }
 
-                var html = '';
+            let html = '';
 
             html += globalize.translateHtml(template, 'core');
 
@@ -241,8 +256,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     });
 }
 
-    return {
+export default {
     show: showEditor,
     embed: embed
 };
-});

src/components/remotecontrol/remotecontrol.js

@@ -1,5 +1,9 @@
 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) {
     'use strict';
+
+    playbackManager = playbackManager.default || playbackManager;
+    layoutManager = layoutManager.default || layoutManager;
+
     var showMuteButton = true;
     var showVolumeSlider = true;
 

src/components/skinManager.js

@@ -1,184 +0,0 @@
-define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize', 'require', 'appSettings'], function (appHost, userSettings, browser, events, backdrop, globalize, require, appSettings) {
-    'use strict';
-
-    var themeStyleElement;
-    var currentThemeId;
-
-    function unloadTheme() {
-        var elem = themeStyleElement;
-        if (elem) {
-            elem.parentNode.removeChild(elem);
-            themeStyleElement = null;
-            currentThemeId = null;
-        }
-    }
-
-    function loadUserSkin(options) {
-        options = options || {};
-        if (options.start) {
-            Emby.Page.invokeShortcut(options.start);
-        } else {
-            Emby.Page.goHome();
-        }
-    }
-
-    function getThemes() {
-        return [{
-            name: 'Apple TV',
-            id: 'appletv'
-        }, {
-            name: 'Blue Radiance',
-            id: 'blueradiance'
-        }, {
-            name: 'Dark',
-            id: 'dark',
-            isDefault: true,
-            isDefaultServerDashboard: true
-        }, {
-            name: 'Light',
-            id: 'light'
-        }, {
-            name: 'Purple Haze',
-            id: 'purplehaze'
-        }, {
-            name: 'Windows Media Center',
-            id: 'wmc'
-        }];
-    }
-
-    var skinManager = {
-        getThemes: getThemes,
-        loadUserSkin: loadUserSkin
-    };
-
-    function getThemeStylesheetInfo(id, isDefaultProperty) {
-        var themes = skinManager.getThemes();
-        var defaultTheme;
-        var selectedTheme;
-
-        for (var i = 0, length = themes.length; i < length; i++) {
-            var theme = themes[i];
-            if (theme[isDefaultProperty]) {
-                defaultTheme = theme;
-            }
-            if (id === theme.id) {
-                selectedTheme = theme;
-            }
-        }
-
-        selectedTheme = selectedTheme || defaultTheme;
-        return {
-            stylesheetPath: require.toUrl('themes/' + selectedTheme.id + '/theme.css'),
-            themeId: selectedTheme.id
-        };
-    }
-
-    var themeResources = {};
-    var lastSound = 0;
-    var currentSound;
-
-    function loadThemeResources(id) {
-        lastSound = 0;
-        if (currentSound) {
-            currentSound.stop();
-            currentSound = null;
-        }
-
-        backdrop.clearBackdrop();
-    }
-
-    function onThemeLoaded() {
-        document.documentElement.classList.remove('preload');
-        try {
-            var color = getComputedStyle(document.querySelector('.skinHeader')).getPropertyValue('background-color');
-            if (color) {
-                appHost.setThemeColor(color);
-            }
-        } catch (err) {
-            console.error('error setting theme color: ' + err);
-        }
-    }
-
-    skinManager.setTheme = function (id, context) {
-        return new Promise(function (resolve, reject) {
-            if (currentThemeId && currentThemeId === id) {
-                resolve();
-                return;
-            }
-
-            var isDefaultProperty = context === 'serverdashboard' ? 'isDefaultServerDashboard' : 'isDefault';
-            var info = getThemeStylesheetInfo(id, isDefaultProperty);
-            if (currentThemeId && currentThemeId === info.themeId) {
-                resolve();
-                return;
-            }
-
-            var linkUrl = info.stylesheetPath;
-            unloadTheme();
-
-            var link = document.createElement('link');
-            link.setAttribute('rel', 'stylesheet');
-            link.setAttribute('type', 'text/css');
-            link.onload = function () {
-                onThemeLoaded();
-                resolve();
-            };
-
-            link.setAttribute('href', linkUrl);
-            document.head.appendChild(link);
-            themeStyleElement = link;
-            currentThemeId = info.themeId;
-            loadThemeResources(info.themeId);
-
-            onViewBeforeShow({});
-        });
-    };
-
-    function onViewBeforeShow(e) {
-        if (e.detail && e.detail.type === 'video-osd') {
-            // This removes the space that the scrollbar takes while playing a video
-            document.body.classList.remove('force-scroll');
-            return;
-        }
-
-        if (themeResources.backdrop) {
-            backdrop.setBackdrop(themeResources.backdrop);
-        }
-
-        if (!browser.mobile && userSettings.enableThemeSongs()) {
-            if (lastSound === 0) {
-                if (themeResources.themeSong) {
-                    playSound(themeResources.themeSong);
-                }
-            } else if ((new Date().getTime() - lastSound) > 30000) {
-                if (themeResources.effect) {
-                    playSound(themeResources.effect);
-                }
-            }
-        }
-        // This keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages
-        // that need the scrollbar and pages that don't.
-        document.body.classList.add('force-scroll');
-    }
-
-    document.addEventListener('viewshow', onViewBeforeShow);
-
-    function playSound(path, volume) {
-        lastSound = new Date().getTime();
-        require(['howler'], function (howler) {
-            /* globals Howl */
-            try {
-                var sound = new Howl({
-                    src: [path],
-                    volume: volume || 0.1
-                });
-                sound.play();
-                currentSound = sound;
-            } catch (err) {
-                console.error('error playing sound: ' + err);
-            }
-        });
-    }
-
-    return skinManager;
-});

src/components/slideshow/slideshow.js

@@ -2,8 +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';
+import layoutManager from 'layoutManager';
+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.
@@ -76,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);
@@ -99,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>';
 }
@@ -116,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.
@@ -147,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);
@@ -193,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);
             }
@@ -228,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');
         }
@@ -238,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');
         }
@@ -285,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.
@@ -366,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) {
@@ -401,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 {
@@ -421,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]);
         });
     }
@@ -432,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
@@ -461,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 {
@@ -473,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;
@@ -491,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();
@@ -502,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);
         }
@@ -537,7 +546,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
         element.classList.remove('hide');
 
-            var onFinish = function () {
+        const onFinish = function () {
             focusManager.focus(element.querySelector('.btnSlideshowPause'));
         };
 
@@ -547,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;
         });
     }
@@ -565,7 +574,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             return;
         }
 
-            var onFinish = function () {
+        const onFinish = function () {
             element.classList.add('hide');
         };
 
@@ -575,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;
         });
     }
@@ -589,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,
@@ -661,5 +670,4 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             dialogHelper.close(dialog);
         }
     };
-    };
+}
-});

src/components/sortmenu/sortmenu.js

@@ -1,5 +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';
+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();
@@ -14,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
                 };
@@ -51,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>';
@@ -78,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;
@@ -90,7 +95,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                     }
 
                     if (submitted) {
-                        saveValues(dlg, options.settings, options.settingsKey);
+                        saveValues(dlg, options.settingsKey);
                         resolve();
                         return;
                     }
@@ -99,7 +104,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                 });
             });
         });
-    };
+    }
+}
 
-    return SortMenu;
+export default SortMenu;
-});

src/components/subtitleeditor/subtitleeditor.js

@@ -1,15 +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;
-
+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',
@@ -18,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'));
         });
 
@@ -27,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,
@@ -40,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({
 
@@ -59,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>';
@@ -73,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';
@@ -115,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');
@@ -126,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;
@@ -147,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');
@@ -159,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) {
@@ -173,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';
         }
@@ -183,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 + '">';
 
@@ -220,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();
@@ -231,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);
@@ -246,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);
         }
@@ -271,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);
 
@@ -282,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');
@@ -310,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
@@ -335,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);
     });
 }
@@ -344,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
         };
@@ -357,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');
@@ -368,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);
@@ -377,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);
@@ -414,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

@@ -3,31 +3,9 @@
  * @module components/subtitleSettings/subtitleAppearanceHelper
  */
 
-function getTextStyles(settings, isCue) {
+function getTextStyles(settings, preview) {
     let list = [];
 
-    if (isCue) {
-        switch (settings.textSize || '') {
-            case 'smaller':
-                list.push({ name: 'font-size', value: '.5em' });
-                break;
-            case 'small':
-                list.push({ name: 'font-size', value: '.7em' });
-                break;
-            case 'large':
-                list.push({ name: 'font-size', value: '1.3em' });
-                break;
-            case 'larger':
-                list.push({ name: 'font-size', value: '1.72em' });
-                break;
-            case 'extralarge':
-                list.push({ name: 'font-size', value: '2em' });
-                break;
-            default:
-            case 'medium':
-                break;
-        }
-    } else {
     switch (settings.textSize || '') {
         case 'smaller':
             list.push({ name: 'font-size', value: '.8em' });
@@ -49,7 +27,6 @@ function getTextStyles(settings, isCue) {
             list.push({ name: 'font-size', value: '1.36em' });
             break;
     }
-    }
 
     switch (settings.dropShadow || '') {
         case 'raised':
@@ -111,13 +88,43 @@ function getTextStyles(settings, isCue) {
             break;
     }
 
+    if (!preview) {
+        const pos = parseInt(settings.verticalPosition, 10);
+        const lineHeight = 1.35; // FIXME: It is better to read this value from element
+        const line = Math.abs(pos * lineHeight);
+        if (pos < 0) {
+            list.push({ name: 'min-height', value: `${line}em` });
+            list.push({ name: 'margin-top', value: '' });
+        } else {
+            list.push({ name: 'min-height', value: '' });
+            list.push({ name: 'margin-top', value: `${line}em` });
+        }
+    }
+
     return list;
 }
 
-export function getStyles(settings, isCue) {
+function getWindowStyles(settings, preview) {
+    const list = [];
+
+    if (!preview) {
+        const pos = parseInt(settings.verticalPosition, 10);
+        if (pos < 0) {
+            list.push({ name: 'top', value: '' });
+            list.push({ name: 'bottom', value: '0' });
+        } else {
+            list.push({ name: 'top', value: '0' });
+            list.push({ name: 'bottom', value: '' });
+        }
+    }
+
+    return list;
+}
+
+export function getStyles(settings, preview) {
     return {
-        text: getTextStyles(settings, isCue),
+        text: getTextStyles(settings, preview),
-        window: []
+        window: getWindowStyles(settings, preview)
     };
 }
 
@@ -130,7 +137,7 @@ function applyStyleList(styles, elem) {
 }
 
 export function applyStyles(elements, appearanceSettings) {
-    let styles = getStyles(appearanceSettings);
+    let styles = getStyles(appearanceSettings, !!elements.preview);
 
     if (elements.text) {
         applyStyleList(styles.text, elements.text);

src/components/subtitlesettings/subtitlesettings.css

@@ -0,0 +1,26 @@
+.subtitleappearance-fullpreview {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    pointer-events: none;
+    transition: 0.2s;
+}
+
+.subtitleappearance-fullpreview-hide {
+    opacity: 0;
+}
+
+.subtitleappearance-fullpreview-window {
+    position: absolute;
+    width: 100%;
+    font-size: 170%;
+    text-align: center;
+}
+
+.subtitleappearance-fullpreview-text {
+    display: inline-block;
+    max-width: 70%;
+}

src/components/subtitlesettings/subtitlesettings.js

@@ -2,6 +2,7 @@ import globalize from 'globalize';
 import appHost from 'apphost';
 import appSettings from 'appSettings';
 import focusManager from 'focusManager';
+import layoutManager from 'layoutManager';
 import loading from 'loading';
 import connectionManager from 'connectionManager';
 import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
@@ -10,9 +11,11 @@ import dom from 'dom';
 import events from 'events';
 import 'listViewStyle';
 import 'emby-select';
+import 'emby-slider';
 import 'emby-input';
 import 'emby-checkbox';
 import 'flexStyles';
+import 'css!./subtitlesettings';
 
 /**
  * Subtitle settings.
@@ -27,6 +30,7 @@ function getSubtitleAppearanceObject(context) {
     appearanceSettings.font = context.querySelector('#selectFont').value;
     appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value;
     appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
+    appearanceSettings.verticalPosition = context.querySelector('#sliderVerticalPosition').value;
 
     return appearanceSettings;
 }
@@ -51,6 +55,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
         context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent';
         context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff';
         context.querySelector('#selectFont').value = appearanceSettings.font || '';
+        context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition;
 
         context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || '';
 
@@ -112,10 +117,45 @@ function onAppearanceFieldChange(e) {
 
     let elements = {
         window: view.querySelector('.subtitleappearance-preview-window'),
-        text: view.querySelector('.subtitleappearance-preview-text')
+        text: view.querySelector('.subtitleappearance-preview-text'),
+        preview: true
     };
 
     subtitleAppearanceHelper.applyStyles(elements, appearanceSettings);
+
+    subtitleAppearanceHelper.applyStyles({
+        window: view.querySelector('.subtitleappearance-fullpreview-window'),
+        text: view.querySelector('.subtitleappearance-fullpreview-text')
+    }, appearanceSettings);
+}
+
+const subtitlePreviewDelay = 1000;
+let subtitlePreviewTimer;
+
+function showSubtitlePreview(persistent) {
+    clearTimeout(subtitlePreviewTimer);
+
+    this._fullPreview.classList.remove('subtitleappearance-fullpreview-hide');
+
+    if (persistent) {
+        this._refFullPreview++;
+    }
+
+    if (this._refFullPreview === 0) {
+        subtitlePreviewTimer = setTimeout(hideSubtitlePreview.bind(this), subtitlePreviewDelay);
+    }
+}
+
+function hideSubtitlePreview(persistent) {
+    clearTimeout(subtitlePreviewTimer);
+
+    if (persistent) {
+        this._refFullPreview--;
+    }
+
+    if (this._refFullPreview === 0) {
+        this._fullPreview.classList.add('subtitleappearance-fullpreview-hide');
+    }
 }
 
 function embed(options, self) {
@@ -138,6 +178,36 @@ function embed(options, self) {
 
         if (appHost.supports('subtitleappearancesettings')) {
             options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide');
+
+            self._fullPreview = options.element.querySelector('.subtitleappearance-fullpreview');
+            self._refFullPreview = 0;
+
+            const sliderVerticalPosition = options.element.querySelector('#sliderVerticalPosition');
+            sliderVerticalPosition.addEventListener('input', onAppearanceFieldChange);
+            sliderVerticalPosition.addEventListener('input', () => showSubtitlePreview.call(self));
+
+            const eventPrefix = window.PointerEvent ? 'pointer' : 'mouse';
+            sliderVerticalPosition.addEventListener(`${eventPrefix}enter`, () => showSubtitlePreview.call(self, true));
+            sliderVerticalPosition.addEventListener(`${eventPrefix}leave`, () => hideSubtitlePreview.call(self, true));
+
+            if (layoutManager.tv) {
+                sliderVerticalPosition.addEventListener('focus', () => showSubtitlePreview.call(self, true));
+                sliderVerticalPosition.addEventListener('blur', () => hideSubtitlePreview.call(self, true));
+
+                // Give CustomElements time to attach
+                setTimeout(() => {
+                    sliderVerticalPosition.classList.add('focusable');
+                    sliderVerticalPosition.enableKeyboardDragging();
+                }, 0);
+            }
+
+            options.element.querySelector('.chkPreview').addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    showSubtitlePreview.call(self, true);
+                } else {
+                    hideSubtitlePreview.call(self, true);
+                }
+            });
         }
 
         self.loadData();

src/components/subtitlesettings/subtitlesettings.template.html

@@ -38,6 +38,16 @@
             ${HeaderSubtitleAppearance}
         </h2>
 
+        <div class="subtitleappearance-fullpreview subtitleappearance-fullpreview-hide">
+            <div class="subtitleappearance-fullpreview-window">
+                <div class="subtitleappearance-fullpreview-text">
+                    ${HeaderSubtitleAppearance}
+                    <br>
+                    ${TheseSettingsAffectSubtitlesOnThisDevice}
+                </div>
+            </div>
+        </div>
+
         <div style="margin: 2em 0 2em;">
             <div class="subtitleappearance-preview flex align-items-center justify-content-center" style="margin:2em 0;padding:1.6em;color:black;background:linear-gradient(140deg,#aa5cc3,#00a4dc);">
                 <div class="subtitleappearance-preview-window flex align-items-center justify-content-center" style="width: 90%; padding: .25em;">
@@ -89,6 +99,20 @@
                 <option value="">${DropShadow}</option>
             </select>
         </div>
+
+        <div class="sliderContainer-settings">
+            <div class="sliderContainer">
+                <input is="emby-slider" id="sliderVerticalPosition" label="${LabelSubtitleVerticalPosition}" type="range" min="-16" max="16" />
+            </div>
+            <div class="fieldDescription">${SubtitleVerticalPositionHelp}</div>
+        </div>
+
+        <div class="checkboxContainer">
+            <label>
+                <input is="emby-checkbox" type="checkbox" class="chkPreview" />
+                <span>${Preview}</span>
+            </label>
+        </div>
     </div>
 
     <button is="emby-button" type="submit" class="raised button-submit block btnSave hide">

src/components/subtitlesync/subtitlesync.js

@@ -1,14 +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';
 
-    var player;
+let player;
-    var subtitleSyncSlider;
+let subtitleSyncSlider;
-    var subtitleSyncTextField;
+let subtitleSyncTextField;
-    var subtitleSyncCloseButton;
+let subtitleSyncCloseButton;
-    var subtitleSyncContainer;
+let subtitleSyncContainer;
 
 function init(instance) {
-        var parent = document.createElement('div');
+    const parent = document.createElement('div');
     document.body.appendChild(parent);
     parent.innerHTML = template;
 
@@ -39,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];
 
@@ -90,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>';
@@ -106,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);
@@ -114,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) {
@@ -168,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,6 +1,8 @@
 define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (backdrop, mainTabsManager, layoutManager) {
     'use strict';
 
+    layoutManager = layoutManager.default || layoutManager;
+
     function onViewDestroy(e) {
         var tabControllers = this.tabControllers;
 

src/components/themeMediaPlayer.js

@@ -1,6 +1,8 @@
 define(['playbackManager', 'userSettings', 'connectionManager'], function (playbackManager, userSettings, connectionManager) {
     'use strict';
 
+    playbackManager = playbackManager.default || playbackManager;
+
     var currentOwnerId;
     var currentThemeIds = [];
 

src/components/toast/toast.js

@@ -1,5 +1,4 @@
-define(['css!./toast'], function () {
+import 'css!./toast';
-    'use strict';
 
 function remove(elem) {
     setTimeout(function () {
@@ -14,14 +13,14 @@ define(['css!./toast'], function () {
     }, 3300);
 }
 
-    return function (options) {
+export default function (options) {
     if (typeof options === 'string') {
         options = {
             text: options
         };
     }
 
-        var elem = document.createElement('div');
+    const elem = document.createElement('div');
     elem.classList.add('toast');
     elem.innerHTML = options.text;
 
@@ -32,5 +31,4 @@ define(['css!./toast'], function () {
 
         animateRemove(elem);
     }, 300);
-    };
+}
-});

src/components/tunerPicker.js

@@ -1,7 +1,11 @@
 define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize', 'loading', 'browser', 'focusManager', 'scrollHelper', 'material-icons', 'formDialogStyle', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading, browser, focusManager, scrollHelper) {
     'use strict';
 
+    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.js

@@ -1,13 +1,19 @@
-define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emby-input', 'emby-select', 'emby-button', 'flexStyles'], function ($, loading, globalize) {
+import $ from 'jQuery';
-    'use strict';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-checkbox';
+import 'emby-input';
+import 'listViewStyle';
+import 'paper-icon-button-light';
+import 'emby-select';
+import 'emby-button';
+import 'flexStyles';
 
-    loading = loading.default || loading;
+export default function (page, providerId, options) {
-
-    return function (page, providerId, options) {
     function reload() {
         loading.show();
         ApiClient.getNamedConfiguration('livetv').then(function (config) {
-                var info = config.ListingProviders.filter(function (i) {
+            const info = config.ListingProviders.filter(function (i) {
                 return i.Id === providerId;
             })[0] || {};
             listingsId = info.ListingsId;
@@ -37,12 +43,12 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
 
     function setCountry(info) {
         ApiClient.getJSON(ApiClient.getUrl('LiveTv/ListingProviders/SchedulesDirect/Countries')).then(function (result) {
-                var i;
+            let i;
-                var length;
+            let length;
-                var countryList = [];
+            const countryList = [];
 
-                for (var region in result) {
+            for (const region in result) {
-                    var countries = result[region];
+                const countries = result[region];
 
                 if (countries.length && region !== 'ZZZ') {
                     for (i = 0, length = countries.length; i < length; i++) {
@@ -82,20 +88,20 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
             return Promise.resolve('');
         }
 
-            var buffer = new TextEncoder('utf-8').encode(str);
+        const buffer = new TextEncoder('utf-8').encode(str);
         return crypto.subtle.digest('SHA-256', buffer).then(function (hash) {
             return hex(hash);
         });
     }
 
     function hex(buffer) {
-            var hexCodes = [];
+        const hexCodes = [];
-            var view = new DataView(buffer);
+        const view = new DataView(buffer);
 
-            for (var i = 0; i < view.byteLength; i += 4) {
+        for (let i = 0; i < view.byteLength; i += 4) {
-                var value = view.getUint32(i);
+            const value = view.getUint32(i);
-                var stringValue = value.toString(16);
+            const stringValue = value.toString(16);
-                var paddedValue = ('00000000' + stringValue).slice(-'00000000'.length);
+            const paddedValue = ('00000000' + stringValue).slice(-'00000000'.length);
             hexCodes.push(paddedValue);
         }
 
@@ -105,14 +111,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
     function submitLoginForm() {
         loading.show();
         sha256(page.querySelector('.txtPass').value).then(function (passwordHash) {
-                var info = {
+            const info = {
                 Type: 'SchedulesDirect',
                 Username: page.querySelector('.txtUser').value,
                 EnableAllTuners: true,
                 Password: passwordHash,
                 Pw: page.querySelector('.txtPass').value
             };
-                var id = providerId;
+            const id = providerId;
 
             if (id) {
                 info.Id = id;
@@ -139,7 +145,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
     }
 
     function submitListingsForm() {
-            var selectedListingsId = $('#selectListing', page).val();
+        const selectedListingsId = $('#selectListing', page).val();
 
         if (!selectedListingsId) {
             return void Dashboard.alert({
@@ -148,9 +154,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
         }
 
         loading.show();
-            var id = providerId;
+        const id = providerId;
         ApiClient.getNamedConfiguration('livetv').then(function (config) {
-                var info = config.ListingProviders.filter(function (i) {
+            const info = config.ListingProviders.filter(function (i) {
                 return i.Id === id;
             })[0];
             info.ZipCode = page.querySelector('.txtZipCode').value;
@@ -233,14 +239,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
     }
 
     function refreshTunerDevices(page, providerInfo, devices) {
-            var html = '';
+        let html = '';
 
-            for (var i = 0, length = devices.length; i < length; i++) {
+        for (let i = 0, length = devices.length; i < length; i++) {
-                var device = devices[i];
+            const device = devices[i];
             html += '<div class="listItem">';
-                var enabledTuners = providerInfo.EnabledTuners || [];
+            const enabledTuners = providerInfo.EnabledTuners || [];
-                var isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
+            const isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
-                var checkedAttribute = isChecked ? ' checked' : '';
+            const checkedAttribute = isChecked ? ' checked' : '';
             html += '<label class="checkboxContainer listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" data-id="' + device.Id + '" class="chkTuner" ' + checkedAttribute + '/><span></span></label>';
             html += '<div class="listItemBody two-line">';
             html += '<div class="listItemBodyText">';
@@ -256,8 +262,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
         page.querySelector('.tunerList').innerHTML = html;
     }
 
-        var listingsId;
+    let listingsId;
-        var self = this;
+    const self = this;
 
     self.submit = function () {
         page.querySelector('.btnSubmitListingsContainer').click();
@@ -268,10 +274,10 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
 
         // Only hide the buttons if explicitly set to false; default to showing if undefined or null
         // FIXME: rename this option to clarify logic
-            var hideCancelButton = options.showCancelButton === false;
+        const hideCancelButton = options.showCancelButton === false;
         page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
 
-            var hideSubmitButton = options.showSubmitButton === false;
+        const hideSubmitButton = options.showSubmitButton === false;
         page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
 
         $('.formLogin', page).on('submit', function () {
@@ -295,5 +301,4 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
         $('.createAccountHelp', page).html(globalize.translate('MessageCreateAccountAt', '<a is="emby-linkbutton" class="button-link" href="http://www.schedulesdirect.org" target="_blank">http://www.schedulesdirect.org</a>'));
         reload();
     };
-    };
+}
-});

src/components/tvproviders/xmltv.js

@@ -1,12 +1,15 @@
-define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listViewStyle', 'paper-icon-button-light'], function ($, loading, globalize) {
+import $ from 'jQuery';
-    'use strict';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-checkbox';
+import 'emby-input';
+import 'listViewStyle';
+import 'paper-icon-button-light';
 
-    loading = loading.default || loading;
+export default function (page, providerId, options) {
-
-    return function (page, providerId, options) {
     function getListingProvider(config, id) {
         if (config && id) {
-                var result = config.ListingProviders.filter(function (provider) {
+            const result = config.ListingProviders.filter(function (provider) {
                 return provider.Id === id;
             })[0];
 
@@ -46,7 +49,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
     }
 
     function getCategories(txtInput) {
-            var value = txtInput.value;
+        const value = txtInput.value;
 
         if (value) {
             return value.split('|');
@@ -57,9 +60,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
 
     function submitListingsForm() {
         loading.show();
-            var id = providerId;
+        const id = providerId;
         ApiClient.getNamedConfiguration('livetv').then(function (config) {
-                var info = config.ListingProviders.filter(function (provider) {
+            const info = config.ListingProviders.filter(function (provider) {
                 return provider.Id === id;
             })[0] || {};
             info.Type = 'xmltv';
@@ -114,14 +117,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
     }
 
     function refreshTunerDevices(page, providerInfo, devices) {
-            var html = '';
+        let html = '';
 
-            for (var i = 0, length = devices.length; i < length; i++) {
+        for (let i = 0, length = devices.length; i < length; i++) {
-                var device = devices[i];
+            const device = devices[i];
             html += '<div class="listItem">';
-                var enabledTuners = providerInfo.EnabledTuners || [];
+            const enabledTuners = providerInfo.EnabledTuners || [];
-                var isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
+            const isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
-                var checkedAttribute = isChecked ? ' checked' : '';
+            const checkedAttribute = isChecked ? ' checked' : '';
             html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkTuner" data-id="' + device.Id + '" ' + checkedAttribute + '><span></span></label>';
             html += '<div class="listItemBody two-line">';
             html += '<div class="listItemBodyText">';
@@ -138,15 +141,15 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
     }
 
     function onSelectPathClick(e) {
-            var page = $(e.target).parents('.xmltvForm')[0];
+        const page = $(e.target).parents('.xmltvForm')[0];
 
-            require(['directorybrowser'], function (directoryBrowser) {
+        import('directorybrowser').then(({default: directoryBrowser}) => {
-                var picker = new directoryBrowser.default();
+            const picker = new directoryBrowser();
             picker.show({
                 includeFiles: true,
                 callback: function (path) {
                     if (path) {
-                            var txtPath = page.querySelector('.txtPath');
+                        const txtPath = page.querySelector('.txtPath');
                         txtPath.value = path;
                         txtPath.focus();
                     }
@@ -156,7 +159,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
         });
     }
 
-        var self = this;
+    const self = this;
 
     self.submit = function () {
         page.querySelector('.btnSubmitListings').click();
@@ -167,10 +170,10 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
 
         // Only hide the buttons if explicitly set to false; default to showing if undefined or null
         // FIXME: rename this option to clarify logic
-            var hideCancelButton = options.showCancelButton === false;
+        const hideCancelButton = options.showCancelButton === false;
         page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
 
-            var hideSubmitButton = options.showSubmitButton === false;
+        const hideSubmitButton = options.showSubmitButton === false;
         page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
 
         $('form', page).on('submit', function () {
@@ -187,5 +190,4 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
         });
         reload();
     };
-    };
+}
-});

src/components/upnextdialog/upnextdialog.js

@@ -1,7 +1,19 @@
-define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'layoutManager', 'focusManager', 'globalize', 'itemHelper', 'css!./upnextdialog', 'emby-button', 'flexStyles'], function (dom, playbackManager, connectionManager, events, mediaInfo, layoutManager, focusManager, globalize, itemHelper) {
+import dom from 'dom';
-    'use strict';
+import playbackManager from 'playbackManager';
+import connectionManager from 'connectionManager';
+import events from 'events';
+import mediaInfo from 'mediaInfo';
+import layoutManager from 'layoutManager';
+import focusManager from 'focusManager';
+import globalize from 'globalize';
+import itemHelper from 'itemHelper';
+import 'css!./upnextdialog';
+import 'emby-button';
+import 'flexStyles';
 
-    var transitionEndEventName = dom.whichTransitionEvent();
+/* eslint-disable indent */
+
+    const transitionEndEventName = dom.whichTransitionEvent();
 
     function seriesImageUrl(item, options) {
         if (item.Type !== 'Episode') {
@@ -56,7 +68,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
 
     function setPoster(osdPoster, item, secondaryItem) {
         if (item) {
-            var imgUrl = seriesImageUrl(item, { type: 'Primary' }) ||
+            let imgUrl = seriesImageUrl(item, { type: 'Primary' }) ||
                 seriesImageUrl(item, { type: 'Thumb' }) ||
                 imageUrl(item, { type: 'Primary' });
 
@@ -76,7 +88,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function getHtml() {
-        var html = '';
+        let html = '';
 
         html += '<div class="upNextDialog-poster">';
         html += '</div>';
@@ -112,17 +124,17 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function setNextVideoText() {
-        var instance = this;
+        const instance = this;
 
-        var elem = instance.options.parent;
+        const elem = instance.options.parent;
 
-        var secondsRemaining = Math.max(Math.round(getTimeRemainingMs(instance) / 1000), 0);
+        const secondsRemaining = Math.max(Math.round(getTimeRemainingMs(instance) / 1000), 0);
 
         console.debug('up next seconds remaining: ' + secondsRemaining);
 
-        var timeText = '<span class="upNextDialog-countdownText">' + globalize.translate('HeaderSecondsValue', secondsRemaining) + '</span>';
+        const timeText = '<span class="upNextDialog-countdownText">' + globalize.translate('HeaderSecondsValue', secondsRemaining) + '</span>';
 
-        var nextVideoText = instance.itemType === 'Episode' ?
+        const nextVideoText = instance.itemType === 'Episode' ?
             globalize.translate('HeaderNextEpisodePlayingInValue', timeText) :
             globalize.translate('HeaderNextVideoPlayingInValue', timeText);
 
@@ -130,9 +142,9 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function fillItem(item) {
-        var instance = this;
+        const instance = this;
 
-        var elem = instance.options.parent;
+        const elem = instance.options.parent;
 
         setPoster(elem.querySelector('.upNextDialog-poster'), item);
 
@@ -141,7 +153,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
         elem.querySelector('.upNextDialog-mediainfo').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(item, {
         });
 
-        var title = itemHelper.getDisplayName(item);
+        let title = itemHelper.getDisplayName(item);
         if (item.SeriesName) {
             title = item.SeriesName + ' - ' + title;
         }
@@ -161,10 +173,10 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function onStartNowClick() {
-        var options = this.options;
+        const options = this.options;
 
         if (options) {
-            var player = options.player;
+            const player = options.player;
 
             this.hide();
 
@@ -186,7 +198,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function clearHideAnimationEventListeners(instance, elem) {
-        var fn = instance._onHideAnimationComplete;
+        const fn = instance._onHideAnimationComplete;
 
         if (fn) {
             dom.removeEventListener(elem, transitionEndEventName, fn, {
@@ -196,8 +208,8 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function onHideAnimationComplete(e) {
-        var instance = this;
+        const instance = this;
-        var elem = e.target;
+        const elem = e.target;
 
         elem.classList.add('hide');
 
@@ -206,14 +218,14 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function hideComingUpNext() {
-        var instance = this;
+        const instance = this;
         clearCountdownTextTimeout(this);
 
         if (!instance.options) {
             return;
         }
 
-        var elem = instance.options.parent;
+        const elem = instance.options.parent;
 
         if (!elem) {
             return;
@@ -230,7 +242,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
 
         elem.classList.add('upNextDialog-hidden');
 
-        var fn = onHideAnimationComplete.bind(instance);
+        const fn = onHideAnimationComplete.bind(instance);
         instance._onHideAnimationComplete = fn;
 
         dom.addEventListener(elem, transitionEndEventName, fn, {
@@ -239,12 +251,12 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function getTimeRemainingMs(instance) {
-        var options = instance.options;
+        const options = instance.options;
         if (options) {
-            var runtimeTicks = playbackManager.duration(options.player);
+            const runtimeTicks = playbackManager.duration(options.player);
 
             if (runtimeTicks) {
-                var timeRemainingTicks = runtimeTicks - playbackManager.currentTime(options.player);
+                const timeRemainingTicks = runtimeTicks - playbackManager.currentTime(options.player);
 
                 return Math.round(timeRemainingTicks / 10000);
             }
@@ -254,7 +266,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function startComingUpNextHideTimer(instance) {
-        var timeRemainingMs = getTimeRemainingMs(instance);
+        const timeRemainingMs = getTimeRemainingMs(instance);
 
         if (timeRemainingMs <= 0) {
             return;
@@ -266,14 +278,14 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
         instance._countdownTextTimeout = setInterval(setNextVideoText.bind(instance), 400);
     }
 
-    function UpNextDialog(options) {
+class UpNextDialog {
+    constructor(options) {
         this.options = options;
 
         init(this, options);
     }
-
+    show() {
-    UpNextDialog.prototype.show = function () {
+        const elem = this.options.parent;
-        var elem = this.options.parent;
 
         clearHideAnimationEventListeners(this, elem);
 
@@ -291,18 +303,18 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
         }
 
         startComingUpNextHideTimer(this);
-    };
+    }
-
+    hide() {
-    UpNextDialog.prototype.hide = function () {
         hideComingUpNext.call(this);
-    };
+    }
-
+    destroy() {
-    UpNextDialog.prototype.destroy = function () {
         hideComingUpNext.call(this);
 
         this.options = null;
         this.itemType = null;
-    };
+    }
+}
 
-    return UpNextDialog;
+export default UpNextDialog;
-});
+
+/* eslint-enable indent */

src/components/viewContainer.js

@@ -1,12 +1,12 @@
-define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewContainer'], function (browser, dom, layoutManager) {
+import 'css!components/viewManager/viewContainer';
-    'use strict';
+/* eslint-disable indent */
 
     function setControllerClass(view, options) {
         if (options.controllerFactory) {
             return Promise.resolve();
         }
 
-        var controllerUrl = view.getAttribute('data-controller');
+        let controllerUrl = view.getAttribute('data-controller');
 
         if (controllerUrl) {
             if (controllerUrl.indexOf('__plugin/') === 0) {
@@ -14,7 +14,7 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
             }
 
             controllerUrl = Dashboard.getConfigurationResourceUrl(controllerUrl);
-            return getRequirePromise([controllerUrl]).then(function (ControllerFactory) {
+            return import(controllerUrl).then((ControllerFactory) => {
                 options.controllerFactory = ControllerFactory;
             });
         }
@@ -22,36 +22,28 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
         return Promise.resolve();
     }
 
-    function getRequirePromise(deps) {
+    export function loadView(options) {
-        return new Promise(function (resolve, reject) {
-            require(deps, resolve);
-        });
-    }
-
-    function loadView(options) {
         if (!options.cancel) {
-            var selected = selectedPageIndex;
+            const selected = selectedPageIndex;
-            var previousAnimatable = selected === -1 ? null : allPages[selected];
+            const previousAnimatable = selected === -1 ? null : allPages[selected];
-            var pageIndex = selected + 1;
+            let pageIndex = selected + 1;
 
             if (pageIndex >= pageContainerCount) {
                 pageIndex = 0;
             }
 
-            var isPluginpage = options.url.toLowerCase().indexOf('/configurationpage') !== -1;
+            const isPluginpage = options.url.toLowerCase().indexOf('/configurationpage') !== -1;
-            var newViewInfo = normalizeNewView(options, isPluginpage);
+            const newViewInfo = normalizeNewView(options, isPluginpage);
-            var newView = newViewInfo.elem;
+            const newView = newViewInfo.elem;
-            var modulesToLoad = [];
 
-            return new Promise(function (resolve) {
+            return new Promise((resolve) => {
-                require(modulesToLoad, function () {
+                const currentPage = allPages[pageIndex];
-                    var currentPage = allPages[pageIndex];
 
                 if (currentPage) {
                     triggerDestroy(currentPage);
                 }
 
-                    var view = newView;
+                let view = newView;
 
                 if (typeof view == 'string') {
                     view = document.createElement('div');
@@ -62,8 +54,8 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
 
                 if (currentPage) {
                     if (newViewInfo.hasScript && window.$) {
-                            view = $(view).appendTo(mainAnimatedPages)[0];
                         mainAnimatedPages.removeChild(currentPage);
+                        view = $(view).appendTo(mainAnimatedPages)[0];
                     } else {
                         mainAnimatedPages.replaceChild(view, currentPage);
                     }
@@ -79,7 +71,7 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
                     view.setAttribute('data-type', options.type);
                 }
 
-                    var properties = [];
+                const properties = [];
 
                 if (options.fullscreen) {
                     properties.push('fullscreen');
@@ -90,7 +82,7 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
                 }
 
                 allPages[pageIndex] = view;
-                    setControllerClass(view, options).then(function () {
+                setControllerClass(view, options).then(() => {
                     if (onBeforeChange) {
                         onBeforeChange(view, false, options);
                     }
@@ -111,7 +103,6 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
                     resolve(view);
                 });
             });
-            });
         }
     }
 
@@ -125,28 +116,28 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
             html = replaceAll(html, '<\/script>--\x3e', '<\/script>');
         }
 
-        var wrapper = document.createElement('div');
+        const wrapper = document.createElement('div');
         wrapper.innerHTML = html;
         return wrapper.querySelector('div[data-role="page"]');
     }
 
     function normalizeNewView(options, isPluginpage) {
-        var viewHtml = options.view;
+        const viewHtml = options.view;
 
         if (viewHtml.indexOf('data-role="page"') === -1) {
             return viewHtml;
         }
 
-        var hasScript = viewHtml.indexOf('<script') !== -1;
+        let hasScript = viewHtml.indexOf('<script') !== -1;
-        var elem = parseHtml(viewHtml, hasScript);
+        const elem = parseHtml(viewHtml, hasScript);
 
         if (hasScript) {
             hasScript = elem.querySelector('script') != null;
         }
 
-        var hasjQuery = false;
+        let hasjQuery = false;
-        var hasjQuerySelect = false;
+        let hasjQuerySelect = false;
-        var hasjQueryChecked = false;
+        let hasjQueryChecked = false;
 
         if (isPluginpage) {
             hasjQuery = viewHtml.indexOf('jQuery') != -1 || viewHtml.indexOf('$(') != -1 || viewHtml.indexOf('$.') != -1;
@@ -164,7 +155,7 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
     }
 
     function beforeAnimate(allPages, newPageIndex, oldPageIndex) {
-        for (var index = 0, length = allPages.length; index < length; index++) {
+        for (let index = 0, length = allPages.length; index < length; index++) {
             if (newPageIndex !== index && oldPageIndex !== index) {
                 allPages[index].classList.add('hide');
             }
@@ -172,33 +163,33 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
     }
 
     function afterAnimate(allPages, newPageIndex) {
-        for (var index = 0, length = allPages.length; index < length; index++) {
+        for (let index = 0, length = allPages.length; index < length; index++) {
             if (newPageIndex !== index) {
                 allPages[index].classList.add('hide');
             }
         }
     }
 
-    function setOnBeforeChange(fn) {
+    export function setOnBeforeChange(fn) {
         onBeforeChange = fn;
     }
 
-    function tryRestoreView(options) {
+    export function tryRestoreView(options) {
-        var url = options.url;
+        const url = options.url;
-        var index = currentUrls.indexOf(url);
+        const index = currentUrls.indexOf(url);
 
         if (index !== -1) {
-            var animatable = allPages[index];
+            const animatable = allPages[index];
-            var view = animatable;
+            const view = animatable;
 
             if (view) {
                 if (options.cancel) {
                     return;
                 }
 
-                var selected = selectedPageIndex;
+                const selected = selectedPageIndex;
-                var previousAnimatable = selected === -1 ? null : allPages[selected];
+                const previousAnimatable = selected === -1 ? null : allPages[selected];
-                return setControllerClass(view, options).then(function () {
+                return setControllerClass(view, options).then(() => {
                     if (onBeforeChange) {
                         onBeforeChange(view, true, options);
                     }
@@ -228,25 +219,28 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
         view.dispatchEvent(new CustomEvent('viewdestroy', {}));
     }
 
-    function reset() {
+    export function reset() {
         allPages = [];
         currentUrls = [];
         mainAnimatedPages.innerHTML = '';
         selectedPageIndex = -1;
     }
 
-    var onBeforeChange;
+    let onBeforeChange;
-    var mainAnimatedPages = document.querySelector('.mainAnimatedPages');
+    const mainAnimatedPages = document.querySelector('.mainAnimatedPages');
-    var allPages = [];
+    let allPages = [];
-    var currentUrls = [];
+    let currentUrls = [];
-    var pageContainerCount = 3;
+    const pageContainerCount = 3;
-    var selectedPageIndex = -1;
+    let selectedPageIndex = -1;
     reset();
     mainAnimatedPages.classList.remove('hide');
-    return {
+
+/* eslint-enable indent */
+
+export default {
     loadView: loadView,
     tryRestoreView: tryRestoreView,
     reset: reset,
     setOnBeforeChange: setOnBeforeChange
 };
-});
+

src/components/viewManager/viewManager.js

@@ -1,20 +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';
 
-    var currentView;
+let currentView;
-    var dispatchPageEvents;
+let 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;
@@ -34,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) {
@@ -63,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(',');
@@ -86,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;
@@ -97,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: {
@@ -124,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) {
@@ -142,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 });
         }
@@ -158,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

@@ -1,6 +1,8 @@
 define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'userSettings', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize, userSettings) {
     'use strict';
 
+    layoutManager = layoutManager.default || layoutManager;
+
     function onSubmit(e) {
         e.preventDefault();
         return false;
@@ -29,6 +31,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/config.template.json

@@ -1,3 +1,38 @@
 {
-    "multiserver": false
+    "multiserver": false,
+    "themes": [
+        {
+            "name": "Apple TV",
+            "id": "appletv"
+        }, {
+            "name": "Blue Radiance",
+            "id": "blueradiance"
+        }, {
+            "name": "Dark",
+            "id": "dark",
+            "default": true
+        }, {
+            "name": "Light",
+            "id": "light"
+        }, {
+            "name": "Purple Haze",
+            "id": "purplehaze"
+        }, {
+            "name": "WMC",
+            "id": "wmc"
+        }
+    ],
+    "plugins": [
+        "plugins/playAccessValidation/plugin",
+        "plugins/experimentalWarnings/plugin",
+        "plugins/htmlAudioPlayer/plugin",
+        "plugins/htmlVideoPlayer/plugin",
+        "plugins/photoPlayer/plugin",
+        "plugins/bookPlayer/plugin",
+        "plugins/youtubePlayer/plugin",
+        "plugins/backdropScreensaver/plugin",
+        "plugins/logoScreensaver/plugin",
+        "plugins/sessionPlayer/plugin",
+        "plugins/chromecastPlayer/plugin"
+    ]
 }

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

@@ -1,11 +1,11 @@
-define(['jQuery', 'emby-checkbox'], function ($) {
+import $ from 'jQuery';
-    'use strict';
+import 'emby-checkbox';
 
 function fillItems(elem, items, cssClass, idPrefix, currentList, isEnabledList) {
-        var html = '<div class="checkboxList paperList" style="padding: .5em 1em;">';
+    let html = '<div class="checkboxList paperList" style="padding: .5em 1em;">';
     html += items.map(function (u) {
-            var isChecked = isEnabledList ? currentList.indexOf(u.Id) != -1 : currentList.indexOf(u.Id) == -1;
+        const isChecked = isEnabledList ? currentList.indexOf(u.Id) != -1 : currentList.indexOf(u.Id) == -1;
-            var checkedHtml = isChecked ? ' checked="checked"' : '';
+        const checkedHtml = isChecked ? ' checked="checked"' : '';
         return '<label><input is="emby-checkbox" class="' + cssClass + '" type="checkbox" data-itemid="' + u.Id + '"' + checkedHtml + '/><span>' + u.Name + '</span></label>';
     }).join('');
     html += '</div>';
@@ -13,20 +13,20 @@ define(['jQuery', 'emby-checkbox'], function ($) {
 }
 
 function reload(page) {
-        var type = getParameterByName('type');
+    const type = getParameterByName('type');
-        var promise1 = ApiClient.getUsers();
+    const promise1 = ApiClient.getUsers();
-        var promise2 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
+    const promise2 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
-        var promise3 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
+    const promise3 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
-        var promise4 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Services'));
+    const promise4 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Services'));
     Promise.all([promise1, promise2, promise3, promise4]).then(function (responses) {
-            var users = responses[0];
+        const users = responses[0];
-            var notificationOptions = responses[1];
+        const notificationOptions = responses[1];
-            var types = responses[2];
+        const types = responses[2];
-            var services = responses[3];
+        const services = responses[3];
-            var notificationConfig = notificationOptions.Options.filter(function (n) {
+        let notificationConfig = notificationOptions.Options.filter(function (n) {
             return n.Type == type;
         })[0];
-            var typeInfo = types.filter(function (n) {
+        const typeInfo = types.filter(function (n) {
             return n.Type == type;
         })[0] || {};
 
@@ -56,13 +56,13 @@ define(['jQuery', 'emby-checkbox'], function ($) {
 }
 
 function save(page) {
-        var type = getParameterByName('type');
+    const type = getParameterByName('type');
-        var promise1 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
+    const promise1 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
     // TODO: Check if this promise is really needed, as it's unused.
-        var promise2 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
+    const promise2 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
     Promise.all([promise1, promise2]).then(function (responses) {
-            var notificationOptions = responses[0];
+        const notificationOptions = responses[0];
-            var notificationConfig = notificationOptions.Options.filter(function (n) {
+        let notificationConfig = notificationOptions.Options.filter(function (n) {
             return n.Type == type;
         })[0];
 
@@ -102,9 +102,9 @@ define(['jQuery', 'emby-checkbox'], function ($) {
     return false;
 }
 
-    var notificationsConfigurationKey = 'notifications';
+const notificationsConfigurationKey = 'notifications';
 $(document).on('pageinit', '#notificationSettingPage', function () {
-        var page = this;
+    const page = this;
     $('#selectUsers', page).on('change', function () {
         if (this.value == 'Custom') {
             $('.selectCustomUsers', page).show();
@@ -116,4 +116,3 @@ define(['jQuery', 'emby-checkbox'], function ($) {
 }).on('pageshow', '#notificationSettingPage', function () {
     reload(this);
 });
-});

src/controllers/dashboard/notifications/notifications/index.js

@@ -1,16 +1,16 @@
-define(['loading', 'libraryMenu', 'globalize', 'listViewStyle', 'emby-button'], function(loading, libraryMenu, globalize) {
+import loading from 'loading';
-    'use strict';
+import globalize from 'globalize';
-
+import 'listViewStyle';
-    loading = loading.default || loading;
+import 'emby-button';
 
 function reload(page) {
     loading.show();
     ApiClient.getJSON(ApiClient.getUrl('Notifications/Types')).then(function (list) {
-            var html = '';
+        let html = '';
-            var lastCategory = '';
+        let lastCategory = '';
-            var showHelp = true;
+        let showHelp = true;
         html += list.map(function (notification) {
-                var itemHtml = '';
+            let itemHtml = '';
             if (notification.Category !== lastCategory) {
                 lastCategory = notification.Category;
                 if (lastCategory) {
@@ -54,9 +54,8 @@ define(['loading', 'libraryMenu', 'globalize', 'listViewStyle', 'emby-button'],
     });
 }
 
-    return function(view, params) {
+export default function (view, params) {
     view.addEventListener('viewshow', function () {
         reload(view);
     });
-    };
+}
-});

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];
+        let 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/edititemmetadata.js

@@ -1,13 +1,11 @@
-define(['loading', 'scripts/editorsidebar'], function (loading) {
+import loading from 'loading';
-    'use strict';
+import 'scripts/editorsidebar';
-
-    loading = loading.default || loading;
 
 function reload(context, itemId) {
     loading.show();
 
     if (itemId) {
-            require(['metadataEditor'], function ({default: metadataEditor}) {
+        import('metadataEditor').then(({ default: metadataEditor }) => {
             metadataEditor.embed(context.querySelector('.editPageInnerContent'), itemId, ApiClient.serverInfo().Id);
         });
     } else {
@@ -16,7 +14,7 @@ define(['loading', 'scripts/editorsidebar'], function (loading) {
     }
 }
 
-    return function (view, params) {
+export default function (view, params) {
     view.addEventListener('viewshow', function () {
         reload(this, MetadataEditor.getCurrentItemId());
     });
@@ -29,5 +27,4 @@ define(['loading', 'scripts/editorsidebar'], function (loading) {
             reload(view, data.id);
         }
     });
-    };
+}
-});

src/controllers/favorites.js

@@ -1,5 +1,15 @@
-define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'apphost', 'layoutManager', 'focusManager', 'emby-itemscontainer', 'emby-scroller'], function (appRouter, cardBuilder, dom, globalize, connectionManager, appHost, layoutManager, focusManager) {
+import appRouter from 'appRouter';
-    'use strict';
+import cardBuilder from 'cardBuilder';
+import dom from 'dom';
+import globalize from 'globalize';
+import connectionManager from 'connectionManager';
+import appHost from 'apphost';
+import layoutManager from 'layoutManager';
+import focusManager from 'focusManager';
+import 'emby-itemscontainer';
+import 'emby-scroller';
+
+/* eslint-disable indent */
 
     function enableScrollX() {
         return true;
@@ -133,8 +143,8 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
 
     function getFetchDataFn(section) {
         return function () {
-            var apiClient = this.apiClient;
+            const apiClient = this.apiClient;
-            var options = {
+            const options = {
                 SortBy: (section.types, 'SeriesName,SortName'),
                 SortOrder: 'Ascending',
                 Filters: 'IsFavorite',
@@ -145,7 +155,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
                 EnableTotalRecordCount: false
             };
             options.Limit = 20;
-            var userId = apiClient.getCurrentUserId();
+            const userId = apiClient.getCurrentUserId();
 
             if (section.types === 'MusicArtist') {
                 return apiClient.getArtists(userId, options);
@@ -170,16 +180,16 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
 
     function getItemsHtmlFn(section) {
         return function (items) {
-            var cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle;
+            let cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle;
             cardLayout = false;
-            var serverId = this.apiClient.serverId();
+            const serverId = this.apiClient.serverId();
-            var leadingButtons = layoutManager.tv ? [{
+            const leadingButtons = layoutManager.tv ? [{
                 name: globalize.translate('All'),
                 id: 'more',
                 icon: 'favorite',
                 routeUrl: getRouteUrl(section, serverId)
             }] : null;
-            var lines = 0;
+            let lines = 0;
 
             if (section.showTitle) {
                 lines++;
@@ -215,23 +225,12 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
         };
     }
 
-    function FavoritesTab(view, params) {
-        this.view = view;
-        this.params = params;
-        this.apiClient = connectionManager.currentApiClient();
-        this.sectionsContainer = view.querySelector('.sections');
-        createSections(this, this.sectionsContainer, this.apiClient);
-    }
-
     function createSections(instance, elem, apiClient) {
-        var i;
+        const sections = getSections();
-        var length;
+        let html = '';
-        var sections = getSections();
-        var html = '';
 
-        for (i = 0, length = sections.length; i < length; i++) {
+        for (const section of sections) {
-            var section = sections[i];
+            let sectionClass = 'verticalSection';
-            var sectionClass = 'verticalSection';
 
             if (!section.showTitle) {
                 sectionClass += ' verticalSection-extrabottompadding';
@@ -257,23 +256,32 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
         }
 
         elem.innerHTML = html;
-        var elems = elem.querySelectorAll('.itemsContainer');
+        const elems = elem.querySelectorAll('.itemsContainer');
 
-        for (i = 0, length = elems.length; i < length; i++) {
+        for (let i = 0, length = elems.length; i < length; i++) {
-            var itemsContainer = elems[i];
+            const itemsContainer = elems[i];
             itemsContainer.fetchData = getFetchDataFn(sections[i]).bind(instance);
             itemsContainer.getItemsHtml = getItemsHtmlFn(sections[i]).bind(instance);
             itemsContainer.parentContainer = dom.parentWithClass(itemsContainer, 'verticalSection');
         }
     }
 
-    FavoritesTab.prototype.onResume = function (options) {
+class FavoritesTab {
-        var promises = (this.apiClient, []);
+    constructor(view, params) {
-        var view = this.view;
+        this.view = view;
-        var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+        this.params = params;
+        this.apiClient = connectionManager.currentApiClient();
+        this.sectionsContainer = view.querySelector('.sections');
+        createSections(this, this.sectionsContainer, this.apiClient);
+    }
 
-        for (var i = 0, length = elems.length; i < length; i++) {
+    onResume(options) {
-            promises.push(elems[i].resume(options));
+        const promises = (this.apiClient, []);
+        const view = this.view;
+        const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+
+        for (const elem of elems) {
+            promises.push(elem.resume(options));
         }
 
         Promise.all(promises).then(function () {
@@ -281,30 +289,32 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
                 focusManager.autoFocus(view);
             }
         });
-    };
-
-    FavoritesTab.prototype.onPause = function () {
-        var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
-
-        for (var i = 0, length = elems.length; i < length; i++) {
-            elems[i].pause();
     }
-    };
 
-    FavoritesTab.prototype.destroy = function () {
+    onPause() {
+        const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+
+        for (const elem of elems) {
+            elem.pause();
+        }
+    }
+
+    destroy() {
         this.view = null;
         this.params = null;
         this.apiClient = null;
-        var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+        const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
 
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (const elem of elems) {
-            elems[i].fetchData = null;
+            elem.fetchData = null;
-            elems[i].getItemsHtml = null;
+            elem.getItemsHtml = null;
-            elems[i].parentContainer = null;
+            elem.parentContainer = null;
         }
 
         this.sectionsContainer = null;
-    };
+    }
+}
 
-    return FavoritesTab;
+export default FavoritesTab;
-});
+
+/* eslint-enable indent */

src/controllers/home.js

@@ -40,7 +40,7 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
             var controller = instance.tabControllers[index];
 
             if (!controller) {
-                controller = new controllerFactory(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
+                controller = new controllerFactory.default(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
                 instance.tabControllers[index] = controller;
             }
 

src/controllers/hometab.js

@@ -1,15 +1,66 @@
-define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManager', 'focusManager', 'homeSections', 'emby-itemscontainer'], function (userSettings, loading, connectionManager, appHost, layoutManager, focusManager, homeSections) {
+import * as userSettings from 'userSettings';
-    'use strict';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
+import focusManager from 'focusManager';
+import homeSections from 'homeSections';
+import 'emby-itemscontainer';
 
-    loading = loading.default || loading;
+class HomeTab {
-
+    constructor(view, params) {
-    function HomeTab(view, params) {
         this.view = view;
         this.params = params;
         this.apiClient = connectionManager.currentApiClient();
         this.sectionsContainer = view.querySelector('.sections');
         view.querySelector('.sections').addEventListener('settingschange', onHomeScreenSettingsChanged.bind(this));
     }
+    onResume(options) {
+        if (this.sectionsRendered) {
+            const sectionsContainer = this.sectionsContainer;
+
+            if (sectionsContainer) {
+                return homeSections.resume(sectionsContainer, options);
+            }
+
+            return Promise.resolve();
+        }
+
+        loading.show();
+        const view = this.view;
+        const apiClient = this.apiClient;
+        this.destroyHomeSections();
+        this.sectionsRendered = true;
+        return apiClient.getCurrentUser().then(function (user) {
+            return homeSections.loadSections(view.querySelector('.sections'), apiClient, user, userSettings).then(function () {
+                if (options.autoFocus) {
+                    focusManager.autoFocus(view);
+                }
+
+                loading.hide();
+            });
+        });
+    }
+    onPause() {
+        const sectionsContainer = this.sectionsContainer;
+
+        if (sectionsContainer) {
+            homeSections.pause(sectionsContainer);
+        }
+    }
+    destroy() {
+        this.view = null;
+        this.params = null;
+        this.apiClient = null;
+        this.destroyHomeSections();
+        this.sectionsContainer = null;
+    }
+    destroyHomeSections() {
+        const sectionsContainer = this.sectionsContainer;
+
+        if (sectionsContainer) {
+            homeSections.destroySections(sectionsContainer);
+        }
+    }
+}
 
 function onHomeScreenSettingsChanged() {
     this.sectionsRendered = false;
@@ -21,56 +72,4 @@ define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManage
     }
 }
 
-    HomeTab.prototype.onResume = function (options) {
+export default HomeTab;
-        if (this.sectionsRendered) {
-            var sectionsContainer = this.sectionsContainer;
-
-            if (sectionsContainer) {
-                return homeSections.resume(sectionsContainer, options);
-            }
-
-            return Promise.resolve();
-        }
-
-        loading.show();
-        var view = this.view;
-        var apiClient = this.apiClient;
-        this.destroyHomeSections();
-        this.sectionsRendered = true;
-        return apiClient.getCurrentUser().then(function (user) {
-            return homeSections.loadSections(view.querySelector('.sections'), apiClient, user, userSettings).then(function () {
-                if (options.autoFocus) {
-                    focusManager.autoFocus(view);
-                }
-
-                loading.hide();
-            });
-        });
-    };
-
-    HomeTab.prototype.onPause = function () {
-        var sectionsContainer = this.sectionsContainer;
-
-        if (sectionsContainer) {
-            homeSections.pause(sectionsContainer);
-        }
-    };
-
-    HomeTab.prototype.destroy = function () {
-        this.view = null;
-        this.params = null;
-        this.apiClient = null;
-        this.destroyHomeSections();
-        this.sectionsContainer = null;
-    };
-
-    HomeTab.prototype.destroyHomeSections = function () {
-        var sectionsContainer = this.sectionsContainer;
-
-        if (sectionsContainer) {
-            homeSections.destroySections(sectionsContainer);
-        }
-    };
-
-    return HomeTab;
-});

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';
@@ -29,8 +30,6 @@ import 'emby-select';
 
 /* eslint-disable indent */
 
-    loading = loading.default || loading;
-
     function getPromise(apiClient, params) {
         const id = params.id;
 
@@ -659,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,10 +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';
 
-    loading = loading.default || loading;
+/* eslint-disable indent */
 
     function getInitialLiveTvQuery(instance, params) {
-        var query = {
+        const query = {
             UserId: connectionManager.getApiClient(params.serverId).getCurrentUserId(),
             StartIndex: 0,
             Fields: 'ChannelInfo,PrimaryImageAspectRatio',
@@ -61,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;
@@ -70,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');
@@ -166,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');
@@ -200,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;
@@ -221,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') {
@@ -250,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';
@@ -273,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',
@@ -322,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);
@@ -333,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(),
@@ -348,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(),
@@ -367,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(),
@@ -385,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
             });
@@ -396,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) {
@@ -424,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({
@@ -432,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';
@@ -462,7 +474,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 shape = 'autoVertical';
             }
 
-            var posterOptions = {
+            let posterOptions = {
                 shape: shape,
                 showTitle: settings.showTitle,
                 showYear: settings.showTitle,
@@ -495,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++;
@@ -540,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',
@@ -651,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({
@@ -667,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({
@@ -683,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);
@@ -696,7 +708,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             }
         }
 
-        var self = this;
+        const self = this;
         self.params = params;
         this.itemsContainer = view.querySelector('.itemsContainer');
 
@@ -710,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) {
@@ -733,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') {
@@ -751,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();
@@ -763,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 () {
@@ -778,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);
@@ -805,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();
@@ -844,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',
@@ -864,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);
@@ -914,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'
@@ -927,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
@@ -954,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'),
@@ -968,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;
         }
@@ -979,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;
         }
@@ -990,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;
         }
@@ -1001,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') {
@@ -1036,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) {
@@ -1064,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,
@@ -1077,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');
@@ -1089,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;
@@ -1107,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';
@@ -1119,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'];
@@ -1133,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);
@@ -1195,7 +1201,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         }
 
         return values.join('-');
-    };
+    }
+}
 
-    return ItemsView;
+export default ItemsView;
-});
+
+/* eslint-enable indent */

src/controllers/livetv/livetvchannels.js

@@ -1,10 +1,12 @@
-define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'userSettings', 'emby-itemscontainer'], function (cardBuilder, imageLoader, libraryBrowser, loading, events, userSettings) {
+import cardBuilder from 'cardBuilder';
-    'use strict';
+import imageLoader from 'imageLoader';
+import libraryBrowser from 'libraryBrowser';
+import loading from 'loading';
+import events from 'events';
+import * as userSettings from 'userSettings';
+import 'emby-itemscontainer';
 
-    loading = loading.default || loading;
+export default function (view, params, tabContent) {
-    libraryBrowser = libraryBrowser.default || libraryBrowser;
-
-    return function (view, params, tabContent) {
     function getPageData() {
         if (!pageData) {
             pageData = {
@@ -62,7 +64,7 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
             reloadItems(context);
         }
 
-            var query = getQuery();
+        const query = getQuery();
         context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({
             startIndex: query.StartIndex,
             limit: query.Limit,
@@ -71,13 +73,13 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
             updatePageSizeSetting: false,
             filterButton: false
         });
-            var html = getChannelsHtml(result.Items);
+        const html = getChannelsHtml(result.Items);
-            var elem = context.querySelector('#items');
+        const elem = context.querySelector('#items');
         elem.innerHTML = html;
         imageLoader.lazyChildren(elem);
-            var i;
+        let i;
-            var length;
+        let length;
-            var elems;
+        let elems;
 
         for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) {
             elems[i].addEventListener('click', onNextPageClick);
@@ -89,8 +91,8 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
     }
 
     function showFilterMenu(context) {
-            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
+        import(['components/filterdialog/filterdialog']).then(({default: FilterDialog}) => {
-                var filterDialog = new filterDialogFactory({
+            const filterDialog = new FilterDialog({
                 query: getQuery(),
                 mode: 'livetvchannels',
                 serverId: ApiClient.serverId()
@@ -105,23 +107,23 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
     function reloadItems(context, save) {
         loading.show();
         isLoading = true;
-            var query = getQuery();
+        const query = getQuery();
-            var apiClient = ApiClient;
+        const apiClient = ApiClient;
         query.UserId = apiClient.getCurrentUserId();
         apiClient.getLiveTvChannels(query).then(function (result) {
             renderChannels(context, result);
             loading.hide();
             isLoading = false;
 
-                require(['autoFocuser'], function (autoFocuser) {
+            import('autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(view);
             });
         });
     }
 
-        var pageData;
+    let pageData;
-        var self = this;
+    const self = this;
-        var isLoading = false;
+    let isLoading = false;
     tabContent.querySelector('.btnFilter').addEventListener('click', function () {
         showFilterMenu(tabContent);
     });
@@ -129,5 +131,4 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
     self.renderTab = function () {
         reloadItems(tabContent);
     };
-    };
+}
-});

src/controllers/livetv/livetvrecordings.js

@@ -1,7 +1,9 @@
-define(['layoutManager', 'loading', 'cardBuilder', 'apphost', 'imageLoader', 'scripts/livetvcomponents', 'listViewStyle', 'emby-itemscontainer'], function (layoutManager, loading, cardBuilder, appHost, imageLoader) {
+import loading from 'loading';
-    'use strict';
+import cardBuilder from 'cardBuilder';
-
+import imageLoader from 'imageLoader';
-    loading = loading.default || loading;
+import 'scripts/livetvcomponents';
+import 'listViewStyle';
+import 'emby-itemscontainer';
 
 function renderRecordings(elem, recordings, cardOptions, scrollX) {
     if (!elem) {
@@ -14,7 +16,7 @@ define(['layoutManager', 'loading', 'cardBuilder', 'apphost', 'imageLoader', 'sc
         elem.classList.add('hide');
     }
 
-        var recordingItems = elem.querySelector('.recordingItems');
+    const recordingItems = elem.querySelector('.recordingItems');
 
     if (scrollX) {
         recordingItems.classList.add('scrollX');
@@ -62,8 +64,8 @@ define(['layoutManager', 'loading', 'cardBuilder', 'apphost', 'imageLoader', 'sc
 }
 
 function onMoreClick(e) {
-        var type = this.getAttribute('data-type');
+    const type = this.getAttribute('data-type');
-        var serverId = ApiClient.serverId();
+    const serverId = ApiClient.serverId();
 
     switch (type) {
         case 'latest':
@@ -71,18 +73,18 @@ define(['layoutManager', 'loading', 'cardBuilder', 'apphost', 'imageLoader', 'sc
     }
 }
 
-    return function (view, params, tabContent) {
+export default function (view, params, tabContent) {
     function enableFullRender() {
         return new Date().getTime() - lastFullRender > 300000;
     }
 
-        var foldersPromise;
+    let foldersPromise;
-        var latestPromise;
+    let latestPromise;
-        var self = this;
+    const self = this;
-        var lastFullRender = 0;
+    let lastFullRender = 0;
-        var moreButtons = tabContent.querySelectorAll('.more');
+    const moreButtons = tabContent.querySelectorAll('.more');
 
-        for (var i = 0, length = moreButtons.length; i < length; i++) {
+    for (let i = 0, length = moreButtons.length; i < length; i++) {
         moreButtons[i].addEventListener('click', onMoreClick);
     }
 
@@ -107,5 +109,4 @@ define(['layoutManager', 'loading', 'cardBuilder', 'apphost', 'imageLoader', 'sc
             lastFullRender = new Date().getTime();
         }
     };
-    };
+}
-});

src/controllers/livetv/livetvschedule.js

@@ -1,7 +1,10 @@
-define(['layoutManager', 'cardBuilder', 'apphost', 'imageLoader', 'loading', 'scripts/livetvcomponents', 'emby-button', 'emby-itemscontainer'], function (layoutManager, cardBuilder, appHost, imageLoader, loading) {
+import layoutManager from 'layoutManager';
-    'use strict';
+import cardBuilder from 'cardBuilder';
-
+import imageLoader from 'imageLoader';
-    loading = loading.default || loading;
+import loading from 'loading';
+import 'scripts/livetvcomponents';
+import 'emby-button';
+import 'emby-itemscontainer';
 
 function enableScrollX() {
     return !layoutManager.desktop;
@@ -14,7 +17,7 @@ define(['layoutManager', 'cardBuilder', 'apphost', 'imageLoader', 'loading', 'sc
         elem.classList.add('hide');
     }
 
-        var recordingItems = elem.querySelector('.recordingItems');
+    const recordingItems = elem.querySelector('.recordingItems');
 
     if (enableScrollX()) {
         recordingItems.classList.add('scrollX');
@@ -70,7 +73,7 @@ define(['layoutManager', 'cardBuilder', 'apphost', 'imageLoader', 'loading', 'sc
 
 function renderTimers(context, timers, options) {
     LiveTvHelpers.getTimersHtml(timers, options).then(function (html) {
-            var elem = context;
+        const elem = context;
 
         if (html) {
             elem.classList.remove('hide');
@@ -90,10 +93,10 @@ define(['layoutManager', 'cardBuilder', 'apphost', 'imageLoader', 'loading', 'sc
     });
 }
 
-    return function (view, params, tabContent) {
+export default function (view, params, tabContent) {
-        var activeRecordingsPromise;
+    let activeRecordingsPromise;
-        var upcomingRecordingsPromise;
+    let upcomingRecordingsPromise;
-        var self = this;
+    const self = this;
     tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
         self.preRender();
         self.renderTab();
@@ -118,5 +121,4 @@ define(['layoutManager', 'cardBuilder', 'apphost', 'imageLoader', 'loading', 'sc
         renderActiveRecordings(tabContent, activeRecordingsPromise);
         renderUpcomingRecordings(tabContent, upcomingRecordingsPromise);
     };
-    };
+}
-});

src/controllers/livetv/livetvseriestimers.js

@@ -1,11 +1,11 @@
-define(['datetime', 'cardBuilder', 'imageLoader', 'apphost', 'loading', 'paper-icon-button-light', 'emby-button'], function (datetime, cardBuilder, imageLoader, appHost, loading) {
+import cardBuilder from 'cardBuilder';
-    'use strict';
+import imageLoader from 'imageLoader';
-
+import loading from 'loading';
-    loading = loading.default || loading;
+import 'paper-icon-button-light';
+import 'emby-button';
 
 function renderTimers(context, timers) {
-        var html = '';
+    const html = cardBuilder.getCardsHtml({
-        html += cardBuilder.getCardsHtml({
         items: timers,
         shape: 'auto',
         defaultShape: 'portrait',
@@ -20,7 +20,7 @@ define(['datetime', 'cardBuilder', 'imageLoader', 'apphost', 'loading', 'paper-i
         overlayMoreButton: true,
         lines: 3
     });
-        var elem = context.querySelector('#items');
+    const elem = context.querySelector('#items');
     elem.innerHTML = html;
     imageLoader.lazyChildren(elem);
     loading.hide();
@@ -33,13 +33,14 @@ define(['datetime', 'cardBuilder', 'imageLoader', 'apphost', 'loading', 'paper-i
     });
 }
 
-    var query = {
+const query = {
     SortBy: 'SortName',
     SortOrder: 'Ascending'
 };
-    return function (view, params, tabContent) {
+
-        var timersPromise;
+export default function (view, params, tabContent) {
-        var self = this;
+    let timersPromise;
+    const self = this;
 
     self.preRender = function () {
         timersPromise = ApiClient.getLiveTvSeriesTimers(query);
@@ -48,5 +49,4 @@ define(['datetime', 'cardBuilder', 'imageLoader', 'apphost', 'loading', 'paper-i
     self.renderTab = function () {
         reload(tabContent, timersPromise);
     };
-    };
+}
-});

src/controllers/livetv/livetvsuggested.js

@@ -177,9 +177,6 @@ function getTabs() {
         name: globalize.translate('HeaderSchedule')
     }, {
         name: globalize.translate('TabSeries')
-    }, {
-        name: globalize.translate('ButtonSearch'),
-        cssClass: 'searchTabButton'
     }];
 }
 

src/controllers/livetvguideprovider.js

@@ -1,24 +1,23 @@
-define(['events', 'loading', 'globalize'], function (events, loading, globalize) {
+import events from 'events';
-    'use strict';
+import loading from 'loading';
-
+import globalize from 'globalize';
-    loading = loading.default || loading;
 
 function onListingsSubmitted() {
     Dashboard.navigate('livetvstatus.html');
 }
 
 function init(page, type, providerId) {
-        var url = 'components/tvproviders/' + type + '.js';
+    const url = 'components/tvproviders/' + type + '.js';
 
-        require([url], function (factory) {
+    import(url).then(({default: factory}) => {
-            var instance = new factory(page, providerId, {});
+        const instance = new factory(page, providerId, {});
         events.on(instance, 'submitted', onListingsSubmitted);
         instance.init();
     });
 }
 
 function loadTemplate(page, type, providerId) {
-        require(['text!./components/tvproviders/' + type + '.template.html'], function (html) {
+    import('text!./../components/tvproviders/' + type + '.template.html').then(({default: html}) => {
         page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html);
         init(page, type, providerId);
     });
@@ -26,7 +25,6 @@ define(['events', 'loading', 'globalize'], function (events, loading, globalize)
 
 pageIdOn('pageshow', 'liveTvGuideProviderPage', function () {
     loading.show();
-        var providerId = getParameterByName('id');
+    const providerId = getParameterByName('id');
     loadTemplate(this, getParameterByName('type'), providerId);
 });
-});

src/controllers/livetvsettings.js

@@ -3,8 +3,6 @@ import loading from 'loading';
 import globalize from 'globalize';
 import 'emby-button';
 
-loading = loading.default || loading;
-
 function loadPage(page, config) {
     $('.liveTvSettingsForm', page).show();
     $('.noLiveTvServices', page).hide();

src/controllers/movies/moviecollections.js

@@ -1,13 +1,18 @@
-define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) {
+import loading from 'loading';
-    'use strict';
+import libraryBrowser from 'libraryBrowser';
+import imageLoader from 'imageLoader';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import * as userSettings from 'userSettings';
+import globalize from 'globalize';
+import 'emby-itemscontainer';
 
-    loading = loading.default || loading;
+/* eslint-disable indent */
-    libraryBrowser = libraryBrowser.default || libraryBrowser;
 
-    return function (view, params, tabContent) {
+    export default function (view, params, tabContent) {
         function getPageData(context) {
-            var key = getSavedQueryKey(context);
+            const key = getSavedQueryKey(context);
-            var pageData = data[key];
+            let pageData = data[key];
 
             if (!pageData) {
                 pageData = data[key] = {
@@ -47,9 +52,9 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
             return context.savedQueryKey;
         }
 
-        function onViewStyleChange() {
+        const onViewStyleChange = () => {
-            var viewStyle = self.getCurrentViewStyle();
+            const viewStyle = this.getCurrentViewStyle();
-            var itemsContainer = tabContent.querySelector('.itemsContainer');
+            const itemsContainer = tabContent.querySelector('.itemsContainer');
 
             if (viewStyle == 'List') {
                 itemsContainer.classList.add('vertical-list');
@@ -60,13 +65,13 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
             }
 
             itemsContainer.innerHTML = '';
-        }
+        };
 
-        function reloadItems(page) {
+        const reloadItems = (page) => {
             loading.show();
             isLoading = true;
-            var query = getQuery(page);
+            const query = getQuery(page);
-            ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
+            ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
                 function onNextPageClick() {
                     if (isLoading) {
                         return;
@@ -90,8 +95,8 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                 }
 
                 window.scrollTo(0, 0);
-                var html;
+                let html;
-                var pagingHtml = libraryBrowser.getQueryPagingHtml({
+                const pagingHtml = libraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
@@ -101,7 +106,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                     sortButton: false,
                     filterButton: false
                 });
-                var viewStyle = self.getCurrentViewStyle();
+                const viewStyle = this.getCurrentViewStyle();
                 if (viewStyle == 'Thumb') {
                     html = cardBuilder.getCardsHtml({
                         items: result.Items,
@@ -155,22 +160,21 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                         showTitle: true
                     });
                 }
-                var i;
-                var length;
-                var elems = tabContent.querySelectorAll('.paging');
 
-                for (i = 0, length = elems.length; i < length; i++) {
+                let elems = tabContent.querySelectorAll('.paging');
-                    elems[i].innerHTML = pagingHtml;
+
+                for (const elem of elems) {
+                    elem.innerHTML = pagingHtml;
                 }
 
                 elems = tabContent.querySelectorAll('.btnNextPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (const elem of elems) {
-                    elems[i].addEventListener('click', onNextPageClick);
+                    elem.addEventListener('click', onNextPageClick);
                 }
 
                 elems = tabContent.querySelectorAll('.btnPreviousPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (const elem of elems) {
-                    elems[i].addEventListener('click', onPreviousPageClick);
+                    elem.addEventListener('click', onPreviousPageClick);
                 }
 
                 if (!result.Items.length) {
@@ -182,28 +186,27 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                     html += '</div>';
                 }
 
-                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                const itemsContainer = tabContent.querySelector('.itemsContainer');
                 itemsContainer.innerHTML = html;
                 imageLoader.lazyChildren(itemsContainer);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
                 loading.hide();
                 isLoading = false;
 
-                require(['autoFocuser'], function (autoFocuser) {
+                import('autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(page);
                 });
             });
-        }
+        };
 
-        var self = this;
+        const data = {};
-        var data = {};
+        let isLoading = false;
-        var isLoading = false;
 
-        self.getCurrentViewStyle = function () {
+        this.getCurrentViewStyle = function () {
             return getPageData(tabContent).view;
         };
 
-        function initPage(tabContent) {
+        const initPage = (tabContent) => {
             tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
@@ -230,36 +233,37 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                     button: e.target
                 });
             });
-            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            const btnSelectView = tabContent.querySelector('.btnSelectView');
             btnSelectView.addEventListener('click', function (e) {
-                libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
+                libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
             });
             btnSelectView.addEventListener('layoutchange', function (e) {
-                var viewStyle = e.detail.viewStyle;
+                const viewStyle = e.detail.viewStyle;
                 getPageData(tabContent).view = viewStyle;
                 libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
                 getQuery(tabContent).StartIndex = 0;
                 onViewStyleChange();
                 reloadItems(tabContent);
             });
-            tabContent.querySelector('.btnNewCollection').addEventListener('click', function () {
+            tabContent.querySelector('.btnNewCollection').addEventListener('click', () => {
-                require(['collectionEditor'], function (collectionEditor) {
+                import('collectionEditor').then(({default: collectionEditor}) => {
-                    var serverId = ApiClient.serverInfo().Id;
+                    const serverId = ApiClient.serverInfo().Id;
                     new collectionEditor.showEditor({
                         items: [],
                         serverId: serverId
                     });
                 });
             });
-        }
+        };
 
         initPage(tabContent);
         onViewStyleChange();
 
-        self.renderTab = function () {
+        this.renderTab = function () {
             reloadItems(tabContent);
         };
 
-        self.destroy = function () {};
+        this.destroy = function () {};
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/movies/moviegenres.js

@@ -1,13 +1,18 @@
-define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'appRouter', 'dom', 'emby-button'], function (layoutManager, loading, libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, appRouter, dom) {
+import layoutManager from 'layoutManager';
-    'use strict';
+import loading from 'loading';
+import libraryBrowser from 'libraryBrowser';
+import cardBuilder from 'cardBuilder';
+import lazyLoader from 'lazyLoader';
+import globalize from 'globalize';
+import appRouter from 'appRouter';
+import 'emby-button';
 
-    loading = loading.default || loading;
+/* eslint-disable indent */
-    libraryBrowser = libraryBrowser.default || libraryBrowser;
 
-    return function (view, params, tabContent) {
+    export default function (view, params, tabContent) {
         function getPageData() {
-            var key = getSavedQueryKey();
+            const key = getSavedQueryKey();
-            var pageData = data[key];
+            let pageData = data[key];
 
             if (!pageData) {
                 pageData = data[key] = {
@@ -37,7 +42,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
 
         function getPromise() {
             loading.show();
-            var query = getQuery();
+            const query = getQuery();
             return ApiClient.getGenres(ApiClient.getCurrentUserId(), query);
         }
 
@@ -53,18 +58,18 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
             return enableScrollX() ? 'overflowPortrait' : 'portrait';
         }
 
-        function fillItemsContainer(entry) {
+        const fillItemsContainer = (entry) => {
-            var elem = entry.target;
+            const elem = entry.target;
-            var id = elem.getAttribute('data-id');
+            const id = elem.getAttribute('data-id');
-            var viewStyle = self.getCurrentViewStyle();
+            const viewStyle = this.getCurrentViewStyle();
-            var limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
+            let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
 
             if (enableScrollX()) {
                 limit = 10;
             }
 
-            var enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
+            const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
-            var query = {
+            const query = {
                 SortBy: 'SortName',
                 SortOrder: 'Ascending',
                 IncludeItemTypes: 'Movie',
@@ -126,17 +131,17 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
                     tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide');
                 }
             });
-        }
+        };
 
         function reloadItems(context, promise) {
-            var query = getQuery();
+            const query = getQuery();
             promise.then(function (result) {
-                var elem = context.querySelector('#items');
+                const elem = context.querySelector('#items');
-                var html = '';
+                let html = '';
-                var items = result.Items;
+                const items = result.Items;
 
-                for (var i = 0, length = items.length; i < length; i++) {
+                for (let i = 0, length = items.length; i < length; i++) {
-                    var item = items[i];
+                    const item = items[i];
 
                     html += '<div class="verticalSection">';
                     html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
@@ -151,7 +156,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
                     html += '</a>';
                     html += '</div>';
                     if (enableScrollX()) {
-                        var scrollXClass = 'scrollX hiddenScrollX';
+                        let scrollXClass = 'scrollX hiddenScrollX';
 
                         if (layoutManager.tv) {
                             scrollXClass += 'smoothScrollX padded-top-focusscale padded-bottom-focusscale';
@@ -182,37 +187,37 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
             });
         }
 
-        function fullyReload() {
+        const fullyReload = () => {
-            self.preRender();
+            this.preRender();
-            self.renderTab();
+            this.renderTab();
-        }
+        };
 
-        var self = this;
+        const data = {};
-        var data = {};
 
-        self.getViewStyles = function () {
+        this.getViewStyles = function () {
             return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
         };
 
-        self.getCurrentViewStyle = function () {
+        this.getCurrentViewStyle = function () {
             return getPageData().view;
         };
 
-        self.setCurrentViewStyle = function (viewStyle) {
+        this.setCurrentViewStyle = function (viewStyle) {
             getPageData().view = viewStyle;
             libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
             fullyReload();
         };
 
-        self.enableViewSelection = true;
+        this.enableViewSelection = true;
-        var promise;
+        let promise;
 
-        self.preRender = function () {
+        this.preRender = function () {
             promise = getPromise();
         };
 
-        self.renderTab = function () {
+        this.renderTab = function () {
             reloadItems(tabContent, promise);
         };
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/movies/movies.js

@@ -1,12 +1,18 @@
-define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, AlphaPicker, listView, cardBuilder, globalize) {
+import loading from 'loading';
-    'use strict';
+import * as userSettings from 'userSettings';
+import events from 'events';
+import libraryBrowser from 'libraryBrowser';
+import AlphaPicker from 'alphaPicker';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import globalize from 'globalize';
+import 'emby-itemscontainer';
 
-    loading = loading.default || loading;
+/* eslint-disable indent */
-    libraryBrowser = libraryBrowser.default || libraryBrowser;
 
-    return function (view, params, tabContent, options) {
+    export default function (view, params, tabContent, options) {
-        function onViewStyleChange() {
+        const onViewStyleChange = () => {
-            if (self.getCurrentViewStyle() == 'List') {
+            if (this.getCurrentViewStyle() == 'List') {
                 itemsContainer.classList.add('vertical-list');
                 itemsContainer.classList.remove('vertical-wrap');
             } else {
@@ -15,13 +21,13 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             }
 
             itemsContainer.innerHTML = '';
-        }
+        };
 
-        function updateFilterControls() {
+        const updateFilterControls = () => {
-            if (self.alphaPicker) {
+            if (this.alphaPicker) {
-                self.alphaPicker.value(query.NameStartsWithOrGreater);
+                this.alphaPicker.value(query.NameStartsWithOrGreater);
-            }
             }
+        };
 
         function fetchData() {
             isLoading = true;
@@ -54,7 +60,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
 
             window.scrollTo(0, 0);
             updateFilterControls();
-            var pagingHtml = libraryBrowser.getQueryPagingHtml({
+            const pagingHtml = libraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
@@ -64,35 +70,30 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
                 sortButton: false,
                 filterButton: false
             });
-            var i;
-            var length;
-            var elems = tabContent.querySelectorAll('.paging');
 
-            for (i = 0, length = elems.length; i < length; i++) {
+            for (const elem of tabContent.querySelectorAll('.paging')) {
-                elems[i].innerHTML = pagingHtml;
+                elem.innerHTML = pagingHtml;
             }
 
-            elems = tabContent.querySelectorAll('.btnNextPage');
+            for (const elem of tabContent.querySelectorAll('.btnNextPage')) {
-            for (i = 0, length = elems.length; i < length; i++) {
+                elem.addEventListener('click', onNextPageClick);
-                elems[i].addEventListener('click', onNextPageClick);
             }
 
-            elems = tabContent.querySelectorAll('.btnPreviousPage');
+            for (const elem of tabContent.querySelectorAll('.btnPreviousPage')) {
-            for (i = 0, length = elems.length; i < length; i++) {
+                elem.addEventListener('click', onPreviousPageClick);
-                elems[i].addEventListener('click', onPreviousPageClick);
             }
 
             isLoading = false;
             loading.hide();
 
-            require(['autoFocuser'], function (autoFocuser) {
+            import('autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(tabContent);
             });
         }
 
-        function getItemsHtml(items) {
+        const getItemsHtml = (items) => {
-            var html;
+            let html;
-            var viewStyle = self.getCurrentViewStyle();
+            const viewStyle = this.getCurrentViewStyle();
 
             if (viewStyle == 'Thumb') {
                 html = cardBuilder.getCardsHtml({
@@ -156,22 +157,22 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             }
 
             return html;
-        }
+        };
 
-        function initPage(tabContent) {
+        const initPage = (tabContent) => {
             itemsContainer.fetchData = fetchData;
             itemsContainer.getItemsHtml = getItemsHtml;
             itemsContainer.afterRefresh = afterRefresh;
-            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            let alphaPickerElement = tabContent.querySelector('.alphaPicker');
 
             if (alphaPickerElement) {
                 alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-                    var newValue = e.detail.value;
+                    let newValue = e.detail.value;
                     query.NameStartsWithOrGreater = newValue;
                     query.StartIndex = 0;
                     itemsContainer.refreshItems();
                 });
-                self.alphaPicker = new AlphaPicker.default({
+                this.alphaPicker = new AlphaPicker({
                     element: alphaPickerElement,
                     valueChangeEvent: 'click'
                 });
@@ -181,14 +182,14 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
                 itemsContainer.classList.add('padded-right-withalphapicker');
             }
 
-            var btnFilter = tabContent.querySelector('.btnFilter');
+            const btnFilter = tabContent.querySelector('.btnFilter');
 
             if (btnFilter) {
-                btnFilter.addEventListener('click', function () {
+                btnFilter.addEventListener('click', () => {
-                    self.showFilterMenu();
+                    this.showFilterMenu();
                 });
             }
-            var btnSort = tabContent.querySelector('.btnSort');
+            const btnSort = tabContent.querySelector('.btnSort');
 
             if (btnSort) {
                 btnSort.addEventListener('click', function (e) {
@@ -231,24 +232,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
                     });
                 });
             }
-            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            const btnSelectView = tabContent.querySelector('.btnSelectView');
             btnSelectView.addEventListener('click', function (e) {
-                libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
+                libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle, 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
             });
             btnSelectView.addEventListener('layoutchange', function (e) {
-                var viewStyle = e.detail.viewStyle;
+                let viewStyle = e.detail.viewStyle;
                 userSettings.set(savedViewKey, viewStyle);
                 query.StartIndex = 0;
                 onViewStyleChange();
                 itemsContainer.refreshItems();
             });
-        }
+        };
 
-        var self = this;
+        let itemsContainer = tabContent.querySelector('.itemsContainer');
-        var itemsContainer = tabContent.querySelector('.itemsContainer');
+        const savedQueryKey = params.topParentId + '-' + options.mode;
-        var savedQueryKey = params.topParentId + '-' + options.mode;
+        const savedViewKey = savedQueryKey + '-view';
-        var savedViewKey = savedQueryKey + '-view';
+        let query = {
-        var query = {
             SortBy: 'SortName,ProductionYear',
             SortOrder: 'Ascending',
             IncludeItemTypes: 'Movie',
@@ -264,7 +264,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             query['Limit'] = userSettings.libraryPageSize();
         }
 
-        var isLoading = false;
+        let isLoading = false;
 
         if (options.mode === 'favorites') {
             query.IsFavorite = true;
@@ -272,14 +272,14 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
 
         query = userSettings.loadQuerySettings(savedQueryKey, query);
 
-        self.showFilterMenu = function () {
+        this.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
+            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
-                var filterDialog = new filterDialogFactory({
+                let filterDialog = new filterDialogFactory({
                     query: query,
                     mode: 'movies',
                     serverId: ApiClient.serverId()
                 });
-                events.on(filterDialog, 'filterchange', function () {
+                events.on(filterDialog, 'filterchange', () => {
                     query.StartIndex = 0;
                     itemsContainer.refreshItems();
                 });
@@ -287,22 +287,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             });
         };
 
-        self.getCurrentViewStyle = function () {
+        this.getCurrentViewStyle = function () {
             return userSettings.get(savedViewKey) || 'Poster';
         };
 
-        self.initTab = function () {
+        this.initTab = function () {
             initPage(tabContent);
             onViewStyleChange();
         };
 
-        self.renderTab = function () {
+        this.renderTab = function () {
             itemsContainer.refreshItems();
             updateFilterControls();
         };
 
-        self.destroy = function () {
+        this.destroy = function () {
             itemsContainer = null;
         };
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/movies/moviesrecommended.js

@@ -1,5 +1,20 @@
-define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu', 'mainTabsManager', 'cardBuilder', 'dom', 'imageLoader', 'playbackManager', 'globalize', 'emby-scroller', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager, globalize) {
+import events from 'events';
-    'use strict';
+import layoutManager from 'layoutManager';
+import inputManager from 'inputManager';
+import * as userSettings from 'userSettings';
+import libraryMenu from 'libraryMenu';
+import * as mainTabsManager from 'mainTabsManager';
+import cardBuilder from 'cardBuilder';
+import dom from 'dom';
+import imageLoader from 'imageLoader';
+import playbackManager from 'playbackManager';
+import globalize from 'globalize';
+import 'emby-scroller';
+import 'emby-itemscontainer';
+import 'emby-tabs';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function enableScrollX() {
         return !layoutManager.desktop;
@@ -14,7 +29,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function loadLatest(page, userId, parentId) {
-        var options = {
+        const options = {
             IncludeItemTypes: 'Movie',
             Limit: 18,
             Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
@@ -24,8 +39,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             EnableTotalRecordCount: false
         };
         ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
-            var allowBottomPadding = !enableScrollX();
+            const allowBottomPadding = !enableScrollX();
-            var container = page.querySelector('#recentlyAddedItems');
+            const container = page.querySelector('#recentlyAddedItems');
             cardBuilder.buildCards(items, {
                 itemsContainer: container,
                 shape: getPortraitShape(),
@@ -43,8 +58,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function loadResume(page, userId, parentId) {
-        var screenWidth = dom.getWindowSize().innerWidth;
+        let screenWidth = dom.getWindowSize().innerWidth;
-        var options = {
+        const options = {
             SortBy: 'DatePlayed',
             SortOrder: 'Descending',
             IncludeItemTypes: 'Movie',
@@ -65,8 +80,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
                 page.querySelector('#resumableSection').classList.add('hide');
             }
 
-            var allowBottomPadding = !enableScrollX();
+            const allowBottomPadding = !enableScrollX();
-            var container = page.querySelector('#resumableItems');
+            const container = page.querySelector('#resumableItems');
             cardBuilder.buildCards(result.Items, {
                 itemsContainer: container,
                 preferThumb: true,
@@ -86,8 +101,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function getRecommendationHtml(recommendation) {
-        var html = '';
+        let html = '';
-        var title = '';
+        let title = '';
 
         switch (recommendation.RecommendationType) {
             case 'SimilarToRecentlyPlayed':
@@ -111,7 +126,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
 
         html += '<div class="verticalSection">';
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
-        var allowBottomPadding = true;
+        const allowBottomPadding = true;
 
         if (enableScrollX()) {
             html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
@@ -139,8 +154,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function loadSuggestions(page, userId, parentId) {
-        var screenWidth = dom.getWindowSize().innerWidth;
+        let screenWidth = dom.getWindowSize().innerWidth;
-        var url = ApiClient.getUrl('Movies/Recommendations', {
+        let url = ApiClient.getUrl('Movies/Recommendations', {
             userId: userId,
             categoryLimit: 6,
             ItemLimit: screenWidth >= 1920 ? 8 : screenWidth >= 1600 ? 8 : screenWidth >= 1200 ? 6 : 5,
@@ -155,9 +170,9 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
                 return;
             }
 
-            var html = recommendations.map(getRecommendationHtml).join('');
+            const html = recommendations.map(getRecommendationHtml).join('');
             page.querySelector('.noItemsMessage').classList.add('hide');
-            var recs = page.querySelector('.recommendations');
+            let recs = page.querySelector('.recommendations');
             recs.innerHTML = html;
             imageLoader.lazyChildren(recs);
 
@@ -167,7 +182,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function autoFocus(page) {
-        require(['autoFocuser'], function (autoFocuser) {
+        import('autoFocuser').then(({default: autoFocuser}) => {
             autoFocuser.autoFocus(page);
         });
     }
@@ -193,17 +208,16 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function initSuggestedTab(page, tabContent) {
-        var containers = tabContent.querySelectorAll('.itemsContainer');
+        const containers = tabContent.querySelectorAll('.itemsContainer');
 
-        for (var i = 0, length = containers.length; i < length; i++) {
+        for (const container of containers) {
-            setScrollClasses(containers[i], enableScrollX());
+            setScrollClasses(container, enableScrollX());
         }
     }
 
     function loadSuggestionsTab(view, params, tabContent) {
-        var parentId = params.topParentId;
+        const parentId = params.topParentId;
-        var userId = ApiClient.getCurrentUserId();
+        const userId = ApiClient.getCurrentUserId();
-        console.debug('loadSuggestionsTab');
         loadResume(tabContent, userId, parentId);
         loadLatest(tabContent, userId, parentId);
         loadSuggestions(tabContent, userId, parentId);
@@ -222,9 +236,6 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             name: globalize.translate('TabCollections')
         }, {
             name: globalize.translate('TabGenres')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -247,13 +258,13 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
         }
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         function onBeforeTabChange(e) {
             preLoadTab(view, parseInt(e.detail.selectedTabIndex));
         }
 
         function onTabChange(e) {
-            var newIndex = parseInt(e.detail.selectedTabIndex);
+            const newIndex = parseInt(e.detail.selectedTabIndex);
             loadTab(view, newIndex);
         }
 
@@ -265,52 +276,50 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
         }
 
-        function getTabController(page, index, callback) {
+        const getTabController = (page, index, callback) => {
-            var depends = [];
+            let depends = '';
 
             switch (index) {
                 case 0:
-                    depends.push('controllers/movies/movies');
+                    depends = 'controllers/movies/movies';
                     break;
 
                 case 1:
+                    depends = 'controllers/movies/moviesrecommended.js';
                     break;
 
                 case 2:
-                    depends.push('controllers/movies/movietrailers');
+                    depends = 'controllers/movies/movietrailers';
                     break;
 
                 case 3:
-                    depends.push('controllers/movies/movies');
+                    depends = 'controllers/movies/movies';
                     break;
 
                 case 4:
-                    depends.push('controllers/movies/moviecollections');
+                    depends = 'controllers/movies/moviecollections';
                     break;
 
                 case 5:
-                    depends.push('controllers/movies/moviegenres');
+                    depends = 'controllers/movies/moviegenres';
                     break;
-
-                case 6:
-                    depends.push('scripts/searchtab');
             }
 
-            require(depends, function (controllerFactory) {
+            import(depends).then(({default: controllerFactory}) => {
-                var tabContent;
+                let tabContent;
 
                 if (index === suggestionsTabIndex) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
-                    self.tabContent = tabContent;
+                    this.tabContent = tabContent;
                 }
 
-                var controller = tabControllers[index];
+                let controller = tabControllers[index];
 
                 if (!controller) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
 
                     if (index === suggestionsTabIndex) {
-                        controller = self;
+                        controller = this;
                     } else if (index === 6) {
                         controller = new controllerFactory(view, tabContent, {
                             collectionType: 'movies',
@@ -333,7 +342,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
 
                 callback(controller);
             });
-        }
+        };
 
         function preLoadTab(page, index) {
             getTabController(page, index, function (controller) {
@@ -345,12 +354,12 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
 
         function loadTab(page, index) {
             currentTabIndex = index;
-            getTabController(page, index, function (controller) {
+            getTabController(page, index, ((controller) => {
                 if (renderedTabs.indexOf(index) == -1) {
                     renderedTabs.push(index);
                     controller.renderTab();
                 }
-            });
+            }));
         }
 
         function onPlaybackStop(e, state) {
@@ -368,22 +377,21 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             }
         }
 
-        var self = this;
+        let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
-        var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
+        const suggestionsTabIndex = 1;
-        var suggestionsTabIndex = 1;
 
-        self.initTab = function () {
+        this.initTab = function () {
-            var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
+            let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             initSuggestedTab(view, tabContent);
         };
 
-        self.renderTab = function () {
+        this.renderTab = function () {
-            var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
+            let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             loadSuggestionsTab(view, params, tabContent);
         };
 
-        var tabControllers = [];
+        let tabControllers = [];
-        var renderedTabs = [];
+        let renderedTabs = [];
         view.addEventListener('viewshow', function (e) {
             initTabs();
             if (!view.getAttribute('data-title')) {
@@ -403,15 +411,14 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             events.on(playbackManager, 'playbackstop', onPlaybackStop);
             inputManager.on(window, onInputCommand);
         });
-        view.addEventListener('viewbeforehide', function (e) {
+        view.addEventListener('viewbeforehide', function () {
             inputManager.off(window, onInputCommand);
         });
-        view.addEventListener('viewdestroy', function (e) {
+        for (const tabController of tabControllers) {
-            tabControllers.forEach(function (t) {
+            if (tabController.destroy) {
-                if (t.destroy) {
+                tabController.destroy();
-                    t.destroy();
             }
-            });
+        }
-        });
+    }
-    };
+
-});
+/* eslint-enable indent */

src/controllers/movies/movietrailers.js

@@ -1,13 +1,20 @@
-define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
+import loading from 'loading';
-    'use strict';
+import events from 'events';
+import libraryBrowser from 'libraryBrowser';
+import imageLoader from 'imageLoader';
+import AlphaPicker from 'alphaPicker';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import * as userSettings from 'userSettings';
+import globalize from 'globalize';
+import 'emby-itemscontainer';
 
-    loading = loading.default || loading;
+/* eslint-disable indent */
-    libraryBrowser = libraryBrowser.default || libraryBrowser;
 
-    return function (view, params, tabContent) {
+    export default function (view, params, tabContent) {
         function getPageData(context) {
-            var key = getSavedQueryKey(context);
+            const key = getSavedQueryKey(context);
-            var pageData = data[key];
+            let pageData = data[key];
 
             if (!pageData) {
                 pageData = data[key] = {
@@ -46,11 +53,11 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
             return context.savedQueryKey;
         }
 
-        function reloadItems() {
+        const reloadItems = () => {
             loading.show();
             isLoading = true;
-            var query = getQuery(tabContent);
+            const query = getQuery(tabContent);
-            ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
+            ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
                 function onNextPageClick() {
                     if (isLoading) {
                         return;
@@ -75,7 +82,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
 
                 window.scrollTo(0, 0);
                 updateFilterControls(tabContent);
-                var pagingHtml = libraryBrowser.getQueryPagingHtml({
+                const pagingHtml = libraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
@@ -85,8 +92,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
                     sortButton: false,
                     filterButton: false
                 });
-                var html;
+                let html;
-                var viewStyle = self.getCurrentViewStyle();
+                const viewStyle = this.getCurrentViewStyle();
 
                 if (viewStyle == 'Thumb') {
                     html = cardBuilder.getCardsHtml({
@@ -142,22 +149,20 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
                     });
                 }
 
-                var i;
+                let elems = tabContent.querySelectorAll('.paging');
-                var length;
-                var elems = tabContent.querySelectorAll('.paging');
 
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (const elem of elems) {
-                    elems[i].innerHTML = pagingHtml;
+                    elem.innerHTML = pagingHtml;
                 }
 
                 elems = tabContent.querySelectorAll('.btnNextPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (const elem of elems) {
-                    elems[i].addEventListener('click', onNextPageClick);
+                    elem.addEventListener('click', onNextPageClick);
                 }
 
                 elems = tabContent.querySelectorAll('.btnPreviousPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (const elem of elems) {
-                    elems[i].addEventListener('click', onPreviousPageClick);
+                    elem.addEventListener('click', onPreviousPageClick);
                 }
 
                 if (!result.Items.length) {
@@ -169,27 +174,26 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
                     html += '</div>';
                 }
 
-                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                const itemsContainer = tabContent.querySelector('.itemsContainer');
                 itemsContainer.innerHTML = html;
                 imageLoader.lazyChildren(itemsContainer);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(tabContent), query);
                 loading.hide();
                 isLoading = false;
             });
-        }
+        };
 
-        function updateFilterControls(tabContent) {
+        const updateFilterControls = (tabContent) => {
-            var query = getQuery(tabContent);
+            const query = getQuery(tabContent);
-            self.alphaPicker.value(query.NameStartsWithOrGreater);
+            this.alphaPicker.value(query.NameStartsWithOrGreater);
-        }
+        };
 
-        var self = this;
+        const data = {};
-        var data = {};
+        let isLoading = false;
-        var isLoading = false;
 
-        self.showFilterMenu = function () {
+        this.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
+            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
-                var filterDialog = new filterDialogFactory({
+                const filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: 'movies',
                     serverId: ApiClient.serverId()
@@ -202,21 +206,21 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
             });
         };
 
-        self.getCurrentViewStyle = function () {
+        this.getCurrentViewStyle = function () {
             return getPageData(tabContent).view;
         };
 
-        function initPage(tabContent) {
+        const initPage = (tabContent) => {
-            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            const alphaPickerElement = tabContent.querySelector('.alphaPicker');
-            var itemsContainer = tabContent.querySelector('.itemsContainer');
+            const itemsContainer = tabContent.querySelector('.itemsContainer');
             alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-                var newValue = e.detail.value;
+                const newValue = e.detail.value;
-                var query = getQuery(tabContent);
+                const query = getQuery(tabContent);
                 query.NameStartsWithOrGreater = newValue;
                 query.StartIndex = 0;
                 reloadItems();
             });
-            self.alphaPicker = new AlphaPicker.default({
+            this.alphaPicker = new AlphaPicker({
                 element: alphaPickerElement,
                 valueChangeEvent: 'click'
             });
@@ -226,7 +230,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
             itemsContainer.classList.add('padded-right-withalphapicker');
 
             tabContent.querySelector('.btnFilter').addEventListener('click', function () {
-                self.showFilterMenu();
+                this.showFilterMenu();
             });
             tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
                 libraryBrowser.showSortMenu({
@@ -260,15 +264,16 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
                     button: e.target
                 });
             });
-        }
+        };
 
         initPage(tabContent);
 
-        self.renderTab = function () {
+        this.renderTab = function () {
             reloadItems();
             updateFilterControls(tabContent);
         };
 
-        self.destroy = function () {};
+        this.destroy = function () {};
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/music/musicrecommended.js

@@ -191,9 +191,6 @@ import 'flexStyles';
             name: globalize.translate('TabSongs')
         }, {
             name: globalize.translate('TabGenres')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -295,10 +292,6 @@ import 'flexStyles';
                 case 6:
                     depends = 'controllers/music/musicgenres';
                     break;
-
-                case 7:
-                    depends = 'scripts/searchtab';
-                    break;
             }
 
             import(depends).then(({default: controllerFactory}) => {

src/controllers/shows/tvrecommended.js

@@ -30,9 +30,6 @@ import 'emby-button';
             name: globalize.translate('TabNetworks')
         }, {
             name: globalize.translate('TabEpisodes')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -217,10 +214,6 @@ import 'emby-button';
                 case 6:
                     depends = 'controllers/shows/episodes';
                     break;
-
-                case 7:
-                    depends = 'scripts/searchtab';
-                    break;
             }
 
             import(depends).then(({default: controllerFactory}) => {

src/elements/emby-slider/emby-slider.css

@@ -230,3 +230,18 @@
     margin: 0;
     padding: 0.5em 0.75em;
 }
+
+/* FIXME: 'sliderContainer' is used to wrap slider's pieces */
+.sliderContainer-settings {
+    margin-bottom: 1.8em;
+    position: relative;
+}
+
+.sliderContainer-settings .mdl-slider-container {
+    height: 2.83em; /* similar to emby-input with its 110% font-size */
+}
+
+.sliderLabel {
+    display: block;
+    margin-bottom: 0.25em;
+}

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

@@ -150,6 +150,16 @@ import 'emby-input';
             this.classList.add('show-focus');
         }
 
+        const topContainer = dom.parentWithClass(this, 'sliderContainer-settings');
+
+        if (topContainer && this.getAttribute('label')) {
+            const label = this.ownerDocument.createElement('label');
+            label.innerHTML = this.getAttribute('label');
+            label.classList.add('sliderLabel');
+            label.htmlFor = this.id;
+            topContainer.insertBefore(label, topContainer.firstChild);
+        }
+
         const containerElement = this.parentNode;
         containerElement.classList.add('mdl-slider-container');
 

src/index.html

@@ -1,13 +1,11 @@
 <!DOCTYPE html>
 <html class="preload">
 <head>
-
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="manifest" href="manifest.json">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-
     <meta http-equiv="X-UA-Compatibility" content="IE=Edge">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
@@ -15,10 +13,9 @@
     <meta name="robots" content="noindex, nofollow, noarchive">
     <meta property="og:title" content="Jellyfin">
     <meta property="og:site_name" content="Jellyfin">
-    <meta property="og:url" content="http://jellyfin.media">
+    <meta property="og:url" content="http://jellyfin.org">
-    <meta property="og:description" content="The Free Software Media System.">
+    <meta property="og:description" content="The Free Software Media System">
     <meta property="og:type" content="article">
-    <meta property="fb:app_id" content="1618309211750238">
     <link rel="apple-touch-icon" sizes="180x180" href="touchicon.png">
 
     <!-- iPhone 5 -->
@@ -64,7 +61,6 @@
     <link rel="shortcut icon" href="favicon.ico">
     <meta name="msapplication-TileImage" content="touchicon144.png">
     <meta name="msapplication-TileColor" content="#333333">
-    <meta name="theme-color" content="#101010">
 
     <title>Jellyfin</title>
 

src/libraries/navdrawer/navdrawer.js

@@ -1,13 +1,19 @@
-define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) {
+/* Cleaning this file properly is not neecessary, since it's an outdated library
-    "use strict";
+ * and will be replaced soon by a Vue component.
+ */
 
-    return function (options) {
+import browser from 'browser';
+import dom from 'dom';
+import 'css!./navdrawer';
+import 'scrollStyles';
+
+export default function (options) {
     function getTouches(e) {
         return e.changedTouches || e.targetTouches || e.touches;
     }
 
     function onMenuTouchStart(e) {
-            options.target.classList.remove("transition");
+        options.target.classList.remove('transition');
         var touches = getTouches(e);
         var touch = touches[0] || {};
         menuTouchStartX = touch.clientX;
@@ -30,27 +36,27 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
         var deltaY = endY - (menuTouchStartY || 0);
         setVelocity(deltaX);
 
-            if (isOpen && 1 !== dragMode && deltaX > 0) {
+        if (isOpen && dragMode !== 1 && deltaX > 0) {
             dragMode = 2;
         }
 
-            if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
+        if (dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
             dragMode = 1;
-                scrollContainer.addEventListener("scroll", disableEvent);
+            scrollContainer.addEventListener('scroll', disableEvent);
             self.showMask();
-            } else if (0 === dragMode && Math.abs(deltaY) >= 5) {
+        } else if (dragMode === 0 && Math.abs(deltaY) >= 5) {
             dragMode = 2;
         }
 
-            if (1 === dragMode) {
+        if (dragMode === 1) {
             newPos = currentPos + deltaX;
             self.changeMenuPos();
         }
     }
 
     function onMenuTouchEnd(e) {
-            options.target.classList.add("transition");
+        options.target.classList.add('transition');
-            scrollContainer.removeEventListener("scroll", disableEvent);
+        scrollContainer.removeEventListener('scroll', disableEvent);
         dragMode = 0;
         var touches = getTouches(e);
         var touch = touches[0] || {};
@@ -69,9 +75,9 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
             if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
                 isPeeking = true;
 
-                    if (e.type === "touchstart") {
+                if (e.type === 'touchstart') {
-                        dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
+                    dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
-                        dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
+                    dom.addEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
                 }
 
                 onMenuTouchStart(e);
@@ -88,7 +94,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     function onEdgeTouchEnd(e) {
         if (isPeeking) {
             isPeeking = false;
-                dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
+            dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
             onMenuTouchEnd(e);
         }
     }
@@ -142,8 +148,8 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     function onMaskTransitionEnd() {
         var classList = mask.classList;
 
-            if (!classList.contains("backdrop")) {
+        if (!classList.contains('backdrop')) {
-                classList.add("hide");
+            classList.add('hide');
         }
     }
 
@@ -155,10 +161,10 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     var startPoint = 0;
     var countStart = 0;
     var velocity = 0;
-        options.target.classList.add("transition");
+    options.target.classList.add('transition');
     var dragMode = 0;
-        var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
+    var scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer');
-        scrollContainer.classList.add("scrollY");
+    scrollContainer.classList.add('scrollY');
 
     var TouchMenuLA = function () {
         self = this;
@@ -173,13 +179,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     };
 
     TouchMenuLA.prototype.initElements = function () {
-            options.target.classList.add("touch-menu-la");
+        options.target.classList.add('touch-menu-la');
-            options.target.style.width = options.width + "px";
+        options.target.style.width = options.width + 'px';
-            options.target.style.left = -options.width + "px";
+        options.target.style.left = -options.width + 'px';
 
         if (!options.disableMask) {
-                mask = document.createElement("div");
+            mask = document.createElement('div');
-                mask.className = "tmla-mask hide";
+            mask.className = 'tmla-mask hide';
             document.body.appendChild(mask);
             dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
                 passive: true
@@ -190,12 +196,12 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     var menuTouchStartX;
     var menuTouchStartY;
     var menuTouchStartTime;
-        var edgeContainer = document.querySelector(".mainDrawerHandle");
+    var edgeContainer = document.querySelector('.mainDrawerHandle');
     var isPeeking = false;
 
     TouchMenuLA.prototype.animateToPosition = function (pos) {
         requestAnimationFrame(function () {
-                options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none";
+            options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none';
         });
     };
 
@@ -206,7 +212,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     };
 
     TouchMenuLA.prototype.clickMaskClose = function () {
-            mask.addEventListener("click", function () {
+        mask.addEventListener('click', function () {
             self.close();
         });
     };
@@ -233,7 +239,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
         this.animateToPosition(options.width);
         currentPos = options.width;
         this.isVisible = true;
-            options.target.classList.add("drawer-open");
+        options.target.classList.add('drawer-open');
         self.showMask();
         self.invoke(options.onChange);
     };
@@ -242,7 +248,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
         this.animateToPosition(0);
         currentPos = 0;
         self.isVisible = false;
-            options.target.classList.remove("drawer-open");
+        options.target.classList.remove('drawer-open');
         self.hideMask();
         self.invoke(options.onChange);
     };
@@ -259,13 +265,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     var backgroundTouchStartTime;
 
     TouchMenuLA.prototype.showMask = function () {
-            mask.classList.remove("hide");
+        mask.classList.remove('hide');
-            mask.classList.add("backdrop");
+        mask.classList.add('backdrop');
     };
 
     TouchMenuLA.prototype.hideMask = function () {
-            mask.classList.add("hide");
+        mask.classList.add('hide');
-            mask.classList.remove("backdrop");
+        mask.classList.remove('backdrop');
     };
 
     TouchMenuLA.prototype.invoke = function (fn) {
@@ -282,26 +288,26 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
                 if (enabled) {
                     if (!_edgeSwipeEnabled) {
                         _edgeSwipeEnabled = true;
-                            dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
+                        dom.addEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
                             passive: true
                         });
-                            dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
+                        dom.addEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
                             passive: true
                         });
-                            dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
+                        dom.addEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
                             passive: true
                         });
                     }
                 } else {
                     if (_edgeSwipeEnabled) {
                         _edgeSwipeEnabled = false;
-                            dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
+                        dom.removeEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
                             passive: true
                         });
-                            dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
+                        dom.removeEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
                             passive: true
                         });
-                            dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
+                        dom.removeEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
                             passive: true
                         });
                     }
@@ -320,26 +326,26 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
         self.initElements();
 
         if (browser.touch) {
-                dom.addEventListener(options.target, "touchstart", onMenuTouchStart, {
+            dom.addEventListener(options.target, 'touchstart', onMenuTouchStart, {
                 passive: true
             });
-                dom.addEventListener(options.target, "touchmove", onMenuTouchMove, {
+            dom.addEventListener(options.target, 'touchmove', onMenuTouchMove, {
                 passive: true
             });
-                dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
+            dom.addEventListener(options.target, 'touchend', onMenuTouchEnd, {
                 passive: true
             });
-                dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
+            dom.addEventListener(options.target, 'touchcancel', onMenuTouchEnd, {
                 passive: true
             });
-                dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
+            dom.addEventListener(mask, 'touchstart', onBackgroundTouchStart, {
                 passive: true
             });
-                dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {});
+            dom.addEventListener(mask, 'touchmove', onBackgroundTouchMove, {});
-                dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
+            dom.addEventListener(mask, 'touchend', onBackgroundTouchEnd, {
                 passive: true
             });
-                dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
+            dom.addEventListener(mask, 'touchcancel', onBackgroundTouchEnd, {
                 passive: true
             });
         }
@@ -348,5 +354,4 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     };
 
     return new TouchMenuLA();
-    };
+}
-});

src/libraries/screensavermanager.js

@@ -1,5 +1,9 @@
-define(["events", "playbackManager", "pluginManager", "inputManager", "connectionManager", "userSettings"], function (events, playbackManager, pluginManager, inputManager, connectionManager, userSettings) {
+import events from 'events';
-    "use strict";
+import playbackManager from 'playbackManager';
+import pluginManager from 'pluginManager';
+import inputManager from 'inputManager';
+import connectionManager from 'connectionManager';
+import * as userSettings from 'userSettings';
 
 function getMinIdleTime() {
     // Returns the minimum amount of idle time required before the screen saver can be displayed
@@ -7,33 +11,30 @@ define(["events", "playbackManager", "pluginManager", "inputManager", "connectio
     return 180000;
 }
 
-    var lastFunctionalEvent = 0;
+let lastFunctionalEvent = 0;
 
 function getFunctionalEventIdleTime() {
     return new Date().getTime() - lastFunctionalEvent;
 }
 
-    events.on(playbackManager, "playbackstop", function (e, stopInfo) {
+events.on(playbackManager, 'playbackstop', function (e, stopInfo) {
-        var state = stopInfo.state;
+    const state = stopInfo.state;
-        if (state.NowPlayingItem && state.NowPlayingItem.MediaType == "Video") {
+    if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
         lastFunctionalEvent = new Date().getTime();
     }
 });
 
 function getScreensaverPlugin(isLoggedIn) {
-
+    let option;
-        var option;
     try {
-            option = userSettings.get("screensaver", false);
+        option = userSettings.get('screensaver', false);
     } catch (err) {
-            option = isLoggedIn ? "backdropscreensaver" : "logoscreensaver";
+        option = isLoggedIn ? 'backdropscreensaver' : 'logoscreensaver';
     }
 
-        var plugins = pluginManager.ofType("screensaver");
+    const plugins = pluginManager.ofType('screensaver');
-
-        for (var i = 0, length = plugins.length; i < length; i++) {
-            var plugin = plugins[i];
 
+    for (const plugin of plugins) {
         if (plugin.id === option) {
             return plugin;
         }
@@ -43,70 +44,66 @@ define(["events", "playbackManager", "pluginManager", "inputManager", "connectio
 }
 
 function ScreenSaverManager() {
-
+    let activeScreenSaver;
-        var self = this;
-        var activeScreenSaver;
 
     function showScreenSaver(screensaver) {
-
         if (activeScreenSaver) {
-                throw new Error("An existing screensaver is already active.");
+            throw new Error('An existing screensaver is already active.');
         }
 
-            console.debug("Showing screensaver " + screensaver.name);
+        console.debug('Showing screensaver ' + screensaver.name);
 
         screensaver.show();
         activeScreenSaver = screensaver;
 
         if (screensaver.hideOnClick !== false) {
-                window.addEventListener("click", hide, true);
+            window.addEventListener('click', hide, true);
         }
         if (screensaver.hideOnMouse !== false) {
-                window.addEventListener("mousemove", hide, true);
+            window.addEventListener('mousemove', hide, true);
         }
         if (screensaver.hideOnKey !== false) {
-                window.addEventListener("keydown", hide, true);
+            window.addEventListener('keydown', hide, true);
         }
     }
 
     function hide() {
         if (activeScreenSaver) {
-                console.debug("Hiding screensaver");
+            console.debug('Hiding screensaver');
             activeScreenSaver.hide();
             activeScreenSaver = null;
         }
 
-            window.removeEventListener("click", hide, true);
+        window.removeEventListener('click', hide, true);
-            window.removeEventListener("mousemove", hide, true);
+        window.removeEventListener('mousemove', hide, true);
-            window.removeEventListener("keydown", hide, true);
+        window.removeEventListener('keydown', hide, true);
     }
 
-        self.isShowing = function () {
+    this.isShowing = () => {
         return activeScreenSaver != null;
     };
 
-        self.show = function () {
+    this.show = function () {
-            var isLoggedIn;
+        let isLoggedIn;
-            var apiClient = connectionManager.currentApiClient();
+        const apiClient = connectionManager.currentApiClient();
 
         if (apiClient && apiClient.isLoggedIn()) {
             isLoggedIn = true;
         }
 
-            var screensaver = getScreensaverPlugin(isLoggedIn);
+        const screensaver = getScreensaverPlugin(isLoggedIn);
 
         if (screensaver) {
             showScreenSaver(screensaver);
         }
     };
 
-        self.hide = function () {
+    this.hide = function () {
         hide();
     };
 
-        function onInterval() {
+    const onInterval = () => {
-
+        if (this.isShowing()) {
-            if (self.isShowing()) {
             return;
         }
 
@@ -122,11 +119,10 @@ define(["events", "playbackManager", "pluginManager", "inputManager", "connectio
             return;
         }
 
-            self.show();
+        this.show();
-        }
+    };
 
     setInterval(onInterval, 10000);
 }
 
-    return new ScreenSaverManager();
+export default new ScreenSaverManager;
-});

src/libraries/scroller.js

@@ -1,5 +1,13 @@
-define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'scrollStyles'], function (browser, layoutManager, dom, focusManager, ResizeObserver) {
+/* Cleaning this file properly is not neecessary, since it's an outdated library
-    'use strict';
+ * and will be replaced soon by a Vue component.
+ */
+
+import browser from 'browser';
+import layoutManager from 'layoutManager';
+import dom from 'dom';
+import focusManager from 'focusManager';
+import ResizeObserver from 'ResizeObserver';
+import 'scrollStyles';
 
 /**
 * Return type of the value.
@@ -52,19 +60,8 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
 var dragTouchEvents = ['touchmove', 'touchend'];
 var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
 var interactiveElements = ['INPUT', 'SELECT', 'TEXTAREA'];
-    var tmpArray = [];
-    var time;
-
-    // Math shorthands
-    var abs = Math.abs;
-    var sqrt = Math.sqrt;
-    var pow = Math.pow;
-    var round = Math.round;
-    var max = Math.max;
-    var min = Math.min;
 
 var scrollerFactory = function (frame, options) {
-
     // Extend options
     var o = Object.assign({}, {
         slidee: null, // Selector, DOM element, or jQuery object with DOM element representing SLIDEE.
@@ -97,11 +94,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
         // native smooth scroll
         options.enableNativeScroll = true;
     } else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) {
-
         // transform is the only way to guarantee animation
         options.enableNativeScroll = false;
     } else if (!layoutManager.tv || !browser.animate) {
-
         options.enableNativeScroll = true;
     }
 
@@ -162,9 +157,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     var frameSize = 0;
     var slideeSize = 0;
     function ensureSizeInfo() {
-
         if (requiresReflow) {
-
             requiresReflow = false;
 
             // Reset global variables
@@ -173,7 +166,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
             slideeSize = o.scrollWidth || Math.max(slideeElement[o.horizontal ? 'offsetWidth' : 'offsetHeight'], slideeElement[o.horizontal ? 'scrollWidth' : 'scrollHeight']);
 
             // Set position limits & relativess
-                self._pos.end = max(slideeSize - frameSize, 0);
+            self._pos.end = Math.max(slideeSize - frameSize, 0);
         }
     }
 
@@ -186,11 +179,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
      * @return {Void}
      */
     function load(isInit) {
-
         requiresReflow = true;
 
         if (!isInit) {
-
             ensureSizeInfo();
 
             // Fix possible overflowing
@@ -200,7 +191,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     }
 
     function initFrameResizeObserver() {
-
         var observerOptions = {};
 
         self.frameResizeObserver = new ResizeObserver(onResize, observerOptions);
@@ -225,16 +215,13 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     };
 
     function nativeScrollTo(container, pos, immediate) {
-
         if (container.scroll) {
             if (o.horizontal) {
-
                 container.scroll({
                     left: pos,
                     behavior: immediate ? 'instant' : 'smooth'
                 });
             } else {
-
                 container.scroll({
                     top: pos,
                     behavior: immediate ? 'instant' : 'smooth'
@@ -266,14 +253,12 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
          * @return {Void}
          */
     self.slideTo = function (newPos, immediate, fullItemPos) {
-
         ensureSizeInfo();
         var pos = self._pos;
 
         newPos = within(newPos, pos.start, pos.end);
 
         if (!transform) {
-
             nativeScrollTo(nativeScrollElement, newPos, immediate);
             return;
         }
@@ -291,7 +276,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
         }
 
         if (!immediate && o.skipSlideToWhenVisible && fullItemPos && fullItemPos.isVisible) {
-
             return;
         }
 
@@ -303,7 +287,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     };
 
     function setStyleProperty(elem, name, value, speed, resetTransition) {
-
         var style = elem.style;
 
         if (resetTransition || browser.edge) {
@@ -325,7 +308,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     }
 
     function renderAnimateWithTransform(fromPosition, toPosition, immediate) {
-
         var speed = o.speed;
 
         if (immediate) {
@@ -333,9 +315,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
         }
 
         if (o.horizontal) {
-                setStyleProperty(slideeElement, 'transform', 'translateX(' + (-round(toPosition)) + 'px)', speed);
+            setStyleProperty(slideeElement, 'transform', 'translateX(' + (-Math.round(toPosition)) + 'px)', speed);
         } else {
-                setStyleProperty(slideeElement, 'transform', 'translateY(' + (-round(toPosition)) + 'px)', speed);
+            setStyleProperty(slideeElement, 'transform', 'translateY(' + (-Math.round(toPosition)) + 'px)', speed);
         }
         self._pos.cur = toPosition;
 
@@ -343,7 +325,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     }
 
     function getBoundingClientRect(elem) {
-
         // Support: BlackBerry 5, iOS 3 (original iPhone)
         // If we don't have gBCR, just use 0,0 rather than error
         if (elem.getBoundingClientRect) {
@@ -361,14 +342,10 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
      * @return {Object}
      */
     self.getPos = function (item) {
-
         var scrollElement = transform ? slideeElement : nativeScrollElement;
         var slideeOffset = getBoundingClientRect(scrollElement);
         var itemOffset = getBoundingClientRect(item);
 
-            var slideeStartPos = o.horizontal ? slideeOffset.left : slideeOffset.top;
-            var slideeEndPos = o.horizontal ? slideeOffset.right : slideeOffset.bottom;
-
         var offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
 
         var size = o.horizontal ? itemOffset.width : itemOffset.height;
@@ -405,7 +382,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     };
 
     self.getCenterPosition = function (item) {
-
         ensureSizeInfo();
 
         var pos = self.getPos(item);
@@ -450,7 +426,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
 
         // Bind dragging events
         if (transform) {
-
             if (isTouch) {
                 dragTouchEvents.forEach(function (eventName) {
                     dom.addEventListener(document, eventName, dragHandler, {
@@ -479,7 +454,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
         var pointer = dragging.touch ? event[dragging.released ? 'changedTouches' : 'touches'][0] : event;
         dragging.pathX = pointer.pageX - dragging.initX;
         dragging.pathY = pointer.pageY - dragging.initY;
-            dragging.path = sqrt(pow(dragging.pathX, 2) + pow(dragging.pathY, 2));
+        dragging.path = Math.sqrt(Math.pow(dragging.pathX, 2) + Math.pow(dragging.pathY, 2));
         dragging.delta = o.horizontal ? dragging.pathX : dragging.pathY;
 
         if (!dragging.released && dragging.path < 1) {
@@ -496,7 +471,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
             } else {
                 // If dragging path is sufficiently long we can confidently start a drag
                 // if drag is in different direction than scroll, ignore it
-                    if (o.horizontal ? abs(dragging.pathX) > abs(dragging.pathY) : abs(dragging.pathX) < abs(dragging.pathY)) {
+                if (o.horizontal ? Math.abs(dragging.pathX) > Math.abs(dragging.pathY) : Math.abs(dragging.pathX) < Math.abs(dragging.pathY)) {
                     dragging.init = 1;
                 } else {
                     return dragEnd();
@@ -517,7 +492,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
             dragEnd();
         }
 
-            self.slideTo(round(dragging.initPos - dragging.delta));
+        self.slideTo(Math.round(dragging.initPos - dragging.delta));
     }
 
     /**
@@ -554,9 +529,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
      * @return {Boolean}
      */
     function isInteractive(element) {
-
         while (element) {
-
             if (interactiveElements.indexOf(element.tagName) !== -1) {
                 return true;
             }
@@ -592,7 +565,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
      * @return {Void}
      */
     function scrollHandler(event) {
-
         ensureSizeInfo();
         var pos = self._pos;
         // Ignore if there is no scrolling to be done
@@ -609,7 +581,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
 
             self.slideBy(o.scrollBy * delta);
         } else {
-
             if (isSmoothScrollSupported) {
                 delta *= 12;
             }
@@ -628,7 +599,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
      * @return {Void}
      */
     self.destroy = function () {
-
         if (self.frameResizeObserver) {
             self.frameResizeObserver.disconnect();
             self.frameResizeObserver = null;
@@ -664,11 +634,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     var contentRect = {};
 
     function onResize(entries) {
-
         var entry = entries[0];
 
         if (entry) {
-
             var newRect = entry.contentRect;
 
             // handle element being hidden
@@ -677,7 +645,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
             }
 
             if (newRect.width !== contentRect.width || newRect.height !== contentRect.height) {
-
                 contentRect = newRect;
 
                 load(false);
@@ -703,7 +670,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     }
 
     self.getScrollPosition = function () {
-
         if (transform) {
             return self._pos.cur;
         }
@@ -716,7 +682,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     };
 
     self.getScrollSize = function () {
-
         if (transform) {
             return slideeSize;
         }
@@ -792,7 +757,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
         initFrameResizeObserver();
 
         if (transform) {
-
             dom.addEventListener(dragSourceElement, 'touchstart', dragInitSlidee, {
                 passive: true
             });
@@ -809,9 +773,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
                     passive: true
                 });
             }
-
         } else if (o.horizontal) {
-
             // Don't bind to mouse events with vertical scroll since the mouse wheel can handle this natively
 
             if (o.mouseWheel) {
@@ -921,5 +883,4 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     return Promise.resolve(instance);
 };
 
-    return scrollerFactory;
+export default scrollerFactory;
-});

src/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "Jellyfin",
-    "description": "Jellyfin: the Free Software Media System.",
+    "description": "The Free Software Media System",
     "lang": "en-US",
     "short_name": "Jellyfin",
     "start_url": "index.html#!/home.html",

src/plugins/chromecastPlayer/plugin.js

@@ -1,6 +1,8 @@
 define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', 'globalize', 'events', 'require', 'castSenderApiLoader'], function (appSettings, userSettings, playbackManager, connectionManager, globalize, events, require, castSenderApiLoader) {
     'use strict';
 
+    playbackManager = playbackManager.default || playbackManager;
+
     // Based on https://github.com/googlecast/CastVideos-chrome/blob/master/CastVideos.js
     var currentResolve;
     var currentReject;
@@ -363,7 +365,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
         }
 
         return new Promise(function (resolve, reject) {
-            require(['chromecastHelper'], function (chromecastHelper) {
+            require(['./chromecastHelper'], function (chromecastHelper) {
                 chromecastHelper.getServerAddress(apiClient).then(function (serverAddress) {
                     message.serverAddress = serverAddress;
                     player.sendMessageInternal(message).then(resolve, reject);
@@ -575,7 +577,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
         this.isLocalPlayer = false;
         this.lastPlayerData = {};
 
-        castSenderApiLoader.load().then(initializeChromecast.bind(this));
+        new castSenderApiLoader.default().load().then(initializeChromecast.bind(this));
     }
 
     ChromecastPlayer.prototype.tryPair = function (target) {

src/plugins/htmlVideoPlayer/plugin.js

@@ -1132,7 +1132,7 @@ function tryRemoveElement(elem) {
          */
         getCueCss(appearance, selector) {
             return `${selector}::cue {
-                ${appearance.text.map((s) => `${s.name}:${s.value}!important;`).join('')}
+                ${appearance.text.map((s) => s.value !== undefined && s.value !== '' ? `${s.name}:${s.value}!important;` : '').join('')}
             }`;
         }
 
@@ -1150,7 +1150,7 @@ function tryRemoveElement(elem) {
                     document.getElementsByTagName('head')[0].appendChild(styleElem);
                 }
 
-                styleElem.innerHTML = this.getCueCss(subtitleAppearanceHelper.getStyles(userSettings.getSubtitleAppearanceSettings(), true), '.htmlvideoplayer');
+                styleElem.innerHTML = this.getCueCss(subtitleAppearanceHelper.getStyles(userSettings.getSubtitleAppearanceSettings()), '.htmlvideoplayer');
             });
         }
 
@@ -1195,18 +1195,29 @@ function tryRemoveElement(elem) {
 
             // download the track json
             this.fetchSubtitles(track, item).then(function (data) {
+                import('userSettings').then((userSettings) => {
                     // show in ui
                     console.debug(`downloaded ${data.TrackEvents.length} track events`);
+
+                    const subtitleAppearance = userSettings.getSubtitleAppearanceSettings();
+                    const cueLine = parseInt(subtitleAppearance.verticalPosition, 10);
+
                     // add some cues to show the text
                     // in safari, the cues need to be added before setting the track mode to showing
                     for (const trackEvent of data.TrackEvents) {
                         const trackCueObject = window.VTTCue || window.TextTrackCue;
                         const cue = new trackCueObject(trackEvent.StartPositionTicks / 10000000, trackEvent.EndPositionTicks / 10000000, normalizeTrackEventText(trackEvent.Text, false));
 
+                        if (cue.line === 'auto') {
+                            cue.line = cueLine;
+                        }
+
                         trackElement.addCue(cue);
                     }
+
                     trackElement.mode = 'showing';
                 });
+            });
         }
 
         /**

src/plugins/htmlVideoPlayer/style.css

@@ -33,16 +33,22 @@ video::-webkit-media-controls {
     text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
     -webkit-font-smoothing: antialiased;
     font-family: inherit;
+    line-height: normal; /* Restore value. See -webkit-media-text-track-container 'line-height' */
 }
 
-.htmlvideoplayer-moveupsubtitles::-webkit-media-text-track-display {
+.htmlvideoplayer::-webkit-media-text-track-container {
-    /* style the text itself */
+    font-size: 170% !important; /* Override element inline style */
-    margin-top: -2em;
+    line-height: 50%; /* Child element cannot set line height smaller than its parent has. This allow smaller values for children */
+}
+
+.htmlvideoplayer::-webkit-media-text-track-display {
+    max-width: 70%;
+    margin-left: 15%;
 }
 
 .videoSubtitles {
     position: fixed;
-    bottom: 10%;
+    bottom: 0;
     text-align: center;
     left: 0;
     right: 0;
@@ -53,7 +59,6 @@ video::-webkit-media-controls {
 .videoSubtitlesInner {
     max-width: 70%;
     background-color: rgba(0, 0, 0, 0.8);
-    padding: 0.25em;
     margin: auto;
     display: inline-block;
 }

src/plugins/logoScreensaver/plugin.js

@@ -1,16 +1,17 @@
-define(['pluginManager'], function (pluginManager) {
+import pluginManager from 'pluginManager';
-    return function () {
+
-        var self = this;
+export default function () {
+    const self = this;
 
     self.name = 'Logo ScreenSaver';
     self.type = 'screensaver';
     self.id = 'logoscreensaver';
     self.supportsAnonymous = true;
 
-        var interval;
+    let interval;
 
     function animate() {
-            var animations = [
+        const animations = [
 
             bounceInLeft,
             bounceInRight,
@@ -21,10 +22,10 @@ define(['pluginManager'], function (pluginManager) {
             rotateOut
         ];
 
-            var elem = document.querySelector('.logoScreenSaverImage');
+        const elem = document.querySelector('.logoScreenSaverImage');
 
         if (elem && elem.animate) {
-                var random = getRandomInt(0, animations.length - 1);
+            const random = getRandomInt(0, animations.length - 1);
 
             animations[random](elem, 1);
         }
@@ -35,41 +36,41 @@ define(['pluginManager'], function (pluginManager) {
     }
 
     function bounceInLeft(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { transform: 'translate3d(-3000px, 0, 0)', opacity: '0', offset: 0 },
             { transform: 'translate3d(25px, 0, 0)', opacity: '1', offset: 0.6 },
             { transform: 'translate3d(-100px, 0, 0)', offset: 0.75 },
             { transform: 'translate3d(5px, 0, 0)', offset: 0.9 },
             { transform: 'none', opacity: '1', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
+        const timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
         return elem.animate(keyframes, timing);
     }
 
     function bounceInRight(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { transform: 'translate3d(3000px, 0, 0)', opacity: '0', offset: 0 },
             { transform: 'translate3d(-25px, 0, 0)', opacity: '1', offset: 0.6 },
             { transform: 'translate3d(100px, 0, 0)', offset: 0.75 },
             { transform: 'translate3d(-5px, 0, 0)', offset: 0.9 },
             { transform: 'none', opacity: '1', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
+        const timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
         return elem.animate(keyframes, timing);
     }
 
     function swing(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { transform: 'translate(0%)', offset: 0 },
             { transform: 'rotate3d(0, 0, 1, 15deg)', offset: 0.2 },
             { transform: 'rotate3d(0, 0, 1, -10deg)', offset: 0.4 },
             { transform: 'rotate3d(0, 0, 1, 5deg)', offset: 0.6 },
             { transform: 'rotate3d(0, 0, 1, -5deg)', offset: 0.8 },
             { transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
+        const timing = { duration: 900, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
     function tada(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { transform: 'scale3d(1, 1, 1)', offset: 0 },
             { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.1 },
             { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.2 },
@@ -81,41 +82,41 @@ define(['pluginManager'], function (pluginManager) {
             { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.8 },
             { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.9 },
             { transform: 'scale3d(1, 1, 1)', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
+        const timing = { duration: 900, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
     function wobble(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { transform: 'translate(0%)', offset: 0 },
             { transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)', offset: 0.15 },
             { transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)', offset: 0.45 },
             { transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)', offset: 0.6 },
             { transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)', offset: 0.75 },
             { transform: 'translateX(0%)', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
+        const timing = { duration: 900, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
     function rotateIn(elem, iterations) {
-            var keyframes = [{ transform: 'rotate3d(0, 0, 1, -200deg)', opacity: '0', transformOrigin: 'center', offset: 0 },
+        const keyframes = [{ transform: 'rotate3d(0, 0, 1, -200deg)', opacity: '0', transformOrigin: 'center', offset: 0 },
             { transform: 'none', opacity: '1', transformOrigin: 'center', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
+        const timing = { duration: 900, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
     function rotateOut(elem, iterations) {
-            var keyframes = [{ transform: 'none', opacity: '1', transformOrigin: 'center', offset: 0 },
+        const keyframes = [{ transform: 'none', opacity: '1', transformOrigin: 'center', offset: 0 },
             { transform: 'rotate3d(0, 0, 1, 200deg)', opacity: '0', transformOrigin: 'center', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
+        const timing = { duration: 900, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
     function fadeOut(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { opacity: '1', offset: 0 },
             { opacity: '0', offset: 1 }];
-            var timing = { duration: 400, iterations: iterations };
+        const timing = { duration: 400, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
@@ -127,8 +128,8 @@ define(['pluginManager'], function (pluginManager) {
     }
 
     self.show = function () {
-            require(['css!' + pluginManager.mapPath(self, 'style.css')], function () {
+        import('css!' + pluginManager.mapPath(self, 'style.css')).then(() => {
-                var elem = document.querySelector('.logoScreenSaver');
+            let elem = document.querySelector('.logoScreenSaver');
 
             if (!elem) {
                 elem = document.createElement('div');
@@ -146,20 +147,19 @@ define(['pluginManager'], function (pluginManager) {
     self.hide = function () {
         stopInterval();
 
-            var elem = document.querySelector('.logoScreenSaver');
+        const elem = document.querySelector('.logoScreenSaver');
 
         if (elem) {
-                var onAnimationFinish = function () {
+            const onAnimationFinish = function () {
                 elem.parentNode.removeChild(elem);
             };
 
             if (elem.animate) {
-                    var animation = fadeOut(elem, 1);
+                const animation = fadeOut(elem, 1);
                 animation.onfinish = onAnimationFinish;
             } else {
                 onAnimationFinish();
             }
         }
     };
-    };
+}
-});

src/plugins/playAccessValidation/plugin.js

@@ -1,33 +1,26 @@
-define(['connectionManager', 'globalize'], function (connectionManager, globalize) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import globalize from 'globalize';
-
-    function getRequirePromise(deps) {
-        return new Promise(function (resolve, reject) {
-            require(deps, resolve);
-        });
-    }
 
 function showErrorMessage() {
-        return getRequirePromise(['alert']).then(function (alert) {
+    return import('alert').then(({default: alert}) => {
-            return alert(globalize.translate('MessagePlayAccessRestricted')).then(function () {
+        return alert(globalize.translate('MessagePlayAccessRestricted'));
-                return Promise.reject();
-            });
     });
 }
 
-    function PlayAccessValidation() {
+class PlayAccessValidation {
+    constructor() {
         this.name = 'Playback validation';
         this.type = 'preplayintercept';
         this.id = 'playaccessvalidation';
         this.order = -2;
     }
 
-    PlayAccessValidation.prototype.intercept = function (options) {
+    intercept(options) {
-        var item = options.item;
+        const item = options.item;
         if (!item) {
             return Promise.resolve();
         }
-        var serverId = item.ServerId;
+        const serverId = item.ServerId;
         if (!serverId) {
             return Promise.resolve();
         }
@@ -44,7 +37,7 @@ define(['connectionManager', 'globalize'], function (connectionManager, globaliz
 
             return showErrorMessage();
         });
-    };
+    }
+}
 
-    return PlayAccessValidation;
+export default PlayAccessValidation;
-});

src/plugins/sessionPlayer/plugin.js

@@ -1,6 +1,9 @@
 define(['playbackManager', 'events', 'serverNotifications', 'connectionManager'], function (playbackManager, events, serverNotifications, connectionManager) {
     'use strict';
 
+    serverNotifications = serverNotifications.default || serverNotifications;
+    playbackManager = playbackManager.default || playbackManager;
+
     function getActivePlayerId() {
         var info = playbackManager.getPlayerInfo();
         return info ? info.id : null;

src/scripts/autoThemes.js

@@ -0,0 +1,8 @@
+import * as userSettings from 'userSettings';
+import skinManager from 'skinManager';
+import connectionManager from 'connectionManager';
+import events from 'events';
+
+events.on(connectionManager, 'localusersignedin', function (e, user) {
+    skinManager.setTheme(userSettings.theme());
+});

src/scripts/browserDeviceProfile.js

@@ -1,6 +1,8 @@
 define(['browser'], function (browser) {
     'use strict';
 
+    browser = browser.default || browser;
+
     function canPlayH264(videoTestElement) {
         return !!(videoTestElement.canPlayType && videoTestElement.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
     }

src/scripts/inputManager.js

@@ -35,6 +35,7 @@ import appHost from 'apphost';
         if (eventListenerCount) {
             eventListenerCount--;
         }
+
         dom.removeEventListener(scope, 'command', fn, {});
     }
 

src/scripts/libraryMenu.js

@@ -1,6 +1,11 @@
 define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', 'viewManager', 'libraryBrowser', 'appRouter', 'apphost', 'playbackManager', 'syncPlayManager', 'groupSelectionMenu', 'browser', 'globalize', 'scripts/imagehelper', 'paper-icon-button-light', 'material-icons', 'scrollStyles', 'flexStyles'], function (dom, layoutManager, inputManager, connectionManager, events, viewManager, libraryBrowser, appRouter, appHost, playbackManager, syncPlayManager, groupSelectionMenu, browser, globalize, imageHelper) {
     'use strict';
 
+    viewManager = viewManager.default || viewManager;
+    playbackManager = playbackManager.default || playbackManager;
+    browser = browser.default || browser;
+    layoutManager = layoutManager.default || layoutManager;
+
     function renderHeader() {
         var html = '';
         html += '<div class="flex align-items-center flex-grow headerTop">';
@@ -803,6 +808,8 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
         navDrawerScrollContainer.addEventListener('click', onMainDrawerClick);
         return new Promise(function (resolve, reject) {
             require(['navdrawer'], function (navdrawer) {
+                navdrawer = navdrawer.default || navdrawer;
+
                 navDrawerInstance = new navdrawer(getNavDrawerOptions());
 
                 if (!layoutManager.tv) {

src/scripts/livetvcomponents.js

@@ -1,6 +1,8 @@
 define(['layoutManager', 'datetime', 'cardBuilder', 'apphost'], function (layoutManager, datetime, cardBuilder, appHost) {
     'use strict';
 
+    layoutManager = layoutManager.default || layoutManager;
+
     function enableScrollX() {
         return !layoutManager.desktop;
     }

src/scripts/mouseManager.js

@@ -1,10 +1,15 @@
-define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'dom'], function (inputManager, focusManager, browser, layoutManager, events, dom) {
+import inputManager from 'inputManager';
-    'use strict';
+import focusManager from 'focusManager';
+import browser from 'browser';
+import layoutManager from 'layoutManager';
+import events from 'events';
+import dom from 'dom';
+/* eslint-disable indent */
 
-    var self = {};
+    const self = {};
 
-    var lastMouseInputTime = new Date().getTime();
+    let lastMouseInputTime = new Date().getTime();
-    var isMouseIdle;
+    let isMouseIdle;
 
     function mouseIdleTime() {
         return new Date().getTime() - lastMouseInputTime;
@@ -15,14 +20,14 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
     }
 
     function removeIdleClasses() {
-        var classList = document.body.classList;
+        const classList = document.body.classList;
 
         classList.remove('mouseIdle');
         classList.remove('mouseIdle-tv');
     }
 
     function addIdleClasses() {
-        var classList = document.body.classList;
+        const classList = document.body.classList;
 
         classList.add('mouseIdle');
 
@@ -31,7 +36,7 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
         }
     }
 
-    function showCursor() {
+    export function showCursor() {
         if (isMouseIdle) {
             isMouseIdle = false;
             removeIdleClasses();
@@ -39,7 +44,7 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
         }
     }
 
-    function hideCursor() {
+    export function hideCursor() {
         if (!isMouseIdle) {
             isMouseIdle = true;
             addIdleClasses();
@@ -47,17 +52,17 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
         }
     }
 
-    var lastPointerMoveData;
+    let lastPointerMoveData;
     function onPointerMove(e) {
-        var eventX = e.screenX;
+        const eventX = e.screenX;
-        var eventY = e.screenY;
+        const eventY = e.screenY;
 
         // if coord don't exist how could it move
         if (typeof eventX === 'undefined' && typeof eventY === 'undefined') {
             return;
         }
 
-        var obj = lastPointerMoveData;
+        const obj = lastPointerMoveData;
         if (!obj) {
             lastPointerMoveData = {
                 x: eventX,
@@ -81,11 +86,11 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
     }
 
     function onPointerEnter(e) {
-        var pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
+        const pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
 
         if (pointerType === 'mouse') {
             if (!isMouseIdle) {
-                var parent = focusManager.focusableParent(e.target);
+                const parent = focusManager.focusableParent(e.target);
                 if (parent) {
                     focusManager.focus(parent);
                 }
@@ -115,7 +120,7 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
         }
     }
 
-    var mouseInterval;
+    let mouseInterval;
     function startMouseInterval() {
         if (!mouseInterval) {
             mouseInterval = setInterval(onMouseInterval, 5000);
@@ -123,7 +128,7 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
     }
 
     function stopMouseInterval() {
-        var interval = mouseInterval;
+        const interval = mouseInterval;
 
         if (interval) {
             clearInterval(interval);
@@ -167,8 +172,10 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
 
     events.on(layoutManager, 'modechange', initMouse);
 
-    self.hideCursor = hideCursor;
+/* eslint-enable indent */
-    self.showCursor = showCursor;
+
+export default {
+    hideCursor,
+    showCursor
+};
 
-    return self;
-});

src/scripts/routes.js

@@ -1,18 +1,21 @@
-define([
+import 'emby-button';
-    'jQuery',
+import 'emby-input';
-    'emby-button',
+import 'scripts/livetvcomponents';
-    'emby-input',
+import 'paper-icon-button-light';
-    'scripts/livetvcomponents',
+import 'emby-itemscontainer';
-    'paper-icon-button-light',
+import 'emby-collapse';
-    'emby-itemscontainer',
+import 'emby-select';
-    'emby-collapse',
+import 'livetvcss';
-    'emby-select',
+import 'emby-checkbox';
-    'livetvcss',
+import 'emby-slider';
-    'emby-checkbox',
+import 'listViewStyle';
-    'emby-slider',
+import 'dashboardcss';
-    'listViewStyle',
+import 'detailtablecss';
-    'dashboardcss',
+
-    'detailtablecss'], function () {
+/* eslint-disable indent */
+
+    console.groupCollapsed('defining core routes');
+
     function defineRoute(newRoute) {
         var path = newRoute.alias ? newRoute.alias : newRoute.path;
         console.debug('defining route: ' + path);
@@ -20,8 +23,6 @@ define([
         Emby.Page.addRoute(path, newRoute);
     }
 
-    console.debug('defining core routes');
-
     defineRoute({
         alias: '/addserver.html',
         path: '/controllers/session/addServer/index.html',
@@ -30,6 +31,7 @@ define([
         startup: true,
         controller: 'session/addServer/index'
     });
+
     defineRoute({
         alias: '/selectserver.html',
         path: '/controllers/session/selectServer/index.html',
@@ -39,6 +41,7 @@ define([
         controller: 'session/selectServer/index',
         type: 'selectserver'
     });
+
     defineRoute({
         alias: '/login.html',
         path: '/controllers/session/login/index.html',
@@ -48,6 +51,7 @@ define([
         controller: 'session/login/index',
         type: 'login'
     });
+
     defineRoute({
         alias: '/forgotpassword.html',
         path: '/controllers/session/forgotPassword/index.html',
@@ -55,6 +59,7 @@ define([
         startup: true,
         controller: 'session/forgotPassword/index'
     });
+
     defineRoute({
         alias: '/forgotpasswordpin.html',
         path: '/controllers/session/redeemPassword/index.html',
@@ -68,42 +73,41 @@ define([
         alias: '/mypreferencesmenu.html',
         path: '/controllers/user/menu/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/menu/index'
     });
+
     defineRoute({
         alias: '/myprofile.html',
         path: '/controllers/user/profile/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/profile/index'
     });
+
     defineRoute({
         alias: '/mypreferencesdisplay.html',
         path: '/controllers/user/display/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/display/index'
     });
+
     defineRoute({
         alias: '/mypreferenceshome.html',
         path: '/controllers/user/home/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/home/index'
     });
+
     defineRoute({
         alias: '/mypreferencesplayback.html',
         path: '/controllers/user/playback/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/playback/index'
     });
+
     defineRoute({
         alias: '/mypreferencessubtitles.html',
         path: '/controllers/user/subtitles/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/subtitles/index'
     });
 
@@ -113,42 +117,49 @@ define([
         roles: 'admin',
         controller: 'dashboard/dashboard'
     });
+
     defineRoute({
         path: '/dashboardgeneral.html',
         controller: 'dashboard/general',
         autoFocus: false,
         roles: 'admin'
     });
+
     defineRoute({
         path: '/networking.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/networking'
     });
+
     defineRoute({
         path: '/devices.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/devices/devices'
     });
+
     defineRoute({
         path: '/device.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/devices/device'
     });
+
     defineRoute({
         path: '/dlnaprofile.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dlna/profile'
     });
+
     defineRoute({
         path: '/dlnaprofiles.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dlna/profiles'
     });
+
     defineRoute({
         alias: '/addplugin.html',
         path: '/controllers/dashboard/plugins/add/index.html',
@@ -156,52 +167,61 @@ define([
         roles: 'admin',
         controller: 'dashboard/plugins/add/index'
     });
+
     defineRoute({
         path: '/library.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/mediaLibrary'
     });
+
     defineRoute({
         path: '/librarydisplay.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/librarydisplay'
     });
+
     defineRoute({
         path: '/dlnasettings.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dlna/settings'
     });
+
     defineRoute({
         path: '/edititemmetadata.html',
         controller: 'edititemmetadata',
         autoFocus: false
     });
+
     defineRoute({
         path: '/encodingsettings.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/encodingsettings'
     });
+
     defineRoute({
         path: '/log.html',
         roles: 'admin',
         controller: 'dashboard/logs'
     });
+
     defineRoute({
         path: '/metadataimages.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/metadataImages'
     });
+
     defineRoute({
         path: '/metadatanfo.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/metadatanfo'
     });
+
     defineRoute({
         alias: '/notificationsetting.html',
         path: '/controllers/dashboard/notifications/notification/index.html',
@@ -209,6 +229,7 @@ define([
         roles: 'admin',
         controller: 'dashboard/notifications/notification/index'
     });
+
     defineRoute({
         alias: '/notificationsettings.html',
         path: '/controllers/dashboard/notifications/notifications/index.html',
@@ -216,12 +237,14 @@ define([
         autoFocus: false,
         roles: 'admin'
     });
+
     defineRoute({
         path: '/playbackconfiguration.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/playback'
     });
+
     defineRoute({
         alias: '/availableplugins.html',
         path: '/controllers/dashboard/plugins/available/index.html',
@@ -229,6 +252,7 @@ define([
         roles: 'admin',
         controller: 'dashboard/plugins/available/index'
     });
+
     defineRoute({
         alias: '/repositories.html',
         path: '/controllers/dashboard/plugins/repositories/index.html',
@@ -241,67 +265,72 @@ define([
         path: '/home.html',
         autoFocus: false,
         controller: 'home',
-        transition: 'fade',
         type: 'home'
     });
+
     defineRoute({
         path: '/search.html',
         controller: 'searchpage'
     });
+
     defineRoute({
         path: '/list.html',
         autoFocus: false,
-        controller: 'list',
+        controller: 'list'
-        transition: 'fade'
     });
+
     defineRoute({
         alias: '/details',
         path: '/controllers/itemDetails/index.html',
         controller: 'itemDetails/index',
-        autoFocus: false,
+        autoFocus: false
-        transition: 'fade'
     });
+
     defineRoute({
         path: '/livetv.html',
         controller: 'livetv/livetvsuggested',
-        autoFocus: false,
+        autoFocus: false
-        transition: 'fade'
     });
+
     defineRoute({
         path: '/livetvguideprovider.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvguideprovider'
     });
+
     defineRoute({
         path: '/livetvsettings.html',
         autoFocus: false,
         controller: 'livetvsettings'
     });
+
     defineRoute({
         path: '/livetvstatus.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvstatus'
     });
+
     defineRoute({
         path: '/livetvtuner.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvtuner'
     });
+
     defineRoute({
         path: '/movies.html',
         autoFocus: false,
-        controller: 'movies/moviesrecommended',
+        controller: 'movies/moviesrecommended'
-        transition: 'fade'
     });
+
     defineRoute({
         path: '/music.html',
         controller: 'music/musicrecommended',
-        autoFocus: false,
+        autoFocus: false
-        transition: 'fade'
     });
+
     defineRoute({
         alias: '/installedplugins.html',
         path: '/controllers/dashboard/plugins/installed/index.html',
@@ -309,41 +338,46 @@ define([
         roles: 'admin',
         controller: 'dashboard/plugins/installed/index'
     });
+
     defineRoute({
         path: '/scheduledtask.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/scheduledtasks/scheduledtask'
     });
+
     defineRoute({
         path: '/scheduledtasks.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/scheduledtasks/scheduledtasks'
     });
+
     defineRoute({
         path: '/serveractivity.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/serveractivity'
     });
+
     defineRoute({
         path: '/apikeys.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/apikeys'
     });
+
     defineRoute({
         path: '/streamingsettings.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/streaming'
     });
+
     defineRoute({
         path: '/tv.html',
         autoFocus: false,
-        controller: 'shows/tvrecommended',
+        controller: 'shows/tvrecommended'
-        transition: 'fade'
     });
 
     defineRoute({
@@ -352,29 +386,34 @@ define([
         roles: 'admin',
         controller: 'dashboard/users/useredit'
     });
+
     defineRoute({
         path: '/userlibraryaccess.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/userlibraryaccess'
     });
+
     defineRoute({
         path: '/usernew.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/usernew'
     });
+
     defineRoute({
         path: '/userparentalcontrol.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/userparentalcontrol'
     });
+
     defineRoute({
         path: '/userpassword.html',
         autoFocus: false,
         controller: 'dashboard/users/userpasswordpage'
     });
+
     defineRoute({
         path: '/userprofiles.html',
         autoFocus: false,
@@ -389,6 +428,7 @@ define([
         anonymous: true,
         controller: 'wizard/remote/index'
     });
+
     defineRoute({
         alias: '/wizardfinish.html',
         path: '/controllers/wizard/finish/index.html',
@@ -396,12 +436,14 @@ define([
         anonymous: true,
         controller: 'wizard/finish/index'
     });
+
     defineRoute({
         path: '/wizardlibrary.html',
         autoFocus: false,
         anonymous: true,
         controller: 'dashboard/mediaLibrary'
     });
+
     defineRoute({
         alias: '/wizardsettings.html',
         path: '/controllers/wizard/settings/index.html',
@@ -409,6 +451,7 @@ define([
         anonymous: true,
         controller: 'wizard/settings/index'
     });
+
     defineRoute({
         alias: '/wizardstart.html',
         path: '/controllers/wizard/start/index.html',
@@ -416,6 +459,7 @@ define([
         anonymous: true,
         controller: 'wizard/start/index'
     });
+
     defineRoute({
         alias: '/wizarduser.html',
         path: '/controllers/wizard/user/index.html',
@@ -427,7 +471,6 @@ define([
     defineRoute({
         alias: '/video',
         path: '/controllers/playback/video/index.html',
-        transition: 'fade',
         controller: 'playback/video/index',
         autoFocus: false,
         type: 'video-osd',
@@ -435,16 +478,17 @@ define([
         fullscreen: true,
         enableMediaControl: false
     });
+
     defineRoute({
         alias: '/queue',
         path: '/controllers/playback/queue/index.html',
         controller: 'playback/queue/index',
         autoFocus: false,
-        transition: 'fade',
         fullscreen: true,
         supportsThemeMedia: true,
         enableMediaControl: false
     });
+
     defineRoute({
         path: '/configurationpage',
         autoFocus: false,
@@ -458,9 +502,13 @@ define([
         isDefaultRoute: true,
         autoFocus: false
     });
+
     defineRoute({
         path: '/index.html',
         autoFocus: false,
         isDefaultRoute: true
     });
-});
+
+    console.groupEnd('defining core routes');
+
+/* eslint-enable indent */

src/scripts/scrollHelper.js

@@ -1,5 +1,6 @@
-define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
+import focusManager from 'focusManager';
-    'use strict';
+import dom from 'dom';
+import 'scrollStyles';
 
 function getBoundingClientRect(elem) {
     // Support: BlackBerry 5, iOS 3 (original iPhone)
@@ -11,25 +12,25 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
     }
 }
 
-    function getPosition(scrollContainer, item, horizontal) {
+export function getPosition(scrollContainer, item, horizontal) {
-        var slideeOffset = getBoundingClientRect(scrollContainer);
+    const slideeOffset = getBoundingClientRect(scrollContainer);
-        var itemOffset = getBoundingClientRect(item);
+    const itemOffset = getBoundingClientRect(item);
 
-        var offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
+    let offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
-        var size = horizontal ? itemOffset.width : itemOffset.height;
+    let size = horizontal ? itemOffset.width : itemOffset.height;
     if (!size && size !== 0) {
         size = item[horizontal ? 'offsetWidth' : 'offsetHeight'];
     }
 
-        var currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
+    const currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
 
     offset += currentStart;
 
-        var frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
+    const frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
 
-        var currentEnd = currentStart + frameSize;
+    const currentEnd = currentStart + frameSize;
 
-        var isVisible = offset >= currentStart && (offset + size) <= currentEnd;
+    const isVisible = offset >= currentStart && (offset + size) <= currentEnd;
 
     return {
         start: offset,
@@ -40,8 +41,8 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
     };
 }
 
-    function toCenter(container, elem, horizontal, skipWhenVisible) {
+export function toCenter(container, elem, horizontal, skipWhenVisible) {
-        var pos = getPosition(container, elem, horizontal);
+    const pos = getPosition(container, elem, horizontal);
 
     if (skipWhenVisible && pos.isVisible) {
         return;
@@ -62,8 +63,8 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
     }
 }
 
-    function toStart(container, elem, horizontal, skipWhenVisible) {
+export function toStart(container, elem, horizontal, skipWhenVisible) {
-        var pos = getPosition(container, elem, horizontal);
+    const pos = getPosition(container, elem, horizontal);
 
     if (skipWhenVisible && pos.isVisible) {
         return;
@@ -85,7 +86,7 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
 }
 
 function centerOnFocus(e, scrollSlider, horizontal) {
-        var focused = focusManager.focusableParent(e.target);
+    const focused = focusManager.focusableParent(e.target);
 
     if (focused) {
         toCenter(scrollSlider, focused, horizontal);
@@ -95,13 +96,12 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
 function centerOnFocusHorizontal(e) {
     centerOnFocus(e, this, true);
 }
+
 function centerOnFocusVertical(e) {
     centerOnFocus(e, this, false);
 }
 
-    return {
+export const centerFocus = {
-        getPosition: getPosition,
-        centerFocus: {
     on: function (element, horizontal) {
         if (horizontal) {
             dom.addEventListener(element, 'focus', centerOnFocusHorizontal, {
@@ -128,8 +128,11 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
             });
         }
     }
-        },
+};
+
+export default {
+    getPosition: getPosition,
+    centerFocus: centerFocus,
     toCenter: toCenter,
     toStart: toStart
 };
-});