Merge branch 'master' into migrate-to-ES6-69

.eslintignore

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

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.3.0",
+    "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",
@@ -152,24 +155,38 @@
           "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/remotecontrol/remotecontrol.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
           "src/plugins/chromecastPlayer/plugin.js",
+          "src/components/slideshow/slideshow.js",
+          "src/components/sortmenu/sortmenu.js",
           "src/plugins/htmlVideoPlayer/plugin.js",
+          "src/plugins/logoScreensaver/plugin.js",
+          "src/plugins/playAccessValidation/plugin.js",
           "src/components/search/searchfields.js",
           "src/components/search/searchresults.js",
           "src/components/settingshelper.js",
           "src/components/shortcuts.js",
+          "src/components/subtitleeditor/subtitleeditor.js",
+          "src/components/subtitlesync/subtitlesync.js",
           "src/components/subtitlesettings/subtitleappearancehelper.js",
           "src/components/subtitlesettings/subtitlesettings.js",
           "src/components/syncPlay/groupSelectionMenu.js",
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
+          "src/components/tabbedview/tabbedview.js",
+          "src/components/viewManager/viewManager.js",
+          "src/components/tvproviders/schedulesdirect.js",
+          "src/components/tvproviders/xmltv.js",
           "src/components/toast/toast.js",
           "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",
@@ -192,13 +209,16 @@
           "src/controllers/music/musicplaylists.js",
           "src/controllers/music/musicrecommended.js",
           "src/controllers/music/songs.js",
-          "src/controllers/dashboard/mediaLibrary.js",
+          "src/controllers/dashboard/library.js",
           "src/controllers/dashboard/metadataImages.js",
           "src/controllers/dashboard/metadatanfo.js",
           "src/controllers/dashboard/networking.js",
           "src/controllers/dashboard/notifications/notification.js",
           "src/controllers/dashboard/notifications/notifications.js",
           "src/controllers/dashboard/playback.js",
+          "src/controllers/dashboard/plugins/add/index.js",
+          "src/controllers/dashboard/plugins/installed/index.js",
+          "src/controllers/dashboard/plugins/available/index.js",
           "src/controllers/dashboard/plugins/repositories/index.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtask.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtasks.js",
@@ -210,9 +230,16 @@
           "src/controllers/dashboard/users/userparentalcontrol.js",
           "src/controllers/dashboard/users/userpasswordpage.js",
           "src/controllers/dashboard/users/userprofilespage.js",
+          "src/controllers/home.js",
+          "src/controllers/list.js",
           "src/controllers/edititemmetadata.js",
           "src/controllers/favorites.js",
           "src/controllers/hometab.js",
+          "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",
@@ -223,6 +250,10 @@
           "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",
@@ -261,6 +292,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",
@@ -282,14 +316,18 @@
           "src/scripts/autoThemes.js",
           "src/scripts/themeManager.js",
           "src/scripts/keyboardNavigation.js",
+          "src/scripts/libraryMenu.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"
@@ -319,6 +357,7 @@
     "Firefox ESR"
   ],
   "scripts": {
+    "start": "yarn serve",
     "serve": "gulp serve --development",
     "prepare": "gulp --production",
     "build:development": "gulp --development",

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

src/components/castSenderApi.js

@@ -1,34 +1,28 @@
-define([], function() {
+class CastSenderApi {
-    'use strict';
+    load() {
-
+        if (window.appMode === 'cordova' || window.appMode === 'android') {
-    if (window.appMode === 'cordova' || window.appMode === 'android') {
+            window.chrome = window.chrome || {};
-        return {
+            return Promise.resolve();
-            load: function () {
+        } else {
-                window.chrome = window.chrome || {};
+            let ccLoaded = false;
+            if (ccLoaded) {
                 return Promise.resolve();
             }
-        };
-    } else {
-        var 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.setAttribute('type', 'text/javascript');
 
-                    fileref.onload = function () {
+                fileref.onload = function () {
-                        ccLoaded = true;
+                    ccLoaded = true;
-                        resolve();
+                    resolve();
-                    };
+                };
 
-                    fileref.setAttribute('src', 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js');
+                fileref.setAttribute('src', 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js');
-                    document.querySelector('head').appendChild(fileref);
+                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/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,37 +474,38 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
         }
     }
 
-    return {
+/* eslint-enable indent */
-        autoFocus: autoFocus,
+
-        focus: focus,
+export default {
-        focusableParent: focusableParent,
+    autoFocus: autoFocus,
-        getFocusableElements: getFocusableElements,
+    focus: focus,
-        moveLeft: function (sourceElement, options) {
+    focusableParent: focusableParent,
-            var container = options ? options.container : null;
+    getFocusableElements: getFocusableElements,
-            var focusableElements = options ? options.focusableElements : null;
+    moveLeft: function (sourceElement, options) {
-            nav(sourceElement, 0, container, focusableElements);
+        var container = options ? options.container : null;
-        },
+        var focusableElements = options ? options.focusableElements : null;
-        moveRight: function (sourceElement, options) {
+        nav(sourceElement, 0, container, focusableElements);
-            var container = options ? options.container : null;
+    },
-            var focusableElements = options ? options.focusableElements : null;
+    moveRight: function (sourceElement, options) {
-            nav(sourceElement, 1, container, focusableElements);
+        var container = options ? options.container : null;
-        },
+        var focusableElements = options ? options.focusableElements : null;
-        moveUp: function (sourceElement, options) {
+        nav(sourceElement, 1, container, focusableElements);
-            var container = options ? options.container : null;
+    },
-            var focusableElements = options ? options.focusableElements : null;
+    moveUp: function (sourceElement, options) {
-            nav(sourceElement, 2, container, focusableElements);
+        var container = options ? options.container : null;
-        },
+        var focusableElements = options ? options.focusableElements : null;
-        moveDown: function (sourceElement, options) {
+        nav(sourceElement, 2, container, focusableElements);
-            var container = options ? options.container : null;
+    },
-            var focusableElements = options ? options.focusableElements : null;
+    moveDown: function (sourceElement, options) {
-            nav(sourceElement, 3, container, focusableElements);
+        var container = options ? options.container : null;
-        },
+        var focusableElements = options ? options.focusableElements : null;
-        sendText: sendText,
+        nav(sourceElement, 3, container, focusableElements);
-        isCurrentlyFocusable: isCurrentlyFocusable,
+    },
-        pushScope: pushScope,
+    sendText: sendText,
-        popScope: popScope,
+    isCurrentlyFocusable: isCurrentlyFocusable,
-        focusFirst: focusFirst,
+    pushScope: pushScope,
-        focusLast: focusLast,
+    popScope: popScope,
-        moveFocus: moveFocus
+    focusFirst: focusFirst,
-    };
+    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

@@ -4,6 +4,10 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     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/itemsrefresher.js

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

src/components/layoutManager.js

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

src/components/notifications/notifications.js

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

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

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,194 +1,195 @@
-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) {
+function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCancellation) {
-        loading.show();
+    loading.show();
 
-        return apiClient.getItem(apiClient.getCurrentUserId(), programId).then(function (item) {
+    return apiClient.getItem(apiClient.getCurrentUserId(), programId).then(function (item) {
-            if (item.IsSeries) {
+        if (item.IsSeries) {
-                // create series
+            // create series
-                return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (timerDefaults) {
+            return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (timerDefaults) {
-                    return apiClient.createLiveTvSeriesTimer(timerDefaults).then(function () {
+                return apiClient.createLiveTvSeriesTimer(timerDefaults).then(function () {
-                        loading.hide();
+                    loading.hide();
-                        sendToast(globalize.translate('SeriesRecordingScheduled'));
+                    sendToast(globalize.translate('SeriesRecordingScheduled'));
+                });
+            });
+        } else {
+            // cancel
+            if (confirmTimerCancellation) {
+                return cancelTimerWithConfirmation(timerId, apiClient.serverId());
+            }
+
+            return cancelTimer(apiClient.serverId(), timerId, true);
+        }
+    });
+}
+
+function cancelTimerWithConfirmation(timerId, serverId) {
+    return new Promise(function (resolve, reject) {
+        import('confirm').then(({ default: confirm }) => {
+            confirm.default({
+
+                text: globalize.translate('MessageConfirmRecordingCancellation'),
+                primary: 'delete',
+                confirmText: globalize.translate('HeaderCancelRecording'),
+                cancelText: globalize.translate('HeaderKeepRecording')
+
+            }).then(function () {
+                loading.show();
+
+                const apiClient = connectionManager.getApiClient(serverId);
+                cancelTimer(apiClient, timerId, true).then(resolve, reject);
+            }, reject);
+        });
+    });
+}
+
+function cancelSeriesTimerWithConfirmation(timerId, serverId) {
+    return new Promise(function (resolve, reject) {
+        import('confirm').then(({ default: confirm }) => {
+            confirm.default({
+
+                text: globalize.translate('MessageConfirmRecordingCancellation'),
+                primary: 'delete',
+                confirmText: globalize.translate('HeaderCancelSeries'),
+                cancelText: globalize.translate('HeaderKeepSeries')
+
+            }).then(function () {
+                loading.show();
+
+                const apiClient = connectionManager.getApiClient(serverId);
+                apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
+                    import('toast').then(({default: toast}) => {
+                        toast(globalize.translate('SeriesCancelled'));
                     });
+
+                    loading.hide();
+                    resolve();
+                }, reject);
+            }, reject);
+        });
+    });
+}
+
+function cancelTimer(apiClient, timerId, hideLoading) {
+    loading.show();
+    return apiClient.cancelLiveTvTimer(timerId).then(function () {
+        if (hideLoading !== false) {
+            loading.hide();
+            sendToast(globalize.translate('RecordingCancelled'));
+        }
+    });
+}
+
+function createRecording(apiClient, programId, isSeries) {
+    loading.show();
+    return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
+        const promise = isSeries ?
+            apiClient.createLiveTvSeriesTimer(item) :
+            apiClient.createLiveTvTimer(item);
+
+        return promise.then(function () {
+            loading.hide();
+            sendToast(globalize.translate('RecordingScheduled'));
+        });
+    });
+}
+
+function sendToast(msg) {
+    import('toast').then(({ default: toast }) => {
+        toast(msg);
+    });
+}
+
+function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
+    return new Promise(function (resolve, reject) {
+        import('dialog').then(({ default: dialog }) => {
+            const items = [];
+
+            items.push({
+                name: globalize.translate('HeaderKeepRecording'),
+                id: 'cancel',
+                type: 'submit'
+            });
+
+            if (timerStatus === 'InProgress') {
+                items.push({
+                    name: globalize.translate('HeaderStopRecording'),
+                    id: 'canceltimer',
+                    type: 'cancel'
                 });
             } else {
-                // cancel
+                items.push({
-                if (confirmTimerCancellation) {
+                    name: globalize.translate('HeaderCancelRecording'),
-                    return cancelTimerWithConfirmation(timerId, apiClient.serverId());
+                    id: 'canceltimer',
-                }
+                    type: 'cancel'
-
+                });
-                return cancelTimer(apiClient.serverId(), timerId, true);
             }
-        });
-    }
 
-    function cancelTimerWithConfirmation(timerId, serverId) {
+            items.push({
-        return new Promise(function (resolve, reject) {
+                name: globalize.translate('HeaderCancelSeries'),
-            require(['confirm'], function (confirm) {
+                id: 'cancelseriestimer',
-                confirm.default({
+                type: 'cancel'
-
-                    text: globalize.translate('MessageConfirmRecordingCancellation'),
-                    primary: 'delete',
-                    confirmText: globalize.translate('HeaderCancelRecording'),
-                    cancelText: globalize.translate('HeaderKeepRecording')
-
-                }).then(function () {
-                    loading.show();
-
-                    var apiClient = connectionManager.getApiClient(serverId);
-                    cancelTimer(apiClient, timerId, true).then(resolve, reject);
-                }, reject);
             });
-        });
-    }
 
-    function cancelSeriesTimerWithConfirmation(timerId, serverId) {
+            dialog({
-        return new Promise(function (resolve, reject) {
-            require(['confirm'], function (confirm) {
-                confirm.default({
 
-                    text: globalize.translate('MessageConfirmRecordingCancellation'),
+                text: globalize.translate('MessageConfirmRecordingCancellation'),
-                    primary: 'delete',
+                buttons: items
-                    confirmText: globalize.translate('HeaderCancelSeries'),
-                    cancelText: globalize.translate('HeaderKeepSeries')
 
-                }).then(function () {
+            }).then(function (result) {
+                const apiClient = connectionManager.getApiClient(serverId);
+
+                if (result === 'canceltimer') {
                     loading.show();
 
-                    var apiClient = connectionManager.getApiClient(serverId);
+                    cancelTimer(apiClient, timerId, true).then(resolve, reject);
-                    apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
+                } else if (result === 'cancelseriestimer') {
-                        require(['toast'], function (toast) {
+                    loading.show();
+
+                    apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
+                        import('toast').then(({ default: toast }) => {
                             toast(globalize.translate('SeriesCancelled'));
                         });
 
                         loading.hide();
                         resolve();
                     }, reject);
-                }, reject);
-            });
-        });
-    }
-
-    function cancelTimer(apiClient, timerId, hideLoading) {
-        loading.show();
-        return apiClient.cancelLiveTvTimer(timerId).then(function () {
-            if (hideLoading !== false) {
-                loading.hide();
-                sendToast(globalize.translate('RecordingCancelled'));
-            }
-        });
-    }
-
-    function createRecording(apiClient, programId, isSeries) {
-        loading.show();
-        return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
-            var promise = isSeries ?
-                apiClient.createLiveTvSeriesTimer(item) :
-                apiClient.createLiveTvTimer(item);
-
-            return promise.then(function () {
-                loading.hide();
-                sendToast(globalize.translate('RecordingScheduled'));
-            });
-        });
-    }
-
-    function sendToast(msg) {
-        require(['toast'], function (toast) {
-            toast(msg);
-        });
-    }
-
-    function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
-        return new Promise(function (resolve, reject) {
-            require(['dialog'], function (dialog) {
-                var items = [];
-
-                items.push({
-                    name: globalize.translate('HeaderKeepRecording'),
-                    id: 'cancel',
-                    type: 'submit'
-                });
-
-                if (timerStatus === 'InProgress') {
-                    items.push({
-                        name: globalize.translate('HeaderStopRecording'),
-                        id: 'canceltimer',
-                        type: 'cancel'
-                    });
                 } else {
-                    items.push({
+                    resolve();
-                        name: globalize.translate('HeaderCancelRecording'),
-                        id: 'canceltimer',
-                        type: 'cancel'
-                    });
                 }
-
+            }, reject);
-                items.push({
-                    name: globalize.translate('HeaderCancelSeries'),
-                    id: 'cancelseriestimer',
-                    type: 'cancel'
-                });
-
-                dialog({
-
-                    text: globalize.translate('MessageConfirmRecordingCancellation'),
-                    buttons: items
-
-                }).then(function (result) {
-                    var apiClient = connectionManager.getApiClient(serverId);
-
-                    if (result === 'canceltimer') {
-                        loading.show();
-
-                        cancelTimer(apiClient, timerId, true).then(resolve, reject);
-                    } else if (result === 'cancelseriestimer') {
-                        loading.show();
-
-                        apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
-                            require(['toast'], function (toast) {
-                                toast(globalize.translate('SeriesCancelled'));
-                            });
-
-                            loading.hide();
-                            resolve();
-                        }, reject);
-                    } else {
-                        resolve();
-                    }
-                }, reject);
-            });
         });
-    }
+    });
+}
 
-    function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) {
+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) {
+    if (seriesTimerId && hasTimer) {
-            // cancel
+        // cancel
-            return showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId);
+        return showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId);
-        } else if (hasTimer && programId) {
+    } else if (hasTimer && programId) {
-            // change to series recording, if possible
+        // change to series recording, if possible
-            // otherwise cancel individual recording
+        // otherwise cancel individual recording
-            return changeRecordingToSeries(apiClient, timerId, programId, true);
+        return changeRecordingToSeries(apiClient, timerId, programId, true);
-        } else if (programId) {
+    } else if (programId) {
-            // schedule recording
+        // schedule recording
-            return createRecording(apiClient, programId);
+        return createRecording(apiClient, programId);
-        } else {
+    } else {
-            return Promise.reject();
+        return Promise.reject();
-        }
     }
+}
+
+export default {
+    cancelTimer: cancelTimer,
+    createRecording: createRecording,
+    changeRecordingToSeries: changeRecordingToSeries,
+    toggleRecording: toggleRecording,
+    cancelTimerWithConfirmation: cancelTimerWithConfirmation,
+    cancelSeriesTimerWithConfirmation: cancelSeriesTimerWithConfirmation
+};
 
-    return {
-        cancelTimer: cancelTimer,
-        createRecording: createRecording,
-        changeRecordingToSeries: changeRecordingToSeries,
-        toggleRecording: toggleRecording,
-        cancelTimerWithConfirmation: cancelTimerWithConfirmation,
-        cancelSeriesTimerWithConfirmation: cancelSeriesTimerWithConfirmation
-    };
-});

