@internetarchive/bookreader 5.0.0-90 → 5.0.0-92

package/src/plugins/search/view.js

@@ -1,13 +1,17 @@
+// @ts-check
+/** @typedef {import('@/src/BookReader.js').default} BookReader */
+
 class SearchView {
   /**
    * @param {object} params
-   * @param {object} params.br The BookReader instance
-   * @param {function} params.cancelSearch callback when a user wants to cancel search
+   * @param {BookReader} params.br The BookReader instance
+   * @param {function} params.searchCancelledCallback callback when a user wants to cancel search
    *
    * @event BookReader:SearchResultsCleared - when the search results nav gets cleared
    * @event BookReader:ToggleSearchMenu - when search results menu should toggle
    */
   constructor({ br, searchCancelledCallback = () => {} }) {
+    /** @type {BookReader} */
     this.br = br;
     this.matches = [];
     this.cacheDOMElements();
@@ -40,7 +44,7 @@ class SearchView {
   }
 
   clearSearchFieldAndResults(dispatchEventWhenComplete = true) {
-    this.br.removeSearchResults();
+    this.br._plugins.search.removeSearchResults();
     this.removeResultPins();
     this.emptyMatches();
     this.setQuery('');
@@ -269,15 +273,15 @@ class SearchView {
           $(event.target).addClass('front');
         })
         .on("mouseleave", (event) => $(event.target).removeClass('front'))
-        .on("click", () => { this.br._searchPluginGoToResult(match.matchIndex); });
+        .on("click", () => { this.br._plugins.search.jumpToMatch(match.matchIndex); });
     });
   }
 
   /**
-   * @param {boolean} bool
+   * @param {boolean} show
    */
