@internetarchive/bookreader 5.0.0-116 → 5.0.0-118-alpha1

package/README.md

@@ -167,7 +167,9 @@ To version bump the repo and prepare a release, run `npm version major|minor|pat
 We release BookReader [in-repo as tags](https://github.com/internetarchive/bookreader/releases) & also as a node module [@internetarchive/bookreader](https://www.npmjs.com/package/@internetarchive/bookreader)
 
 ## Tests
-We would like to get to 100% test coverage and are tracking our progress in this project: [BookReader Fidelity](https://github.com/internetarchive/bookreader/projects/5)
+
+When contributing code, please
+include unit tests and/or update tests accordingly. [Current code coverage can be tracked here](https://app.codecov.io/gh/internetarchive/bookreader).
 
 ### End to end tests
 We also have end to end tests using [Testcafe](https://devexpress.github.io/testcafe/documentation/getting-started/).  We write tests for the repo itself and also for our use on archive.org. You can read about them in [here](./tests/e2e/README.md). These are relatively easy to do, and a fantastic way of getting introduced to the wonders of BookReader.  Check the project board for open tickets to work on.  And if you don't see a test for something you spotted, feel free to make an issue.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-116",
+  "version": "5.0.0-118-alpha1",
   "description": "The Internet Archive BookReader.",
   "type": "module",
   "files": [
@@ -32,22 +32,23 @@
   "private": false,
   "dependencies": {
     "@internetarchive/bergamot-translator": "^0.4.9-ia.1",
-    "@internetarchive/ia-activity-indicator": "1.0.0",
-    "@internetarchive/ia-item-navigator": "2.2.3",
-    "@internetarchive/icon-bookmark": "1.4.1",
-    "@internetarchive/icon-close": "1.4.1",
-    "@internetarchive/icon-dl": "1.4.1",
-    "@internetarchive/icon-edit-pencil": "1.4.1",
-    "@internetarchive/icon-ia-logo": "1.4.1",
-    "@internetarchive/icon-magnify-minus": "1.4.1",
-    "@internetarchive/icon-magnify-plus": "1.4.1",
-    "@internetarchive/icon-search": "1.4.1",
-    "@internetarchive/icon-share": "1.4.1",
-    "@internetarchive/icon-toc": "1.4.1",
-    "@internetarchive/icon-visual-adjustment": "1.4.1",
-    "@internetarchive/modal-manager": "2.0.6",
-    "@internetarchive/shared-resize-observer": "0.2.0",
-    "interactjs": "^1.10.18",
+    "@internetarchive/ia-activity-indicator": "^1.0.0",
+    "@internetarchive/ia-item-navigator": "^2.2.3",
+    "@internetarchive/icon-bookmark": "^1.4.1",
+    "@internetarchive/icon-close": "^1.4.1",
+    "@internetarchive/icon-dl": "^1.4.1",
+    "@internetarchive/icon-edit-pencil": "^1.4.1",
+    "@internetarchive/icon-ellipses": "^1.4.1",
+    "@internetarchive/icon-ia-logo": "^1.4.1",
+    "@internetarchive/icon-magnify-minus": "^1.4.1",
+    "@internetarchive/icon-magnify-plus": "^1.4.1",
+    "@internetarchive/icon-search": "^1.4.1",
+    "@internetarchive/icon-share": "^1.4.1",
+    "@internetarchive/icon-toc": "^1.4.1",
+    "@internetarchive/icon-visual-adjustment": "^1.4.1",
+    "@internetarchive/modal-manager": "^2.0.6",
+    "@internetarchive/shared-resize-observer": "^0.2.0",
+    "interactjs": "1.10.18",
     "iso-language-codes": "2.0.0",
     "jquery": "3.6.1",
     "jquery-colorbox": "1.6.4",
@@ -67,27 +68,29 @@
     "@iiif/presentation-3": "2.2.3",
     "@open-wc/testing-helpers": "3.0.1",
     "@types/jest": "30.0.0",
-    "@webcomponents/webcomponentsjs": "^2.6.0",
+    "@webcomponents/webcomponentsjs": "2.6.0",
     "babel-loader": "10.1.1",
-    "concurrently": "10.0.3",
-    "core-js": "3.49.0",
+    "concurrently": "10.0.5",
+    "core-js": "3.50.0",
     "cpx2": "9.0.0",
+    "css-loader": "7.1.4",
     "eslint": "7.32.0",
-    "eslint-plugin-no-jquery": "^2.7.0",
+    "eslint-plugin-no-jquery": "2.7.0",
     "eslint-plugin-testcafe": "0.2.1",
     "http-server": "14.1.1",
-    "hypothesis": "^1.1627.0",
+    "hypothesis": "1.1766.0",
     "jest": "30.4.2",
     "jest-environment-jsdom": "30.4.1",
     "live-server": "1.2.2",
     "regenerator-runtime": "0.14.1",
-    "sass": "1.100.0",
-    "sinon": "22.0.0",
-    "svgo": "4.0.1",
-    "testcafe": "3.7.4",
+    "sass": "1.103.1",
+    "sass-loader": "17.0.0",
+    "sinon": "22.1.0",
+    "svgo": "4.1.0",
+    "testcafe": "3.7.6",
     "testcafe-browser-provider-browserstack": "1.15.2",
-    "webpack": "5.107.2",
-    "webpack-cli": "7.0.3"
+    "webpack": "5.109.2",
+    "webpack-cli": "7.2.2"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -95,7 +98,8 @@
       "node_modules/(?!(sinon|lit-html|lit-element|lit|@lit|@lit-labs|@internetarchive|@open-wc)/)"
     ],
     "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/$1"
+      "@/(.*)$": "<rootDir>/$1",
+      "\\.scss$": "<rootDir>/tests/jest/styleMock.js"
     },
     "setupFiles": [
       "./src/jquery-wrapper.js",
@@ -135,7 +139,7 @@
     "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing-helpers@latest @types/jest@latest eslint@7 eslint-plugin-no-jquery@latest eslint-plugin-testcafe@latest jest@latest jest-environment-jsdom@latest sinon@latest testcafe@latest",
     "update:test-deps:test": "npm run lint && npm run test && npm run test:e2e",
     "DOCS:update:build-deps": "These can cause strange changes, so do an npm run build + check file size (git diff --stat), and check the site is as expected",
-    "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest @babel/plugin-proposal-class-properties@latest @babel/plugin-proposal-decorators@latest babel-loader@latest core-js@latest regenerator-runtime@latest sass@latest svgo@latest webpack@latest webpack-cli@latest",
+    "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest @babel/plugin-proposal-class-properties@latest @babel/plugin-proposal-decorators@latest babel-loader@latest core-js@latest css-loader@latest regenerator-runtime@latest sass@latest sass-loader@latest svgo@latest webpack@latest webpack-cli@latest",
     "update:build-deps:test": "npm run build",
     "DOCS:update:dev-deps": "Packages used for development",
     "update:dev-deps": "npm i @iiif/presentation-2@latest @iiif/presentation-3@latest concurrently@latest cpx2@latest http-server@latest hypothesis@latest live-server@latest testcafe-browser-provider-browserstack@latest",
@@ -143,6 +147,6 @@
     "update:runtime-deps": "npm i @webcomponents/webcomponentsjs@latest interactjs@latest iso-language-codes@latest jquery@latest jquery-colorbox@latest jquery-ui@latest jquery-ui-touch-punch@latest jquery.browser@latest lit@latest soundmanager2@latest",
     "update:runtime-deps:test": "npm run build",
     "DOCS:update:ia-deps": "Packages by @internetarchive",
-    "update:ia-deps": "npm i @internetarchive/bergamot-translator@latest @internetarchive/ia-activity-indicator@latest @internetarchive/ia-item-navigator@latest @internetarchive/icon-bookmark@latest @internetarchive/icon-close@latest @internetarchive/icon-dl@latest @internetarchive/icon-edit-pencil@latest @internetarchive/icon-ia-logo@latest @internetarchive/icon-magnify-minus@latest @internetarchive/icon-magnify-plus@latest @internetarchive/icon-search@latest @internetarchive/icon-share@latest @internetarchive/icon-toc@latest @internetarchive/icon-visual-adjustment@latest @internetarchive/modal-manager@latest @internetarchive/shared-resize-observer@latest"
+    "update:ia-deps": "npm i @internetarchive/bergamot-translator@latest @internetarchive/ia-activity-indicator@latest @internetarchive/ia-item-navigator@latest @internetarchive/icon-bookmark@latest @internetarchive/icon-close@latest @internetarchive/icon-dl@latest @internetarchive/icon-edit-pencil@latest @internetarchive/icon-ellipses@latest @internetarchive/icon-ia-logo@latest @internetarchive/icon-magnify-minus@latest @internetarchive/icon-magnify-plus@latest @internetarchive/icon-search@latest @internetarchive/icon-share@latest @internetarchive/icon-toc@latest @internetarchive/icon-visual-adjustment@latest @internetarchive/modal-manager@latest @internetarchive/shared-resize-observer@latest"
   }
 }

package/src/BookReader.js

@@ -26,6 +26,7 @@ import 'jquery-ui-touch-punch';
 
 import PACKAGE_JSON from '../package.json';
 import * as utils from './BookReader/utils.js';
+import { singleScrollIntoView } from './util/dom.js';
 import { exposeOverrideable } from './BookReader/utils/classes.js';
 import { Navbar } from './BookReader/Navbar/Navbar.js';
 import { DEFAULT_OPTIONS, OptionsParseError } from './BookReader/options.js';
@@ -111,6 +112,8 @@ BookReader.PLUGINS = {
   chapters: null,
   /** @type {typeof import('./plugins/plugin.experiments.js').ExperimentsPlugin | null}*/
   experiments: null,
+  /** @type {typeof import('./plugins/plugin.iframe.js').IframePlugin | null}*/
+  iframe: null,
   /** @type {typeof import('./plugins/plugin.resume.js').ResumePlugin | null}*/
   resume: null,
   /** @type {typeof import('./plugins/search/plugin.search.js').SearchPlugin | null}*/
@@ -181,6 +184,7 @@ BookReader.prototype.setup = function(options) {
     autoplay: BookReader.PLUGINS.autoplay ? new BookReader.PLUGINS.autoplay(this) : null,
     chapters: BookReader.PLUGINS.chapters ? new BookReader.PLUGINS.chapters(this) : null,
     experiments: BookReader.PLUGINS.experiments ? new BookReader.PLUGINS.experiments(this) : null,
+    iframe: BookReader.PLUGINS.iframe ? new BookReader.PLUGINS.iframe(this) : null,
     search: BookReader.PLUGINS.search ? new BookReader.PLUGINS.search(this) : null,
     resume: BookReader.PLUGINS.resume ? new BookReader.PLUGINS.resume(this) : null,
     textSelection: BookReader.PLUGINS.textSelection ? new BookReader.PLUGINS.textSelection(this) : null,
@@ -1031,6 +1035,18 @@ BookReader.prototype.resizeBRcontainer = function(animate) {
   }
 };
 
+/**
+ * Scrolls the given element into view within the active mode's scroll container.
+ * @param {Element} el
+ * @param {object} [options]
+ * @param {'auto' | 'smooth'} [options.behavior]
+ * @param {'start' | 'center' | 'end' | 'nearest'} [options.block]
+ * @param {'start' | 'center' | 'end' | 'nearest'} [options.inline]
+ */
+BookReader.prototype.scrollIntoView = function(el, options) {
+  singleScrollIntoView(el, { ...options, scrollContainer: this.activeMode.scrollContainer });
+};
+
 BookReader.prototype.centerPageView = function() {
   const scrollWidth  = this.refs.$brContainer.prop('scrollWidth');
   const clientWidth  =  this.refs.$brContainer.prop('clientWidth');

package/src/css/_TextSelection.scss

@@ -145,16 +145,29 @@
     display: none;
 }
 
+
+$select-menu-radius: 25px;
+$select-menu-extended-radius: 10px;
 .br-select-menu__root {
   display: none;
-  border-radius: 20px;
-  background-color: #333;
   color: white;
   color-scheme: dark;
   padding: 2px;
   overflow: hidden;
   opacity: 1;
-  transition: border-radius 0.2s, opacity 0.2s;
+  transition: opacity 0.2s;
+  gap: 5px;
+
+  &[open] {
+    display: flex;
+  }
+
+  &[showextended] {
+    display: block;
+    gap: 0px;
+    background-color: #333;
+    border-radius: $select-menu-extended-radius;
+  }
 
   @starting-style {
     opacity: 0;
@@ -164,13 +177,6 @@
   opacity: 0;
   pointer-events: none;
 }
-.br-select-menu__root:hover {
-  border-radius: 8px;
-}
-
-.br-select-menu__root:hover .br-select-menu__option {
-  border-radius: 6px;
-}
 
 .br-select-menu__option {
   --iconWidth: 15px;
@@ -179,18 +185,40 @@
   background: transparent;
   display: flex;
   align-items: center;
-  border-radius: 20px;
+  border-radius: $select-menu-radius;
   font-family: inherit;
   color: inherit;
   border: 0;
-  transition: background-color 0.2s, border-radius 0.2s;
   cursor: pointer;
   text-wrap: nowrap;
-  padding: 4px;
-}
+  background-color: #333;
+  position: relative;
 
-.br-select-menu__option:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  @media (pointer: coarse) and (hover: none) {
+    padding: 4px 8px;
+    #br-select-more & {
+        padding: 4px;
+    }
+  }
+
+  &:hover:after {
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    top: 2px;
+    bottom: 2px;
+    content: "";
+    pointer-events: none;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: calc($select-menu-radius - 2px);
+  }
+
+  .br-select-menu__root[showextended] & {
+      width:100%;
+      &:hover:after {
+        border-radius: calc($select-menu-extended-radius - 2px);
+      }
+  }
 }
 
 .br-select-menu__icon {
@@ -198,24 +226,29 @@
   flex-shrink: 0;
   width: 17px;
   height: 17px;
+  padding: 2px;
 }
 
 .br-select-menu__label {
   margin-left: 4px;
   font-size: 12px;
+  margin-right: 4px;
 }
 
 @media (hover: hover) {
+    .br-select-menu__option {
+        padding: 4px;
+    }
     .br-select-menu__label {
         width: 0px;
-        margin-left: 0;
+        margin: 0;
         opacity: 0;
         interpolate-size: allow-keywords;
         transition: width 0.2s;
     }
     .br-select-menu__root:hover .br-select-menu__label {
         width: auto;
-        margin-left: 4px;
+        margin: 0 4px;
         opacity: 1;
     }
 }

package/src/plugins/plugin.chapters.js

@@ -7,6 +7,7 @@ import '@internetarchive/icon-toc/icon-toc.js';
 import { BookReaderPlugin } from "../BookReaderPlugin.js";
 import { applyVariables } from "../util/strings.js";
 import { promisifyEvent } from "../BookReader/utils.js";
+import { singleScrollIntoView } from "../util/dom.js";
 /** @typedef {import('@/src/BookReader/BookModel.js').PageIndex} PageIndex */
 /** @typedef {import('@/src/BookReader/BookModel.js').PageString} PageString */
 /** @typedef {import('@/src/BookReader/BookModel.js').LeafNum} LeafNum */
@@ -323,10 +324,13 @@ export class BRChaptersPanel extends LitElement {
 
   updated(changedProperties) {
     if (changedProperties.has('currentChapter')) {
-      this.shadowRoot.querySelector('li.current')?.scrollIntoView({
-        block: 'nearest',
-        behavior: 'smooth',
-      });
+      const currentEl = this.shadowRoot.querySelector('li.current');
+      if (currentEl) {
+        singleScrollIntoView(currentEl, {
+          block: 'nearest',
+          behavior: 'smooth',
+        });
+      }
     }
   }
 

package/src/plugins/plugin.iframe.js

@@ -1,48 +1,47 @@
-/* global BookReader */
-/**
- * Plugin for two-way communication between a BookReader in an IFrame and the
- * parent web page
- */
+// @ts-check
+import { EVENTS } from '../BookReader/events.js';
+import { BookReaderPlugin } from '../BookReaderPlugin.js';
 
 const MESSAGE_TYPE_FRAGMENT_CHANGE = 'bookReaderFragmentChange';
 
-BookReader.prototype.init = (function (super_) {
-  return function () {
-    super_.call(this);
-    _attachEventListeners(this);
-  };
-})(BookReader.prototype.init);
-
 /**
- * @private
- * Using window.postMessage() and event listeners, the plugin notifies the
- * parent window when pages change, and the parent window can also
- * explicitly request a page change by sending its own message.
- *
- * @param {BookReader} br
- * @param {Window?} [parent]
+ * Plugin for two-way communication between a BookReader in an IFrame and the
+ * parent web page. Using window.postMessage() and event listeners, the
+ * plugin notifies the parent window when pages change, and the parent
+ * window can also explicitly request a page change by sending its own
+ * message.
  */
-export function _attachEventListeners(br, parent = window.parent) {
-  // Not embedded, abort
-  if (!parent) {
-    return;
+export class IframePlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
   }
 
-  br.bind(BookReader.eventNames.fragmentChange, () => {
-    const fragment = br.fragmentFromParams(br.paramsFromCurrent());
-
-    parent.postMessage(
-      { type: MESSAGE_TYPE_FRAGMENT_CHANGE, fragment },
-      '*',
-    );
-  });
-
-  window.addEventListener('message', event => {
-    // Not a recognized message type, abort
-    if (!event.data || event.data.type !== MESSAGE_TYPE_FRAGMENT_CHANGE) {
+  /** @override */
+  init() {
+    // Not enabled, or not embedded, abort
+    if (!this.options.enabled || !window.parent) {
       return;
     }
 
-    br.updateFromParams(br.paramsFromFragment(event.data.fragment));
-  });
+    this.br.bind(EVENTS.fragmentChange, () => {
+      const fragment = this.br.fragmentFromParams(this.br.paramsFromCurrent());
+
+      window.parent.postMessage(
+        { type: MESSAGE_TYPE_FRAGMENT_CHANGE, fragment },
+        '*',
+      );
+    });
+
+    window.addEventListener('message', event => {
+      // Not a recognized message type, abort
+      if (!event.data || event.data.type !== MESSAGE_TYPE_FRAGMENT_CHANGE) {
+        return;
+      }
+
+      this.br.updateFromParams(this.br.paramsFromFragment(event.data.fragment));
+    });
+  }
 }
+
+const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
+BookReader?.registerPlugin('iframe', IframePlugin);

package/src/plugins/plugin.text_selection.js

@@ -6,6 +6,7 @@ import { Cache } from '../util/cache.js';
 import { toISO6391 } from './tts/utils.js';
 import { BookReaderTextFragment, renderHighlight, TextSelectionManager } from '../util/TextSelectionManager.js';
 import { genMap, lookAroundWindow, zip } from '../util/generators.js';
+import textSelectionCss from '../css/_TextSelection.scss';
 /** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
 /** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
 
@@ -39,6 +40,13 @@ export class TextSelectionPlugin extends BookReaderPlugin {
 
   _jumpedToHighlight = false;
 
+  /**
+   * Isolated document/layout used to performantly measure OCR text-layer
+   * elements.
+   * @type {Document}
+   */
+  _measurementDocument;
+
   /**
    * @param {import('../BookReader.js').default} br
    */
@@ -56,6 +64,19 @@ export class TextSelectionPlugin extends BookReaderPlugin {
   init() {
     if (!this.options.enabled) return;
 
+    // Setup measurement iframe for OCR
+    const measurementIframe = document.createElement('iframe');
+    measurementIframe.setAttribute('aria-hidden', 'true');
+    measurementIframe.tabIndex = -1;
+    measurementIframe.style.cssText = 'position:fixed; top:-99999px; left:-99999px; width:2000px; height:4000px; border:0; visibility:hidden;';
+    document.body.appendChild(measurementIframe);
+    this._measurementDocument = measurementIframe.contentDocument;
+    // Injects _TextSelection.scss so measurements match the real
+    // rendering
+    const style = this._measurementDocument.createElement('style');
+    style.textContent = textSelectionCss;
+    this._measurementDocument.head.appendChild(style);
+
     this.br.on('pageVisible', (_, {pageContainerEl}) => {
       const textLayer = pageContainerEl.querySelector('.BRtextLayer');
       if (textLayer) {
@@ -78,7 +99,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
           const markEls = renderHighlight(textLayer, targetTextFragment, 'BRhighlight--target-text');
           // Only jump once; presumably on first page load.
           if (!this._jumpedToHighlight) {
-            markEls[0].scrollIntoView({behavior: 'smooth', block: 'center'});
+            this.br.scrollIntoView(markEls[0], {behavior: 'smooth', block: 'center'});
             this._jumpedToHighlight = true;
           }
         }
@@ -94,7 +115,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
   _configurePageContainer(pageContainer) {
     // Disable if thumb mode; it's too janky
     // .page can be null for "pre-cover" region
-    if (this.br.mode !== this.br.constModeThumb && pageContainer.page?.isViewable) {
+    if (this.options.enabled && this.br.mode !== this.br.constModeThumb && pageContainer.page?.isViewable) {
       this.createTextLayer(pageContainer);
     }
     return pageContainer;
@@ -204,7 +225,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     });
 
     // Fix up paragraph positions
-    const paragraphRects = determineRealRects(textLayer, '.BRparagraphElement');
+    const paragraphRects = determineRealRects(textLayer, '.BRparagraphElement', this._measurementDocument);
     let yAdded = 0;
     for (const [ocrParagraph, paragEl] of zip(ocrParagraphs, paragEls)) {
       const ocrParagBounds = $(ocrParagraph).attr("coords").split(",").map(parseFloat);
@@ -312,7 +333,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     paragEl.style.fontSize = `${paragWordHeight}px`;
 
     // Fix up sizes - stretch/crush words as necessary using letter spacing
-    let wordRects = determineRealRects(paragEl, '.BRwordElement');
+    let wordRects = determineRealRects(paragEl, '.BRwordElement', this._measurementDocument);
     const ocrWords = $(ocrParagraph).find("WORD").toArray();
     const wordEls = paragEl.querySelectorAll('.BRwordElement');
     for (const [ocrWord, wordEl] of zip(ocrWords, wordEls)) {
@@ -333,8 +354,8 @@ export class TextSelectionPlugin extends BookReaderPlugin {
 
     // Stretch/crush lines as necessary using line spacing
     // Recompute rects after letter spacing
-    wordRects = determineRealRects(paragEl, '.BRwordElement');
-    const spaceRects = determineRealRects(paragEl, '.BRspace');
+    wordRects = determineRealRects(paragEl, '.BRwordElement', this._measurementDocument);
+    const spaceRects = determineRealRects(paragEl, '.BRspace', this._measurementDocument);
 
     const ocrLines = $(ocrParagraph).find("LINE[coords]").toArray();
     const lineEls = Array.from(paragEl.querySelectorAll('.BRlineElement'));
@@ -384,9 +405,11 @@ BookReader?.registerPlugin('textSelection', TextSelectionPlugin);
 /**
  * @param {HTMLElement} parentEl
  * @param {string} selector
+ * @param {Document} measurementDocument Isolated document to measure within
+ *   (see TextSelectionPlugin#_measurementDocument for why).
  * @returns {Map<Element, Rect>}
  */
-function determineRealRects(parentEl, selector) {
+function determineRealRects(parentEl, selector, measurementDocument) {
   const initals = {
     position: parentEl.style.position,
     visibility: parentEl.style.visibility,
@@ -399,21 +422,23 @@ function determineRealRects(parentEl, selector) {
   parentEl.style.top = '0';
   parentEl.style.left = '0';
   parentEl.style.transform = 'none';
-  document.body.appendChild(parentEl);
+  measurementDocument.body.appendChild(parentEl);
   const rects = new Map(
     Array.from(parentEl.querySelectorAll(selector))
       .map(wordEl => {
         const origRect = wordEl.getBoundingClientRect();
         return [wordEl, new Rect(
-          origRect.left + window.scrollX,
-          origRect.top + window.scrollY,
+          origRect.left + measurementDocument.defaultView.scrollX,
+          origRect.top + measurementDocument.defaultView.scrollY,
           origRect.width,
           origRect.height,
         )];
       }),
   );
-  document.body.removeChild(parentEl);
+  measurementDocument.body.removeChild(parentEl);
   Object.assign(parentEl.style, initals);
+  // Need to restore the document to the main window document
+  document.adoptNode(parentEl);
   return rects;
 }
 

package/src/plugins/search/plugin.search.js

@@ -383,14 +383,8 @@ export class SearchPlugin extends BookReaderPlugin {
     const $boxes = await poll(() => $(`rect.match-index-${match.matchIndex}`), { until: result => result.length > 0 });
     if ($boxes.length) {
       $boxes.css('animation', 'none');
-      $boxes[0].scrollIntoView({
-        // Only vertically center the highlight if we're in 1up or in full screen. In
-        // 2up, if we're not fullscreen, the whole body gets scrolled around to try to
-        // center the highlight 🙄 See:
-        // https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move/11041376
-        // Note: nearest doesn't quite work great, because the ReadAloud toolbar is now
-        // full-width, and covers up the last line of the highlight.
-        block: this.br.constMode1up == this.br.mode || this.br.isFullscreenActive ? 'center' : 'nearest',
+      this.br.scrollIntoView($boxes[0], {
+        block: 'center',
         inline: 'center',
         behavior: onNearbyPage ? 'smooth' : 'auto',
       });

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

@@ -5,6 +5,7 @@ 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 */
@@ -72,6 +73,10 @@ 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);
     }
   }
 
@@ -277,11 +282,30 @@ 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);
@@ -350,14 +374,9 @@ export class TtsPlugin extends BookReaderPlugin {
     // It behaves weird if used in thumb mode
     if (this.br.constModeThumb == this.br.mode) return;
 
-    $(`.pagediv${chunk.leafIndex} .ttsHiliteLayer rect`).last()?.[0]?.scrollIntoView({
-      // Only vertically center the highlight if we're in 1up or in full screen. In
-      // 2up, if we're not fullscreen, the whole body gets scrolled around to try to
-      // center the highlight 🙄 See:
-      // https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move/11041376
-      // Note: nearest doesn't quite work great, because the ReadAloud toolbar is now
-      // full-width, and covers up the last line of the highlight.
-      block: this.br.constMode1up == this.br.mode || this.br.isFullscreenActive ? 'center' : 'nearest',
+    const highlightRect = $(`.pagediv${chunk.leafIndex} .ttsHiliteLayer rect`).last()?.[0];
+    this.br.scrollIntoView(highlightRect, {
+      block: 'center',
       inline: 'center',
       behavior: 'smooth',
     });