src/components/recordingcreator/seriesrecordingeditor.js

@@ -1,143 +1,200 @@
-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) {
+function deleteTimer(apiClient, timerId) {
-        return new Promise(function (resolve, reject) {
+    return new Promise(function (resolve, reject) {
-            require(['recordingHelper'], function (recordingHelper) {
+        import('recordingHelper').then(({ default: recordingHelper }) => {
-                recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
+            recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
-            });
         });
+    });
+}
+
+function renderTimer(context, item) {
+    context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
+    context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
+
+    context.querySelector('.selectChannels').value = item.RecordAnyChannel ? 'all' : 'one';
+    context.querySelector('.selectAirTime').value = item.RecordAnyTime ? 'any' : 'original';
+
+    context.querySelector('.selectShowType').value = item.RecordNewOnly ? 'new' : 'all';
+    context.querySelector('.chkSkipEpisodesInLibrary').checked = item.SkipEpisodesInLibrary;
+    context.querySelector('.selectKeepUpTo').value = item.KeepUpTo || 0;
+
+    if (item.ChannelName || item.ChannelNumber) {
+        context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('ChannelNameOnly', item.ChannelName || item.ChannelNumber);
+    } else {
+        context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('OneChannel');
     }
 
-    function renderTimer(context, item, apiClient) {
+    context.querySelector('.optionAroundTime').innerHTML = globalize.translate('AroundTime', datetime.getDisplayTime(datetime.parseISO8601Date(item.StartDate)));
-        context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
-        context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
 
-        context.querySelector('.selectChannels').value = item.RecordAnyChannel ? 'all' : 'one';
+    loading.hide();
-        context.querySelector('.selectAirTime').value = item.RecordAnyTime ? 'any' : 'original';
+}
 
-        context.querySelector('.selectShowType').value = item.RecordNewOnly ? 'new' : 'all';
+function closeDialog(isDeleted) {
-        context.querySelector('.chkSkipEpisodesInLibrary').checked = item.SkipEpisodesInLibrary;
+    recordingUpdated = true;
-        context.querySelector('.selectKeepUpTo').value = item.KeepUpTo || 0;
+    recordingDeleted = isDeleted;
 
-        if (item.ChannelName || item.ChannelNumber) {
+    dialogHelper.close(currentDialog);
-            context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('ChannelNameOnly', item.ChannelName || item.ChannelNumber);
+}
-        } else {
-            context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('OneChannel');
-        }
 
-        context.querySelector('.optionAroundTime').innerHTML = globalize.translate('AroundTime', datetime.getDisplayTime(datetime.parseISO8601Date(item.StartDate)));
+function onSubmit(e) {
+    const form = this;
 
+    const apiClient = connectionManager.getApiClient(currentServerId);
+
+    apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
+        item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
+        item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
+        item.RecordAnyChannel = form.querySelector('.selectChannels').value === 'all';
+        item.RecordAnyTime = form.querySelector('.selectAirTime').value === 'any';
+        item.RecordNewOnly = form.querySelector('.selectShowType').value === 'new';
+        item.SkipEpisodesInLibrary = form.querySelector('.chkSkipEpisodesInLibrary').checked;
+        item.KeepUpTo = form.querySelector('.selectKeepUpTo').value;
+
+        apiClient.updateLiveTvSeriesTimer(item);
+    });
+
+    e.preventDefault();
+
+    // Disable default form submission
+    return false;
+}
+
+function init(context) {
+    fillKeepUpTo(context);
+
+    context.querySelector('.btnCancel').addEventListener('click', function () {
+        closeDialog(false);
+    });
+
+    context.querySelector('.btnCancelRecording').addEventListener('click', function () {
+        const apiClient = connectionManager.getApiClient(currentServerId);
+        deleteTimer(apiClient, currentItemId).then(function () {
+            closeDialog(true);
+        });
+    });
+
+    context.querySelector('form').addEventListener('submit', onSubmit);
+}
+
+function reload(context, id) {
+    const apiClient = connectionManager.getApiClient(currentServerId);
+
+    loading.show();
+    if (typeof id === 'string') {
+        currentItemId = id;
+
+        apiClient.getLiveTvSeriesTimer(id).then(function (result) {
+            renderTimer(context, result);
+            loading.hide();
+        });
+    } else if (id) {
+        currentItemId = id.Id;
+
+        renderTimer(context, id);
         loading.hide();
     }
+}
 
-    function closeDialog(isDeleted) {
+function fillKeepUpTo(context) {
-        recordingUpdated = true;
+    let html = '';
-        recordingDeleted = isDeleted;
 
-        dialogHelper.close(currentDialog);
+    for (let i = 0; i <= 50; i++) {
-    }
+        let text;
 
-    function onSubmit(e) {
+        if (i === 0) {
-        var form = this;
+            text = globalize.translate('AsManyAsPossible');
-
+        } else if (i === 1) {
-        var apiClient = connectionManager.getApiClient(currentServerId);
+            text = globalize.translate('ValueOneEpisode');
-
+        } else {
-        apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
+            text = globalize.translate('ValueEpisodeCount', i);
-            item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
-            item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
-            item.RecordAnyChannel = form.querySelector('.selectChannels').value === 'all';
-            item.RecordAnyTime = form.querySelector('.selectAirTime').value === 'any';
-            item.RecordNewOnly = form.querySelector('.selectShowType').value === 'new';
-            item.SkipEpisodesInLibrary = form.querySelector('.chkSkipEpisodesInLibrary').checked;
-            item.KeepUpTo = form.querySelector('.selectKeepUpTo').value;
-
-            apiClient.updateLiveTvSeriesTimer(item);
-        });
-
-        e.preventDefault();
-
-        // Disable default form submission
-        return false;
-    }
-
-    function init(context) {
-        fillKeepUpTo(context);
-
-        context.querySelector('.btnCancel').addEventListener('click', function () {
-            closeDialog(false);
-        });
-
-        context.querySelector('.btnCancelRecording').addEventListener('click', function () {
-            var apiClient = connectionManager.getApiClient(currentServerId);
-            deleteTimer(apiClient, currentItemId).then(function () {
-                closeDialog(true);
-            });
-        });
-
-        context.querySelector('form').addEventListener('submit', onSubmit);
-    }
-
-    function reload(context, id) {
-        var apiClient = connectionManager.getApiClient(currentServerId);
-
-        loading.show();
-        if (typeof id === 'string') {
-            currentItemId = id;
-
-            apiClient.getLiveTvSeriesTimer(id).then(function (result) {
-                renderTimer(context, result, apiClient);
-                loading.hide();
-            });
-        } else if (id) {
-            currentItemId = id.Id;
-
-            renderTimer(context, id, apiClient);
-            loading.hide();
-        }
-    }
-
-    function fillKeepUpTo(context) {
-        var html = '';
-
-        for (var i = 0; i <= 50; i++) {
-            var text;
-
-            if (i === 0) {
-                text = globalize.translate('AsManyAsPossible');
-            } else if (i === 1) {
-                text = globalize.translate('ValueOneEpisode');
-            } else {
-                text = globalize.translate('ValueEpisodeCount', i);
-            }
-
-            html += '<option value="' + i + '">' + text + '</option>';
         }
 
-        context.querySelector('.selectKeepUpTo').innerHTML = html;
+        html += '<option value="' + i + '">' + text + '</option>';
     }
 
-    function onFieldChange(e) {
+    context.querySelector('.selectKeepUpTo').innerHTML = html;
-        this.querySelector('.btnSubmit').click();
+}
-    }
 
-    function embed(itemId, serverId, options) {
+function onFieldChange() {
+    this.querySelector('.btnSubmit').click();
+}
+
+function embed(itemId, serverId, options) {
+    recordingUpdated = false;
+    recordingDeleted = false;
+    currentServerId = serverId;
+    loading.show();
+    options = options || {};
+
+    import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
+        const dialogOptions = {
+            removeOnClose: true,
+            scrollY: false
+        };
+
+        if (layoutManager.tv) {
+            dialogOptions.size = 'fullscreen';
+        } else {
+            dialogOptions.size = 'small';
+        }
+
+        const dlg = options.context;
+
+        dlg.classList.add('hide');
+        dlg.innerHTML = globalize.translateHtml(template, 'core');
+
+        dlg.querySelector('.formDialogHeader').classList.add('hide');
+        dlg.querySelector('.formDialogFooter').classList.add('hide');
+        dlg.querySelector('.formDialogContent').className = '';
+        dlg.querySelector('.dialogContentInner').className = '';
+        dlg.classList.remove('hide');
+
+        dlg.removeEventListener('change', onFieldChange);
+        dlg.addEventListener('change', onFieldChange);
+
+        currentDialog = dlg;
+
+        init(dlg);
+
+        reload(dlg, itemId);
+    });
+}
+
+function showEditor(itemId, serverId, options) {
+    return new Promise(function (resolve, reject) {
         recordingUpdated = false;
         recordingDeleted = false;
         currentServerId = serverId;
         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,101 +205,58 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
                 dialogOptions.size = 'small';
             }
 
-            var dlg = options.context;
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
-            dlg.classList.add('hide');
+            dlg.classList.add('formDialog');
-            dlg.innerHTML = globalize.translateHtml(template, 'core');
+            dlg.classList.add('recordingDialog');
 
-            dlg.querySelector('.formDialogHeader').classList.add('hide');
+            if (!layoutManager.tv) {
-            dlg.querySelector('.formDialogFooter').classList.add('hide');
+                dlg.style['min-width'] = '20%';
-            dlg.querySelector('.formDialogContent').className = '';
+            }
-            dlg.querySelector('.dialogContentInner').className = '';
-            dlg.classList.remove('hide');
 
-            dlg.removeEventListener('change', onFieldChange);
+            let html = '';
-            dlg.addEventListener('change', onFieldChange);
+
+            html += globalize.translateHtml(template, 'core');
+
+            dlg.innerHTML = html;
+
+            if (options.enableCancel === false) {
+                dlg.querySelector('.formDialogFooter').classList.add('hide');
+            }
 
             currentDialog = dlg;
 
+            dlg.addEventListener('closing', function () {
+                if (!recordingDeleted) {
+                    this.querySelector('.btnSubmit').click();
+                }
+            });
+
+            dlg.addEventListener('close', function () {
+                if (recordingUpdated) {
+                    resolve({
+                        updated: true,
+                        deleted: recordingDeleted
+                    });
+                } else {
+                    reject();
+                }
+            });
+
+            if (layoutManager.tv) {
+                scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+            }
+
             init(dlg);
 
             reload(dlg, itemId);
+
+            dialogHelper.open(dlg);
         });
-    }
+    });
+}
 
-    function showEditor(itemId, serverId, options) {
+export default {
-        return new Promise(function (resolve, reject) {
+    show: showEditor,
-            recordingUpdated = false;
+    embed: embed
-            recordingDeleted = false;
+};
-            currentServerId = serverId;
-            loading.show();
-            options = options || {};
-
-            require(['text!./seriesrecordingeditor.template.html'], function (template) {
-                var dialogOptions = {
-                    removeOnClose: true,
-                    scrollY: false
-                };
-
-                if (layoutManager.tv) {
-                    dialogOptions.size = 'fullscreen';
-                } else {
-                    dialogOptions.size = 'small';
-                }
-
-                var dlg = dialogHelper.createDialog(dialogOptions);
-
-                dlg.classList.add('formDialog');
-                dlg.classList.add('recordingDialog');
-
-                if (!layoutManager.tv) {
-                    dlg.style['min-width'] = '20%';
-                }
-
-                var html = '';
-
-                html += globalize.translateHtml(template, 'core');
-
-                dlg.innerHTML = html;
-
-                if (options.enableCancel === false) {
-                    dlg.querySelector('.formDialogFooter').classList.add('hide');
-                }
-
-                currentDialog = dlg;
-
-                dlg.addEventListener('closing', function () {
-                    if (!recordingDeleted) {
-                        this.querySelector('.btnSubmit').click();
-                    }
-                });
-
-                dlg.addEventListener('close', function () {
-                    if (recordingUpdated) {
-                        resolve({
-                            updated: true,
-                            deleted: recordingDeleted
-                        });
-                    } else {
-                        reject();
-                    }
-                });
-
-                if (layoutManager.tv) {
-                    scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
-                }
-
-                init(dlg);
-
-                reload(dlg, itemId);
-
-                dialogHelper.open(dlg);
-            });
-        });
-    }
-
-    return {
-        show: showEditor,
-        embed: embed
-    };
-});

