diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index 6418d84e6b..ef8fef28b5 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/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; diff --git a/src/styles/ios.scss b/src/styles/ios.scss index 2b61f49a4e..e24e920021 100644 --- a/src/styles/ios.scss +++ b/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; +}