From f296eb34750a38d0f185c49fdbe4efe425ef284e Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Fri, 17 Jul 2020 11:30:39 +0100
Subject: [PATCH 01/12] Migration of taskbutton and touchHelper to ES6 modules

---
 package.json                              |  14 +-
 src/components/maintabsmanager.js         |   2 +-
 src/controllers/dashboard/mediaLibrary.js |   4 +-
 src/controllers/livetvstatus.js           |   4 +-
 src/controllers/playback/videoosd.js      |   2 +-
 src/scripts/taskbutton.js                 | 227 +++++++++++-----------
 src/scripts/touchHelper.js                |  23 ++-
 7 files changed, 140 insertions(+), 136 deletions(-)

diff --git a/package.json b/package.json
index b911778bc2..ecf54d2ca4 100644
--- a/package.json
+++ b/package.json
@@ -154,6 +154,9 @@
           "src/plugins/bookPlayer/plugin.js",
           "src/plugins/bookPlayer/tableOfContents.js",
           "src/plugins/photoPlayer/plugin.js",
+          "src/scripts/settings/appSettings.js",
+          "src/scripts/settings/userSettings.js",
+          "src/scripts/settings/webSettings.js",
           "src/scripts/deleteHelper.js",
           "src/scripts/dfnshelper.js",
           "src/scripts/dom.js",
@@ -161,14 +164,13 @@
           "src/scripts/filesystem.js",
           "src/scripts/imagehelper.js",
           "src/scripts/inputManager.js",
+          "src/scripts/keyboardNavigation.js",
+          "src/scripts/taskbutton.js",
+          "src/scripts/touchHelper.js",
+          "src/scripts/themeLoader.js",
           "src/plugins/backdropScreensaver/plugin.js",
           "src/components/filterdialog/filterdialog.js",
