mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-16 10:28:18 -07:00
Merge pull request #3941 from thornbill/defer-swiper
Defer loading of swiper until used
This commit is contained in:
Bill Thornton
GitHub
commit
3e269bf3f4
@ -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();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user