From cfd2ec1ddca3e017a6603e693a2c9c59520bd2f8 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Tue, 16 Jun 2020 23:45:03 +0300
Subject: [PATCH 01/11] Migration backdrop to ES6 modules

(cherry picked from commit 4ff4df6477cec4ea71ab042340bfd8875561221e)
---
 package.json                                  |   1 +
 src/components/appRouter.js                   |   4 +-
 src/components/backdrop/backdrop.js           | 186 +++++++++---------
 src/components/remotecontrol/remotecontrol.js |   2 +-
 src/components/skinManager.js                 |   2 +-
 src/components/tabbedview/tabbedview.js       |   2 +-
 src/controllers/itemDetails.js                |   2 +-
 src/scripts/autoBackdrops.js                  |   6 +-
 8 files changed, 106 insertions(+), 99 deletions(-)

diff --git a/package.json b/package.json
index 29aa2f82a7..4f5b607b6a 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
           "src/components/accessSchedule/accessSchedule.js",
           "src/components/actionSheet/actionSheet.js",
           "src/components/autoFocuser.js",
+          "src/components/backdrop/backdrop.js",
           "src/components/cardbuilder/cardBuilder.js",
           "src/components/cardbuilder/chaptercardbuilder.js",
           "src/components/cardbuilder/peoplecardbuilder.js",
diff --git a/src/components/appRouter.js b/src/components/appRouter.js
index 0861cf7e00..1791aef7e2 100644
--- a/src/components/appRouter.js
+++ b/src/components/appRouter.js
@@ -21,7 +21,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
     };
 
     function beginConnectionWizard() {
-        backdrop.clear();
+        backdrop.clearBackdrop();
         loading.show();
         connectionManager.connect({
             enableAutoLogin: appSettings.enableAutoLogin()
@@ -657,7 +657,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
         }
 
         if (level === 'full' || level === 2) {
-            backdrop.clear(true);
+            backdrop.clearBackdrop(true);
             document.documentElement.classList.add('transparentDocument');
             backgroundContainer.classList.add('backgroundContainer-transparent');
             backdropContainer.classList.add('hide');
diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js
index c15e35524c..51bb280765 100644
--- a/src/components/backdrop/backdrop.js
+++ b/src/components/backdrop/backdrop.js
@@ -1,5 +1,11 @@
-define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom, userSettings) {
-    'use strict';
+import browser from 'browser';
+import connectionManager from 'connectionManager';
+import playbackManager from 'playbackManager';
+import dom from 'dom';
+import * as userSettings from 'userSettings';
+import 'css!./backdrop';
+
+/* eslint-disable indent */
 
     function enableAnimation(elem) {
         if (browser.slow) {
@@ -22,71 +28,70 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         return true;
     }
 
-    function Backdrop() {
-    }
+    class Backdrop {
+        load(url, parent, existingBackdropImage) {
+            const img = new Image();
+            const self = this;
 
-    Backdrop.prototype.load = function (url, parent, existingBackdropImage) {
-        var img = new Image();
-        var self = this;
-
-        img.onload = function () {
-            if (self.isDestroyed) {
-                return;
-            }
-
-            var backdropImage = document.createElement('div');
-            backdropImage.classList.add('backdropImage');
-            backdropImage.classList.add('displayingBackdropImage');
-            backdropImage.style.backgroundImage = "url('" + url + "')";
-            backdropImage.setAttribute('data-url', url);
-
-            backdropImage.classList.add('backdropImageFadeIn');
-            parent.appendChild(backdropImage);
-
-            if (!enableAnimation(backdropImage)) {
-                if (existingBackdropImage && existingBackdropImage.parentNode) {
-                    existingBackdropImage.parentNode.removeChild(existingBackdropImage);
+            img.onload = () => {
+                if (self.isDestroyed) {
+                    return;
                 }
-                internalBackdrop(true);
-                return;
-            }
 
-            var onAnimationComplete = function () {
-                dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
+                const backdropImage = document.createElement('div');
+                backdropImage.classList.add('backdropImage');
+                backdropImage.classList.add('displayingBackdropImage');
+                backdropImage.style.backgroundImage = `url('${url}')`;
+                backdropImage.setAttribute('data-url', url);
+
+                backdropImage.classList.add('backdropImageFadeIn');
+                parent.appendChild(backdropImage);
+
+                if (!enableAnimation(backdropImage)) {
+                    if (existingBackdropImage && existingBackdropImage.parentNode) {
+                        existingBackdropImage.parentNode.removeChild(existingBackdropImage);
+                    }
+                    internalBackdrop(true);
+                    return;
+                }
+
+                const onAnimationComplete = () => {
+                    dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
+                        once: true
+                    });
+                    if (backdropImage === self.currentAnimatingElement) {
+                        self.currentAnimatingElement = null;
+                    }
+                    if (existingBackdropImage && existingBackdropImage.parentNode) {
+                        existingBackdropImage.parentNode.removeChild(existingBackdropImage);
+                    }
+                };
+
+                dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
                     once: true
                 });
-                if (backdropImage === self.currentAnimatingElement) {
-                    self.currentAnimatingElement = null;
-                }
-                if (existingBackdropImage && existingBackdropImage.parentNode) {
-                    existingBackdropImage.parentNode.removeChild(existingBackdropImage);
-                }
+
+                internalBackdrop(true);
             };
 
-            dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
-                once: true
-            });
-
-            internalBackdrop(true);
-        };
-
-        img.src = url;
-    };
-
-    Backdrop.prototype.cancelAnimation = function () {
-        var elem = this.currentAnimatingElement;
-        if (elem) {
-            elem.classList.remove('backdropImageFadeIn');
-            this.currentAnimatingElement = null;
+            img.src = url;
         }
-    };
 
-    Backdrop.prototype.destroy = function () {
-        this.isDestroyed = true;
-        this.cancelAnimation();
-    };
+        cancelAnimation() {
+            const elem = this.currentAnimatingElement;
+            if (elem) {
+                elem.classList.remove('backdropImageFadeIn');
+                this.currentAnimatingElement = null;
+            }
+        }
 
-    var backdropContainer;
+        destroy() {
+            this.isDestroyed = true;
+            this.cancelAnimation();
+        }
+    }
+
+    let backdropContainer;
     function getBackdropContainer() {
         if (!backdropContainer) {
             backdropContainer = document.querySelector('.backdropContainer');
@@ -101,7 +106,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         return backdropContainer;
     }
 
-    function clearBackdrop(clearAll) {
+    export function clearBackdrop(clearAll) {
         clearRotation();
 
         if (currentLoadingBackdrop) {
@@ -109,7 +114,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
             currentLoadingBackdrop = null;
         }
 
-        var elem = getBackdropContainer();
+        const elem = getBackdropContainer();
         elem.innerHTML = '';
 
         if (clearAll) {
@@ -119,7 +124,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         internalBackdrop(false);
     }
 
-    var backgroundContainer;
+    let backgroundContainer;
     function getBackgroundContainer() {
         if (!backgroundContainer) {
             backgroundContainer = document.querySelector('.backgroundContainer');
@@ -135,14 +140,14 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         }
     }
 
-    var hasInternalBackdrop;
+    let hasInternalBackdrop;
     function internalBackdrop(enabled) {
         hasInternalBackdrop = enabled;
         setBackgroundContainerBackgroundEnabled();
     }
 
-    var hasExternalBackdrop;
-    function externalBackdrop(enabled) {
+    let hasExternalBackdrop;
+    export function externalBackdrop(enabled) {
         hasExternalBackdrop = enabled;
         setBackgroundContainerBackgroundEnabled();
     }
@@ -151,15 +156,15 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         return Math.floor(Math.random() * (max - min) + min);
     }
 
-    var currentLoadingBackdrop;
+    let currentLoadingBackdrop;
     function setBackdropImage(url) {
         if (currentLoadingBackdrop) {
             currentLoadingBackdrop.destroy();
             currentLoadingBackdrop = null;
         }
 
-        var elem = getBackdropContainer();
-        var existingBackdropImage = elem.querySelector('.displayingBackdropImage');
+        const elem = getBackdropContainer();
+        const existingBackdropImage = elem.querySelector('.displayingBackdropImage');
 
         if (existingBackdropImage && existingBackdropImage.getAttribute('data-url') === url) {
             if (existingBackdropImage.getAttribute('data-url') === url) {
@@ -168,7 +173,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
             existingBackdropImage.classList.remove('displayingBackdropImage');
         }
 
-        var instance = new Backdrop();
+        const instance = new Backdrop();
         instance.load(url, elem, existingBackdropImage);
         currentLoadingBackdrop = instance;
     }
@@ -176,9 +181,9 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
     function getItemImageUrls(item, imageOptions) {
         imageOptions = imageOptions || {};
 
-        var apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = connectionManager.getApiClient(item.ServerId);
         if (item.BackdropImageTags && item.BackdropImageTags.length > 0) {
-            return item.BackdropImageTags.map(function (imgTag, index) {
+            return item.BackdropImageTags.map((imgTag, index) => {
                 return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
                     type: 'Backdrop',
                     tag: imgTag,
@@ -189,7 +194,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         }
 
         if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
-            return item.ParentBackdropImageTags.map(function (imgTag, index) {
+            return item.ParentBackdropImageTags.map((imgTag, index) => {
                 return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, {
                     type: 'Backdrop',
                     tag: imgTag,
@@ -203,13 +208,13 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
     }
 
     function getImageUrls(items, imageOptions) {
-        var list = [];
-        var onImg = function (img) {
+        const list = [];
+        const onImg = img => {
             list.push(img);
         };
 
-        for (var i = 0, length = items.length; i < length; i++) {
-            var itemImages = getItemImageUrls(items[i], imageOptions);
+        for (let i = 0, length = items.length; i < length; i++) {
+            const itemImages = getItemImageUrls(items[i], imageOptions);
             itemImages.forEach(onImg);
         }
 
@@ -229,7 +234,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
 
         // If you don't care about the order of the elements inside
         // the array, you should sort both arrays here.
-        for (var i = 0; i < a.length; ++i) {
+        for (let i = 0; i < a.length; ++i) {
             if (a[i] !== b[i]) {
                 return false;
             }
@@ -242,12 +247,12 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         return userSettings.enableBackdrops();
     }
 
-    var rotationInterval;
-    var currentRotatingImages = [];
-    var currentRotationIndex = -1;
-    function setBackdrops(items, imageOptions, enableImageRotation) {
+    let rotationInterval;
+    let currentRotatingImages = [];
+    let currentRotationIndex = -1;
+    export function setBackdrops(items, imageOptions, enableImageRotation) {
         if (enabled()) {
-            var images = getImageUrls(items, imageOptions);
+            const images = getImageUrls(items, imageOptions);
 
             if (images.length) {
                 startRotation(images, enableImageRotation);
@@ -279,7 +284,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
             return;
         }
 
-        var newIndex = currentRotationIndex + 1;
+        let newIndex = currentRotationIndex + 1;
         if (newIndex >= currentRotatingImages.length) {
             newIndex = 0;
         }
@@ -289,7 +294,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
     }
 
     function clearRotation() {
-        var interval = rotationInterval;
+        const interval = rotationInterval;
         if (interval) {
             clearInterval(interval);
         }
@@ -299,7 +304,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         currentRotationIndex = -1;
     }
 
-    function setBackdrop(url, imageOptions) {
+    export function setBackdrop(url, imageOptions) {
         if (url && typeof url !== 'string') {
             url = getImageUrls([url], imageOptions)[0];
         }
@@ -312,10 +317,11 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         }
     }
 
-    return {
-        setBackdrops: setBackdrops,
-        setBackdrop: setBackdrop,
-        clear: clearBackdrop,
-        externalBackdrop: externalBackdrop
-    };
-});
+/* eslint-enable indent */
+
+export default {
+    setBackdrops: setBackdrops,
+    setBackdrop: setBackdrop,
+    clearBackdrop: clearBackdrop,
+    externalBackdrop: externalBackdrop
+};
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 089915a834..0f713dbe07 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -175,7 +175,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                     context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>';
                 });
             } else {
-                backdrop.clear();
+                backdrop.clearBackdrop();
                 context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
             }
         }
diff --git a/src/components/skinManager.js b/src/components/skinManager.js
index c38d34181b..faa1a1f306 100644
--- a/src/components/skinManager.js
+++ b/src/components/skinManager.js
@@ -84,7 +84,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize',
             currentSound = null;
         }
 
-        backdrop.clear();
+        backdrop.clearBackdrop();
     }
 
     function onThemeLoaded() {
diff --git a/src/components/tabbedview/tabbedview.js b/src/components/tabbedview/tabbedview.js
index a67e8e0fa1..4fec69f619 100644
--- a/src/components/tabbedview/tabbedview.js
+++ b/src/components/tabbedview/tabbedview.js
@@ -95,7 +95,7 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
     TabbedView.prototype.onResume = function (options) {
 
         this.setTitle();
-        backdrop.clear();
+        backdrop.clearBackdrop();
 
         var currentTabController = this.currentTabController;
 
diff --git a/src/controllers/itemDetails.js b/src/controllers/itemDetails.js
index 67aa5f9407..58b0861e17 100644
--- a/src/controllers/itemDetails.js
+++ b/src/controllers/itemDetails.js
@@ -462,7 +462,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         if (dom.getWindowSize().innerWidth >= 1000) {
             backdrop.setBackdrops([item]);
         } else {
-            backdrop.clear();
+            backdrop.clearBackdrop();
         }
     }
 
diff --git a/src/scripts/autoBackdrops.js b/src/scripts/autoBackdrops.js
index abd86c9dbf..678aa4c332 100644
--- a/src/scripts/autoBackdrops.js
+++ b/src/scripts/autoBackdrops.js
@@ -50,7 +50,7 @@ define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSett
                         return i;
                     }));
                 } else {
-                    backdrop.clear();
+                    backdrop.clearBackdrop();
                 }
             });
         }
@@ -67,10 +67,10 @@ define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSett
                     showBackdrop(type, parentId);
                 } else {
                     page.classList.remove('backdropPage');
-                    backdrop.clear();
+                    backdrop.clearBackdrop();
                 }
             } else {
-                backdrop.clear();
+                backdrop.clearBackdrop();
             }
         }
     });

From 2b156bfe57b1ecb8a35a2b971964b00f2798e5bc Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Tue, 16 Jun 2020 23:51:30 +0300
Subject: [PATCH 02/11] Remove unused function

(cherry picked from commit c1b65c0122949ccb99be794a6a81e59e8146d450)
---
 src/components/backdrop/backdrop.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js
index 51bb280765..d3c9e58b59 100644
--- a/src/components/backdrop/backdrop.js
+++ b/src/components/backdrop/backdrop.js
@@ -152,10 +152,6 @@ import 'css!./backdrop';
         setBackgroundContainerBackgroundEnabled();
     }
 
