@internetarchive/bookreader 5.0.0-90 → 5.0.0-91

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/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/plugins/plugin.chapters.test.js

@@ -1,7 +1,7 @@
 import sinon from "sinon";
 
-import BookReader from "@/src/BookReader.js";
-import "@/src/plugins/plugin.chapters.js";
+import "@/src/BookReader.js";
+import {ChaptersPlugin} from "@/src/plugins/plugin.chapters.js";
 import { BookModel } from "@/src/BookReader/BookModel";
 import { deepCopy } from "../utils";
 /** @typedef {import('@/src/plugins/plugin.chapters').TocEntry} TocEntry  */
@@ -68,50 +68,44 @@ afterEach(() => {
   sinon.restore();
 });
 
-describe("BRChaptersPlugin", () => {
+describe("ChaptersPlugin", () => {
   beforeEach(() => {
     sinon.stub(BookModel.prototype, "getPageIndex").callsFake((str) =>
       parseFloat(str),
     );
   });
 
-  describe("_chaptersInit", () => {
-    test("does not render when no open library record", async () => {
-      const fakeBR = {
-        options: {},
-        getOpenLibraryRecord: async () => null,
-        _chaptersRender: sinon.stub(),
-      };
-      await BookReader.prototype._chapterInit.call(fakeBR);
-      expect(fakeBR._chaptersRender.callCount).toBe(0);
+  describe("init", () => {
+    test("does not render when open library has no record", async () => {
+      const p = new ChaptersPlugin({ options: { vars: {} } });
+      sinon.stub(p, "getOpenLibraryRecord").resolves(null);
+      sinon.spy(p, "_render");
+      await p.init();
+      expect(p._render.callCount).toBe(0);
     });
 
-    test("does not render when open library record with no TOC", async () => {
-      const fakeBR = {
-        options: {},
-        getOpenLibraryRecord: async () => ({ key: "/books/OL1M" }),
-        _chaptersRender: sinon.stub(),
-      };
-      await BookReader.prototype._chapterInit.call(fakeBR);
-      expect(fakeBR._chaptersRender.callCount).toBe(0);
+    test("does not render when open library record has no TOC", async () => {
+      const p = new ChaptersPlugin({ options: { vars: {} } });
+      sinon.stub(p, "getOpenLibraryRecord").resolves({ key: "/books/OL1M" });
+      sinon.spy(p, "_render");
+      await p.init();
+      expect(p._render.callCount).toBe(0);
     });
 
     test("renders if valid TOC on open library", async () => {
       const fakeBR = {
-        options: {},
+        options: { vars: {} },
         bind: sinon.stub(),
-        book: {
-          getPageIndex: (str) => parseFloat(str),
-        },
-        getOpenLibraryRecord: async () => ({
-          "title": "The Adventures of Sherlock Holmes",
-          "table_of_contents": deepCopy(SAMPLE_TOC_OPTION),
-          "ocaid": "adventureofsherl0000unse",
-        }),
-        _chaptersRender: sinon.stub(),
       };
-      await BookReader.prototype._chapterInit.call(fakeBR);
-      expect(fakeBR._chaptersRender.callCount).toBe(1);
+      const p = new ChaptersPlugin(fakeBR);
+      sinon.stub(p, "getOpenLibraryRecord").resolves({
+        "title": "The Adventures of Sherlock Holmes",
+        "table_of_contents": deepCopy(SAMPLE_TOC_OPTION),
+        "ocaid": "adventureofsherl0000unse",
+      });
+      sinon.stub(p, "_render");
+      await p.init();
+      expect(p._render.callCount).toBe(1);
     });
 
     test("does not fetch open library record if table of contents in options", async () => {
@@ -120,12 +114,13 @@ describe("BRChaptersPlugin", () => {
           table_of_contents: deepCopy(SAMPLE_TOC_UNDEF),
         },
         bind: sinon.stub(),
-        getOpenLibraryRecord: sinon.stub(),
-        _chaptersRender: sinon.stub(),
       };
-      await BookReader.prototype._chapterInit.call(fakeBR);
-      expect(fakeBR.getOpenLibraryRecord.callCount).toBe(0);
-      expect(fakeBR._chaptersRender.callCount).toBe(1);
+      const p = new ChaptersPlugin(fakeBR);
+      sinon.stub(p, "getOpenLibraryRecord");
+      sinon.stub(p, "_render");
+      await p.init();
+      expect(p.getOpenLibraryRecord.callCount).toBe(0);
+      expect(p._render.callCount).toBe(1);
     });
 
     test("converts leafs and pagenums to page index", async () => {
@@ -141,55 +136,58 @@ describe("BRChaptersPlugin", () => {
           leafNumToIndex: (leaf) => leaf + 1,
           getPageIndex: (str) => parseFloat(str),
         },
-        _chaptersRender: sinon.stub(),
       };
-      await BookReader.prototype._chapterInit.call(fakeBR);
-      expect(fakeBR._chaptersRender.callCount).toBe(1);
-      expect(fakeBR._tocEntries[0].pageIndex).toBe(1);
-      expect(fakeBR._tocEntries[1].pageIndex).toBe(17);
+      const p = new ChaptersPlugin(fakeBR);
+      sinon.stub(p, "_render");
+      await p.init();
+      expect(p._render.callCount).toBe(1);
+      expect(p._tocEntries[0].pageIndex).toBe(1);
+      expect(p._tocEntries[1].pageIndex).toBe(17);
     });
   });
 
-  describe('_chaptersRender', () => {
+  describe('_render', () => {
     test('renders markers and panel', () => {
       const fakeBR = {
-        _tocEntries: SAMPLE_TOC,
-        _chaptersRenderMarker: sinon.stub(),
         shell: {
           menuProviders: {},
           addMenuShortcut: sinon.stub(),
           updateMenuContents: sinon.stub(),
         },
       };
-      BookReader.prototype._chaptersRender.call(fakeBR);
+      const p = new ChaptersPlugin(fakeBR);
+      sinon.stub(p, '_renderMarker');
+      p._tocEntries = deepCopy(SAMPLE_TOC);
+      p._render();
       expect(fakeBR.shell.menuProviders['chapters']).toBeTruthy();
       expect(fakeBR.shell.addMenuShortcut.callCount).toBe(1);
       expect(fakeBR.shell.updateMenuContents.callCount).toBe(1);
-      expect(fakeBR._chaptersRenderMarker.callCount).toBeGreaterThan(1);
+      expect(p._renderMarker.callCount).toBeGreaterThan(1);
     });
   });
 
-  describe('_chaptersUpdateCurrent', () => {
+  describe('_updateCurrent', () => {
     test('highlights the current chapter', () => {
       const fakeBR = {
         mode: 2,
         firstIndex: 16,
         displayedIndices: [16, 17],
-        _tocEntries: SAMPLE_TOC,
-        _chaptersPanel: {
-          currentChapter: null,
-        },
       };
-      BookReader.prototype._chaptersUpdateCurrent.call(fakeBR);
-      expect(fakeBR._chaptersPanel.currentChapter).toEqual(SAMPLE_TOC[1]);
+      const p = new ChaptersPlugin(fakeBR);
+      p._tocEntries = deepCopy(SAMPLE_TOC);
+      p._chaptersPanel = {
+        currentChapter: null,
+      };
+      p._updateCurrent();
+      expect(p._chaptersPanel.currentChapter).toEqual(SAMPLE_TOC[1]);
 
       fakeBR.mode = 1;
-      BookReader.prototype._chaptersUpdateCurrent.call(fakeBR);
-      expect(fakeBR._chaptersPanel.currentChapter).toEqual(SAMPLE_TOC[0]);
+      p._updateCurrent();
+      expect(p._chaptersPanel.currentChapter).toEqual(SAMPLE_TOC[0]);
 
       fakeBR.firstIndex = 0;
-      BookReader.prototype._chaptersUpdateCurrent.call(fakeBR);
-      expect(fakeBR._chaptersPanel.currentChapter).toBeUndefined();
+      p._updateCurrent();
+      expect(p._chaptersPanel.currentChapter).toBeUndefined();
     });
   });
 });

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

@@ -93,51 +93,57 @@ describe('WebTTSSound', () => {
   });
 
   describe('_chromePausingBugFix', () => {
+    /** @type {sinon.SinonFakeTimers} */
+    let clock = null;
+
+    beforeEach(() => {
+      clock = sinon.useFakeTimers();
+    });
+
+    afterEach(() => {
+      clock.restore();
+    });
+
     test('if speech less than 15s, nothing special', async () => {
-      const clock = sinon.useFakeTimers();
       const sound = new WebTTSSound('hello world foo bar');
       sound.load();
       sound.play();
       sound._chromePausingBugFix();
       clock.tick(10000);
       sound.utterance.dispatchEvent('end', {});
-      clock.restore();
       await afterEventLoop();
       expect(speechSynthesis.pause.callCount).toBe(0);
     });
 
     test('if speech greater than 15s, pause called', async () => {
-      const clock = sinon.useFakeTimers();
       const sound = new WebTTSSound('foo bah');
       sound.load();
       sound.play();
       sound._chromePausingBugFix();
       clock.tick(20000);
-      clock.restore();
 
       await afterEventLoop();
       expect(speechSynthesis.pause.callCount).toBe(1);
     });
 
-    test('on pause reloads if timed out', async () => {
-      const clock = sinon.useFakeTimers();
+    test('on pause, stops sound if timed out', async () => {
       const sound = new WebTTSSound('foo bah');
       sound.load();
       sound.play();
+      sound.stop = sinon.stub();
       sound._chromePausingBugFix();
-      sound.pause();
-      clock.tick(2000);
-      clock.restore();
+      clock.tick(5000);
+      sound.utterance.dispatchEvent('pause', {});
+      await afterEventLoop();
+      clock.tick(15000);
 
       await afterEventLoop();
-      expect(speechSynthesis.cancel.callCount).toBe(1);
+      expect(sound.stop.callCount).toBe(1);
     });
   });
 
   test('fire pause if browser does not do it', async () => {
     const clock = sinon.useFakeTimers();
-    const languageGetter = jest.spyOn(window.navigator, 'userAgent', 'get');
-    languageGetter.mockReturnValue('firefox android');
     const sound = new WebTTSSound('foo bah');
     sound.load();
     sound.play();

package/tests/jest/util/browserSniffing.test.js

@@ -1,5 +1,5 @@
 import {
-  isChrome, isFirefox, isSafari,
+  isChrome, isEdge, isFirefox, isSafari,
 } from '@/src/util/browserSniffing.js';
 
 const TESTS = [
@@ -19,7 +19,13 @@ const TESTS = [
     name: 'Edge on Windows 10',
     userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; ServiceUI 14) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362',
     vendor: '',
-    machingFn: null,
+    machingFn: isEdge,
+  },
+  {
+    name: 'Edge on Windows 11',
+    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0',
+    vendor: 'Google Inc.',
+    machingFn: isEdge,
   },
   {
     name: 'IE11 on Windows 10',
@@ -47,7 +53,7 @@ const TESTS = [
   },
 ];
 
-for (const fn of [isChrome, isFirefox, isSafari]) {
+for (const fn of [isChrome, isEdge, isFirefox, isSafari]) {
   describe(fn.name, () => {
     for (const { name, userAgent, vendor, machingFn } of TESTS) {
       test(name, () => expect(fn(userAgent, vendor)).toBe(machingFn == fn));

package/tests/jest/utils.js

@@ -1,3 +1,6 @@
+// Keep a copy of this, since it can be overridden by sinon timers.
+const _realTimeout = setTimeout;
+
 /**
  * Resolves after all enqueued callbacks in the event loop have resolved.
  * @return {Promise}
@@ -5,7 +8,7 @@
 export function afterEventLoop() {
   // Waiting 0 seconds essentially lets us run at the end of the event
   // loop (i.e. after any promises which aren't _actually_ async have finished)
-  return new Promise(res => setTimeout(res, 0));
+  return new Promise(res => _realTimeout(res, 0));
 }
 
 /**