diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index be5beb98ed..c167046cb9 100644 --- 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(); }); });