@internetarchive/bookreader 5.0.0-35 → 5.0.0-36

package/src/plugins/tts/WebTTSEngine.js

@@ -258,7 +258,7 @@ export class WebTTSSound {
     }
   }
 
-  resume() {
+  async resume() {
     if (!this.started) {
       this.play();
       return;
@@ -278,16 +278,15 @@ export class WebTTSSound {
     speechSynthesis.resume();
 
     if (resumeMightNotFire) {
-      Promise.race([resumePromise, sleep(100).then(() => 'timeout')])
-        .then(result => {
-          if (result != 'timeout') return;
+      const result = await Promise.race([resumePromise, sleep(100).then(() => 'timeout')]);
 
-          this.utterance.dispatchEvent(new CustomEvent('resume', {}));
-          if (resumeMightNotWork) {
-            const reloadPromise = this.reload();
-            reloadPromise.then(() => this.play());
-          }
-        });
+      if (result != 'timeout') return;
+
+      this.utterance.dispatchEvent(new CustomEvent('resume', {}));
+      if (resumeMightNotWork) {
+        await this.reload();
+        this.play();
+      }
     }
   }
 
@@ -308,45 +307,41 @@ export class WebTTSSound {
    * We avoid this (as described here: https://bugs.chromium.org/p/chromium/issues/detail?id=679437#c15 )
    * by pausing after 14 seconds and ~instantly resuming.
    */
-  _chromePausingBugFix() {
+  async _chromePausingBugFix() {
     const timeoutPromise = sleep(14000).then(() => 'timeout');
     const pausePromise = promisifyEvent(this.utterance, 'pause').then(() => 'paused');
     const endPromise = promisifyEvent(this.utterance, 'end').then(() => 'ended');
-    return Promise.race([timeoutPromise, pausePromise, endPromise])
-      .then(result => {
-        if (location.toString().indexOf('_debugReadAloud=true') != -1) {
-          console.log(`CHROME-PAUSE-HACK: ${result}`);
-        }
-        switch (result) {
-        case 'ended':
-          // audio was stopped/finished; nothing to do
-          break;
-        case 'paused':
-          // 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
-          Promise.race([
-            promisifyEvent(this.utterance, 'resume'),
-            sleep(14000).then(() => 'timeout'),
-          ])
-            .then(result => {
-              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
-          speechSynthesis.pause();
-          sleep(25)
-            .then(() => {
-              speechSynthesis.resume();
-              this._chromePausingBugFix();
-            });
-          break;
-        }
-      });
+    const result = await Promise.race([timeoutPromise, pausePromise, endPromise]);
+    if (location.toString().indexOf('_debugReadAloud=true') != -1) {
+      console.log(`CHROME-PAUSE-HACK: ${result}`);
+    }
+    switch (result) {
+    case 'ended':
+      // audio was stopped/finished; nothing to do
+      break;
+    case 'paused':
+      // 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
+      Promise.race([
+        promisifyEvent(this.utterance, 'resume'),
+        sleep(14000).then(() => 'timeout'),
+      ])
+        .then(result => {
+          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
+      speechSynthesis.pause();
+      await sleep(25);
+      speechSynthesis.resume();
+      this._chromePausingBugFix();
+      break;
+    }
   }
 }
 

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

@@ -261,9 +261,7 @@ BookReader.prototype.ttsStop = function () {
 BookReader.prototype.ttsBeforeChunkPlay = async function(chunk) {
   await this.ttsMaybeFlipToIndex(chunk.leafIndex);
   this.ttsHighlightChunk(chunk);
-  // This appears not to work; ttsMaybeFlipToIndex causes a scroll to the top of
-  // the active page :/ Disabling cause the extra scroll just adds an odd jitter.
-  // this.ttsScrollToChunk(chunk);
+  this.ttsScrollToChunk(chunk);
 };
 
 /**
@@ -292,10 +290,7 @@ BookReader.prototype.ttsMaybeFlipToIndex = function (leafIndex) {
       resolve();
     } else {
       this.animationFinishedCallback = resolve;
-      const mustGoNext = leafIndex > Math.max(this.twoPage.currentIndexR, this.twoPage.currentIndexL);
-      if (mustGoNext) this.next();
-      else this.prev();
-      promise.then(this.ttsMaybeFlipToIndex.bind(this, leafIndex));
+      this.jumpToIndex(leafIndex);
     }
   }
 
@@ -329,9 +324,20 @@ BookReader.prototype.ttsHighlightChunk = function(chunk) {
  * @param {PageChunk} chunk
  */
 BookReader.prototype.ttsScrollToChunk = function(chunk) {
-  if (this.constMode1up != this.mode) return;
-
-  $(`.pagediv${chunk.leafIndex} .ttsHiliteLayer rect`)[0]?.scrollIntoView();
+  // It behaves weird if used in thumb mode
+  if (this.constModeThumb == this.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.constMode1up == this.mode || this.isFullscreenActive ? 'center' : 'nearest',
+    inline: 'center',
+    behavior: 'smooth',
+  });
 };
 
 // ttsRemoveHilites()

package/tests/e2e/base.test.js

@@ -1,6 +1,6 @@
 import { runBaseTests } from './helpers/base';
 import BookReader from './models/BookReader';
-import { runDesktopSearchTests } from './helpers/desktopSearch';
+// import { runDesktopSearchTests } from './helpers/desktopSearch';
 // import { runMobileSearchTests } from './helpers/mobileSearch';
 import params from './helpers/params';
 
@@ -21,10 +21,13 @@ ocaids.forEach(ocaid => {
   fixture `Base Tests for: ${ocaid}`.page `${url}`;
   runBaseTests(new BookReader());
 
-  fixture `Desktop Search Tests for: ${ocaid}`
-    .page `${url}`;
-  runDesktopSearchTests(new BookReader());
 
+  // Todo: Re-enable when testing side panel
+  // fixture `Desktop Search Tests for: ${ocaid}`
+  //   .page `${url}`;
+  // runDesktopSearchTests(new BookReader());
+
+  // Todo: deprecated, will remove once mmenu is removed.
   // fixture `Mobile Search Tests for: ${ocaid}`
   //   .page `${url}`
   // runMobileSearchTests(new BookReader());

package/tests/e2e/helpers/params.js

@@ -1,7 +1,7 @@
 // @ts-check
 class TestParams {
   baseUrl = process.env.BASE_URL?.replace(/\/+$/, '') ?? 'http://127.0.0.1:8000'
-  ocaids = process.env.OCAIDS?.split(',') ?? [];
+  ocaids = process.env.OCAIDS?.split(',') ?? null;
   /** Whether the url we're testing is a prod (or near prod) IA url, or a demos url */
   isIA = new URL(this.baseUrl).hostname.endsWith('archive.org');
 

package/tests/e2e/viewmode.test.js

@@ -1,36 +1,36 @@
-// import { Selector } from 'testcafe';
-// import BookReader from './models/BookReader';
-// import params from './helpers/params';
+import { Selector } from 'testcafe';
+import BookReader from './models/BookReader';
+import params from './helpers/params';
 
-// fixture `Viewmode carousel`.page `${params.baseUrl}/BookReaderDemo/viewmode-cycle.html`;
+fixture `Viewmode carousel`.page `${params.baseUrl}/BookReaderDemo/demo-internetarchive.html?ocaid=goody`;
 
-// test('Clicking `view mode` cycles through view modes', async t => {
-//   const { nav } = (new BookReader());
+test('Clicking `view mode` cycles through view modes', async t => {
+  const { nav } = (new BookReader());
 
-//   // viewmode button only appear on mobile devices
-//   await t.resizeWindow(400, 800);
-//   // Flip forward one
-//   await t.pressKey('right');
+  // viewmode button only appear on mobile devices
+  await t.resizeWindow(400, 800);
+  // Flip forward one
+  await t.pressKey('right');
 
-//   // 2up to thumb
-//   await t.click(nav.desktop.viewmode);
-//   const thumbnailContainer = Selector('.BRmodeThumb');
-//   await t.expect(thumbnailContainer.visible).ok();
-//   const thumbImages = thumbnailContainer.find('.BRpageview img');
-//   await t.expect(thumbImages.count).gt(0);
+  // 2up to thumb
+  await t.click(nav.desktop.viewmode);
+  const thumbnailContainer = Selector('.BRmodeThumb');
+  await t.expect(thumbnailContainer.visible).ok();
+  const thumbImages = thumbnailContainer.find('.BRpageview img');
+  await t.expect(thumbImages.count).gt(0);
 
-//   // thumb to 1up
-//   await t.click(nav.desktop.viewmode);
-//   const onePageViewContainer = Selector('br-mode-1up');
-//   await t.expect(onePageViewContainer.visible).ok();
-//   const onePageImages = onePageViewContainer.find('.BRmode1up .BRpagecontainer');
-//   // we usually pre-fetch the page in question & 1 before/after it
-//   await t.expect(onePageImages.count).gte(3);
+  // thumb to 1up
+  await t.click(nav.desktop.viewmode);
+  const onePageViewContainer = Selector('br-mode-1up');
+  await t.expect(onePageViewContainer.visible).ok();
+  const onePageImages = onePageViewContainer.find('.BRmode1up .BRpagecontainer');
+  // we usually pre-fetch the page in question & 1 before/after it
+  await t.expect(onePageImages.count).gte(3);
 
-//   // 1up to 2up
-//   await t.click(nav.desktop.viewmode);
-//   const twoPageContainer = Selector('.BRtwopageview');
-//   await t.expect(twoPageContainer.visible).ok();
-//   const twoPageImages = twoPageContainer.find('img.BRpageimage');
-//   await t.expect(twoPageImages.count).gte(2);
-// });
+  // 1up to 2up
+  await t.click(nav.desktop.viewmode);
+  const twoPageContainer = Selector('.BRtwopageview');
+  await t.expect(twoPageContainer.visible).ok();
+  const twoPageImages = twoPageContainer.find('img.BRpageimage');
+  await t.expect(twoPageImages.count).gte(2);
+});