Merge branch 'es6' into migrate-to-ES6-23

package.json

@@ -95,21 +95,31 @@
           "src/components/activitylog.js",
           "src/components/alert.js",
           "src/components/alphaPicker/alphaPicker.js",
+          "src/components/appFooter/appFooter.js",
           "src/components/autoFocuser.js",
+          "src/components/backdrop/backdrop.js",
           "src/components/cardbuilder/cardBuilder.js",
           "src/components/cardbuilder/chaptercardbuilder.js",
           "src/components/cardbuilder/peoplecardbuilder.js",
+          "src/components/channelMapper/channelMapper.js",
+          "src/components/confirm/confirm.js",
+          "src/components/displaySettings/displaySettings.js",
+          "src/components/homeScreenSettings/homeScreenSettings.js",
           "src/components/directorybrowser/directorybrowser.js",
           "src/components/collectionEditor/collectionEditor.js",
           "src/components/dialog/dialog.js",
+          "src/components/directorybrowser/directorybrowser.js",
           "src/components/dialogHelper/dialogHelper.js",
-          "src/components/channelMapper/channelMapper.js",
+          "src/components/homesections/homesections.js",
           "src/components/images/imageLoader.js",
           "src/components/imageUploader/imageUploader.js",
           "src/components/indicators/indicators.js",
+          "src/components/itemContextMenu.js",
           "src/components/itemidentifier/itemidentifier.js",
           "src/components/itemMediaInfo/itemMediaInfo.js",
           "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
+          "src/components/multiSelect/multiSelect.js",
+          "src/components/maintabsmanager.js",
           "src/components/mediaLibraryCreator/mediaLibraryCreator.js",
           "src/components/mediaLibraryEditor/mediaLibraryEditor.js",
           "src/components/listview/listview.js",
@@ -122,6 +132,8 @@
           "src/components/playback/playmethodhelper.js",
           "src/components/playback/remotecontrolautoplay.js",
           "src/components/playback/volumeosd.js",
+          "src/components/prompt/prompt.js",
+          "src/components/playbackSettings/playbackSettings.js",
           "src/components/playlisteditor/playlisteditor.js",
           "src/components/groupedcards.js",
           "src/components/htmlMediaHelper.js",
@@ -141,15 +153,34 @@
           "src/controllers/dashboard/encodingsettings.js",
           "src/controllers/dashboard/logs.js",
           "src/controllers/user/subtitles.js",
+          "src/controllers/dashboard/mediaLibrary.js",
+          "src/controllers/dashboard/networking.js",
+          "src/controllers/dashboard/playback.js",
           "src/controllers/dashboard/plugins/repositories.js",
+          "src/controllers/dashboard/dlna/profile.js",
+          "src/controllers/dashboard/dlna/profiles.js",
+          "src/controllers/dashboard/dlna/settings.js",
+          "src/controllers/dashboard/devices/devices.js",
+          "src/controllers/dashboard/devices/device.js",
+          "src/controllers/dashboard/serveractivity.js",
           "src/elements/emby-tabs/emby-tabs.js",
           "src/elements/emby-scroller/emby-scroller.js",
           "src/elements/emby-radio/emby-radio.js",
+          "src/elements/emby-checkbox/emby-checkbox.js",
+          "src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js",
           "src/elements/emby-progressbar/emby-progressbar.js",
           "src/elements/emby-progressring/emby-progressring.js",
           "src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js",
+          "src/elements/emby-itemscontainer/emby-itemscontainer.js",
+          "src/elements/emby-playstatebutton/emby-playstatebutton.js",
+          "src/elements/emby-programcell/emby-programcell.js",
+          "src/elements/emby-radio/emby-radio.js",
+          "src/elements/emby-ratingbutton/emby-ratingbutton.js",
+          "src/elements/emby-scrollbuttons/emby-scrollbuttons.js",
+          "src/elements/emby-scroller/emby-scroller.js",
+          "src/elements/emby-select/emby-select.js",
           "src/elements/emby-slider/emby-slider.js",
-          "src/elements/emby-checkbox/emby-checkbox.js",
+          "src/elements/emby-tabs/emby-tabs.js",
           "src/elements/emby-textarea/emby-textarea.js",
           "src/elements/emby-toggle/emby-toggle.js",
           "src/plugins/bookPlayer/plugin.js",

src/components/appFooter/appFooter.js

