@internetarchive/bookreader 5.0.0-40-a1 → 5.0.0-42-a1

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 5.0.0-40
+Fix: Better search highlights @cdrini
+Dev: update lit 2 components @iisa
+Dev: update lit @renovate
+
 # 5.0.0-39
 Fix: Performance improvements to scroll/zooming when text layer is larger @cdrini
 Fix: Update zoom in/out icons to match iconochive glyphs @pezvi

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-40-a1",
+  "version": "5.0.0-42-a1",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
   "private": false,
   "dependencies": {
     "@internetarchive/ia-activity-indicator": "^0.0.2",
-    "@internetarchive/ia-item-navigator": "^1.0.0",
+    "@internetarchive/ia-item-navigator": "^1.0.1-a1",
     "@internetarchive/ia-sharing-options": "^1.0.1",
     "@internetarchive/icon-bookmark": "^1.3.2",
     "@internetarchive/icon-dl": "^1.3.3",
@@ -38,7 +38,7 @@
     "@internetarchive/icon-visual-adjustment": "^1.3.2",
     "@internetarchive/modal-manager": "^0.2.1",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "lit": "^2.1.3"
+    "lit": "^2.2.2"
   },
   "devDependencies": {
     "@babel/core": "7.17.5",
@@ -46,7 +46,7 @@
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/plugin-proposal-decorators": "7.17.2",
     "@babel/preset-env": "7.16.11",
-    "@open-wc/testing": "^3.1.2",
+    "@open-wc/testing": "^3.1.3",
     "@open-wc/testing-karma": "^4.0.9",
     "@types/jest": "^27.4.1",
     "@webcomponents/webcomponentsjs": "^2.6.0",
@@ -76,7 +76,7 @@
     "sinon": "^12.0.1",
     "soundmanager2": "2.97.20170602",
     "svgo": "2.4.0",
-    "testcafe": "^1.18.4",
+    "testcafe": "^1.18.6",
     "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",
     "webpack": "5.51.1",
     "webpack-cli": "4.8.0"

package/src/BookNavigator/search/search-provider.js

@@ -1,6 +1,7 @@
 import { html, nothing } from 'lit';
 import '@internetarchive/icon-search/icon-search';
 import './search-results';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
 
 let searchState = {
   query: '',
@@ -28,10 +29,10 @@ export default class SearchProvider {
     this.bindEventListeners = this.bindEventListeners.bind(this);
     this.getMenuDetails = this.getMenuDetails.bind(this);
     this.getComponent = this.getComponent.bind(this);
-    this.advanceToPage = this.advanceToPage.bind(this);
     this.updateMenu = this.updateMenu.bind(this);
 
     this.onProviderChange = onProviderChange;
+    /** @type {import('@/src/BookReader.js').default} */
     this.bookreader = bookreader;
     this.icon = html`<ia-icon-search style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-search>`;
     this.label = 'Search inside';
@@ -174,13 +175,10 @@ export default class SearchProvider {
   `;
   }
 
+  /**
+   * @param {{ detail: {match: SearchInsideMatch} }} param0
+   */
   onSearchResultsClicked({ detail }) {
-    const page = detail.match.par[0].page;
-    this.advanceToPage(page);
-  }
-
-  advanceToPage(leaf) {
-    const page = this.bookreader.leafNumToIndex(leaf);
-    this.bookreader._searchPluginGoToResult(page);
+    this.bookreader._searchPluginGoToResult(detail.match.matchIndex);
   }
 }

package/src/BookReader/PageContainer.js

@@ -103,6 +103,10 @@ export function boxToSVGRect({ l: left, r: right, b: bottom, t: top }) {
   rect.setAttribute("y", top.toString());
   rect.setAttribute("width", (right - left).toString());
   rect.setAttribute("height", (bottom - top).toString());
+
+  // Some style; corner radius 4px. Can't set this in CSS yet
+  rect.setAttribute("rx", "4");
+  rect.setAttribute("ry", "4");
   return rect;
 }
 
@@ -111,8 +115,9 @@ export function boxToSVGRect({ l: left, r: right, b: bottom, t: top }) {
  * @param {Array<{ l: number, r: number, b: number, t: number }>} boxes
  * @param {PageModel} page
  * @param {HTMLElement} containerEl
+ * @param {string[]} [rectClasses] CSS classes to add to the rects
  */
-export function renderBoxesInPageContainerLayer(layerClass, boxes, page, containerEl) {
+export function renderBoxesInPageContainerLayer(layerClass, boxes, page, containerEl, rectClasses = null) {
   const mountedSvg = containerEl.querySelector(`.${layerClass}`);
   // Create the layer if it's not there
   const svg = mountedSvg || createSVGPageLayer(page, layerClass);
@@ -122,5 +127,12 @@ export function renderBoxesInPageContainerLayer(layerClass, boxes, page, contain
     if (imgEl) $(svg).insertAfter(imgEl);
     else $(svg).prependTo(containerEl);
   }
-  boxes.forEach(box => svg.appendChild(boxToSVGRect(box)));
+
+  for (const [i, box] of boxes.entries()) {
+    const rect = boxToSVGRect(box);
+    if (rectClasses) {
+      rect.setAttribute('class', rectClasses[i]);
+    }
+    svg.appendChild(rect);
+  }
 }

package/src/BookReader/utils.js

@@ -238,3 +238,27 @@ export function arrEquals(arr1, arr2) {
 export function arrChanged(arr1, arr2) {
   return arr1 && arr2 && !arrEquals(arr1, arr2);
 }
+
+/**
+ * Waits the provided number of ms and then resolves with a promise
+ * @param {number} ms
+ **/
+export async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * @template T
+ * @param {function(): T} fn
+ * @param {Object} options
+ * @param {function(T): boolean} [options.until]
+ * @return {T | undefined}
+ */
+export async function poll(fn, { step = 50, timeout = 500, until = val => Boolean(val), _sleep = sleep } = {}) {
+  const startTime = Date.now();
+  while (Date.now() - startTime < timeout) {
+    const result = fn();
+    if (until(result)) return result;
+    await _sleep(step);
+  }
+}

package/src/BookReader.js

@@ -1006,10 +1006,8 @@ BookReader.prototype.jumpToPage = function(pageNum) {
  * @param {PageIndex} index
  */
 BookReader.prototype._isIndexDisplayed = function(index) {
-  // One up "caches" pages +- current, so exclude those in the test.
-  return this.constMode1up == this.mode ? this.displayedIndices.slice(1, -1).includes(index) :
-    this.displayedIndices ? this.displayedIndices.includes(index) :
-      this.currentIndex() == index;
+  return this.displayedIndices ? this.displayedIndices.includes(index) :
+    this.currentIndex() == index;
 };
 
 /**

package/src/css/_BRsearch.scss

@@ -31,9 +31,22 @@
     pointer-events: none;
 
     rect {
-      fill: #0000ff;
-      fill-opacity: 0.2;
-      animation: hiliteFadeIn .2s;
+      // Note: Can't use fill-opacity ; safari inexplicably applies that to
+      // the outline as well
+      fill: rgba(0, 0, 255, 0.2);
+    }
+  }
+
+  .searchHiliteLayer rect {
+    animation: highlightFocus 600ms 1 reverse;
+    stroke: blue;
+    stroke-width: 4px;
+
+    // Sass for loop for nth-child animation delay
+    @for $i from 1 through 10 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{($i - 1) * 50}ms;
+      }
     }
   }
 
@@ -207,8 +220,8 @@
   }
 }
 
-@keyframes hiliteFadeIn {
-  from { fill-opacity: 0; }
+@keyframes highlightFocus {
+  to { stroke-width: 20px; }
 }
 
 /* Mid size breakpoint */

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

@@ -1,3 +1,4 @@
+// @ts-check
 /* global BookReader */
 /**
  * Plugin for Archive.org book search
@@ -23,6 +24,7 @@
  * @event BookReader:SearchCanceled - When no results found. Receives
  *   `instance`
  */
+import { poll } from '../../BookReader/utils.js';
 import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.js';
 import SearchView from './view.js';
 /** @typedef {import('../../BookReader/PageContainer').PageContainer} PageContainer */
@@ -112,7 +114,14 @@ BookReader.prototype._createPageContainer = (function (super_) {
     const pageContainer = super_.call(this, index);
     if (this.enableSearch && pageContainer.page && index in this._searchBoxesByIndex) {
       const pageIndex = pageContainer.page.index;
-      renderBoxesInPageContainerLayer('searchHiliteLayer', this._searchBoxesByIndex[pageIndex], pageContainer.page, pageContainer.$container[0]);
+      const boxes = this._searchBoxesByIndex[pageIndex];
+      renderBoxesInPageContainerLayer(
+        'searchHiliteLayer',
+        boxes,
+        pageContainer.page,
+        pageContainer.$container[0],
+        boxes.map(b => `match-index-${b.matchIndex}`),
+      );
     }
     return pageContainer;
   };
@@ -180,7 +189,7 @@ BookReader.prototype.search = async function(term = '', overrides = {}) {
 
   const url = `${baseUrl}${paramStr}`;
 
-  const processSearchResults = (searchInsideResults) => {
+  const callSearchResultsCallback = (searchInsideResults) => {
     if (this.searchCancelled) {
       return;
     }
@@ -200,7 +209,7 @@ BookReader.prototype.search = async function(term = '', overrides = {}) {
   };
 
   this.trigger('SearchStarted', { term: this.searchTerm, instance: this });
-  return processSearchResults(await $.ajax({
+  callSearchResultsCallback(await $.ajax({
     url: url,
     dataType: 'jsonp',
     cache: true,
@@ -242,10 +251,12 @@ BookReader.prototype.cancelSearchRequest = function () {
   * @property {number} b
   * @property {number} t
   * @property {HTMLDivElement} [div]
+  * @property {number} matchIndex This is a fake field! not part of the API response. The index of the match that contains this box in total search results matches.
   */
 
 /**
  * @typedef {object} SearchInsideMatch
+ * @property {number} matchIndex This is a fake field! Not part of the API response. It is added by the JS.
  * @property {string} text
  * @property {Array<{ page: number, boxes: SearchInsideMatchBox[] }>} par
  */
@@ -259,19 +270,27 @@ BookReader.prototype.cancelSearchRequest = function () {
 
 /**
  * Search Results return handler
- * @callback
  * @param {SearchInsideResults} results
  * @param {object} options
  * @param {boolean} options.goToFirstResult
  */
 BookReader.prototype.BRSearchCallback = function(results, options) {
+  // Attach matchIndex to a few things to make it easier to identify
+  // an active/selected match
+  for (const [index, match] of results.matches.entries()) {
+    match.matchIndex = index;
+    for (const par of match.par) {
+      for (const box of par.boxes) {
+        box.matchIndex = index;
+      }
+    }
+  }
   this.searchResults = results || [];
 
   this.updateSearchHilites();
   this.removeProgressPopup();
   if (options.goToFirstResult) {
-    const pageIndex = this._models.book.leafNumToIndex(results.matches[0].par[0].page);
-    this._searchPluginGoToResult(pageIndex);
+    this._searchPluginGoToResult(0);
   }
   this.trigger('SearchCallback', { results, options, instance: this });
 };
@@ -316,7 +335,7 @@ BookReader.prototype._BRSearchCallbackError = function(results) {
 BookReader.prototype.updateSearchHilites = function() {
   /** @type {SearchInsideMatch[]} */
   const matches = this.searchResults?.matches || [];
-  /** @type { {[pageIndex: number]: SearchInsideMatch[]} } */
+  /** @type { {[pageIndex: number]: SearchInsideMatchBox[]} } */
   const boxesByIndex = {};
 
   // Clear any existing svg layers
@@ -326,8 +345,8 @@ BookReader.prototype.updateSearchHilites = function() {
   for (const match of matches) {
     for (const box of match.par[0].boxes) {
       const pageIndex = this.leafNumToIndex(box.page);
-      const pageMatches = boxesByIndex[pageIndex] || (boxesByIndex[pageIndex] = []);
-      pageMatches.push(box);
+      const pageBoxes = boxesByIndex[pageIndex] || (boxesByIndex[pageIndex] = []);
+      pageBoxes.push(box);
     }
   }
 
@@ -336,7 +355,9 @@ BookReader.prototype.updateSearchHilites = function() {
     const pageIndex = parseFloat(pageIndexString);
     const page = this._models.book.getPage(pageIndex);
     const pageContainers = this.getActivePageContainerElementsForIndex(pageIndex);
-    pageContainers.forEach(container => renderBoxesInPageContainerLayer('searchHiliteLayer', boxes, page, container));
+    for (const container of pageContainers) {
+      renderBoxesInPageContainerLayer('searchHiliteLayer', boxes, page, container, boxes.map(b => `match-index-${b.matchIndex}`));
+    }
   }
 
   this._searchBoxesByIndex = boxesByIndex;
@@ -354,11 +375,14 @@ BookReader.prototype.removeSearchHilites = function() {
  * Goes to the page specified. If the page is not viewable, tries to load the page
  * FIXME Most of this logic is IA specific, and should be less integrated into here
  * or at least more configurable.
- * @param {PageIndex} pageIndex
+ * @param {number} matchIndex
  */
-BookReader.prototype._searchPluginGoToResult = async function (pageIndex) {
+BookReader.prototype._searchPluginGoToResult = async function (matchIndex) {
+  const match = this.searchResults?.matches[matchIndex];
+  const pageIndex = this.leafNumToIndex(match.par[0].page);
   const { book } = this._models;
   const page = book.getPage(pageIndex);
+  const onNearbyPage = Math.abs(this.currentIndex() - pageIndex) < 3;
   let makeUnviewableAtEnd = false;
   if (!page.isViewable) {
     const resp = await fetch('/services/bookreader/request_page?' + new URLSearchParams({
@@ -379,13 +403,35 @@ BookReader.prototype._searchPluginGoToResult = async function (pageIndex) {
     }
   }
   /* this updates the URL */
-  this.suppressFragmentChange = false;
-  this.jumpToIndex(pageIndex);
+  if (!this._isIndexDisplayed(pageIndex)) {
+    this.suppressFragmentChange = false;
+    this.jumpToIndex(pageIndex);
+  }
 
   // Reset it to unviewable if it wasn't resolved
   if (makeUnviewableAtEnd) {
     book.getPage(pageIndex).makeViewable(false);
   }
+
+  // Scroll/flash in the ui
+  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.constMode1up == this.mode || this.isFullscreenActive ? 'center' : 'nearest',
+      inline: 'center',
+      behavior: onNearbyPage ? 'smooth' : 'auto',
+    });
+    // wait for animation to start
+    await new Promise(resolve => setTimeout(resolve, 100));
+    $boxes.removeAttr("style");
+  }
 };
 
 /**

package/src/plugins/search/view.js

@@ -260,7 +260,6 @@ class SearchView {
             <div>${uiStringPage} ${pageNumber}</div>
           </div>
         `)
-        .data({ pageIndex })
         .appendTo(this.br.$('.BRnavline'))
         .on("mouseenter", (event) => {
           // remove from other markers then turn on just for this
@@ -277,12 +276,7 @@ class SearchView {
           $(event.target).addClass('front');
         })
         .on("mouseleave", (event) => $(event.target).removeClass('front'))
-        .on("click", function (event) {
-          // closures are nested and deep, using an arrow function breaks references.
-          // Todo: update to arrow function & clean up closures
-          // to remove `bind` dependency
-          this.br._searchPluginGoToResult(+$(event.target).data('pageIndex'));
-        }.bind(this));
+        .on("click", () => { this.br._searchPluginGoToResult(match.matchIndex); });
     });
   }
 

package/src/plugins/tts/FestivalTTSEngine.js

@@ -1,5 +1,5 @@
 import AbstractTTSEngine from './AbstractTTSEngine.js';
-import { sleep } from './utils.js';
+import { sleep } from '../../BookReader/utils.js';
 /* global soundManager */
 import 'soundmanager2';
 import 'jquery.browser';

package/src/plugins/tts/WebTTSEngine.js

@@ -1,6 +1,7 @@
 /* global br */
 import { isChrome, isFirefox } from '../../util/browserSniffing.js';
-import { sleep, promisifyEvent, isAndroid } from './utils.js';
+import { promisifyEvent, isAndroid } from './utils.js';
+import { sleep } from '../../BookReader/utils.js';
 import AbstractTTSEngine from './AbstractTTSEngine.js';
 /** @typedef {import("./AbstractTTSEngine.js").PageChunk} PageChunk */
 /** @typedef {import("./AbstractTTSEngine.js").AbstractTTSSound} AbstractTTSSound */

package/src/plugins/tts/utils.js

@@ -26,15 +26,6 @@ export function approximateWordCount(text) {
   return m ? m.length : 0;
 }
 
-/**
- * Waits the provided number of ms and then resolves with a promise
- * @param {number} ms
- * @return {Promise}
- */
-export function sleep(ms) {
-  return new Promise(res => setTimeout(res, ms));
-}
-
 /**
  * Checks whether the current browser is on android
  * @param {string} [userAgent]

package/tests/jest/BookReader/BookReaderPublicFunctions.test.js

@@ -1,5 +1,5 @@
 import BookReader from '@/src/BookReader';
-import { sleep } from '@/src/plugins/tts/utils';
+import { sleep } from '@/src/BookReader/utils.js';
 import sinon from 'sinon';
 
 beforeAll(() => {

package/tests/jest/BookReader/PageContainer.test.js

@@ -178,6 +178,15 @@ describe('renderBoxesInPageContainerLayer', () => {
     expect(container.querySelectorAll('.foo rect').length).toBe(3);
   });
 
+  test('Adds optional classes', () => {
+    const container = document.createElement('div');
+    const page = { width: 100, height: 200 };
+    const boxes = [{l: 1, r: 2, t: 3, b: 4}, {l: 1, r: 2, t: 3, b: 4}, {l: 1, r: 2, t: 3, b: 4}];
+    renderBoxesInPageContainerLayer('foo', boxes, page, container, ['match-1', 'match-2', 'match-3']);
+    const rects = Array.from(container.querySelectorAll('.foo rect'));
+    expect(rects.map(r => r.getAttribute('class'))).toEqual(['match-1', 'match-2', 'match-3']);
+  });
+
   test('Handles no boxes', () => {
     const container = document.createElement('div');
     const page = { width: 100, height: 200 };

package/tests/jest/BookReader/utils.test.js

@@ -1,4 +1,5 @@
 import sinon from 'sinon';
+import { afterEventLoop } from '../utils.js';
 import {
   clamp,
   cssPercentage,
@@ -8,8 +9,10 @@ import {
   escapeHTML,
   getActiveElement,
   isInputActive,
+  poll,
   polyfillCustomEvent,
   PolyfilledCustomEvent,
+  sleep,
 } from '@/src/BookReader/utils.js';
 
 test('clamp function returns Math.min(Math.max(value, min), max)', () => {
@@ -134,3 +137,50 @@ describe('PolyfilledCustomEvent', () => {
     expect(initCustomEventSpy.callCount).toBe(1);
   });
 });
+
+describe('poll', () => {
+  beforeEach(() => jest.useFakeTimers());
+  afterEach(() => jest.useRealTimers());
+  test('polls until condition is true', async () => {
+    const fakeSleep = sinon.spy((ms) => jest.advanceTimersByTime(ms));
+
+    const returns = [null, null, 'foo'];
+    const check = sinon.spy(() => returns.shift());
+    const result = await poll(check, {_sleep: fakeSleep});
+    expect(fakeSleep.callCount).toBe(2);
+    expect(result).toBe('foo');
+    expect(check.callCount).toBe(3);
+  });
+
+  test('times out eventually', async () => {
+    const fakeSleep = sinon.spy((ms) => jest.advanceTimersByTime(ms));
+
+    const check = sinon.stub().returns(null);
+    const result = await poll(check, {_sleep: fakeSleep});
+    expect(result).toBeUndefined();
+    expect(check.callCount).toBe(10);
+  });
+});
+
+describe('sleep', () => {
+  test('Sleep 0 doest not called immediately', async () => {
+    const spy = sinon.spy();
+    sleep(0).then(spy);
+    expect(spy.callCount).toBe(0);
+    await afterEventLoop();
+    expect(spy.callCount).toBe(1);
+  });
+
+  test('Waits the appropriate ms', async () => {
+    const clock = sinon.useFakeTimers();
+    const spy = sinon.spy();
+    sleep(10).then(spy);
+    expect(spy.callCount).toBe(0);
+    clock.tick(10);
+    expect(spy.callCount).toBe(0);
+    clock.restore();
+
+    await afterEventLoop();
+    expect(spy.callCount).toBe(1);
+  });
+});

package/tests/jest/plugins/tts/utils.test.js

@@ -66,31 +66,6 @@ describe('approximateWordCount', () => {
   });
 });
 
-describe('sleep', () => {
-  const { sleep } = utils;
-
-  test('Sleep 0 doest not called immediately', async () => {
-    const spy = sinon.spy();
-    sleep(0).then(spy);
-    expect(spy.callCount).toBe(0);
-    await afterEventLoop();
-    expect(spy.callCount).toBe(1);
-  });
-
-  test('Waits the appropriate ms', async () => {
-    const clock = sinon.useFakeTimers();
-    const spy = sinon.spy();
-    sleep(10).then(spy);
-    expect(spy.callCount).toBe(0);
-    clock.tick(10);
-    expect(spy.callCount).toBe(0);
-    clock.restore();
-
-    await afterEventLoop();
-    expect(spy.callCount).toBe(1);
-  });
-});
-
 describe('toISO6391', () => {
   const { toISO6391 } = utils;
 

package/tests/karma/BookNavigator/search/search-provider.test.js

@@ -23,21 +23,6 @@ describe('Search Provider', () => {
     expect(provider.menuDetails).to.exist;
     expect(provider.component).to.exist;
   });
-  describe('BR calls', () => {
-    it('`advanceToPage', () => {
-      const provider = new searchProvider({
-        onProviderChange: sinon.fake(),
-        bookreader: {
-          leafNumToIndex: sinon.fake(),
-          _searchPluginGoToResult: sinon.fake()
-        }
-      });
-
-      provider.advanceToPage(1);
-      expect(provider?.bookreader.leafNumToIndex.callCount).to.equal(1);
-      expect(provider?.bookreader._searchPluginGoToResult.callCount).to.equal(1);
-    });
-  });
   describe('Search request life cycles', () => {
     it('Event: catches `BookReader:SearchStarted`', async() => {
       const provider = new searchProvider({
@@ -106,7 +91,6 @@ describe('Search Provider', () => {
           _searchPluginGoToResult: sinon.fake()
         }
       });
-      sinon.spy(provider, 'advanceToPage');
 
       const searchResultStub = {
         match: { par: [{ text: 'foo', page: 3 }] },
@@ -116,7 +100,6 @@ describe('Search Provider', () => {
           { detail: searchResultStub })
       );
 
-      expect(provider.advanceToPage.callCount).to.equal(1);
       expect(provider.bookreader._searchPluginGoToResult.callCount).to.equal(1);
     });
   });