multiple imports optimized

src/components/images/imageLoader.js

@@ -124,16 +124,14 @@ import './style.css';
 
     export function lazyChildren(elem) {
         if (userSettings.enableBlurhash()) {
-            const lazyElems = Array.from(elem.querySelectorAll('.lazy'));
+            for (const lazyElem of elem.querySelectorAll('.lazy')) {
-
-            lazyElems.forEach((lazyElem) => {
                 const blurhashstr = lazyElem.getAttribute('data-blurhash');
                 if (!lazyElem.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) {
                     itemBlurhashing(lazyElem, blurhashstr);
                 } else if (!blurhashstr && !lazyElem.classList.contains('blurhashed')) {
                     lazyElem.classList.add('non-blurhashable');
                 }
-            });
+            }
         }
 
         lazyLoader.lazyChildren(elem, fillImage);

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -364,8 +364,9 @@ import '../../elements/emby-input/emby-input';
         currentAvailableOptions = null;
         const isNewLibrary = libraryOptions === null;
         isNewLibrary && parent.classList.add('newlibrary');
-        const response = await fetch('components/libraryoptionseditor/libraryoptionseditor.template.html');
+
-        const template = await response.text();
+        const { default: template } = await import('./libraryoptionseditor.template.html');
+
         parent.innerHTML = globalize.translateHtml(template);
         populateRefreshInterval(parent.querySelector('#selectAutoRefreshInterval'));
         const promises = [populateLanguages(parent), populateCountries(parent.querySelector('#selectCountry'))];

src/components/metadataEditor/metadataEditor.js

@@ -18,6 +18,7 @@ import '../../assets/css/clearbutton.scss';
 import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
+import { appRouter } from '../appRouter';
 
 /* eslint-disable indent */
 
@@ -244,9 +245,7 @@ import toast from '../toast/toast';
         if (parentId) {
             reload(context, parentId, item.ServerId);
         } else {
-            import('../appRouter').then((appRouter) => {
+            appRouter.goHome();
-                appRouter.goHome();
-            });
         }
     }
 

src/components/recordingcreator/recordingcreator.js

@@ -17,6 +17,7 @@ import '../formdialog.css';
 import './recordingcreator.css';
 import 'material-design-icons-iconfont';
 import ServerConnections from '../ServerConnections';
+import { playbackManager } from '../playback/playbackmanager';
 
 let currentDialog;
 let closeAction;
@@ -117,14 +118,12 @@ function reload(context, programId, serverId, refreshRecordingStateOnly) {
 
 function executeCloseAction(action, programId, serverId) {
     if (action === 'play') {
-        import('../playback/playbackmanager').then((playbackManager) => {
+        const apiClient = ServerConnections.getApiClient(serverId);
-            const apiClient = ServerConnections.getApiClient(serverId);
 
-            apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
+        apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
-                playbackManager.play({
+            playbackManager.play({
-                    ids: [item.ChannelId],
+                ids: [item.ChannelId],
-                    serverId: serverId
+                serverId: serverId
-                });
             });
         });
         return;

src/components/slideshow/slideshow.js

@@ -13,6 +13,9 @@ import './style.css';
 import 'material-design-icons-iconfont';
 import '../../elements/emby-button/paper-icon-button-light';
 import ServerConnections from '../ServerConnections';
+// eslint-disable-next-line import/named, import/namespace
+import { Swiper } from 'swiper/swiper-bundle.esm';
+import 'swiper/swiper-bundle.css';
 
 /**
  * Name of transition event.
@@ -301,45 +304,43 @@ export default function (options) {
             slides = currentOptions.items;
         }
 
-        import('swiper').then(({default: Swiper}) => {
+        swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
-            swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
+            direction: 'horizontal',
-                direction: 'horizontal',
+            // Loop is disabled due to the virtual slides option not supporting it.
-                // Loop is disabled due to the virtual slides option not supporting it.
+            loop: false,
-                loop: false,
+            zoom: {
-                zoom: {
+                minRatio: 1,
-                    minRatio: 1,
+                toggle: true
-                    toggle: true
+            },
-                },
+            autoplay: !options.interactive,
-                autoplay: !options.interactive,
+            keyboard: {
-                keyboard: {
+                enabled: true
-                    enabled: true
+            },
-                },
+            preloadImages: true,
-                preloadImages: true,
+            slidesPerView: 1,
-                slidesPerView: 1,
+            slidesPerColumn: 1,
-                slidesPerColumn: 1,
+            initialSlide: options.startIndex || 0,
-                initialSlide: options.startIndex || 0,
+            speed: 240,
-                speed: 240,
+            navigation: {
-                navigation: {
+                nextEl: '.btnSlideshowNext',
-                    nextEl: '.btnSlideshowNext',
+                prevEl: '.btnSlideshowPrevious'
-                    prevEl: '.btnSlideshowPrevious'
+            },
-                },
+            // Virtual slides reduce memory consumption for large libraries while allowing preloading of images;
-                // Virtual slides reduce memory consumption for large libraries while allowing preloading of images;
+            virtual: {
-                virtual: {
+                slides: slides,
-                    slides: slides,
+                cache: true,
-                    cache: true,
+                renderSlide: getSwiperSlideHtml,
-                    renderSlide: getSwiperSlideHtml,
+                addSlidesBefore: 1,
-                    addSlidesBefore: 1,
+                addSlidesAfter: 1
-                    addSlidesAfter: 1
-                }
-            });
-
-            swiperInstance.on('autoplayStart', onAutoplayStart);
-            swiperInstance.on('autoplayStop', onAutoplayStop);
-
-            if (useFakeZoomImage) {
-                swiperInstance.on('zoomChange', onZoomChange);
             }
         });
+
+        swiperInstance.on('autoplayStart', onAutoplayStart);
+        swiperInstance.on('autoplayStop', onAutoplayStop);
+
+        if (useFakeZoomImage) {
+            swiperInstance.on('zoomChange', onZoomChange);
+        }
     }
 
     /**

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

@@ -11,6 +11,7 @@ import serverNotifications from '../../scripts/serverNotifications';
 import { Events } from 'jellyfin-apiclient';
 import 'webcomponents.js/webcomponents-lite';
 import ServerConnections from '../../components/ServerConnections';
+import Sortable from 'sortablejs';
 
 /* eslint-disable indent */
 
@@ -133,16 +134,14 @@ import ServerConnections from '../../components/ServerConnections';
         }
 
         const self = this;
-        import('sortablejs').then((Sortable) => {
+        self.sortable = new Sortable(self, {
-            self.sortable = new Sortable(self, {
+            draggable: '.listItem',
-                draggable: '.listItem',
+            handle: '.listViewDragHandle',
-                handle: '.listViewDragHandle',
 
-                // dragging ended
+            // dragging ended
-                onEnd: function (evt) {
+            onEnd: function (evt) {
-                    return onDrop(evt, self);
+                return onDrop(evt, self);
-                }
+            }
-            });
         });
     };
 

src/scripts/editorsidebar.js

@@ -183,7 +183,10 @@ import Dashboard from './clientUtils';
     }
 
     function initializeTree(page, currentUser, openItems, selectedId) {
-        import('jstree').then(() => {
+        Promise.all([
+            import('jstree'),
+            import('jstree/dist/themes/default/style.css')
+        ]).then(() => {
             initializeTreeInternal(page, currentUser, openItems, selectedId);
         });
     }