-          "src/components/fetchhelper.js",
-          "src/scripts/keyboardNavigation.js",
-          "src/scripts/settings/appSettings.js",
-          "src/scripts/settings/userSettings.js",
-          "src/scripts/themeLoader.js",
-          "src/scripts/settings/webSettings.js"
+          "src/components/fetchhelper.js"
         ],
         "plugins": [
           "@babel/plugin-transform-modules-amd",
diff --git a/src/components/maintabsmanager.js b/src/components/maintabsmanager.js
index e1c5434363..e50d75bc05 100644
--- a/src/components/maintabsmanager.js
+++ b/src/components/maintabsmanager.js
@@ -85,7 +85,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
 
         require(['touchHelper'], function (TouchHelper) {
 
-            var touchHelper = new TouchHelper(view.parentNode.parentNode);
+            var touchHelper = new TouchHelper.default(view.parentNode.parentNode);
 
             events.on(touchHelper, 'swipeleft', onSwipeLeft);
             events.on(touchHelper, 'swiperight', onSwipeRight);
diff --git a/src/controllers/dashboard/mediaLibrary.js b/src/controllers/dashboard/mediaLibrary.js
index d9b288c62a..8e0020f62b 100644
--- a/src/controllers/dashboard/mediaLibrary.js
+++ b/src/controllers/dashboard/mediaLibrary.js
@@ -372,7 +372,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     pageIdOn('pageshow', 'mediaLibraryPage', function () {
         libraryMenu.setTabs('librarysetup', 0, getTabs);
         var page = this;
-        taskButton({
+        taskButton.default({
             mode: 'on',
             progressElem: page.querySelector('.refreshProgress'),
             taskKey: 'RefreshLibrary',
@@ -381,7 +381,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     });
     pageIdOn('pagebeforehide', 'mediaLibraryPage', function () {
         var page = this;
-        taskButton({
+        taskButton.default({
             mode: 'off',
             progressElem: page.querySelector('.refreshProgress'),
             taskKey: 'RefreshLibrary',
diff --git a/src/controllers/livetvstatus.js b/src/controllers/livetvstatus.js
index c6daf53a4f..efafd50871 100644
--- a/src/controllers/livetvstatus.js
+++ b/src/controllers/livetvstatus.js
@@ -303,7 +303,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
     }).on('pageshow', '#liveTvStatusPage', function () {
         var page = this;
         reload(page);
-        taskButton({
+        taskButton.default({
             mode: 'on',
             progressElem: page.querySelector('.refreshGuideProgress'),
             taskKey: 'RefreshGuide',
@@ -311,7 +311,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
         });
     }).on('pagehide', '#liveTvStatusPage', function () {
         var page = this;
-        taskButton({
+        taskButton.default({
             mode: 'off',
             progressElem: page.querySelector('.refreshGuideProgress'),
             taskKey: 'RefreshGuide',
diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js
index d6caf24e81..0907a700b3 100644
--- a/src/controllers/playback/videoosd.js
+++ b/src/controllers/playback/videoosd.js
@@ -1533,7 +1533,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
         if (browser.touch) {
             (function () {
                 require(['touchHelper'], function (TouchHelper) {
-                    self.touchHelper = new TouchHelper(view, {
+                    self.touchHelper = new TouchHelper.default(view, {
                         swipeYThreshold: 30,
                         triggerOnMove: true,
                         preventDefaultOnMove: true,
diff --git a/src/scripts/taskbutton.js b/src/scripts/taskbutton.js
index 8facaf8900..d2c9d6c91e 100644
--- a/src/scripts/taskbutton.js
+++ b/src/scripts/taskbutton.js
@@ -1,119 +1,122 @@
-define(['events', 'userSettings', 'serverNotifications', 'connectionManager', 'globalize', 'emby-button'], function (events, userSettings, serverNotifications, connectionManager, globalize) {
-    'use strict';
+import events from 'events';
+import * as userSettings from 'userSettings';
+import serverNotifications from 'serverNotifications';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import 'emby-button';
 
-    return function (options) {
-        function pollTasks() {
-            connectionManager.getApiClient(serverId).getScheduledTasks({
-                IsEnabled: true
-            }).then(updateTasks);
-        }
+export default function (options) {
+    function pollTasks() {
+        connectionManager.getApiClient(serverId).getScheduledTasks({
+            IsEnabled: true
+        }).then(updateTasks);
+    }
 
-        function updateTasks(tasks) {
-            var task = tasks.filter(function (t) {
-                return t.Key == options.taskKey;
-            })[0];
-
-            if (options.panel) {
-                if (task) {
-                    options.panel.classList.remove('hide');
-                } else {
-                    options.panel.classList.add('hide');
-                }
-            }
-
-            if (!task) {
-                return;
-            }
-
-            if (task.State == 'Idle') {
-                button.removeAttribute('disabled');
-            } else {
-                button.setAttribute('disabled', 'disabled');
-            }
-
-            button.setAttribute('data-taskid', task.Id);
-            var progress = (task.CurrentProgressPercentage || 0).toFixed(1);
-
-            if (options.progressElem) {
-                options.progressElem.value = progress;
-
-                if (task.State == 'Running') {
-                    options.progressElem.classList.remove('hide');
-                } else {
-                    options.progressElem.classList.add('hide');
-                }
-            }
-
-            if (options.lastResultElem) {
-                var lastResult = task.LastExecutionResult ? task.LastExecutionResult.Status : '';
-
-                if (lastResult == 'Failed') {
-                    options.lastResultElem.html('<span style="color:#FF0000;">(' + globalize.translate('LabelFailed') + ')</span>');
-                } else if (lastResult == 'Cancelled') {
-                    options.lastResultElem.html('<span style="color:#0026FF;">(' + globalize.translate('LabelCancelled') + ')</span>');
-                } else if (lastResult == 'Aborted') {
-                    options.lastResultElem.html('<span style="color:#FF0000;">' + globalize.translate('LabelAbortedByServerShutdown') + '</span>');
-                } else {
-                    options.lastResultElem.html(lastResult);
-                }
-            }
-        }
-
-        function onScheduledTaskMessageConfirmed(id) {
-            connectionManager.getApiClient(serverId).startScheduledTask(id).then(pollTasks);
-        }
-
-        function onButtonClick() {
-            onScheduledTaskMessageConfirmed(this.getAttribute('data-taskid'));
-        }
-
-        function onScheduledTasksUpdate(e, apiClient, info) {
-            if (apiClient.serverId() === serverId) {
-                updateTasks(info);
-            }
-        }
-
-        var pollInterval;
-        var button = options.button;
-        var serverId = ApiClient.serverId();
-
-        function onPollIntervalFired() {
-            if (!connectionManager.getApiClient(serverId).isMessageChannelOpen()) {
-                pollTasks();
-            }
-        }
-
-        function startInterval() {
-            var apiClient = connectionManager.getApiClient(serverId);
-
-            if (pollInterval) {
-                clearInterval(pollInterval);
-            }
-            apiClient.sendMessage('ScheduledTasksInfoStart', '1000,1000');
-            pollInterval = setInterval(onPollIntervalFired, 5000);
-        }
-
-        function stopInterval() {
-            connectionManager.getApiClient(serverId).sendMessage('ScheduledTasksInfoStop');
-
-            if (pollInterval) {
-                clearInterval(pollInterval);
-            }
-        }
+    function updateTasks(tasks) {
+        var task = tasks.filter(function (t) {
+            return t.Key == options.taskKey;
+        })[0];
 
         if (options.panel) {
-            options.panel.classList.add('hide');
+            if (task) {
+                options.panel.classList.remove('hide');
+            } else {
+                options.panel.classList.add('hide');
+            }
         }
 
-        if (options.mode == 'off') {
-            button.removeEventListener('click', onButtonClick);
-            events.off(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate);
-            stopInterval();
-        } else {
-            button.addEventListener('click', onButtonClick);
-            pollTasks();
-            startInterval();
-            events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate);
+        if (!task) {
+            return;
         }
-    };
-});
+
+        if (task.State == 'Idle') {
+            button.removeAttribute('disabled');
+        } else {
+            button.setAttribute('disabled', 'disabled');
+        }
+
+        button.setAttribute('data-taskid', task.Id);
+        var progress = (task.CurrentProgressPercentage || 0).toFixed(1);
+
+        if (options.progressElem) {
+            options.progressElem.value = progress;
+
+            if (task.State == 'Running') {
+                options.progressElem.classList.remove('hide');
+            } else {
+                options.progressElem.classList.add('hide');
+            }
+        }
+
+        if (options.lastResultElem) {
+            var lastResult = task.LastExecutionResult ? task.LastExecutionResult.Status : '';
+
+            if (lastResult == 'Failed') {
+                options.lastResultElem.html('<span style="color:#FF0000;">(' + globalize.translate('LabelFailed') + ')</span>');
+            } else if (lastResult == 'Cancelled') {
+                options.lastResultElem.html('<span style="color:#0026FF;">(' + globalize.translate('LabelCancelled') + ')</span>');
+            } else if (lastResult == 'Aborted') {
+                options.lastResultElem.html('<span style="color:#FF0000;">' + globalize.translate('LabelAbortedByServerShutdown') + '</span>');
+            } else {
+                options.lastResultElem.html(lastResult);
+            }
+        }
+    }
+
+    function onScheduledTaskMessageConfirmed(id) {
+        connectionManager.getApiClient(serverId).startScheduledTask(id).then(pollTasks);
+    }
+
+    function onButtonClick() {
+        onScheduledTaskMessageConfirmed(this.getAttribute('data-taskid'));
+    }
+
+    function onScheduledTasksUpdate(e, apiClient, info) {
+        if (apiClient.serverId() === serverId) {
+            updateTasks(info);
+        }
+    }
+
+    var pollInterval;
+    var button = options.button;
+    var serverId = ApiClient.serverId();
+
+    function onPollIntervalFired() {
+        if (!connectionManager.getApiClient(serverId).isMessageChannelOpen()) {
+            pollTasks();
+        }
+    }
+
+    function startInterval() {
+        var apiClient = connectionManager.getApiClient(serverId);
+
+        if (pollInterval) {
+            clearInterval(pollInterval);
+        }
+        apiClient.sendMessage('ScheduledTasksInfoStart', '1000,1000');
+        pollInterval = setInterval(onPollIntervalFired, 5000);
+    }
+
+    function stopInterval() {
+        connectionManager.getApiClient(serverId).sendMessage('ScheduledTasksInfoStop');
+
+        if (pollInterval) {
+            clearInterval(pollInterval);
+        }
+    }
+
+    if (options.panel) {
+        options.panel.classList.add('hide');
+    }
+
+    if (options.mode == 'off') {
+        button.removeEventListener('click', onButtonClick);
+        events.off(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate);
+        stopInterval();
+    } else {
+        button.addEventListener('click', onButtonClick);
+        pollTasks();
+        startInterval();
+        events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate);
+    }
+}
diff --git a/src/scripts/touchHelper.js b/src/scripts/touchHelper.js
index 97455fc969..c3e3b01a1c 100644
--- a/src/scripts/touchHelper.js
+++ b/src/scripts/touchHelper.js
@@ -1,12 +1,12 @@
-define(['dom', 'events'], function (dom, events) {
-    'use strict';
+import dom from 'dom';
+import events from 'events';
 
-    function getTouches(e) {
+function getTouches(e) {
+    return e.changedTouches || e.targetTouches || e.touches;
+}
 
-        return e.changedTouches || e.targetTouches || e.touches;
-    }
-
-    function TouchHelper(elem, options) {
+class TouchHelper {
+    constructor(elem, options) {
 
         options = options || {};
         var touchTarget;
@@ -138,8 +138,7 @@ define(['dom', 'events'], function (dom, events) {
             passive: true
         });
     }
-
-    TouchHelper.prototype.destroy = function () {
+    destroy() {
 
         var elem = this.elem;
 
@@ -165,7 +164,7 @@ define(['dom', 'events'], function (dom, events) {
         this.touchEnd = null;
 
         this.elem = null;
-    };
+    }
+}
 
-    return TouchHelper;
-});
+export default TouchHelper;

From 0473e549abca7ce5aa449ff9f240f3e3b9cf7fbb Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Fri, 17 Jul 2020 11:30:56 +0100
Subject: [PATCH 02/12] update variable declerations for appSettings and
 userSettings

---
 src/scripts/settings/appSettings.js  |  8 ++++----
 src/scripts/settings/userSettings.js | 20 ++++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/scripts/settings/appSettings.js b/src/scripts/settings/appSettings.js
index 6f0975e98c..ffd63b9561 100644
--- a/src/scripts/settings/appSettings.js
+++ b/src/scripts/settings/appSettings.js
@@ -28,7 +28,7 @@ import events from 'events';
     }
 
     export function enableAutomaticBitrateDetection(isInNetwork, mediaType, val) {
-        var key = 'enableautobitratebitrate-' + mediaType + '-' + isInNetwork;
+        const key = 'enableautobitratebitrate-' + mediaType + '-' + isInNetwork;
         if (val !== undefined) {
             if (isInNetwork && mediaType === 'Audio') {
                 val = true;
@@ -45,7 +45,7 @@ import events from 'events';
     }
 
     export function maxStreamingBitrate(isInNetwork, mediaType, val) {
-        var key = 'maxbitrate-' + mediaType + '-' + isInNetwork;
+        const key = 'maxbitrate-' + mediaType + '-' + isInNetwork;
         if (val !== undefined) {
             if (isInNetwork && mediaType === 'Audio') {
                 //  nothing to do, this is always a max value
@@ -67,7 +67,7 @@ import events from 'events';
             this.set('maxStaticMusicBitrate', val);
         }
 
-        var defaultValue = 320000;
+        const defaultValue = 320000;
         return parseInt(this.get('maxStaticMusicBitrate') || defaultValue.toString()) || defaultValue;
     }
 
@@ -118,7 +118,7 @@ import events from 'events';
     }
 
     export function set(name, value, userId) {
-        var currentValue = this.get(name, userId);
+        const currentValue = this.get(name, userId);
         appStorage.setItem(getKey(name, userId), value);
 
         if (currentValue !== value) {
diff --git a/src/scripts/settings/userSettings.js b/src/scripts/settings/userSettings.js
index 1b5283fa43..bd6050b5fe 100644
--- a/src/scripts/settings/userSettings.js
+++ b/src/scripts/settings/userSettings.js
@@ -2,7 +2,7 @@ import appSettings from 'appSettings';
 import events from 'events';
 
 function onSaveTimeout() {
-    var self = this;
+    const self = this;
     self.saveTimeout = null;
     self.currentApiClient.updateDisplayPreferences('usersettings', self.displayPrefs, self.currentUserId, 'emby');
 }
@@ -37,7 +37,7 @@ export class UserSettings {
             return Promise.resolve();
         }
 
-        var self = this;
+        const self = this;
 
         return apiClient.getDisplayPreferences('usersettings', userId, 'emby').then(function (result) {
             result.CustomPrefs = result.CustomPrefs || {};
@@ -63,9 +63,9 @@ export class UserSettings {
      * @param {boolean} enableOnServer - Flag to save preferences on server.
      */
     set(name, value, enableOnServer) {
-        var userId = this.currentUserId;
-        var currentValue = this.get(name, enableOnServer);
-        var result = appSettings.set(name, value, userId);
+        const userId = this.currentUserId;
+        const currentValue = this.get(name, enableOnServer);
+        const result = appSettings.set(name, value, userId);
 
         if (enableOnServer !== false && this.displayPrefs) {
             this.displayPrefs.CustomPrefs[name] = value == null ? value : value.toString();
@@ -86,7 +86,7 @@ export class UserSettings {
      * @return {string} Value of setting.
      */
     get(name, enableOnServer) {
-        var userId = this.currentUserId;
+        const userId = this.currentUserId;
         if (enableOnServer !== false && this.displayPrefs) {
             return this.displayPrefs.CustomPrefs[name];
         }
@@ -100,7 +100,7 @@ export class UserSettings {
      * @return {Object|Promise} Configuration or Promise.
      */
     serverConfig(config) {
-        var apiClient = this.currentApiClient;
+        const apiClient = this.currentApiClient;
         if (config) {
             return apiClient.updateUserConfiguration(this.currentUserId, config);
         }
@@ -349,7 +349,7 @@ export class UserSettings {
             return this.set('libraryPageSize', parseInt(val, 10), false);
         }
 
-        var libraryPageSize = parseInt(this.get('libraryPageSize', false), 10);
+        const libraryPageSize = parseInt(this.get('libraryPageSize', false), 10);
         if (libraryPageSize === 0) {
             // Explicitly return 0 to avoid returning 100 because 0 is falsy.
             return 0;
@@ -378,7 +378,7 @@ export class UserSettings {
      * @return {Object} Query.
      */
     loadQuerySettings(key, query) {
-        var values = this.get(key);
+        let values = this.get(key);
         if (values) {
             values = JSON.parse(values);
             return Object.assign(query, values);
@@ -393,7 +393,7 @@ export class UserSettings {
      * @param {Object} query - Query.
      */
     saveQuerySettings(key, query) {
-        var values = {};
+        const values = {};
         if (query.SortBy) {
             values.SortBy = query.SortBy;
         }

From 46638fb9a9f94b70ad6dea378a22fededf26b5de Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Fri, 17 Jul 2020 11:32:23 +0100
Subject: [PATCH 03/12] update Variable declerations for taskbutton and
 touchHelper

---
 src/scripts/taskbutton.js  | 14 +++++-----
 src/scripts/touchHelper.js | 52 +++++++++++++++++++-------------------
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/scripts/taskbutton.js b/src/scripts/taskbutton.js
index d2c9d6c91e..85062fdaa5 100644
--- a/src/scripts/taskbutton.js
+++ b/src/scripts/taskbutton.js
@@ -13,7 +13,7 @@ export default function (options) {
     }
 
     function updateTasks(tasks) {
-        var task = tasks.filter(function (t) {
+        const task = tasks.filter(function (t) {
             return t.Key == options.taskKey;
         })[0];
 
@@ -36,7 +36,7 @@ export default function (options) {
         }
 
         button.setAttribute('data-taskid', task.Id);
-        var progress = (task.CurrentProgressPercentage || 0).toFixed(1);
+        const progress = (task.CurrentProgressPercentage || 0).toFixed(1);
 
         if (options.progressElem) {
             options.progressElem.value = progress;
@@ -49,7 +49,7 @@ export default function (options) {
         }
 
         if (options.lastResultElem) {
-            var lastResult = task.LastExecutionResult ? task.LastExecutionResult.Status : '';
+            const lastResult = task.LastExecutionResult ? task.LastExecutionResult.Status : '';
 
             if (lastResult == 'Failed') {
                 options.lastResultElem.html('<span style="color:#FF0000;">(' + globalize.translate('LabelFailed') + ')</span>');
@@ -77,9 +77,9 @@ export default function (options) {
         }
     }
 
-    var pollInterval;
-    var button = options.button;
-    var serverId = ApiClient.serverId();
+    let pollInterval;
+    const button = options.button;
+    const serverId = ApiClient.serverId();
 
     function onPollIntervalFired() {
         if (!connectionManager.getApiClient(serverId).isMessageChannelOpen()) {
@@ -88,7 +88,7 @@ export default function (options) {
     }
 
     function startInterval() {
-        var apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
         if (pollInterval) {
             clearInterval(pollInterval);
diff --git a/src/scripts/touchHelper.js b/src/scripts/touchHelper.js
index c3e3b01a1c..c12cf79513 100644
--- a/src/scripts/touchHelper.js
+++ b/src/scripts/touchHelper.js
@@ -9,23 +9,23 @@ class TouchHelper {
     constructor(elem, options) {
 
         options = options || {};
-        var touchTarget;
-        var touchStartX;
-        var touchStartY;
-        var lastDeltaX;
-        var lastDeltaY;
-        var thresholdYMet;
-        var self = this;
+        let touchTarget;
+        let touchStartX;
+        let touchStartY;
+        let lastDeltaX;
+        let lastDeltaY;
+        let thresholdYMet;
+        const self = this;
 
-        var swipeXThreshold = options.swipeXThreshold || 50;
-        var swipeYThreshold = options.swipeYThreshold || 50;
-        var swipeXMaxY = 30;
+        const swipeXThreshold = options.swipeXThreshold || 50;
+        const swipeYThreshold = options.swipeYThreshold || 50;
+        const swipeXMaxY = 30;
 
-        var excludeTagNames = options.ignoreTagNames || [];
+        const excludeTagNames = options.ignoreTagNames || [];
 
-        var touchStart = function (e) {
+        const touchStart = function (e) {
 
-            var touch = getTouches(e)[0];
+            const touch = getTouches(e)[0];
             touchTarget = null;
             touchStartX = 0;
             touchStartY = 0;
@@ -35,7 +35,7 @@ class TouchHelper {
 
             if (touch) {
 
-                var currentTouchTarget = touch.target;
+                const currentTouchTarget = touch.target;
 
                 if (dom.parentWithTag(currentTouchTarget, excludeTagNames)) {
                     return;
@@ -47,18 +47,18 @@ class TouchHelper {
             }
         };
 
-        var touchEnd = function (e) {
+        const touchEnd = function (e) {
 
-            var isTouchMove = e.type === 'touchmove';
+            const isTouchMove = e.type === 'touchmove';
 
             if (touchTarget) {
-                var touch = getTouches(e)[0];
+                const touch = getTouches(e)[0];
 
-                var deltaX;
-                var deltaY;
+                let deltaX;
+                let deltaY;
 
-                var clientX;
-                var clientY;
+                let clientX;
+                let clientY;
 
                 if (touch) {
                     clientX = touch.clientX || 0;
@@ -70,8 +70,8 @@ class TouchHelper {
                     deltaY = 0;
                 }
 
-                var currentDeltaX = lastDeltaX == null ? deltaX : (deltaX - lastDeltaX);
-                var currentDeltaY = lastDeltaY == null ? deltaY : (deltaY - lastDeltaY);
+                const currentDeltaX = lastDeltaX == null ? deltaX : (deltaX - lastDeltaX);
+                const currentDeltaY = lastDeltaY == null ? deltaY : (deltaY - lastDeltaY);
 
                 lastDeltaX = deltaX;
                 lastDeltaY = deltaY;
@@ -140,11 +140,11 @@ class TouchHelper {
     }
     destroy() {
 
-        var elem = this.elem;
+        const elem = this.elem;
 
         if (elem) {
-            var touchStart = this.touchStart;
-            var touchEnd = this.touchEnd;
+            const touchStart = this.touchStart;
+            const touchEnd = this.touchEnd;
 
             dom.removeEventListener(elem, 'touchstart', touchStart, {
                 passive: true

From 523231fcd1a474d189a061e7e6914ab4e201468a Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Fri, 17 Jul 2020 17:43:39 +0100
Subject: [PATCH 04/12] Migration of metadataeditor and personeditor to ES6
 modules

This reverts commit e75ff1fb9a12dbfe4a99a9dad4a0ea31a6343894.
---
 package.json                                  |   2 +
 src/components/itemContextMenu.js             |   2 +-
 .../metadataEditor/metadataEditor.js          | 212 ++++++++++--------
 src/components/metadataEditor/personEditor.js |  31 ++-
 4 files changed, 139 insertions(+), 108 deletions(-)

diff --git a/package.json b/package.json
index b911778bc2..32ae3a2c01 100644
--- a/package.json
+++ b/package.json
@@ -111,6 +111,8 @@
           "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
           "src/components/mediaLibraryCreator/mediaLibraryCreator.js",
           "src/components/mediaLibraryEditor/mediaLibraryEditor.js",
+          "src/components/metadataEditor/metadataEditor.js",
+          "src/components/metadataEditor/personEditor.js",
           "src/components/listview/listview.js",
           "src/components/playback/brightnessosd.js",
           "src/components/playback/mediasession.js",
diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index 584b25f0e4..68fbbb74c5 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -554,7 +554,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                 });
             } else {
                 require(['metadataEditor'], function (metadataEditor) {
-                    metadataEditor.show(item.Id, serverId).then(resolve, reject);
+                    metadataEditor.default.show(item.Id, serverId).then(resolve, reject);
                 });
             }
         });
diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js
index 61a4ba7f24..9977ae1ead 100644
--- a/src/components/metadataEditor/metadataEditor.js
+++ b/src/components/metadataEditor/metadataEditor.js
@@ -1,9 +1,30 @@
-define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loading', 'focusManager', 'connectionManager', 'globalize', 'require', 'shell', 'emby-checkbox', 'emby-input', 'emby-select', 'listViewStyle', 'emby-textarea', 'emby-button', 'paper-icon-button-light', 'css!./../formdialog', 'clearButtonStyle', 'flexStyles'], function (itemHelper, dom, layoutManager, dialogHelper, datetime, loading, focusManager, connectionManager, globalize, require, shell) {
-    'use strict';
+import itemHelper from 'itemHelper';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import dialogHelper from 'dialogHelper';
+import datetime from 'datetime';
+import loading from 'loading';
+import focusManager from 'focusManager';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import require from 'require';
+import shell from 'shell';
+import 'emby-checkbox';
+import 'emby-input';
+import 'emby-select';
+import 'listViewStyle';
+import 'emby-textarea';
+import 'emby-button';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'clearButtonStyle';
+import 'flexStyles';
 
-    var currentContext;
-    var metadataEditorInfo;
-    var currentItem;
+/* eslint-disable indent */
+
+    let currentContext;
+    let metadataEditorInfo;
+    let currentItem;
 
     function isDialog() {
         return currentContext.classList.contains('dialog');
@@ -28,11 +49,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             closeDialog(true);
         }
 
-        var apiClient = getApiClient();
+        const apiClient = getApiClient();
 
         apiClient.updateItem(item).then(function () {
 
-            var newContentType = form.querySelector('#selectContentType').value || '';
+            const newContentType = form.querySelector('#selectContentType').value || '';
 
             if ((metadataEditorInfo.ContentType || '') !== newContentType) {
 
@@ -56,7 +77,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function getSelectedAirDays(form) {
-        var checkedItems = form.querySelectorAll('.chkAirDay:checked') || [];
+        const checkedItems = form.querySelectorAll('.chkAirDay:checked') || [];
         return Array.prototype.map.call(checkedItems, function (c) {
             return c.getAttribute('data-day');
         });
@@ -92,7 +113,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function getDateValue(form, element, property) {
 
-        var val = form.querySelector(element).value;
+        let val = form.querySelector(element).value;
 
         if (!val) {
             return null;
@@ -100,14 +121,14 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         if (currentItem[property]) {
 
-            var date = datetime.parseISO8601Date(currentItem[property], true);
+            const date = datetime.parseISO8601Date(currentItem[property], true);
 
-            var parts = date.toISOString().split('T');
+            const parts = date.toISOString().split('T');
 
             // If the date is the same, preserve the time
             if (parts[0].indexOf(val) === 0) {
 
-                var iso = parts[1];
+                const iso = parts[1];
 
                 val += 'T' + iso;
             }
@@ -120,9 +141,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         loading.show();
 
-        var form = this;
+        const form = this;
 
-        var item = {
+        const item = {
             Id: currentItem.Id,
             Name: form.querySelector('#txtName').value,
             OriginalTitle: form.querySelector('#txtOriginalName').value,
@@ -168,9 +189,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         item.ProviderIds = Object.assign({}, currentItem.ProviderIds);
 
-        var idElements = form.querySelectorAll('.txtExternalId');
+        const idElements = form.querySelectorAll('.txtExternalId');
         Array.prototype.map.call(idElements, function (idElem) {
-            var providerKey = idElem.getAttribute('data-providerkey');
+            const providerKey = idElem.getAttribute('data-providerkey');
             item.ProviderIds[providerKey] = idElem.value;
         });
 
@@ -179,7 +200,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         if (currentItem.Type === 'Person') {
 
-            var placeOfBirth = form.querySelector('#txtPlaceOfBirth').value;
+            const placeOfBirth = form.querySelector('#txtPlaceOfBirth').value;
 
             item.ProductionLocations = placeOfBirth ? [placeOfBirth] : [];
         }
@@ -187,11 +208,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         if (currentItem.Type === 'Series') {
 
             // 600000000
-            var seriesRuntime = form.querySelector('#txtSeriesRuntime').value;
+            const seriesRuntime = form.querySelector('#txtSeriesRuntime').value;
             item.RunTimeTicks = seriesRuntime ? (seriesRuntime * 600000000) : null;
         }
 
-        var tagline = form.querySelector('#txtTagline').value;
+        const tagline = form.querySelector('#txtTagline').value;
         item.Taglines = tagline ? [tagline] : [];
 
         submitUpdatedItem(form, item);
@@ -215,8 +236,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             prompt({
                 label: 'Value:'
             }).then(function (text) {
-                var list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList');
-                var items = getListValues(list);
+                const list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList');
+                const items = getListValues(list);
                 items.push(text);
                 populateListView(list, items, sortCallback);
             });
@@ -224,7 +245,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function removeElementFromList(source) {
-        var el = dom.parentWithClass(source, 'listItem');
+        const el = dom.parentWithClass(source, 'listItem');
         el.parentNode.removeChild(el);
     }
 
@@ -234,7 +255,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
             personEditor.show(person).then(function (updatedPerson) {
 
-                var isNew = index === -1;
+                const isNew = index === -1;
 
                 if (isNew) {
                     currentItem.People.push(updatedPerson);
@@ -247,13 +268,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function onEditorClick(e) {
 
-        var btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList');
+        const btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList');
         if (btnRemoveFromEditorList) {
             removeElementFromList(btnRemoveFromEditorList);
             return;
         }
 
-        var btnAddTextItem = dom.parentWithClass(e.target, 'btnAddTextItem');
+        const btnAddTextItem = dom.parentWithClass(e.target, 'btnAddTextItem');
         if (btnAddTextItem) {
             addElementToList(btnAddTextItem);
         }
@@ -264,7 +285,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function bindAll(elems, eventName, fn) {
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (let i = 0, length = elems.length; i < length; i++) {
             elems[i].addEventListener(eventName, fn);
         }
     }
@@ -272,11 +293,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     function init(context, apiClient) {
 
         context.querySelector('.externalIds').addEventListener('click', function (e) {
-            var btnOpenExternalId = dom.parentWithClass(e.target, 'btnOpenExternalId');
+            const btnOpenExternalId = dom.parentWithClass(e.target, 'btnOpenExternalId');
             if (btnOpenExternalId) {
-                var field = context.querySelector('#' + btnOpenExternalId.getAttribute('data-fieldid'));
+                const field = context.querySelector('#' + btnOpenExternalId.getAttribute('data-fieldid'));
 
-                var formatString = field.getAttribute('data-formatstring');
+                const formatString = field.getAttribute('data-formatstring');
 
                 if (field.value) {
                     shell.openUrl(formatString.replace('{0}', field.value));
@@ -311,7 +332,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         context.removeEventListener('click', onEditorClick);
         context.addEventListener('click', onEditorClick);
 
-        var form = context.querySelector('form');
+        const form = context.querySelector('form');
         form.removeEventListener('submit', onSubmit);
         form.addEventListener('submit', onSubmit);
 
@@ -322,15 +343,15 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         context.querySelector('#peopleList').addEventListener('click', function (e) {
 
-            var index;
-            var btnDeletePerson = dom.parentWithClass(e.target, 'btnDeletePerson');
+            let index;
+            const btnDeletePerson = dom.parentWithClass(e.target, 'btnDeletePerson');
             if (btnDeletePerson) {
                 index = parseInt(btnDeletePerson.getAttribute('data-index'));
                 currentItem.People.splice(index, 1);
                 populatePeople(context, currentItem.People);
             }
 
-            var btnEditPerson = dom.parentWithClass(e.target, 'btnEditPerson');
+            const btnEditPerson = dom.parentWithClass(e.target, 'btnEditPerson');
             if (btnEditPerson) {
                 index = parseInt(btnEditPerson.getAttribute('data-index'));
                 editPerson(context, currentItem.People[index], index);
@@ -340,7 +361,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function getItem(itemId, serverId) {
 
-        var apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
         if (itemId) {
             return apiClient.getItem(apiClient.getCurrentUserId(), itemId);
@@ -351,7 +372,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function getEditorConfig(itemId, serverId) {
 
-        var apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
         if (itemId) {
             return apiClient.getJSON(apiClient.getUrl('Items/' + itemId + '/MetadataEditor'));
@@ -362,13 +383,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function populateCountries(select, allCountries) {
 
-        var html = '';
+        let html = '';
 
         html += "<option value=''></option>";
 
-        for (var i = 0, length = allCountries.length; i < length; i++) {
+        for (let i = 0, length = allCountries.length; i < length; i++) {
 
-            var culture = allCountries[i];
+            const culture = allCountries[i];
 
             html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>';
         }
@@ -378,13 +399,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function populateLanguages(select, languages) {
 
-        var html = '';
+        let html = '';
 
         html += "<option value=''></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.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
         }
@@ -400,41 +421,41 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             showElement('#fldContentType', context);
         }
 
-        var html = metadataInfo.ContentTypeOptions.map(function (i) {
+        const html = metadataInfo.ContentTypeOptions.map(function (i) {
 
             return '<option value="' + i.Value + '">' + i.Name + '</option>';
 
         }).join('');
 
-        var selectEl = context.querySelector('#selectContentType');
+        const selectEl = context.querySelector('#selectContentType');
         selectEl.innerHTML = html;
         selectEl.value = metadataInfo.ContentType || '';
     }
 
     function loadExternalIds(context, item, externalIds) {
 
-        var html = '';
+        let html = '';
 
-        var providerIds = item.ProviderIds || {};
+        const providerIds = item.ProviderIds || {};
 
-        for (var i = 0, length = externalIds.length; i < length; i++) {
+        for (let i = 0, length = externalIds.length; i < length; i++) {
 
-            var idInfo = externalIds[i];
+            const idInfo = externalIds[i];
 
-            var id = 'txt1' + idInfo.Key;
-            var formatString = idInfo.UrlFormatString || '';
+            const id = 'txt1' + idInfo.Key;
+            const formatString = idInfo.UrlFormatString || '';
 
-            var fullName = idInfo.Name;
+            let fullName = idInfo.Name;
             if (idInfo.Type) {
                 fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type);
             }
 
-            var labelText = globalize.translate('LabelDynamicExternalId', fullName);
+            const labelText = globalize.translate('LabelDynamicExternalId', fullName);
 
             html += '<div class="inputContainer">';
             html += '<div class="flex align-items-center">';
 
-            var value = providerIds[idInfo.Key] || '';
+            const value = providerIds[idInfo.Key] || '';
 
             html += '<div class="flex-grow">';
             html += '<input is="emby-input" class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" id="' + id + '" label="' + labelText + '"/>';
@@ -448,7 +469,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             html += '</div>';
         }
 
-        var elem = context.querySelector('.externalIds', context);
+        const elem = context.querySelector('.externalIds', context);
         elem.innerHTML = html;
 
         if (externalIds.length) {
@@ -465,7 +486,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         context = context || document;
         if (typeof selector === 'string') {
 
-            var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
+            const elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
 
             Array.prototype.forEach.call(elements, function (el) {
                 if (el) {
@@ -484,7 +505,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         context = context || document;
         if (typeof selector === 'string') {
 
-            var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
+            const elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
 
             Array.prototype.forEach.call(elements, function (el) {
                 if (el) {
@@ -686,7 +707,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function fillItemInfo(context, item, parentalRatingOptions) {
 
-        var select = context.querySelector('#selectOfficialRating');
+        let select = context.querySelector('#selectOfficialRating');
 
         populateRatings(parentalRatingOptions, select, item.OfficialRating);
 
@@ -698,7 +719,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         select.value = item.CustomRating || '';
 
-        var selectStatus = context.querySelector('#selectStatus');
+        const selectStatus = context.querySelector('#selectStatus');
         populateStatus(selectStatus);
         selectStatus.value = item.Status || '';
 
@@ -717,8 +738,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         populateListView(context.querySelector('#listTags'), item.Tags);
 
-        var lockData = (item.LockData || false);
-        var chkLockData = context.querySelector('#chkLockData');
+        const lockData = (item.LockData || false);
+        const chkLockData = context.querySelector('#chkLockData');
         chkLockData.checked = lockData;
         if (chkLockData.checked) {
             hideElement('.providerSettingsContainer', context);
@@ -756,7 +777,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             return a.Name;
         }).join(';');
 
-        var date;
+        let date;
 
         if (item.DateCreated) {
             try {
@@ -798,7 +819,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         context.querySelector('#txtAirTime').value = item.AirTime || '';
 
-        var placeofBirth = item.ProductionLocations && item.ProductionLocations.length ? item.ProductionLocations[0] : '';
+        const placeofBirth = item.ProductionLocations && item.ProductionLocations.length ? item.ProductionLocations[0] : '';
         context.querySelector('#txtPlaceOfBirth').value = placeofBirth;
 
         context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || '';
@@ -808,7 +829,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         if (item.RunTimeTicks) {
 
-            var minutes = item.RunTimeTicks / 600000000;
+            const minutes = item.RunTimeTicks / 600000000;
 
             context.querySelector('#txtSeriesRuntime').value = Math.round(minutes);
         } else {
@@ -818,18 +839,16 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function populateRatings(allParentalRatings, select, currentValue) {
 
-        var html = '';
+        let html = '';
 
         html += "<option value=''></option>";
 
-        var ratings = [];
-        var i;
-        var length;
-        var rating;
+        const ratings = [];
+        let rating;
 
-        var currentValueFound = false;
+        let currentValueFound = false;
 
-        for (i = 0, length = allParentalRatings.length; i < length; i++) {
+        for (let i = 0, length = allParentalRatings.length; i < length; i++) {
 
             rating = allParentalRatings[i];
 
@@ -844,7 +863,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             ratings.push({ Name: currentValue, Value: currentValue });
         }
 
-        for (i = 0, length = ratings.length; i < length; i++) {
+        for (let i = 0, length = ratings.length; i < length; i++) {
 
             rating = ratings[i];
 
@@ -855,7 +874,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function populateStatus(select) {
-        var html = '';
+        let html = '';
 
         html += "<option value=''></option>";
         html += "<option value='Continuing'>" + globalize.translate('Continuing') + '</option>';
@@ -873,8 +892,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         } else {
             items = sortCallback(items);
         }
-        var html = '';
-        for (var i = 0; i < items.length; i++) {
+        let html = '';
+        for (let i = 0; i < items.length; i++) {
             html += '<div class="listItem">';
 
             html += '<span class="material-icons listItemIcon live_tv" style="background-color:#333;"></span>';
@@ -897,14 +916,14 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function populatePeople(context, people) {
 
-        var lastType = '';
-        var html = '';
+        let lastType = '';
+        let html = '';
 
-        var elem = context.querySelector('#peopleList');
+        const elem = context.querySelector('#peopleList');
 
-        for (var i = 0, length = people.length; i < length; i++) {
+        for (let i = 0, length = people.length; i < length; i++) {
 
-            var person = people[i];
+            const person = people[i];
 
             html += '<div class="listItem">';
 
@@ -934,13 +953,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function getLockedFieldsHtml(fields, currentFields) {
 
-        var html = '';
-        for (var i = 0; i < fields.length; i++) {
+        let html = '';
+        for (let i = 0; i < fields.length; i++) {
 
-            var field = fields[i];
-            var name = field.name;
-            var value = field.value || field.name;
-            var checkedHtml = currentFields.indexOf(value) === -1 ? ' checked' : '';
+            const field = fields[i];
+            const name = field.name;
+            const value = field.value || field.name;
+            const checkedHtml = currentFields.indexOf(value) === -1 ? ' checked' : '';
             html += '<label>';
             html += '<input type="checkbox" is="emby-checkbox" class="selectLockedField" data-value="' + value + '"' + checkedHtml + '/>';
             html += '<span>' + name + '</span>';
@@ -950,10 +969,10 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function fillMetadataSettings(context, item, lockedFields) {
-        var container = context.querySelector('.providerSettingsContainer');
+        const container = context.querySelector('.providerSettingsContainer');
         lockedFields = lockedFields || [];
 
-        var lockedFieldsList = [
+        const lockedFieldsList = [
             { name: globalize.translate('Name'), value: 'Name' },
             { name: globalize.translate('Overview'), value: 'Overview' },
             { name: globalize.translate('Genres'), value: 'Genres' },
@@ -974,7 +993,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         lockedFieldsList.push({ name: globalize.translate('Studios'), value: 'Studios' });
         lockedFieldsList.push({ name: globalize.translate('Tags'), value: 'Tags' });
 
-        var html = '';
+        let html = '';
 
         html += '<h2>' + globalize.translate('HeaderEnabledFields') + '</h2>';
         html += '<p>' + globalize.translate('HeaderEnabledFieldsHelp') + '</p>';
@@ -988,13 +1007,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         Promise.all([getItem(itemId, serverId), getEditorConfig(itemId, serverId)]).then(function (responses) {
 
-            var item = responses[0];
+            const item = responses[0];
             metadataEditorInfo = responses[1];
 
             currentItem = item;
 
-            var languages = metadataEditorInfo.Cultures;
-            var countries = metadataEditorInfo.Countries;
+            const languages = metadataEditorInfo.Cultures;
+            const countries = metadataEditorInfo.Countries;
 
             renderContentTypeOptions(context, metadataEditorInfo);
 
@@ -1018,7 +1037,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
-            var fn = on ? 'on' : 'off';
+            const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
     }
@@ -1028,7 +1047,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         require(['text!./metadataEditor.template.html'], function (template) {
 
-            var dialogOptions = {
+            const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
             };
@@ -1039,11 +1058,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
                 dialogOptions.size = 'small';
             }
 
-            var dlg = dialogHelper.createDialog(dialogOptions);
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
             dlg.classList.add('formDialog');
 
-            var html = '';
+            let html = '';
 
             html += globalize.translateDocument(template, 'core');
 
@@ -1071,7 +1090,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         });
     }
 
-    return {
+    export default {
         show: function (itemId, serverId) {
             return new Promise(function (resolve, reject) {
                 return show(itemId, serverId, resolve, reject);
@@ -1101,4 +1120,5 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             });
         }
     };
-});
+
+/* eslint-enable indent */
diff --git a/src/components/metadataEditor/personEditor.js b/src/components/metadataEditor/personEditor.js
index fc6a0595f2..8ab7d94702 100644
--- a/src/components/metadataEditor/personEditor.js
+++ b/src/components/metadataEditor/personEditor.js
@@ -1,9 +1,17 @@
-define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-button-light', 'emby-input', 'emby-select', 'css!./../formdialog'], function (dialogHelper, layoutManager, globalize, require) {
-    'use strict';
+import dialogHelper from 'dialogHelper';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import require from 'require';
+import 'paper-icon-button-light';
+import 'emby-input';
+import 'emby-select';
+import 'css!./../formdialog';
+
+/* eslint-disable indent */
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
-            var fn = on ? 'on' : 'off';
+            const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
     }
@@ -13,7 +21,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
 
             require(['text!./personEditor.template.html'], function (template) {
 
-                var dialogOptions = {
+                const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
@@ -24,12 +32,12 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
                     dialogOptions.size = 'small';
                 }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+                const dlg = dialogHelper.createDialog(dialogOptions);
 
                 dlg.classList.add('formDialog');
 
-                var html = '';
-                var submitted = false;
+                let html = '';
+                let submitted = false;
 
                 html += globalize.translateDocument(template, 'core');
 
@@ -93,7 +101,8 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
         });
     }
 
-    return {
-        show: show
-    };
-});
+export default {
+    show: show
+};
+
+/* eslint-enable indent */

From f29f3e15fbc03f4594f6aa7c45be157b97779c8f Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Fri, 17 Jul 2020 17:52:05 +0100
Subject: [PATCH 05/12] Migration of playerstats to ES6 module

---
 package.json                              |   1 +
 src/components/playerstats/playerstats.js | 127 ++++++++++++----------
 src/controllers/playback/videoosd.js      |   2 +-
 3 files changed, 72 insertions(+), 58 deletions(-)

diff --git a/package.json b/package.json
index b911778bc2..192fe79bd1 100644
--- a/package.json
+++ b/package.json
@@ -121,6 +121,7 @@
           "src/components/playback/playmethodhelper.js",
           "src/components/playback/remotecontrolautoplay.js",
           "src/components/playback/volumeosd.js",
+          "src/components/playerstats/playerstats.js",
           "src/components/playlisteditor/playlisteditor.js",
           "src/components/groupedcards.js",
           "src/components/htmlMediaHelper.js",
diff --git a/src/components/playerstats/playerstats.js b/src/components/playerstats/playerstats.js
index a65baf3553..ca9d6dc20e 100644
--- a/src/components/playerstats/playerstats.js
+++ b/src/components/playerstats/playerstats.js
@@ -1,9 +1,19 @@
-define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlayManager', 'playMethodHelper', 'layoutManager', 'serverNotifications', 'paper-icon-button-light', 'css!./playerstats'], function (events, globalize, playbackManager, connectionManager, syncPlayManager, playMethodHelper, layoutManager, serverNotifications) {
-    'use strict';
+import events from 'events';
+import globalize from 'globalize';
+import playbackManager from 'playbackManager';
+import connectionManager from 'connectionManager';
+import syncPlayManager from 'syncPlayManager';
+import playMethodHelper from 'playMethodHelper';
+import layoutManager from 'layoutManager';
+import serverNotifications from 'serverNotifications';
+import 'paper-icon-button-light';
+import 'css!./playerstats';
+
+/* eslint-disable indent */
 
     function init(instance) {
 
-        var parent = document.createElement('div');
+        const parent = document.createElement('div');
 
         parent.classList.add('playerStats');
 
@@ -13,7 +23,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
 
         parent.classList.add('hide');
 
-        var button;
+        let button;
 
         if (layoutManager.tv) {
             button = '';
@@ -21,7 +31,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
             button = '<button type="button" is="paper-icon-button-light" class="playerStats-closeButton"><span class="material-icons close"></span></button>';
         }
 
-        var contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content';
+        const contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content';
 
         parent.innerHTML = '<div class="' + contentClass + '">' + button + '<div class="playerStats-stats"></div></div>';
 
@@ -44,9 +54,9 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
 
         elem.querySelector('.playerStats-stats').innerHTML = categories.map(function (category) {
 
-            var categoryHtml = '';
+            let categoryHtml = '';
 
-            var stats = category.stats;
+            const stats = category.stats;
 
             if (stats.length && category.name) {
                 categoryHtml += '<div class="playerStats-stat playerStats-stat-header">';
@@ -62,11 +72,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
                 categoryHtml += '</div>';
             }
 
-            for (var i = 0, length = stats.length; i < length; i++) {
+            for (let i = 0, length = stats.length; i < length; i++) {
 
                 categoryHtml += '<div class="playerStats-stat">';
 
-                var stat = stats[i];
+                const stat = stats[i];
 
                 categoryHtml += '<div class="playerStats-stat-label">';
                 categoryHtml += stat.label;
@@ -86,13 +96,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
 
     function getSession(instance, player) {
 
-        var now = new Date().getTime();
+        const now = new Date().getTime();
 
         if ((now - (instance.lastSessionTime || 0)) < 10000) {
             return Promise.resolve(instance.lastSession);
         }
 
-        var apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
+        const apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
 
         return apiClient.getSessions({
             deviceId: apiClient.deviceId()
@@ -114,12 +124,12 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
     }
 
     function getTranscodingStats(session, player, displayPlayMethod) {
-        var sessionStats = [];
+        const sessionStats = [];
 
-        var videoCodec;
-        var audioCodec;
-        var totalBitrate;
-        var audioChannels;
+        let videoCodec;
+        let audioCodec;
+        let totalBitrate;
+        let audioChannels;
 
         if (session.TranscodingInfo) {
 
@@ -208,11 +218,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
 
     function getMediaSourceStats(session, player, displayPlayMethod) {
 
-        var sessionStats = [];
+        const sessionStats = [];
 
-        var mediaSource = playbackManager.currentMediaSource(player) || {};
-        var totalBitrate = mediaSource.Bitrate;
-        var mediaFileSize = mediaSource.Size;
+        const mediaSource = playbackManager.currentMediaSource(player) || {};
+        const totalBitrate = mediaSource.Bitrate;
+        const mediaFileSize = mediaSource.Size;
 
         if (mediaSource.Container) {
             sessionStats.push({
@@ -236,26 +246,26 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
             });
         }
 
-        var mediaStreams = mediaSource.MediaStreams || [];
-        var videoStream = mediaStreams.filter(function (s) {
+        const mediaStreams = mediaSource.MediaStreams || [];
+        const videoStream = mediaStreams.filter(function (s) {
 
             return s.Type === 'Video';
 
         })[0] || {};
 
-        var videoCodec = videoStream.Codec;
+        const videoCodec = videoStream.Codec;
 
-        var audioStreamIndex = playbackManager.getAudioStreamIndex(player);
-        var audioStream = playbackManager.audioTracks(player).filter(function (s) {
+        const audioStreamIndex = playbackManager.getAudioStreamIndex(player);
+        const audioStream = playbackManager.audioTracks(player).filter(function (s) {
 
             return s.Type === 'Audio' && s.Index === audioStreamIndex;
 
         })[0] || {};
 
-        var audioCodec = audioStream.Codec;
-        var audioChannels = audioStream.Channels;
+        const audioCodec = audioStream.Codec;
+        const audioChannels = audioStream.Channels;
 
-        var videoInfos = [];
+        const videoInfos = [];
 
         if (videoCodec) {
             videoInfos.push(videoCodec.toUpperCase());
@@ -279,7 +289,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
             });
         }
 
-        var audioInfos = [];
+        const audioInfos = [];
 
         if (audioCodec) {
             audioInfos.push(audioCodec.toUpperCase());
@@ -328,8 +338,8 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
     }
 
     function getSyncPlayStats() {
-        var syncStats = [];
-        var stats = syncPlayManager.getStats();
+        const syncStats = [];
+        const stats = syncPlayManager.getStats();
 
         syncStats.push({
             label: globalize.translate('LabelSyncPlayTimeOffset'),
@@ -351,18 +361,18 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
 
     function getStats(instance, player) {
 
-        var statsPromise = player.getStats ? player.getStats() : Promise.resolve({});
-        var sessionPromise = getSession(instance, player);
+        const statsPromise = player.getStats ? player.getStats() : Promise.resolve({});
+        const sessionPromise = getSession(instance, player);
 
         return Promise.all([statsPromise, sessionPromise]).then(function (responses) {
 
-            var playerStatsResult = responses[0];
-            var playerStats = playerStatsResult.categories || [];
-            var session = responses[1];
+            const playerStatsResult = responses[0];
+            const playerStats = playerStatsResult.categories || [];
+            const session = responses[1];
 
-            var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
+            const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
 
-            var baseCategory = {
+            const baseCategory = {
                 stats: [],
                 name: 'Playback Info'
             };
@@ -377,13 +387,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
                 value: player.name
             });
 
-            var categories = [];
+            const categories = [];
 
             categories.push(baseCategory);
 
-            for (var i = 0, length = playerStats.length; i < length; i++) {
+            for (let i = 0, length = playerStats.length; i < length; i++) {
 
-                var category = playerStats[i];
+                const category = playerStats[i];
                 if (category.type === 'audio') {
                     category.name = 'Audio Info';
                 } else if (category.type === 'video') {
@@ -418,7 +428,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
 
     function renderPlayerStats(instance, player) {
 
-        var now = new Date().getTime();
+        const now = new Date().getTime();
 
         if ((now - (instance.lastRender || 0)) < 700) {
             return;
@@ -428,7 +438,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
 
         getStats(instance, player).then(function (stats) {
 
-            var elem = instance.element;
+            const elem = instance.element;
             if (!elem) {
                 return;
             }
@@ -439,7 +449,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
 
     function bindEvents(instance, player) {
 
-        var localOnTimeUpdate = function () {
+        const localOnTimeUpdate = function () {
             renderPlayerStats(instance, player);
         };
 
@@ -449,14 +459,15 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
 
     function unbindEvents(instance, player) {
 
-        var localOnTimeUpdate = instance.onTimeUpdate;
+        const localOnTimeUpdate = instance.onTimeUpdate;
 
         if (localOnTimeUpdate) {
             events.off(player, 'timeupdate', localOnTimeUpdate);
         }
     }
 
-    function PlayerStats(options) {
+class PlayerStats {
+    constructor(options) {
 
         this.options = options;
 
@@ -465,13 +476,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
         this.enabled(true);
     }
 
-    PlayerStats.prototype.enabled = function (enabled) {
+    enabled(enabled) {
 
         if (enabled == null) {
             return this._enabled;
         }
 
-        var options = this.options;
+        const options = this.options;
 
         if (!options) {
             return;
@@ -485,15 +496,15 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
             this.element.classList.add('hide');
             unbindEvents(this, options.player);
         }
-    };
+    }
 
-    PlayerStats.prototype.toggle = function () {
+    toggle() {
         this.enabled(!this.enabled());
-    };
+    }
 
-    PlayerStats.prototype.destroy = function () {
+    destroy() {
 
-        var options = this.options;
+        const options = this.options;
 
         if (options) {
 
@@ -501,12 +512,14 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
             unbindEvents(this, options.player);
         }
 
-        var elem = this.element;
+        const elem = this.element;
         if (elem) {
             elem.parentNode.removeChild(elem);
             this.element = null;
         }
-    };
+    }
+}
 
-    return PlayerStats;
-});
+/* eslint-enable indent */
+
+export default PlayerStats;
diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js
index d6caf24e81..88f6ec6d9c 100644
--- a/src/controllers/playback/videoosd.js
+++ b/src/controllers/playback/videoosd.js
@@ -964,7 +964,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
                     if (statsOverlay) {
                         statsOverlay.toggle();
                     } else {
-                        statsOverlay = new PlayerStats({
+                        statsOverlay = new PlayerStats.default({
                             player: player
                         });
                     }

From c11977c9fec56882a4e44133f0ce8d457c5b2113 Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Fri, 17 Jul 2020 19:04:56 +0100
Subject: [PATCH 06/12] Migration of wizard to ES6 modules

---
 package.json                           |   5 +
 src/controllers/wizard/finish.js       |  30 +++---
 src/controllers/wizard/remoteaccess.js |  71 ++++++------
 src/controllers/wizard/settings.js     | 143 +++++++++++++------------
 src/controllers/wizard/start.js        |  89 +++++++--------
 src/controllers/wizard/user.js         | 124 ++++++++++-----------
 6 files changed, 235 insertions(+), 227 deletions(-)

diff --git a/package.json b/package.json
index b911778bc2..d39e74478c 100644
--- a/package.json
+++ b/package.json
@@ -141,6 +141,11 @@
           "src/controllers/dashboard/logs.js",
           "src/controllers/user/subtitles.js",
           "src/controllers/dashboard/plugins/repositories.js",
+          "src/controllers/wizard/finish.js",
+          "src/controllers/wizard/remoteaccess.js",
+          "src/controllers/wizard/settings.js",
+          "src/controllers/wizard/start.js",
+          "src/controllers/wizard/user.js",
           "src/elements/emby-tabs/emby-tabs.js",
           "src/elements/emby-scroller/emby-scroller.js",
           "src/elements/emby-radio/emby-radio.js",
diff --git a/src/controllers/wizard/finish.js b/src/controllers/wizard/finish.js
index c27d9a5f4b..5451d6665c 100644
--- a/src/controllers/wizard/finish.js
+++ b/src/controllers/wizard/finish.js
@@ -1,18 +1,16 @@
-define(['loading'], function (loading) {
-    'use strict';
+import loading from 'loading';
 
-    function onFinish() {
-        loading.show();
-        ApiClient.ajax({
-            url: ApiClient.getUrl('Startup/Complete'),
-            type: 'POST'
-        }).then(function () {
-            loading.hide();
-            window.location.href = 'index.html';
-        });
-    }
+function onFinish() {
+    loading.show();
+    ApiClient.ajax({
+        url: ApiClient.getUrl('Startup/Complete'),
+        type: 'POST'
+    }).then(function () {
+        loading.hide();
+        window.location.href = 'index.html';
+    });
+}
 
-    return function (view, params) {
-        view.querySelector('.btnWizardNext').addEventListener('click', onFinish);
-    };
-});
+export default function (view, params) {
+    view.querySelector('.btnWizardNext').addEventListener('click', onFinish);
+}
diff --git a/src/controllers/wizard/remoteaccess.js b/src/controllers/wizard/remoteaccess.js
index 400cd357f4..3c482607de 100644
--- a/src/controllers/wizard/remoteaccess.js
+++ b/src/controllers/wizard/remoteaccess.js
@@ -1,39 +1,40 @@
-define(['loading', 'emby-checkbox', 'emby-button', 'emby-select'], function (loading) {
-    'use strict';
+import loading from 'loading';
+import 'emby-checkbox';
+import 'emby-button';
+import 'emby-select';
 
-    function save(page) {
-        loading.show();
-        var apiClient = ApiClient;
-        var config = {};
-        config.EnableRemoteAccess = page.querySelector('#chkRemoteAccess').checked;
-        config.EnableAutomaticPortMapping = page.querySelector('#chkEnableUpnp').checked;
-        apiClient.ajax({
-            type: 'POST',
-            data: config,
-            url: apiClient.getUrl('Startup/RemoteAccess')
-        }).then(function () {
-            loading.hide();
-            navigateToNextPage();
-        });
-    }
+function save(page) {
+    loading.show();
+    const apiClient = ApiClient;
+    const config = {};
+    config.EnableRemoteAccess = page.querySelector('#chkRemoteAccess').checked;
+    config.EnableAutomaticPortMapping = page.querySelector('#chkEnableUpnp').checked;
+    apiClient.ajax({
+        type: 'POST',
+        data: config,
+        url: apiClient.getUrl('Startup/RemoteAccess')
+    }).then(function () {
+        loading.hide();
+        navigateToNextPage();
+    });
+}
 
-    function navigateToNextPage() {
-        Dashboard.navigate('wizardfinish.html');
-    }
+function navigateToNextPage() {
+    Dashboard.navigate('wizardfinish.html');
+}
 
-    function onSubmit(e) {
-        save(this);
-        e.preventDefault();
-        return false;
-    }
+function onSubmit(e) {
+    save(this);
+    e.preventDefault();
+    return false;
+}
 
-    return function (view, params) {
-        view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit);
-        view.addEventListener('viewshow', function () {
-            document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
-        });
-        view.addEventListener('viewhide', function () {
-            document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
-        });
-    };
-});
+export default function (view, params) {
+    view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit);
+    view.addEventListener('viewshow', function () {
+        document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
+    });
+    view.addEventListener('viewhide', function () {
+        document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
+    });
+}
diff --git a/src/controllers/wizard/settings.js b/src/controllers/wizard/settings.js
index 2062e795a3..a1c3c11267 100644
--- a/src/controllers/wizard/settings.js
+++ b/src/controllers/wizard/settings.js
@@ -1,84 +1,85 @@
-define(['loading', 'emby-checkbox', 'emby-button', 'emby-select'], function (loading) {
-    'use strict';
+import loading from 'loading';
+import 'emby-checkbox';
+import 'emby-button';
+import 'emby-select';
 
-    function save(page) {
-        loading.show();
-        var apiClient = ApiClient;
-        apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) {
-            config.PreferredMetadataLanguage = page.querySelector('#selectLanguage').value;
-            config.MetadataCountryCode = page.querySelector('#selectCountry').value;
-            apiClient.ajax({
-                type: 'POST',
-                data: config,
-                url: apiClient.getUrl('Startup/Configuration')
-            }).then(function () {
-                loading.hide();
-                navigateToNextPage();
-            });
+function save(page) {
+    loading.show();
+    const apiClient = ApiClient;
+    apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) {
+        config.PreferredMetadataLanguage = page.querySelector('#selectLanguage').value;
+        config.MetadataCountryCode = page.querySelector('#selectCountry').value;
+        apiClient.ajax({
+            type: 'POST',
+            data: config,
+            url: apiClient.getUrl('Startup/Configuration')
+        }).then(function () {
+            loading.hide();
+            navigateToNextPage();
         });
+    });
+}
+
+function populateLanguages(select, languages) {
+    let html = '';
+    html += "<option value=''></option>";
+
+    for (let i = 0, length = languages.length; i < length; i++) {
+        const culture = languages[i];
+        html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
     }
 
-    function populateLanguages(select, languages) {
-        var html = '';
-        html += "<option value=''></option>";
+    select.innerHTML = html;
+}
 
-        for (var i = 0, length = languages.length; i < length; i++) {
-            var culture = languages[i];
-            html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
-        }
+function populateCountries(select, allCountries) {
+    let html = '';
+    html += "<option value=''></option>";
 
-        select.innerHTML = html;
+    for (let i = 0, length = allCountries.length; i < length; i++) {
+        const culture = allCountries[i];
+        html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>';
     }
 
-    function populateCountries(select, allCountries) {
-        var html = '';
-        html += "<option value=''></option>";
+    select.innerHTML = html;
+}
 
-        for (var i = 0, length = allCountries.length; i < length; i++) {
-            var culture = allCountries[i];
-            html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>';
-        }
+function reloadData(page, config, cultures, countries) {
+    populateLanguages(page.querySelector('#selectLanguage'), cultures);
+    populateCountries(page.querySelector('#selectCountry'), countries);
+    page.querySelector('#selectLanguage').value = config.PreferredMetadataLanguage;
+    page.querySelector('#selectCountry').value = config.MetadataCountryCode;
+    loading.hide();
+}
 
-        select.innerHTML = html;
-    }
+function reload(page) {
+    loading.show();
+    const apiClient = ApiClient;
+    const promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration'));
+    const promise2 = apiClient.getCultures();
+    const promise3 = apiClient.getCountries();
+    Promise.all([promise1, promise2, promise3]).then(function (responses) {
+        reloadData(page, responses[0], responses[1], responses[2]);
+    });
+}
 
-    function reloadData(page, config, cultures, countries) {
-        populateLanguages(page.querySelector('#selectLanguage'), cultures);
-        populateCountries(page.querySelector('#selectCountry'), countries);
-        page.querySelector('#selectLanguage').value = config.PreferredMetadataLanguage;
-        page.querySelector('#selectCountry').value = config.MetadataCountryCode;
-        loading.hide();
-    }
+function navigateToNextPage() {
+    Dashboard.navigate('wizardremoteaccess.html');
+}
 
-    function reload(page) {
-        loading.show();
-        var apiClient = ApiClient;
-        var promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration'));
-        var promise2 = apiClient.getCultures();
-        var promise3 = apiClient.getCountries();
-        Promise.all([promise1, promise2, promise3]).then(function (responses) {
-            reloadData(page, responses[0], responses[1], responses[2]);
-        });
-    }
+function onSubmit(e) {
+    save(this);
+    e.preventDefault();
+    return false;
+}
 
-    function navigateToNextPage() {
-        Dashboard.navigate('wizardremoteaccess.html');
-    }
-
-    function onSubmit(e) {
-        save(this);
-        e.preventDefault();
-        return false;
-    }
-
-    return function (view, params) {
-        view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit);
-        view.addEventListener('viewshow', function () {
-            document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
-            reload(this);
-        });
-        view.addEventListener('viewhide', function () {
-            document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
-        });
-    };
-});
+export default function (view, params) {
+    view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit);
+    view.addEventListener('viewshow', function () {
+        document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
+        reload(this);
+    });
+    view.addEventListener('viewhide', function () {
+        document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
+    });
+}
diff --git a/src/controllers/wizard/start.js b/src/controllers/wizard/start.js
index b7fb920d45..cec93446db 100644
--- a/src/controllers/wizard/start.js
+++ b/src/controllers/wizard/start.js
@@ -1,48 +1,49 @@
-define(['jQuery', 'loading', 'emby-button', 'emby-select'], function ($, loading) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import 'emby-button';
+import 'emby-select';
 
-    function loadPage(page, config, languageOptions) {
-        $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) {
-            return '<option value="' + l.Value + '">' + l.Name + '</option>';
-        })).val(config.UICulture);
-        loading.hide();
-    }
+function loadPage(page, config, languageOptions) {
+    $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) {
+        return '<option value="' + l.Value + '">' + l.Name + '</option>';
+    })).val(config.UICulture);
+    loading.hide();
+}
 
-    function save(page) {
+function save(page) {
+    loading.show();
+    const apiClient = ApiClient;
+    apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) {
+        config.UICulture = $('#selectLocalizationLanguage', page).val();
+        apiClient.ajax({
+            type: 'POST',
+            data: config,
+            url: apiClient.getUrl('Startup/Configuration')
+        }).then(function () {
+            Dashboard.navigate('wizarduser.html');
+        });
+    });
+}
+
+function onSubmit() {
+    save($(this).parents('.page'));
+    return false;
+}
+
+export default function (view, params) {
+    $('.wizardStartForm', view).on('submit', onSubmit);
+    view.addEventListener('viewshow', function () {
+        document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
         loading.show();
-        var apiClient = ApiClient;
-        apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) {
-            config.UICulture = $('#selectLocalizationLanguage', page).val();
-            apiClient.ajax({
-                type: 'POST',
-                data: config,
-                url: apiClient.getUrl('Startup/Configuration')
-            }).then(function () {
-                Dashboard.navigate('wizarduser.html');
-            });
+        const page = this;
+        const apiClient = ApiClient;
+        const promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration'));
+        const promise2 = apiClient.getJSON(apiClient.getUrl('Localization/Options'));
+        Promise.all([promise1, promise2]).then(function (responses) {
+            loadPage(page, responses[0], responses[1]);
         });
-    }
-
-    function onSubmit() {
-        save($(this).parents('.page'));
-        return false;
-    }
-
-    return function (view, params) {
-        $('.wizardStartForm', view).on('submit', onSubmit);
-        view.addEventListener('viewshow', function () {
-            document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
-            loading.show();
-            var page = this;
-            var apiClient = ApiClient;
-            var promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration'));
-            var promise2 = apiClient.getJSON(apiClient.getUrl('Localization/Options'));
-            Promise.all([promise1, promise2]).then(function (responses) {
-                loadPage(page, responses[0], responses[1]);
-            });
-        });
-        view.addEventListener('viewhide', function () {
-            document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
-        });
-    };
-});
+    });
+    view.addEventListener('viewhide', function () {
+        document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
+    });
+}
diff --git a/src/controllers/wizard/user.js b/src/controllers/wizard/user.js
index e62edef9fe..e3e78d2760 100644
--- a/src/controllers/wizard/user.js
+++ b/src/controllers/wizard/user.js
@@ -1,67 +1,69 @@
-define(['loading', 'globalize', 'dashboardcss', 'emby-input', 'emby-button', 'emby-button'], function (loading, globalize) {
-    'use strict';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'dashboardcss';
+import 'emby-input';
+import 'emby-button';
 
-    function getApiClient() {
-        return ApiClient;
+function getApiClient() {
+    return ApiClient;
+}
+
+function nextWizardPage() {
+    Dashboard.navigate('wizardlibrary.html');
+}
+
+function onUpdateUserComplete(result) {
+    console.debug('user update complete: ' + result);
+    loading.hide();
+    nextWizardPage();
+}
+
+function submit(form) {
+    loading.show();
+    const apiClient = getApiClient();
+    apiClient.ajax({
+        type: 'POST',
+        data: {
+            Name: form.querySelector('#txtUsername').value,
+            Password: form.querySelector('#txtManualPassword').value
+        },
+        url: apiClient.getUrl('Startup/User')
+    }).then(onUpdateUserComplete);
+}
+
+function onSubmit(e) {
+    const form = this;
+
+    if (form.querySelector('#txtManualPassword').value != form.querySelector('#txtPasswordConfirm').value) {
+        require(['toast'], function (toast) {
+            toast(globalize.translate('PasswordMatchError'));
+        });
+    } else {
+        submit(form);
     }
 
-    function nextWizardPage() {
-        Dashboard.navigate('wizardlibrary.html');
-    }
+    e.preventDefault();
+    return false;
+}
 
-    function onUpdateUserComplete(result) {
-        console.debug('user update complete: ' + result);
+function onViewShow() {
+    loading.show();
+    const page = this;
+    const apiClient = getApiClient();
+    apiClient.getJSON(apiClient.getUrl('Startup/User')).then(function (user) {
+        page.querySelector('#txtUsername').value = user.Name || '';
+        page.querySelector('#txtManualPassword').value = user.Password || '';
         loading.hide();
-        nextWizardPage();
-    }
+    });
+}
 
-    function submit(form) {
-        loading.show();
-        var apiClient = getApiClient();
-        apiClient.ajax({
-            type: 'POST',
-            data: {
-                Name: form.querySelector('#txtUsername').value,
-                Password: form.querySelector('#txtManualPassword').value
-            },
-            url: apiClient.getUrl('Startup/User')
-        }).then(onUpdateUserComplete);
-    }
-
-    function onSubmit(e) {
-        var form = this;
-
-        if (form.querySelector('#txtManualPassword').value != form.querySelector('#txtPasswordConfirm').value) {
-            require(['toast'], function (toast) {
-                toast(globalize.translate('PasswordMatchError'));
-            });
-        } else {
-            submit(form);
-        }
-
-        e.preventDefault();
-        return false;
-    }
-
-    function onViewShow() {
-        loading.show();
-        var page = this;
-        var apiClient = getApiClient();
-        apiClient.getJSON(apiClient.getUrl('Startup/User')).then(function (user) {
-            page.querySelector('#txtUsername').value = user.Name || '';
-            page.querySelector('#txtManualPassword').value = user.Password || '';
-            loading.hide();
-        });
-    }
-
-    return function (view, params) {
-        view.querySelector('.wizardUserForm').addEventListener('submit', onSubmit);
-        view.addEventListener('viewshow', function () {
-            document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
-        });
-        view.addEventListener('viewhide', function () {
-            document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
-        });
-        view.addEventListener('viewshow', onViewShow);
-    };
-});
+export default function (view, params) {
+    view.querySelector('.wizardUserForm').addEventListener('submit', onSubmit);
+    view.addEventListener('viewshow', function () {
+        document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
+    });
+    view.addEventListener('viewhide', function () {
+        document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
+    });
+    view.addEventListener('viewshow', onViewShow);
+}

From 47ce90a22fb07d5f352e201c6fc508b80c39ae4a Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Fri, 17 Jul 2020 19:10:07 +0100
Subject: [PATCH 07/12] remove require

---
 src/controllers/wizard/user.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/controllers/wizard/user.js b/src/controllers/wizard/user.js
index e3e78d2760..855086a3a4 100644
--- a/src/controllers/wizard/user.js
+++ b/src/controllers/wizard/user.js
@@ -35,7 +35,7 @@ function onSubmit(e) {
     const form = this;
 
     if (form.querySelector('#txtManualPassword').value != form.querySelector('#txtPasswordConfirm').value) {
-        require(['toast'], function (toast) {
+        import('toast').then(({default: toast}) => {
             toast(globalize.translate('PasswordMatchError'));
         });
     } else {

From 76a037b7c2fda2a7ce433c1deb94464f83a13643 Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Sat, 18 Jul 2020 09:21:15 +0100
Subject: [PATCH 08/12] Migration of Globalize to ES6 module

---
 package.json                                  |   1 +
 .../accessSchedule/accessSchedule.js          |   2 +-
 src/components/appRouter.js                   |   2 +-
 .../displaySettings/displaySettings.js        |   2 +-
 src/components/filterdialog/filterdialog.js   |   2 +-
 src/components/filtermenu/filtermenu.js       |   2 +-
 src/components/guide/guide-settings.js        |   2 +-
 src/components/guide/guide.js                 |   2 +-
 .../homeScreenSettings/homeScreenSettings.js  |   2 +-
 .../imageDownloader/imageDownloader.js        |   2 +-
 .../imageOptionsEditor/imageOptionsEditor.js  |   2 +-
 src/components/imageUploader/imageUploader.js |   2 +-
 src/components/imageeditor/imageeditor.js     |   2 +-
 src/components/itemMediaInfo/itemMediaInfo.js |   2 +-
 .../itemidentifier/itemidentifier.js          |   4 +-
 .../libraryoptionseditor.js                   |   2 +-
 .../mediaLibraryCreator.js                    |   2 +-
 .../mediaLibraryEditor/mediaLibraryEditor.js  |   2 +-
 .../metadataEditor/metadataEditor.js          |   4 +-
 src/components/metadataEditor/personEditor.js |   2 +-
 .../playbackSettings/playbackSettings.js      |   2 +-
 .../recordingcreator/recordingcreator.js      |   2 +-
 .../recordingcreator/recordingeditor.js       |   2 +-
 .../recordingcreator/recordingfields.js       |   2 +-
 .../recordingcreator/seriesrecordingeditor.js |   4 +-
 src/components/search/searchfields.js         |   2 +-
 src/components/search/searchresults.js        |   2 +-
 src/components/sortmenu/sortmenu.js           |   2 +-
 .../subtitleeditor/subtitleeditor.js          |   2 +-
 .../subtitlesettings/subtitlesettings.js      |   2 +-
 src/components/viewSettings/viewSettings.js   |   2 +-
 src/controllers/livetvguideprovider.js        |   2 +-
 src/scripts/globalize.js                      | 106 +++++++++---------
 src/scripts/site.js                           |   6 +-
 34 files changed, 92 insertions(+), 89 deletions(-)

diff --git a/package.json b/package.json
index b911778bc2..cfb43eef24 100644
--- a/package.json
+++ b/package.json
@@ -164,6 +164,7 @@
           "src/plugins/backdropScreensaver/plugin.js",
           "src/components/filterdialog/filterdialog.js",
           "src/components/fetchhelper.js",
+          "src/scripts/globalize.js",
           "src/scripts/keyboardNavigation.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",
diff --git a/src/components/accessSchedule/accessSchedule.js b/src/components/accessSchedule/accessSchedule.js
index 166460a025..2a46a8acde 100644
--- a/src/components/accessSchedule/accessSchedule.js
+++ b/src/components/accessSchedule/accessSchedule.js
@@ -67,7 +67,7 @@ import 'formDialogStyle';
                 });
                 dlg.classList.add('formDialog');
                 let html = '';
-                html += globalize.translateDocument(template);
+                html += globalize.translateHtml(template);
                 dlg.innerHTML = html;
                 populateHours(dlg);
                 loadSchedule(dlg, options.schedule);
diff --git a/src/components/appRouter.js b/src/components/appRouter.js
index 1791aef7e2..26f3e3c403 100644
--- a/src/components/appRouter.js
+++ b/src/components/appRouter.js
@@ -465,7 +465,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
 
     function loadContent(ctx, route, html, request) {
 
-        html = globalize.translateDocument(html, route.dictionary);
+        html = globalize.translateHtml(html, route.dictionary);
         request.view = html;
 
         viewManager.loadView(request);
diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js
index c4eb35f49f..581f7960cc 100644
--- a/src/components/displaySettings/displaySettings.js
+++ b/src/components/displaySettings/displaySettings.js
@@ -274,7 +274,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
 
     function embed(options, self) {
         require(['text!./displaySettings.template.html'], function (template) {
-            options.element.innerHTML = globalize.translateDocument(template, 'core');
+            options.element.innerHTML = globalize.translateHtml(template, 'core');
             options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
             if (options.enableSaveButton) {
                 options.element.querySelector('.btnSave').classList.remove('hide');
diff --git a/src/components/filterdialog/filterdialog.js b/src/components/filterdialog/filterdialog.js
index 041fa82e76..df17c19dec 100644
--- a/src/components/filterdialog/filterdialog.js
+++ b/src/components/filterdialog/filterdialog.js
@@ -412,7 +412,7 @@ import 'css!./style.css';
                     dlg.classList.add('background-theme-a');
                     dlg.classList.add('formDialog');
                     dlg.classList.add('filterDialog');
-                    dlg.innerHTML = globalize.translateDocument(template);
+                    dlg.innerHTML = globalize.translateHtml(template);
                     setVisibility(dlg, this.options);
                     dialogHelper.open(dlg);
                     dlg.addEventListener('close', resolve);
diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
index c189856e7b..936e2b0407 100644
--- a/src/components/filtermenu/filtermenu.js
+++ b/src/components/filtermenu/filtermenu.js
@@ -286,7 +286,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
 
                 html += template;
 
-                dlg.innerHTML = globalize.translateDocument(html, 'core');
+                dlg.innerHTML = globalize.translateHtml(html, 'core');
 
                 var settingElements = dlg.querySelectorAll('.viewSetting');
                 for (var i = 0, length = settingElements.length; i < length; i++) {
diff --git a/src/components/guide/guide-settings.js b/src/components/guide/guide-settings.js
index 7409a7e943..77a3637251 100644
--- a/src/components/guide/guide-settings.js
+++ b/src/components/guide/guide-settings.js
@@ -114,7 +114,7 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
 
                 var html = '';
 
-                html += globalize.translateDocument(template, 'core');
+                html += globalize.translateHtml(template, 'core');
 
                 dlg.innerHTML = html;
 
diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js
index 223d3a2063..4ae2041223 100644
--- a/src/components/guide/guide.js
+++ b/src/components/guide/guide.js
@@ -1151,7 +1151,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
             context.classList.add('tvguide');
 
-            context.innerHTML = globalize.translateDocument(template, 'core');
+            context.innerHTML = globalize.translateHtml(template, 'core');
 
             programGrid = context.querySelector('.programGrid');
             var timeslotHeaders = context.querySelector('.timeslotHeaders');
diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js
index 9eae944d26..d62bec4475 100644
--- a/src/components/homeScreenSettings/homeScreenSettings.js
+++ b/src/components/homeScreenSettings/homeScreenSettings.js
@@ -472,7 +472,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 template = template.replace('{section' + i + 'label}', globalize.translate('LabelHomeScreenSectionValue', i));
             }
 
-            options.element.innerHTML = globalize.translateDocument(template, 'core');
+            options.element.innerHTML = globalize.translateHtml(template, 'core');
 
             options.element.querySelector('.viewOrderList').addEventListener('click', onSectionOrderListClick);
             options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js
index a3965279cf..fbe98c532f 100644
--- a/src/components/imageDownloader/imageDownloader.js
+++ b/src/components/imageDownloader/imageDownloader.js
@@ -339,7 +339,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
 
             var dlg = dialogHelper.createDialog(dialogOptions);
 
-            dlg.innerHTML = globalize.translateDocument(template, 'core');
+            dlg.innerHTML = globalize.translateHtml(template, 'core');
 
             if (layoutManager.tv) {
                 scrollHelper.centerFocus.on(dlg, false);
diff --git a/src/components/imageOptionsEditor/imageOptionsEditor.js b/src/components/imageOptionsEditor/imageOptionsEditor.js
index 257921dfa2..22dcf57dc2 100644
--- a/src/components/imageOptionsEditor/imageOptionsEditor.js
+++ b/src/components/imageOptionsEditor/imageOptionsEditor.js
@@ -92,7 +92,7 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb
                         scrollY: false
                     });
                     dlg.classList.add('formDialog');
-                    dlg.innerHTML = globalize.translateDocument(template);
+                    dlg.innerHTML = globalize.translateHtml(template);
                     dlg.addEventListener('close', function () {
                         saveValues(dlg, options);
                     });
diff --git a/src/components/imageUploader/imageUploader.js b/src/components/imageUploader/imageUploader.js
index 3783b8faff..3cf7aa000d 100644
--- a/src/components/imageUploader/imageUploader.js
+++ b/src/components/imageUploader/imageUploader.js
@@ -161,7 +161,7 @@ import 'css!./style';
 
             dlg.classList.add('formDialog');
 
-            dlg.innerHTML = globalize.translateDocument(template, 'core');
+            dlg.innerHTML = globalize.translateHtml(template, 'core');
 
             if (layoutManager.tv) {
                 scrollHelper.centerFocus.on(dlg, false);
diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js
index 2927a0b120..af85d5e3eb 100644
--- a/src/components/imageeditor/imageeditor.js
+++ b/src/components/imageeditor/imageeditor.js
@@ -464,7 +464,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
 
                 dlg.classList.add('formDialog');
 
-                dlg.innerHTML = globalize.translateDocument(template, 'core');
+                dlg.innerHTML = globalize.translateHtml(template, 'core');
 
                 if (layoutManager.tv) {
                     scrollHelper.centerFocus.on(dlg, false);
diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js
index 9c2c8c9664..c3fd9e0d0a 100644
--- a/src/components/itemMediaInfo/itemMediaInfo.js
+++ b/src/components/itemMediaInfo/itemMediaInfo.js
@@ -150,7 +150,7 @@ import 'flexStyles';
             const dlg = dialogHelper.createDialog(dialogOptions);
             dlg.classList.add('formDialog');
             let html = '';
-            html += globalize.translateDocument(template, 'core');
+            html += globalize.translateHtml(template, 'core');
             dlg.innerHTML = html;
             if (layoutManager.tv) {
                 dlg.querySelector('.formDialogContent');
diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js
index 6f638dc271..11e164dede 100644
--- a/src/components/itemidentifier/itemidentifier.js
+++ b/src/components/itemidentifier/itemidentifier.js
@@ -382,7 +382,7 @@ import 'cardStyle';
                 dlg.classList.add('recordingDialog');
 
                 let html = '';
-                html += globalize.translateDocument(template, 'core');
+                html += globalize.translateHtml(template, 'core');
 
                 dlg.innerHTML = html;
 
@@ -464,7 +464,7 @@ import 'cardStyle';
             dlg.classList.add('recordingDialog');
 
             let html = '';
-            html += globalize.translateDocument(template, 'core');
+            html += globalize.translateHtml(template, 'core');
 
             dlg.innerHTML = html;
 
diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js
index 832a6ffc5e..6aea530d15 100644
--- a/src/components/libraryoptionseditor/libraryoptionseditor.js
+++ b/src/components/libraryoptionseditor/libraryoptionseditor.js
@@ -359,7 +359,7 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
             xhr.open('GET', 'components/libraryoptionseditor/libraryoptionseditor.template.html', true);
             xhr.onload = function(e) {
                 var template = this.response;
-                parent.innerHTML = globalize.translateDocument(template);
+                parent.innerHTML = globalize.translateHtml(template);
                 populateRefreshInterval(parent.querySelector('#selectAutoRefreshInterval'));
                 var promises = [populateLanguages(parent), populateCountries(parent.querySelector('#selectCountry'))];
                 Promise.all(promises).then(function() {
diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js
index c1b7453ca9..4e0d7b026c 100644
--- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js
+++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js
@@ -211,7 +211,7 @@ export class showEditor {
                 dlg.classList.add('background-theme-a');
                 dlg.classList.add('dlg-librarycreator');
                 dlg.classList.add('formDialog');
-                dlg.innerHTML = globalize.translateDocument(template);
+                dlg.innerHTML = globalize.translateHtml(template);
                 initEditor(dlg, options.collectionTypeOptions);
                 dlg.addEventListener('close', onDialogClosed);
                 dialogHelper.open(dlg);
diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
index 4577b67131..1cee6984d9 100644
--- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js
+++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
@@ -226,7 +226,7 @@ export class showEditor {
             dlg.classList.add('ui-body-a');
             dlg.classList.add('background-theme-a');
             dlg.classList.add('formDialog');
-            dlg.innerHTML = globalize.translateDocument(template);
+            dlg.innerHTML = globalize.translateHtml(template);
             dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name;
             initEditor(dlg, options);
             dlg.addEventListener('close', onDialogClosed);
diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js
index 61a4ba7f24..74152c1a4c 100644
--- a/src/components/metadataEditor/metadataEditor.js
+++ b/src/components/metadataEditor/metadataEditor.js
@@ -1045,7 +1045,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
             var html = '';
 
-            html += globalize.translateDocument(template, 'core');
+            html += globalize.translateHtml(template, 'core');
 
             dlg.innerHTML = html;
 
@@ -1085,7 +1085,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
                 require(['text!./metadataEditor.template.html'], function (template) {
 
-                    elem.innerHTML = globalize.translateDocument(template, 'core');
+                    elem.innerHTML = globalize.translateHtml(template, 'core');
 
                     elem.querySelector('.formDialogFooter').classList.remove('formDialogFooter');
                     elem.querySelector('.btnHeaderSave').classList.remove('hide');
diff --git a/src/components/metadataEditor/personEditor.js b/src/components/metadataEditor/personEditor.js
index fc6a0595f2..afbf33f680 100644
--- a/src/components/metadataEditor/personEditor.js
+++ b/src/components/metadataEditor/personEditor.js
@@ -31,7 +31,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
                 var html = '';
                 var submitted = false;
 
-                html += globalize.translateDocument(template, 'core');
+                html += globalize.translateHtml(template, 'core');
 
                 dlg.innerHTML = html;
 
diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js
index 06d2e38d2c..c367c2fc8e 100644
--- a/src/components/playbackSettings/playbackSettings.js
+++ b/src/components/playbackSettings/playbackSettings.js
@@ -291,7 +291,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
 
         require(['text!./playbackSettings.template.html'], function (template) {
 
-            options.element.innerHTML = globalize.translateDocument(template, 'core');
+            options.element.innerHTML = globalize.translateHtml(template, 'core');
 
             options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
 
diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js
index ae26d0debc..d18d5fcb6c 100644
--- a/src/components/recordingcreator/recordingcreator.js
+++ b/src/components/recordingcreator/recordingcreator.js
@@ -156,7 +156,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
                 var html = '';
 
-                html += globalize.translateDocument(template, 'core');
+                html += globalize.translateHtml(template, 'core');
 
                 dlg.innerHTML = html;
 
diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js
index 86c731ad26..c3f40fcddb 100644
--- a/src/components/recordingcreator/recordingeditor.js
+++ b/src/components/recordingcreator/recordingeditor.js
@@ -116,7 +116,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
                 var html = '';
 
-                html += globalize.translateDocument(template, 'core');
+                html += globalize.translateHtml(template, 'core');
 
                 dlg.innerHTML = html;
 
diff --git a/src/components/recordingcreator/recordingfields.js b/src/components/recordingcreator/recordingfields.js
index b4cbdfab0a..84348fcfbc 100644
--- a/src/components/recordingcreator/recordingfields.js
+++ b/src/components/recordingcreator/recordingfields.js
@@ -219,7 +219,7 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
             require(['text!./recordingfields.template.html'], function (template) {
                 var options = self.options;
                 var context = options.parent;
-                context.innerHTML = globalize.translateDocument(template, 'core');
+                context.innerHTML = globalize.translateHtml(template, 'core');
 
                 context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self));
                 context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self));
diff --git a/src/components/recordingcreator/seriesrecordingeditor.js b/src/components/recordingcreator/seriesrecordingeditor.js
index 62accd5b63..a101ce53ec 100644
--- a/src/components/recordingcreator/seriesrecordingeditor.js
+++ b/src/components/recordingcreator/seriesrecordingeditor.js
@@ -168,7 +168,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
             var dlg = options.context;
 
             dlg.classList.add('hide');
-            dlg.innerHTML = globalize.translateDocument(template, 'core');
+            dlg.innerHTML = globalize.translateHtml(template, 'core');
 
             dlg.querySelector('.formDialogHeader').classList.add('hide');
             dlg.querySelector('.formDialogFooter').classList.add('hide');
@@ -221,7 +221,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
                 var html = '';
 
-                html += globalize.translateDocument(template, 'core');
+                html += globalize.translateHtml(template, 'core');
 
                 dlg.innerHTML = html;
 
diff --git a/src/components/search/searchfields.js b/src/components/search/searchfields.js
index 7e77814772..af58291ff3 100644
--- a/src/components/search/searchfields.js
+++ b/src/components/search/searchfields.js
@@ -62,7 +62,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
 
         require(['text!./searchfields.template.html'], function (template) {
 
-            var html = globalize.translateDocument(template, 'core');
+            var html = globalize.translateHtml(template, 'core');
 
             if (browser.tizen || browser.orsay) {
                 html = html.replace('<input ', '<input readonly ');
diff --git a/src/components/search/searchresults.js b/src/components/search/searchresults.js
index d4de2349a4..d7e03f203b 100644
--- a/src/components/search/searchresults.js
+++ b/src/components/search/searchresults.js
@@ -601,7 +601,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
                 template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap');
             }
 
-            var html = globalize.translateDocument(template, 'core');
+            var html = globalize.translateHtml(template, 'core');
 
             elem.innerHTML = html;
 
diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js
index 9950afb89a..dbf7ef1a7f 100644
--- a/src/components/sortmenu/sortmenu.js
+++ b/src/components/sortmenu/sortmenu.js
@@ -73,7 +73,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
 
                 html += template;
 
-                dlg.innerHTML = globalize.translateDocument(html, 'core');
+                dlg.innerHTML = globalize.translateHtml(html, 'core');
 
                 fillSortBy(dlg, options.sortOptions);
                 initEditor(dlg, options.settings);
diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js
index e9bcc0bfca..523c657c4c 100644
--- a/src/components/subtitleeditor/subtitleeditor.js
+++ b/src/components/subtitleeditor/subtitleeditor.js
@@ -448,7 +448,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
             dlg.classList.add('formDialog');
             dlg.classList.add('subtitleEditorDialog');
 
-            dlg.innerHTML = globalize.translateDocument(template, 'core');
+            dlg.innerHTML = globalize.translateHtml(template, 'core');
 
             dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
 
diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js
index 73dddb9a2c..bd612d4958 100644
--- a/src/components/subtitlesettings/subtitlesettings.js
+++ b/src/components/subtitlesettings/subtitlesettings.js
@@ -133,7 +133,7 @@ function embed(options, self) {
     require(['text!./subtitlesettings.template.html'], function (template) {
 
         options.element.classList.add('subtitlesettings');
-        options.element.innerHTML = globalize.translateDocument(template, 'core');
+        options.element.innerHTML = globalize.translateHtml(template, 'core');
 
         options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self));
 
diff --git a/src/components/viewSettings/viewSettings.js b/src/components/viewSettings/viewSettings.js
index 087ba3e373..28a9854c34 100644
--- a/src/components/viewSettings/viewSettings.js
+++ b/src/components/viewSettings/viewSettings.js
@@ -84,7 +84,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
 
                 html += template;
 
-                dlg.innerHTML = globalize.translateDocument(html, 'core');
+                dlg.innerHTML = globalize.translateHtml(html, 'core');
 
                 var settingElements = dlg.querySelectorAll('.viewSetting');
                 for (var i = 0, length = settingElements.length; i < length; i++) {
diff --git a/src/controllers/livetvguideprovider.js b/src/controllers/livetvguideprovider.js
index e83036992b..8f8b9f91c7 100644
--- a/src/controllers/livetvguideprovider.js
+++ b/src/controllers/livetvguideprovider.js
@@ -17,7 +17,7 @@ define(['events', 'loading', 'globalize'], function (events, loading, globalize)
 
     function loadTemplate(page, type, providerId) {
         require(['text!./components/tvproviders/' + type + '.template.html'], function (html) {
-            page.querySelector('.providerTemplate').innerHTML = globalize.translateDocument(html);
+            page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html);
             init(page, type, providerId);
         });
     }
diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js
index 2d7d725b5d..4af1ea6cbf 100644
--- a/src/scripts/globalize.js
+++ b/src/scripts/globalize.js
@@ -1,21 +1,24 @@
-define(['userSettings', 'events'], function (userSettings, events) {
-    'use strict';
-    var fallbackCulture = 'en-us';
+import * as userSettings from 'userSettings';
+import events from 'events';
 
-    var allTranslations = {};
-    var currentCulture;
-    var currentDateTimeCulture;
+/* eslint-disable indent */
 
-    function getCurrentLocale() {
+    const fallbackCulture = 'en-us';
+
+    const allTranslations = {};
+    let currentCulture;
+    let currentDateTimeCulture;
+
+    export function getCurrentLocale() {
         return currentCulture;
     }
 
-    function getCurrentDateTimeLocale() {
+    export function getCurrentDateTimeLocale() {
         return currentDateTimeCulture;
     }
 
     function getDefaultLanguage() {
-        var culture = document.documentElement.getAttribute('data-culture');
+        const culture = document.documentElement.getAttribute('data-culture');
         if (culture) {
             return culture;
         }
@@ -33,8 +36,8 @@ define(['userSettings', 'events'], function (userSettings, events) {
         return fallbackCulture;
     }
 
-    function updateCurrentCulture() {
-        var culture;
+    export function updateCurrentCulture() {
+        let culture;
         try {
             culture = userSettings.language();
         } catch (err) {
@@ -44,7 +47,7 @@ define(['userSettings', 'events'], function (userSettings, events) {
 
         currentCulture = normalizeLocaleName(culture);
 
-        var dateTimeCulture;
+        let dateTimeCulture;
         try {
             dateTimeCulture = userSettings.dateTimeLocale();
         } catch (err) {
@@ -60,11 +63,11 @@ define(['userSettings', 'events'], function (userSettings, events) {
     }
 
     function ensureTranslations(culture) {
-        for (var i in allTranslations) {
+        for (let i in allTranslations) {
             ensureTranslation(allTranslations[i], culture);
         }
         if (culture !== fallbackCulture) {
-            for (var i in allTranslations) {
+            for (let i in allTranslations) {
                 ensureTranslation(allTranslations[i], fallbackCulture);
             }
         }
@@ -85,14 +88,14 @@ define(['userSettings', 'events'], function (userSettings, events) {
         culture = culture.replace('_', '-');
 
         // convert de-DE to de
-        var parts = culture.split('-');
+        const parts = culture.split('-');
         if (parts.length === 2) {
             if (parts[0].toLowerCase() === parts[1].toLowerCase()) {
                 culture = parts[0].toLowerCase();
             }
         }
 
-        var lower = culture.toLowerCase();
+        const lower = culture.toLowerCase();
         if (lower === 'ca-es') {
             return 'ca';
         }
@@ -110,7 +113,7 @@ define(['userSettings', 'events'], function (userSettings, events) {
             module = defaultModule();
         }
 
-        var translations = allTranslations[module];
+        const translations = allTranslations[module];
         if (!translations) {
             return {};
         }
@@ -118,17 +121,17 @@ define(['userSettings', 'events'], function (userSettings, events) {
         return translations.dictionaries[locale];
     }
 
-    function register(options) {
+    export function register(options) {
         allTranslations[options.name] = {
             translations: options.strings || options.translations,
             dictionaries: {}
         };
     }
 
-    function loadStrings(options) {
-        var locale = getCurrentLocale();
-        var promises = [];
-        var optionsName;
+    export function loadStrings(options) {
+        const locale = getCurrentLocale();
+        const promises = [];
+        let optionsName;
         if (typeof options === 'string') {
             optionsName = options;
         } else {
@@ -140,10 +143,10 @@ define(['userSettings', 'events'], function (userSettings, events) {
         return Promise.all(promises);
     }
 
-    var cacheParam = new Date().getTime();
+    const cacheParam = new Date().getTime();
     function loadTranslation(translations, lang) {
         lang = normalizeLocaleName(lang);
-        var filtered = translations.filter(function (t) {
+        let filtered = translations.filter(function (t) {
             return normalizeLocaleName(t.lang) === lang;
         });
 
@@ -159,12 +162,12 @@ define(['userSettings', 'events'], function (userSettings, events) {
                 return;
             }
 
-            var url = filtered[0].path;
+            let url = filtered[0].path;
 
             url += url.indexOf('?') === -1 ? '?' : '&';
             url += 'v=' + cacheParam;
 
-            var xhr = new XMLHttpRequest();
+            const xhr = new XMLHttpRequest();
             xhr.open('GET', url, true);
 
             xhr.onload = function (e) {
@@ -183,8 +186,8 @@ define(['userSettings', 'events'], function (userSettings, events) {
     }
 
     function translateKey(key) {
-        var parts = key.split('#');
-        var module;
+        const parts = key.split('#');
+        let module;
 
         if (parts.length > 1) {
             module = parts[0];
@@ -195,7 +198,7 @@ define(['userSettings', 'events'], function (userSettings, events) {
     }
 
     function translateKeyFromModule(key, module) {
-        var dictionary = getDictionary(module, getCurrentLocale());
+        let dictionary = getDictionary(module, getCurrentLocale());
         if (!dictionary || !dictionary[key]) {
             dictionary = getDictionary(module, fallbackCulture);
         }
@@ -209,15 +212,15 @@ define(['userSettings', 'events'], function (userSettings, events) {
         return str.split(find).join(replace);
     }
 
-    function translate(key) {
-        var val = translateKey(key);
-        for (var i = 1; i < arguments.length; i++) {
+    export function translate(key) {
+        let val = translateKey(key);
+        for (let i = 1; i < arguments.length; i++) {
             val = replaceAll(val, '{' + (i - 1) + '}', arguments[i]);
         }
         return val;
     }
 
-    function translateHtml(html, module) {
+    export function translateHtml(html, module) {
         if (!module) {
             module = defaultModule();
         }
@@ -225,26 +228,26 @@ define(['userSettings', 'events'], function (userSettings, events) {
             throw new Error('module cannot be null or empty');
         }
 
-        var startIndex = html.indexOf('${');
+        let startIndex = html.indexOf('${');
         if (startIndex === -1) {
             return html;
         }
 
         startIndex += 2;
-        var endIndex = html.indexOf('}', startIndex);
+        const endIndex = html.indexOf('}', startIndex);
         if (endIndex === -1) {
             return html;
         }
 
-        var key = html.substring(startIndex, endIndex);
-        var val = translateKeyFromModule(key, module);
+        const key = html.substring(startIndex, endIndex);
+        const val = translateKeyFromModule(key, module);
 
         html = html.replace('${' + key + '}', val);
         return translateHtml(html, module);
     }
 
-    var _defaultModule;
-    function defaultModule(val) {
+    let _defaultModule;
+    export function defaultModule(val) {
         if (val) {
             _defaultModule = val;
         }
@@ -259,16 +262,15 @@ define(['userSettings', 'events'], function (userSettings, events) {
         }
     });
 
-    return {
-        getString: translate,
-        translate: translate,
-        translateDocument: translateHtml,
-        translateHtml: translateHtml,
-        loadStrings: loadStrings,
-        defaultModule: defaultModule,
-        getCurrentLocale: getCurrentLocale,
-        getCurrentDateTimeLocale: getCurrentDateTimeLocale,
-        register: register,
-        updateCurrentCulture: updateCurrentCulture
-    };
-});
+export default {
+    translate,
+    translateHtml,
+    loadStrings,
+    defaultModule,
+    getCurrentLocale,
+    getCurrentDateTimeLocale,
+    register,
+    updateCurrentCulture
+};
+
+/* eslint-enable indent */
diff --git a/src/scripts/site.js b/src/scripts/site.js
index c3f93d9545..c805c40fdc 100644
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@@ -422,7 +422,7 @@ var AppInfo = {};
                 require(['globalize', 'browser'], function (globalize, browser) {
                     window.Globalize = globalize;
                     loadCoreDictionary(globalize).then(function () {
-                        onGlobalizeInit(browser);
+                        onGlobalizeInit(browser, globalize);
                     });
                 });
                 require(['keyboardnavigation'], function(keyboardnavigation) {
@@ -455,14 +455,14 @@ var AppInfo = {};
         });
     }
 
-    function onGlobalizeInit(browser) {
+    function onGlobalizeInit(browser, globalize) {
         if ('android' === self.appMode) {
             if (-1 !== self.location.href.toString().toLowerCase().indexOf('start=backgroundsync')) {
                 return onAppReady(browser);
             }
         }
 
-        document.title = Globalize.translateDocument(document.title, 'core');
+        document.title = globalize.translateHtml(document.title, 'core');
 
         if (browser.tv && !browser.android) {
             console.debug('using system fonts with explicit sizes');

From fc96cbd9ad76c56b8e543e6cd58c2fbe21889c86 Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Sat, 18 Jul 2020 09:23:00 +0100
Subject: [PATCH 09/12] Migration of editorsidebar to ES6 module

---
 package.json                 |  1 +
 src/scripts/editorsidebar.js | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index cfb43eef24..af9bfaaf57 100644
--- a/package.json
+++ b/package.json
@@ -164,6 +164,7 @@
           "src/plugins/backdropScreensaver/plugin.js",
           "src/components/filterdialog/filterdialog.js",
           "src/components/fetchhelper.js",
+          "src/scripts/editorsidebar.js",
           "src/scripts/globalize.js",
           "src/scripts/keyboardNavigation.js",
           "src/scripts/settings/appSettings.js",
diff --git a/src/scripts/editorsidebar.js b/src/scripts/editorsidebar.js
index 8168389566..ddda248c87 100644
--- a/src/scripts/editorsidebar.js
+++ b/src/scripts/editorsidebar.js
@@ -1,5 +1,9 @@
-define(['datetime', 'jQuery', 'globalize', 'material-icons'], function (datetime, $, globalize) {
-    'use strict';
+import datetime from 'datetime';
+import $ from 'jQuery';
+import globalize from 'globalize';
+import 'material-icons';
+
+/* eslint-disable indent */
 
     function getNode(item, folderState, selected) {
         var htmlName = getNodeInnerHtml(item);
@@ -331,4 +335,5 @@ define(['datetime', 'jQuery', 'globalize', 'material-icons'], function (datetime
         getCurrentItemId: getCurrentItemId,
         setCurrentItemId: setCurrentItemId
     };
-});
+
+/* eslint-enable indent */

From 28bf9c3e6fa796464cf6f6c1bb6d66b9c8497053 Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Sat, 18 Jul 2020 09:28:07 +0100
Subject: [PATCH 10/12] Migration of playlists to ES6 module

---
 package.json                 |   1 +
 src/scripts/editorsidebar.js |   4 +-
 src/scripts/playlists.js     | 353 ++++++++++++++++++-----------------
 3 files changed, 183 insertions(+), 175 deletions(-)

diff --git a/package.json b/package.json
index af9bfaaf57..50217331cf 100644
--- a/package.json
+++ b/package.json
@@ -166,6 +166,7 @@
           "src/components/fetchhelper.js",
           "src/scripts/editorsidebar.js",
           "src/scripts/globalize.js",
+          "src/scripts/playlists.js",
           "src/scripts/keyboardNavigation.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",
diff --git a/src/scripts/editorsidebar.js b/src/scripts/editorsidebar.js
index ddda248c87..5d0e237a0d 100644
--- a/src/scripts/editorsidebar.js
+++ b/src/scripts/editorsidebar.js
@@ -183,7 +183,7 @@ import 'material-icons';
     }
 
     function initializeTree(page, currentUser, openItems, selectedId) {
-        require(['jstree'], function () {
+        import('jstree').then(() => {
             initializeTreeInternal(page, currentUser, openItems, selectedId);
         });
     }
@@ -303,7 +303,7 @@ import 'material-icons';
     $(document).on('itemsaved', '.metadataEditorPage', function (e, item) {
         updateEditorNode(this, item);
     }).on('pagebeforeshow', '.metadataEditorPage', function () {
-        require(['css!assets/css/metadataeditor.css']);
+        import('css!assets/css/metadataeditor.css');
     }).on('pagebeforeshow', '.metadataEditorPage', function () {
         var page = this;
         Dashboard.getCurrentUser().then(function (user) {
diff --git a/src/scripts/playlists.js b/src/scripts/playlists.js
index a1868d3131..4a014e7605 100644
--- a/src/scripts/playlists.js
+++ b/src/scripts/playlists.js
@@ -1,195 +1,202 @@
-define(['loading', 'listView', 'cardBuilder', 'libraryMenu', 'libraryBrowser', 'apphost', 'imageLoader', 'userSettings', 'emby-itemscontainer'], function (loading, listView, cardBuilder, libraryMenu, libraryBrowser, appHost, imageLoader, userSettings) {
-    'use strict';
+import loading from 'loading';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import libraryMenu from 'libraryMenu';
+import libraryBrowser from 'libraryBrowser';
+import appHost from 'apphost';
+import imageLoader from 'imageLoader';
+import userSettings from 'userSettings';
+import 'emby-itemscontainer';
 
-    return function (view, params) {
-        function getPageData(context) {
-            var key = getSavedQueryKey(context);
-            var pageData = data[key];
+export default function (view, params) {
+    function getPageData(context) {
+        const key = getSavedQueryKey(context);
+        let pageData = data[key];
 
-            if (!pageData) {
-                pageData = data[key] = {
-                    query: {
-                        SortBy: 'SortName',
-                        SortOrder: 'Ascending',
-                        IncludeItemTypes: 'Playlist',
-                        Recursive: true,
-                        Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete',
-                        StartIndex: 0
-                    },
-                    view: libraryBrowser.getSavedView(key) || 'Poster'
-                };
+        if (!pageData) {
+            pageData = data[key] = {
+                query: {
+                    SortBy: 'SortName',
+                    SortOrder: 'Ascending',
+                    IncludeItemTypes: 'Playlist',
+                    Recursive: true,
+                    Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete',
+                    StartIndex: 0
+                },
+                view: libraryBrowser.getSavedView(key) || 'Poster'
+            };
 
-                if (userSettings.libraryPageSize() > 0) {
-                    pageData.query['Limit'] = userSettings.libraryPageSize();
-                }
-
-                pageData.query.ParentId = libraryMenu.getTopParentId();
-                libraryBrowser.loadSavedQueryValues(key, pageData.query);
+            if (userSettings.libraryPageSize() > 0) {
+                pageData.query['Limit'] = userSettings.libraryPageSize();
             }
 
-            return pageData;
+            pageData.query.ParentId = libraryMenu.getTopParentId();
+            libraryBrowser.loadSavedQueryValues(key, pageData.query);
         }
 
-        function getQuery(context) {
-            return getPageData(context).query;
+        return pageData;
+    }
+
+    function getQuery(context) {
+        return getPageData(context).query;
+    }
+
+    function getSavedQueryKey(context) {
+        if (!context.savedQueryKey) {
+            context.savedQueryKey = libraryBrowser.getSavedQueryKey();
         }
 
-        function getSavedQueryKey(context) {
-            if (!context.savedQueryKey) {
-                context.savedQueryKey = libraryBrowser.getSavedQueryKey();
-            }
+        return context.savedQueryKey;
+    }
 
-            return context.savedQueryKey;
+    function showLoadingMessage() {
+        loading.show();
+    }
+
+    function hideLoadingMessage() {
+        loading.hide();
+    }
+
+    function onViewStyleChange() {
+        const viewStyle = getPageData(view).view;
+        const itemsContainer = view.querySelector('.itemsContainer');
+
+        if ('List' == viewStyle) {
+            itemsContainer.classList.add('vertical-list');
+            itemsContainer.classList.remove('vertical-wrap');
+        } else {
+            itemsContainer.classList.remove('vertical-list');
+            itemsContainer.classList.add('vertical-wrap');
         }
 
-        function showLoadingMessage() {
-            loading.show();
-        }
+        itemsContainer.innerHTML = '';
+    }
 
-        function hideLoadingMessage() {
-            loading.hide();
-        }
+    function reloadItems() {
+        showLoadingMessage();
+        const query = getQuery(view);
+        const promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
+        // TODO: promise2 is unused, check if necessary.
+        const promise2 = Dashboard.getCurrentUser();
+        Promise.all([promise1, promise2]).then(function (responses) {
+            const result = responses[0];
+            // TODO: Is the scroll necessary?
+            window.scrollTo(0, 0);
+            let html = '';
+            const viewStyle = getPageData(view).view;
+            view.querySelector('.listTopPaging').innerHTML = libraryBrowser.getQueryPagingHtml({
+                startIndex: query.StartIndex,
+                limit: query.Limit,
+                totalRecordCount: result.TotalRecordCount,
+                viewButton: false,
+                showLimit: false,
+                updatePageSizeSetting: false,
+                addLayoutButton: true,
+                layouts: 'List,Poster,PosterCard,Thumb,ThumbCard',
+                currentLayout: viewStyle
+            });
 
-        function onViewStyleChange() {
-            var viewStyle = getPageData(view).view;
-            var itemsContainer = view.querySelector('.itemsContainer');
-
-            if ('List' == viewStyle) {
-                itemsContainer.classList.add('vertical-list');
-                itemsContainer.classList.remove('vertical-wrap');
-            } else {
-                itemsContainer.classList.remove('vertical-list');
-                itemsContainer.classList.add('vertical-wrap');
-            }
-
-            itemsContainer.innerHTML = '';
-        }
-
-        function reloadItems() {
-            showLoadingMessage();
-            var query = getQuery(view);
-            var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
-            // TODO: promise2 is unused, check if necessary.
-            var promise2 = Dashboard.getCurrentUser();
-            Promise.all([promise1, promise2]).then(function (responses) {
-                var result = responses[0];
-                // TODO: Is the scroll necessary?
-                window.scrollTo(0, 0);
-                var html = '';
-                var viewStyle = getPageData(view).view;
-                view.querySelector('.listTopPaging').innerHTML = libraryBrowser.getQueryPagingHtml({
-                    startIndex: query.StartIndex,
-                    limit: query.Limit,
-                    totalRecordCount: result.TotalRecordCount,
-                    viewButton: false,
-                    showLimit: false,
-                    updatePageSizeSetting: false,
-                    addLayoutButton: true,
-                    layouts: 'List,Poster,PosterCard,Thumb,ThumbCard',
-                    currentLayout: viewStyle
-                });
-
-                if (result.TotalRecordCount) {
-                    if (viewStyle == 'List') {
-                        html = listView.getListViewHtml({
-                            items: result.Items,
-                            sortBy: query.SortBy
-                        });
-                    } else if (viewStyle == 'PosterCard') {
-                        html = cardBuilder.getCardsHtml({
-                            items: result.Items,
-                            shape: 'square',
-                            coverImage: true,
-                            showTitle: true,
-                            cardLayout: true
-                        });
-                    } else if (viewStyle == 'Thumb') {
-                        html = cardBuilder.getCardsHtml({
-                            items: result.Items,
-                            shape: 'backdrop',
-                            showTitle: true,
-                            centerText: true,
-                            preferThumb: true,
-                            overlayPlayButton: true
-                        });
-                    } else if (viewStyle == 'ThumbCard') {
-                        html = cardBuilder.getCardsHtml({
-                            items: result.Items,
-                            shape: 'backdrop',
-                            showTitle: true,
-                            preferThumb: true,
-                            cardLayout: true
-                        });
-                    } else {
-                        html = cardBuilder.getCardsHtml({
-                            items: result.Items,
-                            shape: 'square',
-                            showTitle: true,
-                            coverImage: true,
-                            centerText: true,
-                            overlayPlayButton: true
-                        });
-                    }
-                    view.querySelector('.noItemsMessage').classList.add('hide');
+            if (result.TotalRecordCount) {
+                if (viewStyle == 'List') {
+                    html = listView.getListViewHtml({
+                        items: result.Items,
+                        sortBy: query.SortBy
+                    });
+                } else if (viewStyle == 'PosterCard') {
+                    html = cardBuilder.getCardsHtml({
+                        items: result.Items,
+                        shape: 'square',
+                        coverImage: true,
+                        showTitle: true,
+                        cardLayout: true
+                    });
+                } else if (viewStyle == 'Thumb') {
+                    html = cardBuilder.getCardsHtml({
+                        items: result.Items,
+                        shape: 'backdrop',
+                        showTitle: true,
+                        centerText: true,
+                        preferThumb: true,
+                        overlayPlayButton: true
+                    });
+                } else if (viewStyle == 'ThumbCard') {
+                    html = cardBuilder.getCardsHtml({
+                        items: result.Items,
+                        shape: 'backdrop',
+                        showTitle: true,
+                        preferThumb: true,
+                        cardLayout: true
+                    });
                 } else {
-                    view.querySelector('.noItemsMessage').classList.remove('hide');
-                }
-
-                var elem = view.querySelector('.itemsContainer');
-                elem.innerHTML = html;
-                imageLoader.lazyChildren(elem);
-                var btnNextPage = view.querySelector('.btnNextPage');
-
-                if (btnNextPage) {
-                    btnNextPage.addEventListener('click', function () {
-                        if (userSettings.libraryPageSize() > 0) {
-                            query.StartIndex += query.Limit;
-                        }
-                        reloadItems();
+                    html = cardBuilder.getCardsHtml({
+                        items: result.Items,
+                        shape: 'square',
+                        showTitle: true,
+                        coverImage: true,
+                        centerText: true,
+                        overlayPlayButton: true
                     });
                 }
+                view.querySelector('.noItemsMessage').classList.add('hide');
+            } else {
+                view.querySelector('.noItemsMessage').classList.remove('hide');
+            }
 
-                var btnPreviousPage = view.querySelector('.btnPreviousPage');
+            const elem = view.querySelector('.itemsContainer');
+            elem.innerHTML = html;
+            imageLoader.lazyChildren(elem);
+            const btnNextPage = view.querySelector('.btnNextPage');
 
-                if (btnPreviousPage) {
-                    btnPreviousPage.addEventListener('click', function () {
-                        if (userSettings.libraryPageSize() > 0) {
-                            query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
-                        }
-                        reloadItems();
-                    });
-                }
-
-                var btnChangeLayout = view.querySelector('.btnChangeLayout');
-
-                if (btnChangeLayout) {
-                    btnChangeLayout.addEventListener('layoutchange', function (e) {
-                        var layout = e.detail.viewStyle;
-                        getPageData(view).view = layout;
-                        libraryBrowser.saveViewSetting(getSavedQueryKey(view), layout);
-                        onViewStyleChange();
-                        reloadItems();
-                    });
-                }
-
-                libraryBrowser.saveQueryValues(getSavedQueryKey(view), query);
-                hideLoadingMessage();
-            });
-        }
-
-        var data = {};
-        view.addEventListener('viewbeforeshow', function () {
-            reloadItems();
-        });
-        view.querySelector('.btnNewPlaylist').addEventListener('click', function () {
-            require(['playlistEditor'], function (playlistEditor) {
-                var serverId = ApiClient.serverInfo().Id;
-                new playlistEditor.showEditor({
-                    items: [],
-                    serverId: serverId
+            if (btnNextPage) {
+                btnNextPage.addEventListener('click', function () {
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex += query.Limit;
+                    }
+                    reloadItems();
                 });
+            }
+
+            const btnPreviousPage = view.querySelector('.btnPreviousPage');
+
+            if (btnPreviousPage) {
+                btnPreviousPage.addEventListener('click', function () {
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                    }
+                    reloadItems();
+                });
+            }
+
+            const btnChangeLayout = view.querySelector('.btnChangeLayout');
+
+            if (btnChangeLayout) {
+                btnChangeLayout.addEventListener('layoutchange', function (e) {
+                    const layout = e.detail.viewStyle;
+                    getPageData(view).view = layout;
+                    libraryBrowser.saveViewSetting(getSavedQueryKey(view), layout);
+                    onViewStyleChange();
+                    reloadItems();
+                });
+            }
+
+            libraryBrowser.saveQueryValues(getSavedQueryKey(view), query);
+            hideLoadingMessage();
+        });
+    }
+
+    const data = {};
+    view.addEventListener('viewbeforeshow', function () {
+        reloadItems();
+    });
+    view.querySelector('.btnNewPlaylist').addEventListener('click', function () {
+        import('playlistEditor').then(({default: playlistEditor}) => {
+            const serverId = ApiClient.serverInfo().Id;
+            new playlistEditor.showEditor({
+                items: [],
+                serverId: serverId
             });
         });
-        onViewStyleChange();
-    };
-});
+    });
+    onViewStyleChange();
+}
+

From d01e4a1e2fc33a3c0b27e970a458476e8de6dd89 Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Sat, 18 Jul 2020 21:08:35 +0100
Subject: [PATCH 11/12] Migration of user/menu and user/profile to ES6 modules

---
 package.json                    |   2 +
 src/controllers/user/menu.js    |  96 ++++++++--------
 src/controllers/user/profile.js | 197 ++++++++++++++++----------------
 3 files changed, 151 insertions(+), 144 deletions(-)

diff --git a/package.json b/package.json
index 0de4b7e537..affc337935 100644
--- a/package.json
+++ b/package.json
@@ -141,6 +141,8 @@
           "src/controllers/dashboard/dashboard.js",
           "src/controllers/dashboard/encodingsettings.js",
           "src/controllers/dashboard/logs.js",
+          "src/controllers/user/menu.js",
+          "src/controllers/user/profile.js",
           "src/controllers/user/subtitles.js",
           "src/controllers/dashboard/plugins/repositories.js",
           "src/elements/emby-checkbox/emby-checkbox.js",
diff --git a/src/controllers/user/menu.js b/src/controllers/user/menu.js
index 586cd6744c..ef4b3b21c8 100644
--- a/src/controllers/user/menu.js
+++ b/src/controllers/user/menu.js
@@ -1,58 +1,60 @@
-define(['apphost', 'connectionManager', 'layoutManager', 'listViewStyle', 'emby-button'], function(appHost, connectionManager, layoutManager) {
-    'use strict';
+import appHost from 'apphost';
+import connectionManager from 'connectionManager';
+import layoutManager from 'layoutManager';
+import 'listViewStyle';
+import 'emby-button';
 
-    return function(view, params) {
-        view.querySelector('.btnLogout').addEventListener('click', function() {
-            Dashboard.logout();
-        });
+export default function (view, params) {
+    view.querySelector('.btnLogout').addEventListener('click', function () {
+        Dashboard.logout();
+    });
 
-        view.querySelector('.selectServer').addEventListener('click', function () {
-            Dashboard.selectServer();
-        });
+    view.querySelector('.selectServer').addEventListener('click', function () {
+        Dashboard.selectServer();
+    });
 
-        view.querySelector('.clientSettings').addEventListener('click', function () {
-            window.NativeShell.openClientSettings();
-        });
+    view.querySelector('.clientSettings').addEventListener('click', function () {
+        window.NativeShell.openClientSettings();
+    });
 
-        view.addEventListener('viewshow', function() {
-            // this page can also be used by admins to change user preferences from the user edit page
-            var userId = params.userId || Dashboard.getCurrentUserId();
-            var page = this;
+    view.addEventListener('viewshow', function () {
+        // this page can also be used by admins to change user preferences from the user edit page
+        const userId = params.userId || Dashboard.getCurrentUserId();
+        const page = this;
 
-            page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId);
-            page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId);
-            page.querySelector('.lnkHomePreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId);
-            page.querySelector('.lnkPlaybackPreferences').setAttribute('href', 'mypreferencesplayback.html?userId=' + userId);
-            page.querySelector('.lnkSubtitlePreferences').setAttribute('href', 'mypreferencessubtitles.html?userId=' + userId);
+        page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId);
+        page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId);
+        page.querySelector('.lnkHomePreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId);
+        page.querySelector('.lnkPlaybackPreferences').setAttribute('href', 'mypreferencesplayback.html?userId=' + userId);
+        page.querySelector('.lnkSubtitlePreferences').setAttribute('href', 'mypreferencessubtitles.html?userId=' + userId);
 
-            if (window.NativeShell && window.NativeShell.AppHost.supports('clientsettings')) {
-                page.querySelector('.clientSettings').classList.remove('hide');
-            } else {
-                page.querySelector('.clientSettings').classList.add('hide');
-            }
+        if (window.NativeShell && window.NativeShell.AppHost.supports('clientsettings')) {
+            page.querySelector('.clientSettings').classList.remove('hide');
+        } else {
+            page.querySelector('.clientSettings').classList.add('hide');
+        }
 
-            if (appHost.supports('multiserver')) {
-                page.querySelector('.selectServer').classList.remove('hide');
-            } else {
-                page.querySelector('.selectServer').classList.add('hide');
-            }
+        if (appHost.supports('multiserver')) {
+            page.querySelector('.selectServer').classList.remove('hide');
+        } else {
+            page.querySelector('.selectServer').classList.add('hide');
+        }
 
-            // hide the actions if user preferences are being edited for a different user
-            if (params.userId && params.userId !== Dashboard.getCurrentUserId) {
-                page.querySelector('.userSection').classList.add('hide');
+        // hide the actions if user preferences are being edited for a different user
+        if (params.userId && params.userId !== Dashboard.getCurrentUserId) {
+            page.querySelector('.userSection').classList.add('hide');
+            page.querySelector('.adminSection').classList.add('hide');
+        }
+
+        ApiClient.getUser(userId).then(function (user) {
+            page.querySelector('.headerUsername').innerHTML = user.Name;
+            if (!user.Policy.IsAdministrator) {
                 page.querySelector('.adminSection').classList.add('hide');
             }
-
-            ApiClient.getUser(userId).then(function(user) {
-                page.querySelector('.headerUsername').innerHTML = user.Name;
-                if (!user.Policy.IsAdministrator) {
-                    page.querySelector('.adminSection').classList.add('hide');
-                }
-            });
-
-            require(['autoFocuser'], function (autoFocuser) {
-                autoFocuser.autoFocus(view);
-            });
         });
-    };
-});
+
+        import('autoFocuser').then(({default: autoFocuser}) => {
+            autoFocuser.autoFocus(view);
+        });
+    });
+}
diff --git a/src/controllers/user/profile.js b/src/controllers/user/profile.js
index fd7d1e32cc..631253d019 100644
--- a/src/controllers/user/profile.js
+++ b/src/controllers/user/profile.js
@@ -1,106 +1,109 @@
-define(['controllers/dashboard/users/userpasswordpage', 'loading', 'libraryMenu', 'apphost', 'globalize', 'emby-button'], function (UserPasswordPage, loading, libraryMenu, appHost, globalize) {
-    'use strict';
+import UserPasswordPage from 'controllers/dashboard/users/userpasswordpage';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import appHost from 'apphost';
+import globalize from 'globalize';
+import 'emby-button';
 
-    function reloadUser(page) {
-        var userId = getParameterByName('userId');
-        loading.show();
-        ApiClient.getUser(userId).then(function (user) {
-            page.querySelector('.username').innerHTML = user.Name;
-            libraryMenu.setTitle(user.Name);
+function reloadUser(page) {
+    const userId = getParameterByName('userId');
+    loading.show();
+    ApiClient.getUser(userId).then(function (user) {
+        page.querySelector('.username').innerHTML = user.Name;
+        libraryMenu.setTitle(user.Name);
 
-            var imageUrl = 'assets/img/avatar.png';
+        let imageUrl = 'assets/img/avatar.png';
+        if (user.PrimaryImageTag) {
+            imageUrl = ApiClient.getUserImageUrl(user.Id, {
+                tag: user.PrimaryImageTag,
+                type: 'Primary'
+            });
+        }
+
+        const userImage = page.querySelector('#image');
+        userImage.style.backgroundImage = 'url(' + imageUrl + ')';
+
+        Dashboard.getCurrentUser().then(function (loggedInUser) {
             if (user.PrimaryImageTag) {
-                imageUrl = ApiClient.getUserImageUrl(user.Id, {
-                    tag: user.PrimaryImageTag,
-                    type: 'Primary'
-                });
+                page.querySelector('#btnAddImage').classList.add('hide');
+                page.querySelector('#btnDeleteImage').classList.remove('hide');
+            } else if (appHost.supports('fileinput') && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
+                page.querySelector('#btnDeleteImage').classList.add('hide');
+                page.querySelector('#btnAddImage').classList.remove('hide');
             }
+        });
+        loading.hide();
+    });
+}
 
-            var userImage = page.querySelector('#image');
-            userImage.style.backgroundImage = 'url(' + imageUrl + ')';
-
-            Dashboard.getCurrentUser().then(function (loggedInUser) {
-                if (user.PrimaryImageTag) {
-                    page.querySelector('#btnAddImage').classList.add('hide');
-                    page.querySelector('#btnDeleteImage').classList.remove('hide');
-                } else if (appHost.supports('fileinput') && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
-                    page.querySelector('#btnDeleteImage').classList.add('hide');
-                    page.querySelector('#btnAddImage').classList.remove('hide');
-                }
+function onFileReaderError(evt) {
+    loading.hide();
+    switch (evt.target.error.code) {
+        case evt.target.error.NOT_FOUND_ERR:
+            import('toast').then(({default: toast}) => {
+                toast(globalize.translate('FileNotFound'));
             });
+            break;
+        case evt.target.error.ABORT_ERR:
+            onFileReaderAbort();
+            break;
+        case evt.target.error.NOT_READABLE_ERR:
+        default:
+            import('toast').then(({default: toast}) => {
+                toast(globalize.translate('FileReadError'));
+            });
+    }
+}
+
+function onFileReaderAbort(evt) {
+    loading.hide();
+    import('toast').then(({default: toast}) => {
+        toast(globalize.translate('FileReadCancelled'));
+    });
+}
+
+function setFiles(page, files) {
+    const userImage = page.querySelector('#image');
+    const file = files[0];
+
+    if (!file || !file.type.match('image.*')) {
+        return false;
+    }
+
+    const reader = new FileReader();
+    reader.onerror = onFileReaderError;
+    reader.onabort = onFileReaderAbort;
+    reader.onload = function (evt) {
+        userImage.style.backgroundImage = 'url(' + evt.target.result + ')';
+        const userId = getParameterByName('userId');
+        ApiClient.uploadUserImage(userId, 'Primary', file).then(function () {
             loading.hide();
-        });
-    }
-
-    function onFileReaderError(evt) {
-        loading.hide();
-        switch (evt.target.error.code) {
-            case evt.target.error.NOT_FOUND_ERR:
-                require(['toast'], function (toast) {
-                    toast(globalize.translate('FileNotFound'));
-                });
-                break;
-            case evt.target.error.ABORT_ERR:
-                onFileReaderAbort();
-                break;
-            case evt.target.error.NOT_READABLE_ERR:
-            default:
-                require(['toast'], function (toast) {
-                    toast(globalize.translate('FileReadError'));
-                });
-        }
-    }
-
-    function onFileReaderAbort(evt) {
-        loading.hide();
-        require(['toast'], function (toast) {
-            toast(globalize.translate('FileReadCancelled'));
-        });
-    }
-
-    function setFiles(page, files) {
-        var userImage = page.querySelector('#image');
-        var file = files[0];
-
-        if (!file || !file.type.match('image.*')) {
-            return false;
-        }
-
-        var reader = new FileReader();
-        reader.onerror = onFileReaderError;
-        reader.onabort = onFileReaderAbort;
-        reader.onload = function (evt) {
-            userImage.style.backgroundImage = 'url(' + evt.target.result + ')';
-            var userId = getParameterByName('userId');
-            ApiClient.uploadUserImage(userId, 'Primary', file).then(function () {
-                loading.hide();
-                reloadUser(page);
-            });
-        };
-
-        reader.readAsDataURL(file);
-    }
-
-    return function (view, params) {
-        reloadUser(view);
-        new UserPasswordPage(view, params);
-        view.querySelector('#btnDeleteImage').addEventListener('click', function () {
-            require(['confirm'], function (confirm) {
-                confirm(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () {
-                    loading.show();
-                    var userId = getParameterByName('userId');
-                    ApiClient.deleteUserImage(userId, 'primary').then(function () {
-                        loading.hide();
-                        reloadUser(view);
-                    });
-                });
-            });
-        });
-        view.querySelector('#btnAddImage').addEventListener('click', function (evt) {
-            view.querySelector('#uploadImage').click();
-        });
-        view.querySelector('#uploadImage').addEventListener('change', function (evt) {
-            setFiles(view, evt.target.files);
+            reloadUser(page);
         });
     };
-});
+
+    reader.readAsDataURL(file);
+}
+
+export default function (view, params) {
+    reloadUser(view);
+    new UserPasswordPage(view, params);
+    view.querySelector('#btnDeleteImage').addEventListener('click', function () {
+        import('confirm').then(({default: confirm}) => {
+            confirm(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () {
+                loading.show();
+                const userId = getParameterByName('userId');
+                ApiClient.deleteUserImage(userId, 'primary').then(function () {
+                    loading.hide();
+                    reloadUser(view);
+                });
+            });
+        });
+    });
+    view.querySelector('#btnAddImage').addEventListener('click', function (evt) {
+        view.querySelector('#uploadImage').click();
+    });
+    view.querySelector('#uploadImage').addEventListener('change', function (evt) {
+        setFiles(view, evt.target.files);
+    });
+}

From 3a23b6e36c700da180c1756e6d4779414c82317e Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Tue, 21 Jul 2020 13:25:50 +0100
Subject: [PATCH 12/12] Destruction of Require

---
 src/components/accessSchedule/accessSchedule.js      |  3 +--
 src/components/actionSheet/actionSheet.js            |  2 +-
 src/components/cardbuilder/cardBuilder.js            | 10 +++++-----
 src/components/directorybrowser/directorybrowser.js  |  2 +-
 src/components/playback/playerSelectionMenu.js       | 12 ++++++++----
 src/components/search/searchfields.js                |  2 +-
 src/components/search/searchresults.js               |  2 +-
 src/components/subtitlesettings/subtitlesettings.js  |  4 ++--
 .../dashboard/scheduledtasks/scheduledtask.js        |  4 ++--
 src/elements/emby-progressring/emby-progressring.js  |  2 +-
 src/elements/emby-scroller/emby-scroller.js          |  2 +-
 src/plugins/bookPlayer/plugin.js                     |  2 +-
 src/scripts/deleteHelper.js                          |  2 +-
 src/scripts/keyboardNavigation.js                    |  2 +-
 14 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/accessSchedule/accessSchedule.js b/src/components/accessSchedule/accessSchedule.js
index 166460a025..10530ca22c 100644
--- a/src/components/accessSchedule/accessSchedule.js
+++ b/src/components/accessSchedule/accessSchedule.js
@@ -59,8 +59,7 @@ import 'formDialogStyle';
 
     export function show(options) {
         return new Promise((resolve, reject) => {
-            // TODO: remove require
-            require(['text!./components/accessSchedule/accessSchedule.template.html'], template => {
+            import('text!./components/accessSchedule/accessSchedule.template.html').then(({default: template}) => {
                 const dlg = dialogHelper.createDialog({
                     removeOnClose: true,
                     size: 'small'
diff --git a/src/components/actionSheet/actionSheet.js b/src/components/actionSheet/actionSheet.js
index c56f42a9d9..1c8992bf55 100644
--- a/src/components/actionSheet/actionSheet.js
+++ b/src/components/actionSheet/actionSheet.js
@@ -73,7 +73,7 @@ function getPosition(options, dlg) {
 }
 
 function centerFocus(elem, horiz, on) {
-    require(['scrollHelper'], function (scrollHelper) {
+    import('scrollHelper').then(({default: scrollHelper}) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index 52d5ed202a..1c59a7ae94 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -1160,10 +1160,10 @@ import 'programStyles';
         /**
          * Imports the refresh indicator element.
          */
-        function requireRefreshIndicator() {
+        function importRefreshIndicator() {
             if (!refreshIndicatorLoaded) {
                 refreshIndicatorLoaded = true;
-                require(['emby-itemrefreshindicator']);
+                import('emby-itemrefreshindicator');
             }
         }
 
@@ -1414,7 +1414,7 @@ import 'programStyles';
             if (item.Type === 'CollectionFolder' || item.CollectionType) {
                 const refreshClass = item.RefreshProgress ? '' : ' class="hide"';
                 indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>';
-                requireRefreshIndicator();
+                importRefreshIndicator();
             }
 
             if (indicatorsHtml) {
@@ -1495,7 +1495,7 @@ import 'programStyles';
             const userData = item.UserData || {};
 
             if (itemHelper.canMarkPlayed(item)) {
-                require(['emby-playstatebutton']);
+                import('emby-playstatebutton');
                 html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>';
             }
 
@@ -1503,7 +1503,7 @@ import 'programStyles';
 
                 const likes = userData.Likes == null ? '' : userData.Likes;
 
-                require(['emby-ratingbutton']);
+                import('emby-ratingbutton');
                 html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>';
             }
 
diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js
index fbe99154f5..41744bdcbb 100644
--- a/src/components/directorybrowser/directorybrowser.js
+++ b/src/components/directorybrowser/directorybrowser.js
@@ -157,7 +157,7 @@ import 'emby-button';
     }
 
     function alertTextWithOptions(options) {
-        require(['alert'], alert => {
+        import('alert').then(({default: alert}) => {
             alert(options);
         });
     }
diff --git a/src/components/playback/playerSelectionMenu.js b/src/components/playback/playerSelectionMenu.js
index 91b1ddc20b..298ae0b07e 100644
--- a/src/components/playback/playerSelectionMenu.js
+++ b/src/components/playback/playerSelectionMenu.js
@@ -118,7 +118,7 @@ export function show(button) {
 
         });
 
-        require(['actionsheet'], function (actionsheet) {
+        import('actionsheet').then(({default: actionsheet}) => {
 
             loading.hide();
 
@@ -153,8 +153,12 @@ export function show(button) {
 }
 
 function showActivePlayerMenu(playerInfo) {
-
-    require(['dialogHelper', 'dialog', 'emby-checkbox', 'emby-button'], function (dialogHelper) {
+    Promise.all([
+        import('dialogHelper'),
+        import('dialog'),
+        import('emby-checkbox'),
+        import('emby-button')
+    ]).then(([dialogHelper]) => {
         showActivePlayerMenuInternal(dialogHelper, playerInfo);
     });
 }
@@ -163,7 +167,7 @@ function disconnectFromPlayer(currentDeviceName) {
 
     if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
 
-        require(['dialog'], function (dialog) {
+        import('dialog').then(({default: dialog}) => {
 
             var menuItems = [];
 
diff --git a/src/components/search/searchfields.js b/src/components/search/searchfields.js
index 6ff8c50c30..1e77586768 100644
--- a/src/components/search/searchfields.js
+++ b/src/components/search/searchfields.js
@@ -70,7 +70,7 @@ import 'css!./searchfields';
 
     function embed(elem, instance, options) {
 
-        require(['text!./searchfields.template.html'], function (template) {
+        import('text!./searchfields.template.html').then(({default: template}) => {
 
             let html = globalize.translateDocument(template, 'core');
 
diff --git a/src/components/search/searchresults.js b/src/components/search/searchresults.js
index 385f067628..138eec9d6e 100644
--- a/src/components/search/searchresults.js
+++ b/src/components/search/searchresults.js
@@ -604,7 +604,7 @@ import 'emby-button';
 
     function embed(elem, instance, options) {
 
-        require(['text!./searchresults.template.html'], function (template) {
+        import('text!./searchresults.template.html').then(({default: template}) => {
 
             if (!enableScrollX()) {
                 template = replaceAll(template, 'data-horizontal="true"', 'data-horizontal="false"');
diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js
index 73dddb9a2c..a80f043429 100644
--- a/src/components/subtitlesettings/subtitlesettings.js
+++ b/src/components/subtitlesettings/subtitlesettings.js
@@ -90,7 +90,7 @@ function save(instance, context, userId, userSettings, apiClient, enableSaveConf
 
             loading.hide();
             if (enableSaveConfirmation) {
-                require(['toast'], function (toast) {
+                import('toast').then(({default: toast}) => {
                     toast(globalize.translate('SettingsSaved'));
                 });
             }
@@ -130,7 +130,7 @@ function onAppearanceFieldChange(e) {
 
 function embed(options, self) {
 
-    require(['text!./subtitlesettings.template.html'], function (template) {
+    import('text!./subtitlesettings.template.html').then(({default: template}) => {
 
         options.element.classList.add('subtitlesettings');
         options.element.innerHTML = globalize.translateDocument(template, 'core');
diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtask.js b/src/controllers/dashboard/scheduledtasks/scheduledtask.js
index 79775e092d..fe214fef63 100644
--- a/src/controllers/dashboard/scheduledtasks/scheduledtask.js
+++ b/src/controllers/dashboard/scheduledtasks/scheduledtask.js
@@ -43,7 +43,7 @@ import 'emby-select';
             $('.taskName', view).html(task.Name);
             $('#pTaskDescription', view).html(task.Description);
 
-            require(['listViewStyle'], function () {
+            import('listViewStyle').then(() => {
                 ScheduledTaskPage.loadTaskTriggers(view, task);
             });
 
@@ -137,7 +137,7 @@ import 'emby-select';
             $('#popupAddTrigger', view).removeClass('hide');
         },
         confirmDeleteTrigger: function (view, index) {
-            require(['confirm'], function (confirm) {
+            import('confirm').then(({default: confirm}) => {
                 confirm.default(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () {
                     ScheduledTaskPage.deleteTrigger(view, index);
                 });
diff --git a/src/elements/emby-progressring/emby-progressring.js b/src/elements/emby-progressring/emby-progressring.js
index 698a8b3cd7..d266d884a0 100644
--- a/src/elements/emby-progressring/emby-progressring.js
+++ b/src/elements/emby-progressring/emby-progressring.js
@@ -11,7 +11,7 @@ import 'webcomponents';
         this.classList.add('progressring');
         const instance = this;
 
-        require(['text!./emby-progressring.template.html'], function (template) {
+        import('text!./emby-progressring.template.html').then(({default: template}) => {
             instance.innerHTML = template;
 
             //if (window.MutationObserver) {
diff --git a/src/elements/emby-scroller/emby-scroller.js b/src/elements/emby-scroller/emby-scroller.js
index 407031a55f..aa56dd84e7 100644
--- a/src/elements/emby-scroller/emby-scroller.js
+++ b/src/elements/emby-scroller/emby-scroller.js
@@ -156,7 +156,7 @@ import 'css!./emby-scroller';
     };
 
     function loadScrollButtons(scroller) {
-        require(['emby-scrollbuttons'], function () {
+        import('emby-scrollbuttons').then(() => {
             scroller.insertAdjacentHTML('beforebegin', '<div is="emby-scrollbuttons" class="emby-scrollbuttons padded-right"></div>');
         });
     }
diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js
index 5e8732e97f..db6c344dad 100644
--- a/src/plugins/bookPlayer/plugin.js
+++ b/src/plugins/bookPlayer/plugin.js
@@ -220,7 +220,7 @@ export class BookPlayer {
         let apiClient = connectionManager.getApiClient(serverId);
 
         return new Promise((resolve, reject) => {
-            require(['epubjs'], (epubjs) => {
+            import('epubjs').then(({default: epubjs}) => {
                 let downloadHref = apiClient.getItemDownloadUrl(item.Id);
                 let book = epubjs.default(downloadHref, {openAs: 'epub'});
                 let rendition = book.renderTo(elem, {width: '100%', height: '97%'});
diff --git a/src/scripts/deleteHelper.js b/src/scripts/deleteHelper.js
index e13eb9c4ae..fc5ffe059f 100644
--- a/src/scripts/deleteHelper.js
+++ b/src/scripts/deleteHelper.js
@@ -7,7 +7,7 @@ function alertText(options) {
 
     return new Promise(function (resolve, reject) {
 
-        require(['alert'], function (alert) {
+        import('alert').then(({default: alert}) => {
             alert(options).then(resolve, resolve);
         });
     });
diff --git a/src/scripts/keyboardNavigation.js b/src/scripts/keyboardNavigation.js
index 6664afed53..7cd402b83a 100644
--- a/src/scripts/keyboardNavigation.js
+++ b/src/scripts/keyboardNavigation.js
@@ -155,7 +155,7 @@ export function enable() {
 function attachGamepadScript(e) {
     console.log('Gamepad connected! Attaching gamepadtokey.js script');
     window.removeEventListener('gamepadconnected', attachGamepadScript);
-    require(['scripts/gamepadtokey']);
+    import('scripts/gamepadtokey');
 }
 
 // No need to check for gamepads manually at load time, the eventhandler will be fired for that