Merge pull request jellyfin#1681 from jellyfin/book-paging

Add paging in book player with touch events
iwalton3 · Aug 2, 2020 · cefdde1 · cefdde1
2 parents 60ca2d5 + c76f550
commit cefdde1
Showing 1 changed file with 36 additions and 11 deletions.
diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js
@@ -2,6 +2,7 @@ import connectionManager from 'connectionManager';
 import loading from 'loading';
 import keyboardnavigation from 'keyboardnavigation';
 import dialogHelper from 'dialogHelper';
+import dom from 'dom';
 import events from 'events';
 import 'css!./style';
 import 'material-icons';
@@ -93,23 +94,22 @@ export class BookPlayer {
 
     onWindowKeyUp(e) {
         let key = keyboardnavigation.getKeyName(e);
-        let rendition = this._rendition;
+
+        // TODO: depending on the event this can be the document or the rendition itself
+        let rendition = this._rendition || this;
         let book = rendition.book;
 
+        if (this._loaded === false) return;
         switch (key) {
             case 'l':
             case 'ArrowRight':
             case 'Right':
-                if (this._loaded) {
-                    book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
-                }
+                book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
                 break;
             case 'j':
             case 'ArrowLeft':
             case 'Left':
-                if (this._loaded) {
-                    book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
-                }
+                book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
                 break;
             case 'Escape':
                 if (this._tocElement) {
@@ -123,6 +123,25 @@ export class BookPlayer {
         }
     }
 
+    onTouchStart(e) {
+        // TODO: depending on the event this can be the document or the rendition itself
+        let rendition = this._rendition || this;
+        let book = rendition.book;
+
+        // check that the event is from the book or the document
+        if (!book || this._loaded === false) return;
+
+        // epubjs stores pages off the screen or something for preloading
+        // get the modulus of the touch event to account for the increased width
+        if (!e.touches || e.touches.length === 0) return;
+        let touch = e.touches[0].clientX % dom.getWindowSize().innerWidth;
+        if (touch < dom.getWindowSize().innerWidth / 2) {
+            book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
+        } else {
+            book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
+        }
+    }
+
     onDialogClosed() {
         this.stop();
     }
@@ -139,8 +158,11 @@ export class BookPlayer {
         this.bindMediaElementEvents();
 
         document.addEventListener('keyup', this.onWindowKeyUp);
+        document.addEventListener('touchstart', this.onTouchStart);
+
         // FIXME: I don't really get why document keyup event is not triggered when epub is in focus
         this._rendition.on('keyup', this.onWindowKeyUp);
+        this._rendition.on('touchstart', this.onTouchStart);
     }
 
     unbindMediaElementEvents() {
@@ -155,9 +177,13 @@ export class BookPlayer {
         if (this._mediaElement) {
             this.unbindMediaElementEvents();
         }
+
         document.removeEventListener('keyup', this.onWindowKeyUp);
+        document.removeEventListener('touchstart', this.onTouchStart);
+
         if (this._rendition) {
             this._rendition.off('keyup', this.onWindowKeyUp);
+            this._rendition.off('touchstart', this.onTouchStart);
         }
     }
 
@@ -169,13 +195,11 @@ export class BookPlayer {
 
     createMediaElement() {
         let elem = this._mediaElement;
-
         if (elem) {
             return elem;
         }
 
         elem = document.getElementById('bookPlayer');
-
         if (!elem) {
             elem = dialogHelper.createDialog({
                 exitAnimationDuration: 400,
@@ -185,6 +209,7 @@ export class BookPlayer {
                 exitAnimation: 'fadeout',
                 removeOnClose: true
             });
+
             elem.id = 'bookPlayer';
 
             let html = '';
@@ -230,6 +255,7 @@ export class BookPlayer {
                 let cancellationToken = {
                     shouldCancel: false
                 };
+
                 this._cancellationToken = cancellationToken;
 
                 return rendition.display().then(() => {
@@ -253,7 +279,6 @@ export class BookPlayer {
                         epubElem.style.display = 'block';
                         rendition.on('relocated', (locations) => {
                             this._progress = book.locations.percentageFromCfi(locations.start.cfi);
-
                             events.trigger(this, 'timeupdate');
                         });
 
@@ -262,7 +287,7 @@ export class BookPlayer {
                         return resolve();
                     });
                 }, () => {
-                    console.error('Failed to display epub');
+                    console.error('failed to display epub');
                     return reject();
                 });
             });