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

Fix comics player

This commit is contained in:
Bill Thornton 2020-12-04 17:04:59 -05:00
parent 0a15eba329
commit 8395eb307e

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,17 +106,14 @@ 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);
const archiveSource = new ArchiveSource(downloadUrl); this.archiveSource = new ArchiveSource(downloadUrl);
const instance = this; return this.archiveSource.load().then(() => {
import('swiper').then(({default: Swiper}) => {
archiveSource.load().then(() => {
loading.hide(); loading.hide();
this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), { this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), {
direction: 'horizontal', direction: 'horizontal',
// loop is disabled due to the lack of support in virtual slides // loop is disabled due to the lack ofSwiper support in virtual slides
loop: false, loop: false,
zoom: { zoom: {
minRatio: 1, minRatio: 1,
@ -128,16 +130,14 @@ export class ComicsPlayer {
initialSlide: 0, initialSlide: 0,
// reduces memory consumption for large libraries while allowing preloading of images // reduces memory consumption for large libraries while allowing preloading of images
virtual: { virtual: {
slides: archiveSource.urls, slides: this.archiveSource.urls,
cache: true, cache: true,
renderSlide: instance.getImgFromUrl, renderSlide: this.getImgFromUrl,
addSlidesBefore: 1, addSlidesBefore: 1,
addSlidesAfter: 1 addSlidesAfter: 1
} }
}); });
}); });
});
});
} }
getImgFromUrl(url) { getImgFromUrl(url) {
@ -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];
} }
} }