mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #2236 from thornbill/fix-epub-touch

Browse source 
Fix touch support in epub reader
This commit is contained in:
Joshua M. Boniface 2020-12-22 22:25:21 -05:00 • committed by GitHub
commit b60407abcc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/plugins/bookPlayer/plugin.js
View file

@ -6,7 +6,7 @@ import keyboardnavigation from '../../scripts/keyboardNavigation';
import dialogHelper from '../../components/dialogHelper/dialogHelper'; import dialogHelper from '../../components/dialogHelper/dialogHelper';
import ServerConnections from '../../components/ServerConnections'; import ServerConnections from '../../components/ServerConnections';
import TableOfContents from './tableOfContents'; import TableOfContents from './tableOfContents';
import browser from '../../scripts/browser'; import dom from '../../scripts/dom';
import { translateHtml } from '../../scripts/globalize'; import { translateHtml } from '../../scripts/globalize';
import '../../scripts/dom'; import '../../scripts/dom';
@ -31,9 +31,10 @@ export class BookPlayer {
this.onDialogClosed = this.onDialogClosed.bind(this); this.onDialogClosed = this.onDialogClosed.bind(this);
this.openTableOfContents = this.openTableOfContents.bind(this); this.openTableOfContents = this.openTableOfContents.bind(this);
this.prevChapter = this.prevChapter.bind(this); this.previous = this.previous.bind(this);
this.nextChapter = this.nextChapter.bind(this); this.next = this.next.bind(this);
this.onWindowKeyUp = this.onWindowKeyUp.bind(this); this.onWindowKeyUp = this.onWindowKeyUp.bind(this);
this.onTouchStart = this.onTouchStart.bind(this);
} }
play(options) { play(options) {
@ -109,20 +110,18 @@ export class BookPlayer {
onWindowKeyUp(e) { onWindowKeyUp(e) {
const key = keyboardnavigation.getKeyName(e); const key = keyboardnavigation.getKeyName(e);
const rendition = this.rendition;
const book = rendition.book;
if (!this.loaded) return; if (!this.loaded) return;
switch (key) { switch (key) {
case 'l': case 'l':
case 'ArrowRight': case 'ArrowRight':
case 'Right': case 'Right':
book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next(); this.next();
break; break;
case 'j': case 'j':
case 'ArrowLeft': case 'ArrowLeft':
case 'Left': case 'Left':
book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev(); this.previous();
break; break;
case 'Escape': case 'Escape':
if (this.tocElement) { if (this.tocElement) {
@ -136,6 +135,19 @@ 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() { onDialogClosed() {
this.stop(); this.stop();
} }
@ -146,8 +158,8 @@ export class BookPlayer {
elem.addEventListener('close', this.onDialogClosed, {once: true}); elem.addEventListener('close', this.onDialogClosed, {once: true});
elem.querySelector('#btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true}); elem.querySelector('#btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true});
elem.querySelector('#btnBookplayerToc').addEventListener('click', this.openTableOfContents); elem.querySelector('#btnBookplayerToc').addEventListener('click', this.openTableOfContents);
elem.querySelector('#btnBookplayerPrev')?.addEventListener('click', this.prevChapter); elem.querySelector('#btnBookplayerPrev')?.addEventListener('click', this.previous);
elem.querySelector('#btnBookplayerNext')?.addEventListener('click', this.nextChapter); elem.querySelector('#btnBookplayerNext')?.addEventListener('click', this.next);
} }
bindEvents() { bindEvents() {
@ -155,7 +167,7 @@ export class BookPlayer {
document.addEventListener('keyup', this.onWindowKeyUp); document.addEventListener('keyup', this.onWindowKeyUp);
// FIXME: I don't really get why document keyup event is not triggered when epub is in focus this.rendition.on('touchstart', this.onTouchStart);
this.rendition.on('keyup', this.onWindowKeyUp); this.rendition.on('keyup', this.onWindowKeyUp);
} }
@ -165,8 +177,8 @@ export class BookPlayer {
elem.removeEventListener('close', this.onDialogClosed); elem.removeEventListener('close', this.onDialogClosed);
elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed); elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed);
elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents); elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents);
elem.querySelector('#btnBookplayerPrev')?.removeEventListener('click', this.prevChapter); elem.querySelector('#btnBookplayerPrev')?.removeEventListener('click', this.previous);
elem.querySelector('#btnBookplayerNext')?.removeEventListener('click', this.nextChapter); elem.querySelector('#btnBookplayerNext')?.removeEventListener('click', this.next);
} }
unbindEvents() { unbindEvents() {
@ -176,9 +188,8 @@ export class BookPlayer {
document.removeEventListener('keyup', this.onWindowKeyUp); document.removeEventListener('keyup', this.onWindowKeyUp);
if (this.rendition) { this.rendition?.off('touchstart', this.onTouchStart);
this.rendition.off('keyup', this.onWindowKeyUp); this.rendition?.off('keyup', this.onWindowKeyUp);
}
} }
openTableOfContents() { openTableOfContents() {
@ -187,14 +198,18 @@ export class BookPlayer {
} }
} }
prevChapter(e) { previous(e) {
this.rendition.prev(); e?.preventDefault();
e.preventDefault(); if (this.rendition) {
this.rendition.book.package.metadata.direction === 'rtl' ? this.rendition.next() : this.rendition.prev();
}
} }
nextChapter(e) { next(e) {
this.rendition.next(); e?.preventDefault();
e.preventDefault(); if (this.rendition) {
this.rendition.book.package.metadata.direction === 'rtl' ? this.rendition.prev() : this.rendition.next();
}
} }
createMediaElement() { createMediaElement() {