mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Defer loading of swiper until used

Browse source
This commit is contained in:
Bill Thornton 2022-09-22 10:23:23 -04:00
parent af616fe2e7
commit f66f435ff9
2 changed files with 95 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/plugins/comicsPlayer/plugin.js
View file

@ -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) {