@internetarchive/bookreader 5.0.0-118-alpha2 → 5.0.0-118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-118-alpha2",
+  "version": "5.0.0-118",
   "description": "The Internet Archive BookReader.",
   "type": "module",
   "files": [

package/src/BookReader/Navbar/Navbar.js

@@ -202,6 +202,8 @@ export class Navbar {
    * Switch navbar controls on mobile and desktop
    */
   switchNavbarControls() {
+    // `$root` is null when `showNavbar` is off
+    if (!this.$root) return;
     // we don't want navbar controls switching with liner-notes
     if (this.br.options.bookType !== 'linerNotes') {
       if (this.br.refs.$brContainer.prop('clientWidth') < 640) {
@@ -218,15 +220,12 @@ export class Navbar {
    */
   showMobileControls() {
     this.minimumControls.forEach((control) => {
-      const element = document.querySelector(`.BRnavMain .controls .${control}`);
-      if (element) element.classList.remove('hide');
+      this.$root.find(`.BRnavMain .controls .${control}`).removeClass('hide');
     });
     this.maximumControls.forEach((control) => {
-      const element = document.querySelector(`.BRnavMain .controls .${control}`);
-      if (element) element.classList.add('hide');
+      this.$root.find(`.BRnavMain .controls .${control}`).addClass('hide');
     });
-    const mobileNav = document.querySelector(`.BRnavMobile`);
-    if (mobileNav) mobileNav.classList.remove('hide');
+    this.$root.find('.BRnavMobile').removeClass('hide');
   }
 
   /**
@@ -235,15 +234,12 @@ export class Navbar {
    */
   showDesktopControls() {
     this.maximumControls.forEach((control) => {
-      const element = document.querySelector(`.BRnavMain .controls .${control}`);
-      if (element) element.classList.remove('hide');
+      this.$root.find(`.BRnavMain .controls .${control}`).removeClass('hide');
     });
     this.minimumControls.forEach((control) => {
-      const element = document.querySelector(`.BRnavMain .controls .${control}`);
-      if (element) element.classList.add('hide');
+      this.$root.find(`.BRnavMain .controls .${control}`).addClass('hide');
     });
-    const mobileNav = document.querySelector(`.BRnavMobile`);
-    if (mobileNav) mobileNav.classList.add('hide');
+    this.$root.find('.BRnavMobile').addClass('hide');
   }
 
   /**

package/src/plugins/tts/PageChunk.js

@@ -1,5 +1,10 @@
 import { applyVariables } from "../../util/strings.js";
 
+/** A chunk ends at the first sentence end after this many words */
+const MIN_WORDS_IN_CHUNK = 25;
+/** A chunk with no sentence end is cut at the first line end after this many words */
+const MAX_WORDS_IN_CHUNK = 50;
+
 /**
  * Class to manage a 'chunk' (approximately a paragraph) of text on a page.
  */
@@ -40,16 +45,38 @@ export default class PageChunk {
         pageChunks.push(placeholder);
       }
       return pageChunks;
-    } else {
-      const chunks = await $.ajax({
-        type: 'GET',
-        url: applyVariables(pageChunkUrl, { pageIndex: leafIndex }),
-        cache: true,
-        xhrFields: {
-          withCredentials: window.br.protected,
-        },
-      });
-      return PageChunk._fromTextWrapperResponse(leafIndex, chunks);
+    }
+
+    const ocrPage = await PageChunk._getTextSelectionOcrPage(leafIndex);
+    if (ocrPage) {
+      return PageChunk._fromTextWrapperResponse(leafIndex, PageChunk._chunkOcrPage(ocrPage));
+    }
+
+    const chunks = await $.ajax({
+      type: 'GET',
+      url: applyVariables(pageChunkUrl, { pageIndex: leafIndex }),
+      cache: true,
+      xhrFields: {
+        withCredentials: window.br.protected,
+      },
+    });
+    return PageChunk._fromTextWrapperResponse(leafIndex, chunks);
+  }
+
+  /**
+   * The text selection plugin's OCR for the page, if it has any. It's cached
+   * and shared with the text layer, so using it avoids requesting the page's
+   * text a second time.
+   * @param {number} leafIndex
+   * @return {Promise<Element | undefined>}
+   */
+  static async _getTextSelectionOcrPage(leafIndex) {
+    const textSelection = window.br.plugins.textSelection;
+    if (!textSelection?.options.enabled) return undefined;
+    try {
+      return await textSelection.getPageText(leafIndex);
+    } catch (e) {
+      return undefined;
     }
   }
 
@@ -67,6 +94,61 @@ export default class PageChunk {
     });
   }
 
+  /**
+   * Split a page of djvu xml OCR into roughly paragraph-sized chunks, in the
+   * same shape as BookReaderGetTextWrapper.php's response: each chunk is its
+   * text followed by a box per line (or part of a line) it covers. Running
+   * headers/footers are skipped.
+   * @param {Element} ocrPage djvu xml `OBJECT` element
+   * @return {Array<[String, ...DJVURect[]]>}
+   */
+  static _chunkOcrPage(ocrPage) {
+    /** @type {Array<[String, ...DJVURect[]]>} */
+    const chunks = [];
+    /** @type {string[]} */
+    let words = [];
+    /** @type {DJVURect[]} */
+    let rects = [];
+    /** @type {DJVURect | null} bounds of the current line's words in this chunk */
+    let lineRect = null;
+
+    const endChunk = () => {
+      if (lineRect) rects.push(lineRect);
+      chunks.push([words.join(' '), ...rects]);
+      words = [];
+      rects = [];
+      lineRect = null;
+    };
+
+    for (const line of ocrPage.querySelectorAll('LINE')) {
+      if (line.closest('PARAGRAPH')?.getAttribute('x-role') === 'header-footer') continue;
+
+      for (const word of line.querySelectorAll('WORD')) {
+        const [left, bottom, right, top] = (word.getAttribute('coords') ?? '').split(',').map(parseFloat);
+        const text = word.textContent.trim();
+        // Same words the text layer drops as unpositionable
+        if (!text || isNaN(top) || (left === 0 && top === 0)) continue;
+
+        lineRect = lineRect ? [
+          Math.min(lineRect[0], left),
+          Math.max(lineRect[1], bottom),
+          Math.max(lineRect[2], right),
+          Math.min(lineRect[3], top),
+        ] : [left, bottom, right, top];
+        words.push(text);
+
+        if (text.endsWith('.') && words.length > MIN_WORDS_IN_CHUNK) endChunk();
+      }
+
+      if (lineRect) rects.push(lineRect);
+      lineRect = null;
+      if (words.length > MAX_WORDS_IN_CHUNK) endChunk();
+    }
+
+    if (words.length) endChunk();
+    return chunks;
+  }
+
   /**
    * @private
    * Sometimes the first rectangle will be ridiculously wide/tall. Find those and fix them

package/src/plugins/tts/plugin.tts.js

@@ -5,7 +5,6 @@ import WebTTSEngine from './WebTTSEngine.js';
 import { toISO6391 } from './utils.js';
 import { en as tooltips } from './tooltip_dict.js';
 import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.js';
-import { throttle } from '../../BookReader/utils.js';
 import { BookReaderPlugin } from '../../BookReaderPlugin.js';
 import { applyVariables, countWords } from '../../util/strings.js';
 /** @typedef {import('./PageChunk.js').default} PageChunk */
@@ -73,10 +72,6 @@ export class TtsPlugin extends BookReaderPlugin {
           festivalUrl: applyVariables(this.options.remoteTtsUrl, this.br.options.vars),
         } : {}),
       });
