From bf6ac96376c9904a6d38b492dfd11cf16cab2602 Mon Sep 17 00:00:00 2001 From: Evan Reichard Date: Thu, 19 Oct 2023 19:03:15 -0400 Subject: [PATCH] [fix] non-default font size causes invalid page on resume --- assets/reader/index.js | 46 +++++++++++++++++++++++++++++++----------- 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/assets/reader/index.js b/assets/reader/index.js index 215ee8b..b425e72 100644 --- a/assets/reader/index.js +++ b/assets/reader/index.js @@ -63,6 +63,21 @@ class EBookReader { // Register Content Hook this.rendition.hooks.content.register(getStats); + + /** + * Display @ CFI x 2 (Hack) + * I'm pretty sure this is because we set font size in the rendition + * render hook that resides in initRenditionListeners, and that the + * logic in ePub.js runs before or in parallel with the hook when + * setting the CFI position. + * + * By running twice we ensure that the hook ran and set the font size + * already, which should now ensure the proper page on the second time + * around. + * + * Bug: https://github.com/futurepress/epub.js/issues/1194 + **/ + await this.rendition.display(cfi); await this.rendition.display(cfi); // Highlight Element - DOM Has Element @@ -90,17 +105,14 @@ class EBookReader { } /** - * This is a hack and maintains a wake lock. It will - * automatically disable if there's been no input for - * 10 minutes. + * This is a hack and maintains a wake lock. It will automatically disable + * if there's been no input for 10 minutes. * - * Ideally we use "navigator.wakeLock", but there's a - * bug in Safari (as of iOS 17.03) when intalled as a - * PWA that doesn't allow it to work [0] + * Ideally we use "navigator.wakeLock", but there's a bug in Safari (as of + * iOS 17.03) when intalled as a PWA that doesn't allow it to work [0] * - * Unfortunate downside is iOS indicates that "No Sleep" - * is playing in both the Control Center and Lock Screen. - * iOS also stops any background sound. + * Unfortunate downside is iOS indicates that "No Sleep" is playing in both + * the Control Center and Lock Screen. iOS also stops any background sound. * * [0] https://progressier.com/pwa-capabilities/screen-wake-lock **/ @@ -840,7 +852,19 @@ class EBookReader { let sectionItem = this.book.spine.get(spinePosition); await sectionItem.load(this.book.load.bind(this.book)); - // Document Rendered > Document Not Rendered + /** + * Prefer Document Rendered over Document Not Rendered + * + * If the rendition is not displayed, the document does not exist in the + * DOM. Since we return the matching element for potential theming, we + * want to first at least try to get the document that exists in the DOM. + * + * This is only relevant on initial load and on font resize when we theme + * the element to indicate to the user the last position, and is why we run + * this function twice in the setupReader function; once before render to + * get CFI, and once after render to get the actual element in the DOM to + * theme. + **/ let docItem = this.rendition .getContents() @@ -880,8 +904,6 @@ class EBookReader { return { cfi, element }; } - // getElementFromXPath(xpath) - /** * Get visible word count - used for reading stats **/