src/components/sortmenu/sortmenu.js

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

src/components/subtitlesettings/subtitleappearancehelper.js

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

src/components/tabbedview/tabbedview.js

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

src/components/tunerPicker.js

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

src/components/tvproviders/schedulesdirect.js

@@ -1,299 +1,304 @@
-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) {
+    function reload() {
+        loading.show();
+        ApiClient.getNamedConfiguration('livetv').then(function (config) {
+            const info = config.ListingProviders.filter(function (i) {
+                return i.Id === providerId;
+            })[0] || {};
+            listingsId = info.ListingsId;
+            $('#selectListing', page).val(info.ListingsId || '');
+            page.querySelector('.txtUser').value = info.Username || '';
+            page.querySelector('.txtPass').value = '';
+            page.querySelector('.txtZipCode').value = info.ZipCode || '';
 
-    return function (page, providerId, options) {
+            if (info.Username && info.Password) {
-        function reload() {
+                page.querySelector('.listingsSection').classList.remove('hide');
-            loading.show();
+            } else {
-            ApiClient.getNamedConfiguration('livetv').then(function (config) {
+                page.querySelector('.listingsSection').classList.add('hide');
-                var info = config.ListingProviders.filter(function (i) {
-                    return i.Id === providerId;
-                })[0] || {};
-                listingsId = info.ListingsId;
-                $('#selectListing', page).val(info.ListingsId || '');
-                page.querySelector('.txtUser').value = info.Username || '';
-                page.querySelector('.txtPass').value = '';
-                page.querySelector('.txtZipCode').value = info.ZipCode || '';
-
-                if (info.Username && info.Password) {
-                    page.querySelector('.listingsSection').classList.remove('hide');
-                } else {
-                    page.querySelector('.listingsSection').classList.add('hide');
-                }
-
-                page.querySelector('.chkAllTuners').checked = info.EnableAllTuners;
-
-                if (info.EnableAllTuners) {
-                    page.querySelector('.selectTunersSection').classList.add('hide');
-                } else {
-                    page.querySelector('.selectTunersSection').classList.remove('hide');
-                }
-
-                setCountry(info);
-                refreshTunerDevices(page, info, config.TunerHosts);
-            });
-        }
-
-        function setCountry(info) {
-            ApiClient.getJSON(ApiClient.getUrl('LiveTv/ListingProviders/SchedulesDirect/Countries')).then(function (result) {
-                var i;
-                var length;
-                var countryList = [];
-
-                for (var region in result) {
-                    var countries = result[region];
-
-                    if (countries.length && region !== 'ZZZ') {
-                        for (i = 0, length = countries.length; i < length; i++) {
-                            countryList.push({
-                                name: countries[i].fullName,
-                                value: countries[i].shortName
-                            });
-                        }
-                    }
-                }
-
-                countryList.sort(function (a, b) {
-                    if (a.name > b.name) {
-                        return 1;
-                    }
-
-                    if (a.name < b.name) {
-                        return -1;
-                    }
-
-                    return 0;
-                });
-                $('#selectCountry', page).html(countryList.map(function (c) {
-                    return '<option value="' + c.value + '">' + c.name + '</option>';
-                }).join('')).val(info.Country || '');
-                $(page.querySelector('.txtZipCode')).trigger('change');
-            }, function () { // ApiClient.getJSON() error handler
-                Dashboard.alert({
-                    message: globalize.translate('ErrorGettingTvLineups')
-                });
-            });
-            loading.hide();
-        }
-
-        function sha256(str) {
-            if (!self.TextEncoder) {
-                return Promise.resolve('');
             }
 
-            var buffer = new TextEncoder('utf-8').encode(str);
+            page.querySelector('.chkAllTuners').checked = info.EnableAllTuners;
-            return crypto.subtle.digest('SHA-256', buffer).then(function (hash) {
-                return hex(hash);
-            });
-        }
 
-        function hex(buffer) {
+            if (info.EnableAllTuners) {
-            var hexCodes = [];
+                page.querySelector('.selectTunersSection').classList.add('hide');
-            var view = new DataView(buffer);
+            } else {
-
+                page.querySelector('.selectTunersSection').classList.remove('hide');
-            for (var i = 0; i < view.byteLength; i += 4) {
-                var value = view.getUint32(i);
-                var stringValue = value.toString(16);
-                var paddedValue = ('00000000' + stringValue).slice(-'00000000'.length);
-                hexCodes.push(paddedValue);
             }
 
-            return hexCodes.join('');
+            setCountry(info);
-        }
+            refreshTunerDevices(page, info, config.TunerHosts);
+        });
+    }
 
-        function submitLoginForm() {
+    function setCountry(info) {
-            loading.show();
+        ApiClient.getJSON(ApiClient.getUrl('LiveTv/ListingProviders/SchedulesDirect/Countries')).then(function (result) {
-            sha256(page.querySelector('.txtPass').value).then(function (passwordHash) {
+            let i;
-                var info = {
+            let length;
-                    Type: 'SchedulesDirect',
+            const countryList = [];
-                    Username: page.querySelector('.txtUser').value,
-                    EnableAllTuners: true,
-                    Password: passwordHash,
-                    Pw: page.querySelector('.txtPass').value
-                };
-                var id = providerId;
 
-                if (id) {
+            for (const region in result) {
-                    info.Id = id;
+                const countries = result[region];
+
+                if (countries.length && region !== 'ZZZ') {
+                    for (i = 0, length = countries.length; i < length; i++) {
+                        countryList.push({
+                            name: countries[i].fullName,
+                            value: countries[i].shortName
+                        });
+                    }
+                }
+            }
+
+            countryList.sort(function (a, b) {
+                if (a.name > b.name) {
+                    return 1;
                 }
 
-                ApiClient.ajax({
+                if (a.name < b.name) {
-                    type: 'POST',
+                    return -1;
-                    url: ApiClient.getUrl('LiveTv/ListingProviders', {
+                }
-                        ValidateLogin: true
+
-                    }),
+                return 0;
-                    data: JSON.stringify(info),
-                    contentType: 'application/json',
-                    dataType: 'json'
-                }).then(function (result) {
-                    Dashboard.processServerConfigurationUpdateResult();
-                    providerId = result.Id;
-                    reload();
-                }, function () {
-                    Dashboard.alert({ // ApiClient.ajax() error handler
-                        message: globalize.translate('ErrorSavingTvProvider')
-                    });
-                });
             });
+            $('#selectCountry', page).html(countryList.map(function (c) {
+                return '<option value="' + c.value + '">' + c.name + '</option>';
+            }).join('')).val(info.Country || '');
+            $(page.querySelector('.txtZipCode')).trigger('change');
+        }, function () { // ApiClient.getJSON() error handler
+            Dashboard.alert({
+                message: globalize.translate('ErrorGettingTvLineups')
+            });
+        });
+        loading.hide();
+    }
+
+    function sha256(str) {
+        if (!self.TextEncoder) {
+            return Promise.resolve('');
         }
 
-        function submitListingsForm() {
+        const buffer = new TextEncoder('utf-8').encode(str);
-            var selectedListingsId = $('#selectListing', page).val();
+        return crypto.subtle.digest('SHA-256', buffer).then(function (hash) {
+            return hex(hash);
+        });
+    }
 
-            if (!selectedListingsId) {
+    function hex(buffer) {
-                return void Dashboard.alert({
+        const hexCodes = [];
-                    message: globalize.translate('ErrorPleaseSelectLineup')
+        const view = new DataView(buffer);
-                });
-            }
 
-            loading.show();
+        for (let i = 0; i < view.byteLength; i += 4) {
-            var id = providerId;
+            const value = view.getUint32(i);
-            ApiClient.getNamedConfiguration('livetv').then(function (config) {
+            const stringValue = value.toString(16);
-                var info = config.ListingProviders.filter(function (i) {
+            const paddedValue = ('00000000' + stringValue).slice(-'00000000'.length);
-                    return i.Id === id;
+            hexCodes.push(paddedValue);
-                })[0];
-                info.ZipCode = page.querySelector('.txtZipCode').value;
-                info.Country = $('#selectCountry', page).val();
-                info.ListingsId = selectedListingsId;
-                info.EnableAllTuners = page.querySelector('.chkAllTuners').checked;
-                info.EnabledTuners = info.EnableAllTuners ? [] : $('.chkTuner', page).get().filter(function (i) {
-                    return i.checked;
-                }).map(function (i) {
-                    return i.getAttribute('data-id');
-                });
-                ApiClient.ajax({
-                    type: 'POST',
-                    url: ApiClient.getUrl('LiveTv/ListingProviders', {
-                        ValidateListings: true
-                    }),
-                    data: JSON.stringify(info),
-                    contentType: 'application/json'
-                }).then(function (result) {
-                    loading.hide();
-
-                    if (options.showConfirmation) {
-                        Dashboard.processServerConfigurationUpdateResult();
-                    }
-
-                    Events.trigger(self, 'submitted');
-                }, function () {
-                    loading.hide();
-                    Dashboard.alert({
-                        message: globalize.translate('ErrorAddingListingsToSchedulesDirect')
-                    });
-                });
-            });
         }
 
-        function refreshListings(value) {
+        return hexCodes.join('');
-            if (!value) {
+    }
-                return void $('#selectListing', page).html('');
+
+    function submitLoginForm() {
+        loading.show();
+        sha256(page.querySelector('.txtPass').value).then(function (passwordHash) {
+            const info = {
+                Type: 'SchedulesDirect',
+                Username: page.querySelector('.txtUser').value,
+                EnableAllTuners: true,
+                Password: passwordHash,
+                Pw: page.querySelector('.txtPass').value
+            };
+            const id = providerId;
+
+            if (id) {
+                info.Id = id;
             }
 
-            loading.show();
             ApiClient.ajax({
-                type: 'GET',
+                type: 'POST',
-                url: ApiClient.getUrl('LiveTv/ListingProviders/Lineups', {
+                url: ApiClient.getUrl('LiveTv/ListingProviders', {
-                    Id: providerId,
+                    ValidateLogin: true
-                    Location: value,
-                    Country: $('#selectCountry', page).val()
                 }),
+                data: JSON.stringify(info),
+                contentType: 'application/json',
                 dataType: 'json'
             }).then(function (result) {
-                $('#selectListing', page).html(result.map(function (o) {
+                Dashboard.processServerConfigurationUpdateResult();
-                    return '<option value="' + o.Id + '">' + o.Name + '</option>';
+                providerId = result.Id;
-                }));
+                reload();
-
+            }, function () {
-                if (listingsId) {
+                Dashboard.alert({ // ApiClient.ajax() error handler
-                    $('#selectListing', page).val(listingsId);
+                    message: globalize.translate('ErrorSavingTvProvider')
-                }
-
-                loading.hide();
-            }, function (result) {
-                Dashboard.alert({
-                    message: globalize.translate('ErrorGettingTvLineups')
                 });
-                refreshListings('');
+            });
+        });
+    }
+
+    function submitListingsForm() {
+        const selectedListingsId = $('#selectListing', page).val();
+
+        if (!selectedListingsId) {
+            return void Dashboard.alert({
+                message: globalize.translate('ErrorPleaseSelectLineup')
+            });
+        }
+
+        loading.show();
+        const id = providerId;
+        ApiClient.getNamedConfiguration('livetv').then(function (config) {
+            const info = config.ListingProviders.filter(function (i) {
+                return i.Id === id;
+            })[0];
+            info.ZipCode = page.querySelector('.txtZipCode').value;
+            info.Country = $('#selectCountry', page).val();
+            info.ListingsId = selectedListingsId;
+            info.EnableAllTuners = page.querySelector('.chkAllTuners').checked;
+            info.EnabledTuners = info.EnableAllTuners ? [] : $('.chkTuner', page).get().filter(function (i) {
+                return i.checked;
+            }).map(function (i) {
+                return i.getAttribute('data-id');
+            });
+            ApiClient.ajax({
+                type: 'POST',
+                url: ApiClient.getUrl('LiveTv/ListingProviders', {
+                    ValidateListings: true
+                }),
+                data: JSON.stringify(info),
+                contentType: 'application/json'
+            }).then(function (result) {
                 loading.hide();
-            });
-        }
 
-        function getTunerName(providerId) {
+                if (options.showConfirmation) {
-            switch (providerId = providerId.toLowerCase()) {
+                    Dashboard.processServerConfigurationUpdateResult();
-                case 'm3u':
-                    return 'M3U Playlist';
-                case 'hdhomerun':
-                    return 'HDHomerun';
-                case 'satip':
-                    return 'DVB';
-                default:
-                    return 'Unknown';
-            }
-        }
-
-        function refreshTunerDevices(page, providerInfo, devices) {
-            var html = '';
-
-            for (var i = 0, length = devices.length; i < length; i++) {
-                var device = devices[i];
-                html += '<div class="listItem">';
-                var enabledTuners = providerInfo.EnabledTuners || [];
-                var isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
-                var 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">';
-                html += device.FriendlyName || getTunerName(device.Type);
-                html += '</div>';
-                html += '<div class="listItemBodyText secondary">';
-                html += device.Url;
-                html += '</div>';
-                html += '</div>';
-                html += '</div>';
-            }
-
-            page.querySelector('.tunerList').innerHTML = html;
-        }
-
-        var listingsId;
-        var self = this;
-
-        self.submit = function () {
-            page.querySelector('.btnSubmitListingsContainer').click();
-        };
-
-        self.init = function () {
-            options = options || {};
-
-            // 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;
-            page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
-
-            var hideSubmitButton = options.showSubmitButton === false;
-            page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
-
-            $('.formLogin', page).on('submit', function () {
-                submitLoginForm();
-                return false;
-            });
-            $('.formListings', page).on('submit', function () {
-                submitListingsForm();
-                return false;
-            });
-            $('.txtZipCode', page).on('change', function () {
-                refreshListings(this.value);
-            });
-            page.querySelector('.chkAllTuners').addEventListener('change', function (e) {
-                if (e.target.checked) {
-                    page.querySelector('.selectTunersSection').classList.add('hide');
-                } else {
-                    page.querySelector('.selectTunersSection').classList.remove('hide');
                 }
+
+                Events.trigger(self, 'submitted');
+            }, function () {
+                loading.hide();
+                Dashboard.alert({
+                    message: globalize.translate('ErrorAddingListingsToSchedulesDirect')
+                });
             });
-            $('.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();
+    }
-        };
+
+    function refreshListings(value) {
+        if (!value) {
+            return void $('#selectListing', page).html('');
+        }
+
+        loading.show();
+        ApiClient.ajax({
+            type: 'GET',
+            url: ApiClient.getUrl('LiveTv/ListingProviders/Lineups', {
+                Id: providerId,
+                Location: value,
+                Country: $('#selectCountry', page).val()
+            }),
+            dataType: 'json'
+        }).then(function (result) {
+            $('#selectListing', page).html(result.map(function (o) {
+                return '<option value="' + o.Id + '">' + o.Name + '</option>';
+            }));
+
+            if (listingsId) {
+                $('#selectListing', page).val(listingsId);
+            }
+
+            loading.hide();
+        }, function (result) {
+            Dashboard.alert({
+                message: globalize.translate('ErrorGettingTvLineups')
+            });
+            refreshListings('');
+            loading.hide();
+        });
+    }
+
+    function getTunerName(providerId) {
+        switch (providerId = providerId.toLowerCase()) {
+            case 'm3u':
+                return 'M3U Playlist';
+            case 'hdhomerun':
+                return 'HDHomerun';
+            case 'satip':
+                return 'DVB';
+            default:
+                return 'Unknown';
+        }
+    }
+
+    function refreshTunerDevices(page, providerInfo, devices) {
+        let html = '';
+
+        for (let i = 0, length = devices.length; i < length; i++) {
+            const device = devices[i];
+            html += '<div class="listItem">';
+            const enabledTuners = providerInfo.EnabledTuners || [];
+            const isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
+            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">';
+            html += device.FriendlyName || getTunerName(device.Type);
+            html += '</div>';
+            html += '<div class="listItemBodyText secondary">';
+            html += device.Url;
+            html += '</div>';
+            html += '</div>';
+            html += '</div>';
+        }
+
+        page.querySelector('.tunerList').innerHTML = html;
+    }
+
+    let listingsId;
+    const self = this;
+
+    self.submit = function () {
+        page.querySelector('.btnSubmitListingsContainer').click();
     };
-});
+
+    self.init = function () {
+        options = options || {};
+
+        // Only hide the buttons if explicitly set to false; default to showing if undefined or null
+        // FIXME: rename this option to clarify logic
+        const hideCancelButton = options.showCancelButton === false;
+        page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
+
+        const hideSubmitButton = options.showSubmitButton === false;
+        page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
+
+        $('.formLogin', page).on('submit', function () {
+            submitLoginForm();
+            return false;
+        });
+        $('.formListings', page).on('submit', function () {
+            submitListingsForm();
+            return false;
+        });
+        $('.txtZipCode', page).on('change', function () {
+            refreshListings(this.value);
+        });
+        page.querySelector('.chkAllTuners').addEventListener('change', function (e) {
+            if (e.target.checked) {
+                page.querySelector('.selectTunersSection').classList.add('hide');
+            } else {
+                page.querySelector('.selectTunersSection').classList.remove('hide');
+            }
+        });
+        $('.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,191 +1,193 @@
-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) {
+    function getListingProvider(config, id) {
+        if (config && id) {
+            const result = config.ListingProviders.filter(function (provider) {
+                return provider.Id === id;
+            })[0];
 
-    return function (page, providerId, options) {
+            if (result) {
-        function getListingProvider(config, id) {
+                return Promise.resolve(result);
-            if (config && id) {
-                var result = config.ListingProviders.filter(function (provider) {
-                    return provider.Id === id;
-                })[0];
-
-                if (result) {
-                    return Promise.resolve(result);
-                }
-
-                return getListingProvider();
             }
 
-            return ApiClient.getJSON(ApiClient.getUrl('LiveTv/ListingProviders/Default'));
+            return getListingProvider();
         }
 
-        function reload() {
+        return ApiClient.getJSON(ApiClient.getUrl('LiveTv/ListingProviders/Default'));
-            loading.show();
+    }
-            ApiClient.getNamedConfiguration('livetv').then(function (config) {
-                getListingProvider(config, providerId).then(function (info) {
-                    page.querySelector('.txtPath').value = info.Path || '';
-                    page.querySelector('.txtKids').value = (info.KidsCategories || []).join('|');
-                    page.querySelector('.txtNews').value = (info.NewsCategories || []).join('|');
-                    page.querySelector('.txtSports').value = (info.SportsCategories || []).join('|');
-                    page.querySelector('.txtMovies').value = (info.MovieCategories || []).join('|');
-                    page.querySelector('.txtMoviePrefix').value = info.MoviePrefix || '';
-                    page.querySelector('.txtUserAgent').value = info.UserAgent || '';
-                    page.querySelector('.chkAllTuners').checked = info.EnableAllTuners;
 
-                    if (page.querySelector('.chkAllTuners').checked) {
+    function reload() {
-                        page.querySelector('.selectTunersSection').classList.add('hide');
+        loading.show();
-                    } else {
+        ApiClient.getNamedConfiguration('livetv').then(function (config) {
-                        page.querySelector('.selectTunersSection').classList.remove('hide');
+            getListingProvider(config, providerId).then(function (info) {
-                    }
+                page.querySelector('.txtPath').value = info.Path || '';
+                page.querySelector('.txtKids').value = (info.KidsCategories || []).join('|');
+                page.querySelector('.txtNews').value = (info.NewsCategories || []).join('|');
+                page.querySelector('.txtSports').value = (info.SportsCategories || []).join('|');
+                page.querySelector('.txtMovies').value = (info.MovieCategories || []).join('|');
+                page.querySelector('.txtMoviePrefix').value = info.MoviePrefix || '';
+                page.querySelector('.txtUserAgent').value = info.UserAgent || '';
+                page.querySelector('.chkAllTuners').checked = info.EnableAllTuners;
 
-                    refreshTunerDevices(page, info, config.TunerHosts);
+                if (page.querySelector('.chkAllTuners').checked) {
-                    loading.hide();
-                });
-            });
-        }
-
-        function getCategories(txtInput) {
-            var value = txtInput.value;
-
-            if (value) {
-                return value.split('|');
-            }
-
-            return [];
-        }
-
-        function submitListingsForm() {
-            loading.show();
-            var id = providerId;
-            ApiClient.getNamedConfiguration('livetv').then(function (config) {
-                var info = config.ListingProviders.filter(function (provider) {
-                    return provider.Id === id;
-                })[0] || {};
-                info.Type = 'xmltv';
-                info.Path = page.querySelector('.txtPath').value;
-                info.MoviePrefix = page.querySelector('.txtMoviePrefix').value || null;
-                info.UserAgent = page.querySelector('.txtUserAgent').value || null;
-                info.MovieCategories = getCategories(page.querySelector('.txtMovies'));
-                info.KidsCategories = getCategories(page.querySelector('.txtKids'));
-                info.NewsCategories = getCategories(page.querySelector('.txtNews'));
-                info.SportsCategories = getCategories(page.querySelector('.txtSports'));
-                info.EnableAllTuners = page.querySelector('.chkAllTuners').checked;
-                info.EnabledTuners = info.EnableAllTuners ? [] : $('.chkTuner', page).get().filter(function (tuner) {
-                    return tuner.checked;
-                }).map(function (tuner) {
-                    return tuner.getAttribute('data-id');
-                });
-                ApiClient.ajax({
-                    type: 'POST',
-                    url: ApiClient.getUrl('LiveTv/ListingProviders', {
-                        ValidateListings: true
-                    }),
-                    data: JSON.stringify(info),
-                    contentType: 'application/json'
-                }).then(function (result) {
-                    loading.hide();
-
-                    if (options.showConfirmation !== false) {
-                        Dashboard.processServerConfigurationUpdateResult();
-                    }
-
-                    Events.trigger(self, 'submitted');
-                }, function () {
-                    loading.hide();
-                    Dashboard.alert({
-                        message: globalize.translate('ErrorAddingXmlTvFile')
-                    });
-                });
-            });
-        }
-
-        function getTunerName(providerId) {
-            switch (providerId = providerId.toLowerCase()) {
-                case 'm3u':
-                    return 'M3U Playlist';
-                case 'hdhomerun':
-                    return 'HDHomerun';
-                case 'satip':
-                    return 'DVB';
-                default:
-                    return 'Unknown';
-            }
-        }
-
-        function refreshTunerDevices(page, providerInfo, devices) {
-            var html = '';
-
-            for (var i = 0, length = devices.length; i < length; i++) {
-                var device = devices[i];
-                html += '<div class="listItem">';
-                var enabledTuners = providerInfo.EnabledTuners || [];
-                var isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
-                var 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">';
-                html += device.FriendlyName || getTunerName(device.Type);
-                html += '</div>';
-                html += '<div class="listItemBodyText secondary">';
-                html += device.Url;
-                html += '</div>';
-                html += '</div>';
-                html += '</div>';
-            }
-
-            page.querySelector('.tunerList').innerHTML = html;
-        }
-
-        function onSelectPathClick(e) {
-            var page = $(e.target).parents('.xmltvForm')[0];
-
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser.default();
-                picker.show({
-                    includeFiles: true,
-                    callback: function (path) {
-                        if (path) {
-                            var txtPath = page.querySelector('.txtPath');
-                            txtPath.value = path;
-                            txtPath.focus();
-                        }
-                        picker.close();
-                    }
-                });
-            });
-        }
-
-        var self = this;
-
-        self.submit = function () {
-            page.querySelector('.btnSubmitListings').click();
-        };
-
-        self.init = function () {
-            options = options || {};
-
-            // 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;
-            page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
-
-            var hideSubmitButton = options.showSubmitButton === false;
-            page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
-
-            $('form', page).on('submit', function () {
-                submitListingsForm();
-                return false;
-            });
-            page.querySelector('#btnSelectPath').addEventListener('click', onSelectPathClick);
-            page.querySelector('.chkAllTuners').addEventListener('change', function (evt) {
-                if (evt.target.checked) {
                     page.querySelector('.selectTunersSection').classList.add('hide');
                 } else {
                     page.querySelector('.selectTunersSection').classList.remove('hide');
                 }
+
+                refreshTunerDevices(page, info, config.TunerHosts);
+                loading.hide();
             });
-            reload();
+        });
-        };
+    }
+
+    function getCategories(txtInput) {
+        const value = txtInput.value;
+
+        if (value) {
+            return value.split('|');
+        }
+
+        return [];
+    }
+
+    function submitListingsForm() {
+        loading.show();
+        const id = providerId;
+        ApiClient.getNamedConfiguration('livetv').then(function (config) {
+            const info = config.ListingProviders.filter(function (provider) {
+                return provider.Id === id;
+            })[0] || {};
+            info.Type = 'xmltv';
+            info.Path = page.querySelector('.txtPath').value;
+            info.MoviePrefix = page.querySelector('.txtMoviePrefix').value || null;
+            info.UserAgent = page.querySelector('.txtUserAgent').value || null;
+            info.MovieCategories = getCategories(page.querySelector('.txtMovies'));
+            info.KidsCategories = getCategories(page.querySelector('.txtKids'));
+            info.NewsCategories = getCategories(page.querySelector('.txtNews'));
+            info.SportsCategories = getCategories(page.querySelector('.txtSports'));
+            info.EnableAllTuners = page.querySelector('.chkAllTuners').checked;
+            info.EnabledTuners = info.EnableAllTuners ? [] : $('.chkTuner', page).get().filter(function (tuner) {
+                return tuner.checked;
+            }).map(function (tuner) {
+                return tuner.getAttribute('data-id');
+            });
+            ApiClient.ajax({
+                type: 'POST',
+                url: ApiClient.getUrl('LiveTv/ListingProviders', {
+                    ValidateListings: true
+                }),
+                data: JSON.stringify(info),
+                contentType: 'application/json'
+            }).then(function (result) {
+                loading.hide();
+
+                if (options.showConfirmation !== false) {
+                    Dashboard.processServerConfigurationUpdateResult();
+                }
+
+                Events.trigger(self, 'submitted');
+            }, function () {
+                loading.hide();
+                Dashboard.alert({
+                    message: globalize.translate('ErrorAddingXmlTvFile')
+                });
+            });
+        });
+    }
+
+    function getTunerName(providerId) {
+        switch (providerId = providerId.toLowerCase()) {
+            case 'm3u':
+                return 'M3U Playlist';
+            case 'hdhomerun':
+                return 'HDHomerun';
+            case 'satip':
+                return 'DVB';
+            default:
+                return 'Unknown';
+        }
+    }
+
+    function refreshTunerDevices(page, providerInfo, devices) {
+        let html = '';
+
+        for (let i = 0, length = devices.length; i < length; i++) {
+            const device = devices[i];
+            html += '<div class="listItem">';
+            const enabledTuners = providerInfo.EnabledTuners || [];
+            const isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
+            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">';
+            html += device.FriendlyName || getTunerName(device.Type);
+            html += '</div>';
+            html += '<div class="listItemBodyText secondary">';
+            html += device.Url;
+            html += '</div>';
+            html += '</div>';
+            html += '</div>';
+        }
+
+        page.querySelector('.tunerList').innerHTML = html;
+    }
+
+    function onSelectPathClick(e) {
+        const page = $(e.target).parents('.xmltvForm')[0];
+
+        import('directorybrowser').then(({default: directoryBrowser}) => {
+            const picker = new directoryBrowser();
+            picker.show({
+                includeFiles: true,
+                callback: function (path) {
+                    if (path) {
+                        const txtPath = page.querySelector('.txtPath');
+                        txtPath.value = path;
+                        txtPath.focus();
+                    }
+                    picker.close();
+                }
+            });
+        });
+    }
+
+    const self = this;
+
+    self.submit = function () {
+        page.querySelector('.btnSubmitListings').click();
     };
-});
+
+    self.init = function () {
+        options = options || {};
+
+        // Only hide the buttons if explicitly set to false; default to showing if undefined or null
+        // FIXME: rename this option to clarify logic
+        const hideCancelButton = options.showCancelButton === false;
+        page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
+
+        const hideSubmitButton = options.showSubmitButton === false;
+        page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
+
+        $('form', page).on('submit', function () {
+            submitListingsForm();
+            return false;
+        });
+        page.querySelector('#btnSelectPath').addEventListener('click', onSelectPathClick);
+        page.querySelector('.chkAllTuners').addEventListener('change', function (evt) {
+            if (evt.target.checked) {
+                page.querySelector('.selectTunersSection').classList.add('hide');
+            } else {
+                page.querySelector('.selectTunersSection').classList.remove('hide');
+            }
+        });
+        reload();
+    };
+}

src/components/viewManager/viewManager.js

@@ -1,134 +1,134 @@
-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) {
+viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
-        var lastView = currentView;
+    const lastView = currentView;
-        if (lastView) {
+    if (lastView) {
-            var beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
+        const beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
 
-            if (!beforeHideResult) {
+        if (!beforeHideResult) {
-                // todo: cancel
+            // todo: cancel
-            }
-        }
-
-        var eventDetail = getViewEventDetail(newView, options, isRestored);
-
-        if (!newView.initComplete) {
-            newView.initComplete = true;
-
-            if (typeof options.controllerFactory === 'function') {
-                new options.controllerFactory(newView, eventDetail.detail.params);
-            } else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
-                new options.controllerFactory.default(newView, eventDetail.detail.params);
-            }
-
-            if (!options.controllerFactory || dispatchPageEvents) {
-                dispatchViewEvent(newView, eventDetail, 'viewinit');
-            }
-        }
-
-        dispatchViewEvent(newView, eventDetail, 'viewbeforeshow');
-    });
-
-    function onViewChange(view, options, isRestore) {
-        var lastView = currentView;
-        if (lastView) {
-            dispatchViewEvent(lastView, null, 'viewhide');
-        }
-
-        currentView = view;
-
-        var eventDetail = getViewEventDetail(view, options, isRestore);
-
-        if (!isRestore) {
-            if (options.autoFocus !== false) {
-                focusManager.autoFocus(view);
-            }
-        } else if (!layoutManager.mobile) {
-            if (view.activeElement && document.body.contains(view.activeElement) && focusManager.isCurrentlyFocusable(view.activeElement)) {
-                focusManager.focus(view.activeElement);
-            } else {
-                focusManager.autoFocus(view);
-            }
-        }
-
-        view.dispatchEvent(new CustomEvent('viewshow', eventDetail));
-
-        if (dispatchPageEvents) {
-            view.dispatchEvent(new CustomEvent('pageshow', eventDetail));
         }
     }
 
-    function getProperties(view) {
+    const eventDetail = getViewEventDetail(newView, options, isRestored);
-        var props = view.getAttribute('data-properties');
 
-        if (props) {
+    if (!newView.initComplete) {
-            return props.split(',');
+        newView.initComplete = true;
+
+        if (typeof options.controllerFactory === 'function') {
+            new options.controllerFactory(newView, eventDetail.detail.params);
+        } else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
+            new options.controllerFactory.default(newView, eventDetail.detail.params);
         }
 
-        return [];
+        if (!options.controllerFactory || dispatchPageEvents) {
+            dispatchViewEvent(newView, eventDetail, 'viewinit');
+        }
     }
 
-    function dispatchViewEvent(view, eventInfo, eventName, isCancellable) {
+    dispatchViewEvent(newView, eventDetail, 'viewbeforeshow');
-        if (!eventInfo) {
+});
-            eventInfo = {
-                detail: {
-                    type: view.getAttribute('data-type'),
-                    properties: getProperties(view)
-                },
-                bubbles: true,
-                cancelable: isCancellable
-            };
-        }
 
-        eventInfo.cancelable = isCancellable || false;
+function onViewChange(view, options, isRestore) {
-
+    const lastView = currentView;
-        var eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
+    if (lastView) {
-
+        dispatchViewEvent(lastView, null, 'viewhide');
-        if (dispatchPageEvents) {
-            eventInfo.cancelable = false;
-            view.dispatchEvent(new CustomEvent(eventName.replace('view', 'page'), eventInfo));
-        }
-
-        return eventResult;
     }
 
-    function getViewEventDetail(view, options, isRestore) {
+    currentView = view;
-        var url = options.url;
-        var index = url.indexOf('?');
-        var params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
 
-        return {
+    const eventDetail = getViewEventDetail(view, options, isRestore);
+
+    if (!isRestore) {
+        if (options.autoFocus !== false) {
+            focusManager.autoFocus(view);
+        }
+    } else if (!layoutManager.mobile) {
+        if (view.activeElement && document.body.contains(view.activeElement) && focusManager.isCurrentlyFocusable(view.activeElement)) {
+            focusManager.focus(view.activeElement);
+        } else {
+            focusManager.autoFocus(view);
+        }
+    }
+
+    view.dispatchEvent(new CustomEvent('viewshow', eventDetail));
+
+    if (dispatchPageEvents) {
+        view.dispatchEvent(new CustomEvent('pageshow', eventDetail));
+    }
+}
+
+function getProperties(view) {
+    const props = view.getAttribute('data-properties');
+
+    if (props) {
+        return props.split(',');
+    }
+
+    return [];
+}
+
+function dispatchViewEvent(view, eventInfo, eventName, isCancellable) {
+    if (!eventInfo) {
+        eventInfo = {
             detail: {
                 type: view.getAttribute('data-type'),
-                properties: getProperties(view),
+                properties: getProperties(view)
-                params: params,
-                isRestored: isRestore,
-                state: options.state,
-
-                // The route options
-                options: options.options || {}
             },
             bubbles: true,
-            cancelable: false
+            cancelable: isCancellable
         };
     }
 
-    function resetCachedViews() {
+    eventInfo.cancelable = isCancellable || false;
-        // Reset all cached views whenever the skin changes
+
-        viewContainer.reset();
+    const eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
+
+    if (dispatchPageEvents) {
+        eventInfo.cancelable = false;
+        view.dispatchEvent(new CustomEvent(eventName.replace('view', 'page'), eventInfo));
     }
 
-    document.addEventListener('skinunload', resetCachedViews);
+    return eventResult;
+}
 
-    function ViewManager() {
+function getViewEventDetail(view, options, isRestore) {
-    }
+    const url = options.url;
+    const index = url.indexOf('?');
+    const params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
 
-    ViewManager.prototype.loadView = function (options) {
+    return {
-        var lastView = currentView;
+        detail: {
+            type: view.getAttribute('data-type'),
+            properties: getProperties(view),
+            params: params,
+            isRestored: isRestore,
+            state: options.state,
+
+            // The route options
+            options: options.options || {}
+        },
+        bubbles: true,
+        cancelable: false
+    };
+}
+
+function resetCachedViews() {
+    // Reset all cached views whenever the skin changes
+    viewContainer.reset();
+}
+
+document.addEventListener('skinunload', resetCachedViews);
+
+class ViewManager {
+    loadView(options) {
+        const 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/controllers/dashboard/plugins/add/index.js

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

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

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

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

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

src/controllers/home.js

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

src/controllers/itemDetails/index.js

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

src/controllers/list.js

@@ -1,11 +1,21 @@
-define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, AlphaPicker) {
+import globalize from 'globalize';
-    'use strict';
+import listView from 'listView';
+import layoutManager from 'layoutManager';
+import * as userSettings from 'userSettings';
+import focusManager from 'focusManager';
+import cardBuilder from 'cardBuilder';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
+import AlphaNumericShortcuts from 'alphaNumericShortcuts';
+import playbackManager from 'playbackManager';
+import AlphaPicker from 'alphaPicker';
+import 'emby-itemscontainer';
+import 'emby-scroller';
 
-    playbackManager = playbackManager.default || playbackManager;
+/* eslint-disable indent */
-    loading = loading.default || loading;
 
     function getInitialLiveTvQuery(instance, params) {
-        var query = {
+        const query = {
             UserId: connectionManager.getApiClient(params.serverId).getCurrentUserId(),
             StartIndex: 0,
             Fields: 'ChannelInfo,PrimaryImageAspectRatio',
@@ -62,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;
@@ -71,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');
@@ -167,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');
@@ -201,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;
@@ -222,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') {
@@ -251,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';
@@ -274,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',
@@ -323,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);
@@ -334,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(),
@@ -349,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(),
@@ -368,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(),
@@ -386,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
             });
@@ -397,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) {
@@ -425,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({
@@ -433,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';
@@ -463,7 +474,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 shape = 'autoVertical';
             }
 
-            var posterOptions = {
+            let posterOptions = {
                 shape: shape,
                 showTitle: settings.showTitle,
                 showYear: settings.showTitle,
@@ -496,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++;
@@ -541,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',
@@ -652,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({
@@ -668,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({
@@ -684,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);
@@ -697,7 +708,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             }
         }
 
-        var self = this;
+        const self = this;
         self.params = params;
         this.itemsContainer = view.querySelector('.itemsContainer');
 
@@ -711,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) {
@@ -734,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') {
@@ -752,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();
@@ -764,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 () {
@@ -779,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);
@@ -806,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();
@@ -845,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',
@@ -865,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);
@@ -915,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'
@@ -928,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
@@ -955,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'),
@@ -969,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;
         }
@@ -980,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;
         }
@@ -991,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;
         }
@@ -1002,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') {
@@ -1037,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) {
@@ -1065,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,
@@ -1078,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');
@@ -1090,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;
@@ -1108,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';
@@ -1120,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'];
@@ -1134,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);
@@ -1196,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,133 +1,134 @@
-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;
+    function getPageData() {
+        if (!pageData) {
+            pageData = {
+                query: {
+                    StartIndex: 0,
+                    Fields: 'PrimaryImageAspectRatio'
+                }
+            };
+        }
 
-    return function (view, params, tabContent) {
+        if (userSettings.libraryPageSize() > 0) {
-        function getPageData() {
+            pageData.query['Limit'] = userSettings.libraryPageSize();
-            if (!pageData) {
+        }
-                pageData = {
+
-                    query: {
+        return pageData;
-                        StartIndex: 0,
+    }
-                        Fields: 'PrimaryImageAspectRatio'
+
-                    }
+    function getQuery() {
-                };
+        return getPageData().query;
+    }
+
+    function getChannelsHtml(channels) {
+        return cardBuilder.getCardsHtml({
+            items: channels,
+            shape: 'square',
+            showTitle: true,
+            lazy: true,
+            cardLayout: true,
+            showDetailsMenu: true,
+            showCurrentProgram: true,
+            showCurrentProgramTime: true
+        });
+    }
+
+    function renderChannels(context, result) {
+        function onNextPageClick() {
+            if (isLoading) {
+                return;
             }
 
             if (userSettings.libraryPageSize() > 0) {
-                pageData.query['Limit'] = userSettings.libraryPageSize();
+                query.StartIndex += query.Limit;
+            }
+            reloadItems(context);
+        }
+
+        function onPreviousPageClick() {
+            if (isLoading) {
+                return;
             }
 
-            return pageData;
+            if (userSettings.libraryPageSize() > 0) {
-        }
+                query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
-
-        function getQuery() {
-            return getPageData().query;
-        }
-
-        function getChannelsHtml(channels) {
-            return cardBuilder.getCardsHtml({
-                items: channels,
-                shape: 'square',
-                showTitle: true,
-                lazy: true,
-                cardLayout: true,
-                showDetailsMenu: true,
-                showCurrentProgram: true,
-                showCurrentProgramTime: true
-            });
-        }
-
-        function renderChannels(context, result) {
-            function onNextPageClick() {
-                if (isLoading) {
-                    return;
-                }
-
-                if (userSettings.libraryPageSize() > 0) {
-                    query.StartIndex += query.Limit;
-                }
-                reloadItems(context);
-            }
-
-            function onPreviousPageClick() {
-                if (isLoading) {
-                    return;
-                }
-
-                if (userSettings.libraryPageSize() > 0) {
-                    query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
-                }
-                reloadItems(context);
-            }
-
-            var query = getQuery();
-            context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({
-                startIndex: query.StartIndex,
-                limit: query.Limit,
-                totalRecordCount: result.TotalRecordCount,
-                showLimit: false,
-                updatePageSizeSetting: false,
-                filterButton: false
-            });
-            var html = getChannelsHtml(result.Items);
-            var elem = context.querySelector('#items');
-            elem.innerHTML = html;
-            imageLoader.lazyChildren(elem);
-            var i;
-            var length;
-            var elems;
-
-            for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) {
-                elems[i].addEventListener('click', onNextPageClick);
-            }
-
-            for (elems = context.querySelectorAll('.btnPreviousPage'), i = 0, length = elems.length; i < length; i++) {
-                elems[i].addEventListener('click', onPreviousPageClick);
             }
+            reloadItems(context);
         }
 
-        function showFilterMenu(context) {
+        const query = getQuery();
-            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
+        context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({
-                var filterDialog = new filterDialogFactory({
+            startIndex: query.StartIndex,
-                    query: getQuery(),
+            limit: query.Limit,
-                    mode: 'livetvchannels',
+            totalRecordCount: result.TotalRecordCount,
-                    serverId: ApiClient.serverId()
+            showLimit: false,
-                });
+            updatePageSizeSetting: false,
-                events.on(filterDialog, 'filterchange', function () {
+            filterButton: false
-                    reloadItems(context);
-                });
-                filterDialog.show();
-            });
-        }
-
-        function reloadItems(context, save) {
-            loading.show();
-            isLoading = true;
-            var query = getQuery();
-            var apiClient = ApiClient;
-            query.UserId = apiClient.getCurrentUserId();
-            apiClient.getLiveTvChannels(query).then(function (result) {
-                renderChannels(context, result);
-                loading.hide();
-                isLoading = false;
-
-                require(['autoFocuser'], function (autoFocuser) {
-                    autoFocuser.autoFocus(view);
-                });
-            });
-        }
-
-        var pageData;
-        var self = this;
-        var isLoading = false;
-        tabContent.querySelector('.btnFilter').addEventListener('click', function () {
-            showFilterMenu(tabContent);
         });
+        const html = getChannelsHtml(result.Items);
+        const elem = context.querySelector('#items');
+        elem.innerHTML = html;
+        imageLoader.lazyChildren(elem);
+        let i;
+        let length;
+        let elems;
 
-        self.renderTab = function () {
+        for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) {
-            reloadItems(tabContent);
+            elems[i].addEventListener('click', onNextPageClick);
-        };
+        }
+
+        for (elems = context.querySelectorAll('.btnPreviousPage'), i = 0, length = elems.length; i < length; i++) {
+            elems[i].addEventListener('click', onPreviousPageClick);
+        }
+    }
+
+    function showFilterMenu(context) {
+        import(['components/filterdialog/filterdialog']).then(({default: FilterDialog}) => {
+            const filterDialog = new FilterDialog({
+                query: getQuery(),
+                mode: 'livetvchannels',
+                serverId: ApiClient.serverId()
+            });
+            events.on(filterDialog, 'filterchange', function () {
+                reloadItems(context);
+            });
+            filterDialog.show();
+        });
+    }
+
+    function reloadItems(context, save) {
+        loading.show();
+        isLoading = true;
+        const query = getQuery();
+        const apiClient = ApiClient;
+        query.UserId = apiClient.getCurrentUserId();
+        apiClient.getLiveTvChannels(query).then(function (result) {
+            renderChannels(context, result);
+            loading.hide();
+            isLoading = false;
+
+            import('autoFocuser').then(({default: autoFocuser}) => {
+                autoFocuser.autoFocus(view);
+            });
+        });
+    }
+
+    let pageData;
+    const self = this;
+    let isLoading = false;
+    tabContent.querySelector('.btnFilter').addEventListener('click', function () {
+        showFilterMenu(tabContent);
+    });
+
+    self.renderTab = function () {
+        reloadItems(tabContent);
     };
-});
+}

src/controllers/livetv/livetvrecordings.js

@@ -1,111 +1,112 @@
-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';
+import 'scripts/livetvcomponents';
+import 'listViewStyle';
+import 'emby-itemscontainer';
 
-    loading = loading.default || loading;
+function renderRecordings(elem, recordings, cardOptions, scrollX) {
-
+    if (!elem) {
-    function renderRecordings(elem, recordings, cardOptions, scrollX) {
+        return;
-        if (!elem) {
-            return;
-        }
-
-        if (recordings.length) {
-            elem.classList.remove('hide');
-        } else {
-            elem.classList.add('hide');
-        }
-
-        var recordingItems = elem.querySelector('.recordingItems');
-
-        if (scrollX) {
-            recordingItems.classList.add('scrollX');
-            recordingItems.classList.add('hiddenScrollX');
-            recordingItems.classList.remove('vertical-wrap');
-        } else {
-            recordingItems.classList.remove('scrollX');
-            recordingItems.classList.remove('hiddenScrollX');
-            recordingItems.classList.add('vertical-wrap');
-        }
-
-        recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
-            items: recordings,
-            shape: scrollX ? 'autooverflow' : 'auto',
-            defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop',
-            showTitle: true,
-            showParentTitle: true,
-            coverImage: true,
-            cardLayout: false,
-            centerText: true,
-            allowBottomPadding: !scrollX,
-            preferThumb: 'auto',
-            overlayText: false
-        }, cardOptions || {}));
-        imageLoader.lazyChildren(recordingItems);
     }
 
-    function renderLatestRecordings(context, promise) {
+    if (recordings.length) {
-        promise.then(function (result) {
+        elem.classList.remove('hide');
-            renderRecordings(context.querySelector('#latestRecordings'), result.Items, {
+    } else {
-                showYear: true,
+        elem.classList.add('hide');
-                lines: 2
-            }, false);
-            loading.hide();
-        });
     }
 
-    function renderRecordingFolders(context, promise) {
+    const recordingItems = elem.querySelector('.recordingItems');
-        promise.then(function (result) {
+
-            renderRecordings(context.querySelector('#recordingFolders'), result.Items, {
+    if (scrollX) {
-                showYear: false,
+        recordingItems.classList.add('scrollX');
-                showParentTitle: false
+        recordingItems.classList.add('hiddenScrollX');
-            }, false);
+        recordingItems.classList.remove('vertical-wrap');
-        });
+    } else {
+        recordingItems.classList.remove('scrollX');
+        recordingItems.classList.remove('hiddenScrollX');
+        recordingItems.classList.add('vertical-wrap');
     }
 
-    function onMoreClick(e) {
+    recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
-        var type = this.getAttribute('data-type');
+        items: recordings,
-        var serverId = ApiClient.serverId();
+        shape: scrollX ? 'autooverflow' : 'auto',
+        defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop',
+        showTitle: true,
+        showParentTitle: true,
+        coverImage: true,
+        cardLayout: false,
+        centerText: true,
+        allowBottomPadding: !scrollX,
+        preferThumb: 'auto',
+        overlayText: false
+    }, cardOptions || {}));
+    imageLoader.lazyChildren(recordingItems);
+}
 
-        switch (type) {
+function renderLatestRecordings(context, promise) {
-            case 'latest':
+    promise.then(function (result) {
-                Dashboard.navigate('list.html?type=Recordings&serverId=' + serverId);
+        renderRecordings(context.querySelector('#latestRecordings'), result.Items, {
-        }
+            showYear: true,
+            lines: 2
+        }, false);
+        loading.hide();
+    });
+}
+
+function renderRecordingFolders(context, promise) {
+    promise.then(function (result) {
+        renderRecordings(context.querySelector('#recordingFolders'), result.Items, {
+            showYear: false,
+            showParentTitle: false
+        }, false);
+    });
+}
+
+function onMoreClick(e) {
+    const type = this.getAttribute('data-type');
+    const serverId = ApiClient.serverId();
+
+    switch (type) {
+        case 'latest':
+            Dashboard.navigate('list.html?type=Recordings&serverId=' + serverId);
+    }
+}
+
+export default function (view, params, tabContent) {
+    function enableFullRender() {
+        return new Date().getTime() - lastFullRender > 300000;
     }
 
-    return function (view, params, tabContent) {
+    let foldersPromise;
-        function enableFullRender() {
+    let latestPromise;
-            return new Date().getTime() - lastFullRender > 300000;
+    const self = this;
+    let lastFullRender = 0;
+    const moreButtons = tabContent.querySelectorAll('.more');
+
+    for (let i = 0, length = moreButtons.length; i < length; i++) {
+        moreButtons[i].addEventListener('click', onMoreClick);
+    }
+
+    self.preRender = function () {
+        if (enableFullRender()) {
+            latestPromise = ApiClient.getLiveTvRecordings({
+                UserId: Dashboard.getCurrentUserId(),
+                Limit: 12,
+                Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
+                EnableTotalRecordCount: false,
+                EnableImageTypes: 'Primary,Thumb,Backdrop'
+            });
+            foldersPromise = ApiClient.getRecordingFolders(Dashboard.getCurrentUserId());
         }
-
-        var foldersPromise;
-        var latestPromise;
-        var self = this;
-        var lastFullRender = 0;
-        var moreButtons = tabContent.querySelectorAll('.more');
-
-        for (var i = 0, length = moreButtons.length; i < length; i++) {
-            moreButtons[i].addEventListener('click', onMoreClick);
-        }
-
-        self.preRender = function () {
-            if (enableFullRender()) {
-                latestPromise = ApiClient.getLiveTvRecordings({
-                    UserId: Dashboard.getCurrentUserId(),
-                    Limit: 12,
-                    Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
-                    EnableTotalRecordCount: false,
-                    EnableImageTypes: 'Primary,Thumb,Backdrop'
-                });
-                foldersPromise = ApiClient.getRecordingFolders(Dashboard.getCurrentUserId());
-            }
-        };
-
-        self.renderTab = function () {
-            if (enableFullRender()) {
-                loading.show();
-                renderLatestRecordings(tabContent, latestPromise);
-                renderRecordingFolders(tabContent, foldersPromise);
-                lastFullRender = new Date().getTime();
-            }
-        };
     };
-});
+
+    self.renderTab = function () {
+        if (enableFullRender()) {
+            loading.show();
+            renderLatestRecordings(tabContent, latestPromise);
+            renderRecordingFolders(tabContent, foldersPromise);
+            lastFullRender = new Date().getTime();
+        }
+    };
+}

src/controllers/livetv/livetvschedule.js

@@ -1,122 +1,124 @@
-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';
+import loading from 'loading';
+import 'scripts/livetvcomponents';
+import 'emby-button';
+import 'emby-itemscontainer';
 
-    loading = loading.default || loading;
+function enableScrollX() {
+    return !layoutManager.desktop;
+}
 
-    function enableScrollX() {
+function renderRecordings(elem, recordings, cardOptions) {
-        return !layoutManager.desktop;
+    if (recordings.length) {
+        elem.classList.remove('hide');
+    } else {
+        elem.classList.add('hide');
     }
 
-    function renderRecordings(elem, recordings, cardOptions) {
+    const recordingItems = elem.querySelector('.recordingItems');
-        if (recordings.length) {
+
+    if (enableScrollX()) {
+        recordingItems.classList.add('scrollX');
+
+        if (layoutManager.tv) {
+            recordingItems.classList.add('smoothScrollX');
+        }
+
+        recordingItems.classList.add('hiddenScrollX');
+        recordingItems.classList.remove('vertical-wrap');
+    } else {
+        recordingItems.classList.remove('scrollX');
+        recordingItems.classList.remove('smoothScrollX');
+        recordingItems.classList.remove('hiddenScrollX');
+        recordingItems.classList.add('vertical-wrap');
+    }
+
+    recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
+        items: recordings,
+        shape: enableScrollX() ? 'autooverflow' : 'auto',
+        showTitle: true,
+        showParentTitle: true,
+        coverImage: true,
+        cardLayout: false,
+        centerText: true,
+        allowBottomPadding: !enableScrollX(),
+        preferThumb: 'auto'
+    }, cardOptions || {}));
+    imageLoader.lazyChildren(recordingItems);
+}
+
+function getBackdropShape() {
+    return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+}
+
+function renderActiveRecordings(context, promise) {
+    promise.then(function (result) {
+        renderRecordings(context.querySelector('#activeRecordings'), result.Items, {
+            shape: enableScrollX() ? 'autooverflow' : 'auto',
+            defaultShape: getBackdropShape(),
+            showParentTitle: false,
+            showParentTitleOrTitle: true,
+            showTitle: false,
+            showAirTime: true,
+            showAirEndTime: true,
+            showChannelName: true,
+            coverImage: true,
+            overlayText: false,
+            overlayMoreButton: true
+        });
+    });
+}
+
+function renderTimers(context, timers, options) {
+    LiveTvHelpers.getTimersHtml(timers, options).then(function (html) {
+        const elem = context;
+
+        if (html) {
             elem.classList.remove('hide');
         } else {
             elem.classList.add('hide');
         }
 
-        var recordingItems = elem.querySelector('.recordingItems');
+        elem.querySelector('.recordingItems').innerHTML = html;
+        imageLoader.lazyChildren(elem);
+    });
+}
 
-        if (enableScrollX()) {
+function renderUpcomingRecordings(context, promise) {
-            recordingItems.classList.add('scrollX');
+    promise.then(function (result) {
+        renderTimers(context.querySelector('#upcomingRecordings'), result.Items);
+        loading.hide();
+    });
+}
 
-            if (layoutManager.tv) {
+export default function (view, params, tabContent) {
-                recordingItems.classList.add('smoothScrollX');
+    let activeRecordingsPromise;
-            }
+    let upcomingRecordingsPromise;
+    const self = this;
+    tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
+        self.preRender();
+        self.renderTab();
+    });
 
-            recordingItems.classList.add('hiddenScrollX');
+    self.preRender = function () {
-            recordingItems.classList.remove('vertical-wrap');
+        activeRecordingsPromise = ApiClient.getLiveTvRecordings({
-        } else {
+            UserId: Dashboard.getCurrentUserId(),
-            recordingItems.classList.remove('scrollX');
+            IsInProgress: true,
-            recordingItems.classList.remove('smoothScrollX');
+            Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
-            recordingItems.classList.remove('hiddenScrollX');
+            EnableTotalRecordCount: false,
-            recordingItems.classList.add('vertical-wrap');
+            EnableImageTypes: 'Primary,Thumb,Backdrop'
-        }
-
-        recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
-            items: recordings,
-            shape: enableScrollX() ? 'autooverflow' : 'auto',
-            showTitle: true,
-            showParentTitle: true,
-            coverImage: true,
-            cardLayout: false,
-            centerText: true,
-            allowBottomPadding: !enableScrollX(),
-            preferThumb: 'auto'
-        }, cardOptions || {}));
-        imageLoader.lazyChildren(recordingItems);
-    }
-
-    function getBackdropShape() {
-        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
-    }
-
-    function renderActiveRecordings(context, promise) {
-        promise.then(function (result) {
-            renderRecordings(context.querySelector('#activeRecordings'), result.Items, {
-                shape: enableScrollX() ? 'autooverflow' : 'auto',
-                defaultShape: getBackdropShape(),
-                showParentTitle: false,
-                showParentTitleOrTitle: true,
-                showTitle: false,
-                showAirTime: true,
-                showAirEndTime: true,
-                showChannelName: true,
-                coverImage: true,
-                overlayText: false,
-                overlayMoreButton: true
-            });
         });
-    }
+        upcomingRecordingsPromise = ApiClient.getLiveTvTimers({
-
+            IsActive: false,
-    function renderTimers(context, timers, options) {
+            IsScheduled: true
-        LiveTvHelpers.getTimersHtml(timers, options).then(function (html) {
-            var elem = context;
-
-            if (html) {
-                elem.classList.remove('hide');
-            } else {
-                elem.classList.add('hide');
-            }
-
-            elem.querySelector('.recordingItems').innerHTML = html;
-            imageLoader.lazyChildren(elem);
         });
-    }
-
-    function renderUpcomingRecordings(context, promise) {
-        promise.then(function (result) {
-            renderTimers(context.querySelector('#upcomingRecordings'), result.Items);
-            loading.hide();
-        });
-    }
-
-    return function (view, params, tabContent) {
-        var activeRecordingsPromise;
-        var upcomingRecordingsPromise;
-        var self = this;
-        tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
-            self.preRender();
-            self.renderTab();
-        });
-
-        self.preRender = function () {
-            activeRecordingsPromise = ApiClient.getLiveTvRecordings({
-                UserId: Dashboard.getCurrentUserId(),
-                IsInProgress: true,
-                Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
-                EnableTotalRecordCount: false,
-                EnableImageTypes: 'Primary,Thumb,Backdrop'
-            });
-            upcomingRecordingsPromise = ApiClient.getLiveTvTimers({
-                IsActive: false,
-                IsScheduled: true
-            });
-        };
-
-        self.renderTab = function () {
-            loading.show();
-            renderActiveRecordings(tabContent, activeRecordingsPromise);
-            renderUpcomingRecordings(tabContent, upcomingRecordingsPromise);
-        };
     };
-});
+
+    self.renderTab = function () {
+        loading.show();
+        renderActiveRecordings(tabContent, activeRecordingsPromise);
+        renderUpcomingRecordings(tabContent, upcomingRecordingsPromise);
+    };
+}

src/controllers/livetv/livetvseriestimers.js

@@ -1,52 +1,52 @@
-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';
+import 'paper-icon-button-light';
+import 'emby-button';
 
-    loading = loading.default || loading;
+function renderTimers(context, timers) {
+    const html = cardBuilder.getCardsHtml({
+        items: timers,
+        shape: 'auto',
+        defaultShape: 'portrait',
+        showTitle: true,
+        cardLayout: false,
+        preferThumb: 'auto',
+        coverImage: true,
+        overlayText: false,
+        showSeriesTimerTime: true,
+        showSeriesTimerChannel: true,
+        centerText: true,
+        overlayMoreButton: true,
+        lines: 3
+    });
+    const elem = context.querySelector('#items');
+    elem.innerHTML = html;
+    imageLoader.lazyChildren(elem);
+    loading.hide();
+}
 
-    function renderTimers(context, timers) {
+function reload(context, promise) {
-        var html = '';
+    loading.show();
-        html += cardBuilder.getCardsHtml({
+    promise.then(function (result) {
-            items: timers,
+        renderTimers(context, result.Items);
-            shape: 'auto',
+    });
-            defaultShape: 'portrait',
+}
-            showTitle: true,
-            cardLayout: false,
-            preferThumb: 'auto',
-            coverImage: true,
-            overlayText: false,
-            showSeriesTimerTime: true,
-            showSeriesTimerChannel: true,
-            centerText: true,
-            overlayMoreButton: true,
-            lines: 3
-        });
-        var elem = context.querySelector('#items');
-        elem.innerHTML = html;
-        imageLoader.lazyChildren(elem);
-        loading.hide();
-    }
 
-    function reload(context, promise) {
+const query = {
-        loading.show();
+    SortBy: 'SortName',
-        promise.then(function (result) {
+    SortOrder: 'Ascending'
-            renderTimers(context, result.Items);
+};
-        });
-    }
 
-    var query = {
+export default function (view, params, tabContent) {
-        SortBy: 'SortName',
+    let timersPromise;
-        SortOrder: 'Ascending'
+    const self = this;
+
+    self.preRender = function () {
+        timersPromise = ApiClient.getLiveTvSeriesTimers(query);
     };
-    return function (view, params, tabContent) {
-        var timersPromise;
-        var self = this;
 
-        self.preRender = function () {
+    self.renderTab = function () {
-            timersPromise = ApiClient.getLiveTvSeriesTimers(query);
+        reload(tabContent, timersPromise);
-        };
-
-        self.renderTab = function () {
-            reload(tabContent, timersPromise);
-        };
     };
-});
+}

src/controllers/livetv/livetvsuggested.js

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

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,7 +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';
 
-    playbackManager = playbackManager.default || playbackManager;
+/* eslint-disable indent */
 
     function enableScrollX() {
         return !layoutManager.desktop;
@@ -16,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',
@@ -26,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(),
@@ -45,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',
@@ -67,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,
@@ -88,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':
@@ -113,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">';
@@ -141,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,
@@ -157,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);
 
@@ -169,7 +182,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function autoFocus(page) {
-        require(['autoFocuser'], function (autoFocuser) {
+        import('autoFocuser').then(({default: autoFocuser}) => {
             autoFocuser.autoFocus(page);
         });
     }
@@ -195,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);
@@ -224,9 +236,6 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             name: globalize.translate('TabCollections')
         }, {
             name: globalize.translate('TabGenres')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -249,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);
         }
 
@@ -267,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',
@@ -335,7 +342,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
 
                 callback(controller);
             });
-        }
+        };
 
         function preLoadTab(page, index) {
             getTabController(page, index, function (controller) {
@@ -347,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) {
@@ -370,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')) {
@@ -405,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

@@ -137,8 +137,7 @@
         }
 
         @media screen
-            and (min-device-width: 992px)
+            and (min-device-width: 992px) {
-            and (-webkit-min-device-pixel-ratio: 1) {
             .splashLogo {
                 background-image: url(assets/img/banner-light.png);
             }

src/libraries/navdrawer/navdrawer.js

@@ -1,354 +1,357 @@
-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.
+ */
 
-    browser = browser.default || browser;
+import browser from 'browser';
+import dom from 'dom';
+import 'css!./navdrawer';
+import 'scrollStyles';
 
-    return function (options) {
+export default function (options) {
-        function getTouches(e) {
+    function getTouches(e) {
-            return e.changedTouches || e.targetTouches || e.touches;
+        return e.changedTouches || e.targetTouches || e.touches;
+    }
+
+    function onMenuTouchStart(e) {
+        options.target.classList.remove('transition');
+        var touches = getTouches(e);
+        var touch = touches[0] || {};
+        menuTouchStartX = touch.clientX;
+        menuTouchStartY = touch.clientY;
+        menuTouchStartTime = new Date().getTime();
+    }
+
+    function setVelocity(deltaX) {
+        var time = new Date().getTime() - (menuTouchStartTime || 0);
+        velocity = Math.abs(deltaX) / time;
+    }
+
+    function onMenuTouchMove(e) {
+        var isOpen = self.visible;
+        var touches = getTouches(e);
+        var touch = touches[0] || {};
+        var endX = touch.clientX || 0;
+        var endY = touch.clientY || 0;
+        var deltaX = endX - (menuTouchStartX || 0);
+        var deltaY = endY - (menuTouchStartY || 0);
+        setVelocity(deltaX);
+
+        if (isOpen && dragMode !== 1 && deltaX > 0) {
+            dragMode = 2;
         }
 
-        function onMenuTouchStart(e) {
+        if (dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
-            options.target.classList.remove("transition");
+            dragMode = 1;
-            var touches = getTouches(e);
+            scrollContainer.addEventListener('scroll', disableEvent);
-            var touch = touches[0] || {};
+            self.showMask();
-            menuTouchStartX = touch.clientX;
+        } else if (dragMode === 0 && Math.abs(deltaY) >= 5) {
-            menuTouchStartY = touch.clientY;
+            dragMode = 2;
-            menuTouchStartTime = new Date().getTime();
         }
 
-        function setVelocity(deltaX) {
+        if (dragMode === 1) {
-            var time = new Date().getTime() - (menuTouchStartTime || 0);
+            newPos = currentPos + deltaX;
-            velocity = Math.abs(deltaX) / time;
+            self.changeMenuPos();
         }
+    }
 
-        function onMenuTouchMove(e) {
+    function onMenuTouchEnd(e) {
-            var isOpen = self.visible;
+        options.target.classList.add('transition');
-            var touches = getTouches(e);
+        scrollContainer.removeEventListener('scroll', disableEvent);
-            var touch = touches[0] || {};
+        dragMode = 0;
-            var endX = touch.clientX || 0;
+        var touches = getTouches(e);
-            var endY = touch.clientY || 0;
+        var touch = touches[0] || {};
-            var deltaX = endX - (menuTouchStartX || 0);
+        var endX = touch.clientX || 0;
-            var deltaY = endY - (menuTouchStartY || 0);
+        var endY = touch.clientY || 0;
-            setVelocity(deltaX);
+        var deltaX = endX - (menuTouchStartX || 0);
+        var deltaY = endY - (menuTouchStartY || 0);
+        currentPos = deltaX;
+        self.checkMenuState(deltaX, deltaY);
+    }
 
-            if (isOpen && 1 !== dragMode && deltaX > 0) {
+    function onEdgeTouchStart(e) {
-                dragMode = 2;
+        if (isPeeking) {
-            }
+            onMenuTouchMove(e);
+        } else {
+            if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
+                isPeeking = true;
 
-            if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
+                if (e.type === 'touchstart') {
-                dragMode = 1;
+                    dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
-                scrollContainer.addEventListener("scroll", disableEvent);
+                    dom.addEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
-                self.showMask();
-            } else if (0 === dragMode && Math.abs(deltaY) >= 5) {
-                dragMode = 2;
-            }
-
-            if (1 === dragMode) {
-                newPos = currentPos + deltaX;
-                self.changeMenuPos();
-            }
-        }
-
-        function onMenuTouchEnd(e) {
-            options.target.classList.add("transition");
-            scrollContainer.removeEventListener("scroll", disableEvent);
-            dragMode = 0;
-            var touches = getTouches(e);
-            var touch = touches[0] || {};
-            var endX = touch.clientX || 0;
-            var endY = touch.clientY || 0;
-            var deltaX = endX - (menuTouchStartX || 0);
-            var deltaY = endY - (menuTouchStartY || 0);
-            currentPos = deltaX;
-            self.checkMenuState(deltaX, deltaY);
-        }
-
-        function onEdgeTouchStart(e) {
-            if (isPeeking) {
-                onMenuTouchMove(e);
-            } else {
-                if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
-                    isPeeking = true;
-
-                    if (e.type === "touchstart") {
-                        dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
-                        dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
-                    }
-
-                    onMenuTouchStart(e);
                 }
+
+                onMenuTouchStart(e);
             }
         }
+    }
 
-        function onEdgeTouchMove(e) {
+    function onEdgeTouchMove(e) {
-            e.preventDefault();
+        e.preventDefault();
-            e.stopPropagation();
+        e.stopPropagation();
-            onEdgeTouchStart(e);
+        onEdgeTouchStart(e);
+    }
+
+    function onEdgeTouchEnd(e) {
+        if (isPeeking) {
+            isPeeking = false;
+            dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
+            onMenuTouchEnd(e);
         }
+    }
 
-        function onEdgeTouchEnd(e) {
+    function disableEvent(e) {
-            if (isPeeking) {
+        e.preventDefault();
-                isPeeking = false;
+        e.stopPropagation();
-                dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
+    }
-                onMenuTouchEnd(e);
-            }
-        }
 
-        function disableEvent(e) {
+    function onBackgroundTouchStart(e) {
-            e.preventDefault();
+        var touches = getTouches(e);
-            e.stopPropagation();
+        var touch = touches[0] || {};
-        }
+        backgroundTouchStartX = touch.clientX;
+        backgroundTouchStartTime = new Date().getTime();
+    }
 
-        function onBackgroundTouchStart(e) {
+    function onBackgroundTouchMove(e) {
-            var touches = getTouches(e);
+        var touches = getTouches(e);
-            var touch = touches[0] || {};
+        var touch = touches[0] || {};
-            backgroundTouchStartX = touch.clientX;
+        var endX = touch.clientX || 0;
-            backgroundTouchStartTime = new Date().getTime();
-        }
 
-        function onBackgroundTouchMove(e) {
+        if (endX <= options.width && self.isVisible) {
-            var touches = getTouches(e);
+            countStart++;
-            var touch = touches[0] || {};
-            var endX = touch.clientX || 0;
-
-            if (endX <= options.width && self.isVisible) {
-                countStart++;
-                var deltaX = endX - (backgroundTouchStartX || 0);
-
-                if (countStart == 1) {
-                    startPoint = deltaX;
-                }
-                if (deltaX < 0 && dragMode !== 2) {
-                    dragMode = 1;
-                    newPos = deltaX - startPoint + options.width;
-                    self.changeMenuPos();
-                    var time = new Date().getTime() - (backgroundTouchStartTime || 0);
-                    velocity = Math.abs(deltaX) / time;
-                }
-            }
-
-            e.preventDefault();
-            e.stopPropagation();
-        }
-
-        function onBackgroundTouchEnd(e) {
-            var touches = getTouches(e);
-            var touch = touches[0] || {};
-            var endX = touch.clientX || 0;
             var deltaX = endX - (backgroundTouchStartX || 0);
-            self.checkMenuState(deltaX);
-            countStart = 0;
-        }
 
-        function onMaskTransitionEnd() {
+            if (countStart == 1) {
-            var classList = mask.classList;
+                startPoint = deltaX;
-
+            }
-            if (!classList.contains("backdrop")) {
+            if (deltaX < 0 && dragMode !== 2) {
-                classList.add("hide");
+                dragMode = 1;
+                newPos = deltaX - startPoint + options.width;
+                self.changeMenuPos();
+                var time = new Date().getTime() - (backgroundTouchStartTime || 0);
+                velocity = Math.abs(deltaX) / time;
             }
         }
 
-        var self;
+        e.preventDefault();
-        var defaults;
+        e.stopPropagation();
-        var mask;
+    }
-        var newPos = 0;
-        var currentPos = 0;
-        var startPoint = 0;
-        var countStart = 0;
-        var velocity = 0;
-        options.target.classList.add("transition");
-        var dragMode = 0;
-        var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
-        scrollContainer.classList.add("scrollY");
 
-        var TouchMenuLA = function () {
+    function onBackgroundTouchEnd(e) {
-            self = this;
+        var touches = getTouches(e);
-            defaults = {
+        var touch = touches[0] || {};
-                width: 260,
+        var endX = touch.clientX || 0;
-                handleSize: 10,
+        var deltaX = endX - (backgroundTouchStartX || 0);
-                disableMask: false,
+        self.checkMenuState(deltaX);
-                maxMaskOpacity: 0.5
+        countStart = 0;
-            };
+    }
-            this.isVisible = false;
+
-            this.initialize();
+    function onMaskTransitionEnd() {
+        var classList = mask.classList;
+
+        if (!classList.contains('backdrop')) {
+            classList.add('hide');
+        }
+    }
+
+    var self;
+    var defaults;
+    var mask;
+    var newPos = 0;
+    var currentPos = 0;
+    var startPoint = 0;
+    var countStart = 0;
+    var velocity = 0;
+    options.target.classList.add('transition');
+    var dragMode = 0;
+    var scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer');
+    scrollContainer.classList.add('scrollY');
+
+    var TouchMenuLA = function () {
+        self = this;
+        defaults = {
+            width: 260,
+            handleSize: 10,
+            disableMask: false,
+            maxMaskOpacity: 0.5
         };
+        this.isVisible = false;
+        this.initialize();
+    };
 
-        TouchMenuLA.prototype.initElements = function () {
+    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) {
+        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);
+            document.body.appendChild(mask);
-                dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
+            dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
-                    passive: true
+                passive: true
-                });
-            }
-        };
-
-        var menuTouchStartX;
-        var menuTouchStartY;
-        var menuTouchStartTime;
-        var edgeContainer = document.querySelector(".mainDrawerHandle");
-        var isPeeking = false;
-
-        TouchMenuLA.prototype.animateToPosition = function (pos) {
-            requestAnimationFrame(function () {
-                options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none";
             });
-        };
+        }
+    };
 
-        TouchMenuLA.prototype.changeMenuPos = function () {
+    var menuTouchStartX;
-            if (newPos <= options.width) {
+    var menuTouchStartY;
-                this.animateToPosition(newPos);
+    var menuTouchStartTime;
-            }
+    var edgeContainer = document.querySelector('.mainDrawerHandle');
-        };
+    var isPeeking = false;
 
-        TouchMenuLA.prototype.clickMaskClose = function () {
+    TouchMenuLA.prototype.animateToPosition = function (pos) {
-            mask.addEventListener("click", function () {
+        requestAnimationFrame(function () {
+            options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none';
+        });
+    };
+
+    TouchMenuLA.prototype.changeMenuPos = function () {
+        if (newPos <= options.width) {
+            this.animateToPosition(newPos);
+        }
+    };
+
+    TouchMenuLA.prototype.clickMaskClose = function () {
+        mask.addEventListener('click', function () {
+            self.close();
+        });
+    };
+
+    TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
+        if (velocity >= 0.4) {
+            if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
+                self.open();
+            } else {
                 self.close();
-            });
+            }
-        };
+        } else {
-
+            if (newPos >= 100) {
-        TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
+                self.open();
-            if (velocity >= 0.4) {
+            } else {
-                if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
+                if (newPos) {
-                    self.open();
-                } else {
                     self.close();
                 }
-            } else {
-                if (newPos >= 100) {
-                    self.open();
-                } else {
-                    if (newPos) {
-                        self.close();
-                    }
-                }
             }
-        };
+        }
-
-        TouchMenuLA.prototype.open = function () {
-            this.animateToPosition(options.width);
-            currentPos = options.width;
-            this.isVisible = true;
-            options.target.classList.add("drawer-open");
-            self.showMask();
-            self.invoke(options.onChange);
-        };
-
-        TouchMenuLA.prototype.close = function () {
-            this.animateToPosition(0);
-            currentPos = 0;
-            self.isVisible = false;
-            options.target.classList.remove("drawer-open");
-            self.hideMask();
-            self.invoke(options.onChange);
-        };
-
-        TouchMenuLA.prototype.toggle = function () {
-            if (self.isVisible) {
-                self.close();
-            } else {
-                self.open();
-            }
-        };
-
-        var backgroundTouchStartX;
-        var backgroundTouchStartTime;
-
-        TouchMenuLA.prototype.showMask = function () {
-            mask.classList.remove("hide");
-            mask.classList.add("backdrop");
-        };
-
-        TouchMenuLA.prototype.hideMask = function () {
-            mask.classList.add("hide");
-            mask.classList.remove("backdrop");
-        };
-
-        TouchMenuLA.prototype.invoke = function (fn) {
-            if (fn) {
-                fn.apply(self);
-            }
-        };
-
-        var _edgeSwipeEnabled;
-
-        TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
-            if (!options.disableEdgeSwipe) {
-                if (browser.touch) {
-                    if (enabled) {
-                        if (!_edgeSwipeEnabled) {
-                            _edgeSwipeEnabled = true;
-                            dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
-                                passive: true
-                            });
-                            dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
-                                passive: true
-                            });
-                            dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
-                                passive: true
-                            });
-                        }
-                    } else {
-                        if (_edgeSwipeEnabled) {
-                            _edgeSwipeEnabled = false;
-                            dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
-                                passive: true
-                            });
-                            dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
-                                passive: true
-                            });
-                            dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
-                                passive: true
-                            });
-                        }
-                    }
-                }
-            }
-        };
-
-        TouchMenuLA.prototype.initialize = function () {
-            options = Object.assign(defaults, options || {});
-
-            if (browser.edge) {
-                options.disableEdgeSwipe = true;
-            }
-
-            self.initElements();
-
-            if (browser.touch) {
-                dom.addEventListener(options.target, "touchstart", onMenuTouchStart, {
-                    passive: true
-                });
-                dom.addEventListener(options.target, "touchmove", onMenuTouchMove, {
-                    passive: true
-                });
-                dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
-                    passive: true
-                });
-                dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
-                    passive: true
-                });
-                dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
-                    passive: true
-                });
-                dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {});
-                dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
-                    passive: true
-                });
-                dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
-                    passive: true
-                });
-            }
-
-            self.clickMaskClose();
-        };
-
-        return new TouchMenuLA();
     };