-    function getRandom(min, max) {
-        return Math.floor(Math.random() * (max - min) + min);
-    }
-
     let currentLoadingBackdrop;
     function setBackdropImage(url) {
         if (currentLoadingBackdrop) {

From 8af1a74fd288675aa878ac5569d6cc392a1c5c29 Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Wed, 8 Jul 2020 16:19:44 +0100
Subject: [PATCH 03/11] migrate itemContextMenu and maintabmanager to ES6
 modules

---
 package.json                      |  2 ++
 src/components/itemContextMenu.js | 29 ++++++++++++++++++++---------
 src/components/maintabsmanager.js | 22 +++++++++++-----------
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 230eee3f21..233bda9258 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,9 @@
           "src/components/channelMapper/channelMapper.js",
           "src/components/images/imageLoader.js",
           "src/components/indicators/indicators.js",
+          "src/components/itemContextMenu.js",
           "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
+          "src/components/maintabsmanager.js",
           "src/components/mediaLibraryCreator/mediaLibraryCreator.js",
           "src/components/mediaLibraryEditor/mediaLibraryEditor.js",
           "src/components/listview/listview.js",
diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index 584b25f0e4..688ddd3490 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -1,7 +1,17 @@
-define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', 'playbackManager', 'loading', 'appSettings', 'browser', 'actionsheet'], function (appHost, globalize, connectionManager, itemHelper, appRouter, playbackManager, loading, appSettings, browser, actionsheet) {
-    'use strict';
+import appHost from 'apphost';
+import globalize from 'globalize';
+import connectionManager from 'connectionManager';
+import itemHelper from 'itemHelper';
+import appRouter from 'appRouter';
+import playbackManager from 'playbackManager';
+import loading from 'loading';
+import appSettings from 'appSettings';
+import browser from 'browser';
+import actionsheet from 'actionsheet';
 
-    function getCommands(options) {
+/* eslint-disable indent */
+
+    export function getCommands(options) {
         var item = options.item;
         var user = options.user;
 
@@ -583,7 +593,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
         });
     }
 
-    function show(options) {
+    export function show(options) {
         var commands = getCommands(options);
         if (!commands.length) {
             return Promise.reject();
@@ -598,8 +608,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
         });
     }
 
-    return {
-        getCommands: getCommands,
-        show: show
-    };
-});
+/* eslint-enable indent */
+
+export default {
+    getCommands: getCommands,
+    show: show
+};
diff --git a/src/components/maintabsmanager.js b/src/components/maintabsmanager.js
index e1c5434363..c73ebd97a8 100644
--- a/src/components/maintabsmanager.js
+++ b/src/components/maintabsmanager.js
@@ -1,5 +1,10 @@
-define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, browser, events) {
-    'use strict';
+import dom from 'dom';
+import browser from 'browser';
+import events from 'events';
+import 'emby-tabs';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     var tabOwnerView;
     var queryScope = document.querySelector('.skinHeader');
@@ -96,7 +101,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
         });
     }
 
-    function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) {
+    export function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) {
 
         var enableInFooter = enableTabsInFooter();
 
@@ -241,7 +246,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
         };
     }
 
-    function selectedTabIndex(index) {
+    export function selectedTabIndex(index) {
 
         var tabsContainerElem = headerTabsContainer;
 
@@ -256,13 +261,8 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
         }
     }
 
-    function getTabsElement() {
+    export function getTabsElement() {
         return document.querySelector('.tabs-viewmenubar');
     }
 
-    return {
-        setTabs: setTabs,
-        getTabsElement: getTabsElement,
-        selectedTabIndex: selectedTabIndex
-    };
-});
+/* eslint-enable indent */

From 5a1e01c650de030e28693ff80c046a85bb8b307f Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Wed, 8 Jul 2020 16:40:30 +0100
Subject: [PATCH 04/11] migrate emby-ratingbutton, scrollbuttons and select to
 ES6 modules

---
 package.json                                         |  3 +++
 src/elements/emby-ratingbutton/emby-ratingbutton.js  | 12 +++++++++---
 .../emby-scrollbuttons/emby-scrollbuttons.js         | 12 +++++++++---
 src/elements/emby-select/emby-select.js              | 12 +++++++++---
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 230eee3f21..668999bf7c 100644
--- a/package.json
+++ b/package.json
@@ -132,6 +132,9 @@
           "src/controllers/dashboard/logs.js",
           "src/controllers/user/subtitles.js",
           "src/controllers/dashboard/plugins/repositories.js",