-  toggleSearchPending(bool) {
-    if (bool) {
+  toggleSearchPending(show = false) {
+    if (show) {
       this.br.showProgressPopup("Search results will appear below...", () => this.progressPopupClosed());
     }
     else {
@@ -375,11 +379,11 @@ class SearchView {
 
   handleSearchStarted() {
     this.emptyMatches();
-    this.br.removeSearchHilites();
+    this.br._plugins.search.removeSearchHilites();
     this.removeResultPins();
     this.toggleSearchPending(true);
     this.teardownSearchNavigation();
-    this.setQuery(this.br.searchTerm);
+    this.setQuery(this.br._plugins.search.searchTerm);
   }
 
   /**

package/src/plugins/tts/WebTTSEngine.js

@@ -1,6 +1,6 @@
 /* global br */
 import { isChrome, isFirefox } from '../../util/browserSniffing.js';
-import { isAndroid } from './utils.js';
+import { isAndroid, DEBUG_READ_ALOUD } from './utils.js';
 import { promisifyEvent, sleep } from '../../BookReader/utils.js';
 import AbstractTTSEngine from './AbstractTTSEngine.js';
 /** @typedef {import("./AbstractTTSEngine.js").PageChunk} PageChunk */
@@ -13,7 +13,7 @@ import AbstractTTSEngine from './AbstractTTSEngine.js';
  **/
 export default class WebTTSEngine extends AbstractTTSEngine {
   static isSupported() {
-    return typeof(window.speechSynthesis) !== 'undefined' && !/samsungbrowser/i.test(navigator.userAgent);
+    return typeof(window.speechSynthesis) !== 'undefined';
   }
 
   /** @param {TTSEngineOptions} options */
@@ -48,6 +48,10 @@ export default class WebTTSEngine extends AbstractTTSEngine {
           ],
         });
 
+        navigator.mediaSession.setPositionState({
+          duration: Infinity,
+        });
+
         navigator.mediaSession.setActionHandler('play', () => {
           audio.play();
           this.resume();
@@ -147,12 +151,12 @@ export class WebTTSSound {
     this.utterance.rate = this.rate;
 
     // Useful for debugging things
-    if (location.toString().indexOf('_debugReadAloud=true') != -1) {
+    if (DEBUG_READ_ALOUD) {
       this.utterance.addEventListener('pause', () => console.log('pause'));
       this.utterance.addEventListener('resume', () => console.log('resume'));
       this.utterance.addEventListener('start', () => console.log('start'));
       this.utterance.addEventListener('end', () => console.log('end'));
-      this.utterance.addEventListener('error', () => console.log('error'));
+      this.utterance.addEventListener('error', ev => console.log('error', ev));
       this.utterance.addEventListener('boundary', () => console.log('boundary'));
       this.utterance.addEventListener('mark', () => console.log('mark'));
       this.utterance.addEventListener('finish', () => console.log('finish'));
@@ -260,24 +264,25 @@ export class WebTTSSound {
     // 2. Pause doesn't work and doesn't fire
     // 3. Pause works but doesn't fire
     const pauseMightNotWork = (isFirefox() && isAndroid());
-    const pauseMightNotFire = isChrome() || pauseMightNotWork;
 
-    if (pauseMightNotFire) {
-      // wait for it just in case
-      const timeoutPromise = sleep(100).then(() => 'timeout');
-      const result = await Promise.race([pausePromise, timeoutPromise]);
-      // We got our pause event; nothing to do!
-      if (result != 'timeout') return;
+    // Pause sometimes works, but doesn't fire the event, so wait to see if it fires
+    const winner = await Promise.race([pausePromise, sleep(100).then(() => 'timeout')]);
 
-      this.utterance.dispatchEvent(new CustomEvent('pause', this._lastEvents.start));
+    // We got our pause event; nothing to do!
+    if (winner != 'timeout') return;
 
-      // if pause might not work, then we'll stop entirely and restart later
-      if (pauseMightNotWork) this.stop();
+    if (DEBUG_READ_ALOUD) {
+      console.log('TTS: Firing pause event manually');
     }
+
+    this.utterance.dispatchEvent(new CustomEvent('pause', this._lastEvents.start));
+
+    // if pause might not work, then we'll stop entirely and restart later
+    if (pauseMightNotWork) this.stop();
   }
 
   async resume() {
-    if (!this.started) {
+    if (!this.started || this.stopped) {
       this.play();
       return;
     }
@@ -289,22 +294,24 @@ export class WebTTSSound {
     // 2. Resume works + doesn't fire (Chrome Desktop)
     // 3. Resume doesn't work + doesn't fire (Chrome/FF Android)
     const resumeMightNotWork = (isChrome() && isAndroid()) || (isFirefox() && isAndroid());
-    const resumeMightNotFire = isChrome() || resumeMightNotWork;
 
     // Try resume
     const resumePromise = promisifyEvent(this.utterance, 'resume');
     speechSynthesis.resume();
 
-    if (resumeMightNotFire) {
-      const result = await Promise.race([resumePromise, sleep(100).then(() => 'timeout')]);
+    const winner = await Promise.race([resumePromise, sleep(100).then(() => 'timeout')]);
+    // We got resume! All is good
+    if (winner != 'timeout') return;
 
-      if (result != 'timeout') return;
+    if (DEBUG_READ_ALOUD) {
+      console.log('TTS: Firing resume event manually');
+    }
 
-      this.utterance.dispatchEvent(new CustomEvent('resume', {}));
-      if (resumeMightNotWork) {
-        await this.reload();
-        this.play();
-      }
+    // Fake it
+    this.utterance.dispatchEvent(new CustomEvent('resume', {}));
+    if (resumeMightNotWork) {
+      await this.reload();
+      this.play();
     }
   }
 
@@ -326,37 +333,56 @@ export class WebTTSSound {
    * by pausing after 14 seconds and ~instantly resuming.
    */
   async _chromePausingBugFix() {
-    const timeoutPromise = sleep(14000).then(() => 'timeout');
-    const pausePromise = promisifyEvent(this.utterance, 'pause').then(() => 'paused');
-    const endPromise = promisifyEvent(this.utterance, 'end').then(() => 'ended');
-    const result = await Promise.race([timeoutPromise, pausePromise, endPromise]);
-    if (location.toString().indexOf('_debugReadAloud=true') != -1) {
+    if (DEBUG_READ_ALOUD) {
+      console.log('CHROME-PAUSE-HACK: starting');
+    }
+
+    const result = await Promise.race([
+      sleep(14000).then(() => 'timeout'),
+      promisifyEvent(this.utterance, 'pause').then(() => 'pause'),
+      promisifyEvent(this.utterance, 'end').then(() => 'end'),
+      // Some browsers (Edge) trigger error when the utterance is interrupted/stopped
+      promisifyEvent(this.utterance, 'error').then(() => 'error'),
+    ]);
+
+    if (DEBUG_READ_ALOUD) {
       console.log(`CHROME-PAUSE-HACK: ${result}`);
     }
-    switch (result) {
-    case 'ended':
+    if (result == 'end' || result == 'error') {
       // audio was stopped/finished; nothing to do
-      break;
-    case 'paused':
+      if (DEBUG_READ_ALOUD) {
+        console.log('CHROME-PAUSE-HACK: stopped (end/error)');
+      }
+    } else if (result == 'pause') {
       // audio was paused; wait for resume
       // Chrome won't let you resume the audio if 14s have passed 🤷‍
       // We could do the same as before (but resume+pause instead of pause+resume),
       // but that means we'd _constantly_ be running in the background. So in that
       // case, let's just restart the chunk
-      await Promise.race([
-        promisifyEvent(this.utterance, 'resume'),
+      const result2 = await Promise.race([
+        promisifyEvent(this.utterance, 'resume').then(() => 'resume'),
         sleep(14000).then(() => 'timeout'),
       ]);
-      result == 'timeout' ? this.reload() : this._chromePausingBugFix();
-      break;
-    case 'timeout':
-      // We hit Chrome's secret cut off time. Pause/resume
-      // to be able to keep TTS-ing
+      if (result2 == 'timeout') {
+        if (DEBUG_READ_ALOUD) {
+          console.log('CHROME-PAUSE-HACK: stopped (timed out while paused)');
+        }
+        // We hit Chrome's secret cut off time while paused, and
+        // won't be able to resume normally, so trigger a stop.
+        this.stop();
+      } else {
+        // The user resumed before the cut off! Continue as normal
+        this._chromePausingBugFix();
+      }
+    } else if (result == 'timeout') {
+      // We hit Chrome's secret cut off time while playing.
+      // To be able to keep TTS-ing, quickly pause/resume.
       speechSynthesis.pause();
       await sleep(25);
       speechSynthesis.resume();
+
+      // Listen for more
       this._chromePausingBugFix();
-      break;
     }
   }
 }

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

@@ -278,10 +278,8 @@ export class TtsPlugin extends BookReaderPlugin {
    * @param {Number} leafIndex
    */
   async maybeFlipToIndex(leafIndex) {
-    if (this.br.constMode2up != this.br.mode) {
+    if (!this.br._isIndexDisplayed(leafIndex)) {
       this.br.jumpToIndex(leafIndex);
-    } else {
-      await this.br._modes.mode2Up.mode2UpLit.jumpToIndex(leafIndex);
     }
   }
 

package/src/plugins/tts/utils.js

@@ -79,3 +79,16 @@ export function hasLocalStorage() {
     return false;
   }
 }
+
+export const DEBUG_READ_ALOUD = location.toString().indexOf('_debugReadAloud=true') != -1;
+
+export async function checkIfFiresPause() {
+  // Pick some random text so that if it accidentally speaks, it's not too annoying
+  const u = new SpeechSynthesisUtterance("Loading");
+  let calledPause = false;
+  u.addEventListener('pause', () => calledPause = true);
+  speechSynthesis.speak(u);
+  await new Promise(res => setTimeout(res, 10));
+  speechSynthesis.pause();
+  return calledPause;
+}

package/src/util/browserSniffing.js

@@ -7,7 +7,17 @@
  * @return {boolean}
  */
 export function isChrome(userAgent = navigator.userAgent, vendor = navigator.vendor) {
-  return /chrome/i.test(userAgent) && /google inc/i.test(vendor);
+  return /chrome/i.test(userAgent) && /google inc/i.test(vendor) && !isEdge(userAgent);
+}
+
+/**
+ * Checks whether the current browser is a Edge browser
+ * See https://learn.microsoft.com/en-us/microsoft-edge/web-platform/user-agent-guidance
+ * @param {string} [userAgent]
+ * @return {boolean}
+ */
+export function isEdge(userAgent = navigator.userAgent) {
+  return /chrome/i.test(userAgent) && /\bEdg(e|A|iOS)?\b/i.test(userAgent);
 }
 
 /**

package/tests/e2e/helpers/mockSearch.js

@@ -2,7 +2,7 @@ export const TEST_TEXT_FOUND = 'theory';
 export const TEST_TEXT_NOT_FOUND = 'HopefullyNotFoundLongWord';
 export const PAGE_FIRST_RESULT = 30;
 
-export const SEARCH_INSIDE_URL_RE  = /https:\/\/ia[0-9]+\.us\.archive\.org\/fulltext\/inside\.php\?item_id=.*/;
+export const SEARCH_INSIDE_URL_RE  = /\/fulltext\/inside\.php/;
 
 /** Mock response for a matching search term. */
 export function mockResponseFound(req, res) {

package/tests/jest/BookNavigator/book-navigator.test.js

@@ -164,14 +164,20 @@ describe('<book-navigator>', () => {
         expect(el.menuProviders.visualAdjustments).toBeInstanceOf(VisualAdjustmentsProvider);
       });
       describe('Loading Sub Menus By Plugin Flags', () => {
-        test('Search: uses `enableSearch` flag', async() => {
+        test('Search: uses `enabled` flag', async() => {
           const el = fixtureSync(container());
           const $brContainer = document.createElement('div');
           const brStub = {
             resize: sinon.fake(),
             currentIndex: sinon.fake(),
             jumpToIndex: sinon.fake(),
-            options: { enableSearch: true },
+            options: {
+              plugins: {
+                search: {
+                  enabled: true,
+                },
+              },
+            },
             refs: {
               $brContainer,
             },
@@ -346,7 +352,6 @@ describe('<book-navigator>', () => {
 
             let sidePanelConfig = {};
             el.addEventListener('updateSideMenu', (e) => {
-              console.log();
               sidePanelConfig = e.detail;
             });
             const toggleSearchMenuEvent = new Event('BookReader:ToggleSearchMenu');

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

@@ -88,7 +88,11 @@ describe('Search Provider', () => {
         onProviderChange: sinon.fake(),
         bookreader: {
           leafNumToIndex: sinon.fake(),
-          _searchPluginGoToResult: sinon.fake(),
+          _plugins: {
+            search: {
+              jumpToMatch: sinon.fake(),
+            },
+          },
         },
       });
 
@@ -100,7 +104,7 @@ describe('Search Provider', () => {
           { detail: searchResultStub }),
       );
 
-      expect(provider.bookreader._searchPluginGoToResult.callCount).toEqual(1);
+      expect(provider.bookreader._plugins.search.jumpToMatch.callCount).toEqual(1);
     });
     test('update url when search is cancelled or input cleared', async() => {
       const urlPluginMock = {
@@ -111,7 +115,11 @@ describe('Search Provider', () => {
         onProviderChange: sinon.fake(),
         bookreader: {
           leafNumToIndex: sinon.fake(),
-          _searchPluginGoToResult: sinon.fake(),
+          _plugins: {
+            search: {
+              jumpToMatch: sinon.fake(),
+            },
+          },
           urlPlugin: urlPluginMock,
         },
       });
@@ -145,7 +153,11 @@ describe('Search Provider', () => {
         onProviderChange: sinon.fake(),
         bookreader: {
           leafNumToIndex: sinon.fake(),
-          _searchPluginGoToResult: sinon.fake(),
+          _plugins: {
+            search: {
+              jumpToMatch: sinon.fake(),
+            },
+          },
           urlPlugin: urlPluginMock,
           search: sinon.fake(),
         },

package/tests/jest/BookNavigator/sharing/sharing-provider.test.js

@@ -39,7 +39,7 @@ describe('Sharing Provider', () => {
         item,
         baseHost,
         bookreader: {
-          options: { subPrefix },
+          subPrefix,
         },
       });
 

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

@@ -191,3 +191,73 @@ describe('`BookReader.prototype.prev`', () => {
   });
 });
 
+describe('`BookReader.prototype.jumpToIndex`', () => {
+  /**
+   * @param {Partial<BookReaderOptions>} overrides
+   */
+  function makeFakeBr(overrides = {}) {
+    const br = new BookReader({
+      data: [
+        [
+          { index: 0, viewable: true },
+        ],
+        [
+          { index: 1, viewable: false },
+          { index: 2, viewable: false },
+        ],
+        [
+          { index: 3, viewable: false },
+          { index: 4, viewable: false },
+        ],
+        [
+          { index: 5, viewable: true },
+        ],
+      ],
+      ...overrides,
+    });
+    br.init();
+
+    br._modes.mode2Up.jumpToIndex = sinon.fake();
+
+    expect(br.firstIndex).toBe(0);
+    expect(br.mode).toBe(br.constMode2up);
+
+    return br;
+  }
+
+  test('Jumping into an unviewables range will go to start of range', () => {
+    const br = makeFakeBr();
+    br.jumpToIndex(3, 0, 0, true);
+    expect(br._modes.mode2Up.jumpToIndex.callCount).toBe(1);
+    expect(br._modes.mode2Up.jumpToIndex.args[0][0]).toBe(1);
+  });
+
+  test('Trying to jump into unviewables range while in that range, will jump forward', () => {
+    const br = makeFakeBr();
+    br.displayedIndices = [1, 2];
+    br.jumpToIndex(3, 0, 0, true);
+    expect(br._modes.mode2Up.jumpToIndex.callCount).toBe(1);
+    expect(br._modes.mode2Up.jumpToIndex.args[0][0]).toBe(5);
+  });
+
+  test('Trying to jump into unviewables range while in that range, will do nothing if cannot jump forward', () => {
+    const br = makeFakeBr({
+      data: [
+        [
+          { index: 0, viewable: true },
+        ],
+        [
+          { index: 1, viewable: false },
+          { index: 2, viewable: false },
+        ],
+        [
+          { index: 3, viewable: false },
+          { index: 4, viewable: false },
+        ],
+      ],
+    });
+    br.displayedIndices = [1, 2];
+    br.jumpToIndex(3, 0, 0, true);
+    expect(br._modes.mode2Up.jumpToIndex.callCount).toBe(0);
+  });
+});

package/tests/jest/BookReader.test.js

@@ -7,7 +7,12 @@ import '@/src/plugins/url/plugin.url.js';
 let br;
 beforeAll(() => {
   document.body.innerHTML = '<div id="BookReader">';
-  br = new BookReader();
+  br = new BookReader({
+    server: '',
+    bookId: '',
+    subPrefix: '',
+    bookPath: '',
+  });
 });
 
 afterEach(() => {
@@ -91,6 +96,26 @@ test('calls switchMode with init option when init called', () => {
     .toHaveProperty('init', true);
 });
 
+test('has added BR property: server', () => {
+  expect(br).toHaveProperty('server');
+  expect(br.server).toBeDefined();
+});
+
+test('has added BR property: bookId', () => {
+  expect(br).toHaveProperty('bookId');
+  expect(br.bookId).toBeDefined();
+});
+
+test('has added BR property: subPrefix', () => {
+  expect(br).toHaveProperty('subPrefix');
+  expect(br.subPrefix).toBeDefined();
+});
+
+test('has added BR property: bookPath', () => {
+  expect(br).toHaveProperty('bookPath');
+  expect(br.bookPath).toBeDefined();
+});
+
 test('has suppressFragmentChange true when init with no input', () => {
   br._plugins.resume.getResumeValue = jest.fn(() => null);
   br.urlReadFragment = jest.fn(() => '');