Merge pull request #5741 from thornbill/epubjs-no-scripts

src/plugins/bookPlayer/plugin.js

@@ -6,9 +6,9 @@ import dialogHelper from '../../components/dialogHelper/dialogHelper';
 import ServerConnections from '../../components/ServerConnections';
 import Screenfull from 'screenfull';
 import TableOfContents from './tableOfContents';
-import dom from '../../scripts/dom';
 import { translateHtml } from '../../scripts/globalize';
 import * as userSettings from '../../scripts/settings/userSettings';
+import TouchHelper from 'scripts/touchHelper';
 import { PluginType } from '../../types/plugin.ts';
 import Events from '../../utils/events.ts';
 
@@ -45,7 +45,6 @@ export class BookPlayer {
         this.previous = this.previous.bind(this);
         this.next = this.next.bind(this);
         this.onWindowKeyUp = this.onWindowKeyUp.bind(this);
-        this.onTouchStart = this.onTouchStart.bind(this);
     }
 
     play(options) {
@@ -156,19 +155,6 @@ export class BookPlayer {
         }
     }
 
-    onTouchStart(e) {
-        if (!this.loaded || !e.touches || e.touches.length === 0) return;
-
-        // epubjs stores pages off the screen or something for preloading
-        // get the modulus of the touch event to account for the increased width
-        const touchX = e.touches[0].clientX % dom.getWindowSize().innerWidth;
-        if (touchX < dom.getWindowSize().innerWidth / 2) {
-            this.previous();
-        } else {
-            this.next();
-        }
-    }
-
     onDialogClosed() {
         this.stop();
     }
@@ -191,9 +177,12 @@ export class BookPlayer {
         this.bindMediaElementEvents();
 
         document.addEventListener('keyup', this.onWindowKeyUp);
+        this.rendition?.on('keyup', this.onWindowKeyUp);
 
-        this.rendition.on('touchstart', this.onTouchStart);
-        this.rendition.on('keyup', this.onWindowKeyUp);
+        const player = document.getElementById('bookPlayerContainer');
+        this.touchHelper = new TouchHelper(player);
+        Events.on(this.touchHelper, 'swipeleft', () => this.next());
+        Events.on(this.touchHelper, 'swiperight', () => this.previous());
     }
 
     unbindMediaElementEvents() {
@@ -216,9 +205,9 @@ export class BookPlayer {
         }
 
         document.removeEventListener('keyup', this.onWindowKeyUp);
-
-        this.rendition?.off('touchstart', this.onTouchStart);
         this.rendition?.off('keyup', this.onWindowKeyUp);
+
+        this.touchHelper?.destroy();
     }
 
     openTableOfContents() {
@@ -335,9 +324,7 @@ export class BookPlayer {
                     width: '100%',
                     height: renderHeight,
                     // TODO: Add option for scrolled-doc
-                    flow: 'paginated',
-                    // Scripted content is required to allow touch event passthrough in Safari
-                    allowScriptedContent: true
+                    flow: 'paginated'
                 });
 
                 this.currentSrc = downloadHref;

src/styles/ios.scss

@@ -1,3 +1,8 @@
 html {
     font-size: 82% !important;
 }
+
+// Fix touch events being swallowed by the epubjs iframe
+#bookPlayer iframe {
+    pointer-events: none;
+}