@internetarchive/bookreader 5.0.0-35 → 5.0.0-38

package/src/plugins/tts/FestivalTTSEngine.js

@@ -91,10 +91,10 @@ export default class FestivalTTSEngine extends AbstractTTSEngine {
    * See https://stackoverflow.com/questions/12206631/html5-audio-cant-play-through-javascript-unless-triggered-manually-once
    * @return {PromiseLike}
    */
-  iOSCaptureUserIntentHack() {
+  async iOSCaptureUserIntentHack() {
     const sound = soundManager.createSound({ url: SILENCE_1MS[this.audioFormat] });
-    return new Promise(res => sound.play({onfinish: res}))
-      .then(() => sound.destruct());
+    await new Promise(res => sound.play({onfinish: res}));
+    sound.destruct();
   }
 }
 
@@ -122,21 +122,20 @@ class FestivalTTSSound {
         if (this.rate != 1) this.sound.setPlaybackRate(this.rate);
         onload();
       },
-      onresume: () => {
-        sleep(25).then(() => {
-          if (this.rate != 1) this.sound.setPlaybackRate(this.rate);
-        });
+      onresume: async () => {
+        await sleep(25);
+        if (this.rate != 1) this.sound.setPlaybackRate(this.rate);
       }
     });
     return this.sound.load();
   }
 
