@internetarchive/bookreader 5.0.0-5 → 5.0.0-50-a1

package/src/plugins/tts/WebTTSEngine.js

@@ -1,6 +1,7 @@
 /* global br */
 import { isChrome, isFirefox } from '../../util/browserSniffing.js';
-import { sleep, promisifyEvent, isAndroid } from './utils.js';
+import { promisifyEvent, isAndroid } from './utils.js';
+import { sleep } from '../../BookReader/utils.js';
 import AbstractTTSEngine from './AbstractTTSEngine.js';
 /** @typedef {import("./AbstractTTSEngine.js").PageChunk} PageChunk */
 /** @typedef {import("./AbstractTTSEngine.js").AbstractTTSSound} AbstractTTSSound */
@@ -167,7 +168,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 +180,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 +221,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 +246,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 +277,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();
+      }
     }
   }
 
@@ -296,6 +294,11 @@ export class WebTTSSound {
     this.reload();
   }
 
+  /** @param {SpeechSynthesisVoice} voice */
+  setVoice(voice) {
+    this.voice = voice;
+    this.reload();
+  }
   /**
    * @private
    * Chrome has a bug where it only plays 15 seconds of TTS and then
@@ -303,45 +306,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

@@ -6,8 +6,9 @@ import FestivalTTSEngine from './FestivalTTSEngine.js';
 import WebTTSEngine from './WebTTSEngine.js';
 import { toISO6391, approximateWordCount } from './utils.js';
 import { en as tooltips } from './tooltip_dict.js';
-/** @typedef {import('./PageChunk.js')} PageChunk */
-/** @typedef {import("./AbstractTTSEngine.js")} AbstractTTSEngine */
+import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.js';
+/** @typedef {import('./PageChunk.js').default} PageChunk */
+/** @typedef {import("./AbstractTTSEngine.js").default} AbstractTTSEngine */
 
 // Default options for TTS
 jQuery.extend(BookReader.defaultOptions, {
@@ -22,7 +23,9 @@ BookReader.prototype.setup = (function (super_) {
     super_.call(this, options);
 
     if (this.options.enableTtsPlugin) {
-      this.ttsHilites = [];
+      /** @type { {[pageIndex: number]: Array<{ l: number, r: number, t: number, b: number }>} } */
+      this._ttsBoxesByIndex = {};
+
       let TTSEngine = WebTTSEngine.isSupported() ? WebTTSEngine :
         FestivalTTSEngine.isSupported() ? FestivalTTSEngine :
           null;
@@ -54,17 +57,6 @@ BookReader.prototype.init = (function(super_) {
     if (this.options.enableTtsPlugin) {
       // Bind to events
 
-      // TODO move this to BookReader.js or something
-      this.bind(BookReader.eventNames.fragmentChange, () => {
-        if (this.mode == this.constMode2up) {
-          // clear highlights if they're no longer valid for this page
-          const visibleIndices = [this.twoPage.currentIndexL, this.twoPage.currentIndexR];
-          const visibleSelector = visibleIndices.map(i => `.BRReadAloudHilite.Leaf-${i}`).join(', ');
-          $(this.ttsHilites).filter(visibleSelector).show();
-          $(this.ttsHilites).not(visibleSelector).hide();
-        }
-      });
-
       this.bind(BookReader.eventNames.PostInit, () => {
         this.$('.BRicon.read').click(() => {
           this.ttsToggle();
@@ -88,6 +80,17 @@ BookReader.prototype.init = (function(super_) {
   };
 })(BookReader.prototype.init);
 
+/** @override */
+BookReader.prototype._createPageContainer = (function (super_) {
+  return function (index) {
+    const pageContainer = super_.call(this, index);
+    if (this.options.enableTtsPlugin && pageContainer.page && index in this._ttsBoxesByIndex) {
+      const pageIndex = pageContainer.page.index;
+      renderBoxesInPageContainerLayer('ttsHiliteLayer', this._ttsBoxesByIndex[pageIndex], pageContainer.page, pageContainer.$container[0]);
+    }
+    return pageContainer;
+  };
+})(BookReader.prototype._createPageContainer);
 
 // Extend buildMobileDrawerElement
 BookReader.prototype.buildMobileDrawerElement = (function (super_) {
@@ -146,15 +149,49 @@ BookReader.prototype.initNavbar = (function (super_) {
               <div class="icon icon-advance"></div>
             </button>
           </li>
+          <li>
+            <select class="playback-voices" name="playback-voice" style="display: none" title="Change read aloud voices">
+            </select>
+          </li>
         </ul>
       `);
+
       $el.find('.BRcontrols').prepend(this.refs.$BRReadAloudToolbar);
+
+      const renderVoiceOption = (voices) => {
+        return voices.map(voice =>
+          `<option value="${voice.voiceURI}">${voice.lang} - ${voice.name}</option>`).join('');
+      };
+
+      const voiceSortOrder = (a,b) => `${a.lang} - ${a.name}`.localeCompare(`${b.lang} - ${b.name}`);
+
+      const renderVoicesMenu = (voicesMenu) => {
+        voicesMenu.empty();
+        const bookLanguage = this.ttsEngine.opts.bookLanguage;
+        const bookLanguages = this.ttsEngine.getVoices().filter(v => v.lang.startsWith(bookLanguage)).sort(voiceSortOrder);
+        const otherLanguages = this.ttsEngine.getVoices().filter(v => !v.lang.startsWith(bookLanguage)).sort(voiceSortOrder);
+
+        if (this.ttsEngine.getVoices().length > 1) {
+          voicesMenu.append($(`<optgroup label="Book Language (${bookLanguage})"> ${renderVoiceOption(bookLanguages)} </optgroup>`));
+          voicesMenu.append($(`<optgroup label="Other Languages"> ${renderVoiceOption(otherLanguages)} </optgroup>`));
+
+          voicesMenu.val(this.ttsEngine.voice.voiceURI);
+          voicesMenu.show();
+        } else {
+          voicesMenu.hide();
+        }
+      };
+
+      const voicesMenu = this.refs.$BRReadAloudToolbar.find('[name=playback-voice]');
+      renderVoicesMenu(voicesMenu);
+      voicesMenu.on("change", ev => this.ttsEngine.setVoice(voicesMenu.val()));
       this.ttsEngine.events.on('pause resume start', () => this.ttsUpdateState());
-      this.refs.$BRReadAloudToolbar.find('[name=play]').click(this.ttsPlayPause.bind(this));
-      this.refs.$BRReadAloudToolbar.find('[name=advance]').click(this.ttsJumpForward.bind(this));
-      this.refs.$BRReadAloudToolbar.find('[name=review]').click(this.ttsJumpBackward.bind(this));
+      this.ttsEngine.events.on('voiceschanged', () => renderVoicesMenu(voicesMenu));
+      this.refs.$BRReadAloudToolbar.find('[name=play]').on("click", this.ttsPlayPause.bind(this));
+      this.refs.$BRReadAloudToolbar.find('[name=advance]').on("click", this.ttsJumpForward.bind(this));
+      this.refs.$BRReadAloudToolbar.find('[name=review]').on("click", this.ttsJumpBackward.bind(this));
       const $rateSelector = this.refs.$BRReadAloudToolbar.find('select[name="playback-speed"]');
-      $rateSelector.change(ev => this.ttsEngine.setPlaybackRate(parseFloat($rateSelector.val())));
+      $rateSelector.on("change", ev => this.ttsEngine.setPlaybackRate(parseFloat($rateSelector.val())));
       $(`<li>
           <button class="BRicon read js-tooltip" title="${tooltips.readAloud}">
             <div class="icon icon-read-aloud"></div>
@@ -187,7 +224,7 @@ BookReader.prototype.ttsStart = function (startTTSEngine = true) {
   this.$('.BRicon.read').addClass('unread active');
   this.ttsSendAnalyticsEvent('Start');
   if (startTTSEngine)
-    this.ttsEngine.start(this.currentIndex(), this.getNumLeafs());
+    this.ttsEngine.start(this.currentIndex(), this.book.getNumLeafs());
 };
 
 BookReader.prototype.ttsJumpForward = function () {
@@ -233,12 +270,10 @@ BookReader.prototype.ttsStop = function () {
  * @param {PageChunk} chunk
  * @return {PromiseLike<void>} returns once the flip is done
  */
-BookReader.prototype.ttsBeforeChunkPlay = function(chunk) {
-  return this.ttsMaybeFlipToIndex(chunk.leafIndex)
-    .then(() => {
-      this.ttsHighlightChunk(chunk);
-      this.ttsScrollToChunk(chunk);
-    });
+BookReader.prototype.ttsBeforeChunkPlay = async function(chunk) {
+  await this.ttsMaybeFlipToIndex(chunk.leafIndex);
+  this.ttsHighlightChunk(chunk);
+  this.ttsScrollToChunk(chunk);
 };
 
 /**
@@ -267,113 +302,61 @@ 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);
     }
   }
 
   return promise;
-}
-
-/**
- * @param {PageChunk} chunk
- */
-BookReader.prototype.ttsHighlightChunk = function(chunk) {
-  this.ttsRemoveHilites();
-
-  if (this.constMode2up == this.mode) {
-    this.ttsHilite2UP(chunk);
-  } else {
-    this.ttsHilite1UP(chunk);
-  }
 };
 
 /**
  * @param {PageChunk} chunk
  */
-BookReader.prototype.ttsScrollToChunk = function(chunk) {
-  if (this.constMode1up != this.mode) return;
-
-  let leafTop = 0;
-  let h;
-  let i;
-  for (i = 0; i < chunk.leafIndex; i++) {
-    h = parseInt(this._getPageHeight(i) / this.reduce);
-    leafTop += h + this.padding;
-  }
-
-  const chunkTop = chunk.lineRects[0][3]; //coords are in l,b,r,t order
-  const chunkBot = chunk.lineRects[chunk.lineRects.length - 1][1];
-
-  const topOfFirstChunk = leafTop + chunkTop / this.reduce;
-  const botOfLastChunk  = leafTop + chunkBot / this.reduce;
-
-  if (window?.soundManager?.debugMode) console.log('leafTop = ' + leafTop + ' topOfFirstChunk = ' + topOfFirstChunk + ' botOfLastChunk = ' + botOfLastChunk);
+BookReader.prototype.ttsHighlightChunk = function(chunk) {
+  // The poorly-named variable leafIndex
+  const pageIndex = chunk.leafIndex;
 
-  const containerTop = this.refs.$brContainer.prop('scrollTop');
-  const containerBot = containerTop + this.refs.$brContainer.height();
-  if (window?.soundManager?.debugMode) console.log('containerTop = ' + containerTop + ' containerBot = ' + containerBot);
+  this.ttsRemoveHilites();
 
-  if ((topOfFirstChunk < containerTop) || (botOfLastChunk > containerBot)) {
-    this.refs.$brContainer.stop(true).animate({scrollTop: topOfFirstChunk},'fast');
-  }
-};
+  // group by index; currently only possible to have chunks on one page :/
+  this._ttsBoxesByIndex = {
+    [pageIndex]: chunk.lineRects.map(([l, b, r, t]) => ({l, r, b, t}))
+  };
 
-/**
- * @param {PageChunk} chunk
- */
-BookReader.prototype.ttsHilite1UP = function(chunk) {
-  for (let i = 0; i < chunk.lineRects.length; i++) {
-    //each rect is an array of l,b,r,t coords (djvu.xml ordering...)
-    const l = chunk.lineRects[i][0];
-    const b = chunk.lineRects[i][1];
-    const r = chunk.lineRects[i][2];
-    const t = chunk.lineRects[i][3];
-
-    const div = document.createElement('div');
-    this.ttsHilites.push(div);
-    $(div).prop('className', 'BookReaderSearchHilite').appendTo(
-      this.$('.pagediv' + chunk.leafIndex)
-    );
-
-    $(div).css({
-      width:  (r - l) / this.reduce + 'px',
-      height: (b - t) / this.reduce + 'px',
-      left:   l / this.reduce + 'px',
-      top:    t / this.reduce + 'px'
-    });
+  // update any already created pages
+  for (const [pageIndexString, boxes] of Object.entries(this._ttsBoxesByIndex)) {
+    const pageIndex = parseFloat(pageIndexString);
+    const page = this.book.getPage(pageIndex);
+    const pageContainers = this.getActivePageContainerElementsForIndex(pageIndex);
+    pageContainers.forEach(container => renderBoxesInPageContainerLayer('ttsHiliteLayer', boxes, page, container));
   }
-
 };
 
 /**
  * @param {PageChunk} chunk
  */
-BookReader.prototype.ttsHilite2UP = function (chunk) {
-  for (let i = 0; i < chunk.lineRects.length; i++) {
-    //each rect is an array of l,b,r,t coords (djvu.xml ordering...)
-    const l = chunk.lineRects[i][0];
-    const b = chunk.lineRects[i][1];
-    const r = chunk.lineRects[i][2];
-    const t = chunk.lineRects[i][3];
-
-    const div = document.createElement('div');
-    this.ttsHilites.push(div);
-    $(div)
-      .prop('className', 'BookReaderSearchHilite BRReadAloudHilite Leaf-' + chunk.leafIndex)
-      .css('zIndex', 3)
-      .appendTo(this.refs.$brTwoPageView);
-    this.setHilightCss2UP(div, chunk.leafIndex, l, r, t, b);
-  }
+BookReader.prototype.ttsScrollToChunk = function(chunk) {
+  // 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()
 //______________________________________________________________________________
 BookReader.prototype.ttsRemoveHilites = function () {
-  $(this.ttsHilites).remove();
-  this.ttsHilites = [];
+  $(this.getActivePageContainerElements()).find('.ttsHiliteLayer').remove();
+  this._ttsBoxesByIndex = {};
 };
 
 /**

package/src/plugins/tts/utils.js

@@ -26,15 +26,6 @@ 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]