diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js index 1022c2f3bf..1811b117e1 100644 --- a/src/components/images/imageLoader.js +++ b/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')); - - lazyElems.forEach((lazyElem) => { + for (const lazyElem of elem.querySelectorAll('.lazy')) { 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); diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js index cdc4f6a28e..bcd1fa5a33 100644 --- a/src/components/libraryoptionseditor/libraryoptionseditor.js +++ b/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'))]; diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js index b0233444ee..71bf1bc00b 100644 --- a/src/components/metadataEditor/metadataEditor.js +++ b/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(); } } diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js index 659503694e..a1545348ae 100644 --- a/src/components/recordingcreator/recordingcreator.js +++ b/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) { - playbackManager.play({ - ids: [item.ChannelId], - serverId: serverId - }); + apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) { + playbackManager.play({ + ids: [item.ChannelId], + serverId: serverId }); }); return; diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index b56bf3d180..b27f8af11d 100644 --- a/src/components/slideshow/slideshow.js +++ b/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'), { - direction: 'horizontal', - // Loop is disabled due to the virtual slides option not supporting it. - loop: false, - zoom: { - minRatio: 1, - toggle: true - }, - autoplay: !options.interactive, - keyboard: { - enabled: true - }, - preloadImages: true, - slidesPerView: 1, - slidesPerColumn: 1, - initialSlide: options.startIndex || 0, - speed: 240, - navigation: { - nextEl: '.btnSlideshowNext', - prevEl: '.btnSlideshowPrevious' - }, - // Virtual slides reduce memory consumption for large libraries while allowing preloading of images; - virtual: { - slides: slides, - cache: true, - renderSlide: getSwiperSlideHtml, - addSlidesBefore: 1, - addSlidesAfter: 1 - } - }); - - swiperInstance.on('autoplayStart', onAutoplayStart); - swiperInstance.on('autoplayStop', onAutoplayStop); - - if (useFakeZoomImage) { - swiperInstance.on('zoomChange', onZoomChange); + swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), { + direction: 'horizontal', + // Loop is disabled due to the virtual slides option not supporting it. + loop: false, + zoom: { + minRatio: 1, + toggle: true + }, + autoplay: !options.interactive, + keyboard: { + enabled: true + }, + preloadImages: true, + slidesPerView: 1, + slidesPerColumn: 1, + initialSlide: options.startIndex || 0, + speed: 240, + navigation: { + nextEl: '.btnSlideshowNext', + prevEl: '.btnSlideshowPrevious' + }, + // Virtual slides reduce memory consumption for large libraries while allowing preloading of images; + virtual: { + slides: slides, + cache: true, + renderSlide: getSwiperSlideHtml, + addSlidesBefore: 1, + addSlidesAfter: 1 } }); + + swiperInstance.on('autoplayStart', onAutoplayStart); + swiperInstance.on('autoplayStop', onAutoplayStop); + + if (useFakeZoomImage) { + swiperInstance.on('zoomChange', onZoomChange); + } } /** diff --git a/src/elements/emby-itemscontainer/emby-itemscontainer.js b/src/elements/emby-itemscontainer/emby-itemscontainer.js index ddb5faa63a..3d84ea6bed 100644 --- a/src/elements/emby-itemscontainer/emby-itemscontainer.js +++ b/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, { - draggable: '.listItem', - handle: '.listViewDragHandle', + self.sortable = new Sortable(self, { + draggable: '.listItem', + handle: '.listViewDragHandle', - // dragging ended - onEnd: function (evt) { - return onDrop(evt, self); - } - }); + // dragging ended + onEnd: function (evt) { + return onDrop(evt, self); + } }); }; diff --git a/src/scripts/editorsidebar.js b/src/scripts/editorsidebar.js index 686905cde4..1132e6fa17 100644 --- a/src/scripts/editorsidebar.js +++ b/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); }); }