move comics player to plugin directory and update web config

src/plugins/comicsPlayer/plugin.js

@@ -0,0 +1,215 @@
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import dialogHelper from 'dialogHelper';
+import keyboardnavigation from 'keyboardnavigation';
+import appRouter from 'appRouter';
+import 'css!../slideshow/style';
+import * as libarchive from 'libarchive';
+
+export class ComicsPlayer {
+    constructor() {
+        this.name = 'Comics Player';
+        this.type = 'mediaplayer';
+        this.id = 'comicsplayer';
+        this.priority = 1;
+        this.imageMap = new Map();
+
+        this.onDialogClosed = this.onDialogClosed.bind(this);
+        this.onWindowKeyUp = this.onWindowKeyUp.bind(this);
+    }
+
+    play(options) {
+        this._progress = 0;
+
+        let elem = this.createMediaElement();
+        return this.setCurrentSrc(elem, options);
+    }
+
+    stop() {
+        this.unbindEvents();
+
+        let elem = this._mediaElement;
+
+        if (elem) {
+            dialogHelper.close(elem);
+            this._mediaElement = null;
+        }
+
+        // Hide loader in case player was not fully loaded yet
+        loading.hide();
+    }
+
+    onDialogClosed() {
+        this.stop();
+    }
+
+    onWindowKeyUp(e) {
+        let key = keyboardnavigation.getKeyName(e);
+        switch (key) {
+            case 'Escape':
+                this.stop();
+                break;
+        }
+    }
+
+    bindEvents() {
+        document.addEventListener('keyup', this.onWindowKeyUp);
+    }
+
+    unbindEvents() {
+        document.removeEventListener('keyup', this.onWindowKeyUp);
+    }
+
+    createMediaElement() {
+        let elem = this._mediaElement;
+
+        if (elem) {
+            return elem;
+        }
+
+        elem = document.getElementById('comicsPlayer');
+        if (!elem) {
+            elem = dialogHelper.createDialog({
+                exitAnimationDuration: 400,
+                size: 'fullscreen',
+                autoFocus: false,
+                scrollY: false,
+                exitAnimation: 'fadeout',
+                removeOnClose: true
+            });
+            elem.id = 'bookPlayer';
+
+            elem.classList.add('slideshowDialog');
+
+            elem.innerHTML = '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
+
+            this.bindEvents();
+
+            dialogHelper.open(elem);
+        }
+
+        this._mediaElement = elem;
+
+        return elem;
+    }
+
+    setCurrentSrc(elem, options) {
+        let item = options.items[0];
+        this._currentItem = item;
+
+        loading.show();
+
+        let serverId = item.ServerId;
+        let apiClient = connectionManager.getApiClient(serverId);
+
+        libarchive.Archive.init({
+            workerUrl: appRouter.baseUrl() + '/libraries/worker-bundle.js'
+        });
+
+        return new Promise((resolve, reject) => {
+            let downloadUrl = apiClient.getItemDownloadUrl(item.Id);
+            const archiveSource = new ArchiveSource(downloadUrl);
+            var 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 virtual slides option not supporting it.
+                        loop: false,
+                        zoom: {
+                            minRatio: 1,
+                            toggle: true,
+                            containerClass: 'slider-zoom-container'
+                        },
+                        autoplay: false,
+                        keyboard: {
+                            enabled: true
+                        },
+                        preloadImages: true,
+                        slidesPerView: 1,
+                        slidesPerColumn: 1,
+                        initialSlide: 0,
+                        // Virtual slides reduce memory consumption for large libraries while allowing preloading of images;
+                        virtual: {
+                            slides: archiveSource.urls,
+                            cache: true,
+                            renderSlide: instance.getImgFromUrl,
+                            addSlidesBefore: 1,
+                            addSlidesAfter: 1
+                        }
+                    });
+                });
+            });
+        });
+    }
+
+    getImgFromUrl(url) {
+        return `<div class="swiper-slide">
+                   <div class="slider-zoom-container">
+                       <img src="${url}" class="swiper-slide-img">
+                   </div>
+               </div>`;
+    }
+
+    canPlayMediaType(mediaType) {
+        return (mediaType || '').toLowerCase() === 'book';
+    }
+
+    canPlayItem(item) {
+        if (item.Path && (item.Path.endsWith('cbz') || item.Path.endsWith('cbr'))) {
+            return true;
+        }
+        return false;
+    }
+}
+
+class ArchiveSource {
+    constructor(url) {
+        this.url = url;
+        this.files = [];
+        this.urls = [];
+        this.loadPromise = this.load();
+        this.itemsLoaded = 0;
+    }
+
+    async load() {
+        let res = await fetch(this.url);
+        if (!res.ok) {
+            return;
+        }
+        let blob = await res.blob();
+        this.archive = await libarchive.Archive.open(blob);
+        this.raw = await this.archive.getFilesArray();
+        this.numberOfFiles = this.raw.length;
+        await this.archive.extractFiles();
+
+        let files = await this.archive.getFilesArray();
+        files.sort((a, b) => {
+            if (a.file.name < b.file.name)
+                return -1;
+            else
+                return 1;
+        });
+
+        for (let file of files) {
+            let url = URL.createObjectURL(file.file);
+            this.urls.push(url);
+        }
+    }
+
+    getLength() {
+        return this.raw.length;
+    }
+
+    async item(index) {
+        if (this.urls[index]) {
+            return this.urls[index];
+        }
+
+        await this.loadPromise;
+        return this.urls[index];
+    }
+}
+
+export default ComicsPlayer;