-});
+
+    TouchMenuLA.prototype.open = function () {
+        this.animateToPosition(options.width);
+        currentPos = options.width;
+        this.isVisible = true;
+        options.target.classList.add('drawer-open');
+        self.showMask();
+        self.invoke(options.onChange);
+    };
+
+    TouchMenuLA.prototype.close = function () {
+        this.animateToPosition(0);
+        currentPos = 0;
+        self.isVisible = false;
+        options.target.classList.remove('drawer-open');
+        self.hideMask();
+        self.invoke(options.onChange);
+    };
+
+    TouchMenuLA.prototype.toggle = function () {
+        if (self.isVisible) {
+            self.close();
+        } else {
+            self.open();
+        }
+    };
+
+    var backgroundTouchStartX;
+    var backgroundTouchStartTime;
+
+    TouchMenuLA.prototype.showMask = function () {
+        mask.classList.remove('hide');
+        mask.classList.add('backdrop');
+    };
+
+    TouchMenuLA.prototype.hideMask = function () {
+        mask.classList.add('hide');
+        mask.classList.remove('backdrop');
+    };
+
+    TouchMenuLA.prototype.invoke = function (fn) {
+        if (fn) {
+            fn.apply(self);
+        }
+    };
+
+    var _edgeSwipeEnabled;
+
+    TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
+        if (!options.disableEdgeSwipe) {
+            if (browser.touch) {
+                if (enabled) {
+                    if (!_edgeSwipeEnabled) {
+                        _edgeSwipeEnabled = true;
+                        dom.addEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
+                            passive: true
+                        });
+                        dom.addEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
+                            passive: true
+                        });
+                        dom.addEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
+                            passive: true
+                        });
+                    }
+                } else {
+                    if (_edgeSwipeEnabled) {
+                        _edgeSwipeEnabled = false;
+                        dom.removeEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
+                            passive: true
+                        });
+                        dom.removeEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
+                            passive: true
+                        });
+                        dom.removeEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
+                            passive: true
+                        });
+                    }
+                }
+            }
+        }
+    };
+
+    TouchMenuLA.prototype.initialize = function () {
+        options = Object.assign(defaults, options || {});
+
+        if (browser.edge) {
+            options.disableEdgeSwipe = true;
+        }
+
+        self.initElements();
+
+        if (browser.touch) {
+            dom.addEventListener(options.target, 'touchstart', onMenuTouchStart, {
+                passive: true
+            });
+            dom.addEventListener(options.target, 'touchmove', onMenuTouchMove, {
+                passive: true
+            });
+            dom.addEventListener(options.target, 'touchend', onMenuTouchEnd, {
+                passive: true
+            });
+            dom.addEventListener(options.target, 'touchcancel', onMenuTouchEnd, {
+                passive: true
+            });
+            dom.addEventListener(mask, 'touchstart', onBackgroundTouchStart, {
+                passive: true
+            });
+            dom.addEventListener(mask, 'touchmove', onBackgroundTouchMove, {});
+            dom.addEventListener(mask, 'touchend', onBackgroundTouchEnd, {
+                passive: true
+            });
+            dom.addEventListener(mask, 'touchcancel', onBackgroundTouchEnd, {
+                passive: true
+            });
+        }
+
+        self.clickMaskClose();
+    };
+
+    return new TouchMenuLA();
+}

