diff --git a/package.json b/package.json
index 6dfe8fe5a..b696ed582 100644
--- a/package.json
+++ b/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",
diff --git a/src/bundle.js b/src/bundle.js
index 41164b828..25810f58e 100644
--- a/src/bundle.js
+++ b/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;
+});
diff --git a/src/config.template.json b/src/config.template.json
index 9d98e8b6f..0f308ccc1 100644
--- a/src/config.template.json
+++ b/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",
diff --git a/src/plugins/comicsPlayer/plugin.js b/src/plugins/comicsPlayer/plugin.js
new file mode 100644
index 000000000..5f9546b9f
--- /dev/null
+++ b/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 = '';
+
+ 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 `
+
+
+
+