Merge pull request #1325 from MrTimscampi/comic-reader

Add barebones comic book reader

package.json

@@ -52,7 +52,8 @@
     "stylelint-order": "^4.1.0",
     "webpack": "^4.44.1",
     "webpack-merge": "^4.2.2",
-    "webpack-stream": "^6.0.0"
+    "webpack-stream": "^6.0.0",
+    "worker-plugin": "^5.0.0"
   },
   "dependencies": {
     "alameda": "^1.4.0",
@@ -71,6 +72,7 @@
     "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto",
     "jquery": "^3.5.1",
     "jstree": "^3.3.10",
+    "libarchive.js": "^1.3.0",
     "libass-wasm": "https://github.com/jellyfin/JavascriptSubtitlesOctopus#4.0.0-jf-smarttv",
     "material-design-icons-iconfont": "^5.0.1",
     "native-promise-only": "^0.8.0-a",
@@ -178,6 +180,7 @@
           "src/plugins/experimentalWarnings/plugin.js",
           "src/plugins/sessionPlayer/plugin.js",
           "src/plugins/htmlAudioPlayer/plugin.js",
+          "src/plugins/comicsPlayer/plugin.js",
           "src/plugins/chromecastPlayer/plugin.js",
           "src/components/slideshow/slideshow.js",
           "src/components/sortmenu/sortmenu.js",

src/bundle.js

@@ -175,3 +175,9 @@ _define('connectionManagerFactory', function () {
 _define('appStorage', function () {
     return apiclient.AppStorage;
 });
+
+// libarchive.js
+var libarchive = require('libarchive.js');
+_define('libarchive', function () {
+    return libarchive;
+});

src/config.template.json

@@ -28,6 +28,7 @@
         "plugins/htmlAudioPlayer/plugin",
         "plugins/htmlVideoPlayer/plugin",
         "plugins/photoPlayer/plugin",
+        "plugins/comicsPlayer/plugin",
         "plugins/bookPlayer/plugin",
         "plugins/youtubePlayer/plugin",
         "plugins/backdropScreensaver/plugin",

src/plugins/comicsPlayer/plugin.js

@@ -0,0 +1,214 @@
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import dialogHelper from 'dialogHelper';
+import keyboardnavigation from 'keyboardnavigation';
+import appRouter from 'appRouter';
+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;
+        }
+
+        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 = 'comicsPlayer';
+            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 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
+                        }
+                    });
+                });
+            });
+        });
+    }
+
+    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) {
+            /* eslint-disable-next-line compat/compat */
+            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;

src/scripts/site.js

@@ -526,7 +526,8 @@ function initClient() {
                     'events',
                     'credentialprovider',
                     'connectionManagerFactory',
-                    'appStorage'
+                    'appStorage',
+                    'comicReader'
                 ]
             },
             urlArgs: urlArgs,

webpack.common.js

@@ -1,10 +1,12 @@
 const path = require('path');
 
 const CopyPlugin = require('copy-webpack-plugin');
+const WorkerPlugin = require('worker-plugin');
 
 const Assets = [
     'alameda/alameda.js',
     'native-promise-only/npo.js',
+    'libarchive.js/dist/worker-bundle.js',
     'libass-wasm/dist/js/subtitles-octopus-worker.js',
     'libass-wasm/dist/js/subtitles-octopus-worker.data',
     'libass-wasm/dist/js/subtitles-octopus-worker.wasm',
@@ -13,6 +15,11 @@ const Assets = [
     'libass-wasm/dist/js/subtitles-octopus-worker-legacy.js.mem'
 ];
 
+const LibarchiveWasm = [
+    'libarchive.js/dist/wasm-gen/libarchive.js',
+    'libarchive.js/dist/wasm-gen/libarchive.wasm'
+];
+
 module.exports = {
     context: path.resolve(__dirname, 'src'),
     entry: './bundle.js',
@@ -35,6 +42,15 @@ module.exports = {
                     to: path.resolve(__dirname, './dist/libraries')
                 };
             })
-        )
+        ),
+        new CopyPlugin(
+            LibarchiveWasm.map(asset => {
+                return {
+                    from: path.resolve(__dirname, `./node_modules/${asset}`),
+                    to: path.resolve(__dirname, './dist/libraries/wasm-gen/')
+                };
+            })
+        ),
+        new WorkerPlugin()
     ]
 };

yarn.lock

@@ -6560,6 +6560,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+libarchive.js@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/libarchive.js/-/libarchive.js-1.3.0.tgz#18c42c6b4ce727a02359c90769e4e454cf3743cd"
+  integrity sha512-EkQfRXt9DhWwj6BnEA2TNpOf4jTnzSTUPGgE+iFxcdNqjktY8GitbDeHnx8qZA0/IukNyyBUR3oQKRdYkO+HFg==
+
 "libass-wasm@https://github.com/jellyfin/JavascriptSubtitlesOctopus#4.0.0-jf-smarttv":
   version "4.0.0"
   resolved "https://github.com/jellyfin/JavascriptSubtitlesOctopus#58e9a3f1a7f7883556ee002545f445a430120639"
@@ -12036,6 +12041,13 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+worker-plugin@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/worker-plugin/-/worker-plugin-5.0.0.tgz#113b5fe1f4a5d6a957cecd29915bedafd70bb537"
+  integrity sha512-AXMUstURCxDD6yGam2r4E34aJg6kW85IiaeX72hi+I1cxyaMUtrvVY6sbfpGKAj5e7f68Acl62BjQF5aOOx2IQ==
+  dependencies:
+    loader-utils "^1.1.0"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"