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

Fix comics player

Browse source
This commit is contained in:
Bill Thornton 2020-12-04 17:04:59 -05:00
parent 0a15eba329
commit 8395eb307e
1 changed files with 39 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,9 @@ import dialogHelper from '../../components/dialogHelper/dialogHelper';
import keyboardnavigation from '../../scripts/keyboardNavigation'; 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';
// eslint-disable-next-line import/named, import/namespace
import { Swiper } from 'swiper/swiper-bundle.esm';
import 'swiper/swiper-bundle.css';
export class ComicsPlayer { export class ComicsPlayer {
constructor() { constructor() {
@ -28,6 +31,8 @@ export class ComicsPlayer {
stop() { stop() {
this.unbindEvents(); this.unbindEvents();
this.archiveSource?.release();
const elem = this.mediaElement; const elem = this.mediaElement;
if (elem) { if (elem) {
dialogHelper.close(elem); dialogHelper.close(elem);
@ -101,41 +106,36 @@ export class ComicsPlayer {
workerUrl: appRouter.baseUrl() + '/libraries/worker-bundle.js' workerUrl: appRouter.baseUrl() + '/libraries/worker-bundle.js'
}); });
return new Promise((resolve, reject) => { const downloadUrl = apiClient.getItemDownloadUrl(item.Id);
const downloadUrl = apiClient.getItemDownloadUrl(item.Id); this.archiveSource = new ArchiveSource(downloadUrl);
const archiveSource = new ArchiveSource(downloadUrl);
const instance = this; return this.archiveSource.load().then(() => {
import('swiper').then(({default: Swiper}) => { loading.hide();
archiveSource.load().then(() => { this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), {
loading.hide(); direction: 'horizontal',
this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), { // loop is disabled due to the lack ofSwiper support in virtual slides
direction: 'horizontal', loop: false,
// loop is disabled due to the lack of support in virtual slides zoom: {
loop: false, minRatio: 1,
zoom: { toggle: true,
minRatio: 1, containerClass: 'slider-zoom-container'
toggle: true, },
containerClass: 'slider-zoom-container' autoplay: false,
}, keyboard: {
autoplay: false, enabled: true
keyboard: { },
enabled: true preloadImages: true,
}, slidesPerView: 1,
preloadImages: true, slidesPerColumn: 1,
slidesPerView: 1, initialSlide: 0,
slidesPerColumn: 1, // reduces memory consumption for large libraries while allowing preloading of images
initialSlide: 0, virtual: {
// reduces memory consumption for large libraries while allowing preloading of images slides: this.archiveSource.urls,
virtual: { cache: true,
slides: archiveSource.urls, renderSlide: this.getImgFromUrl,
cache: true, addSlidesBefore: 1,
renderSlide: instance.getImgFromUrl, addSlidesAfter: 1
addSlidesBefore: 1, }
addSlidesAfter: 1
}
});
});
}); });
}); });
} }
@ -166,8 +166,6 @@ class ArchiveSource {
this.url = url; this.url = url;
this.files = []; this.files = [];
this.urls = []; this.urls = [];
this.loadPromise = this.load();
this.itemsLoaded = 0;
} }
async load() { async load() {
@ -179,7 +177,6 @@ class ArchiveSource {
const blob = await res.blob(); const blob = await res.blob();
this.archive = await Archive.open(blob); this.archive = await Archive.open(blob);
this.raw = await this.archive.getFilesArray(); this.raw = await this.archive.getFilesArray();
this.numberOfFiles = this.raw.length;
await this.archive.extractFiles(); await this.archive.extractFiles();
const files = await this.archive.getFilesArray(); const files = await this.archive.getFilesArray();
@ -198,17 +195,11 @@ class ArchiveSource {
} }
} }
getLength() { release() {
return this.raw.length; this.files = [];
} /* eslint-disable-next-line compat/compat */
this.urls.map(URL.revokeObjectURL);
async item(index) { this.urls = [];
if (this.urls[index]) {
return this.urls[index];
}
await this.loadPromise;
return this.urls[index];
} }
} }