@@ -1,17 +1,18 @@
-define(['browser', 'css!./appFooter'], function (browser) {
+import browser from 'browser';
-    'use strict';
+import 'css!./appFooter';
 
-    function render(options) {
+function render(options) {
-        var elem = document.createElement('div');
+    const elem = document.createElement('div');
-        elem.classList.add('appfooter');
+    elem.classList.add('appfooter');
 
-        document.body.appendChild(elem);
+    document.body.appendChild(elem);
 
-        return elem;
+    return elem;
-    }
+}
 
-    function appFooter(options) {
+class appFooter {
-        var self = this;
+    constructor(options) {
+        const self = this;
 
         self.element = render(options);
         self.add = function (elem) {
@@ -26,12 +27,11 @@ define(['browser', 'css!./appFooter'], function (browser) {
             }
         };
     }
-
+    destroy() {
-    appFooter.prototype.destroy = function () {
         var self = this;
 
         self.element = null;
-    };
+    }
+}
 
-    return appFooter;
+export default new appFooter;
-});

src/components/appRouter.js

@@ -21,7 +21,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
     };
 
     function beginConnectionWizard() {
-        backdrop.clear();
+        backdrop.clearBackdrop();
         loading.show();
         connectionManager.connect({
             enableAutoLogin: appSettings.enableAutoLogin()
@@ -657,7 +657,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
         }
 
         if (level === 'full' || level === 2) {
-            backdrop.clear(true);
+            backdrop.clearBackdrop(true);
             document.documentElement.classList.add('transparentDocument');
             backgroundContainer.classList.add('backgroundContainer-transparent');
             backdropContainer.classList.add('hide');

src/components/backdrop/backdrop.js

@@ -1,5 +1,11 @@
-define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom, userSettings) {
+import browser from 'browser';
-    'use strict';
+import connectionManager from 'connectionManager';
+import playbackManager from 'playbackManager';
+import dom from 'dom';
+import * as userSettings from 'userSettings';
+import 'css!./backdrop';
+
+/* eslint-disable indent */
 
     function enableAnimation(elem) {
         if (browser.slow) {
@@ -22,71 +28,70 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         return true;
     }
 
-    function Backdrop() {
+    class Backdrop {
-    }
+        load(url, parent, existingBackdropImage) {
+            const img = new Image();
+            const self = this;
 
-    Backdrop.prototype.load = function (url, parent, existingBackdropImage) {
+            img.onload = () => {
-        var img = new Image();
+                if (self.isDestroyed) {
-        var self = this;
+                    return;
-
-        img.onload = function () {
-            if (self.isDestroyed) {
-                return;
-            }
-
-            var backdropImage = document.createElement('div');
-            backdropImage.classList.add('backdropImage');
-            backdropImage.classList.add('displayingBackdropImage');
-            backdropImage.style.backgroundImage = "url('" + url + "')";
-            backdropImage.setAttribute('data-url', url);
-
-            backdropImage.classList.add('backdropImageFadeIn');
-            parent.appendChild(backdropImage);
-
-            if (!enableAnimation(backdropImage)) {
-                if (existingBackdropImage && existingBackdropImage.parentNode) {
-                    existingBackdropImage.parentNode.removeChild(existingBackdropImage);
                 }
-                internalBackdrop(true);
-                return;
-            }
 
-            var onAnimationComplete = function () {
+                const backdropImage = document.createElement('div');
-                dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
+                backdropImage.classList.add('backdropImage');
+                backdropImage.classList.add('displayingBackdropImage');
+                backdropImage.style.backgroundImage = `url('${url}')`;
+                backdropImage.setAttribute('data-url', url);
+
+                backdropImage.classList.add('backdropImageFadeIn');
+                parent.appendChild(backdropImage);
+
+                if (!enableAnimation(backdropImage)) {
+                    if (existingBackdropImage && existingBackdropImage.parentNode) {
+                        existingBackdropImage.parentNode.removeChild(existingBackdropImage);
+                    }
+                    internalBackdrop(true);
+                    return;
+                }
+
+                const onAnimationComplete = () => {
+                    dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
+                        once: true
+                    });
+                    if (backdropImage === self.currentAnimatingElement) {
+                        self.currentAnimatingElement = null;
+                    }
+                    if (existingBackdropImage && existingBackdropImage.parentNode) {
+                        existingBackdropImage.parentNode.removeChild(existingBackdropImage);
+                    }
+                };
+
+                dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
                     once: true
                 });
-                if (backdropImage === self.currentAnimatingElement) {
+
-                    self.currentAnimatingElement = null;
+                internalBackdrop(true);
-                }
-                if (existingBackdropImage && existingBackdropImage.parentNode) {
-                    existingBackdropImage.parentNode.removeChild(existingBackdropImage);
-                }
             };
 
-            dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
+            img.src = url;
-                once: true
-            });
-
-            internalBackdrop(true);
-        };
-
-        img.src = url;
-    };
-
-    Backdrop.prototype.cancelAnimation = function () {
-        var elem = this.currentAnimatingElement;
-        if (elem) {
-            elem.classList.remove('backdropImageFadeIn');
-            this.currentAnimatingElement = null;
         }
-    };
 
-    Backdrop.prototype.destroy = function () {
+        cancelAnimation() {
-        this.isDestroyed = true;
+            const elem = this.currentAnimatingElement;
-        this.cancelAnimation();
+            if (elem) {
-    };
+                elem.classList.remove('backdropImageFadeIn');
+                this.currentAnimatingElement = null;
+            }
+        }
 
-    var backdropContainer;
+        destroy() {
+            this.isDestroyed = true;
+            this.cancelAnimation();
+        }
+    }
+
+    let backdropContainer;
     function getBackdropContainer() {
         if (!backdropContainer) {
             backdropContainer = document.querySelector('.backdropContainer');
@@ -101,7 +106,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         return backdropContainer;
     }
 
-    function clearBackdrop(clearAll) {
+    export function clearBackdrop(clearAll) {
         clearRotation();
 
         if (currentLoadingBackdrop) {
@@ -109,7 +114,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
             currentLoadingBackdrop = null;
         }
 
-        var elem = getBackdropContainer();
+        const elem = getBackdropContainer();
         elem.innerHTML = '';
 
         if (clearAll) {
@@ -119,7 +124,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         internalBackdrop(false);
     }
 
-    var backgroundContainer;
+    let backgroundContainer;
     function getBackgroundContainer() {
         if (!backgroundContainer) {
             backgroundContainer = document.querySelector('.backgroundContainer');
@@ -135,31 +140,27 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         }
     }
 
-    var hasInternalBackdrop;
+    let hasInternalBackdrop;
     function internalBackdrop(enabled) {
         hasInternalBackdrop = enabled;
         setBackgroundContainerBackgroundEnabled();
     }
 
-    var hasExternalBackdrop;
+    let hasExternalBackdrop;
-    function externalBackdrop(enabled) {
+    export function externalBackdrop(enabled) {
         hasExternalBackdrop = enabled;
         setBackgroundContainerBackgroundEnabled();
     }
 
-    function getRandom(min, max) {
+    let currentLoadingBackdrop;
-        return Math.floor(Math.random() * (max - min) + min);
-    }
-
-    var currentLoadingBackdrop;
     function setBackdropImage(url) {
         if (currentLoadingBackdrop) {
             currentLoadingBackdrop.destroy();
             currentLoadingBackdrop = null;
         }
 
-        var elem = getBackdropContainer();
+        const elem = getBackdropContainer();
-        var existingBackdropImage = elem.querySelector('.displayingBackdropImage');
+        const existingBackdropImage = elem.querySelector('.displayingBackdropImage');
 
         if (existingBackdropImage && existingBackdropImage.getAttribute('data-url') === url) {
             if (existingBackdropImage.getAttribute('data-url') === url) {
@@ -168,7 +169,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
             existingBackdropImage.classList.remove('displayingBackdropImage');
         }
 
-        var instance = new Backdrop();
+        const instance = new Backdrop();
         instance.load(url, elem, existingBackdropImage);
         currentLoadingBackdrop = instance;
     }
@@ -176,9 +177,9 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
     function getItemImageUrls(item, imageOptions) {
         imageOptions = imageOptions || {};
 
-        var apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = connectionManager.getApiClient(item.ServerId);
         if (item.BackdropImageTags && item.BackdropImageTags.length > 0) {
-            return item.BackdropImageTags.map(function (imgTag, index) {
+            return item.BackdropImageTags.map((imgTag, index) => {
                 return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
                     type: 'Backdrop',
                     tag: imgTag,
@@ -189,7 +190,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         }
 
         if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
-            return item.ParentBackdropImageTags.map(function (imgTag, index) {
+            return item.ParentBackdropImageTags.map((imgTag, index) => {
                 return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, {
                     type: 'Backdrop',
                     tag: imgTag,
@@ -203,13 +204,13 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
     }
 
     function getImageUrls(items, imageOptions) {
-        var list = [];
+        const list = [];
-        var onImg = function (img) {
+        const onImg = img => {
             list.push(img);
         };
 
-        for (var i = 0, length = items.length; i < length; i++) {
+        for (let i = 0, length = items.length; i < length; i++) {
-            var itemImages = getItemImageUrls(items[i], imageOptions);
+            const itemImages = getItemImageUrls(items[i], imageOptions);
             itemImages.forEach(onImg);
         }
 
@@ -229,7 +230,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
 
         // If you don't care about the order of the elements inside
         // the array, you should sort both arrays here.
-        for (var i = 0; i < a.length; ++i) {
+        for (let i = 0; i < a.length; ++i) {
             if (a[i] !== b[i]) {
                 return false;
             }
@@ -242,12 +243,12 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         return userSettings.enableBackdrops();
     }
 
-    var rotationInterval;
+    let rotationInterval;
-    var currentRotatingImages = [];
+    let currentRotatingImages = [];
-    var currentRotationIndex = -1;
+    let currentRotationIndex = -1;
-    function setBackdrops(items, imageOptions, enableImageRotation) {
+    export function setBackdrops(items, imageOptions, enableImageRotation) {
         if (enabled()) {
-            var images = getImageUrls(items, imageOptions);
+            const images = getImageUrls(items, imageOptions);
 
             if (images.length) {
                 startRotation(images, enableImageRotation);
@@ -279,7 +280,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
             return;
         }
 
-        var newIndex = currentRotationIndex + 1;
+        let newIndex = currentRotationIndex + 1;
         if (newIndex >= currentRotatingImages.length) {
             newIndex = 0;
         }
@@ -289,7 +290,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
     }
 
     function clearRotation() {
-        var interval = rotationInterval;
+        const interval = rotationInterval;
         if (interval) {
             clearInterval(interval);
         }
@@ -299,7 +300,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         currentRotationIndex = -1;
     }
 
-    function setBackdrop(url, imageOptions) {
+    export function setBackdrop(url, imageOptions) {
         if (url && typeof url !== 'string') {
             url = getImageUrls([url], imageOptions)[0];
         }
@@ -312,10 +313,11 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         }
     }
 
-    return {
+/* eslint-enable indent */
-        setBackdrops: setBackdrops,
+
-        setBackdrop: setBackdrop,
+export default {
-        clear: clearBackdrop,
+    setBackdrops: setBackdrops,
-        externalBackdrop: externalBackdrop
+    setBackdrop: setBackdrop,
-    };
+    clearBackdrop: clearBackdrop,
-});
+    externalBackdrop: externalBackdrop
+};

src/components/confirm/confirm.js

@@ -1,5 +1,9 @@
-define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) {
+import browser from 'browser';
-    'use strict';
+import dialog from 'dialog';
+import globalize from 'globalize';
+
+/* eslint-disable indent */
+export default (() => {
 
     function replaceAll(str, find, replace) {
         return str.split(find).join(replace);
@@ -7,7 +11,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
 
     if (browser.tv && window.confirm) {
         // Use the native confirm dialog
-        return function (options) {
+        return options => {
             if (typeof options === 'string') {
                 options = {
                     title: '',
@@ -15,8 +19,8 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
                 };
             }
 
-            var text = replaceAll(options.text || '', '<br/>', '\n');
+            const text = replaceAll(options.text || '', '<br/>', '\n');
-            var result = confirm(text);
+            const result = confirm(text);
 
             if (result) {
                 return Promise.resolve();
@@ -26,8 +30,8 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
         };
     } else {
         // Use our own dialog
-        return function (text, title) {
+        return (text, title) => {
-            var options;
+            let options;
             if (typeof text === 'string') {
                 options = {
                     title: title,
@@ -37,7 +41,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
                 options = text;
             }
 
-            var items = [];
+            const items = [];
 
             items.push({
                 name: options.cancelText || globalize.translate('ButtonCancel'),
@@ -53,7 +57,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
 
             options.buttons = items;
 
-            return dialog.show(options).then(function (result) {
+            return dialog.show(options).then(result => {
                 if (result === 'ok') {
                     return Promise.resolve();
                 }
@@ -62,4 +66,5 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
             });
         };
     }
-});
+})();
+/* eslint-enable indent */

src/components/displaySettings/displaySettings.js

@@ -1,22 +1,37 @@
-define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', 'apphost', 'focusManager', 'datetime', 'globalize', 'loading', 'connectionManager', 'skinManager', 'dom', 'events', 'emby-select', 'emby-checkbox', 'emby-button'], function (require, browser, layoutManager, appSettings, pluginManager, appHost, focusManager, datetime, globalize, loading, connectionManager, skinManager, dom, events) {
+import browser from 'browser';
-    'use strict';
+import layoutManager from 'layoutManager';
+import appSettings from 'appSettings';
+import pluginManager from 'pluginManager';
+import appHost from 'apphost';
+import focusManager from 'focusManager';
+import datetime from 'datetime';
+import globalize from 'globalize';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
+import skinManager from 'skinManager';
+import events from 'events';
+import 'emby-select';
+import 'emby-checkbox';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function fillThemes(select, isDashboard) {
-        select.innerHTML = skinManager.getThemes().map(function (t) {
+        select.innerHTML = skinManager.getThemes().map(t => {
-            var value = t.id;
+            let value = t.id;
             if (t.isDefault && !isDashboard) {
                 value = '';
             } else if (t.isDefaultServerDashboard && isDashboard) {
                 value = '';
             }
 
-            return '<option value="' + value + '">' + t.name + '</option>';
+            return `<option value="${value}">${t.name}</option>`;
         }).join('');
     }
 
     function loadScreensavers(context, userSettings) {
-        var selectScreensaver = context.querySelector('.selectScreensaver');
+        const selectScreensaver = context.querySelector('.selectScreensaver');
-        var options = pluginManager.ofType('screensaver').map(function (plugin) {
+        const options = pluginManager.ofType('screensaver').map(plugin => {
             return {
                 name: plugin.name,
                 value: plugin.id
@@ -28,8 +43,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
             value: 'none'
         });
 
-        selectScreensaver.innerHTML = options.map(function (o) {
+        selectScreensaver.innerHTML = options.map(o => {
-            return '<option value="' + o.value + '">' + o.name + '</option>';
+            return `<option value="${o.value}">${o.name}</option>`;
         }).join('');
         selectScreensaver.value = userSettings.screensaver();
 
@@ -41,8 +56,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
 
     function loadSoundEffects(context, userSettings) {
 
-        var selectSoundEffects = context.querySelector('.selectSoundEffects');
+        const selectSoundEffects = context.querySelector('.selectSoundEffects');
-        var options = pluginManager.ofType('soundeffects').map(function (plugin) {
+        const options = pluginManager.ofType('soundeffects').map(plugin => {
             return {
                 name: plugin.name,
                 value: plugin.id
@@ -54,8 +69,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
             value: 'none'
         });
 
-        selectSoundEffects.innerHTML = options.map(function (o) {
+        selectSoundEffects.innerHTML = options.map(o => {
-            return '<option value="' + o.value + '">' + o.name + '</option>';
+            return `<option value="${o.value}">${o.name}</option>`;
         }).join('');
         selectSoundEffects.value = userSettings.soundEffects();
 
@@ -67,17 +82,17 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
 
     function loadSkins(context, userSettings) {
 
-        var selectSkin = context.querySelector('.selectSkin');
+        const selectSkin = context.querySelector('.selectSkin');
 
-        var options = pluginManager.ofType('skin').map(function (plugin) {
+        const options = pluginManager.ofType('skin').map(plugin => {
             return {
                 name: plugin.name,
                 value: plugin.id
             };
         });
 
-        selectSkin.innerHTML = options.map(function (o) {
+        selectSkin.innerHTML = options.map(o => {
-            return '<option value="' + o.value + '">' + o.name + '</option>';
+            return `<option value="${o.value}">${o.name}</option>`;
         }).join('');
         selectSkin.value = userSettings.skin();
 
@@ -92,7 +107,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
         }
     }
 
-    function showOrHideMissingEpisodesField(context, user, apiClient) {
+    function showOrHideMissingEpisodesField(context) {
 
         if (browser.tizen || browser.web0s) {
             context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide');
@@ -102,10 +117,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
         context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide');
     }
 
-    function loadForm(context, user, userSettings, apiClient) {
+    function loadForm(context, user, userSettings) {
-
-        var loggedInUserId = apiClient.getCurrentUserId();
-        var userId = user.Id;
 
         if (user.Policy.IsAdministrator) {
             context.querySelector('.selectDashboardThemeContainer').classList.remove('hide');
@@ -167,8 +179,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
 
         context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup();
 
-        var selectTheme = context.querySelector('#selectTheme');
+        const selectTheme = context.querySelector('#selectTheme');
-        var selectDashboardTheme = context.querySelector('#selectDashboardTheme');
+        const selectDashboardTheme = context.querySelector('#selectDashboardTheme');
 
         fillThemes(selectTheme);
         fillThemes(selectDashboardTheme, true);
@@ -195,7 +207,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
 
         context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || '';
 
-        showOrHideMissingEpisodesField(context, user, apiClient);
+        showOrHideMissingEpisodesField(context);
 
         loading.hide();
     }
@@ -239,29 +251,29 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
     function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
         loading.show();
 
-        apiClient.getUser(userId).then(function (user) {
+        apiClient.getUser(userId).then(user => {
-            saveUser(context, user, userSettings, apiClient).then(function () {
+            saveUser(context, user, userSettings, apiClient).then(() => {
                 loading.hide();
                 if (enableSaveConfirmation) {
-                    require(['toast'], function (toast) {
+                    import('toast').then(({default: toast}) => {
                         toast(globalize.translate('SettingsSaved'));
                     });
                 }
                 events.trigger(instance, 'saved');
-            }, function () {
+            }, () => {
                 loading.hide();
             });
         });
     }
 
     function onSubmit(e) {
-        var self = this;
+        const self = this;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
+        const apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userId = self.options.userId;
+        const userId = self.options.userId;
-        var userSettings = self.options.userSettings;
+        const userSettings = self.options.userSettings;
 
-        userSettings.setUserInfo(userId, apiClient).then(function () {
+        userSettings.setUserInfo(userId, apiClient).then(() => {
-            var enableSaveConfirmation = self.options.enableSaveConfirmation;
+            const enableSaveConfirmation = self.options.enableSaveConfirmation;
             save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
         });
 
@@ -272,50 +284,51 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
         return false;
     }
 
-    function embed(options, self) {
+    async function embed(options, self) {
-        require(['text!./displaySettings.template.html'], function (template) {
+        const { default: template } = await import('text!./displaySettings.template.html');
-            options.element.innerHTML = globalize.translateDocument(template, 'core');
+        options.element.innerHTML = globalize.translateDocument(template, 'core');
-            options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
+        options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
-            if (options.enableSaveButton) {
+        if (options.enableSaveButton) {
-                options.element.querySelector('.btnSave').classList.remove('hide');
+            options.element.querySelector('.btnSave').classList.remove('hide');
-            }
+        }
-            self.loadData(options.autoFocus);
+        self.loadData(options.autoFocus);
-        });
     }
 
-    function DisplaySettings(options) {
+    class DisplaySettings {
-        this.options = options;
+        constructor(options) {
-        embed(options, this);
+            this.options = options;
-    }
+            embed(options, this);
+        }
 
-    DisplaySettings.prototype.loadData = function (autoFocus) {
+        loadData(autoFocus) {
-        var self = this;
+            const self = this;
-        var context = self.options.element;
+            const context = self.options.element;
 
-        loading.show();
+            loading.show();
 
-        var userId = self.options.userId;
+            const userId = self.options.userId;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
+            const apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userSettings = self.options.userSettings;
+            const userSettings = self.options.userSettings;
 
-        return apiClient.getUser(userId).then(function (user) {
+            return apiClient.getUser(userId).then(user => {
-            return userSettings.setUserInfo(userId, apiClient).then(function () {
+                return userSettings.setUserInfo(userId, apiClient).then(() => {
-                self.dataLoaded = true;
+                    self.dataLoaded = true;
-                loadForm(context, user, userSettings, apiClient);
+                    loadForm(context, user, userSettings);
-                if (autoFocus) {
+                    if (autoFocus) {
-                    focusManager.autoFocus(context);
+                        focusManager.autoFocus(context);
-                }
+                    }
+                });
             });
-        });
+        }
-    };
 
-    DisplaySettings.prototype.submit = function () {
+        submit() {
-        onSubmit.call(this);
+            onSubmit.call(this);
-    };
+        }
 
-    DisplaySettings.prototype.destroy = function () {
+        destroy() {
-        this.options = null;
+            this.options = null;
-    };
+        }
+    }
 
-    return DisplaySettings;
+/* eslint-enable indent */
-});
+export default DisplaySettings;

src/components/homeScreenSettings/homeScreenSettings.js

@@ -1,26 +1,37 @@
-define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'homeSections', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager, homeSections, dom, events) {
+import layoutManager from 'layoutManager';
-    'use strict';
+import focusManager from 'focusManager';
+import globalize from 'globalize';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
+import homeSections from 'homeSections';
+import dom from 'dom';
+import events from 'events';
+import 'listViewStyle';
+import 'emby-select';
+import 'emby-checkbox';
 
-    var numConfigurableSections = 7;
+/* eslint-disable indent */
+
+    const numConfigurableSections = 7;
 
     function renderViews(page, user, result) {
 
-        var folderHtml = '';
+        let folderHtml = '';
 
         folderHtml += '<div class="checkboxList">';
-        folderHtml += result.map(function (i) {
+        folderHtml += result.map(i => {
 
-            var currentHtml = '';
+            let currentHtml = '';
 
-            var id = 'chkGroupFolder' + i.Id;
+            const id = `chkGroupFolder${i.Id}`;
 
-            var isChecked = user.Configuration.GroupedFolders.indexOf(i.Id) !== -1;
+            const isChecked = user.Configuration.GroupedFolders.includes(i.Id);
 
-            var checkedHtml = isChecked ? ' checked="checked"' : '';
+            const checkedHtml = isChecked ? ' checked="checked"' : '';
 
             currentHtml += '<label>';
-            currentHtml += '<input type="checkbox" is="emby-checkbox" class="chkGroupFolder" data-folderid="' + i.Id + '" id="' + id + '"' + checkedHtml + '/>';
+            currentHtml += `<input type="checkbox" is="emby-checkbox" class="chkGroupFolder" data-folderid="${i.Id}" id="${id}"${checkedHtml}/>`;
-            currentHtml += '<span>' + i.Name + '</span>';
+            currentHtml += `<span>${i.Name}</span>`;
             currentHtml += '</label>';
 
             return currentHtml;
@@ -34,7 +45,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
     function getLandingScreenOptions(type) {
 
-        var list = [];
+        const list = [];
 
         if (type === 'movies') {
             list.push({
@@ -123,27 +134,27 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
     function getLandingScreenOptionsHtml(type, userValue) {
 
-        return getLandingScreenOptions(type).map(function (o) {
+        return getLandingScreenOptions(type).map(o => {
 
-            var selected = userValue === o.value || (o.isDefault && !userValue);
+            const selected = userValue === o.value || (o.isDefault && !userValue);
-            var selectedHtml = selected ? ' selected' : '';
+            const selectedHtml = selected ? ' selected' : '';
-            var optionValue = o.isDefault ? '' : o.value;
+            const optionValue = o.isDefault ? '' : o.value;
 
-            return '<option value="' + optionValue + '"' + selectedHtml + '>' + o.name + '</option>';
+            return `<option value="${optionValue}"${selectedHtml}>${o.name}</option>`;
         }).join('');
     }
 
     function renderViewOrder(context, user, result) {
 
-        var html = '';
+        let html = '';
 
-        var index = 0;
+        let index = 0;
 
-        html += result.Items.map(function (view) {
+        html += result.Items.map(view => {
 
-            var currentHtml = '';
+            let currentHtml = '';
 
-            currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';
+            currentHtml += `<div class="listItem viewItem" data-viewid="${view.Id}">`;
 
             currentHtml += '<span class="material-icons listItemIcon folder_open"></span>';
 
@@ -155,8 +166,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
             currentHtml += '</div>';
 
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><span class="material-icons keyboard_arrow_up"></span></button>';
+            currentHtml += `<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="${globalize.translate('Up')}"><span class="material-icons keyboard_arrow_up"></span></button>`;
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><span class="material-icons keyboard_arrow_down"></span></button>';
+            currentHtml += `<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="${globalize.translate('Down')}"><span class="material-icons keyboard_arrow_down"></span></button>`;
 
             currentHtml += '</div>';
 
@@ -170,14 +181,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
     function updateHomeSectionValues(context, userSettings) {
 
-        for (var i = 1; i <= 7; i++) {
+        for (let i = 1; i <= 7; i++) {
 
-            var select = context.querySelector('#selectHomeSection' + i);
+            const select = context.querySelector(`#selectHomeSection${i}`);
-            var defaultValue = homeSections.getDefaultSection(i - 1);
+            const defaultValue = homeSections.getDefaultSection(i - 1);
 
-            var option = select.querySelector('option[value=' + defaultValue + ']') || select.querySelector('option[value=""]');
+            const option = select.querySelector(`option[value=${defaultValue}]`) || select.querySelector('option[value=""]');
 
-            var userValue = userSettings.get('homesection' + (i - 1));
+            const userValue = userSettings.get(`homesection${i - 1}`);
 
             option.value = '';
 
@@ -193,42 +204,42 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
     function getPerLibrarySettingsHtml(item, user, userSettings, apiClient) {
 
-        var html = '';
+        let html = '';
 
-        var isChecked;
+        let isChecked;
 
         if (item.Type === 'Channel' || item.CollectionType === 'boxsets' || item.CollectionType === 'playlists') {
-            isChecked = (user.Configuration.MyMediaExcludes || []).indexOf(item.Id) === -1;
+            isChecked = !(user.Configuration.MyMediaExcludes || []).includes(item.Id);
             html += '<div>';
             html += '<label>';
-            html += '<input type="checkbox" is="emby-checkbox" class="chkIncludeInMyMedia" data-folderid="' + item.Id + '"' + (isChecked ? ' checked="checked"' : '') + '/>';
+            html += `<input type="checkbox" is="emby-checkbox" class="chkIncludeInMyMedia" data-folderid="${item.Id}"${isChecked ? ' checked="checked"' : ''}/>`;
-            html += '<span>' + globalize.translate('DisplayInMyMedia') + '</span>';
+            html += `<span>${globalize.translate('DisplayInMyMedia')}</span>`;
             html += '</label>';
             html += '</div>';
         }
 
-        var excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels'];
+        const excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels'];
-        if (excludeFromLatest.indexOf(item.CollectionType || '') === -1) {
+        if (!excludeFromLatest.includes(item.CollectionType || '')) {
 
-            isChecked = user.Configuration.LatestItemsExcludes.indexOf(item.Id) === -1;
+            isChecked = !user.Configuration.LatestItemsExcludes.includes(item.Id);
             html += '<label class="fldIncludeInLatest">';
-            html += '<input type="checkbox" is="emby-checkbox" class="chkIncludeInLatest" data-folderid="' + item.Id + '"' + (isChecked ? ' checked="checked"' : '') + '/>';
+            html += `<input type="checkbox" is="emby-checkbox" class="chkIncludeInLatest" data-folderid="${item.Id}"${isChecked ? ' checked="checked"' : ''}/>`;
-            html += '<span>' + globalize.translate('DisplayInOtherHomeScreenSections') + '</span>';
+            html += `<span>${globalize.translate('DisplayInOtherHomeScreenSections')}</span>`;
             html += '</label>';
         }
 
         if (html) {
 
-            html = '<div class="checkboxListContainer">' + html + '</div>';
+            html = `<div class="checkboxListContainer">${html}</div>`;
         }
 
         if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') {
 
-            var idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id;
+            const idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id;
             html += '<div class="selectContainer">';
-            html += '<select is="emby-select" class="selectLanding" data-folderid="' + idForLanding + '" label="' + globalize.translate('LabelDefaultScreen') + '">';
+            html += `<select is="emby-select" class="selectLanding" data-folderid="${idForLanding}" label="${globalize.translate('LabelDefaultScreen')}">`;
 
-            var userValue = userSettings.get('landing-' + idForLanding);
+            const userValue = userSettings.get(`landing-${idForLanding}`);
 
             html += getLandingScreenOptionsHtml(item.CollectionType, userValue);
 
@@ -238,7 +249,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
         if (html) {
 
-            var prefix = '';
+            let prefix = '';
             prefix += '<div class="verticalSection">';
 
             prefix += '<h2 class="sectionTitle">';
@@ -254,10 +265,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
     function renderPerLibrarySettings(context, user, userViews, userSettings, apiClient) {
 
-        var elem = context.querySelector('.perLibrarySettings');
+        const elem = context.querySelector('.perLibrarySettings');
-        var html = '';
+        let html = '';
 
-        for (var i = 0, length = userViews.length; i < length; i++) {
+        for (let i = 0, length = userViews.length; i < length; i++) {
 
             html += getPerLibrarySettingsHtml(userViews[i], user, userSettings, apiClient);
         }
@@ -271,10 +282,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
         updateHomeSectionValues(context, userSettings);
 
-        var promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id);
+        const promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id);
-        var promise2 = apiClient.getJSON(apiClient.getUrl('Users/' + user.Id + '/GroupingOptions'));
+        const promise2 = apiClient.getJSON(apiClient.getUrl(`Users/${user.Id}/GroupingOptions`));
 
-        Promise.all([promise1, promise2]).then(function (responses) {
+        Promise.all([promise1, promise2]).then(responses => {
 
             renderViewOrder(context, user, responses[0]);
 
@@ -286,38 +297,19 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
         });
     }
 
-    function getSibling(elem, type, className) {
-
-        var sibling = elem[type];
-
-        while (sibling != null) {
-            if (sibling.classList.contains(className)) {
-                break;
-            }
-        }
-
-        if (sibling != null) {
-            if (!sibling.classList.contains(className)) {
-                sibling = null;
-            }
-        }
-
-        return sibling;
-    }
-
     function onSectionOrderListClick(e) {
 
-        var target = dom.parentWithClass(e.target, 'btnViewItemMove');
+        const target = dom.parentWithClass(e.target, 'btnViewItemMove');
 
         if (target) {
-            var viewItem = dom.parentWithClass(target, 'viewItem');
+            const viewItem = dom.parentWithClass(target, 'viewItem');
 
             if (viewItem) {
-                var ul = dom.parentWithClass(viewItem, 'paperList');
+                const ul = dom.parentWithClass(viewItem, 'paperList');
 
                 if (target.classList.contains('btnViewItemDown')) {
 
-                    var next = viewItem.nextSibling;
+                    const next = viewItem.nextSibling;
 
                     if (next) {
                         viewItem.parentNode.removeChild(viewItem);
@@ -327,7 +319,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
                 } else {
 
-                    var prev = viewItem.previousSibling;
+                    const prev = viewItem.previousSibling;
 
                     if (prev) {
                         viewItem.parentNode.removeChild(viewItem);
@@ -341,10 +333,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
     function getCheckboxItems(selector, context, isChecked) {
 
-        var inputs = context.querySelectorAll(selector);
+        const inputs = context.querySelectorAll(selector);
-        var list = [];
+        const list = [];
 
-        for (var i = 0, length = inputs.length; i < length; i++) {
+        for (let i = 0, length = inputs.length; i < length; i++) {
 
             if (inputs[i].checked === isChecked) {
                 list.push(inputs[i]);
@@ -359,25 +351,25 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
         user.Configuration.HidePlayedInLatest = context.querySelector('.chkHidePlayedFromLatest').checked;
 
-        user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(function (i) {
+        user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(i => {
 
             return i.getAttribute('data-folderid');
         });
 
-        user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(function (i) {
+        user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(i => {
 
             return i.getAttribute('data-folderid');
         });
 
-        user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(function (i) {
+        user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(i => {
 
             return i.getAttribute('data-folderid');
         });
 
-        var viewItems = context.querySelectorAll('.viewItem');
+        const viewItems = context.querySelectorAll('.viewItem');
-        var orderedViews = [];
+        const orderedViews = [];
-        var i;
+        let i;
-        var length;
+        let length;
         for (i = 0, length = viewItems.length; i < length; i++) {
             orderedViews.push(viewItems[i].getAttribute('data-viewid'));
         }
@@ -394,10 +386,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
         userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value);
         userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').value);
 
-        var selectLandings = context.querySelectorAll('.selectLanding');
+        const selectLandings = context.querySelectorAll('.selectLanding');
         for (i = 0, length = selectLandings.length; i < length; i++) {
-            var selectLanding = selectLandings[i];
+            const selectLanding = selectLandings[i];
-            userSettingsInstance.set('landing-' + selectLanding.getAttribute('data-folderid'), selectLanding.value);
+            userSettingsInstance.set(`landing-${selectLanding.getAttribute('data-folderid')}`, selectLanding.value);
         }
 
         return apiClient.updateUserConfiguration(user.Id, user.Configuration);
@@ -407,20 +399,20 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
         loading.show();
 
-        apiClient.getUser(userId).then(function (user) {
+        apiClient.getUser(userId).then(user => {
 
-            saveUser(context, user, userSettings, apiClient).then(function () {
+            saveUser(context, user, userSettings, apiClient).then(() => {
 
                 loading.hide();
                 if (enableSaveConfirmation) {
-                    require(['toast'], function (toast) {
+                    import('toast').then(({default: toast}) => {
                         toast(globalize.translate('SettingsSaved'));
                     });
                 }
 
                 events.trigger(instance, 'saved');
 
-            }, function () {
+            }, () => {
                 loading.hide();
             });
         });
@@ -428,14 +420,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
     function onSubmit(e) {
 
-        var self = this;
+        const self = this;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
+        const apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userId = self.options.userId;
+        const userId = self.options.userId;
-        var userSettings = self.options.userSettings;
+        const userSettings = self.options.userSettings;
 
-        userSettings.setUserInfo(userId, apiClient).then(function () {
+        userSettings.setUserInfo(userId, apiClient).then(() => {
 
-            var enableSaveConfirmation = self.options.enableSaveConfirmation;
+            const enableSaveConfirmation = self.options.enableSaveConfirmation;
             save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
         });
 
@@ -448,13 +440,13 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
     function onChange(e) {
 
-        var chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia');
+        const chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia');
         if (!chkIncludeInMyMedia) {
             return;
         }
 
-        var section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection');
+        const section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection');
-        var fldIncludeInLatest = section.querySelector('.fldIncludeInLatest');
+        const fldIncludeInLatest = section.querySelector('.fldIncludeInLatest');
         if (fldIncludeInLatest) {
             if (chkIncludeInMyMedia.checked) {
                 fldIncludeInLatest.classList.remove('hide');
@@ -466,10 +458,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
     function embed(options, self) {
 
-        require(['text!./homeScreenSettings.template.html'], function (template) {
+        return import('text!./homeScreenSettings.template.html').then(({default: template}) => {
 
-            for (var i = 1; i <= numConfigurableSections; i++) {
+            for (let i = 1; i <= numConfigurableSections; i++) {
-                template = template.replace('{section' + i + 'label}', globalize.translate('LabelHomeScreenSectionValue', i));
+                template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i));
             }
 
             options.element.innerHTML = globalize.translateDocument(template, 'core');
@@ -492,47 +484,48 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
         });
     }
 
-    function HomeScreenSettings(options) {
+    class HomeScreenSettings {
+        constructor(options) {
+            this.options = options;
+            embed(options, this);
+        }
 
-        this.options = options;
+        loadData(autoFocus) {
 
-        embed(options, this);
+            const self = this;
+            const context = self.options.element;
+
+            loading.show();
+
+            const userId = self.options.userId;
+            const apiClient = connectionManager.getApiClient(self.options.serverId);
+            const userSettings = self.options.userSettings;
+
+            apiClient.getUser(userId).then(user => {
+
+                userSettings.setUserInfo(userId, apiClient).then(() => {
+
+                    self.dataLoaded = true;
+
+                    loadForm(context, user, userSettings, apiClient);
+
+                    if (autoFocus) {
+                        focusManager.autoFocus(context);
+                    }
+                });
+            });
+        }
+
+        submit() {
+            onSubmit.call(this);
+        }
+
+        destroy() {
+
+            this.options = null;
+        }
     }
 
-    HomeScreenSettings.prototype.loadData = function (autoFocus) {
+/* eslint-enable indent */
 
-        var self = this;
+export default HomeScreenSettings;
-        var context = self.options.element;
-
-        loading.show();
-
-        var userId = self.options.userId;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userSettings = self.options.userSettings;
-
-        apiClient.getUser(userId).then(function (user) {
-
-            userSettings.setUserInfo(userId, apiClient).then(function () {
-
-                self.dataLoaded = true;
-
-                loadForm(context, user, userSettings, apiClient);
-
-                if (autoFocus) {
-                    focusManager.autoFocus(context);
-                }
-            });
-        });
-    };
-
-    HomeScreenSettings.prototype.submit = function () {
-        onSubmit.call(this);
-    };
-
-    HomeScreenSettings.prototype.destroy = function () {
-
-        this.options = null;
-    };
-
-    return HomeScreenSettings;
-});

src/components/homesections/homesections.js

@@ -1,7 +1,24 @@
-define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'layoutManager', 'imageLoader', 'globalize', 'itemShortcuts', 'itemHelper', 'appRouter', 'scripts/imagehelper', 'paper-icon-button-light', 'emby-itemscontainer', 'emby-scroller', 'emby-button', 'css!./homesections'], function (connectionManager, cardBuilder, appSettings, dom, appHost, layoutManager, imageLoader, globalize, itemShortcuts, itemHelper, appRouter, imageHelper) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import cardBuilder from 'cardBuilder';
+import appSettings from 'appSettings';
+import dom from 'dom';
+import appHost from 'apphost';
+import layoutManager from 'layoutManager';
+import imageLoader from 'imageLoader';
+import globalize from 'globalize';
+import itemShortcuts from 'itemShortcuts';
+import itemHelper from 'itemHelper';
+import appRouter from 'appRouter';
+import imageHelper from 'scripts/imagehelper';
+import 'paper-icon-button-light';
+import 'emby-itemscontainer';
+import 'emby-scroller';
+import 'emby-button';
+import 'css!./homesections';
 
-    function getDefaultSection(index) {
+/* eslint-disable indent */
+
+    export function getDefaultSection(index) {
         switch (index) {
             case 0:
                 return 'smalllibrarytiles';
@@ -23,9 +40,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getAllSectionsToShow(userSettings, sectionCount) {
-        var sections = [];
+        const sections = [];
-        for (var i = 0, length = sectionCount; i < length; i++) {
+        for (let i = 0, length = sectionCount; i < length; i++) {
-            var section = userSettings.get('homesection' + i) || getDefaultSection(i);
+            let section = userSettings.get('homesection' + i) || getDefaultSection(i);
             if (section === 'folders') {
                 section = getDefaultSection(0);
             }
@@ -36,22 +53,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         return sections;
     }
 
-    function loadSections(elem, apiClient, user, userSettings) {
+    export function loadSections(elem, apiClient, user, userSettings) {
         return getUserViews(apiClient, user.Id).then(function (userViews) {
-            var html = '';
+            let html = '';
 
             if (userViews.length) {
-                var sectionCount = 7;
+                const sectionCount = 7;
-                for (var i = 0; i < sectionCount; i++) {
+                for (let i = 0; i < sectionCount; i++) {
                     html += '<div class="verticalSection section' + i + '"></div>';
                 }
 
                 elem.innerHTML = html;
                 elem.classList.add('homeSectionsContainer');
 
-                var promises = [];
+                const promises = [];
-                var sections = getAllSectionsToShow(userSettings, sectionCount);
+                const sections = getAllSectionsToShow(userSettings, sectionCount);
-                for (var i = 0; i < sections.length; i++) {
+                for (let i = 0; i < sections.length; i++) {
                     promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i));
                 }
 
@@ -62,7 +79,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                     });
                 });
             } else {
-                var noLibDescription;
+                let noLibDescription;
                 if (user['Policy'] && user['Policy']['IsAdministrator']) {
                     noLibDescription = globalize.translate('NoCreatedLibraries', '<br><a id="button-createLibrary" class="button-link">', '</a>');
                 } else {
@@ -75,7 +92,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 html += '</div>';
                 elem.innerHTML = html;
 
-                var createNowLink = elem.querySelector('#button-createLibrary');
+                const createNowLink = elem.querySelector('#button-createLibrary');
                 if (createNowLink) {
                     createNowLink.addEventListener('click', function () {
                         Dashboard.navigate('library.html');
@@ -85,9 +102,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         });
     }
 
-    function destroySections(elem) {
+    export function destroySections(elem) {
-        var elems = elem.querySelectorAll('.itemsContainer');
+        const elems = elem.querySelectorAll('.itemsContainer');
-        for (var i = 0; i < elems.length; i++) {
+        for (let i = 0; i < elems.length; i++) {
             elems[i].fetchData = null;
             elems[i].parentContainer = null;
             elems[i].getItemsHtml = null;
@@ -96,24 +113,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         elem.innerHTML = '';
     }
 
-    function pause(elem) {
+    export function pause(elem) {
-        var elems = elem.querySelectorAll('.itemsContainer');
+        const elems = elem.querySelectorAll('.itemsContainer');
-        for (var i = 0; i < elems.length; i++) {
+        for (let i = 0; i < elems.length; i++) {
             elems[i].pause();
         }
     }
 
-    function resume(elem, options) {
+    export function resume(elem, options) {
-        var elems = elem.querySelectorAll('.itemsContainer');
+        const elems = elem.querySelectorAll('.itemsContainer');
-        var i;
+        const promises = [];
-        var length;
-        var promises = [];
 
-        for (i = 0, length = elems.length; i < length; i++) {
+        for (let i = 0, length = elems.length; i < length; i++) {
             promises.push(elems[i].resume(options));
         }
 
-        var promise = Promise.all(promises);
+        const promise = Promise.all(promises);
         if (!options || options.returnPromise !== false) {
             return promise;
         }
@@ -121,10 +136,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function loadSection(page, apiClient, user, userSettings, userViews, allSections, index) {
 
-        var section = allSections[index];
+        const section = allSections[index];
-        var userId = user.Id;
+        const userId = user.Id;
 
-        var elem = page.querySelector('.section' + index);
+        const elem = page.querySelector('.section' + index);
 
         if (section === 'latestmedia') {
             loadRecentlyAdded(elem, apiClient, user, userViews);
@@ -172,7 +187,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getLibraryButtonsHtml(items) {
-        var html = '';
+        let html = '';
 
         html += '<div class="verticalSection verticalSection-extrabottompadding">';
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
@@ -180,9 +195,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-multiselect="false">';
 
         // library card background images
-        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];
-            var icon = imageHelper.getLibraryIcon(item.CollectionType);
+            const icon = imageHelper.getLibraryIcon(item.CollectionType);
             html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><span class="material-icons homeLibraryIcon ' + icon + '"></span><span class="homeLibraryText">' + item.Name + '</span></a>';
         }
 
@@ -194,7 +209,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function loadlibraryButtons(elem, apiClient, user, userSettings, userViews) {
         elem.classList.remove('verticalSection');
-        var html = getLibraryButtonsHtml(userViews);
+        const html = getLibraryButtonsHtml(userViews);
 
         elem.innerHTML = html;
         imageLoader.lazyChildren(elem);
@@ -210,8 +225,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getFetchLatestItemsFn(serverId, parentId, collectionType) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = connectionManager.getApiClient(serverId);
-            var limit = 16;
+            let limit = 16;
 
             if (enableScrollX()) {
                 if (collectionType === 'music') {
@@ -227,7 +242,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 }
             }
 
-            var options = {
+            const options = {
                 Limit: limit,
                 Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path',
                 ImageTypeLimit: 1,
@@ -241,8 +256,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getLatestItemsHtmlFn(itemType, viewType) {
         return function (items) {
-            var cardLayout = false;
+            const cardLayout = false;
-            var shape;
+            let shape;
             if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') {
                 shape = getPortraitShape();
             } else if (viewType === 'music' || viewType === 'homevideos') {
@@ -272,7 +287,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function renderLatestSection(elem, apiClient, user, parent) {
-        var html = '';
+        let html = '';
 
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
         if (!layoutManager.tv) {
@@ -303,7 +318,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
         elem.innerHTML = html;
 
-        var itemsContainer = elem.querySelector('.itemsContainer');
+        const itemsContainer = elem.querySelector('.itemsContainer');
         itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType);
         itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType);
         itemsContainer.parentContainer = elem;
@@ -311,10 +326,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function loadRecentlyAdded(elem, apiClient, user, userViews) {
         elem.classList.remove('verticalSection');
-        var excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels'];
+        const excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels'];
 
-        for (var i = 0, length = userViews.length; i < length; i++) {
+        for (let i = 0, length = userViews.length; i < length; i++) {
-            var item = userViews[i];
+            const item = userViews[i];
             if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) {
                 continue;
             }
@@ -323,7 +338,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 continue;
             }
 
-            var frag = document.createElement('div');
+            const frag = document.createElement('div');
             frag.classList.add('verticalSection');
             frag.classList.add('hide');
             elem.appendChild(frag);
@@ -334,12 +349,14 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getRequirePromise(deps) {
         return new Promise(function (resolve, reject) {
-            require(deps, resolve);
+            import(deps).then(() => {
+                return resolve;
+            });
         });
     }
 
-    function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
+    export function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
-        var html = '';
+        let html = '';
         if (userViews.length) {
             html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
             if (enableScrollX()) {
@@ -372,10 +389,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getContinueWatchingFetchFn(serverId) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = connectionManager.getApiClient(serverId);
-            var screenWidth = dom.getWindowSize().innerWidth;
+            const screenWidth = dom.getWindowSize().innerWidth;
 
-            var limit;
+            let limit;
             if (enableScrollX()) {
                 limit = 12;
             } else {
@@ -383,7 +400,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 limit = Math.min(limit, 5);
             }
 
-            var options = {
+            const options = {
                 Limit: limit,
                 Recursive: true,
                 Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
@@ -398,7 +415,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getContinueWatchingItemsHtml(items) {
-        var cardLayout = false;
+        const cardLayout = false;
         return cardBuilder.getCardsHtml({
             items: items,
             preferThumb: true,
@@ -419,7 +436,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadResumeVideo(elem, apiClient, userId) {
-        var html = '';
+        let html = '';
 
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
         if (enableScrollX()) {
@@ -437,7 +454,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         elem.classList.add('hide');
         elem.innerHTML = html;
 
-        var itemsContainer = elem.querySelector('.itemsContainer');
+        const itemsContainer = elem.querySelector('.itemsContainer');
         itemsContainer.fetchData = getContinueWatchingFetchFn(apiClient.serverId());
         itemsContainer.getItemsHtml = getContinueWatchingItemsHtml;
         itemsContainer.parentContainer = elem;
@@ -445,10 +462,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getContinueListeningFetchFn(serverId) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = connectionManager.getApiClient(serverId);
-            var screenWidth = dom.getWindowSize().innerWidth;
+            const screenWidth = dom.getWindowSize().innerWidth;
 
-            var limit;
+            let limit;
             if (enableScrollX()) {
                 limit = 12;
             } else {
@@ -456,7 +473,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 limit = Math.min(limit, 5);
             }
 
-            var options = {
+            const options = {
                 Limit: limit,
                 Recursive: true,
                 Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
@@ -471,7 +488,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getContinueListeningItemsHtml(items) {
-        var cardLayout = false;
+        const cardLayout = false;
         return cardBuilder.getCardsHtml({
             items: items,
             preferThumb: true,
@@ -492,7 +509,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadResumeAudio(elem, apiClient, userId) {
-        var html = '';
+        let html = '';
 
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
         if (enableScrollX()) {
@@ -510,7 +527,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         elem.classList.add('hide');
         elem.innerHTML = html;
 
-        var itemsContainer = elem.querySelector('.itemsContainer');
+        const itemsContainer = elem.querySelector('.itemsContainer');
         itemsContainer.fetchData = getContinueListeningFetchFn(apiClient.serverId());
         itemsContainer.getItemsHtml = getContinueListeningItemsHtml;
         itemsContainer.parentContainer = elem;
@@ -518,7 +535,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getOnNowFetchFn(serverId) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = connectionManager.getApiClient(serverId);
             return apiClient.getLiveTvRecommendedPrograms({
                 userId: apiClient.getCurrentUserId(),
                 IsAiring: true,
@@ -532,7 +549,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getOnNowItemsHtml(items) {
-        var cardLayout = false;
+        const cardLayout = false;
         return cardBuilder.getCardsHtml({
             items: items,
             preferThumb: 'auto',
@@ -559,7 +576,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             return Promise.resolve();
         }
 
-        var userId = user.Id;
+        const userId = user.Id;
         return apiClient.getLiveTvRecommendedPrograms({
             userId: apiClient.getCurrentUserId(),
             IsAiring: true,
@@ -569,7 +586,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             EnableTotalRecordCount: false,
             Fields: 'ChannelInfo,PrimaryImageAspectRatio'
         }).then(function (result) {
-            var html = '';
+            let html = '';
             if (result.Items.length) {
                 elem.classList.remove('padded-left');
                 elem.classList.remove('padded-right');
@@ -654,7 +671,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
                 elem.innerHTML = html;
 
-                var itemsContainer = elem.querySelector('.itemsContainer');
+                const itemsContainer = elem.querySelector('.itemsContainer');
                 itemsContainer.parentContainer = elem;
                 itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId());
                 itemsContainer.getItemsHtml = getOnNowItemsHtml;
@@ -664,7 +681,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getNextUpFetchFn(serverId) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = connectionManager.getApiClient(serverId);
             return apiClient.getNextUpEpisodes({
                 Limit: enableScrollX() ? 24 : 15,
                 Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo,Path',
@@ -677,7 +694,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getNextUpItemsHtml(items) {
-        var cardLayout = false;
+        const cardLayout = false;
         return cardBuilder.getCardsHtml({
             items: items,
             preferThumb: true,
@@ -695,7 +712,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadNextUp(elem, apiClient, userId) {
-        var html = '';
+        let html = '';
 
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
         if (!layoutManager.tv) {
@@ -727,7 +744,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         elem.classList.add('hide');
         elem.innerHTML = html;
 
-        var itemsContainer = elem.querySelector('.itemsContainer');
+        const itemsContainer = elem.querySelector('.itemsContainer');
         itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId());
         itemsContainer.getItemsHtml = getNextUpItemsHtml;
         itemsContainer.parentContainer = elem;
@@ -735,7 +752,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = connectionManager.getApiClient(serverId);
             return apiClient.getLiveTvRecordings({
                 userId: apiClient.getCurrentUserId(),
                 Limit: enableScrollX() ? 12 : 5,
@@ -749,7 +766,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getLatestRecordingItemsHtml(activeRecordingsOnly) {
         return function (items) {
-            var cardLayout = false;
+            const cardLayout = false;
             return cardBuilder.getCardsHtml({
                 items: items,
                 shape: enableScrollX() ? 'autooverflow' : 'auto',
@@ -774,11 +791,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient, userId) {
-        var title = activeRecordingsOnly ?
+        const title = activeRecordingsOnly ?
             globalize.translate('HeaderActiveRecordings') :
             globalize.translate('HeaderLatestRecordings');
 
-        var html = '';
+        let html = '';
 
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
@@ -799,18 +816,19 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         elem.classList.add('hide');
         elem.innerHTML = html;
 
-        var itemsContainer = elem.querySelector('.itemsContainer');
+        const itemsContainer = elem.querySelector('.itemsContainer');
         itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly);
         itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly);
         itemsContainer.parentContainer = elem;
     }
 
-    return {
+export default {
-        loadLibraryTiles: loadLibraryTiles,
+    loadLibraryTiles: loadLibraryTiles,
-        getDefaultSection: getDefaultSection,
+    getDefaultSection: getDefaultSection,
-        loadSections: loadSections,
+    loadSections: loadSections,
-        destroySections: destroySections,
+    destroySections: destroySections,
-        pause: pause,
+    pause: pause,
-        resume: resume
+    resume: resume
-    };
+};
-});
+
+/* eslint-enable indent */

src/components/imageeditor/imageeditor.js

@@ -200,7 +200,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
 
         require(['confirm'], function (confirm) {
 
-            confirm({
+            confirm.default({
 
                 text: globalize.translate('ConfirmDeleteImage'),
                 confirmText: globalize.translate('Delete'),

src/components/itemContextMenu.js

@@ -1,14 +1,24 @@
-define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', 'playbackManager', 'loading', 'appSettings', 'browser', 'actionsheet'], function (appHost, globalize, connectionManager, itemHelper, appRouter, playbackManager, loading, appSettings, browser, actionsheet) {
+import appHost from 'apphost';
-    'use strict';
+import globalize from 'globalize';
+import connectionManager from 'connectionManager';
+import itemHelper from 'itemHelper';
+import appRouter from 'appRouter';
+import playbackManager from 'playbackManager';
+import loading from 'loading';
+import appSettings from 'appSettings';
+import browser from 'browser';
+import actionsheet from 'actionsheet';
 
-    function getCommands(options) {
+/* eslint-disable indent */
-        var item = options.item;
-        var user = options.user;
 
-        var canPlay = playbackManager.canPlay(item);
+    export function getCommands(options) {
-        var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
+        const item = options.item;
+        const user = options.user;
 
-        var commands = [];
+        const canPlay = playbackManager.canPlay(item);
+        const restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
+
+        let commands = [];
 
         if (canPlay && item.MediaType !== 'Photo') {
             if (options.play !== false) {
@@ -161,10 +171,10 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
             });
         }
 
-        var canEdit = itemHelper.canEdit(user, item);
+        const canEdit = itemHelper.canEdit(user, item);
         if (canEdit) {
             if (options.edit !== false && item.Type !== 'SeriesTimer') {
-                var text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata');
+                const text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata');
                 commands.push({
                     name: text,
                     id: 'edit',
@@ -311,31 +321,31 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
     }
 
     function executeCommand(item, id, options) {
-        var itemId = item.Id;
+        const itemId = item.Id;
-        var serverId = item.ServerId;
+        const serverId = item.ServerId;
-        var apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
         return new Promise(function (resolve, reject) {
             switch (id) {
                 case 'addtocollection':
-                    require(['collectionEditor'], function (collectionEditor) {
+                    import('collectionEditor').then(({default: collectionEditor}) => {
-                        new collectionEditor.showEditor({
+                        new collectionEditor({
                             items: [itemId],
                             serverId: serverId
                         }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'addtoplaylist':
-                    require(['playlistEditor'], function (playlistEditor) {
+                    import('playlistEditor').then(({default: playlistEditor}) => {
-                        new playlistEditor.showEditor({
+                        new playlistEditor({
                             items: [itemId],
                             serverId: serverId
                         }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'download':
-                    require(['fileDownloader'], function (fileDownloader) {
+                    import('fileDownloader').then(({default: fileDownloader}) => {
-                        var downloadHref = apiClient.getItemDownloadUrl(itemId);
+                        const downloadHref = apiClient.getItemDownloadUrl(itemId);
                         fileDownloader.download([{
                             url: downloadHref,
                             itemId: itemId,
@@ -346,17 +356,17 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                         getResolveFunction(getResolveFunction(resolve, id), id)();
                     });
                     break;
-                case 'copy-stream':
+                case 'copy-stream': {
-                    var downloadHref = apiClient.getItemDownloadUrl(itemId);
+                    const downloadHref = apiClient.getItemDownloadUrl(itemId);
-                    var textAreaCopy = function () {
+                    const textAreaCopy = function () {
-                        var textArea = document.createElement('textarea');
+                        let textArea = document.createElement('textarea');
                         textArea.value = downloadHref;
                         document.body.appendChild(textArea);
                         textArea.focus();
                         textArea.select();
 
                         if (document.execCommand('copy')) {
-                            require(['toast'], function (toast) {
+                            import('toast').then(({default: toast}) => {
                                 toast(globalize.translate('CopyStreamURLSuccess'));
                             });
                         } else {
@@ -371,7 +381,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     } else {
                         /* eslint-disable-next-line compat/compat */
                         navigator.clipboard.writeText(downloadHref).then(function () {
-                            require(['toast'], function (toast) {
+                            import('toast').then(({default: toast}) => {
                                 toast(globalize.translate('CopyStreamURLSuccess'));
                             });
                         }).catch(function () {
@@ -380,8 +390,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     }
                     getResolveFunction(resolve, id)();
                     break;
+                }
                 case 'editsubtitles':
-                    require(['subtitleEditor'], function (subtitleEditor) {
+                    import('subtitleEditor').then(({default: subtitleEditor}) => {
                         subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
@@ -389,7 +400,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     break;
                 case 'editimages':
-                    require(['imageEditor'], function (imageEditor) {
+                    import('imageEditor').then(({default: imageEditor}) => {
                         imageEditor.show({
                             itemId: itemId,
                             serverId: serverId
@@ -397,12 +408,12 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     });
                     break;
                 case 'identify':
-                    require(['itemIdentifier'], function (itemIdentifier) {
+                    import('itemIdentifier').then(({default: itemIdentifier}) => {
                         itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'moremediainfo':
-                    require(['itemMediaInfo'], function (itemMediaInfo) {
+                    import('itemMediaInfo').then(({default: itemMediaInfo}) => {
                         itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
                     });
                     break;
@@ -431,7 +442,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     getResolveFunction(resolve, id)();
                     break;
                 case 'record':
-                    require(['recordingCreator'], function (recordingCreator) {
+                    import('recordingCreator').then(({default: recordingCreator}) => {
                         recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
@@ -502,8 +513,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
     }
 
     function deleteTimer(apiClient, item, resolve, command) {
-        require(['recordingHelper'], function (recordingHelper) {
+        import('recordingHelper').then(({default: recordingHelper}) => {
-            var timerId = item.TimerId || item.Id;
+            const timerId = item.TimerId || item.Id;
             recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
             });
@@ -511,7 +522,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
     }
 
     function deleteSeriesTimer(apiClient, item, resolve, command) {
-        require(['recordingHelper'], function (recordingHelper) {
+        import('recordingHelper').then(({default: recordingHelper}) => {
             recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
             });
@@ -519,9 +530,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
     }
 
     function play(item, resume, queue, queueNext) {
-        var method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play';
+        const method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play';
 
-        var startPosition = 0;
+        let startPosition = 0;
         if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
             startPosition = item.UserData.PlaybackPositionTicks;
         }
@@ -542,18 +553,18 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
 
     function editItem(apiClient, item) {
         return new Promise(function (resolve, reject) {
-            var serverId = apiClient.serverInfo().Id;
+            const serverId = apiClient.serverInfo().Id;
 
             if (item.Type === 'Timer') {
-                require(['recordingEditor'], function (recordingEditor) {
+                import('recordingEditor').then(({default: recordingEditor}) => {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             } else if (item.Type === 'SeriesTimer') {
-                require(['seriesRecordingEditor'], function (recordingEditor) {
+                import('seriesRecordingEditor').then(({default: recordingEditor}) => {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             } else {
-                require(['metadataEditor'], function (metadataEditor) {
+                import('metadataEditor').then(({default: metadataEditor}) => {
                     metadataEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             }
@@ -562,7 +573,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
 
     function deleteItem(apiClient, item) {
         return new Promise(function (resolve, reject) {
-            require(['deleteHelper'], function (deleteHelper) {
+            import('deleteHelper').then(({default: deleteHelper}) => {
                 deleteHelper.deleteItem({
                     item: item,
                     navigate: false
@@ -574,7 +585,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
     }
 
     function refresh(apiClient, item) {
-        require(['refreshDialog'], function (refreshDialog) {
+        import('refreshDialog').then(({default: refreshDialog}) => {
             new refreshDialog({
                 itemIds: [item.Id],
                 serverId: apiClient.serverInfo().Id,
@@ -583,8 +594,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
         });
     }
 
-    function show(options) {
+    export function show(options) {
-        var commands = getCommands(options);
+        const commands = getCommands(options);
         if (!commands.length) {
             return Promise.reject();
         }
@@ -598,8 +609,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
         });
     }
 
-    return {
+/* eslint-enable indent */
-        getCommands: getCommands,
+
-        show: show
+export default {
-    };
+    getCommands: getCommands,
-});
+    show: show
+};

src/components/maintabsmanager.js

@@ -1,11 +1,16 @@
-define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, browser, events) {
+import dom from 'dom';
-    'use strict';
+import browser from 'browser';
+import events from 'events';
+import 'emby-tabs';
+import 'emby-button';
 
-    var tabOwnerView;
+/* eslint-disable indent */
-    var queryScope = document.querySelector('.skinHeader');
+
-    var footerTabsContainer;
+    let tabOwnerView;
-    var headerTabsContainer;
+    const queryScope = document.querySelector('.skinHeader');
-    var tabsElem;
+    let footerTabsContainer;
+    let headerTabsContainer;
+    let tabsElem;
 
     function enableTabsInFooter() {
         return false;
@@ -44,7 +49,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
                 return false;
             }
 
-            var classList = elem.classList;
+            const classList = elem.classList;
             if (classList) {
                 return !classList.contains('scrollX') && !classList.contains('animatedScrollX');
             }
@@ -52,7 +57,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
             return true;
         }
 
-        var parent = target;
+        let parent = target;
         while (parent != null) {
             if (!allowSwipeOn(parent)) {
                 return false;
@@ -70,22 +75,22 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
         }
 
         // implement without hammer
-        var pageCount = getTabContainersFn().length;
+        const pageCount = getTabContainersFn().length;
-        var onSwipeLeft = function (e, target) {
+        const onSwipeLeft = function (e, target) {
             if (allowSwipe(target) && view.contains(target)) {
                 tabsElem.selectNext();
             }
         };
 
-        var onSwipeRight = function (e, target) {
+        const onSwipeRight = function (e, target) {
             if (allowSwipe(target) && view.contains(target)) {
                 tabsElem.selectPrevious();
             }
         };
 
-        require(['touchHelper'], function (TouchHelper) {
+        import('touchHelper').then(({default: TouchHelper}) => {
 
-            var touchHelper = new TouchHelper(view.parentNode.parentNode);
+            const touchHelper = new TouchHelper(view.parentNode.parentNode);
 
             events.on(touchHelper, 'swipeleft', onSwipeLeft);
             events.on(touchHelper, 'swiperight', onSwipeRight);
@@ -96,9 +101,9 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
         });
     }
 
-    function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) {
+    export function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) {
 
-        var enableInFooter = enableTabsInFooter();
+        const enableInFooter = enableTabsInFooter();
 
         if (!view) {
             if (tabOwnerView) {
@@ -129,7 +134,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
 
         ensureElements(enableInFooter);
 
-        var tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer;
+        const tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer;
 
         if (!tabOwnerView) {
             tabsContainerElem.classList.remove('hide');
@@ -137,18 +142,18 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
 
         if (tabOwnerView !== view) {
 
-            var index = 0;
+            let index = 0;
 
-            var indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"');
+            const indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"');
-            var tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
+            const tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
 
-                var tabClass = 'emby-tab-button';
+                let tabClass = 'emby-tab-button';
 
                 if (t.enabled === false) {
                     tabClass += ' hide';
                 }
 
-                var tabHtml;
+                let tabHtml;
 
                 if (t.cssClass) {
                     tabClass += ' ' + t.cssClass;
@@ -177,16 +182,16 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
 
             tabsElem.addEventListener('beforetabchange', function (e) {
 
-                var tabContainers = getTabContainersFn();
+                const tabContainers = getTabContainersFn();
                 if (e.detail.previousIndex != null) {
 
-                    var previousPanel = tabContainers[e.detail.previousIndex];
+                    const previousPanel = tabContainers[e.detail.previousIndex];
                     if (previousPanel) {
                         previousPanel.classList.remove('is-active');
                     }
                 }
 
-                var newPanel = tabContainers[e.detail.selectedTabIndex];
+                const newPanel = tabContainers[e.detail.selectedTabIndex];
 
                 //if (e.detail.previousIndex != null && e.detail.previousIndex != e.detail.selectedTabIndex) {
                 //    if (newPanel.animate && (animateTabs || []).indexOf(e.detail.selectedTabIndex) != -1) {
@@ -241,9 +246,9 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
         };
     }
 
-    function selectedTabIndex(index) {
+    export function selectedTabIndex(index) {
 
-        var tabsContainerElem = headerTabsContainer;
+        const tabsContainerElem = headerTabsContainer;
 
         if (!tabsElem) {
             tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]');
@@ -256,13 +261,8 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
         }
     }
 
-    function getTabsElement() {
+    export function getTabsElement() {
         return document.querySelector('.tabs-viewmenubar');
     }
 
-    return {
+/* eslint-enable indent */
-        setTabs: setTabs,
-        getTabsElement: getTabsElement,
-        selectedTabIndex: selectedTabIndex
-    };
-});

src/components/metadataEditor/metadataEditor.js

@@ -212,7 +212,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     function addElementToList(source, sortCallback) {
         require(['prompt'], function (prompt) {
 
-            prompt({
+            prompt.default({
                 label: 'Value:'
             }).then(function (text) {
                 var list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList');

src/components/multiSelect/multiSelect.js

@@ -1,13 +1,20 @@
-define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'globalize', 'appRouter', 'dom', 'css!./multiSelect'], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) {
+import browser from 'browser';
-    'use strict';
+import appHost from 'apphost';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import dom from 'dom';
+import 'css!./multiSelect';
 
-    var selectedItems = [];
+/* eslint-disable indent */
-    var selectedElements = [];
+
-    var currentSelectionCommandsPanel;
+    let selectedItems = [];
+    let selectedElements = [];
+    let currentSelectionCommandsPanel;
 
     function hideSelections() {
 
-        var selectionCommandsPanel = currentSelectionCommandsPanel;
+        const selectionCommandsPanel = currentSelectionCommandsPanel;
         if (selectionCommandsPanel) {
 
             selectionCommandsPanel.parentNode.removeChild(selectionCommandsPanel);
@@ -15,10 +22,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
             selectedItems = [];
             selectedElements = [];
-            var elems = document.querySelectorAll('.itemSelectionPanel');
+            const elems = document.querySelectorAll('.itemSelectionPanel');
-            for (var i = 0, length = elems.length; i < length; i++) {
+            for (let i = 0, length = elems.length; i < length; i++) {
 
-                var parent = elems[i].parentNode;
+                const parent = elems[i].parentNode;
                 parent.removeChild(elems[i]);
                 parent.classList.remove('withMultiSelect');
             }
@@ -29,14 +36,14 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         // toggle the checkbox, if it wasn't clicked on
         if (!dom.parentWithClass(e.target, 'chkItemSelect')) {
-            var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
+            const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
 
             if (chkItemSelect) {
 
                 if (chkItemSelect.classList.contains('checkedInitial')) {
                     chkItemSelect.classList.remove('checkedInitial');
                 } else {
-                    var newValue = !chkItemSelect.checked;
+                    const newValue = !chkItemSelect.checked;
                     chkItemSelect.checked = newValue;
                     updateItemSelection(chkItemSelect, newValue);
                 }
@@ -50,11 +57,11 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function updateItemSelection(chkItemSelect, selected) {
 
-        var id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id');
+        const id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id');
 
         if (selected) {
 
-            var current = selectedItems.filter(function (i) {
+            const current = selectedItems.filter(i => {
                 return i === id;
             });
 
@@ -64,16 +71,16 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
             }
 
         } else {
-            selectedItems = selectedItems.filter(function (i) {
+            selectedItems = selectedItems.filter(i => {
                 return i !== id;
             });
-            selectedElements = selectedElements.filter(function (i) {
+            selectedElements = selectedElements.filter(i => {
                 return i !== chkItemSelect;
             });
         }
 
         if (selectedItems.length) {
-            var itemSelectionCount = document.querySelector('.itemSelectionCount');
+            const itemSelectionCount = document.querySelector('.itemSelectionCount');
             if (itemSelectionCount) {
                 itemSelectionCount.innerHTML = selectedItems.length;
             }
@@ -88,33 +95,33 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function showSelection(item, isChecked) {
 
-        var itemSelectionPanel = item.querySelector('.itemSelectionPanel');
+        let itemSelectionPanel = item.querySelector('.itemSelectionPanel');
 
         if (!itemSelectionPanel) {
 
             itemSelectionPanel = document.createElement('div');
             itemSelectionPanel.classList.add('itemSelectionPanel');
 
-            var parent = item.querySelector('.cardBox') || item.querySelector('.cardContent');
+            const parent = item.querySelector('.cardBox') || item.querySelector('.cardContent');
             parent.classList.add('withMultiSelect');
             parent.appendChild(itemSelectionPanel);
 
-            var cssClass = 'chkItemSelect';
+            let cssClass = 'chkItemSelect';
             if (isChecked && !browser.firefox) {
                 // In firefox, the initial tap hold doesnt' get treated as a click
                 // In other browsers it does, so we need to make sure that initial click is ignored
                 cssClass += ' checkedInitial';
             }
-            var checkedAttribute = isChecked ? ' checked' : '';
+            const checkedAttribute = isChecked ? ' checked' : '';
-            itemSelectionPanel.innerHTML = '<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="' + cssClass + '"' + checkedAttribute + '/><span></span></label>';
+            itemSelectionPanel.innerHTML = `<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="${cssClass}"${checkedAttribute}/><span></span></label>`;
-            var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
+            const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
             chkItemSelect.addEventListener('change', onSelectionChange);
         }
     }
 
     function showSelectionCommands() {
 
-        var selectionCommandsPanel = currentSelectionCommandsPanel;
+        let selectionCommandsPanel = currentSelectionCommandsPanel;
 
         if (!selectionCommandsPanel) {
 
@@ -124,19 +131,19 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
             document.body.appendChild(selectionCommandsPanel);
             currentSelectionCommandsPanel = selectionCommandsPanel;
 
-            var html = '';
+            let html = '';
 
             html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><span class="material-icons close"></span></button>';
             html += '<h1 class="itemSelectionCount"></h1>';
 
             const moreIcon = 'more_vert';
-            html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ' + moreIcon + '"></span></button>';
+            html += `<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ${moreIcon}"></span></button>`;
 
             selectionCommandsPanel.innerHTML = html;
 
             selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections);
 
-            var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions');
+            const btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions');
 
             dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true });
         }
@@ -144,9 +151,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function alertText(options) {
 
-        return new Promise(function (resolve, reject) {
+        return new Promise((resolve, reject) => {
 
-            require(['alert'], function (alert) {
+            import('alert').then(({default: alert}) => {
                 alert(options).then(resolve, resolve);
             });
         });
@@ -154,24 +161,24 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function deleteItems(apiClient, itemIds) {
 
-        return new Promise(function (resolve, reject) {
+        return new Promise((resolve, reject) => {
 
-            var msg = globalize.translate('ConfirmDeleteItem');
+            let msg = globalize.translate('ConfirmDeleteItem');
-            var title = globalize.translate('HeaderDeleteItem');
+            let title = globalize.translate('HeaderDeleteItem');
 
             if (itemIds.length > 1) {
                 msg = globalize.translate('ConfirmDeleteItems');
                 title = globalize.translate('HeaderDeleteItems');
             }
 
-            require(['confirm'], function (confirm) {
+            import('confirm').then(({default: confirm}) => {
 
-                confirm(msg, title).then(function () {
+                confirm(msg, title).then(() => {
-                    var promises = itemIds.map(function (itemId) {
+                    const promises = itemIds.map(itemId => {
                         apiClient.deleteItem(itemId);
                     });
 
-                    Promise.all(promises).then(resolve, function () {
+                    Promise.all(promises).then(resolve, () => {
 
                         alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject);
                     });
@@ -183,11 +190,11 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function showMenuForSelectedItems(e) {
 
-        var apiClient = connectionManager.currentApiClient();
+        const apiClient = connectionManager.currentApiClient();
 
-        apiClient.getCurrentUser().then(function (user) {
+        apiClient.getCurrentUser().then(user => {
 
-            var menuItems = [];
+            const menuItems = [];
 
             menuItems.push({
                 name: globalize.translate('AddToCollection'),
@@ -244,17 +251,17 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                 icon: 'refresh'
             });
 
-            require(['actionsheet'], function (actionsheet) {
+            import('actionsheet').then(({default: actionsheet}) => {
                 actionsheet.show({
                     items: menuItems,
                     positionTo: e.target,
                     callback: function (id) {
-                        var items = selectedItems.slice(0);
+                        const items = selectedItems.slice(0);
-                        var serverId = apiClient.serverInfo().Id;
+                        const serverId = apiClient.serverInfo().Id;
 
                         switch (id) {
                             case 'addtocollection':
-                                require(['collectionEditor'], function (collectionEditor) {
+                                import('collectionEditor').then(({default: collectionEditor}) => {
                                     new collectionEditor.showEditor({
                                         items: items,
                                         serverId: serverId
@@ -264,7 +271,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                                 dispatchNeedsRefresh();
                                 break;
                             case 'playlist':
-                                require(['playlistEditor'], function (playlistEditor) {
+                                import('playlistEditor').then(({default: playlistEditor}) => {
                                     new playlistEditor.showEditor({
                                         items: items,
                                         serverId: serverId
@@ -282,21 +289,21 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                                 combineVersions(apiClient, items);
                                 break;
                             case 'markplayed':
-                                items.forEach(function (itemId) {
+                                items.forEach(itemId => {
                                     apiClient.markPlayed(apiClient.getCurrentUserId(), itemId);
                                 });
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
                             case 'markunplayed':
-                                items.forEach(function (itemId) {
+                                items.forEach(itemId => {
                                     apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId);
                                 });
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
                             case 'refresh':
-                                require(['refreshDialog'], function (refreshDialog) {
+                                import('refreshDialog').then(({default: refreshDialog}) => {
                                     new refreshDialog({
                                         itemIds: items,
                                         serverId: serverId
@@ -317,18 +324,18 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function dispatchNeedsRefresh() {
 
-        var elems = [];
+        const elems = [];
 
-        [].forEach.call(selectedElements, function (i) {
+        [].forEach.call(selectedElements, i => {
 
-            var container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer');
+            const container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer');
 
-            if (container && elems.indexOf(container) === -1) {
+            if (container && !elems.includes(container)) {
                 elems.push(container);
             }
         });
 
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (let i = 0, length = elems.length; i < length; i++) {
             elems[i].notifyRefreshNeeded(true);
         }
     }
@@ -337,8 +344,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         if (selection.length < 2) {
 
-            require(['alert'], function (alert) {
+            import('alert').then(({default: alert}) => {
-                alert.default({
+                alert({
+
                     text: globalize.translate('PleaseSelectTwoItems')
                 });
             });
@@ -352,7 +360,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
             type: 'POST',
             url: apiClient.getUrl('Videos/MergeVersions', { Ids: selection.join(',') })
 
-        }).then(function () {
+        }).then(() => {
 
             loading.hide();
             hideSelections();
@@ -362,9 +370,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function showSelections(initialCard) {
 
-        require(['emby-checkbox'], function () {
+        import('emby-checkbox').then(() => {
-            var cards = document.querySelectorAll('.card');
+            const cards = document.querySelectorAll('.card');
-            for (var i = 0, length = cards.length; i < length; i++) {
+            for (let i = 0, length = cards.length; i < length; i++) {
                 showSelection(cards[i], initialCard === cards[i]);
             }
 
@@ -375,13 +383,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function onContainerClick(e) {
 
-        var target = e.target;
+        const target = e.target;
 
         if (selectedItems.length) {
 
-            var card = dom.parentWithClass(target, 'card');
+            const card = dom.parentWithClass(target, 'card');
             if (card) {
-                var itemSelectionPanel = card.querySelector('.itemSelectionPanel');
+                const itemSelectionPanel = card.querySelector('.itemSelectionPanel');
                 if (itemSelectionPanel) {
                     return onItemSelectionPanelClick(e, itemSelectionPanel);
                 }
@@ -395,15 +403,15 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     document.addEventListener('viewbeforehide', hideSelections);
 
-    return function (options) {
+    export default function (options) {
 
-        var self = this;
+        const self = this;
 
-        var container = options.container;
+        const container = options.container;
 
         function onTapHold(e) {
 
-            var card = dom.parentWithClass(e.target, 'card');
+            const card = dom.parentWithClass(e.target, 'card');
 
             if (card) {
 
@@ -423,13 +431,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
             return e.changedTouches || e.targetTouches || e.touches;
         }
 
-        var touchTarget;
+        let touchTarget;
-        var touchStartTimeout;
+        let touchStartTimeout;
-        var touchStartX;
+        let touchStartX;
-        var touchStartY;
+        let touchStartY;
         function onTouchStart(e) {
 
-            var touch = getTouches(e)[0];
+            const touch = getTouches(e)[0];
             touchTarget = null;
             touchStartX = 0;
             touchStartY = 0;
@@ -437,10 +445,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
             if (touch) {
                 touchStartX = touch.clientX;
                 touchStartY = touch.clientY;
-                var element = touch.target;
+                const element = touch.target;
 
                 if (element) {
-                    var card = dom.parentWithClass(element, 'card');
+                    const card = dom.parentWithClass(element, 'card');
 
                     if (card) {
 
@@ -459,13 +467,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         function onTouchMove(e) {
 
             if (touchTarget) {
-                var touch = getTouches(e)[0];
+                const touch = getTouches(e)[0];
-                var deltaX;
+                let deltaX;
-                var deltaY;
+                let deltaY;
 
                 if (touch) {
-                    var touchEndX = touch.clientX || 0;
+                    const touchEndX = touch.clientX || 0;
-                    var touchEndY = touch.clientY || 0;
+                    const touchEndY = touch.clientY || 0;
                     deltaX = Math.abs(touchEndX - (touchStartX || 0));
                     deltaY = Math.abs(touchEndY - (touchStartY || 0));
                 } else {
@@ -509,7 +517,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                 return;
             }
 
-            var card = dom.parentWithClass(touchTarget, 'card');
+            const card = dom.parentWithClass(touchTarget, 'card');
             touchTarget = null;
 
             if (card) {
@@ -556,12 +564,12 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         self.onContainerClick = onContainerClick;
 
-        self.destroy = function () {
+        self.destroy = () => {
 
             container.removeEventListener('click', onContainerClick);
             container.removeEventListener('contextmenu', onTapHold);
 
-            var element = container;
+            const element = container;
 
             dom.removeEventListener(element, 'touchstart', onTouchStart, {
                 passive: true
@@ -586,5 +594,6 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                 passive: true
             });
         };
-    };
+    }
-});
+
+/* eslint-enable indent */

src/components/playbackSettings/playbackSettings.js

@@ -1,31 +1,42 @@
-define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'qualityoptions', 'globalize', 'loading', 'connectionManager', 'dom', 'events', 'emby-select', 'emby-checkbox'], function (require, browser, appSettings, appHost, focusManager, qualityoptions, globalize, loading, connectionManager, dom, events) {
+import browser from 'browser';
-    'use strict';
+import appSettings from 'appSettings';
+import appHost from 'apphost';
+import focusManager from 'focusManager';
+import qualityoptions from 'qualityoptions';
+import globalize from 'globalize';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
+import events from 'events';
+import 'emby-select';
+import 'emby-checkbox';
+
+/* eslint-disable indent */
 
     function fillSkipLengths(select) {
 
-        var options = [5, 10, 15, 20, 25, 30];
+        const options = [5, 10, 15, 20, 25, 30];
 
-        select.innerHTML = options.map(function (option) {
+        select.innerHTML = options.map(option => {
             return {
                 name: globalize.translate('ValueSeconds', option),
                 value: option * 1000
             };
-        }).map(function (o) {
+        }).map(o => {
-            return '<option value="' + o.value + '">' + o.name + '</option>';
+            return `<option value="${o.value}">${o.name}</option>`;
         }).join('');
     }
 
     function populateLanguages(select, languages) {
 
-        var html = '';
+        let html = '';
 
-        html += "<option value=''>" + globalize.translate('AnyLanguage') + '</option>';
+        html += `<option value=''>${globalize.translate('AnyLanguage')}</option>`;
 
-        for (var i = 0, length = languages.length; i < length; i++) {
+        for (let i = 0, length = languages.length; i < length; i++) {
 
-            var culture = languages[i];
+            const culture = languages[i];
 
-            html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
+            html += `<option value='${culture.ThreeLetterISOLanguageName}'>${culture.DisplayName}</option>`;
         }
 
         select.innerHTML = html;
@@ -33,7 +44,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
 
     function setMaxBitrateIntoField(select, isInNetwork, mediatype) {
 
-        var options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({
+        const options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({
 
             currentMaxBitrate: appSettings.maxStreamingBitrate(isInNetwork, mediatype),
             isAutomaticBitrateEnabled: appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype),
@@ -47,10 +58,10 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
 
         });
 
-        select.innerHTML = options.map(function (i) {
+        select.innerHTML = options.map(i => {
 
             // render empty string instead of 0 for the auto option
-            return '<option value="' + (i.bitrate || '') + '">' + i.name + '</option>';
+            return `<option value="${i.bitrate || ''}">${i.name}</option>`;
         }).join('');
 
         if (appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype)) {
@@ -62,23 +73,23 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
 
     function fillChromecastQuality(select) {
 
-        var options = qualityoptions.getVideoQualityOptions({
+        const options = qualityoptions.getVideoQualityOptions({
 
             currentMaxBitrate: appSettings.maxChromecastBitrate(),
             isAutomaticBitrateEnabled: !appSettings.maxChromecastBitrate(),
             enableAuto: true
         });
 
-        select.innerHTML = options.map(function (i) {
+        select.innerHTML = options.map(i => {
 
             // render empty string instead of 0 for the auto option
-            return '<option value="' + (i.bitrate || '') + '">' + i.name + '</option>';
+            return `<option value="${i.bitrate || ''}">${i.name}</option>`;
         }).join('');
 
         select.value = appSettings.maxChromecastBitrate() || '';
     }
 
-    function setMaxBitrateFromField(select, isInNetwork, mediatype, value) {
+    function setMaxBitrateFromField(select, isInNetwork, mediatype) {
 
         if (select.value) {
             appSettings.maxStreamingBitrate(isInNetwork, mediatype, select.value);
@@ -110,7 +121,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
             return;
         }
 
-        apiClient.getEndpointInfo().then(function (endpointInfo) {
+        apiClient.getEndpointInfo().then(endpointInfo => {
 
             if (endpointInfo.IsInNetwork) {
 
@@ -133,7 +144,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
         });
     }
 
-    function showOrHideEpisodesField(context, user, apiClient) {
+    function showOrHideEpisodesField(context) {
 
         if (browser.tizen || browser.web0s) {
             context.querySelector('.fldEpisodeAutoPlay').classList.add('hide');
@@ -145,12 +156,12 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
 
     function loadForm(context, user, userSettings, apiClient) {
 
-        var loggedInUserId = apiClient.getCurrentUserId();
+        const loggedInUserId = apiClient.getCurrentUserId();
-        var userId = user.Id;
+        const userId = user.Id;
 
         showHideQualityFields(context, user, apiClient);
 
-        apiClient.getCultures().then(function (allCultures) {
+        apiClient.getCultures().then(allCultures => {
 
             populateLanguages(context.querySelector('#selectAudioLanguage'), allCultures);
 
@@ -159,7 +170,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
         });
 
         // hide cinema mode options if disabled at server level
-        apiClient.getNamedConfiguration('cinemamode').then(function (cinemaConfig) {
+        apiClient.getNamedConfiguration('cinemamode').then(cinemaConfig => {
 
             if (cinemaConfig.EnableIntrosForMovies || cinemaConfig.EnableIntrosForEpisodes) {
                 context.querySelector('.cinemaModeOptions').classList.remove('hide');
@@ -204,18 +215,18 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
 
         fillChromecastQuality(context.querySelector('.selectChromecastVideoQuality'));
 
-        var selectChromecastVersion = context.querySelector('.selectChromecastVersion');
+        const selectChromecastVersion = context.querySelector('.selectChromecastVersion');
         selectChromecastVersion.value = userSettings.chromecastVersion();
 
-        var selectSkipForwardLength = context.querySelector('.selectSkipForwardLength');
+        const selectSkipForwardLength = context.querySelector('.selectSkipForwardLength');
         fillSkipLengths(selectSkipForwardLength);
         selectSkipForwardLength.value = userSettings.skipForwardLength();
 
-        var selectSkipBackLength = context.querySelector('.selectSkipBackLength');
+        const selectSkipBackLength = context.querySelector('.selectSkipBackLength');
         fillSkipLengths(selectSkipBackLength);
         selectSkipBackLength.value = userSettings.skipBackLength();
 
-        showOrHideEpisodesField(context, user, apiClient);
+        showOrHideEpisodesField(context);
 
         loading.hide();
     }
@@ -248,20 +259,20 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
 
         loading.show();
 
-        apiClient.getUser(userId).then(function (user) {
+        apiClient.getUser(userId).then(user => {
 
-            saveUser(context, user, userSettings, apiClient).then(function () {
+            saveUser(context, user, userSettings, apiClient).then(() => {
 
                 loading.hide();
                 if (enableSaveConfirmation) {
-                    require(['toast'], function (toast) {
+                    import('toast').then(({default: toast}) => {
                         toast(globalize.translate('SettingsSaved'));
                     });
                 }
 
                 events.trigger(instance, 'saved');
 
-            }, function () {
+            }, () => {
                 loading.hide();
             });
         });
@@ -269,14 +280,14 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
 
     function onSubmit(e) {
 
-        var self = this;
+        const self = this;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
+        const apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userId = self.options.userId;
+        const userId = self.options.userId;
-        var userSettings = self.options.userSettings;
+        const userSettings = self.options.userSettings;
 
-        userSettings.setUserInfo(userId, apiClient).then(function () {
+        userSettings.setUserInfo(userId, apiClient).then(() => {
 
-            var enableSaveConfirmation = self.options.enableSaveConfirmation;
+            const enableSaveConfirmation = self.options.enableSaveConfirmation;
             save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
         });
 
@@ -289,7 +300,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
 
     function embed(options, self) {
 
-        require(['text!./playbackSettings.template.html'], function (template) {
+        return import('text!./playbackSettings.template.html').then(({default: template}) => {
 
             options.element.innerHTML = globalize.translateDocument(template, 'core');
 
@@ -307,43 +318,43 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
         });
     }
 
-    function PlaybackSettings(options) {
+    class PlaybackSettings {
+        constructor(options) {
+            this.options = options;
+            embed(options, this);
+        }
 
-        this.options = options;
+        loadData() {
 
-        embed(options, this);
+            const self = this;
+            const context = self.options.element;
+
+            loading.show();
+
+            const userId = self.options.userId;
+            const apiClient = connectionManager.getApiClient(self.options.serverId);
+            const userSettings = self.options.userSettings;
+
+            apiClient.getUser(userId).then(user => {
+
+                userSettings.setUserInfo(userId, apiClient).then(() => {
+
+                    self.dataLoaded = true;
+
+                    loadForm(context, user, userSettings, apiClient);
+                });
+            });
+        }
+
+        submit() {
+            onSubmit.call(this);
+        }
+
+        destroy() {
+
+            this.options = null;
+        }
     }
 
-    PlaybackSettings.prototype.loadData = function () {
+/* eslint-enable indent */
-
+export default PlaybackSettings;
-        var self = this;
-        var context = self.options.element;
-
-        loading.show();
-
-        var userId = self.options.userId;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userSettings = self.options.userSettings;
-
-        apiClient.getUser(userId).then(function (user) {
-
-            userSettings.setUserInfo(userId, apiClient).then(function () {
-
-                self.dataLoaded = true;
-
-                loadForm(context, user, userSettings, apiClient);
-            });
-        });
-    };
-
-    PlaybackSettings.prototype.submit = function () {
-        onSubmit.call(this);
-    };
-
-    PlaybackSettings.prototype.destroy = function () {
-
-        this.options = null;
-    };
-
-    return PlaybackSettings;
-});

src/components/prompt/prompt.js

@@ -1,12 +1,24 @@
-define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'dom', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle'], function(browser, dialogHelper, layoutManager, scrollHelper, globalize, dom, require) {
+import browser from 'browser';
-    'use strict';
+import dialogHelper from 'dialogHelper';
+import layoutManager from 'layoutManager';
+import scrollHelper from 'scrollHelper';
+import globalize from 'globalize';
+import dom from 'dom';
+import 'material-icons';
+import 'emby-button';
+import 'paper-icon-button-light';
+import 'emby-input';
+import 'formDialogStyle';
+
+/* eslint-disable indent */
+export default (() => {
 
     function replaceAll(str, find, replace) {
         return str.split(find).join(replace);
     }
 
     function setInputProperties(dlg, options) {
-        var txtInput = dlg.querySelector('#txtInput');
+        const txtInput = dlg.querySelector('#txtInput');
 
         if (txtInput.label) {
             txtInput.label(options.label || '');
@@ -17,7 +29,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
     }
 
     function showDialog(options, template) {
-        var dialogOptions = {
+        const dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
@@ -26,7 +38,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
             dialogOptions.size = 'fullscreen';
         }
 
-        var dlg = dialogHelper.createDialog(dialogOptions);
+        const dlg = dialogHelper.createDialog(dialogOptions);
 
         dlg.classList.add('formDialog');
 
@@ -39,7 +51,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
             dlg.classList.add('dialog-fullscreen-lowres');
         }
 
-        dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
+        dlg.querySelector('.btnCancel').addEventListener('click', () => {
             dialogHelper.close(dlg);
         });
 
@@ -53,16 +65,16 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
 
         setInputProperties(dlg, options);
 
-        var submitValue;
+        let submitValue;
 
-        dlg.querySelector('form').addEventListener('submit', function (e) {
+        dlg.querySelector('form').addEventListener('submit', e => {
 
             submitValue = dlg.querySelector('#txtInput').value;
             e.preventDefault();
             e.stopPropagation();
 
             // Important, don't close the dialog until after the form has completed submitting, or it will cause an error in Chrome
-            setTimeout(function () {
+            setTimeout(() => {
                 dialogHelper.close(dlg);
             }, 300);
 
@@ -71,9 +83,9 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
 
         dlg.querySelector('.submitText').innerHTML = options.confirmText || globalize.translate('ButtonOk');
 
-        dlg.style.minWidth = (Math.min(400, dom.getWindowSize().innerWidth - 50)) + 'px';
+        dlg.style.minWidth = `${Math.min(400, dom.getWindowSize().innerWidth - 50)}px`;
 
-        return dialogHelper.open(dlg).then(function () {
+        return dialogHelper.open(dlg).then(() => {
             if (layoutManager.tv) {
                 scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
             }
@@ -87,7 +99,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
     }
 
     if ((browser.tv || browser.xboxOne) && window.confirm) {
-        return function (options) {
+        return options => {
             if (typeof options === 'string') {
                 options = {
                     label: '',
@@ -95,8 +107,8 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
                 };
             }
 
-            var label = replaceAll(options.label || '', '<br/>', '\n');
+            const label = replaceAll(options.label || '', '<br/>', '\n');
-            var result = prompt(label, options.text || '');
+            const result = prompt(label, options.text || '');
 
             if (result) {
                 return Promise.resolve(result);
@@ -105,9 +117,9 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
             }
         };
     } else {
-        return function (options) {
+        return options => {
-            return new Promise(function (resolve, reject) {
+            return new Promise((resolve, reject) => {
-                require(['text!./prompt.template.html'], function (template) {
+                import('text!./prompt.template.html').then(({default: template}) => {
                     if (typeof options === 'string') {
                         options = {
                             title: '',
@@ -119,4 +131,5 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
             });
         };
     }
-});
+})();
+/* eslint-enable indent */

src/components/recordingcreator/recordinghelper.js

@@ -34,7 +34,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 
             require(['confirm'], function (confirm) {
 
-                confirm({
+                confirm.default({
 
                     text: globalize.translate('MessageConfirmRecordingCancellation'),
                     primary: 'delete',
@@ -59,7 +59,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 
             require(['confirm'], function (confirm) {
 
-                confirm({
+                confirm.default({
 
                     text: globalize.translate('MessageConfirmRecordingCancellation'),
                     primary: 'delete',

src/components/remotecontrol/remotecontrol.js

@@ -175,7 +175,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                     context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>';
                 });
             } else {
-                backdrop.clear();
+                backdrop.clearBackdrop();
                 context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
             }
         }

src/components/skinManager.js

@@ -84,7 +84,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize',
             currentSound = null;
         }
 
-        backdrop.clear();
+        backdrop.clearBackdrop();
     }
 
     function onThemeLoaded() {

src/components/subtitleeditor/subtitleeditor.js

@@ -69,7 +69,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
         require(['confirm'], function (confirm) {
 
-            confirm({
+            confirm.default({
 
                 title: globalize.translate('ConfirmDeletion'),
                 text: msg,

src/components/tabbedview/tabbedview.js

@@ -95,7 +95,7 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
     TabbedView.prototype.onResume = function (options) {
 
         this.setTitle();
-        backdrop.clear();
+        backdrop.clearBackdrop();
 
         var currentTabController = this.currentTabController;
 

src/controllers/dashboard/devices/device.js

@@ -1,5 +1,10 @@
-define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function (loading, libraryMenu, dom) {
+import loading from 'loading';
-    'use strict';
+import libraryMenu from 'libraryMenu';
+import dom from 'dom';
+import 'emby-input';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function load(page, device, deviceOptions) {
         page.querySelector('#txtCustomName', page).value = deviceOptions.CustomName || '';
@@ -7,13 +12,13 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function
     }
 
     function loadData() {
-        var page = this;
+        const page = this;
         loading.show();
-        var id = getParameterByName('id');
+        const id = getParameterByName('id');
-        var promise1 = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', {
+        const promise1 = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', {
             Id: id
         }));
-        var promise2 = ApiClient.getJSON(ApiClient.getUrl('Devices/Options', {
+        const promise2 = ApiClient.getJSON(ApiClient.getUrl('Devices/Options', {
             Id: id
         }));
         Promise.all([promise1, promise2]).then(function (responses) {
@@ -23,7 +28,7 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function
     }
 
     function save(page) {
-        var id = getParameterByName('id');
+        const id = getParameterByName('id');
         ApiClient.ajax({
             url: ApiClient.getUrl('Devices/Options', {
                 Id: id
@@ -37,14 +42,15 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function
     }
 
     function onSubmit(e) {
-        var form = this;
+        const form = this;
         save(dom.parentWithClass(form, 'page'));
         e.preventDefault();
         return false;
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         view.querySelector('form').addEventListener('submit', onSubmit);
         view.addEventListener('viewshow', loadData);
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/devices/devices.js

@@ -1,14 +1,24 @@
-define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'date-fns', 'dfnshelper', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (loading, dom, libraryMenu, globalize, imageHelper, datefns, dfnshelper) {
+import loading from 'loading';
-    'use strict';
+import dom from 'dom';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+import imageHelper from 'scripts/imagehelper';
+import * as datefns from 'date-fns';
+import dfnshelper from 'dfnshelper';
+import 'emby-button';
+import 'emby-itemscontainer';
+import 'cardStyle';
+
+/* eslint-disable indent */
 
     function canDelete(deviceId) {
         return deviceId !== ApiClient.deviceId();
     }
 
     function deleteDevice(page, id) {
-        var msg = globalize.translate('DeleteDeviceConfirmation');
+        const msg = globalize.translate('DeleteDeviceConfirmation');
 
-        require(['confirm'], function (confirm) {
+        import('confirm').then(({default: confirm}) => {
             confirm({
                 text: msg,
                 title: globalize.translate('HeaderDeleteDevice'),
@@ -29,7 +39,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
     }
 
     function showDeviceMenu(view, btn, deviceId) {
-        var menuItems = [];
+        let menuItems = [];
 
         if (canEdit) {
             menuItems.push({
@@ -47,7 +57,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
             });
         }
 
-        require(['actionsheet'], function (actionsheet) {
+        import('actionsheet').then(({default: actionsheet}) => {
             actionsheet.show({
                 items: menuItems,
                 positionTo: btn,
@@ -66,15 +76,15 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
     }
 
     function load(page, devices) {
-        var html = '';
+        let html = '';
         html += devices.map(function (device) {
-            var deviceHtml = '';
+            let deviceHtml = '';
             deviceHtml += "<div data-id='" + device.Id + "' class='card backdropCard'>";
             deviceHtml += '<div class="cardBox visualCardBox">';
             deviceHtml += '<div class="cardScalable">';
             deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
             deviceHtml += '<a is="emby-linkbutton" href="' + (canEdit ? 'device.html?id=' + device.Id : '#') + '" class="cardContent cardImageContainer">';
-            var iconUrl = imageHelper.getDeviceIcon(device);
+            const iconUrl = imageHelper.getDeviceIcon(device);
 
             if (iconUrl) {
                 deviceHtml += '<div class="cardImage" style="background-image:url(\'' + iconUrl + "');background-size: auto 64%;background-position:center center;\">";
@@ -124,10 +134,10 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
         });
     }
 
-    var canEdit = ApiClient.isMinServerVersion('3.4.1.31');
+    const canEdit = ApiClient.isMinServerVersion('3.4.1.31');
-    return function (view, params) {
+    export default function (view, params) {
         view.querySelector('.devicesList').addEventListener('click', function (e) {
-            var btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu');
+            const btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu');
 
             if (btnDeviceMenu) {
                 showDeviceMenu(view, btnDeviceMenu, btnDeviceMenu.getAttribute('data-id'));
@@ -136,5 +146,6 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
         view.addEventListener('viewshow', function () {
             loadData(this);
         });
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/dlna/profile.js

@@ -1,10 +1,18 @@
-define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-input', 'emby-checkbox', 'listViewStyle', 'emby-button'], function ($, loading, globalize) {
+import $ from 'jQuery';
-    'use strict';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-select';
+import 'emby-button';
+import 'emby-input';
+import 'emby-checkbox';
+import 'listViewStyle';
+
+/* eslint-disable indent */
 
     function loadProfile(page) {
         loading.show();
-        var promise1 = getProfile();
+        const promise1 = getProfile();
-        var promise2 = ApiClient.getUsers();
+        const promise2 = ApiClient.getUsers();
         Promise.all([promise1, promise2]).then(function (responses) {
             currentProfile = responses[0];
             renderProfile(page, currentProfile, responses[1]);
@@ -13,8 +21,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
     }
 
     function getProfile() {
-        var id = getParameterByName('id');
+        const id = getParameterByName('id');
-        var url = id ? 'Dlna/Profiles/' + id : 'Dlna/Profiles/Default';
+        const url = id ? 'Dlna/Profiles/' + id : 'Dlna/Profiles/Default';
         return ApiClient.getJSON(ApiClient.getUrl(url));
     }
 
@@ -26,7 +34,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         $('#chkEnableAlbumArtInDidl', page).prop('checked', profile.EnableAlbumArtInDidl);
         $('#chkEnableSingleImageLimit', page).prop('checked', profile.EnableSingleAlbumArtLimit);
         renderXmlDocumentAttributes(page, profile.XmlRootAttributes || []);
-        var idInfo = profile.Identification || {};
+        const idInfo = profile.Identification || {};
         renderIdentificationHeaders(page, idInfo.Headers || []);
         renderSubtitleProfiles(page, profile.SubtitleProfiles || []);
         $('#txtInfoFriendlyName', page).val(profile.FriendlyName || '');
@@ -65,7 +73,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         profile.ContainerProfiles = profile.ContainerProfiles || [];
         profile.CodecProfiles = profile.CodecProfiles || [];
         profile.ResponseProfiles = profile.ResponseProfiles || [];
-        var usersHtml = '<option></option>' + users.map(function (u) {
+        const usersHtml = '<option></option>' + users.map(function (u) {
             return '<option value="' + u.Id + '">' + u.Name + '</option>';
         }).join('');
         $('#selectUser', page).html(usersHtml).val(profile.UserId || '');
@@ -73,9 +81,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
     }
 
     function renderIdentificationHeaders(page, headers) {
-        var index = 0;
+        let index = 0;
-        var html = '<div class="paperList">' + headers.map(function (h) {
+        const html = '<div class="paperList">' + headers.map(function (h) {
-            var li = '<div class="listItem">';
+            let li = '<div class="listItem">';
             li += '<span class="material-icons listItemIcon info"></span>';
             li += '<div class="listItemBody">';
             li += '<h3 class="listItemBodyText">' + h.Name + ': ' + (h.Value || '') + '</h3>';
@@ -86,9 +94,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
             index++;
             return li;
         }).join('') + '</div>';
-        var elem = $('.httpHeaderIdentificationList', page).html(html).trigger('create');
+        const elem = $('.httpHeaderIdentificationList', page).html(html).trigger('create');
         $('.btnDeleteIdentificationHeader', elem).on('click', function () {
-            var itemIndex = parseInt(this.getAttribute('data-index'));
+            const itemIndex = parseInt(this.getAttribute('data-index'));
             currentProfile.Identification.Headers.splice(itemIndex, 1);
             renderIdentificationHeaders(page, currentProfile.Identification.Headers);
         });
@@ -106,7 +114,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         isSubProfileNew = null == header;
         header = header || {};
         currentSubProfile = header;
-        var popup = $('#identificationHeaderPopup', page);
+        const popup = $('#identificationHeaderPopup', page);
         $('#txtIdentificationHeaderName', popup).val(header.Name || '');
         $('#txtIdentificationHeaderValue', popup).val(header.Value || '');
         $('#selectMatchType', popup).val(header.Match || 'Equals');
@@ -130,8 +138,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
     }
 
     function renderXmlDocumentAttributes(page, attribute) {
-        var html = '<div class="paperList">' + attribute.map(function (h) {
+        const html = '<div class="paperList">' + attribute.map(function (h) {
-            var li = '<div class="listItem">';
+            let li = '<div class="listItem">';
             li += '<span class="material-icons listItemIcon info"></span>';
             li += '<div class="listItemBody">';
             li += '<h3 class="listItemBodyText">' + h.Name + ' = ' + (h.Value || '') + '</h3>';
@@ -139,9 +147,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
             li += '<button type="button" is="paper-icon-button-light" class="btnDeleteXmlAttribute listItemButton" data-index="0"><span class="material-icons delete"></span></button>';
             return li += '</div>';
         }).join('') + '</div>';
-        var elem = $('.xmlDocumentAttributeList', page).html(html).trigger('create');
+        const elem = $('.xmlDocumentAttributeList', page).html(html).trigger('create');
         $('.btnDeleteXmlAttribute', elem).on('click', function () {
-            var itemIndex = parseInt(this.getAttribute('data-index'));
+            const itemIndex = parseInt(this.getAttribute('data-index'));
             currentProfile.XmlRootAttributes.splice(itemIndex, 1);
             renderXmlDocumentAttributes(page, currentProfile.XmlRootAttributes);
         });
@@ -151,7 +159,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         isSubProfileNew = null == attribute;
         attribute = attribute || {};
         currentSubProfile = attribute;
-        var popup = $('#xmlAttributePopup', page);
+        const popup = $('#xmlAttributePopup', page);
         $('#txtXmlAttributeName', popup).val(attribute.Name || '');
         $('#txtXmlAttributeValue', popup).val(attribute.Value || '');
         openPopup(popup[0]);
@@ -171,9 +179,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
     }
 
     function renderSubtitleProfiles(page, profiles) {
-        var index = 0;
+        let index = 0;
-        var html = '<div class="paperList">' + profiles.map(function (h) {
+        const html = '<div class="paperList">' + profiles.map(function (h) {
-            var li = '<div class="listItem lnkEditSubProfile" data-index="' + index + '">';
+            let li = '<div class="listItem lnkEditSubProfile" data-index="' + index + '">';
             li += '<span class="material-icons listItemIcon info"></span>';
             li += '<div class="listItemBody">';
             li += '<h3 class="listItemBodyText">' + (h.Format || '') + '</h3>';
@@ -183,14 +191,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
             index++;
             return li;
         }).join('') + '</div>';
-        var elem = $('.subtitleProfileList', page).html(html).trigger('create');
+        const elem = $('.subtitleProfileList', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var itemIndex = parseInt(this.getAttribute('data-index'));
+            const itemIndex = parseInt(this.getAttribute('data-index'));
             currentProfile.SubtitleProfiles.splice(itemIndex, 1);
             renderSubtitleProfiles(page, currentProfile.SubtitleProfiles);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var itemIndex = parseInt(this.getAttribute('data-index'));
+            const itemIndex = parseInt(this.getAttribute('data-index'));
             editSubtitleProfile(page, currentProfile.SubtitleProfiles[itemIndex]);
         });
     }
@@ -199,7 +207,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         isSubProfileNew = null == profile;
         profile = profile || {};
         currentSubProfile = profile;
-        var popup = $('#subtitleProfilePopup', page);
+        const popup = $('#subtitleProfilePopup', page);
         $('#txtSubtitleProfileFormat', popup).val(profile.Format || '');
         $('#selectSubtitleProfileMethod', popup).val(profile.Method || '');
         $('#selectSubtitleProfileDidlMode', popup).val(profile.DidlMode || '');
@@ -244,12 +252,12 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
     }
 
     function renderDirectPlayProfiles(page, profiles) {
-        var html = '';
+        let html = '';
         html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
-        var currentType;
+        let currentType;
 
-        for (var i = 0, length = profiles.length; i < length; i++) {
+        for (let i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
+            const profile = profiles[i];
 
             if (profile.Type !== currentType) {
                 html += '<li data-role="list-divider">' + profile.Type + '</li>';
@@ -275,13 +283,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         }
 
         html += '</ul>';
-        var elem = $('.directPlayProfiles', page).html(html).trigger('create');
+        const elem = $('.directPlayProfiles', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var index = this.getAttribute('data-profileindex');
+            const index = this.getAttribute('data-profileindex');
             deleteDirectPlayProfile(page, index);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var index = parseInt(this.getAttribute('data-profileindex'));
+            const index = parseInt(this.getAttribute('data-profileindex'));
             editDirectPlayProfile(page, currentProfile.DirectPlayProfiles[index]);
         });
     }
@@ -295,7 +303,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         isSubProfileNew = null == directPlayProfile;
         directPlayProfile = directPlayProfile || {};
         currentSubProfile = directPlayProfile;
-        var popup = $('#popupEditDirectPlayProfile', page);
+        const popup = $('#popupEditDirectPlayProfile', page);
         $('#selectDirectPlayProfileType', popup).val(directPlayProfile.Type || 'Video').trigger('change');
         $('#txtDirectPlayContainer', popup).val(directPlayProfile.Container || '');
         $('#txtDirectPlayAudioCodec', popup).val(directPlayProfile.AudioCodec || '');
@@ -304,12 +312,12 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
     }
 
     function renderTranscodingProfiles(page, profiles) {
-        var html = '';
+        let html = '';
         html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
-        var currentType;
+        let currentType;
 
-        for (var i = 0, length = profiles.length; i < length; i++) {
+        for (let i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
+            let profile = profiles[i];
 
             if (profile.Type !== currentType) {
                 html += '<li data-role="list-divider">' + profile.Type + '</li>';
@@ -336,13 +344,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         }
 
         html += '</ul>';
-        var elem = $('.transcodingProfiles', page).html(html).trigger('create');
+        const elem = $('.transcodingProfiles', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var index = this.getAttribute('data-profileindex');
+            const index = this.getAttribute('data-profileindex');
             deleteTranscodingProfile(page, index);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var index = parseInt(this.getAttribute('data-profileindex'));
+            const index = parseInt(this.getAttribute('data-profileindex'));
             editTranscodingProfile(page, currentProfile.TranscodingProfiles[index]);
         });
     }
@@ -351,7 +359,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         isSubProfileNew = null == transcodingProfile;
         transcodingProfile = transcodingProfile || {};
         currentSubProfile = transcodingProfile;
-        var popup = $('#transcodingProfilePopup', page);
+        const popup = $('#transcodingProfilePopup', page);
         $('#selectTranscodingProfileType', popup).val(transcodingProfile.Type || 'Video').trigger('change');
         $('#txtTranscodingContainer', popup).val(transcodingProfile.Container || '');
         $('#txtTranscodingAudioCodec', popup).val(transcodingProfile.AudioCodec || '');
@@ -390,12 +398,12 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
     }
 
     function renderContainerProfiles(page, profiles) {
-        var html = '';
+        let html = '';
         html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
-        var currentType;
+        let currentType;
 
-        for (var i = 0, length = profiles.length; i < length; i++) {
+        for (let i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
+            let profile = profiles[i];
 
             if (profile.Type !== currentType) {
                 html += '<li data-role="list-divider">' + profile.Type + '</li>';
@@ -420,13 +428,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         }
 
         html += '</ul>';
-        var elem = $('.containerProfiles', page).html(html).trigger('create');
+        const elem = $('.containerProfiles', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var index = this.getAttribute('data-profileindex');
+            const index = this.getAttribute('data-profileindex');
             deleteContainerProfile(page, index);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var index = parseInt(this.getAttribute('data-profileindex'));
+            const index = parseInt(this.getAttribute('data-profileindex'));
             editContainerProfile(page, currentProfile.ContainerProfiles[index]);
         });
     }
@@ -440,7 +448,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         isSubProfileNew = null == containerProfile;
         containerProfile = containerProfile || {};
         currentSubProfile = containerProfile;
-        var popup = $('#containerProfilePopup', page);
+        const popup = $('#containerProfilePopup', page);
         $('#selectContainerProfileType', popup).val(containerProfile.Type || 'Video').trigger('change');
         $('#txtContainerProfileContainer', popup).val(containerProfile.Container || '');
         $('.radioTabButton:first', popup).trigger('click');
@@ -461,13 +469,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
     }
 
     function renderCodecProfiles(page, profiles) {
-        var html = '';
+        let html = '';
         html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
-        var currentType;
+        let currentType;
 
-        for (var i = 0, length = profiles.length; i < length; i++) {
+        for (let i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
+            let profile = profiles[i];
-            var type = profile.Type.replace('VideoAudio', 'Video Audio');
+            const type = profile.Type.replace('VideoAudio', 'Video Audio');
 
             if (type !== currentType) {
                 html += '<li data-role="list-divider">' + type + '</li>';
@@ -492,13 +500,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         }
 
         html += '</ul>';
-        var elem = $('.codecProfiles', page).html(html).trigger('create');
+        const elem = $('.codecProfiles', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var index = this.getAttribute('data-profileindex');
+            const index = this.getAttribute('data-profileindex');
             deleteCodecProfile(page, index);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var index = parseInt(this.getAttribute('data-profileindex'));
+            const index = parseInt(this.getAttribute('data-profileindex'));
             editCodecProfile(page, currentProfile.CodecProfiles[index]);
         });
     }
@@ -512,7 +520,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         isSubProfileNew = null == codecProfile;
         codecProfile = codecProfile || {};
         currentSubProfile = codecProfile;
-        var popup = $('#codecProfilePopup', page);
+        const popup = $('#codecProfilePopup', page);
         $('#selectCodecProfileType', popup).val(codecProfile.Type || 'Video').trigger('change');
         $('#txtCodecProfileCodec', popup).val(codecProfile.Codec || '');
         $('.radioTabButton:first', popup).trigger('click');
@@ -533,12 +541,12 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
     }
 
     function renderResponseProfiles(page, profiles) {
-        var html = '';
+        let html = '';
         html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
-        var currentType;
+        let currentType;
 
-        for (var i = 0, length = profiles.length; i < length; i++) {
+        for (let i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
+            const profile = profiles[i];
 
             if (profile.Type !== currentType) {
                 html += '<li data-role="list-divider">' + profile.Type + '</li>';
@@ -572,13 +580,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         }
 
         html += '</ul>';
-        var elem = $('.mediaProfiles', page).html(html).trigger('create');
+        const elem = $('.mediaProfiles', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var index = this.getAttribute('data-profileindex');
+            const index = this.getAttribute('data-profileindex');
             deleteResponseProfile(page, index);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var index = parseInt(this.getAttribute('data-profileindex'));
+            const index = parseInt(this.getAttribute('data-profileindex'));
             editResponseProfile(page, currentProfile.ResponseProfiles[index]);
         });
     }
@@ -592,7 +600,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         isSubProfileNew = null == responseProfile;
         responseProfile = responseProfile || {};
         currentSubProfile = responseProfile;
-        var popup = $('#responseProfilePopup', page);
+        const popup = $('#responseProfilePopup', page);
         $('#selectResponseProfileType', popup).val(responseProfile.Type || 'Video').trigger('change');
         $('#txtResponseProfileContainer', popup).val(responseProfile.Container || '');
         $('#txtResponseProfileAudioCodec', popup).val(responseProfile.AudioCodec || '');
@@ -618,7 +626,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
 
     function saveProfile(page, profile) {
         updateProfile(page, profile);
-        var id = getParameterByName('id');
+        const id = getParameterByName('id');
 
         if (id) {
             ApiClient.ajax({
@@ -627,7 +635,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
                 data: JSON.stringify(profile),
                 contentType: 'application/json'
             }).then(function () {
-                require(['toast'], function (toast) {
+                import('toast').then(({default: toast}) => {
                     toast('Settings saved.');
                 });
             }, Dashboard.processErrorResponse);
@@ -687,18 +695,18 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         profile.UserId = $('#selectUser', page).val();
     }
 
-    var currentProfile;
+    let currentProfile;
-    var currentSubProfile;
+    let currentSubProfile;
-    var isSubProfileNew;
+    let isSubProfileNew;
-    var allText = globalize.translate('LabelAll');
+    const allText = globalize.translate('LabelAll');
 
     $(document).on('pageinit', '#dlnaProfilePage', function () {
-        var page = this;
+        const page = this;
         $('.radioTabButton', page).on('click', function () {
             $(this).siblings().removeClass('ui-btn-active');
             $(this).addClass('ui-btn-active');
-            var value = 'A' == this.tagName ? this.getAttribute('data-value') : this.value;
+            const value = 'A' == this.tagName ? this.getAttribute('data-value') : this.value;
-            var elem = $('.' + value, page);
+            const elem = $('.' + value, page);
             elem.siblings('.tabContent').hide();
             elem.show();
         });
@@ -783,7 +791,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         $('.xmlAttributeForm').off('submit', DlnaProfilePage.onXmlAttributeFormSubmit).on('submit', DlnaProfilePage.onXmlAttributeFormSubmit);
         $('.subtitleProfileForm').off('submit', DlnaProfilePage.onSubtitleProfileFormSubmit).on('submit', DlnaProfilePage.onSubtitleProfileFormSubmit);
     }).on('pageshow', '#dlnaProfilePage', function () {
-        var page = this;
+        const page = this;
         $('#radioInfo', page).trigger('click');
         loadProfile(page);
     });
@@ -826,4 +834,5 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
             return false;
         }
     };
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/dlna/profiles.js

@@ -1,5 +1,11 @@
-define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-button'], function ($, globalize, loading, libraryMenu) {
+import $ from 'jQuery';
-    'use strict';
+import globalize from 'globalize';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import 'listViewStyle';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function loadProfiles(page) {
         loading.show();
@@ -23,14 +29,14 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
     }
 
     function renderProfiles(page, element, profiles) {
-        var html = '';
+        let html = '';
 
         if (profiles.length) {
             html += '<div class="paperList">';
         }
 
-        for (var i = 0, length = profiles.length; i < length; i++) {
+        for (let i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
+            let profile = profiles[i];
             html += '<div class="listItem listItem-border">';
             html += '<span class="listItemIcon material-icons live_tv"></span>';
             html += '<div class="listItemBody two-line">';
@@ -52,13 +58,13 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
 
         element.innerHTML = html;
         $('.btnDeleteProfile', element).on('click', function () {
-            var id = this.getAttribute('data-profileid');
+            const id = this.getAttribute('data-profileid');
             deleteProfile(page, id);
         });
     }
 
     function deleteProfile(page, id) {
-        require(['confirm'], function (confirm) {
+        import('confirm').then(({default: confirm}) => {
             confirm(globalize.translate('MessageConfirmProfileDeletion'), globalize.translate('HeaderConfirmProfileDeletion')).then(function () {
                 loading.show();
                 ApiClient.ajax({
@@ -86,4 +92,5 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
         libraryMenu.setTabs('dlna', 1, getTabs);
         loadProfiles(this);
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/dlna/settings.js

@@ -1,5 +1,9 @@
-define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, libraryMenu, globalize) {
+import $ from 'jQuery';
-    'use strict';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+
+/* eslint-disable indent */
 
     function loadPage(page, config, users) {
         page.querySelector('#chkEnablePlayTo').checked = config.EnablePlayTo;
@@ -8,7 +12,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
         $('#chkEnableServer', page).prop('checked', config.EnableServer);
         $('#chkBlastAliveMessages', page).prop('checked', config.BlastAliveMessages);
         $('#txtBlastInterval', page).val(config.BlastAliveMessageIntervalSeconds);
-        var usersHtml = users.map(function (u) {
+        const usersHtml = users.map(function (u) {
             return '<option value="' + u.Id + '">' + u.Name + '</option>';
         }).join('');
         $('#selectUser', page).html(usersHtml).val(config.DefaultUserId || '');
@@ -17,7 +21,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
 
     function onSubmit() {
         loading.show();
-        var form = this;
+        const form = this;
         ApiClient.getNamedConfiguration('dlna').then(function (config) {
             config.EnablePlayTo = form.querySelector('#chkEnablePlayTo').checked;
             config.EnableDebugLog = form.querySelector('#chkEnableDlnaDebugLogging').checked;
@@ -46,11 +50,12 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
     }).on('pageshow', '#dlnaSettingsPage', function () {
         libraryMenu.setTabs('dlna', 0, getTabs);
         loading.show();
-        var page = this;
+        const page = this;
-        var promise1 = ApiClient.getNamedConfiguration('dlna');
+        const promise1 = ApiClient.getNamedConfiguration('dlna');
-        var promise2 = ApiClient.getUsers();
+        const promise2 = ApiClient.getUsers();
         Promise.all([promise1, promise2]).then(function (responses) {
             loadPage(page, responses[0], responses[1]);
         });
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/mediaLibrary.js

@@ -1,9 +1,20 @@
-define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'globalize', 'dom', 'indicators', 'scripts/imagehelper', 'cardStyle', 'emby-itemrefreshindicator'], function ($, appHost, taskButton, loading, libraryMenu, globalize, dom, indicators, imageHelper) {
+import $ from 'jQuery';
-    'use strict';
+import appHost from 'apphost';
+import taskButton from 'scripts/taskbutton';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+import dom from 'dom';
+import indicators from 'indicators';
+import imageHelper from 'scripts/imagehelper';
+import 'cardStyle';
+import 'emby-itemrefreshindicator';
+
+/* eslint-disable indent */
 
     function addVirtualFolder(page) {
-        require(['medialibrarycreator'], function (medialibrarycreator) {
+        import('medialibrarycreator').then(({default: medialibrarycreator}) => {
-            new medialibrarycreator.showEditor({
+            new medialibrarycreator({
                 collectionTypeOptions: getCollectionTypeOptions().filter(function (f) {
                     return !f.hidden;
                 }),
@@ -17,8 +28,8 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function editVirtualFolder(page, virtualFolder) {
-        require(['medialibraryeditor'], function (medialibraryeditor) {
+        import('medialibraryeditor').then(({default: medialibraryeditor}) => {
-            new medialibraryeditor.showEditor({
+            new medialibraryeditor({
                 refresh: shouldRefreshLibraryAfterChanges(page),
                 library: virtualFolder
             }).then(function (hasChanges) {
@@ -30,23 +41,21 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function deleteVirtualFolder(page, virtualFolder) {
-        var msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
+        let msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
 
         if (virtualFolder.Locations.length) {
             msg += '<br/><br/>' + globalize.translate('MessageTheFollowingLocationWillBeRemovedFromLibrary') + '<br/><br/>';
             msg += virtualFolder.Locations.join('<br/>');
         }
 
-        require(['confirm'], function (confirm) {
+        import('confirm').then(({default: confirm}) => {
             confirm({
-
                 text: msg,
                 title: globalize.translate('HeaderRemoveMediaFolder'),
                 confirmText: globalize.translate('Delete'),
                 primary: 'delete'
-
             }).then(function () {
-                var refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
+                const refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
                 ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).then(function () {
                     reloadLibrary(page);
                 });
@@ -55,7 +64,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function refreshVirtualFolder(page, virtualFolder) {
-        require(['refreshDialog'], function (refreshDialog) {
+        import('refreshDialog').then(({default: refreshDialog}) => {
             new refreshDialog({
                 itemIds: [virtualFolder.ItemId],
                 serverId: ApiClient.serverId(),
@@ -65,13 +74,13 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function renameVirtualFolder(page, virtualFolder) {
-        require(['prompt'], function (prompt) {
+        import('prompt').then(({default: prompt}) => {
             prompt({
                 label: globalize.translate('LabelNewName'),
                 confirmText: globalize.translate('ButtonRename')
             }).then(function (newName) {
                 if (newName && newName != virtualFolder.Name) {
-                    var refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
+                    const refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
                     ApiClient.renameVirtualFolder(virtualFolder.Name, newName, refreshAfterChange).then(function () {
                         reloadLibrary(page);
                     });
@@ -81,10 +90,10 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function showCardMenu(page, elem, virtualFolders) {
-        var card = dom.parentWithClass(elem, 'card');
+        const card = dom.parentWithClass(elem, 'card');
-        var index = parseInt(card.getAttribute('data-index'));
+        const index = parseInt(card.getAttribute('data-index'));
-        var virtualFolder = virtualFolders[index];
+        const virtualFolder = virtualFolders[index];
-        var menuItems = [];
+        const menuItems = [];
         menuItems.push({
             name: globalize.translate('ButtonEditImages'),
             id: 'editimages',
@@ -111,7 +120,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
             icon: 'refresh'
         });
 
-        require(['actionsheet'], function (actionsheet) {
+        import('actionsheet').then(({default: actionsheet}) => {
             actionsheet.show({
                 items: menuItems,
                 positionTo: elem,
@@ -153,7 +162,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function reloadVirtualFolders(page, virtualFolders) {
-        var html = '';
+        let html = '';
         virtualFolders.push({
             Name: globalize.translate('ButtonAddMediaLibrary'),
             icon: 'add_circle',
@@ -164,12 +173,12 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
             showNameWithIcon: true
         });
 
-        for (var i = 0; i < virtualFolders.length; i++) {
+        for (let i = 0; i < virtualFolders.length; i++) {
-            var virtualFolder = virtualFolders[i];
+            const virtualFolder = virtualFolders[i];
             html += getVirtualFolderHtml(page, virtualFolder, i);
         }
 
-        var divVirtualFolders = page.querySelector('#divVirtualFolders');
+        const divVirtualFolders = page.querySelector('#divVirtualFolders');
         divVirtualFolders.innerHTML = html;
         divVirtualFolders.classList.add('itemsContainer');
         divVirtualFolders.classList.add('vertical-wrap');
@@ -180,9 +189,9 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
             addVirtualFolder(page);
         });
         $('.editLibrary', divVirtualFolders).on('click', function () {
-            var card = $(this).parents('.card')[0];
+            const card = $(this).parents('.card')[0];
-            var index = parseInt(card.getAttribute('data-index'));
+            const index = parseInt(card.getAttribute('data-index'));
-            var virtualFolder = virtualFolders[index];
+            const virtualFolder = virtualFolders[index];
 
             if (virtualFolder.ItemId) {
                 editVirtualFolder(page, virtualFolder);
@@ -192,7 +201,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function editImages(page, virtualFolder) {
-        require(['imageEditor'], function (imageEditor) {
+        import('imageEditor').then(({default: imageEditor}) => {
             imageEditor.show({
                 itemId: virtualFolder.ItemId,
                 serverId: ApiClient.serverId()
@@ -240,8 +249,8 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function getVirtualFolderHtml(page, virtualFolder, index) {
-        var html = '';
+        let html = '';
-        var style = '';
+        let style = '';
 
         if (page.classList.contains('wizardPage')) {
             style += 'min-width:33.3%;';
@@ -252,7 +261,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
         html += '<div class="cardScalable visualCardBox-cardScalable">';
         html += '<div class="cardPadder cardPadder-backdrop"></div>';
         html += '<div class="cardContent">';
-        var imgUrl = '';
+        let imgUrl = '';
 
         if (virtualFolder.PrimaryImageItemId) {
             imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, {
@@ -261,7 +270,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
             });
         }
 
-        var hasCardImageContainer;
+        let hasCardImageContainer;
 
         if (imgUrl) {
             html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;background-image:url(\'' + imgUrl + "');\">";
@@ -311,7 +320,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
         }
 
         html += '</div>';
-        var typeName = getCollectionTypeOptions().filter(function (t) {
+        let typeName = getCollectionTypeOptions().filter(function (t) {
             return t.value == virtualFolder.CollectionType;
         })[0];
         typeName = typeName ? typeName.name : globalize.translate('FolderTypeUnset');
@@ -371,7 +380,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     });
     pageIdOn('pageshow', 'mediaLibraryPage', function () {
         libraryMenu.setTabs('librarysetup', 0, getTabs);
-        var page = this;
+        const page = this;
         taskButton({
             mode: 'on',
             progressElem: page.querySelector('.refreshProgress'),
@@ -380,7 +389,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
         });
     });
     pageIdOn('pagebeforehide', 'mediaLibraryPage', function () {
-        var page = this;
+        const page = this;
         taskButton({
             mode: 'off',
             progressElem: page.querySelector('.refreshProgress'),
@@ -388,4 +397,5 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
             button: page.querySelector('.btnRefresh')
         });
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/networking.js

@@ -1,12 +1,17 @@
-define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
+import loading from 'loading';
-    'use strict';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+import 'emby-checkbox';
+import 'emby-select';
+
+/* eslint-disable indent */
 
     function onSubmit(e) {
-        var form = this;
+        const form = this;
-        var localAddress = form.querySelector('#txtLocalAddress').value;
+        const localAddress = form.querySelector('#txtLocalAddress').value;
-        var enableUpnp = form.querySelector('#chkEnableUpnp').checked;
+        const enableUpnp = form.querySelector('#chkEnableUpnp').checked;
         confirmSelections(localAddress, enableUpnp, function () {
-            var validationResult = getValidationAlert(form);
+            const validationResult = getValidationAlert(form);
 
             if (validationResult) {
                 showAlertText(validationResult);
@@ -47,7 +52,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
     }
 
     function triggerChange(select) {
-        var evt = document.createEvent('HTMLEvents');
+        const evt = document.createEvent('HTMLEvents');
         evt.initEvent('change', false, true);
         select.dispatchEvent(evt);
     }
@@ -65,8 +70,8 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
     }
 
     function validateHttps(form) {
-        var certPath = form.querySelector('#txtCertificatePath').value || null;
+        const certPath = form.querySelector('#txtCertificatePath').value || null;
-        var httpsEnabled = form.querySelector('#chkEnableHttps').checked;
+        const httpsEnabled = form.querySelector('#chkEnableHttps').checked;
 
         if (httpsEnabled && !certPath) {
             return showAlertText({
@@ -97,7 +102,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
         }
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         function loadPage(page, config) {
             page.querySelector('#txtPortNumber').value = config.HttpServerPortNumber;
             page.querySelector('#txtPublicPort').value = config.PublicPort;
@@ -111,7 +116,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
             page.querySelector('#chkEnableHttps').checked = config.EnableHttps;
             page.querySelector('#chkRequireHttps').checked = config.RequireHttps;
             page.querySelector('#txtBaseUrl').value = config.BaseUrl || '';
-            var txtCertificatePath = page.querySelector('#txtCertificatePath');
+            const txtCertificatePath = page.querySelector('#txtCertificatePath');
             txtCertificatePath.value = config.CertificatePath || '';
             page.querySelector('#txtCertPassword').value = config.CertificatePassword || '';
             page.querySelector('#chkEnableUpnp').checked = config.EnableUPnP;
@@ -136,7 +141,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
         });
         view.querySelector('#btnSelectCertPath').addEventListener('click', function () {
             require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser.default();
+                const picker = new directoryBrowser();
                 picker.show({
                     includeFiles: true,
                     includeDirectories: true,
@@ -158,5 +163,6 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
                 loadPage(view, config);
             });
         });
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/playback.js

@@ -1,5 +1,9 @@
-define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, libraryMenu, globalize) {
+import $ from 'jQuery';
-    'use strict';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+
+/* eslint-disable indent */
 
     function loadPage(page, config) {
         $('#txtMinResumePct', page).val(config.MinResumePct);
@@ -10,7 +14,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
 
     function onSubmit() {
         loading.show();
-        var form = this;
+        const form = this;
         ApiClient.getServerConfiguration().then(function (config) {
             config.MinResumePct = $('#txtMinResumePct', form).val();
             config.MaxResumePct = $('#txtMaxResumePct', form).val();
@@ -40,9 +44,10 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
     }).on('pageshow', '#playbackConfigurationPage', function () {
         loading.show();
         libraryMenu.setTabs('playback', 1, getTabs);
-        var page = this;
+        const page = this;
         ApiClient.getServerConfiguration().then(function (config) {
             loadPage(page, config);
         });
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/plugins/add.js

@@ -91,7 +91,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
             msg += globalize.translate('PleaseConfirmPluginInstallation');
 
             require(['confirm'], function (confirm) {
-                confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
+                confirm.default(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
                     alertCallback();
                 }, function () {
                     console.debug('plugin not installed');

src/controllers/dashboard/plugins/installed.js

@@ -5,7 +5,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
         var msg = globalize.translate('UninstallPluginConfirmation', name);
 
         require(['confirm'], function (confirm) {
-            confirm({
+            confirm.default({
                 title: globalize.translate('UninstallPluginHeader'),
                 text: msg,
                 primary: 'delete',

src/controllers/dashboard/scheduledtasks/scheduledtask.js

@@ -130,7 +130,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
         },
         confirmDeleteTrigger: function (view, index) {
             require(['confirm'], function (confirm) {
-                confirm(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () {
+                confirm.default(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () {
                     ScheduledTaskPage.deleteTrigger(view, index);
                 });
             });

src/controllers/dashboard/serveractivity.js

@@ -1,8 +1,10 @@
-define(['components/activitylog', 'globalize'], function (ActivityLog, globalize) {
+import ActivityLog from 'components/activitylog';
-    'use strict';
+import globalize from 'globalize';
 
-    return function (view, params) {
+/* eslint-disable indent */
-        var activityLog;
+
+    export default function (view, params) {
+        let activityLog;
 
         if (params.useractivity !== 'false') {
             view.querySelector('.activityItems').setAttribute('data-useractivity', 'true');
@@ -27,5 +29,6 @@ define(['components/activitylog', 'globalize'], function (ActivityLog, globalize
 
             activityLog = null;
         });
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/users/userparentalcontrol.js

@@ -225,7 +225,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
 
     function showBlockedTagPopup(page) {
         require(['prompt'], function (prompt) {
-            prompt({
+            prompt.default({
                 label: globalize.translate('LabelTag')
             }).then(function (value) {
                 var tags = getBlockedTagsFromPage(page);

src/controllers/dashboard/users/userpasswordpage.js

@@ -142,7 +142,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
             var msg = globalize.translate('PasswordResetConfirmation');
 
             require(['confirm'], function (confirm) {
-                confirm(msg, globalize.translate('PasswordResetHeader')).then(function () {
+                confirm.default(msg, globalize.translate('PasswordResetHeader')).then(function () {
                     var userId = params.userId;
                     loading.show();
                     ApiClient.resetUserPassword(userId).then(function () {
@@ -161,7 +161,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
             var msg = globalize.translate('PinCodeResetConfirmation');
 
             require(['confirm'], function (confirm) {
-                confirm(msg, globalize.translate('HeaderPinCodeReset')).then(function () {
+                confirm.default(msg, globalize.translate('HeaderPinCodeReset')).then(function () {
                     var userId = params.userId;
                     loading.show();
                     ApiClient.resetEasyPassword(userId).then(function () {

src/controllers/dashboard/users/userprofilespage.js

@@ -5,7 +5,7 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
         var msg = globalize.translate('DeleteUserConfirmation');
 
         require(['confirm'], function (confirm) {
-            confirm({
+            confirm.default({
                 title: globalize.translate('DeleteUser'),
                 text: msg,
                 confirmText: globalize.translate('ButtonDelete'),

src/controllers/itemDetails.js

@@ -462,7 +462,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         if (dom.getWindowSize().innerWidth >= 1000) {
             backdrop.setBackdrops([item]);
         } else {
-            backdrop.clear();
+            backdrop.clearBackdrop();
         }
     }
 
@@ -1935,7 +1935,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
 
         function splitVersions(instance, page, apiClient, params) {
             require(['confirm'], function (confirm) {
-                confirm('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () {
+                confirm.default('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () {
                     loading.show();
                     apiClient.ajax({
                         type: 'DELETE',

src/controllers/livetvstatus.js

@@ -49,7 +49,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
         var message = globalize.translate('MessageConfirmDeleteTunerDevice');
 
         require(['confirm'], function (confirm) {
-            confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () {
+            confirm.default(message, globalize.translate('HeaderDeleteDevice')).then(function () {
                 loading.show();
                 ApiClient.ajax({
                     type: 'DELETE',
@@ -167,7 +167,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
         var message = globalize.translate('MessageConfirmDeleteGuideProvider');
 
         require(['confirm'], function (confirm) {
-            confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () {
+            confirm.default(message, globalize.translate('HeaderDeleteProvider')).then(function () {
                 loading.show();
                 ApiClient.ajax({
                     type: 'DELETE',

src/controllers/user/display.js

@@ -21,7 +21,7 @@ define(['displaySettings', 'userSettings', 'autoFocuser'], function (DisplaySett
             if (settingsInstance) {
                 settingsInstance.loadData();
             } else {
-                settingsInstance = new DisplaySettings({
+                settingsInstance = new DisplaySettings.default({
                     serverId: ApiClient.serverId(),
                     userId: userId,
                     element: view.querySelector('.settingsContainer'),

src/controllers/user/home.js

@@ -21,7 +21,7 @@ define(['homescreenSettings', 'dom', 'globalize', 'loading', 'userSettings', 'au
             if (homescreenSettingsInstance) {
                 homescreenSettingsInstance.loadData();
             } else {
-                homescreenSettingsInstance = new HomescreenSettings({
+                homescreenSettingsInstance = new HomescreenSettings.default({
                     serverId: ApiClient.serverId(),
                     userId: userId,
                     element: view.querySelector('.homeScreenSettingsContainer'),

src/controllers/user/playback.js

@@ -21,7 +21,7 @@ define(['playbackSettings', 'dom', 'globalize', 'loading', 'userSettings', 'auto
             if (settingsInstance) {
                 settingsInstance.loadData();
             } else {
-                settingsInstance = new PlaybackSettings({
+                settingsInstance = new PlaybackSettings.default({
                     serverId: ApiClient.serverId(),
                     userId: userId,
                     element: view.querySelector('.settingsContainer'),

src/controllers/user/profile.js

@@ -86,7 +86,7 @@ define(['controllers/dashboard/users/userpasswordpage', 'loading', 'libraryMenu'
         new UserPasswordPage(view, params);
         view.querySelector('#btnDeleteImage').addEventListener('click', function () {
             require(['confirm'], function (confirm) {
-                confirm(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () {
+                confirm.default(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () {
                     loading.show();
                     var userId = getParameterByName('userId');
                     ApiClient.deleteUserImage(userId, 'primary').then(function () {

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

@@ -1,12 +1,25 @@
-define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', 'imageLoader', 'layoutManager', 'browser', 'dom', 'loading', 'focusManager', 'serverNotifications', 'events', 'registerElement'], function (itemShortcuts, inputManager, connectionManager, playbackManager, imageLoader, layoutManager, browser, dom, loading, focusManager, serverNotifications, events) {
+import itemShortcuts from 'itemShortcuts';
-    'use strict';
+import inputManager from 'inputManager';
+import connectionManager from 'connectionManager';
+import playbackManager from 'playbackManager';
+import imageLoader from 'imageLoader';
+import layoutManager from 'layoutManager';
+import browser from 'browser';
+import dom from 'dom';
+import loading from 'loading';
+import focusManager from 'focusManager';
+import serverNotifications from 'serverNotifications';
+import events from 'events';
+import 'registerElement';
 
-    var ItemsContainerPrototype = Object.create(HTMLDivElement.prototype);
+/* eslint-disable indent */
+
+    const ItemsContainerPrototype = Object.create(HTMLDivElement.prototype);
 
     function onClick(e) {
-        var itemsContainer = this;
+        const itemsContainer = this;
-        var target = e.target;
+        const target = e.target;
-        var multiSelect = itemsContainer.multiSelect;
+        let multiSelect = itemsContainer.multiSelect;
 
         if (multiSelect) {
             if (multiSelect.onContainerClick.call(itemsContainer, e) === false) {
@@ -24,9 +37,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function onContextMenu(e) {
-        var itemsContainer = this;
+        const target = e.target;
-        var target = e.target;
+        const card = dom.parentWithAttribute(target, 'data-id');
-        var card = dom.parentWithAttribute(target, 'data-id');
 
         // check for serverId, it won't be present on selectserver
         if (card && card.getAttribute('data-serverid')) {
@@ -47,7 +59,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     ItemsContainerPrototype.enableMultiSelect = function (enabled) {
-        var current = this.multiSelect;
+        const current = this.multiSelect;
 
         if (!enabled) {
             if (current) {
@@ -61,8 +73,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
             return;
         }
 
-        var self = this;
+        const self = this;
-        require(['multiSelect'], function (MultiSelect) {
+        import('multiSelect').then(({default: MultiSelect}) => {
             self.multiSelect = new MultiSelect({
                 container: self,
                 bindOnClick: false
@@ -71,14 +83,14 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     };
 
     function onDrop(evt, itemsContainer) {
-        var el = evt.item;
+        const el = evt.item;
 
-        var newIndex = evt.newIndex;
+        const newIndex = evt.newIndex;
-        var itemId = el.getAttribute('data-playlistitemid');
+        const itemId = el.getAttribute('data-playlistitemid');
-        var playlistId = el.getAttribute('data-playlistid');
+        const playlistId = el.getAttribute('data-playlistid');
 
         if (!playlistId) {
-            var oldIndex = evt.oldIndex;
+            const oldIndex = evt.oldIndex;
             el.dispatchEvent(new CustomEvent('itemdrop', {
                 detail: {
                     oldIndex: oldIndex,
@@ -91,8 +103,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
             return;
         }
 
-        var serverId = el.getAttribute('data-serverid');
+        const serverId = el.getAttribute('data-serverid');
-        var apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
         loading.show();
 
@@ -108,7 +120,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     ItemsContainerPrototype.enableDragReordering = function (enabled) {
-        var current = this.sortable;
+        const current = this.sortable;
         if (!enabled) {
             if (current) {
                 current.destroy();
@@ -121,8 +133,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
             return;
         }
 
-        var self = this;
+        const self = this;
-        require(['sortable'], function (Sortable) {
+        import('sortable').then(({default: Sortable}) => {
             self.sortable = new Sortable(self, {
                 draggable: '.listItem',
                 handle: '.listViewDragHandle',
@@ -137,13 +149,13 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
 
     function onUserDataChanged(e, apiClient, userData) {
 
-        var itemsContainer = this;
+        const itemsContainer = this;
 
-        require(['cardBuilder'], function (cardBuilder) {
+        import('cardBuilder').then(({default: cardBuilder}) => {
             cardBuilder.onUserDataChanged(userData, itemsContainer);
         });
 
-        var eventsToMonitor = getEventsToMonitor(itemsContainer);
+        const eventsToMonitor = getEventsToMonitor(itemsContainer);
 
         // TODO: Check user data change reason?
         if (eventsToMonitor.indexOf('markfavorite') !== -1) {
@@ -154,7 +166,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function getEventsToMonitor(itemsContainer) {
-        var monitor = itemsContainer.getAttribute('data-monitor');
+        let monitor = itemsContainer.getAttribute('data-monitor');
         if (monitor) {
             return monitor.split(',');
         }
@@ -164,24 +176,24 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
 
     function onTimerCreated(e, apiClient, data) {
 
-        var itemsContainer = this;
+        const itemsContainer = this;
 
         if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) {
             itemsContainer.notifyRefreshNeeded();
             return;
         }
 
-        var programId = data.ProgramId;
+        const programId = data.ProgramId;
         // This could be null, not supported by all tv providers
-        var newTimerId = data.Id;
+        const newTimerId = data.Id;
 
-        require(['cardBuilder'], function (cardBuilder) {
+        import('cardBuilder').then(({default: cardBuilder}) => {
             cardBuilder.onTimerCreated(programId, newTimerId, itemsContainer);
         });
     }
 
     function onSeriesTimerCreated(e, apiClient, data) {
-        var itemsContainer = this;
+        const itemsContainer = this;
         if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) {
             itemsContainer.notifyRefreshNeeded();
             return;
@@ -189,49 +201,49 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function onTimerCancelled(e, apiClient, data) {
-        var itemsContainer = this;
+        const itemsContainer = this;
         if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) {
             itemsContainer.notifyRefreshNeeded();
             return;
         }
 
-        require(['cardBuilder'], function (cardBuilder) {
+        import('cardBuilder').then(({default: cardBuilder}) => {
             cardBuilder.onTimerCancelled(data.Id, itemsContainer);
         });
     }
 
     function onSeriesTimerCancelled(e, apiClient, data) {
-        var itemsContainer = this;
+        const itemsContainer = this;
         if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) {
             itemsContainer.notifyRefreshNeeded();
             return;
         }
 
-        require(['cardBuilder'], function (cardBuilder) {
+        import('cardBuilder').then(({default: cardBuilder}) => {
             cardBuilder.onSeriesTimerCancelled(data.Id, itemsContainer);
         });
     }
 
     function onLibraryChanged(e, apiClient, data) {
-        var itemsContainer = this;
+        const itemsContainer = this;
 
-        var eventsToMonitor = getEventsToMonitor(itemsContainer);
+        const eventsToMonitor = getEventsToMonitor(itemsContainer);
         if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
             // yes this is an assumption
             return;
         }
 
-        var itemsAdded = data.ItemsAdded || [];
+        const itemsAdded = data.ItemsAdded || [];
-        var itemsRemoved = data.ItemsRemoved || [];
+        const itemsRemoved = data.ItemsRemoved || [];
         if (!itemsAdded.length && !itemsRemoved.length) {
             return;
         }
 
-        var parentId = itemsContainer.getAttribute('data-parentid');
+        const parentId = itemsContainer.getAttribute('data-parentid');
         if (parentId) {
-            var foldersAddedTo = data.FoldersAddedTo || [];
+            const foldersAddedTo = data.FoldersAddedTo || [];
-            var foldersRemovedFrom = data.FoldersRemovedFrom || [];
+            const foldersRemovedFrom = data.FoldersRemovedFrom || [];
-            var collectionFolders = data.CollectionFolders || [];
+            const collectionFolders = data.CollectionFolders || [];
 
             if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
                 return;
@@ -242,10 +254,10 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function onPlaybackStopped(e, stopInfo) {
-        var itemsContainer = this;
+        const itemsContainer = this;
-        var state = stopInfo.state;
+        const state = stopInfo.state;
 
-        var eventsToMonitor = getEventsToMonitor(itemsContainer);
+        const eventsToMonitor = getEventsToMonitor(itemsContainer);
         if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
             if (eventsToMonitor.indexOf('videoplayback') !== -1) {
                 itemsContainer.notifyRefreshNeeded(true);
@@ -260,14 +272,14 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function addNotificationEvent(instance, name, handler, owner) {
-        var localHandler = handler.bind(instance);
+        const localHandler = handler.bind(instance);
         owner = owner || serverNotifications;
         events.on(owner, name, localHandler);
         instance['event_' + name] = localHandler;
     }
 
     function removeNotificationEvent(instance, name, owner) {
-        var handler = instance['event_' + name];
+        const handler = instance['event_' + name];
         if (handler) {
             owner = owner || serverNotifications;
             events.off(owner, name, handler);
@@ -347,10 +359,10 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     ItemsContainerPrototype.resume = function (options) {
         this.paused = false;
 
-        var refreshIntervalEndTime = this.refreshIntervalEndTime;
+        let 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 {
@@ -387,7 +399,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
             return;
         }
 
-        var timeout = this.refreshTimeout;
+        let timeout = this.refreshTimeout;
         if (timeout) {
             clearTimeout(timeout);
         }
@@ -424,9 +436,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function onDataFetched(result) {
-        var items = result.Items || result;
+        const items = result.Items || result;
 
-        var parentContainer = this.parentContainer;
+        let parentContainer = this.parentContainer;
         if (parentContainer) {
             if (items.length) {
                 parentContainer.classList.remove('hide');
@@ -435,9 +447,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
             }
         }
 
-        var activeElement = document.activeElement;
+        const activeElement = document.activeElement;
-        var focusId;
+        let focusId;
-        var hasActiveElement;
+        let hasActiveElement;
 
         if (this.contains(activeElement)) {
             hasActiveElement = true;
@@ -461,7 +473,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
 
     function setFocus(itemsContainer, focusId) {
         if (focusId) {
-            var newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]');
+            const newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]');
             if (newElement) {
                 try {
                     focusManager.focus(newElement);
@@ -479,4 +491,5 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
         prototype: ItemsContainerPrototype,
         extends: 'div'
     });
-});
+
+/* eslint-enable indent */

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

@@ -1,14 +1,19 @@
-define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby-button'], function (connectionManager, serverNotifications, events, globalize, EmbyButtonPrototype) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import serverNotifications from 'serverNotifications';
+import events from 'events';
+import globalize from 'globalize';
+import EmbyButtonPrototype from 'emby-button';
+
+/* eslint-disable indent */
 
     function addNotificationEvent(instance, name, handler) {
-        var localHandler = handler.bind(instance);
+        const localHandler = handler.bind(instance);
         events.on(serverNotifications, name, localHandler);
         instance[name] = localHandler;
     }
 
     function removeNotificationEvent(instance, name) {
-        var handler = instance[name];
+        const handler = instance[name];
         if (handler) {
             events.off(serverNotifications, name, handler);
             instance[name] = null;
@@ -17,10 +22,10 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
 
     function onClick(e) {
 
-        var button = this;
+        const button = this;
-        var id = button.getAttribute('data-id');
+        const id = button.getAttribute('data-id');
-        var serverId = button.getAttribute('data-serverid');
+        const serverId = button.getAttribute('data-serverid');
-        var apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
         if (!button.classList.contains('playstatebutton-played')) {
             apiClient.markPlayed(apiClient.getCurrentUserId(), id, new Date());
@@ -32,14 +37,14 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
     }
 
     function onUserDataChanged(e, apiClient, userData) {
-        var button = this;
+        const button = this;
         if (userData.ItemId === button.getAttribute('data-id')) {
             setState(button, userData.Played);
         }
     }
 
     function setState(button, played, updateAttribute) {
-        var icon = button.iconElement;
+        let icon = button.iconElement;
         if (!icon) {
             button.iconElement = button.querySelector('.material-icons');
             icon = button.iconElement;
@@ -72,7 +77,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
             button.title = globalize.translate('Played');
         }
 
-        var text = button.querySelector('.button-text');
+        let text = button.querySelector('.button-text');
         if (text) {
             text.innerHTML = button.title;
         }
@@ -92,7 +97,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         addNotificationEvent(button, 'UserDataChanged', onUserDataChanged);
     }
 
-    var EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype);
+    const EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype);
 
     EmbyPlaystateButtonPrototype.createdCallback = function () {
 
@@ -109,8 +114,8 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
             EmbyButtonPrototype.attachedCallback.call(this);
         }
 
-        var itemId = this.getAttribute('data-id');
+        const itemId = this.getAttribute('data-id');
-        var serverId = this.getAttribute('data-serverid');
+        const serverId = this.getAttribute('data-serverid');
         if (itemId && serverId) {
 
             setState(this, this.getAttribute('data-played') === 'true', false);
@@ -137,7 +142,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
             this.setAttribute('data-id', item.Id);
             this.setAttribute('data-serverid', item.ServerId);
 
-            var played = item.UserData && item.UserData.Played;
+            const played = item.UserData && item.UserData.Played;
             setState(this, played);
             bindEvents(this);
 
@@ -156,4 +161,5 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         prototype: EmbyPlaystateButtonPrototype,
         extends: 'button'
     });
-});
+
+/* eslint-enable indent */

src/elements/emby-programcell/emby-programcell.js

@@ -1,16 +1,12 @@
-define([], function() {
+const ProgramCellPrototype = Object.create(HTMLButtonElement.prototype);
-    'use strict';
 
-    var ProgramCellPrototype = Object.create(HTMLButtonElement.prototype);
+ProgramCellPrototype.detachedCallback = function () {
+    this.posLeft = null;
+    this.posWidth = null;
+    this.guideProgramName = null;
+};
 
-    ProgramCellPrototype.detachedCallback = function () {
+document.registerElement('emby-programcell', {
-        this.posLeft = null;
+    prototype: ProgramCellPrototype,
-        this.posWidth = null;
+    extends: 'button'
-        this.guideProgramName = null;
-    };
-
-    document.registerElement('emby-programcell', {
-        prototype: ProgramCellPrototype,
-        extends: 'button'
-    });
 });

src/elements/emby-ratingbutton/emby-ratingbutton.js

@@ -1,16 +1,21 @@
-define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby-button'], function (connectionManager, serverNotifications, events, globalize, EmbyButtonPrototype) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import serverNotifications from 'serverNotifications';
+import events from 'events';
+import globalize from 'globalize';
+import EmbyButtonPrototype from 'emby-button';
+
+/* eslint-disable indent */
 
     function addNotificationEvent(instance, name, handler) {
 
-        var localHandler = handler.bind(instance);
+        const localHandler = handler.bind(instance);
         events.on(serverNotifications, name, localHandler);
         instance[name] = localHandler;
     }
 
     function removeNotificationEvent(instance, name) {
 
-        var handler = instance[name];
+        const handler = instance[name];
         if (handler) {
             events.off(serverNotifications, name, handler);
             instance[name] = null;
@@ -24,13 +29,13 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
 
     function onClick(e) {
 
-        var button = this;
+        const button = this;
-        var id = button.getAttribute('data-id');
+        const id = button.getAttribute('data-id');
-        var serverId = button.getAttribute('data-serverid');
+        const serverId = button.getAttribute('data-serverid');
-        var apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
-        var likes = this.getAttribute('data-likes');
+        let likes = this.getAttribute('data-likes');
-        var isFavorite = this.getAttribute('data-isfavorite') === 'true';
+        const isFavorite = this.getAttribute('data-isfavorite') === 'true';
         if (likes === 'true') {
             likes = true;
         } else if (likes === 'false') {
@@ -47,7 +52,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
 
     function onUserDataChanged(e, apiClient, userData) {
 
-        var button = this;
+        const button = this;
 
         if (userData.ItemId === button.getAttribute('data-id')) {
 
@@ -57,7 +62,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
 
     function setState(button, likes, isFavorite, updateAttribute) {
 
-        var icon = button.querySelector('.material-icons');
+        const icon = button.querySelector('.material-icons');
 
         if (isFavorite) {
 
@@ -106,7 +111,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
     function setTitle(button) {
         button.title = globalize.translate('Favorite');
 
-        var text = button.querySelector('.button-text');
+        const text = button.querySelector('.button-text');
         if (text) {
             text.innerHTML = button.title;
         }
@@ -126,7 +131,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         addNotificationEvent(button, 'UserDataChanged', onUserDataChanged);
     }
 
-    var EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype);
+    const EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype);
 
     EmbyRatingButtonPrototype.createdCallback = function () {
 
@@ -143,12 +148,12 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
             EmbyButtonPrototype.attachedCallback.call(this);
         }
 
-        var itemId = this.getAttribute('data-id');
+        const itemId = this.getAttribute('data-id');
-        var serverId = this.getAttribute('data-serverid');
+        const serverId = this.getAttribute('data-serverid');
         if (itemId && serverId) {
 
-            var likes = this.getAttribute('data-likes');
+            let likes = this.getAttribute('data-likes');
-            var isFavorite = this.getAttribute('data-isfavorite') === 'true';
+            const isFavorite = this.getAttribute('data-isfavorite') === 'true';
             if (likes === 'true') {
                 likes = true;
             } else if (likes === 'false') {
@@ -181,7 +186,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
             this.setAttribute('data-id', item.Id);
             this.setAttribute('data-serverid', item.ServerId);
 
-            var userData = item.UserData || {};
+            const userData = item.UserData || {};
             setState(this, userData.Likes, userData.IsFavorite);
             bindEvents(this);
 
@@ -199,4 +204,5 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         prototype: EmbyRatingButtonPrototype,
         extends: 'button'
     });
-});
+
+/* eslint-enable indent */

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

@@ -1,13 +1,18 @@
-define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', 'paper-icon-button-light'], function (layoutManager, dom) {
+import layoutManager from 'layoutManager';
-    'use strict';
+import dom from 'dom';
+import 'css!./emby-scrollbuttons';
+import 'registerElement';
+import 'paper-icon-button-light';
 
-    var EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
+/* eslint-disable indent */
+
+const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
 
     EmbyScrollButtonsPrototype.createdCallback = function () {};
 
     function getScrollButtonHtml(direction) {
-        var html = '';
+        let html = '';
-        var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
+        const icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
 
         html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
         html += '<span class="material-icons ' + icon + '"></span>';
@@ -45,7 +50,7 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
             scrollButtons.scrollButtonsLeft.disabled = true;
         }
 
-        var scrollPosEnd = scrollPos + scrollSize;
+        const scrollPosEnd = scrollPos + scrollSize;
         if (scrollWidth > 0 && scrollPosEnd >= scrollWidth) {
             scrollButtons.scrollButtonsRight.disabled = true;
         } else {
@@ -54,18 +59,18 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
     }
 
     function onScroll(e) {
-        var scrollButtons = this;
+        const scrollButtons = this;
-        var scroller = this.scroller;
+        const scroller = this.scroller;
 
-        var scrollSize = getScrollSize(scroller);
+        const scrollSize = getScrollSize(scroller);
-        var scrollPos = getScrollPosition(scroller);
+        const scrollPos = getScrollPosition(scroller);
-        var scrollWidth = getScrollWidth(scroller);
+        const scrollWidth = getScrollWidth(scroller);
 
         updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth);
     }
 
     function getStyleValue(style, name) {
-        var value = style.getPropertyValue(name);
+        let value = style.getPropertyValue(name);
         if (!value) {
             return 0;
         }
@@ -84,20 +89,20 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
     }
 
     function getScrollSize(elem) {
-        var scrollSize = elem.offsetWidth;
+        let scrollSize = elem.offsetWidth;
-        var style = window.getComputedStyle(elem, null);
+        let style = window.getComputedStyle(elem, null);
 
-        var paddingLeft = getStyleValue(style, 'padding-left');
+        let paddingLeft = getStyleValue(style, 'padding-left');
         if (paddingLeft) {
             scrollSize -= paddingLeft;
         }
 
-        var paddingRight = getStyleValue(style, 'padding-right');
+        let paddingRight = getStyleValue(style, 'padding-right');
         if (paddingRight) {
             scrollSize -= paddingRight;
         }
 
-        var slider = elem.getScrollSlider();
+        const slider = elem.getScrollSlider();
         style = window.getComputedStyle(slider, null);
 
         paddingLeft = getStyleValue(style, 'padding-left');
@@ -114,14 +119,14 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
     }
 
     function onScrollButtonClick(e) {
-        var scroller = this.parentNode.nextSibling;
+        let scroller = this.parentNode.nextSibling;
 
-        var direction = this.getAttribute('data-direction');
+        const direction = this.getAttribute('data-direction');
-        var scrollSize = getScrollSize(scroller);
+        const scrollSize = getScrollSize(scroller);
-        var scrollPos = getScrollPosition(scroller);
+        const scrollPos = getScrollPosition(scroller);
-        var scrollWidth = getScrollWidth(scroller);
+        const scrollWidth = getScrollWidth(scroller);
 
-        var newPos;
+        let newPos;
         if (direction === 'left') {
             newPos = Math.max(0, scrollPos - scrollSize);
         } else {
@@ -132,21 +137,21 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
     }
 
     EmbyScrollButtonsPrototype.attachedCallback = function () {
-        var scroller = this.nextSibling;
+        const scroller = this.nextSibling;
         this.scroller = scroller;
 
-        var parent = this.parentNode;
+        const parent = this.parentNode;
         parent.classList.add('emby-scroller-container');
 
         this.innerHTML = getScrollButtonHtml('left') + getScrollButtonHtml('right');
 
-        var buttons = this.querySelectorAll('.emby-scrollbuttons-button');
+        const buttons = this.querySelectorAll('.emby-scrollbuttons-button');
         buttons[0].addEventListener('click', onScrollButtonClick);
         buttons[1].addEventListener('click', onScrollButtonClick);
         this.scrollButtonsLeft = buttons[0];
         this.scrollButtonsRight = buttons[1];
 
-        var scrollHandler = onScroll.bind(this);
+        const scrollHandler = onScroll.bind(this);
         this.scrollHandler = scrollHandler;
         scroller.addScrollEventListener(scrollHandler, {
             capture: false,
@@ -155,10 +160,10 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
     };
 
     EmbyScrollButtonsPrototype.detachedCallback = function () {
-        var parent = this.scroller;
+        const parent = this.scroller;
         this.scroller = null;
 
-        var scrollHandler = this.scrollHandler;
+        let scrollHandler = this.scrollHandler;
         if (parent && scrollHandler) {
             parent.removeScrollEventListener(scrollHandler, {
                 capture: false,
@@ -175,4 +180,5 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
         prototype: EmbyScrollButtonsPrototype,
         extends: 'div'
     });
-});
+
+/* eslint-enable indent */

src/elements/emby-select/emby-select.js

@@ -1,7 +1,12 @@
-define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registerElement'], function (layoutManager, browser, actionsheet) {
+import layoutManager from 'layoutManager';
-    'use strict';
+import browser from 'browser';
+import actionsheet from 'actionsheet';
+import 'css!./emby-select';
+import 'registerElement';
 
-    var EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
+/* eslint-disable indent */
+
+    const EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
 
     function enableNativeMenu() {
 
@@ -27,7 +32,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
     }
 
     function triggerChange(select) {
-        var evt = document.createEvent('HTMLEvents');
+        const evt = document.createEvent('HTMLEvents');
         evt.initEvent('change', false, true);
         select.dispatchEvent(evt);
     }
@@ -39,8 +44,8 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
 
     function showActionSheet(select) {
 
-        var labelElem = getLabel(select);
+        const labelElem = getLabel(select);
-        var title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
+        const title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
 
         actionsheet.show({
             items: select.options,
@@ -54,7 +59,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
     }
 
     function getLabel(select) {
-        var elem = select.previousSibling;
+        let elem = select.previousSibling;
         while (elem && elem.tagName !== 'LABEL') {
             elem = elem.previousSibling;
         }
@@ -62,21 +67,20 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
     }
 
     function onFocus(e) {
-        var label = getLabel(this);
+        const label = getLabel(this);
         if (label) {
             label.classList.add('selectLabelFocused');
         }
     }
 
     function onBlur(e) {
-        var label = getLabel(this);
+        const label = getLabel(this);
         if (label) {
             label.classList.remove('selectLabelFocused');
         }
     }
 
     function onMouseDown(e) {
-
         // e.button=0 for primary (left) mouse button click
         if (!e.button && !enableNativeMenu()) {
             e.preventDefault();
@@ -85,9 +89,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
     }
 
     function onKeyDown(e) {
-
         switch (e.keyCode) {
-
             case 13:
                 if (!enableNativeMenu()) {
                     e.preventDefault();
@@ -107,7 +109,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
         }
     }
 
-    var inputId = 0;
+    let inputId = 0;
 
     EmbySelectPrototype.createdCallback = function () {
 
@@ -137,7 +139,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
 
         this.classList.add('emby-select');
 
-        var label = this.ownerDocument.createElement('label');
+        const label = this.ownerDocument.createElement('label');
         label.innerHTML = this.getAttribute('label') || '';
         label.classList.add('selectLabel');
         label.htmlFor = this.id;
@@ -150,7 +152,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
 
     EmbySelectPrototype.setLabel = function (text) {
 
-        var label = this.parentNode.querySelector('label');
+        const label = this.parentNode.querySelector('label');
 
         label.innerHTML = text;
     };
@@ -159,4 +161,5 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
         prototype: EmbySelectPrototype,
         extends: 'select'
     });
-});
+
+/* eslint-enable indent */

src/scripts/autoBackdrops.js

@@ -50,7 +50,7 @@ define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSett
                         return i;
                     }));
                 } else {
-                    backdrop.clear();
+                    backdrop.clearBackdrop();
                 }
             });
         }
@@ -67,10 +67,10 @@ define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSett
                     showBackdrop(type, parentId);
                 } else {
                     page.classList.remove('backdropPage');
-                    backdrop.clear();
+                    backdrop.clearBackdrop();
                 }
             } else {
-                backdrop.clear();
+                backdrop.clearBackdrop();
             }
         }
     });