Merge pull request #1440 from grafixeyehero/es6-migration-5

Migration confirm, prompt and multiSelect to ES6 modules

package.json

@@ -98,6 +98,7 @@
           "src/components/cardbuilder/cardBuilder.js",
           "src/components/cardbuilder/chaptercardbuilder.js",
           "src/components/cardbuilder/peoplecardbuilder.js",
+          "src/components/confirm/confirm.js",
           "src/components/displaySettings/displaySettings.js",
           "src/components/homeScreenSettings/homeScreenSettings.js",
           "src/components/directorybrowser/directorybrowser.js",
@@ -112,6 +113,7 @@
           "src/components/itemidentifier/itemidentifier.js",
           "src/components/itemMediaInfo/itemMediaInfo.js",
           "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
+          "src/components/multiSelect/multiSelect.js",
           "src/components/maintabsmanager.js",
           "src/components/mediaLibraryCreator/mediaLibraryCreator.js",
           "src/components/mediaLibraryEditor/mediaLibraryEditor.js",
@@ -125,6 +127,7 @@
           "src/components/playback/playmethodhelper.js",
           "src/components/playback/remotecontrolautoplay.js",
           "src/components/playback/volumeosd.js",
+          "src/components/prompt/prompt.js",
           "src/components/playbackSettings/playbackSettings.js",
           "src/components/playlisteditor/playlisteditor.js",
           "src/components/groupedcards.js",

src/components/confirm/confirm.js

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

src/components/imageeditor/imageeditor.js

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

src/components/metadataEditor/metadataEditor.js

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

src/components/multiSelect/multiSelect.js

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

src/components/prompt/prompt.js

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

src/components/recordingcreator/recordinghelper.js

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

src/components/subtitleeditor/subtitleeditor.js

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

src/controllers/dashboard/devices/devices.js

@@ -9,7 +9,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
         var msg = globalize.translate('DeleteDeviceConfirmation');
 
         require(['confirm'], function (confirm) {
-            confirm({
+            confirm.default({
                 text: msg,
                 title: globalize.translate('HeaderDeleteDevice'),
                 confirmText: globalize.translate('ButtonDelete'),

src/controllers/dashboard/dlna/profiles.js

@@ -59,7 +59,7 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
 
     function deleteProfile(page, id) {
         require(['confirm'], function (confirm) {
-            confirm(globalize.translate('MessageConfirmProfileDeletion'), globalize.translate('HeaderConfirmProfileDeletion')).then(function () {
+            confirm.default(globalize.translate('MessageConfirmProfileDeletion'), globalize.translate('HeaderConfirmProfileDeletion')).then(function () {
                 loading.show();
                 ApiClient.ajax({
                     type: 'DELETE',

src/controllers/dashboard/mediaLibrary.js

@@ -50,12 +50,10 @@ import 'emby-itemrefreshindicator';
 
         import('confirm').then(({default: confirm}) => {
             confirm({
-
                 text: msg,
                 title: globalize.translate('HeaderRemoveMediaFolder'),
                 confirmText: globalize.translate('Delete'),
                 primary: 'delete'
-
             }).then(function () {
                 const refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
                 ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).then(function () {

src/controllers/dashboard/plugins/add.js

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

src/controllers/dashboard/plugins/installed.js

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

src/controllers/dashboard/scheduledtasks/scheduledtask.js

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

src/controllers/dashboard/users/userparentalcontrol.js

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

src/controllers/dashboard/users/userpasswordpage.js

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

src/controllers/dashboard/users/userprofilespage.js

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

src/controllers/itemDetails.js

@@ -1935,7 +1935,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
 
         function splitVersions(instance, page, apiClient, params) {
             require(['confirm'], function (confirm) {
-                confirm('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () {
+                confirm.default('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () {
                     loading.show();
                     apiClient.ajax({
                         type: 'DELETE',

src/controllers/livetvstatus.js

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

src/controllers/user/profile.js

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

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

@@ -63,7 +63,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
 
         var self = this;
         require(['multiSelect'], function (MultiSelect) {
-            self.multiSelect = new MultiSelect({
+            self.multiSelect = new MultiSelect.default({
                 container: self,
                 bindOnClick: false
             });