src/libraries/screensavermanager.js

@@ -1,134 +1,128 @@
-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';
 
-    playbackManager = playbackManager.default || playbackManager;
+function getMinIdleTime() {
+    // Returns the minimum amount of idle time required before the screen saver can be displayed
+    //time units used Millisecond
+    return 180000;
+}
 
-    function getMinIdleTime() {
+let lastFunctionalEvent = 0;
-        // Returns the minimum amount of idle time required before the screen saver can be displayed
+
-        //time units used Millisecond
+function getFunctionalEventIdleTime() {
-        return 180000;
+    return new Date().getTime() - lastFunctionalEvent;
+}
+
+events.on(playbackManager, 'playbackstop', function (e, stopInfo) {
+    const state = stopInfo.state;
+    if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
+        lastFunctionalEvent = new Date().getTime();
     }
-
-    var lastFunctionalEvent = 0;
-
-    function getFunctionalEventIdleTime() {
-        return new Date().getTime() - lastFunctionalEvent;
-    }
-
-    events.on(playbackManager, "playbackstop", function (e, stopInfo) {
-        var state = stopInfo.state;
-        if (state.NowPlayingItem && state.NowPlayingItem.MediaType == "Video") {
-            lastFunctionalEvent = new Date().getTime();
-        }
-    });
-
-    function getScreensaverPlugin(isLoggedIn) {
-
-        var option;
-        try {
-            option = userSettings.get("screensaver", false);
-        } catch (err) {
-            option = isLoggedIn ? "backdropscreensaver" : "logoscreensaver";
-        }
-
-        var plugins = pluginManager.ofType("screensaver");
-
-        for (var i = 0, length = plugins.length; i < length; i++) {
-            var plugin = plugins[i];
-
-            if (plugin.id === option) {
-                return plugin;
-            }
-        }
-
-        return null;
-    }
-
-    function ScreenSaverManager() {
-
-        var self = this;
-        var activeScreenSaver;
-
-        function showScreenSaver(screensaver) {
-
-            if (activeScreenSaver) {
-                throw new Error("An existing screensaver is already active.");
-            }
-
-            console.debug("Showing screensaver " + screensaver.name);
-
-            screensaver.show();
-            activeScreenSaver = screensaver;
-
-            if (screensaver.hideOnClick !== false) {
-                window.addEventListener("click", hide, true);
-            }
-            if (screensaver.hideOnMouse !== false) {
-                window.addEventListener("mousemove", hide, true);
-            }
-            if (screensaver.hideOnKey !== false) {
-                window.addEventListener("keydown", hide, true);
-            }
-        }
-
-        function hide() {
-            if (activeScreenSaver) {
-                console.debug("Hiding screensaver");
-                activeScreenSaver.hide();
-                activeScreenSaver = null;
-            }
-
-            window.removeEventListener("click", hide, true);
-            window.removeEventListener("mousemove", hide, true);
-            window.removeEventListener("keydown", hide, true);
-        }
-
-        self.isShowing = function () {
-            return activeScreenSaver != null;
-        };
-
-        self.show = function () {
-            var isLoggedIn;
-            var apiClient = connectionManager.currentApiClient();
-
-            if (apiClient && apiClient.isLoggedIn()) {
-                isLoggedIn = true;
-            }
-
-            var screensaver = getScreensaverPlugin(isLoggedIn);
-
-            if (screensaver) {
-                showScreenSaver(screensaver);
-            }
-        };
-
-        self.hide = function () {
-            hide();
-        };
-
-        function onInterval() {
-
-            if (self.isShowing()) {
-                return;
-            }
-
-            if (inputManager.idleTime() < getMinIdleTime()) {
-                return;
-            }
-
-            if (getFunctionalEventIdleTime < getMinIdleTime()) {
-                return;
-            }
-
-            if (playbackManager.isPlayingVideo()) {
-                return;
-            }
-
-            self.show();
-        }
-
-        setInterval(onInterval, 10000);
-    }
-
-    return new ScreenSaverManager();
 });
