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

package/CHANGELOG.md

@@ -1,8 +1,3 @@
-# 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",
+  "version": "5.0.0-40-a1",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -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.2.2"
+    "lit": "^2.1.3"
   },
   "devDependencies": {
     "@babel/core": "7.17.5",

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

@@ -1,7 +1,6 @@
 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: '',
@@ -29,10 +28,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';
@@ -175,10 +174,13 @@ export default class SearchProvider {
   `;
   }
 
-  /**
-   * @param {{ detail: {match: SearchInsideMatch} }} param0
-   */
   onSearchResultsClicked({ detail }) {
-    this.bookreader._searchPluginGoToResult(detail.match.matchIndex);
+    const page = detail.match.par[0].page;
+    this.advanceToPage(page);
+  }
+
+  advanceToPage(leaf) {
+    const page = this.bookreader.leafNumToIndex(leaf);
+    this.bookreader._searchPluginGoToResult(page);
   }
 }

package/src/BookReader/PageContainer.js

@@ -103,10 +103,6 @@ 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;
 }
 
@@ -115,9 +111,8 @@ 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, rectClasses = null) {
+export function renderBoxesInPageContainerLayer(layerClass, boxes, page, containerEl) {
   const mountedSvg = containerEl.querySelector(`.${layerClass}`);
   // Create the layer if it's not there
   const svg = mountedSvg || createSVGPageLayer(page, layerClass);
@@ -127,12 +122,5 @@ export function renderBoxesInPageContainerLayer(layerClass, boxes, page, contain
     if (imgEl) $(svg).insertAfter(imgEl);
     else $(svg).prependTo(containerEl);
   }
-
-  for (const [i, box] of boxes.entries()) {
-    const rect = boxToSVGRect(box);
-    if (rectClasses) {
-      rect.setAttribute('class', rectClasses[i]);
-    }
-    svg.appendChild(rect);
-  }
+  boxes.forEach(box => svg.appendChild(boxToSVGRect(box)));
 }

package/src/BookReader/utils.js

@@ -238,27 +238,3 @@ 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,8 +1006,10 @@ BookReader.prototype.jumpToPage = function(pageNum) {
  * @param {PageIndex} index
  */
 BookReader.prototype._isIndexDisplayed = function(index) {
-  return this.displayedIndices ? this.displayedIndices.includes(index) :
-    this.currentIndex() == 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;
 };
 
 /**

package/src/css/_BRsearch.scss

@@ -31,22 +31,9 @@
     pointer-events: none;
 
     rect {
-      // 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;
-      }
+      fill: #0000ff;
+      fill-opacity: 0.2;
+      animation: hiliteFadeIn .2s;
     }
   }
 
@@ -220,8 +207,8 @@
   }
 }
 
-@keyframes highlightFocus {
-  to { stroke-width: 20px; }
+@keyframes hiliteFadeIn {
+  from { fill-opacity: 0; }
 }
 
 /* Mid size breakpoint */

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

@@ -1,4 +1,3 @@
-// @ts-check
 /* global BookReader */
 /**
  * Plugin for Archive.org book search
@@ -24,7 +23,6 @@
  * @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 */
@@ -114,14 +112,7 @@ 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;
-      const boxes = this._searchBoxesByIndex[pageIndex];
-      renderBoxesInPageContainerLayer(
-        'searchHiliteLayer',
-        boxes,
-        pageContainer.page,
-        pageContainer.$container[0],
-        boxes.map(b => `match-index-${b.matchIndex}`),
-      );
+      renderBoxesInPageContainerLayer('searchHiliteLayer', this._searchBoxesByIndex[pageIndex], pageContainer.page, pageContainer.$container[0]);
     }
     return pageContainer;
   };
@@ -189,7 +180,7 @@ BookReader.prototype.search = async function(term = '', overrides = {}) {
 
   const url = `${baseUrl}${paramStr}`;
 
-  const callSearchResultsCallback = (searchInsideResults) => {
+  const processSearchResults = (searchInsideResults) => {
     if (this.searchCancelled) {
       return;
     }
@@ -209,7 +200,7 @@ BookReader.prototype.search = async function(term = '', overrides = {}) {
   };
 
   this.trigger('SearchStarted', { term: this.searchTerm, instance: this });
-  callSearchResultsCallback(await $.ajax({
+  return processSearchResults(await $.ajax({
     url: url,
     dataType: 'jsonp',
     cache: true,
@@ -251,12 +242,10 @@ 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
  */
@@ -270,27 +259,19 @@ 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) {
-    this._searchPluginGoToResult(0);
+    const pageIndex = this._models.book.leafNumToIndex(results.matches[0].par[0].page);
+    this._searchPluginGoToResult(pageIndex);
   }
   this.trigger('SearchCallback', { results, options, instance: this });
 };
@@ -335,7 +316,7 @@ BookReader.prototype._BRSearchCallbackError = function(results) {
 BookReader.prototype.updateSearchHilites = function() {
   /** @type {SearchInsideMatch[]} */
   const matches = this.searchResults?.matches || [];
-  /** @type { {[pageIndex: number]: SearchInsideMatchBox[]} } */
+  /** @type { {[pageIndex: number]: SearchInsideMatch[]} } */
   const boxesByIndex = {};
 
   // Clear any existing svg layers
@@ -345,8 +326,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 pageBoxes = boxesByIndex[pageIndex] || (boxesByIndex[pageIndex] = []);
-      pageBoxes.push(box);
+      const pageMatches = boxesByIndex[pageIndex] || (boxesByIndex[pageIndex] = []);
+      pageMatches.push(box);
     }
   }
 
@@ -355,9 +336,7 @@ BookReader.prototype.updateSearchHilites = function() {
     const pageIndex = parseFloat(pageIndexString);
     const page = this._models.book.getPage(pageIndex);
     const pageContainers = this.getActivePageContainerElementsForIndex(pageIndex);
-    for (const container of pageContainers) {
-      renderBoxesInPageContainerLayer('searchHiliteLayer', boxes, page, container, boxes.map(b => `match-index-${b.matchIndex}`));
-    }
+    pageContainers.forEach(container => renderBoxesInPageContainerLayer('searchHiliteLayer', boxes, page, container));
   }
 
   this._searchBoxesByIndex = boxesByIndex;
@@ -375,14 +354,11 @@ 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 {number} matchIndex
+ * @param {PageIndex} pageIndex
  */
-BookReader.prototype._searchPluginGoToResult = async function (matchIndex) {
-  const match = this.searchResults?.matches[matchIndex];
-  const pageIndex = this.leafNumToIndex(match.par[0].page);
+BookReader.prototype._searchPluginGoToResult = async function (pageIndex) {
   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({
@@ -403,35 +379,13 @@ BookReader.prototype._searchPluginGoToResult = async function (matchIndex) {
     }
   }
   /* this updates the URL */
-  if (!this._isIndexDisplayed(pageIndex)) {
-    this.suppressFragmentChange = false;
-    this.jumpToIndex(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,6 +260,7 @@ 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
@@ -276,7 +277,12 @@ class SearchView {
           $(event.target).addClass('front');
         })
         .on("mouseleave", (event) => $(event.target).removeClass('front'))
-        .on("click", () => { this.br._searchPluginGoToResult(match.matchIndex); });
+        .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));
     });
   }
 

package/src/plugins/tts/FestivalTTSEngine.js

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

package/src/plugins/tts/WebTTSEngine.js

@@ -1,7 +1,6 @@
 /* global br */
 import { isChrome, isFirefox } from '../../util/browserSniffing.js';
-import { promisifyEvent, isAndroid } from './utils.js';
-import { sleep } from '../../BookReader/utils.js';
+import { sleep, promisifyEvent, isAndroid } from './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,6 +26,15 @@ 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/BookReader/utils.js';
+import { sleep } from '@/src/plugins/tts/utils';
 import sinon from 'sinon';
 
 beforeAll(() => {

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

@@ -178,15 +178,6 @@ 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,5 +1,4 @@
 import sinon from 'sinon';
-import { afterEventLoop } from '../utils.js';
 import {
   clamp,
   cssPercentage,
@@ -9,10 +8,8 @@ import {
   escapeHTML,
   getActiveElement,
   isInputActive,
-  poll,
   polyfillCustomEvent,
   PolyfilledCustomEvent,
-  sleep,
 } from '@/src/BookReader/utils.js';
 
 test('clamp function returns Math.min(Math.max(value, min), max)', () => {
@@ -137,50 +134,3 @@ 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,6 +66,31 @@ 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,6 +23,21 @@ 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({
@@ -91,6 +106,7 @@ describe('Search Provider', () => {
           _searchPluginGoToResult: sinon.fake()
         }
       });
+      sinon.spy(provider, 'advanceToPage');
 
       const searchResultStub = {
         match: { par: [{ text: 'foo', page: 3 }] },
@@ -100,6 +116,7 @@ describe('Search Provider', () => {
           { detail: searchResultStub })
       );
 
+      expect(provider.advanceToPage.callCount).to.equal(1);
       expect(provider.bookreader._searchPluginGoToResult.callCount).to.equal(1);
     });
   });