Destruction of Require

src/components/accessSchedule/accessSchedule.js

@@ -59,8 +59,7 @@ import 'formDialogStyle';
 
     export function show(options) {
         return new Promise((resolve, reject) => {
-            // TODO: remove require
+            import('text!./components/accessSchedule/accessSchedule.template.html').then(({default: template}) => {
-            require(['text!./components/accessSchedule/accessSchedule.template.html'], template => {
                 const dlg = dialogHelper.createDialog({
                     removeOnClose: true,
                     size: 'small'

src/components/actionSheet/actionSheet.js

@@ -73,7 +73,7 @@ function getPosition(options, dlg) {
 }
 
 function centerFocus(elem, horiz, on) {
-    require(['scrollHelper'], function (scrollHelper) {
+    import('scrollHelper').then(({default: scrollHelper}) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });

src/components/cardbuilder/cardBuilder.js

@@ -1160,10 +1160,10 @@ import 'programStyles';
         /**
          * Imports the refresh indicator element.
          */
-        function requireRefreshIndicator() {
+        function importRefreshIndicator() {
             if (!refreshIndicatorLoaded) {
                 refreshIndicatorLoaded = true;
-                require(['emby-itemrefreshindicator']);
+                import('emby-itemrefreshindicator');
             }
         }
 
@@ -1414,7 +1414,7 @@ import 'programStyles';
             if (item.Type === 'CollectionFolder' || item.CollectionType) {
                 const refreshClass = item.RefreshProgress ? '' : ' class="hide"';
                 indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>';
-                requireRefreshIndicator();
+                importRefreshIndicator();
             }
 
             if (indicatorsHtml) {
@@ -1495,7 +1495,7 @@ import 'programStyles';
             const userData = item.UserData || {};
 
             if (itemHelper.canMarkPlayed(item)) {
-                require(['emby-playstatebutton']);
+                import('emby-playstatebutton');
                 html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>';
             }
 
@@ -1503,7 +1503,7 @@ import 'programStyles';
 
                 const likes = userData.Likes == null ? '' : userData.Likes;
 
-                require(['emby-ratingbutton']);
+                import('emby-ratingbutton');
                 html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>';
             }
 

src/components/directorybrowser/directorybrowser.js

@@ -157,7 +157,7 @@ import 'emby-button';
     }
 
     function alertTextWithOptions(options) {
-        require(['alert'], alert => {
+        import('alert').then(({default: alert}) => {
             alert(options);
         });
     }

src/components/playback/playerSelectionMenu.js

@@ -118,7 +118,7 @@ export function show(button) {
 
         });
 
-        require(['actionsheet'], function (actionsheet) {
+        import('actionsheet').then(({default: actionsheet}) => {
 
             loading.hide();
 
@@ -153,8 +153,12 @@ export function show(button) {
 }
 
 function showActivePlayerMenu(playerInfo) {
-
+    Promise.all([
-    require(['dialogHelper', 'dialog', 'emby-checkbox', 'emby-button'], function (dialogHelper) {
+        import('dialogHelper'),
+        import('dialog'),
+        import('emby-checkbox'),
+        import('emby-button')
+    ]).then(([dialogHelper]) => {
         showActivePlayerMenuInternal(dialogHelper, playerInfo);
     });
 }
@@ -163,7 +167,7 @@ function disconnectFromPlayer(currentDeviceName) {
 
     if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
 
-        require(['dialog'], function (dialog) {
+        import('dialog').then(({default: dialog}) => {
 
             var menuItems = [];
 

src/components/search/searchfields.js

@@ -70,7 +70,7 @@ import 'css!./searchfields';
 
     function embed(elem, instance, options) {
 
-        require(['text!./searchfields.template.html'], function (template) {
+        import('text!./searchfields.template.html').then(({default: template}) => {
 
             let html = globalize.translateDocument(template, 'core');
 

src/components/search/searchresults.js

@@ -604,7 +604,7 @@ import 'emby-button';
 
     function embed(elem, instance, options) {
 
-        require(['text!./searchresults.template.html'], function (template) {
+        import('text!./searchresults.template.html').then(({default: template}) => {
 
             if (!enableScrollX()) {
                 template = replaceAll(template, 'data-horizontal="true"', 'data-horizontal="false"');

src/components/subtitlesettings/subtitlesettings.js

@@ -90,7 +90,7 @@ function save(instance, context, userId, userSettings, apiClient, enableSaveConf
 
             loading.hide();
             if (enableSaveConfirmation) {
-                require(['toast'], function (toast) {
+                import('toast').then(({default: toast}) => {
                     toast(globalize.translate('SettingsSaved'));
                 });
             }
@@ -130,7 +130,7 @@ function onAppearanceFieldChange(e) {
 
 function embed(options, self) {
 
-    require(['text!./subtitlesettings.template.html'], function (template) {
+    import('text!./subtitlesettings.template.html').then(({default: template}) => {
 
         options.element.classList.add('subtitlesettings');
         options.element.innerHTML = globalize.translateDocument(template, 'core');

src/controllers/dashboard/scheduledtasks/scheduledtask.js

@@ -43,7 +43,7 @@ import 'emby-select';
             $('.taskName', view).html(task.Name);
             $('#pTaskDescription', view).html(task.Description);
 
-            require(['listViewStyle'], function () {
+            import('listViewStyle').then(() => {
                 ScheduledTaskPage.loadTaskTriggers(view, task);
             });
 
@@ -137,7 +137,7 @@ import 'emby-select';
             $('#popupAddTrigger', view).removeClass('hide');
         },
         confirmDeleteTrigger: function (view, index) {
-            require(['confirm'], function (confirm) {
+            import('confirm').then(({default: confirm}) => {
                 confirm.default(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () {
                     ScheduledTaskPage.deleteTrigger(view, index);
                 });

src/elements/emby-progressring/emby-progressring.js

@@ -11,7 +11,7 @@ import 'webcomponents';
         this.classList.add('progressring');
         const instance = this;
 
-        require(['text!./emby-progressring.template.html'], function (template) {
+        import('text!./emby-progressring.template.html').then(({default: template}) => {
             instance.innerHTML = template;
 
             //if (window.MutationObserver) {

src/elements/emby-scroller/emby-scroller.js

@@ -156,7 +156,7 @@ import 'css!./emby-scroller';
     };
 
     function loadScrollButtons(scroller) {
-        require(['emby-scrollbuttons'], function () {
+        import('emby-scrollbuttons').then(() => {
             scroller.insertAdjacentHTML('beforebegin', '<div is="emby-scrollbuttons" class="emby-scrollbuttons padded-right"></div>');
         });
     }

src/plugins/bookPlayer/plugin.js

@@ -220,7 +220,7 @@ export class BookPlayer {
         let apiClient = connectionManager.getApiClient(serverId);
 
         return new Promise((resolve, reject) => {
-            require(['epubjs'], (epubjs) => {
+            import('epubjs').then(({default: epubjs}) => {
                 let downloadHref = apiClient.getItemDownloadUrl(item.Id);
                 let book = epubjs.default(downloadHref, {openAs: 'epub'});
                 let rendition = book.renderTo(elem, {width: '100%', height: '97%'});

src/scripts/deleteHelper.js

@@ -7,7 +7,7 @@ function alertText(options) {
 
     return new Promise(function (resolve, reject) {
 
-        require(['alert'], function (alert) {
+        import('alert').then(({default: alert}) => {
             alert(options).then(resolve, resolve);
         });
     });

src/scripts/keyboardNavigation.js

@@ -155,7 +155,7 @@ export function enable() {
 function attachGamepadScript(e) {
     console.log('Gamepad connected! Attaching gamepadtokey.js script');
     window.removeEventListener('gamepadconnected', attachGamepadScript);
-    require(['scripts/gamepadtokey']);
+    import('scripts/gamepadtokey');
 }
 
 // No need to check for gamepads manually at load time, the eventhandler will be fired for that