-  play() {
-    return new Promise(res => {
+  async play() {
+    await new Promise(res => {
       this._finishResolver = res;
       this.sound.play({ onfinish: res });
-    })
-      .then(() => this.sound.destruct());
+    });
+    this.sound.destruct();
   }
 
   /** @override */

package/src/plugins/tts/PageChunk.js

@@ -21,27 +21,18 @@ export default class PageChunk {
    * @param {number} leafIndex
    * @return {Promise<PageChunk[]>}
    */
-  static fetch(server, bookPath, leafIndex) {
-    // jquery's ajax "PromiseLike" implementation is inconsistent with
-    // modern Promises, so convert it to a full promise (it doesn't forward
-    // a returned promise to the next handler in the chain, which kind of
-    // defeats the entire point of using promises to avoid "callback hell")
-    return new Promise((res, rej) => {
-      $.ajax({
-        type: 'GET',
-        url: `https://${server}/BookReader/BookReaderGetTextWrapper.php`,
-        dataType:'jsonp',
-        cache: true,
-        data: {
-          path: `${bookPath}_djvu.xml`,
-          page: leafIndex
-        },
-        error: rej,
-      })
-        .then(chunks => {
-          res(PageChunk._fromTextWrapperResponse(leafIndex, chunks));
-        });
+  static async fetch(server, bookPath, leafIndex) {
+    const chunks = await $.ajax({
+      type: 'GET',
+      url: `https://${server}/BookReader/BookReaderGetTextWrapper.php`,
+      dataType:'jsonp',
+      cache: true,
+      data: {
+        path: `${bookPath}_djvu.xml`,
+        page: leafIndex
+      }
     });
+    return PageChunk._fromTextWrapperResponse(leafIndex, chunks);
   }
 
   /**

package/src/plugins/tts/PageChunkIterator.js

@@ -53,22 +53,18 @@ export default class PageChunkIterator {
    * in the correct order.
    * @return {PromiseLike<"__PageChunkIterator.AT_END__" | PageChunk>}
    */
-  _nextUncontrolled() {
+  async  _nextUncontrolled() {
     if (this._cursor.page == this.pageCount) {
       return Promise.resolve(PageChunkIterator.AT_END);
     }
-
     this._recenterBuffer(this._cursor.page);
-
-    return this._fetchPageChunks(this._cursor.page)
-      .then(chunks => {
-        if (this._cursor.chunk == chunks.length) {
-          this._cursor.page++;
-          this._cursor.chunk = 0;
-          return this._nextUncontrolled();
-        }
-        return chunks[this._cursor.chunk++];
-      });
+    const chunks = await this._fetchPageChunks(this._cursor.page);
+    if (this._cursor.chunk == chunks.length) {
+      this._cursor.page++;
+      this._cursor.chunk = 0;
+      return this._nextUncontrolled();
+    }
+    return chunks[this._cursor.chunk++];
   }
 
   /**

package/src/plugins/tts/WebTTSEngine.js

@@ -167,7 +167,7 @@ export class WebTTSSound {
    * left off.
    * @return {Promise<void>}
    */
-  reload() {
+  async reload() {
     // We'll restore the pause state, so copy it here
     const wasPaused = this.paused;
     // Use recent event to determine where we'll restart from
@@ -179,14 +179,12 @@ export class WebTTSSound {
     }
 
     // We can't modify the utterance object, so we have to make a new one
-    return this.stop()
-      .then(() => {
-        this.load();
-        // Instead of playing and immediately pausing, we don't start playing. Note
-        // this is a requirement because pause doesn't work consistently across
-        // browsers.
-        if (!wasPaused) this.play();
-      });
+    await this.stop();
+    this.load();
+    // Instead of playing and immediately pausing, we don't start playing. Note
+    // this is a requirement because pause doesn't work consistently across
+    // browsers.
+    if (!wasPaused) this.play();
   }
 
   play() {
@@ -222,15 +220,16 @@ export class WebTTSSound {
     return endPromise;
   }
 
-  finish() {
-    this.stop().then(() => this.utterance.dispatchEvent(new Event('finish')));
+  async finish() {
+    await this.stop();
+    this.utterance.dispatchEvent(new Event('finish'));
   }
 
   /**
    * @override
    * Will fire a pause event unless already paused
    **/
-  pause() {
+  async pause() {
     if (this.paused) return;
 
     const pausePromise = promisifyEvent(this.utterance, 'pause');
@@ -246,19 +245,18 @@ export class WebTTSSound {
     if (pauseMightNotFire) {
       // wait for it just in case
       const timeoutPromise = sleep(100).then(() => 'timeout');
-      Promise.race([pausePromise, timeoutPromise])
-        .then(result => {
-          // We got our pause event; nothing to do!
-          if (result != 'timeout') return;
-
-          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();
-        });
+      const result = await Promise.race([pausePromise, timeoutPromise]);
+      // We got our pause event; nothing to do!
+      if (result != 'timeout') return;
+
+      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();
     }
   }
 
-  resume() {
+  async resume() {
     if (!this.started) {
       this.play();
       return;
@@ -278,16 +276,15 @@ export class WebTTSSound {
     speechSynthesis.resume();
 
     if (resumeMightNotFire) {
-      Promise.race([resumePromise, sleep(100).then(() => 'timeout')])
-        .then(result => {
-          if (result != 'timeout') return;
-
-          this.utterance.dispatchEvent(new CustomEvent('resume', {}));
-          if (resumeMightNotWork) {
-            const reloadPromise = this.reload();
-            reloadPromise.then(() => this.play());
-          }
-        });
+      const result = await Promise.race([resumePromise, sleep(100).then(() => 'timeout')]);
+
+      if (result != 'timeout') return;
+
+      this.utterance.dispatchEvent(new CustomEvent('resume', {}));
+      if (resumeMightNotWork) {
+        await this.reload();
+        this.play();
+      }
     }
   }
 
@@ -308,45 +305,39 @@ 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
+      await Promise.race([
+        promisifyEvent(this.utterance, '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
+      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/stat/BookNavigator/BookNavigator.js

@@ -1,3 +1,44 @@
+/*
+<script src="foo-plugin.js"></script>
+
+foo-plugin.js
+
+$('#foo-plugin').dataSet('MainController', 'bar');
+
+<ia-bookreader>
+  <div slot="plugins">
+    <ia-search></ia-search>
+    <book-marks></book-marks>
+  </div>
+</ia-bookreader>
+
+iaBookreader.registerPlugin('foo-plugin', Class);
+
+
+class IABr extends LItElement {
+
+  render() {
+    
+    registerPlugins() {
+      this.pluginSlots.map(slot => {
+        .. to slot registry
+        each slot - do handshake 
+
+        
+      });
+    }
+
+    html`
+      <div slot="plugins" @onslotchange=${() => x}></div>
+    `;
+  }
+}
+*/
+
+
+
+
+
 import { css, html, LitElement } from 'lit-element';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import SearchProvider from './search/search-provider.js';
@@ -113,6 +154,7 @@ export class BookNavigator extends LitElement {
     // };
 
     this.menuProviders = {
+      // if enableSearch ?
       search: new SearchProvider(
         /**
          * Search specific menu updates

package/tests/e2e/base.test.js

@@ -21,10 +21,12 @@ 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: deprecated, will remove once mmenu is removed.
   // fixture `Mobile Search Tests for: ${ocaid}`
   //   .page `${url}`
   // runMobileSearchTests(new BookReader());

package/tests/e2e/helpers/desktopSearch.js

@@ -19,14 +19,15 @@ export function runDesktopSearchTests(br) {
       const nav = br.nav;
 
       //assuring that the search bar is enabled
-      await t.expect(nav.desktop.searchBox.visible).ok();
+      await t.expect(nav.desktop.searchIcon.visible).ok();
+      await t.click(nav.desktop.searchIcon);
 
       //testing search for a word found in the book
-      await t
-        .selectText(nav.desktop.searchBox.child('.BRsearchInput'))
-        .pressKey('delete');
-      await t.typeText(nav.desktop.searchBox.child('.BRsearchInput'), TEST_TEXT_FOUND);
-      await t.click((nav.desktop.searchBox).child('.BRsearchSubmit'));
+      await t.selectText(nav.desktop.searchBox).pressKey('delete');
+      // FIXME: Why is it only typing every other letter?!?!
+      await t.typeText(nav.desktop.searchBox, TEST_TEXT_FOUND.split('').join('_'));
+      await t.pressKey('enter');
+
       await t.expect(nav.desktop.searchPin.exists).ok();
       await t.expect(nav.desktop.searchPin.child('.BRquery').child('div').exists).ok();
       await t.expect(nav.desktop.searchPin.child('.BRquery').child('div').innerText).contains(TEST_TEXT_FOUND);
@@ -54,14 +55,14 @@ export function runDesktopSearchTests(br) {
       const nav = br.nav;
 
       //assuring that the search bar is enabled
-      await t.expect(nav.desktop.searchBox.visible).ok();
+      await t.expect(nav.desktop.searchIcon.visible).ok();
+      await t.click(nav.desktop.searchIcon);
 
       //testing search for a word not found in the book
-      await t
-        .selectText(nav.desktop.searchBox.child('.BRsearchInput'))
-        .pressKey('delete');
-      await t.typeText(nav.desktop.searchBox.child('.BRsearchInput'), TEST_TEXT_NOT_FOUND);
-      await t.click((nav.desktop.searchBox).child('.BRsearchSubmit'));
+      await t.selectText(nav.desktop.searchBox).pressKey('delete');
+      // FIXME: Why is it only typing every other letter?!?!
+      await t.typeText(nav.desktop.searchBox, TEST_TEXT_NOT_FOUND.split('').join('_'));
+      await t.pressKey('enter');
       await t.expect(nav.desktop.searchPin.child('.BRquery').child('div').withText(TEST_TEXT_NOT_FOUND).exists).notOk();
 
       const getPageUrl = ClientFunction(() => window.location.href.toString());

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/models/Navigation.js

@@ -6,7 +6,8 @@ export default class Navigation {
     this.topNavShell = new Selector('.BRtoolbar');
     this.bottomNavShell = new Selector('.BRfooter');
     this.mobileMenu = new Selector('.BRmobileMenu');
-    this.desktop = new DesktopNav(this.bottomNavShell, this.topNavShell);
+    this.itemNav = Selector('ia-bookreader').shadowRoot().find('ia-item-navigator').shadowRoot();
+    this.desktop = new DesktopNav(this.bottomNavShell, this.itemNav);
     this.mobile = new MobileNav(this.mobileMenu, this.topNavShell);
   }
 }
@@ -17,7 +18,11 @@ export default class Navigation {
  * @classdesc defines DesktopNav base elements
  */
 class DesktopNav {
-  constructor(bottomToolbar, topToolbar) {
+  /**
+   * @param {Selector} bottomToolbar
+   * @param {Selector} itemNav
+   */
+  constructor(bottomToolbar, itemNav) {
     // flipping
     this.goLeft = bottomToolbar.find('.BRicon.book_left');
     this.goRight = bottomToolbar.find('.BRicon.book_right');
@@ -35,7 +40,11 @@ class DesktopNav {
     this.zoomOut = bottomToolbar.find('.BRicon.zoom_out');
 
     // search
-    this.searchBox = topToolbar.find('.BRbooksearch.desktop');
+    this.searchIcon = itemNav.find('button.shortcut.search');
+    this.searchBox = itemNav
+      .find('ia-menu-slider').shadowRoot()
+      .find('ia-book-search-results').shadowRoot()
+      .find('input[name=query]');
     this.searchPin = bottomToolbar.find('.BRsearch');
     this.searchNavigation = bottomToolbar.find('.BRsearch-navigation');
 

package/tests/e2e/rightToLeft.test.js

@@ -9,7 +9,7 @@ const ocaids = params.ocaids || [
 ];
 
 ocaids.forEach(ocaid => {
-  const url = `${params.baseUrl}/BookReaderDemo/demo-internetarchive.html?ocaid=${ocaid}`;
+  const url = `${params.getArchiveUrl(ocaid)}`;
 
   fixture `Base Tests for right to left book: ${ocaid}`.page `${url}`;
   runBaseTests(new BookReader({ pageProgression: 'rl' }));

package/tests/e2e/viewmode.test.js

@@ -1,36 +1,42 @@
-// import { Selector } from 'testcafe';
-// import BookReader from './models/BookReader';
-// import params from './helpers/params';
-
-// fixture `Viewmode carousel`.page `${params.baseUrl}/BookReaderDemo/viewmode-cycle.html`;
-
-// 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');
-
-//   // 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);
-
-//   // 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);
-// });
+import { Selector } from 'testcafe';
+import BookReader from './models/BookReader';
+import params from './helpers/params';
+
+const ocaids = params.ocaids || ['goody'];
+
+ocaids.forEach(ocaid => {
+  const url = params.getArchiveUrl(ocaid);
+
+  fixture `Viewmode carousel`.page `${url}`;
+
+  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');
+
+    // 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);
+
+    // 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);
+  });
+});

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

@@ -35,7 +35,8 @@ describe('pageTops', () => {
     const book = new BookModel(br);
     const mode = new Mode1UpLit(book, br);
     document.body.appendChild(mode);
-    await mode.requestUpdate();
+    mode.requestUpdate();
+    await mode.updateComplete;
     expect(mode.pageTops).toEqual({});
   });