+          "src/elements/emby-ratingbutton/emby-ratingbutton.js",
+          "src/elements/emby-scrollbuttons/emby-scrollbuttons.js",
+          "src/elements/emby-select/emby-select.js",
           "src/plugins/bookPlayer/plugin.js",
           "src/plugins/bookPlayer/tableOfContents.js",
           "src/plugins/photoPlayer/plugin.js",
diff --git a/src/elements/emby-ratingbutton/emby-ratingbutton.js b/src/elements/emby-ratingbutton/emby-ratingbutton.js
index 142920ca15..befaa497ab 100644
--- a/src/elements/emby-ratingbutton/emby-ratingbutton.js
+++ b/src/elements/emby-ratingbutton/emby-ratingbutton.js
@@ -1,5 +1,10 @@
-define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby-button'], function (connectionManager, serverNotifications, events, globalize, EmbyButtonPrototype) {
-    'use strict';
+import connectionManager from 'connectionManager';
+import serverNotifications from 'serverNotifications';
+import events from 'events';
+import globalize from 'globalize';
+import EmbyButtonPrototype from 'emby-button';
+
+/* eslint-disable indent */
 
     function addNotificationEvent(instance, name, handler) {
 
@@ -199,4 +204,5 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         prototype: EmbyRatingButtonPrototype,
         extends: 'button'
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js
index a4c37384c8..5052a2853a 100644
--- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js
+++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js
@@ -1,5 +1,10 @@
-define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', 'paper-icon-button-light'], function (layoutManager, dom) {
-    'use strict';
+import layoutManager from 'layoutManager';
+import dom from 'dom';
+import 'css!./emby-scrollbuttons';
+import 'registerElement';
+import 'paper-icon-button-light';
+
+/* eslint-disable indent */
 
     var EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
 
@@ -175,4 +180,5 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
         prototype: EmbyScrollButtonsPrototype,
         extends: 'div'
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/elements/emby-select/emby-select.js b/src/elements/emby-select/emby-select.js
index 2716967560..ae3c233363 100644
--- a/src/elements/emby-select/emby-select.js
+++ b/src/elements/emby-select/emby-select.js
@@ -1,5 +1,10 @@
-define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registerElement'], function (layoutManager, browser, actionsheet) {
-    'use strict';
+import layoutManager from 'layoutManager';
+import browser from 'browser';
+import actionsheet from 'actionsheet';
+import 'css!./emby-select';
+import 'registerElement';
+
+/* eslint-disable indent */
 
     var EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
 
@@ -159,4 +164,5 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
         prototype: EmbySelectPrototype,
         extends: 'select'
     });
-});
+
+/* eslint-enable indent */

From e3d95185743af27adfec7ff181bd50028e326109 Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Fri, 10 Jul 2020 19:56:24 +0100
Subject: [PATCH 05/11] remove rerquire and update var declerations

---
 src/components/itemContextMenu.js | 76 +++++++++++++++----------------
 src/components/maintabsmanager.js | 46 +++++++++----------
 2 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index 688ddd3490..010fe44c09 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -12,13 +12,13 @@ import actionsheet from 'actionsheet';
 /* eslint-disable indent */
 
     export function getCommands(options) {
-        var item = options.item;
-        var user = options.user;
+        const item = options.item;
+        const user = options.user;
 
-        var canPlay = playbackManager.canPlay(item);
-        var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
+        const canPlay = playbackManager.canPlay(item);
+        const restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
 
-        var commands = [];
+        let commands = [];
 
         if (canPlay && item.MediaType !== 'Photo') {
             if (options.play !== false) {
@@ -171,10 +171,10 @@ import actionsheet from 'actionsheet';
             });
         }
 
