Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix comics player #2174

Merged
merged 3 commits into from Dec 5, 2020
Merged

Fix comics player #2174

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8395eb3
Fix comics player
thornbill Dec 4, 2020
4dc726d
Fix sonarqube bug
thornbill Dec 4, 2020
e1ce1a2
Update src/plugins/comicsPlayer/plugin.js
thornbill Dec 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
89 changes: 40 additions & 49 deletions src/plugins/comicsPlayer/plugin.js
View file
Open in desktop
Expand Up @@ -5,6 +5,9 @@ import dialogHelper from '../../components/dialogHelper/dialogHelper';
import keyboardnavigation from '../../scripts/keyboardNavigation';
import { appRouter } from '../../components/appRouter';
import ServerConnections from '../../components/ServerConnections';
// eslint-disable-next-line import/named, import/namespace
dmitrylyzo marked this conversation as resolved.
Show resolved Hide resolved
import { Swiper } from 'swiper/swiper-bundle.esm';
import 'swiper/swiper-bundle.css';

export class ComicsPlayer {
constructor() {
Expand All @@ -28,6 +31,8 @@ export class ComicsPlayer {
stop() {
this.unbindEvents();

this.archiveSource?.release();

const elem = this.mediaElement;
if (elem) {
dialogHelper.close(elem);
Expand Down Expand Up @@ -101,41 +106,36 @@ export class ComicsPlayer {
workerUrl: appRouter.baseUrl() + '/libraries/worker-bundle.js'
});

return new Promise((resolve, reject) => {
const downloadUrl = apiClient.getItemDownloadUrl(item.Id);
const archiveSource = new ArchiveSource(downloadUrl);

const instance = this;
import('swiper').then(({default: Swiper}) => {
archiveSource.load().then(() => {
loading.hide();
this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), {
direction: 'horizontal',
// loop is disabled due to the lack of support in virtual slides
loop: false,
zoom: {
minRatio: 1,
toggle: true,
containerClass: 'slider-zoom-container'
},
autoplay: false,
keyboard: {
enabled: true
},
preloadImages: true,
slidesPerView: 1,
slidesPerColumn: 1,
initialSlide: 0,
// reduces memory consumption for large libraries while allowing preloading of images
virtual: {
slides: archiveSource.urls,
cache: true,
renderSlide: instance.getImgFromUrl,
addSlidesBefore: 1,
addSlidesAfter: 1
}
});
});
const downloadUrl = apiClient.getItemDownloadUrl(item.Id);
this.archiveSource = new ArchiveSource(downloadUrl);

return this.archiveSource.load().then(() => {
loading.hide();
this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), {
direction: 'horizontal',
// loop is disabled due to the lack ofSwiper support in virtual slides
thornbill marked this conversation as resolved.
Show resolved Hide resolved
loop: false,
zoom: {
minRatio: 1,
toggle: true,
containerClass: 'slider-zoom-container'
},
autoplay: false,
keyboard: {
enabled: true
},
preloadImages: true,
slidesPerView: 1,
slidesPerColumn: 1,
initialSlide: 0,
// 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
}
});
});
}
Expand Down Expand Up @@ -166,8 +166,6 @@ class ArchiveSource {
this.url = url;
this.files = [];
this.urls = [];
this.loadPromise = this.load();
this.itemsLoaded = 0;
}

async load() {
Expand All @@ -179,7 +177,6 @@ class ArchiveSource {
const blob = await res.blob();
this.archive = await Archive.open(blob);
this.raw = await this.archive.getFilesArray();
this.numberOfFiles = this.raw.length;
await this.archive.extractFiles();

const files = await this.archive.getFilesArray();
Expand All @@ -198,17 +195,11 @@ class ArchiveSource {
}
}

getLength() {
return this.raw.length;
}

async item(index) {
if (this.urls[index]) {
return this.urls[index];
}

await this.loadPromise;
return this.urls[index];
release() {
this.files = [];
/* eslint-disable-next-line compat/compat */
this.urls.forEach(URL.revokeObjectURL);
this.urls = [];
}
}

Expand Down