diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index 0303275be2..0c3d6850aa 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -1,3 +1,4 @@ +import browser from 'browser'; import loading from 'loading'; import keyboardnavigation from 'keyboardnavigation'; import dialogHelper from 'dialogHelper'; @@ -18,6 +19,8 @@ export class BookPlayer { this.onDialogClosed = this.onDialogClosed.bind(this); this.openTableOfContents = this.openTableOfContents.bind(this); + this.prevChapter = this.prevChapter.bind(this); + this.nextChapter = this.nextChapter.bind(this); this.onWindowKeyUp = this.onWindowKeyUp.bind(this); } @@ -122,26 +125,6 @@ export class BookPlayer { } } - onTouchStart(e) { - // TODO: depending on the event this can be the document or the rendition itself - const rendition = this._rendition || this; - const 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; - - const 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(); } @@ -150,27 +133,33 @@ export class BookPlayer { const elem = this._mediaElement; elem.addEventListener('close', this.onDialogClosed, {once: true}); - elem.querySelector('.btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true}); - elem.querySelector('.btnBookplayerToc').addEventListener('click', this.openTableOfContents); + elem.querySelector('#btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true}); + elem.querySelector('#btnBookplayerToc').addEventListener('click', this.openTableOfContents); + if (browser.mobile) { + elem.querySelector('#btnBookplayerPrev').addEventListener('click', this.prevChapter); + elem.querySelector('#btnBookplayerNext').addEventListener('click', this.nextChapter); + } } bindEvents() { 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() { const elem = this._mediaElement; elem.removeEventListener('close', this.onDialogClosed); - elem.querySelector('.btnBookplayerExit').removeEventListener('click', this.onDialogClosed); - elem.querySelector('.btnBookplayerToc').removeEventListener('click', this.openTableOfContents); + elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed); + elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents); + if (browser.mobile) { + elem.querySelector('#btnBookplayerPrev').removeEventListener('click', this.prevChapter); + elem.querySelector('#btnBookplayerNext').removeEventListener('click', this.nextChapter); + } } unbindEvents() { @@ -179,11 +168,9 @@ export class BookPlayer { } 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); } } @@ -193,6 +180,16 @@ export class BookPlayer { } } + prevChapter(e) { + this._rendition.prev(); + e.preventDefault(); + } + + nextChapter(e) { + this._rendition.next(); + e.preventDefault(); + } + createMediaElement() { let elem = this._mediaElement; if (elem) { @@ -213,13 +210,22 @@ export class BookPlayer { elem.id = 'bookPlayer'; let html = ''; - html += '
'; - html += ''; + + if (browser.mobile) { + html += '
'; + } + + html += '
'; + html += '
'; + html += ''; + html += ''; html += '
'; - html += '
'; - html += ''; html += '
'; + if (browser.mobile) { + html += '
'; + } + elem.innerHTML = html; dialogHelper.open(elem); @@ -230,6 +236,21 @@ export class BookPlayer { return elem; } + render(elem, book) { + if (browser.mobile) { + return book.renderTo(elem, { + width: '100%', + height: '100%', + flow: 'scrolled-doc' + }); + } else { + return book.renderTo(elem, { + width: '100%', + height: '100%' + }); + } + } + setCurrentSrc(elem, options) { const item = options.items[0]; this._currentItem = item; @@ -248,7 +269,7 @@ export class BookPlayer { import('epubjs').then(({default: epubjs}) => { const downloadHref = apiClient.getItemDownloadUrl(item.Id); const book = epubjs(downloadHref, {openAs: 'epub'}); - const rendition = book.renderTo(elem, {width: '100%', height: '97%'}); + const rendition = this.render('viewer', book); this._currentSrc = downloadHref; this._rendition = rendition; diff --git a/src/plugins/bookPlayer/style.css b/src/plugins/bookPlayer/style.css index e37b995f31..99aad62260 100644 --- a/src/plugins/bookPlayer/style.css +++ b/src/plugins/bookPlayer/style.css @@ -7,18 +7,20 @@ background: #fff; } -.topRightActionButtons { - right: 0.5vh; +.topButtons { top: 0.5vh; z-index: 1002; - position: absolute; + position: sticky; } -.topLeftActionButtons { - left: 0.5vh; - top: 0.5vh; - z-index: 1002; - position: absolute; +#btnBookplayerToc { + float: left; + margin-left: 2vw; +} + +#btnBookplayerExit { + float: right; + margin-right: 2vw; } .bookplayerButtonIcon { @@ -37,3 +39,31 @@ .bookplayerErrorMsg { text-align: center; } + +#viewer { + align-items: flex-start; +} + +#btnBookplayerPrev { + margin: 0.5vh 0.5vh; + color: black; +} + +#btnBookplayerNext { + margin: 0.5vh 0.5vh; + color: black; +} + +.button-wrapper { + text-align: center; + position: relative; + height: 0; +} + +.top-button { + margin: 0.5vh 2em; +} + +.bottom-button { + margin: 2em 0.5vh; +}