-        var canEdit = itemHelper.canEdit(user, item);
+        const canEdit = itemHelper.canEdit(user, item);
         if (canEdit) {
             if (options.edit !== false && item.Type !== 'SeriesTimer') {
-                var text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata');
+                const text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata');
                 commands.push({
                     name: text,
                     id: 'edit',
@@ -321,31 +321,31 @@ import actionsheet from 'actionsheet';
     }
 
     function executeCommand(item, id, options) {
-        var itemId = item.Id;
-        var serverId = item.ServerId;
-        var apiClient = connectionManager.getApiClient(serverId);
+        const itemId = item.Id;
+        const serverId = item.ServerId;
+        const apiClient = connectionManager.getApiClient(serverId);
 
         return new Promise(function (resolve, reject) {
             switch (id) {
                 case 'addtocollection':
-                    require(['collectionEditor'], function (collectionEditor) {
-                        new collectionEditor.showEditor({
+                    import('collectionEditor').then(({default: collectionEditor}) => {
+                        new collectionEditor({
                             items: [itemId],
                             serverId: serverId
                         }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'addtoplaylist':
-                    require(['playlistEditor'], function (playlistEditor) {
-                        new playlistEditor.showEditor({
+                    import('playlistEditor').then(({default: playlistEditor}) => {
+                        new playlistEditor({
                             items: [itemId],
                             serverId: serverId
                         }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'download':
-                    require(['fileDownloader'], function (fileDownloader) {
-                        var downloadHref = apiClient.getItemDownloadUrl(itemId);
+                    import('fileDownloader').then(({default: fileDownloader}) => {
+                        const downloadHref = apiClient.getItemDownloadUrl(itemId);
                         fileDownloader.download([{
                             url: downloadHref,
                             itemId: itemId,
@@ -357,16 +357,16 @@ import actionsheet from 'actionsheet';
                     });
                     break;
                 case 'copy-stream':
-                    var downloadHref = apiClient.getItemDownloadUrl(itemId);
-                    var textAreaCopy = function () {
-                        var textArea = document.createElement('textarea');
+                    const downloadHref = apiClient.getItemDownloadUrl(itemId);
+                    const textAreaCopy = function () {
+                        let textArea = document.createElement('textarea');
                         textArea.value = downloadHref;
                         document.body.appendChild(textArea);
                         textArea.focus();
                         textArea.select();
 
                         if (document.execCommand('copy')) {
-                            require(['toast'], function (toast) {
+                            import('toast').then(({default: toast}) => {
                                 toast(globalize.translate('CopyStreamURLSuccess'));
                             });
                         } else {
@@ -381,7 +381,7 @@ import actionsheet from 'actionsheet';
                     } else {
                         /* eslint-disable-next-line compat/compat */
                         navigator.clipboard.writeText(downloadHref).then(function () {
-                            require(['toast'], function (toast) {
+                            import('toast').then(({default: toast}) => {
                                 toast(globalize.translate('CopyStreamURLSuccess'));
                             });
                         }).catch(function () {
@@ -391,7 +391,7 @@ import actionsheet from 'actionsheet';
                     getResolveFunction(resolve, id)();
                     break;
                 case 'editsubtitles':
-                    require(['subtitleEditor'], function (subtitleEditor) {
+                    import('subtitleEditor').then(({default: subtitleEditor}) => {
                         subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
@@ -399,7 +399,7 @@ import actionsheet from 'actionsheet';
                     editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     break;
                 case 'editimages':
-                    require(['imageEditor'], function (imageEditor) {
+                    import('imageEditor').then(({default: imageEditor}) => {
                         imageEditor.show({
                             itemId: itemId,
                             serverId: serverId
@@ -407,12 +407,12 @@ import actionsheet from 'actionsheet';
                     });
                     break;
                 case 'identify':
-                    require(['itemIdentifier'], function (itemIdentifier) {
+                    import('itemIdentifier').then(({default:itemIdentifier }) => {
                         itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'moremediainfo':
-                    require(['itemMediaInfo'], function (itemMediaInfo) {
+                    import('itemMediaInfo').then(({default: itemMediaInfo}) => {
                         itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
                     });
                     break;
@@ -441,7 +441,7 @@ import actionsheet from 'actionsheet';
                     getResolveFunction(resolve, id)();
                     break;
                 case 'record':
-                    require(['recordingCreator'], function (recordingCreator) {
+                    import('recordingCreator').then(({default: recordingCreator}) => {
                         recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
@@ -512,8 +512,8 @@ import actionsheet from 'actionsheet';
     }
 
     function deleteTimer(apiClient, item, resolve, command) {
-        require(['recordingHelper'], function (recordingHelper) {
-            var timerId = item.TimerId || item.Id;
+        import('recordingHelper').then(({default: recordingHelper}) => {
+            const timerId = item.TimerId || item.Id;
             recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
             });
@@ -521,7 +521,7 @@ import actionsheet from 'actionsheet';
     }
 
     function deleteSeriesTimer(apiClient, item, resolve, command) {
-        require(['recordingHelper'], function (recordingHelper) {
+        import('recordingHelper').then(({default: recordingHelper}) => {
             recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
             });
@@ -529,9 +529,9 @@ import actionsheet from 'actionsheet';
     }
 
     function play(item, resume, queue, queueNext) {
-        var method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play';
+        const method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play';
 
-        var startPosition = 0;
+        let startPosition = 0;
         if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
             startPosition = item.UserData.PlaybackPositionTicks;
         }
@@ -552,18 +552,18 @@ import actionsheet from 'actionsheet';
 
     function editItem(apiClient, item) {
         return new Promise(function (resolve, reject) {
-            var serverId = apiClient.serverInfo().Id;
+            const serverId = apiClient.serverInfo().Id;
 
             if (item.Type === 'Timer') {
-                require(['recordingEditor'], function (recordingEditor) {
+                import('recordingEditor').then(({default: recordingEditor}) => {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             } else if (item.Type === 'SeriesTimer') {
-                require(['seriesRecordingEditor'], function (recordingEditor) {
+                import('seriesRecordingEditor').then(({default: recordingEditor}) => {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             } else {
-                require(['metadataEditor'], function (metadataEditor) {
+                import('metadataEditor').then(({default: metadataEditor}) => {
                     metadataEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             }
@@ -572,7 +572,7 @@ import actionsheet from 'actionsheet';
 
     function deleteItem(apiClient, item) {
         return new Promise(function (resolve, reject) {
-            require(['deleteHelper'], function (deleteHelper) {
+            import('deleteHelper').then(({default: deleteHelper}) => {
                 deleteHelper.deleteItem({
                     item: item,
                     navigate: false
@@ -584,7 +584,7 @@ import actionsheet from 'actionsheet';
     }
 
     function refresh(apiClient, item) {
-        require(['refreshDialog'], function (refreshDialog) {
+        import('refreshDialog').then(({default: refreshDialog}) => {
             new refreshDialog({
                 itemIds: [item.Id],
                 serverId: apiClient.serverInfo().Id,
@@ -594,7 +594,7 @@ import actionsheet from 'actionsheet';
     }
 
     export function show(options) {
-        var commands = getCommands(options);
+        const commands = getCommands(options);
         if (!commands.length) {
             return Promise.reject();
         }
diff --git a/src/components/maintabsmanager.js b/src/components/maintabsmanager.js
index c73ebd97a8..343670eb86 100644
--- a/src/components/maintabsmanager.js
+++ b/src/components/maintabsmanager.js
@@ -6,11 +6,11 @@ import 'emby-button';
 
 /* eslint-disable indent */
 
-    var tabOwnerView;
-    var queryScope = document.querySelector('.skinHeader');
-    var footerTabsContainer;
-    var headerTabsContainer;
-    var tabsElem;
+    let tabOwnerView;
+    const queryScope = document.querySelector('.skinHeader');
+    let footerTabsContainer;
+    let headerTabsContainer;
+    let tabsElem;
 
     function enableTabsInFooter() {
         return false;
@@ -49,7 +49,7 @@ import 'emby-button';
                 return false;
             }
 
-            var classList = elem.classList;
+            const classList = elem.classList;
             if (classList) {
                 return !classList.contains('scrollX') && !classList.contains('animatedScrollX');
             }
@@ -57,7 +57,7 @@ import 'emby-button';
             return true;
         }
 
-        var parent = target;
+        let parent = target;
         while (parent != null) {
             if (!allowSwipeOn(parent)) {
                 return false;
@@ -75,22 +75,22 @@ import 'emby-button';
         }
 
         // implement without hammer
-        var pageCount = getTabContainersFn().length;
-        var onSwipeLeft = function (e, target) {
+        const pageCount = getTabContainersFn().length;
+        onSwipeLeft = function (e, target) {
             if (allowSwipe(target) && view.contains(target)) {
                 tabsElem.selectNext();
             }
         };
 
-        var onSwipeRight = function (e, target) {
+        onSwipeRight = function (e, target) {
             if (allowSwipe(target) && view.contains(target)) {
                 tabsElem.selectPrevious();
             }
         };
 
-        require(['touchHelper'], function (TouchHelper) {
+        import('touchHelper').then(({default: TouchHelper}) => {
 
-            var touchHelper = new TouchHelper(view.parentNode.parentNode);
+            const touchHelper = new TouchHelper(view.parentNode.parentNode);
 
             events.on(touchHelper, 'swipeleft', onSwipeLeft);
             events.on(touchHelper, 'swiperight', onSwipeRight);
@@ -103,7 +103,7 @@ import 'emby-button';
 
     export function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) {
 
-        var enableInFooter = enableTabsInFooter();
+        const enableInFooter = enableTabsInFooter();
 
         if (!view) {
             if (tabOwnerView) {
@@ -134,7 +134,7 @@ import 'emby-button';
 
         ensureElements(enableInFooter);
 
-        var tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer;
+        const tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer;
 
         if (!tabOwnerView) {
             tabsContainerElem.classList.remove('hide');
@@ -142,18 +142,18 @@ import 'emby-button';
 
         if (tabOwnerView !== view) {
 
-            var index = 0;
+            let index = 0;
 
-            var indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"');
-            var tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
+            const indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"');
+            const tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
 
-                var tabClass = 'emby-tab-button';
+                let tabClass = 'emby-tab-button';
 
                 if (t.enabled === false) {
                     tabClass += ' hide';
                 }
 
-                var tabHtml;
+                let tabHtml;
 
                 if (t.cssClass) {
                     tabClass += ' ' + t.cssClass;
@@ -182,16 +182,16 @@ import 'emby-button';
 
             tabsElem.addEventListener('beforetabchange', function (e) {
 
-                var tabContainers = getTabContainersFn();
+                const tabContainers = getTabContainersFn();
                 if (e.detail.previousIndex != null) {
 
-                    var previousPanel = tabContainers[e.detail.previousIndex];
+                    const previousPanel = tabContainers[e.detail.previousIndex];
                     if (previousPanel) {
                         previousPanel.classList.remove('is-active');
                     }
                 }
 
-                var newPanel = tabContainers[e.detail.selectedTabIndex];
+                const newPanel = tabContainers[e.detail.selectedTabIndex];
 
                 //if (e.detail.previousIndex != null && e.detail.previousIndex != e.detail.selectedTabIndex) {
                 //    if (newPanel.animate && (animateTabs || []).indexOf(e.detail.selectedTabIndex) != -1) {
@@ -248,7 +248,7 @@ import 'emby-button';
 
     export function selectedTabIndex(index) {
 
-        var tabsContainerElem = headerTabsContainer;
+        const tabsContainerElem = headerTabsContainer;
 
         if (!tabsElem) {
             tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]');

From c18118275a8be8ba0767e03c0dd63c781b03a8ba Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Fri, 10 Jul 2020 19:57:42 +0100
Subject: [PATCH 06/11] define functions

---
 src/components/maintabsmanager.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/maintabsmanager.js b/src/components/maintabsmanager.js
index 343670eb86..0d31c2958a 100644
--- a/src/components/maintabsmanager.js
+++ b/src/components/maintabsmanager.js
@@ -76,13 +76,13 @@ import 'emby-button';
 
         // implement without hammer
         const pageCount = getTabContainersFn().length;
-        onSwipeLeft = function (e, target) {
+        const onSwipeLeft = function (e, target) {
             if (allowSwipe(target) && view.contains(target)) {
                 tabsElem.selectNext();
             }
         };
 
-        onSwipeRight = function (e, target) {
+        const onSwipeRight = function (e, target) {
             if (allowSwipe(target) && view.contains(target)) {
                 tabsElem.selectPrevious();
             }

From e31cae5af8704552328d864a3707a7ed0b4dac16 Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Sat, 11 Jul 2020 09:52:35 +0100
Subject: [PATCH 07/11] update variable declerations

---
 .../emby-ratingbutton/emby-ratingbutton.js    | 34 ++++++------
 .../emby-scrollbuttons/emby-scrollbuttons.js  | 54 +++++++++----------
 src/elements/emby-select/emby-select.js       | 23 ++++----
 3 files changed, 54 insertions(+), 57 deletions(-)

diff --git a/src/elements/emby-ratingbutton/emby-ratingbutton.js b/src/elements/emby-ratingbutton/emby-ratingbutton.js
index befaa497ab..b455495a2e 100644
--- a/src/elements/emby-ratingbutton/emby-ratingbutton.js
+++ b/src/elements/emby-ratingbutton/emby-ratingbutton.js
@@ -8,14 +8,14 @@ import EmbyButtonPrototype from 'emby-button';
 
     function addNotificationEvent(instance, name, handler) {
 
-        var localHandler = handler.bind(instance);
+        const localHandler = handler.bind(instance);
         events.on(serverNotifications, name, localHandler);
         instance[name] = localHandler;
     }
 
     function removeNotificationEvent(instance, name) {
 
-        var handler = instance[name];
+        const handler = instance[name];
         if (handler) {
             events.off(serverNotifications, name, handler);
             instance[name] = null;
@@ -29,13 +29,13 @@ import EmbyButtonPrototype from 'emby-button';
 
     function onClick(e) {
 
-        var button = this;
-        var id = button.getAttribute('data-id');
-        var serverId = button.getAttribute('data-serverid');
-        var apiClient = connectionManager.getApiClient(serverId);
+        const button = this;
+        const id = button.getAttribute('data-id');
+        const serverId = button.getAttribute('data-serverid');
+        const apiClient = connectionManager.getApiClient(serverId);
 
-        var likes = this.getAttribute('data-likes');
-        var isFavorite = this.getAttribute('data-isfavorite') === 'true';
+        let likes = this.getAttribute('data-likes');
+        const isFavorite = this.getAttribute('data-isfavorite') === 'true';
         if (likes === 'true') {
             likes = true;
         } else if (likes === 'false') {
@@ -52,7 +52,7 @@ import EmbyButtonPrototype from 'emby-button';
 
     function onUserDataChanged(e, apiClient, userData) {
 
-        var button = this;
+        const button = this;
 
         if (userData.ItemId === button.getAttribute('data-id')) {
 
@@ -62,7 +62,7 @@ import EmbyButtonPrototype from 'emby-button';
 
     function setState(button, likes, isFavorite, updateAttribute) {
 
-        var icon = button.querySelector('.material-icons');
+        const icon = button.querySelector('.material-icons');
 
         if (isFavorite) {
 
@@ -111,7 +111,7 @@ import EmbyButtonPrototype from 'emby-button';
     function setTitle(button) {
         button.title = globalize.translate('Favorite');
 
-        var text = button.querySelector('.button-text');
+        const text = button.querySelector('.button-text');
         if (text) {
             text.innerHTML = button.title;
         }
@@ -131,7 +131,7 @@ import EmbyButtonPrototype from 'emby-button';
         addNotificationEvent(button, 'UserDataChanged', onUserDataChanged);
     }
 
-    var EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype);
+    const EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype);
 
     EmbyRatingButtonPrototype.createdCallback = function () {
 
@@ -148,12 +148,12 @@ import EmbyButtonPrototype from 'emby-button';
             EmbyButtonPrototype.attachedCallback.call(this);
         }
 
-        var itemId = this.getAttribute('data-id');
-        var serverId = this.getAttribute('data-serverid');
+        const itemId = this.getAttribute('data-id');
+        const serverId = this.getAttribute('data-serverid');
         if (itemId && serverId) {
 
-            var likes = this.getAttribute('data-likes');
-            var isFavorite = this.getAttribute('data-isfavorite') === 'true';
+            let likes = this.getAttribute('data-likes');
+            const isFavorite = this.getAttribute('data-isfavorite') === 'true';
             if (likes === 'true') {
                 likes = true;
             } else if (likes === 'false') {
@@ -186,7 +186,7 @@ import EmbyButtonPrototype from 'emby-button';
             this.setAttribute('data-id', item.Id);
             this.setAttribute('data-serverid', item.ServerId);
 
-            var userData = item.UserData || {};
+            const userData = item.UserData || {};
             setState(this, userData.Likes, userData.IsFavorite);
             bindEvents(this);
 
diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js
index 5052a2853a..b4b0ffb3b9 100644
--- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js
+++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js
@@ -6,13 +6,13 @@ import 'paper-icon-button-light';
 
 /* eslint-disable indent */
 
-    var EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
+const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
 
     EmbyScrollButtonsPrototype.createdCallback = function () {};
 
     function getScrollButtonHtml(direction) {
-        var html = '';
-        var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
+        let html = '';
+        const icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
 
         html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
         html += '<span class="material-icons ' + icon + '"></span>';
@@ -50,7 +50,7 @@ import 'paper-icon-button-light';
             scrollButtons.scrollButtonsLeft.disabled = true;
         }
 
-        var scrollPosEnd = scrollPos + scrollSize;
+        const scrollPosEnd = scrollPos + scrollSize;
         if (scrollWidth > 0 && scrollPosEnd >= scrollWidth) {
             scrollButtons.scrollButtonsRight.disabled = true;
         } else {
@@ -59,18 +59,18 @@ import 'paper-icon-button-light';
     }
 
     function onScroll(e) {
-        var scrollButtons = this;
-        var scroller = this.scroller;
+        const scrollButtons = this;
+        const scroller = this.scroller;
 
-        var scrollSize = getScrollSize(scroller);
-        var scrollPos = getScrollPosition(scroller);
-        var scrollWidth = getScrollWidth(scroller);
+        const scrollSize = getScrollSize(scroller);
+        const scrollPos = getScrollPosition(scroller);
+        const scrollWidth = getScrollWidth(scroller);
 
         updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth);
     }
 
     function getStyleValue(style, name) {
-        var value = style.getPropertyValue(name);
+        let value = style.getPropertyValue(name);
         if (!value) {
             return 0;
         }
@@ -89,20 +89,20 @@ import 'paper-icon-button-light';
     }
 
     function getScrollSize(elem) {
-        var scrollSize = elem.offsetWidth;
-        var style = window.getComputedStyle(elem, null);
+        let scrollSize = elem.offsetWidth;
+        let style = window.getComputedStyle(elem, null);
 
-        var paddingLeft = getStyleValue(style, 'padding-left');
+        let paddingLeft = getStyleValue(style, 'padding-left');
         if (paddingLeft) {
             scrollSize -= paddingLeft;
         }
 
-        var paddingRight = getStyleValue(style, 'padding-right');
+        let paddingRight = getStyleValue(style, 'padding-right');
         if (paddingRight) {
             scrollSize -= paddingRight;
         }
 
-        var slider = elem.getScrollSlider();
+        const slider = elem.getScrollSlider();
         style = window.getComputedStyle(slider, null);
 
         paddingLeft = getStyleValue(style, 'padding-left');
@@ -119,14 +119,14 @@ import 'paper-icon-button-light';
     }
 
     function onScrollButtonClick(e) {
-        var scroller = this.parentNode.nextSibling;
+        let scroller = this.parentNode.nextSibling;
 
-        var direction = this.getAttribute('data-direction');
-        var scrollSize = getScrollSize(scroller);
-        var scrollPos = getScrollPosition(scroller);
-        var scrollWidth = getScrollWidth(scroller);
+        const direction = this.getAttribute('data-direction');
+        const scrollSize = getScrollSize(scroller);
+        const scrollPos = getScrollPosition(scroller);
+        const scrollWidth = getScrollWidth(scroller);
 
-        var newPos;
+        let newPos;
         if (direction === 'left') {
             newPos = Math.max(0, scrollPos - scrollSize);
         } else {
@@ -137,21 +137,21 @@ import 'paper-icon-button-light';
     }
 
     EmbyScrollButtonsPrototype.attachedCallback = function () {
-        var scroller = this.nextSibling;
+        const scroller = this.nextSibling;
         this.scroller = scroller;
 
-        var parent = this.parentNode;
+        const parent = this.parentNode;
         parent.classList.add('emby-scroller-container');
 
         this.innerHTML = getScrollButtonHtml('left') + getScrollButtonHtml('right');
 
-        var buttons = this.querySelectorAll('.emby-scrollbuttons-button');
+        const buttons = this.querySelectorAll('.emby-scrollbuttons-button');
         buttons[0].addEventListener('click', onScrollButtonClick);
         buttons[1].addEventListener('click', onScrollButtonClick);
         this.scrollButtonsLeft = buttons[0];
         this.scrollButtonsRight = buttons[1];
 
-        var scrollHandler = onScroll.bind(this);
+        const scrollHandler = onScroll.bind(this);
         this.scrollHandler = scrollHandler;
         scroller.addScrollEventListener(scrollHandler, {
             capture: false,
@@ -160,10 +160,10 @@ import 'paper-icon-button-light';
     };
 
     EmbyScrollButtonsPrototype.detachedCallback = function () {
-        var parent = this.scroller;
+        const parent = this.scroller;
         this.scroller = null;
 
-        var scrollHandler = this.scrollHandler;
+        let scrollHandler = this.scrollHandler;
         if (parent && scrollHandler) {
             parent.removeScrollEventListener(scrollHandler, {
                 capture: false,
diff --git a/src/elements/emby-select/emby-select.js b/src/elements/emby-select/emby-select.js
index ae3c233363..cba9b8da7c 100644
--- a/src/elements/emby-select/emby-select.js
+++ b/src/elements/emby-select/emby-select.js
@@ -6,7 +6,7 @@ import 'registerElement';
 
 /* eslint-disable indent */
 
-    var EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
+    const EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
 
     function enableNativeMenu() {
 
@@ -32,7 +32,7 @@ import 'registerElement';
     }
 
     function triggerChange(select) {
-        var evt = document.createEvent('HTMLEvents');
+        const evt = document.createEvent('HTMLEvents');
         evt.initEvent('change', false, true);
         select.dispatchEvent(evt);
     }
@@ -44,8 +44,8 @@ import 'registerElement';
 
     function showActionSheet(select) {
 
-        var labelElem = getLabel(select);
-        var title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
+        const labelElem = getLabel(select);
+        const title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
 
         actionsheet.show({
             items: select.options,
@@ -59,7 +59,7 @@ import 'registerElement';
     }
 
     function getLabel(select) {
-        var elem = select.previousSibling;
+        let elem = select.previousSibling;
         while (elem && elem.tagName !== 'LABEL') {
             elem = elem.previousSibling;
         }
@@ -67,21 +67,20 @@ import 'registerElement';
     }
 
     function onFocus(e) {
-        var label = getLabel(this);
+        const label = getLabel(this);
         if (label) {
             label.classList.add('selectLabelFocused');
         }
     }
 
     function onBlur(e) {
-        var label = getLabel(this);
+        const label = getLabel(this);
         if (label) {
             label.classList.remove('selectLabelFocused');
         }
     }
 
     function onMouseDown(e) {
-
         // e.button=0 for primary (left) mouse button click
         if (!e.button && !enableNativeMenu()) {
             e.preventDefault();
@@ -90,9 +89,7 @@ import 'registerElement';
     }
 
     function onKeyDown(e) {
-
         switch (e.keyCode) {
-
             case 13:
                 if (!enableNativeMenu()) {
                     e.preventDefault();
@@ -112,7 +109,7 @@ import 'registerElement';
         }
     }
 
-    var inputId = 0;
+    let inputId = 0;
 
     EmbySelectPrototype.createdCallback = function () {
 
@@ -142,7 +139,7 @@ import 'registerElement';
 
         this.classList.add('emby-select');
 
-        var label = this.ownerDocument.createElement('label');
+        const label = this.ownerDocument.createElement('label');
         label.innerHTML = this.getAttribute('label') || '';
         label.classList.add('selectLabel');
         label.htmlFor = this.id;
@@ -155,7 +152,7 @@ import 'registerElement';
 
     EmbySelectPrototype.setLabel = function (text) {
 
-        var label = this.parentNode.querySelector('label');
+        const label = this.parentNode.querySelector('label');
 
         label.innerHTML = text;
     };

From b47cf2cd042d097c821b95efff2790845872c7ff Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Sat, 11 Jul 2020 18:39:36 +0900
Subject: [PATCH 08/11] fix spacing

---
 src/components/itemContextMenu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index 010fe44c09..b66e8a0703 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -407,7 +407,7 @@ import actionsheet from 'actionsheet';
                     });
                     break;
                 case 'identify':
-                    import('itemIdentifier').then(({default:itemIdentifier }) => {
+                    import('itemIdentifier').then(({default: itemIdentifier}) => {
                         itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;

From 4e3e2d1428672f33fcdccf0ce4a79491b20cb098 Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Thu, 9 Jul 2020 11:22:21 +0100
Subject: [PATCH 09/11] migration of apikeys, dashboard and encodingsettings to
 ES6 modules

---
 package.json                                  |  3 ++
 src/controllers/dashboard/apikeys.js          | 17 +++++---
 src/controllers/dashboard/dashboard.js        | 42 ++++++++++++++-----
 src/controllers/dashboard/encodingsettings.js | 22 ++++++----
 4 files changed, 61 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 230eee3f21..1e687d7f4f 100644
--- a/package.json
+++ b/package.json
@@ -129,6 +129,9 @@
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
+          "src/controllers/dashboard/apikeys.js",
+          "src/controllers/dashboard/dashboard.js",
+          "src/controllers/dashboard/encodingsettings.js",
           "src/controllers/dashboard/logs.js",
           "src/controllers/user/subtitles.js",
           "src/controllers/dashboard/plugins/repositories.js",
diff --git a/src/controllers/dashboard/apikeys.js b/src/controllers/dashboard/apikeys.js
index f43bfd0329..8c68a2e93b 100644
--- a/src/controllers/dashboard/apikeys.js
+++ b/src/controllers/dashboard/apikeys.js
@@ -1,8 +1,14 @@
-define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'], function (datetime, loading, libraryMenu, dom, globalize) {
-    'use strict';
+import datetime from 'datetime';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import dom from 'dom';
+import globalize from 'globalize';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function revoke(page, key) {
-        require(['confirm'], function (confirm) {
+        import('confirm').then(({default: confirm}) => {
             confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () {
                 loading.show();
                 ApiClient.ajax({
@@ -46,7 +52,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
     }
 
     function showNewKeyPrompt(page) {
-        require(['prompt'], function (prompt) {
+        import('prompt').then(({default: prompt}) => {
             prompt({
                 title: globalize.translate('HeaderNewApiKey'),
                 label: globalize.translate('LabelAppName'),
@@ -80,4 +86,5 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
     pageIdOn('pagebeforeshow', 'apiKeysPage', function () {
         loadData(this);
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 6a378903d3..55e24f49d5 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -1,8 +1,29 @@
-define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'loading', 'connectionManager', 'playMethodHelper', 'cardBuilder', 'imageLoader', 'components/activitylog', 'scripts/imagehelper', 'indicators', 'listViewStyle', 'emby-button', 'flexStyles', 'emby-button', 'emby-itemscontainer'], function (datetime, events, itemHelper, serverNotifications, dom, globalize, datefns, dfnshelper, loading, connectionManager, playMethodHelper, cardBuilder, imageLoader, ActivityLog, imageHelper, indicators) {
-    'use strict';
+import datetime from 'datetime';
+import events from 'events';
+import itemHelper from 'itemHelper';
+import serverNotifications from 'serverNotifications';
+import dom from 'dom';
+import globalize from 'globalize';
+import * as datefns from 'date-fns';
+import dfnshelper from 'dfnshelper';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
+import playMethodHelper from 'playMethodHelper';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import ActivityLog from 'components/activitylog';
+import imageHelper from 'scripts/imagehelper';
+import indicators from 'indicators';
+import 'listViewStyle';
+import 'emby-button';
+import 'flexStyles';
+import 'emby-button';
+import 'emby-itemscontainer';
+
+/* eslint-disable indent */
 
     function showPlaybackInfo(btn, session) {
-        require(['alert'], function (alert) {
+        import('alert').then(({default: Alert}) => {
             var title;
             var text = [];
             var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
@@ -33,7 +54,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
     }
 
     function showSendMessageForm(btn, session) {
-        require(['prompt'], function (prompt) {
+        import('prompt').then(({default: prompt}) => {
             prompt({
                 title: globalize.translate('HeaderSendMessage'),
                 label: globalize.translate('LabelMessageText'),
@@ -50,7 +71,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
     }
 
     function showOptionsMenu(btn, session) {
-        require(['actionsheet'], function (actionsheet) {
+        import('actionsheet').then(({default: actionsheet}) => {
             var menuItems = [];
 
             if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) {
@@ -706,7 +727,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             });
         },
         restart: function (btn) {
-            require(['confirm'], function (confirm) {
+            import('confirm').then(({default: confirm}) => {
                 confirm({
                     title: globalize.translate('HeaderRestart'),
                     text: globalize.translate('MessageConfirmRestart'),
@@ -721,7 +742,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             });
         },
         shutdown: function (btn) {
-            require(['confirm'], function (confirm) {
+            import('confirm').then(({default: confirm}) => {
                 confirm({
                     title: globalize.translate('HeaderShutdown'),
                     text: globalize.translate('MessageConfirmShutdown'),
@@ -736,7 +757,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             });
         }
     };
-    return function (view, params) {
+    export default function (view, params) {
         function onRestartRequired(evt, apiClient) {
             console.debug('onRestartRequired not implemented', evt, apiClient);
         }
@@ -843,5 +864,6 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 serverActivityLog.destroy();
             }
         });
-    };
-});
+    }
+
+/* eslint-enable indent */
diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js
index 0f54f9d70f..fd91db4bb4 100644
--- a/src/controllers/dashboard/encodingsettings.js
+++ b/src/controllers/dashboard/encodingsettings.js
@@ -1,5 +1,10 @@
-define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, loading, globalize, dom, libraryMenu) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import globalize from 'globalize';
+import dom from 'dom';
+import libraryMenu from 'libraryMenu';
+
+/* eslint-disable indent */
 
     function loadPage(page, config, systemInfo) {
         Array.prototype.forEach.call(page.querySelectorAll('.chkDecodeCodec'), function (c) {
@@ -30,7 +35,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
         var msg = '';
         msg = globalize.translate('FFmpegSavePathNotFound');
 
-        require(['alert'], function (alert) {
+        import('alert').then(({default: alert}) => {
             alert(msg);
         });
     }
@@ -75,7 +80,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
                 ApiClient.updateNamedConfiguration('encoding', config).then(function () {
                     updateEncoder(form);
                 }, function () {
-                    require(['alert'], function (alert) {
+                    import('alert').then(({default: alert}) => {
                         alert(globalize.translate('DefaultErrorMessage'));
                     });
 
@@ -85,7 +90,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
         };
 
         if ($('#selectVideoDecoder', form).val()) {
-            require(['alert'], function (alert) {
+            import('alert').then(({default: alert}) => {
                 alert({
                     title: globalize.translate('TitleHardwareAcceleration'),
                     text: globalize.translate('HardwareAccelerationWarning')
@@ -150,7 +155,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
             setDecodingCodecsVisible(page, this.value);
         });
         $('#btnSelectEncoderPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
+            import('directorybrowser').then(({default: directoryBrowser}) => {
                 var picker = new directoryBrowser();
                 picker.show({
                     includeFiles: true,
@@ -165,7 +170,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
             });
         });
         $('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
+            import('directorybrowser').then(({default: directoryBrowser}) => {
                 var picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
@@ -192,4 +197,5 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
             });
         });
     });
-});
+
+/* eslint-enable indent */

From c62ad4ae833f703cc03779f2a81310e4980c6eda Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Sat, 11 Jul 2020 11:56:57 +0100
Subject: [PATCH 10/11] Update variable declerations

---
 src/controllers/dashboard/apikeys.js          |  10 +-
 src/controllers/dashboard/dashboard.js        | 141 +++++++++---------
 src/controllers/dashboard/encodingsettings.js |  16 +-
 3 files changed, 83 insertions(+), 84 deletions(-)

diff --git a/src/controllers/dashboard/apikeys.js b/src/controllers/dashboard/apikeys.js
index 8c68a2e93b..0e122c486d 100644
--- a/src/controllers/dashboard/apikeys.js
+++ b/src/controllers/dashboard/apikeys.js
@@ -22,8 +22,8 @@ import 'emby-button';
     }
 
     function renderKeys(page, keys) {
-        var rows = keys.map(function (item) {
-            var html = '';
+        const rows = keys.map(function (item) {
+            let html = '';
             html += '<tr class="detailTableBodyRow detailTableBodyRow-shaded">';
             html += '<td class="detailTableBodyCell">';
             html += '<button type="button" is="emby-button" data-token="' + item.AccessToken + '" class="raised raised-mini btnRevoke" data-mini="true" title="' + globalize.translate('ButtonRevoke') + '" style="margin:0;">' + globalize.translate('ButtonRevoke') + '</button>';
@@ -35,7 +35,7 @@ import 'emby-button';
             html += item.AppName || '';
             html += '</td>';
             html += '<td class="detailTableBodyCell" style="vertical-align:middle;">';
-            var date = datetime.parseISO8601Date(item.DateCreated, true);
+            const date = datetime.parseISO8601Date(item.DateCreated, true);
             html += datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
             html += '</td>';
             return html += '</tr>';
@@ -71,12 +71,12 @@ import 'emby-button';
     }
 
     pageIdOn('pageinit', 'apiKeysPage', function () {
-        var page = this;
+        const page = this;
         page.querySelector('.btnNewKey').addEventListener('click', function () {
             showNewKeyPrompt(page);
         });
         page.querySelector('.tblApiKeys').addEventListener('click', function (e) {
-            var btnRevoke = dom.parentWithClass(e.target, 'btnRevoke');
+            const btnRevoke = dom.parentWithClass(e.target, 'btnRevoke');
 
             if (btnRevoke) {
                 revoke(page, btnRevoke.getAttribute('data-token'));
diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 55e24f49d5..7aa706840d 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -17,16 +17,15 @@ import indicators from 'indicators';
 import 'listViewStyle';
 import 'emby-button';
 import 'flexStyles';
-import 'emby-button';
 import 'emby-itemscontainer';
 
 /* eslint-disable indent */
 
     function showPlaybackInfo(btn, session) {
-        import('alert').then(({default: Alert}) => {
-            var title;
-            var text = [];
-            var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
+        import('alert').then(({default: alert}) => {
+            let title;
+            let text = [];
+            const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
 
             if (displayPlayMethod === 'DirectStream') {
                 title = globalize.translate('DirectStreaming');
@@ -72,7 +71,7 @@ import 'emby-itemscontainer';
 
     function showOptionsMenu(btn, session) {
         import('actionsheet').then(({default: actionsheet}) => {
-            var menuItems = [];
+            const menuItems = [];
 
             if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) {
                 menuItems.push({
@@ -105,14 +104,14 @@ import 'emby-itemscontainer';
     }
 
     function onActiveDevicesClick(evt) {
-        var btn = dom.parentWithClass(evt.target, 'sessionCardButton');
+        const btn = dom.parentWithClass(evt.target, 'sessionCardButton');
 
         if (btn) {
-            var card = dom.parentWithClass(btn, 'card');
+            const card = dom.parentWithClass(btn, 'card');
 
             if (card) {
-                var sessionId = card.id;
-                var session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) {
+                const sessionId = card.id;
+                const session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) {
                     return 'session' + dashboardSession.Id === sessionId;
                 })[0];
 
@@ -134,11 +133,11 @@ import 'emby-itemscontainer';
     }
 
     function filterSessions(sessions) {
-        var list = [];
-        var minActiveDate = new Date().getTime() - 9e5;
+        const list = [];
+        const minActiveDate = new Date().getTime() - 9e5;
 
-        for (var i = 0, length = sessions.length; i < length; i++) {
-            var session = sessions[i];
+        for (let i = 0, length = sessions.length; i < length; i++) {
+            const session = sessions[i];
 
             if (!session.NowPlayingItem && !session.UserId) {
                 continue;
@@ -160,7 +159,7 @@ import 'emby-itemscontainer';
             EnableTotalRecordCount: false,
             EnableImageTypes: 'Primary,Thumb,Backdrop'
         }).then(function (result) {
-            var itemsContainer = view.querySelector('.activeRecordingItems');
+            const itemsContainer = view.querySelector('.activeRecordingItems');
 
             if (!result.Items.length) {
                 view.querySelector('.activeRecordingsSection').classList.add('hide');
@@ -190,7 +189,7 @@ import 'emby-itemscontainer';
     function reloadSystemInfo(view, apiClient) {
         apiClient.getSystemInfo().then(function (systemInfo) {
             view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
-            var localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version);
+            let localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version);
 
             if (systemInfo.SystemUpdateLevel !== 'Release') {
                 localizedVersion += ' ' + systemInfo.SystemUpdateLevel;
@@ -226,31 +225,31 @@ import 'emby-itemscontainer';
     }
 
     function renderActiveConnections(view, sessions) {
-        var html = '';
+        let html = '';
         DashboardPage.sessionsList = sessions;
-        var parentElement = view.querySelector('.activeDevices');
-        var cardElem = parentElement.querySelector('.card');
+        const parentElement = view.querySelector('.activeDevices');
+        const cardElem = parentElement.querySelector('.card');
 
         if (cardElem) {
             cardElem.classList.add('deadSession');
         }
 
-        for (var i = 0, length = sessions.length; i < length; i++) {
-            var session = sessions[i];
-            var rowId = 'session' + session.Id;
-            var elem = view.querySelector('#' + rowId);
+        for (let i = 0, length = sessions.length; i < length; i++) {
+            const session = sessions[i];
+            const rowId = 'session' + session.Id;
+            const elem = view.querySelector('#' + rowId);
 
             if (elem) {
                 DashboardPage.updateSession(elem, session);
             } else {
-                var nowPlayingItem = session.NowPlayingItem;
-                var className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
+                const nowPlayingItem = session.NowPlayingItem;
+                const className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
                 html += '<div class="' + className + '" id="' + rowId + '">';
                 html += '<div class="cardBox visualCardBox">';
                 html += '<div class="cardScalable visualCardBox-cardScalable">';
                 html += '<div class="cardPadder cardPadder-backdrop"></div>';
                 html += '<div class="cardContent">';
-                var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
+                const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
 
                 if (imgUrl) {
                     html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';
@@ -261,7 +260,7 @@ import 'emby-itemscontainer';
 
                 html += '<div class="sessionNowPlayingInnerContent">';
                 html += '<div class="sessionAppInfo">';
-                var clientImage = DashboardPage.getClientImage(session);
+                const clientImage = DashboardPage.getClientImage(session);
 
                 if (clientImage) {
                     html += clientImage;
@@ -274,7 +273,7 @@ import 'emby-itemscontainer';
                 html += '</div>';
 
                 html += '<div class="sessionNowPlayingDetails">';
-                var nowPlayingName = DashboardPage.getNowPlayingName(session);
+                const nowPlayingName = DashboardPage.getNowPlayingName(session);
                 html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
                 html += nowPlayingName.html;
                 html += '</div>';
@@ -282,7 +281,7 @@ import 'emby-itemscontainer';
                 html += '</div>';
 
                 if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
-                    var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
+                    const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
                     html += indicators.getProgressHtml(percent, {
                         containerClass: 'playbackProgress'
                     });
@@ -294,7 +293,7 @@ import 'emby-itemscontainer';
                 }
 
                 if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
-                    var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
+                    const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
                     html += indicators.getProgressHtml(percent, {
                         containerClass: 'transcodingProgress'
                     });
@@ -311,7 +310,7 @@ import 'emby-itemscontainer';
                 html += '<div class="sessionCardFooter cardFooter">';
                 html += '<div class="sessionCardButtons flex align-items-center justify-content-center">';
 
-                var btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide';
+                let btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide';
                 const playIcon = session.PlayState.IsPaused ? 'pause' : 'play_arrow';
 
                 html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><span class="material-icons ' + playIcon + '"></span></button>';
@@ -329,7 +328,7 @@ import 'emby-itemscontainer';
                 html += '</div>';
 
                 html += '<div class="flex align-items-center justify-content-center">';
-                var userImage = DashboardPage.getUserImage(session);
+                const userImage = DashboardPage.getUserImage(session);
                 html += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>';
                 html += '<div class="sessionUserName">';
                 html += DashboardPage.getUsersHtml(session);
@@ -343,7 +342,7 @@ import 'emby-itemscontainer';
         }
 
         parentElement.insertAdjacentHTML('beforeend', html);
-        var deadSessionElem = parentElement.querySelector('.deadSession');
+        const deadSessionElem = parentElement.querySelector('.deadSession');
 
         if (deadSessionElem) {
             deadSessionElem.parentNode.removeChild(deadSessionElem);
@@ -351,7 +350,7 @@ import 'emby-itemscontainer';
     }
 
     function renderRunningTasks(view, tasks) {
-        var html = '';
+        let html = '';
         tasks = tasks.filter(function (task) {
             if ('Idle' != task.State) {
                 return !task.IsHidden;
@@ -366,13 +365,13 @@ import 'emby-itemscontainer';
             view.querySelector('.runningTasksContainer').classList.add('hide');
         }
 
-        for (var i = 0, length = tasks.length; i < length; i++) {
-            var task = tasks[i];
+        for (let i = 0, length = tasks.length; i < length; i++) {
+            const task = tasks[i];
             html += '<p>';
             html += task.Name + '<br/>';
 
             if (task.State === 'Running') {
-                var progress = (task.CurrentProgressPercentage || 0).toFixed(1);
+                const progress = (task.CurrentProgressPercentage || 0).toFixed(1);
                 html += '<progress max="100" value="' + progress + '" title="' + progress + '%">';
                 html += progress + '%';
                 html += '</progress>';
@@ -398,9 +397,9 @@ import 'emby-itemscontainer';
             apiClient.sendMessage('ScheduledTasksInfoStop');
         },
         getSessionNowPlayingStreamInfo: function (session) {
-            var html = '';
-            var showTranscodingInfo = false;
-            var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
+            let html = '';
+            let showTranscodingInfo = false;
+            const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
 
             if (displayPlayMethod === 'DirectStream') {
                 html += globalize.translate('DirectStreaming');
@@ -417,7 +416,7 @@ import 'emby-itemscontainer';
             }
 
             if (showTranscodingInfo) {
-                var line = [];
+                const line = [];
 
                 if (session.TranscodingInfo) {
                     if (session.TranscodingInfo.Bitrate) {
@@ -449,8 +448,8 @@ import 'emby-itemscontainer';
             return html;
         },
         getSessionNowPlayingTime: function (session) {
-            var nowPlayingItem = session.NowPlayingItem;
-            var html = '';
+            const nowPlayingItem = session.NowPlayingItem;
+            let html = '';
 
             if (nowPlayingItem) {
                 if (session.PlayState.PositionTicks) {
@@ -474,8 +473,8 @@ import 'emby-itemscontainer';
             return session.Client + ' ' + session.ApplicationVersion;
         },
         getNowPlayingName: function (session) {
-            var imgUrl = '';
-            var nowPlayingItem = session.NowPlayingItem;
+            let imgUrl = '';
+            const nowPlayingItem = session.NowPlayingItem;
             // FIXME: It seems that, sometimes, server sends date in the future, so date-fns displays messages like 'in less than a minute'. We should fix
             // how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences
             if (!nowPlayingItem) {
@@ -485,8 +484,8 @@ import 'emby-itemscontainer';
                 };
             }
 
-            var topText = itemHelper.getDisplayName(nowPlayingItem);
-            var bottomText = '';
+            let topText = itemHelper.getDisplayName(nowPlayingItem);
+            let bottomText = '';
 
             if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
                 bottomText = topText;
@@ -526,13 +525,13 @@ import 'emby-itemscontainer';
             };
         },
         getUsersHtml: function (session) {
-            var html = [];
+            const html = [];
 
             if (session.UserId) {
                 html.push(session.UserName);
             }
 
-            for (var i = 0, length = session.AdditionalUsers.length; i < length; i++) {
+            for (let i = 0, length = session.AdditionalUsers.length; i < length; i++) {
                 html.push(session.AdditionalUsers[i].UserName);
             }
 
@@ -550,7 +549,7 @@ import 'emby-itemscontainer';
         },
         updateSession: function (row, session) {
             row.classList.remove('deadSession');
-            var nowPlayingItem = session.NowPlayingItem;
+            const nowPlayingItem = session.NowPlayingItem;
 
             if (nowPlayingItem) {
                 row.classList.add('playingSession');
@@ -570,7 +569,7 @@ import 'emby-itemscontainer';
                 row.querySelector('.btnSessionInfo').classList.add('hide');
             }
 
-            var btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
+            const btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
 
             if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId()) {
                 btnSessionPlayPause.classList.remove('hide');
@@ -588,18 +587,18 @@ import 'emby-itemscontainer';
             row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session);
             row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
             row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session);
-            var nowPlayingName = DashboardPage.getNowPlayingName(session);
-            var nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
+            const nowPlayingName = DashboardPage.getNowPlayingName(session);
+            const nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
 
             if (!(nowPlayingName.image && nowPlayingName.image == nowPlayingInfoElem.getAttribute('data-imgsrc'))) {
                 nowPlayingInfoElem.innerHTML = nowPlayingName.html;
                 nowPlayingInfoElem.setAttribute('data-imgsrc', nowPlayingName.image || '');
             }
 
-            var playbackProgressElem = row.querySelector('.playbackProgress');
+            const playbackProgressElem = row.querySelector('.playbackProgress');
 
             if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
-                var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
+                const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
                 playbackProgressElem.outerHTML = indicators.getProgressHtml(percent, {
                     containerClass: 'playbackProgress'
                 });
@@ -609,10 +608,10 @@ import 'emby-itemscontainer';
                 });
             }
 
-            var transcodingProgress = row.querySelector('.transcodingProgress');
+            const transcodingProgress = row.querySelector('.transcodingProgress');
 
             if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
-                var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
+                const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
                 transcodingProgress.outerHTML = indicators.getProgressHtml(percent, {
                     containerClass: 'transcodingProgress'
                 });
@@ -622,8 +621,8 @@ import 'emby-itemscontainer';
                 });
             }
 
-            var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
-            var imgElem = row.querySelector('.sessionNowPlayingContent');
+            const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
+            const imgElem = row.querySelector('.sessionNowPlayingContent');
 
             if (imgUrl != imgElem.getAttribute('data-src')) {
                 imgElem.style.backgroundImage = imgUrl ? "url('" + imgUrl + "')" : '';
@@ -637,7 +636,7 @@ import 'emby-itemscontainer';
             }
         },
         getClientImage: function (connection) {
-            var iconUrl = imageHelper.getDeviceIcon(connection);
+            const iconUrl = imageHelper.getDeviceIcon(connection);
             return "<img src='" + iconUrl + "' />";
         },
         getNowPlayingImageUrl: function (item) {
@@ -667,7 +666,7 @@ import 'emby-itemscontainer';
                 });
             }
 
-            var imageTags = (item || {}).ImageTags || {};
+            const imageTags = (item || {}).ImageTags || {};
 
             if (item && imageTags.Thumb) {
                 return ApiClient.getScaledImageUrl(item.Id, {
@@ -721,7 +720,7 @@ import 'emby-itemscontainer';
         },
         systemUpdateTaskKey: 'SystemUpdateTask',
         stopTask: function (btn, id) {
-            var page = dom.parentWithClass(btn, 'page');
+            const page = dom.parentWithClass(btn, 'page');
             ApiClient.stopScheduledTask(id).then(function () {
                 pollForInfo(page, ApiClient);
             });
@@ -734,7 +733,7 @@ import 'emby-itemscontainer';
                     confirmText: globalize.translate('ButtonRestart'),
                     primary: 'delete'
                 }).then(function () {
-                    var page = dom.parentWithClass(btn, 'page');
+                    const page = dom.parentWithClass(btn, 'page');
                     page.querySelector('#btnRestartServer').disabled = true;
                     page.querySelector('#btnShutdown').disabled = true;
                     ApiClient.restartServer();
@@ -749,7 +748,7 @@ import 'emby-itemscontainer';
                     confirmText: globalize.translate('ButtonShutdown'),
                     primary: 'delete'
                 }).then(function () {
-                    var page = dom.parentWithClass(btn, 'page');
+                    const page = dom.parentWithClass(btn, 'page');
                     page.querySelector('#btnRestartServer').disabled = true;
                     page.querySelector('#btnShutdown').disabled = true;
                     ApiClient.shutdownServer();
@@ -796,11 +795,11 @@ import 'emby-itemscontainer';
             }
         }
 
-        var serverId = ApiClient.serverId();
+        const serverId = ApiClient.serverId();
         view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick);
         view.addEventListener('viewshow', function () {
-            var page = this;
-            var apiClient = ApiClient;
+            const page = this;
+            const apiClient = ApiClient;
 
             if (apiClient) {
                 loading.show();
@@ -837,7 +836,7 @@ import 'emby-itemscontainer';
             }
         });
         view.addEventListener('viewbeforehide', function () {
-            var apiClient = ApiClient;
+            const apiClient = ApiClient;
             events.off(serverNotifications, 'RestartRequired', onRestartRequired);
             events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown);
             events.off(serverNotifications, 'ServerRestarting', onServerRestarting);
@@ -851,14 +850,14 @@ import 'emby-itemscontainer';
             }
         });
         view.addEventListener('viewdestroy', function () {
-            var page = this;
-            var userActivityLog = page.userActivityLog;
+            const page = this;
+            const userActivityLog = page.userActivityLog;
 
             if (userActivityLog) {
                 userActivityLog.destroy();
             }
 
-            var serverActivityLog = page.serverActivityLog;
+            const serverActivityLog = page.serverActivityLog;
 
             if (serverActivityLog) {
                 serverActivityLog.destroy();
diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js
index fd91db4bb4..aac18360ac 100644
--- a/src/controllers/dashboard/encodingsettings.js
+++ b/src/controllers/dashboard/encodingsettings.js
@@ -32,7 +32,7 @@ import libraryMenu from 'libraryMenu';
 
     function onSaveEncodingPathFailure(response) {
         loading.hide();
-        var msg = '';
+        let msg = '';
         msg = globalize.translate('FFmpegSavePathNotFound');
 
         import('alert').then(({default: alert}) => {
@@ -54,9 +54,9 @@ import libraryMenu from 'libraryMenu';
     }
 
     function onSubmit() {
-        var form = this;
+        const form = this;
 
-        var onDecoderConfirmed = function () {
+        const onDecoderConfirmed = function () {
             loading.show();
             ApiClient.getNamedConfiguration('encoding').then(function (config) {
                 config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val();
@@ -105,7 +105,7 @@ import libraryMenu from 'libraryMenu';
 
     function setDecodingCodecsVisible(context, value) {
         value = value || '';
-        var any;
+        let any;
         Array.prototype.forEach.call(context.querySelectorAll('.chkDecodeCodec'), function (c) {
             if (-1 === c.getAttribute('data-types').split(',').indexOf(value)) {
                 dom.parentWithTag(c, 'LABEL').classList.add('hide');
@@ -136,7 +136,7 @@ import libraryMenu from 'libraryMenu';
     }
 
     $(document).on('pageinit', '#encodingSettingsPage', function () {
-        var page = this;
+        const page = this;
         page.querySelector('#selectVideoDecoder').addEventListener('change', function () {
             if ('vaapi' == this.value) {
                 page.querySelector('.fldVaapiDevice').classList.remove('hide');
@@ -156,7 +156,7 @@ import libraryMenu from 'libraryMenu';
         });
         $('#btnSelectEncoderPath', page).on('click.selectDirectory', function () {
             import('directorybrowser').then(({default: directoryBrowser}) => {
-                var picker = new directoryBrowser();
+                const picker = new directoryBrowser();
                 picker.show({
                     includeFiles: true,
                     callback: function (path) {
@@ -171,7 +171,7 @@ import libraryMenu from 'libraryMenu';
         });
         $('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
             import('directorybrowser').then(({default: directoryBrowser}) => {
-                var picker = new directoryBrowser();
+                const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -190,7 +190,7 @@ import libraryMenu from 'libraryMenu';
     }).on('pageshow', '#encodingSettingsPage', function () {
         loading.show();
         libraryMenu.setTabs('playback', 0, getTabs);
-        var page = this;
+        const page = this;
         ApiClient.getNamedConfiguration('encoding').then(function (config) {
             ApiClient.getSystemInfo().then(function (systemInfo) {
                 loadPage(page, config, systemInfo);

From ef74521028bef3d2d000c5c1b14b560c7a6a02b1 Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Tue, 14 Jul 2020 13:57:56 +0100
Subject: [PATCH 11/11] fix lint

---
 src/components/itemContextMenu.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index b66e8a0703..96a5cb71d7 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -356,7 +356,7 @@ import actionsheet from 'actionsheet';
                         getResolveFunction(getResolveFunction(resolve, id), id)();
                     });
                     break;
-                case 'copy-stream':
+                case 'copy-stream': {
                     const downloadHref = apiClient.getItemDownloadUrl(itemId);
                     const textAreaCopy = function () {
                         let textArea = document.createElement('textarea');
@@ -390,6 +390,7 @@ import actionsheet from 'actionsheet';
                     }
                     getResolveFunction(resolve, id)();
                     break;
+                }
                 case 'editsubtitles':
                     import('subtitleEditor').then(({default: subtitleEditor}) => {
                         subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));