diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index e5af0c81dd..1dd5751129 100644 --- a/src/components/slideshow/slideshow.js +++ b/src/components/slideshow/slideshow.js @@ -13,10 +13,6 @@ import './style.scss'; import 'material-design-icons-iconfont'; import '../../elements/emby-button/paper-icon-button-light'; import ServerConnections from '../ServerConnections'; -//eslint-disable-next-line import/no-unresolved -import { Swiper } from 'swiper/bundle'; -//eslint-disable-next-line import/no-unresolved -import 'swiper/css/bundle'; import screenfull from 'screenfull'; /** @@ -345,45 +341,51 @@ export default function (options) { slides = currentOptions.items; } - 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 || !!options.autoplay, - 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 + //eslint-disable-next-line import/no-unresolved + import('swiper/css/bundle'); + + // eslint-disable-next-line import/no-unresolved + import('swiper/bundle').then(({ 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 || !!options.autoplay, + 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); } + + if (swiperInstance.autoplay?.running) onAutoplayStart(); }); - - swiperInstance.on('autoplayStart', onAutoplayStart); - swiperInstance.on('autoplayStop', onAutoplayStop); - - if (useFakeZoomImage) { - swiperInstance.on('zoomChange', onZoomChange); - } - - if (swiperInstance.autoplay?.running) onAutoplayStart(); } /** diff --git a/src/plugins/comicsPlayer/plugin.js b/src/plugins/comicsPlayer/plugin.js index 3082b4a5b0..57772d8de5 100644 --- a/src/plugins/comicsPlayer/plugin.js +++ b/src/plugins/comicsPlayer/plugin.js @@ -6,10 +6,6 @@ import keyboardnavigation from '../../scripts/keyboardNavigation'; import { appRouter } from '../../components/appRouter'; import ServerConnections from '../../components/ServerConnections'; import * as userSettings from '../../scripts/settings/userSettings'; -//eslint-disable-next-line import/no-unresolved -import { Swiper } from 'swiper/bundle'; -//eslint-disable-next-line import/no-unresolved -import 'swiper/css/bundle'; import './style.scss'; @@ -292,55 +288,61 @@ export class ComicsPlayer { const downloadUrl = apiClient.getItemDownloadUrl(item.Id); this.archiveSource = new ArchiveSource(downloadUrl); - return this.archiveSource.load().then(() => { - loading.hide(); + //eslint-disable-next-line import/no-unresolved + import('swiper/css/bundle'); - this.pageCount = this.archiveSource.urls.length; - this.currentPage = options.startPositionTicks / 10000 || 0; + return this.archiveSource.load() + // eslint-disable-next-line import/no-unresolved + .then(() => import('swiper/bundle')) + .then(({ Swiper }) => { + loading.hide(); - this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), { - direction: 'horizontal', - // loop is disabled due to the lack of Swiper support in virtual slides - loop: false, - zoom: { - minRatio: 1, - toggle: true, - containerClass: 'slider-zoom-container' - }, - autoplay: false, - keyboard: { - enabled: true - }, - preloadImages: true, - slidesPerView: this.comicsPlayerSettings.pagesPerView, - slidesPerGroup: this.comicsPlayerSettings.pagesPerView, - slidesPerColumn: 1, - initialSlide: this.currentPage, - navigation: { - nextEl: '.swiper-button-next', - prevEl: '.swiper-button-prev' - }, - pagination: { - el: '.swiper-pagination', - clickable: true, - type: 'fraction' - }, - // reduces memory consumption for large libraries while allowing preloading of images - virtual: { - slides: this.archiveSource.urls, - cache: true, - renderSlide: this.getImgFromUrl, - addSlidesBefore: 1, - addSlidesAfter: 1 - } + this.pageCount = this.archiveSource.urls.length; + this.currentPage = options.startPositionTicks / 10000 || 0; + + this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), { + direction: 'horizontal', + // loop is disabled due to the lack of Swiper support in virtual slides + loop: false, + zoom: { + minRatio: 1, + toggle: true, + containerClass: 'slider-zoom-container' + }, + autoplay: false, + keyboard: { + enabled: true + }, + preloadImages: true, + slidesPerView: this.comicsPlayerSettings.pagesPerView, + slidesPerGroup: this.comicsPlayerSettings.pagesPerView, + slidesPerColumn: 1, + initialSlide: this.currentPage, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev' + }, + pagination: { + el: '.swiper-pagination', + clickable: true, + type: 'fraction' + }, + // reduces memory consumption for large libraries while allowing preloading of images + virtual: { + slides: this.archiveSource.urls, + cache: true, + renderSlide: this.getImgFromUrl, + addSlidesBefore: 1, + addSlidesAfter: 1 + } + }); + + // save current page ( a page is an image file inside the archive ) + this.swiperInstance.on('slideChange', () => { + this.currentPage = this.swiperInstance.activeIndex; + Events.trigger(this, 'pause'); + }); }); - - // save current page ( a page is an image file inside the archive ) - this.swiperInstance.on('slideChange', () => { - this.currentPage = this.swiperInstance.activeIndex; - Events.trigger(this, 'pause'); - }); - }); } getImgFromUrl(url) {