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

84
src/components/slideshow/slideshow.js
View file

@ -13,10 +13,6 @@ import './style.scss';
import 'material-design-icons-iconfont'; import 'material-design-icons-iconfont';
import '../../elements/emby-button/paper-icon-button-light'; import '../../elements/emby-button/paper-icon-button-light';
import ServerConnections from '../ServerConnections'; 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'; import screenfull from 'screenfull';
/** /**
@ -345,45 +341,51 @@ export default function (options) {
slides = currentOptions.items; slides = currentOptions.items;
} }
swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), { //eslint-disable-next-line import/no-unresolved
direction: 'horizontal', import('swiper/css/bundle');
// Loop is disabled due to the virtual slides option not supporting it.
loop: false, // eslint-disable-next-line import/no-unresolved
zoom: { import('swiper/bundle').then(({ Swiper }) => {
minRatio: 1, swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
toggle: true direction: 'horizontal',
}, // Loop is disabled due to the virtual slides option not supporting it.
autoplay: !options.interactive || !!options.autoplay, loop: false,
keyboard: { zoom: {
enabled: true minRatio: 1,
}, toggle: true
preloadImages: true, },
slidesPerView: 1, autoplay: !options.interactive || !!options.autoplay,
slidesPerColumn: 1, keyboard: {
initialSlide: options.startIndex || 0, enabled: true
speed: 240, },
navigation: { preloadImages: true,
nextEl: '.btnSlideshowNext', slidesPerView: 1,
prevEl: '.btnSlideshowPrevious' slidesPerColumn: 1,
}, initialSlide: options.startIndex || 0,
// Virtual slides reduce memory consumption for large libraries while allowing preloading of images; speed: 240,
virtual: { navigation: {
slides: slides, nextEl: '.btnSlideshowNext',
cache: true, prevEl: '.btnSlideshowPrevious'
renderSlide: getSwiperSlideHtml, },
addSlidesBefore: 1, // Virtual slides reduce memory consumption for large libraries while allowing preloading of images;
addSlidesAfter: 1 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();
} }
/** /**

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

@ -6,10 +6,6 @@ import keyboardnavigation from '../../scripts/keyboardNavigation';
import { appRouter } from '../../components/appRouter'; import { appRouter } from '../../components/appRouter';
import ServerConnections from '../../components/ServerConnections'; import ServerConnections from '../../components/ServerConnections';
import * as userSettings from '../../scripts/settings/userSettings'; 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'; import './style.scss';
@ -292,55 +288,61 @@ export class ComicsPlayer {
const downloadUrl = apiClient.getItemDownloadUrl(item.Id); const downloadUrl = apiClient.getItemDownloadUrl(item.Id);
this.archiveSource = new ArchiveSource(downloadUrl); this.archiveSource = new ArchiveSource(downloadUrl);
return this.archiveSource.load().then(() => { //eslint-disable-next-line import/no-unresolved
loading.hide(); import('swiper/css/bundle');
this.pageCount = this.archiveSource.urls.length; return this.archiveSource.load()
this.currentPage = options.startPositionTicks / 10000 || 0; // eslint-disable-next-line import/no-unresolved
.then(() => import('swiper/bundle'))
.then(({ Swiper }) => {
loading.hide();
this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), { this.pageCount = this.archiveSource.urls.length;
direction: 'horizontal', this.currentPage = options.startPositionTicks / 10000 || 0;
// loop is disabled due to the lack of Swiper support in virtual slides
loop: false, this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), {
zoom: { direction: 'horizontal',
minRatio: 1, // loop is disabled due to the lack of Swiper support in virtual slides
toggle: true, loop: false,
containerClass: 'slider-zoom-container' zoom: {
}, minRatio: 1,
autoplay: false, toggle: true,
keyboard: { containerClass: 'slider-zoom-container'
enabled: true },
}, autoplay: false,
preloadImages: true, keyboard: {
slidesPerView: this.comicsPlayerSettings.pagesPerView, enabled: true
slidesPerGroup: this.comicsPlayerSettings.pagesPerView, },
slidesPerColumn: 1, preloadImages: true,
initialSlide: this.currentPage, slidesPerView: this.comicsPlayerSettings.pagesPerView,
navigation: { slidesPerGroup: this.comicsPlayerSettings.pagesPerView,
nextEl: '.swiper-button-next', slidesPerColumn: 1,
prevEl: '.swiper-button-prev' initialSlide: this.currentPage,
}, navigation: {
pagination: { nextEl: '.swiper-button-next',
el: '.swiper-pagination', prevEl: '.swiper-button-prev'
clickable: true, },
type: 'fraction' pagination: {
}, el: '.swiper-pagination',
// reduces memory consumption for large libraries while allowing preloading of images clickable: true,
virtual: { type: 'fraction'
slides: this.archiveSource.urls, },
cache: true, // reduces memory consumption for large libraries while allowing preloading of images
renderSlide: this.getImgFromUrl, virtual: {
addSlidesBefore: 1, slides: this.archiveSource.urls,
addSlidesAfter: 1 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) { getImgFromUrl(url) {