+
+function getScreensaverPlugin(isLoggedIn) {
+    let option;
+    try {
+        option = userSettings.get('screensaver', false);
+    } catch (err) {
+        option = isLoggedIn ? 'backdropscreensaver' : 'logoscreensaver';
+    }
+
+    const plugins = pluginManager.ofType('screensaver');
+
+    for (const plugin of plugins) {
+        if (plugin.id === option) {
+            return plugin;
+        }
+    }
+
+    return null;
+}
+
+function ScreenSaverManager() {
+    let activeScreenSaver;
+
+    function showScreenSaver(screensaver) {
+        if (activeScreenSaver) {
+            throw new Error('An existing screensaver is already active.');
+        }
+
+        console.debug('Showing screensaver ' + screensaver.name);
+
+        screensaver.show();
+        activeScreenSaver = screensaver;
+
+        if (screensaver.hideOnClick !== false) {
+            window.addEventListener('click', hide, true);
+        }
+        if (screensaver.hideOnMouse !== false) {
+            window.addEventListener('mousemove', hide, true);
+        }
+        if (screensaver.hideOnKey !== false) {
+            window.addEventListener('keydown', hide, true);
+        }
+    }
+
+    function hide() {
+        if (activeScreenSaver) {
+            console.debug('Hiding screensaver');
+            activeScreenSaver.hide();
+            activeScreenSaver = null;
+        }
+
+        window.removeEventListener('click', hide, true);
+        window.removeEventListener('mousemove', hide, true);
+        window.removeEventListener('keydown', hide, true);
+    }
+
+    this.isShowing = () => {
+        return activeScreenSaver != null;
+    };
+
+    this.show = function () {
+        let isLoggedIn;
+        const apiClient = connectionManager.currentApiClient();
+
+        if (apiClient && apiClient.isLoggedIn()) {
+            isLoggedIn = true;
+        }
+
+        const screensaver = getScreensaverPlugin(isLoggedIn);
+
+        if (screensaver) {
+            showScreenSaver(screensaver);
+        }
+    };
+
+    this.hide = function () {
+        hide();
+    };
+
+    const onInterval = () => {
+        if (this.isShowing()) {
+            return;
+        }
+
+        if (inputManager.idleTime() < getMinIdleTime()) {
+            return;
+        }
+
+        if (getFunctionalEventIdleTime < getMinIdleTime()) {
+            return;
+        }
+
+        if (playbackManager.isPlayingVideo()) {
+            return;
+        }
+
+        this.show();
+    };
+
+    setInterval(onInterval, 10000);
+}
+
+export default new ScreenSaverManager;