-
-      // Resuming picks up inside the current chunk, so it would otherwise wait for the
-      // next one to register as activity.
-      this.ttsEngine.events.on('resume', this.signalUserIsActive);
     }
   }
 
@@ -282,30 +277,11 @@ export class TtsPlugin extends BookReaderPlugin {
     this.br.removeProgressPopup();
   }
 
-  /**
-   * Tell the lending code the patron is still here.
-   *
-   * `userAction` is how ia-book-actions decides a browse loan is still in use, but it
-   * is otherwise only triggered by an index change (see BookReader.prototype
-   * .updateFirstIndex) or a navbar click. Read aloud holds someone's attention without
-   * either: in 2up the engine reads both pages before it flips, so a spread can easily
-   * outlast the window the loan renewal allows, and a listener would have their loan
-   * auto-returned mid-playback. Driving the signal off chunk playback instead ties it
-   * to actual progress through the book.
-   *
-   * Throttled because chunks are paragraphs -- short ones would otherwise signal every
-   * few seconds, and the renewal only cares about minutes.
-   */
-  signalUserIsActive = throttle(() => {
-    this.br.trigger(BookReader.eventNames.userAction);
-  }, 60000, false);
-
   /**
    * @param {PageChunk} chunk
    * Returns once the flip is done
    */
   async beforeChunkPlay(chunk) {
-    this.signalUserIsActive();
     await this.maybeFlipToIndex(chunk.leafIndex);
     this.highlightChunk(chunk);
     this.scrollToChunk(chunk);

package/src/plugins/url/UrlPlugin.js

@@ -163,7 +163,10 @@ export class UrlPlugin {
     }
 
     if (this.urlMode == 'hash') {
-      window.location.replace('#' + concatenatedPath);
+      // Built from location.href so a <base href> on the page can't change
+      // the pathname, and replace() so page flips don't add history entries.
+      const [baseHref] = window.location.href.split('#');
+      window.location.replace(`${baseHref}#${concatenatedPath}`);
     }
     this.oldLocationHash = urlStrPath;
   }

package/src/plugins/url/plugin.url.js

@@ -173,7 +173,10 @@ BookReader.prototype.urlUpdateFragment = function() {
 
   if (this.options.urlMode === 'hash')  {
     const newQueryStringSearch = this.urlParamsFiltersOnlySearch(this.readQueryString());
-    window.location.replace('#' + newFragment + newQueryStringSearch);
+    // Built from location.href so a <base href> on the page can't change
+    // the pathname, and replace() so page flips don't add history entries.
+    const [baseHref] = window.location.href.split('#');
+    window.location.replace(`${baseHref}#${newFragment}${newQueryStringSearch}`);
     this.oldLocationHash = newFragment + newQueryStringSearch;
   }
 };