@internetarchive/bookreader 5.0.0-10-alpha-3 → 5.0.0-101

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

@@ -1,392 +1,386 @@
-/* global BookReader */
-/**
- * Plugin for Text to Speech in BookReader
- */
+// @ts-check
+
 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 */
-
-// Default options for TTS
-jQuery.extend(BookReader.defaultOptions, {
-  server: 'ia600609.us.archive.org',
-  bookPath: '',
-  enableTtsPlugin: true,
-});
-
-// Extend the constructor to add TTS properties
-BookReader.prototype.setup = (function (super_) {
-  return function (options) {
-    super_.call(this, options);
-
-    if (this.options.enableTtsPlugin) {
-      this.ttsHilites = [];
-      let TTSEngine = WebTTSEngine.isSupported() ? WebTTSEngine :
-        FestivalTTSEngine.isSupported() ? FestivalTTSEngine :
-          null;
-
-      if (/_forceTTSEngine=(festival|web)/.test(location.toString())) {
-        const engineName = location.toString().match(/_forceTTSEngine=(festival|web)/)[1];
-        TTSEngine = { festival: FestivalTTSEngine, web: WebTTSEngine }[engineName];
-      }
+import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.js';
+import { BookReaderPlugin } from '../../BookReaderPlugin.js';
+import { applyVariables } from '../../util/strings.js';
+/** @typedef {import('./PageChunk.js').default} PageChunk */
+/** @typedef {import("./AbstractTTSEngine.js").default} AbstractTTSEngine */
 
-      if (TTSEngine) {
-        /** @type {AbstractTTSEngine} */
-        this.ttsEngine = new TTSEngine({
-          server: options.server,
-          bookPath: options.bookPath,
-          bookLanguage: toISO6391(options.bookLanguage),
-          onLoadingStart: this.showProgressPopup.bind(this, 'Loading audio...'),
-          onLoadingComplete: this.removeProgressPopup.bind(this),
-          onDone: this.ttsStop.bind(this),
-          beforeChunkPlay: this.ttsBeforeChunkPlay.bind(this),
-          afterChunkPlay: this.ttsSendChunkFinishedAnalyticsEvent.bind(this),
-        });
-      }
+const BookReader = /** @type {typeof import('../../BookReader').default} */(window.BookReader);
+
+/**
+ * Plugin for Text to Speech in BookReader
+ */
+export class TtsPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+    /**
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     * The URL where to get PageChunk objects for a given page. Expects a var `pageIndex`
+     **/
+    pageChunkUrl: 'https://{{server}}/BookReader/BookReaderGetTextWrapper.php?path={{bookPath|urlencode}}_djvu.xml&page={{pageIndex}}&callback=false',
+    /**
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     * The URL for converting text to audio if the web SpeechSynthesis API is not supported.
+     * Provided variables:
+     *  - `text` -- the text to convert to audio
+     *  - `format` -- the format of the audio, 'mp3' or 'ogg';
+     */
+    remoteTtsUrl: 'https://{{server}}/BookReader/BookReaderGetTTS.php?string={{text|urlencode}}&format={{format}}',
+  }
+
+  /**
+   * @override
+   * @param {Partial<TtsPlugin['options']>} options
+   **/
+  setup(options) {
+    super.setup(Object.assign({
+      // @deprecated support options specified in global options
+      server: this.br.options.server,
+      bookPath: this.br.options.bookPath,
+    }, options));
+
+    if (!this.options.enabled) return;
+
+    /** @type { {[pageIndex: number]: Array<{ l: number, r: number, t: number, b: number }>} } */
+    this._ttsBoxesByIndex = {};
+
+    let TTSEngine = WebTTSEngine.isSupported() ? WebTTSEngine :
+      FestivalTTSEngine.isSupported() ? FestivalTTSEngine :
+        null;
+
+    if (/_forceTTSEngine=(festival|web)/.test(location.toString())) {
+      const engineName = location.toString().match(/_forceTTSEngine=(festival|web)/)[1];
+      TTSEngine = { festival: FestivalTTSEngine, web: WebTTSEngine }[engineName];
     }
-  };
-})(BookReader.prototype.setup);
-
-BookReader.prototype.init = (function(super_) {
-  return function() {
-    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();
-        }
+
+    if (TTSEngine) {
+      /** @type {AbstractTTSEngine} */
+      this.ttsEngine = new TTSEngine({
+        pageChunkUrl: applyVariables(this.options.pageChunkUrl, this.br.options.vars),
+        bookLanguage: toISO6391(this.br.options.bookLanguage),
+        onLoadingStart: this.br.showProgressPopup.bind(this.br, 'Loading audio...'),
+        onLoadingComplete: this.br.removeProgressPopup.bind(this.br),
+        onDone: this.stop.bind(this),
+        beforeChunkPlay: this.beforeChunkPlay.bind(this),
+        afterChunkPlay: this.sendChunkFinishedAnalyticsEvent.bind(this),
+        ...(TTSEngine === FestivalTTSEngine ? {
+          festivalUrl: applyVariables(this.options.remoteTtsUrl, this.br.options.vars),
+        } : {}),
       });
+    }
+  }
 
-      this.bind(BookReader.eventNames.PostInit, () => {
-        this.$('.BRicon.read').click(() => {
-          this.ttsToggle();
-          return false;
-        });
-        if (this.ttsEngine) {
-          this.ttsEngine.init();
-          if (/[?&]_autoReadAloud=show/.test(location.toString())) {
-            this.ttsStart(false); // false flag is to initiate read aloud controls
-          }
-        }
+  /** @override */
+  init() {
+    if (!this.options.enabled) return;
+
+    this.br.bind(BookReader.eventNames.PostInit, () => {
+      this.br.$('.BRicon.read').click(() => {
+        this.toggle();
+        return false;
       });
+      if (this.ttsEngine) {
+        this.ttsEngine.init();
+        if (/[?&]_autoReadAloud=show/.test(location.toString())) {
+          this.start(false); // false flag is to initiate read aloud controls
+        }
+      }
+    });
 
-      // This is fired when the hash changes by one of the other plugins!
-      // i.e. it will fire every time the page changes -_-
-      // this.bind(BookReader.eventNames.stop, function(e, br) {
-      //     this.ttsStop();
-      // }.bind(this));
+    // This is fired when the hash changes by one of the other plugins!
+    // i.e. it will fire every time the page changes -_-
+    // this.br.bind(BookReader.eventNames.stop, function(e, br) {
+    //     this.ttsStop();
+    // }.bind(this));
+  }
+
+  /**
+   * @override
+   * @param {import ("@/src/BookReader/PageContainer.js").PageContainer} pageContainer
+   */
+  _configurePageContainer(pageContainer) {
+    if (this.options.enabled && pageContainer.page && pageContainer.page.index in this._ttsBoxesByIndex) {
+      const pageIndex = pageContainer.page.index;
+      renderBoxesInPageContainerLayer('ttsHiliteLayer', this._ttsBoxesByIndex[pageIndex], pageContainer.page, pageContainer.$container[0]);
     }
-    super_.call(this);
-  };
-})(BookReader.prototype.init);
+  }
 
+  /**
+   * @override
+   * @param {JQuery<HTMLElement>} $navBar
+   */
+  extendNavBar($navBar) {
+    if (!this.options.enabled || !this.ttsEngine) return;
 
-// Extend buildMobileDrawerElement
-BookReader.prototype.buildMobileDrawerElement = (function (super_) {
-  return function () {
-    const $el = super_.call(this);
-    if (this.options.enableTtsPlugin && this.ttsEngine) {
-      $el.find('.BRmobileMenu__moreInfoRow').after($(`
+    this.br.refs.$BRReadAloudToolbar = $(`
+      <ul class="read-aloud">
         <li>
-            <span>
-                <span class="DrawerIconWrapper"><img class="DrawerIcon" src="${this.imagesBaseURL}icon_speaker_open.svg" alt="info-speaker"/></span>
-                Read Aloud
-            </span>
-            <div>
-                <span class="larger">Press to toggle read aloud</span>
-                <br/>
-                <button class="BRicon read"></button>
-            </div>
-        </li>`));
-    }
-    return $el;
-  };
-})(BookReader.prototype.buildMobileDrawerElement);
-
-// Extend initNavbar
-BookReader.prototype.initNavbar = (function (super_) {
-  return function () {
-    const $el = super_.call(this);
-    if (this.options.enableTtsPlugin && this.ttsEngine) {
-      this.refs.$BRReadAloudToolbar = $(`
-        <ul class="read-aloud">
-          <li>
-            <select class="playback-speed" name="playback-speed" title="${tooltips.playbackSpeed}">
-              <option value="0.25">0.25x</option>
-              <option value="0.5">0.5x</option>
-              <option value="0.75">0.75x</option>
-              <option value="1.0" selected>1.0x</option>
-              <option value="1.25">1.25x</option>
-              <option value="1.5">1.5x</option>
-              <option value="1.75">1.75x</option>
-              <option value="2">2x</option>
-            </select>
-          </li>
-          <li>
-            <button type="button" name="review" title="${tooltips.review}">
-              <div class="icon icon-review"></div>
-            </button>
-          </li>
-          <li>
-            <button type="button" name="play" title="${tooltips.play}">
-              <div class="icon icon-play"></div>
-              <div class="icon icon-pause"></div>
-            </button>
-          </li>
-          <li>
-            <button type="button" name="advance" title="${tooltips.advance}">
-              <div class="icon icon-advance"></div>
-            </button>
-          </li>
-        </ul>
-      `);
-      $el.find('.BRcontrols').prepend(this.refs.$BRReadAloudToolbar);
-      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));
-      const $rateSelector = this.refs.$BRReadAloudToolbar.find('select[name="playback-speed"]');
-      $rateSelector.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>
-            <span class="tooltip">${tooltips.readAloud}</span>
+          <select class="playback-speed" name="playback-speed" title="${tooltips.playbackSpeed}">
+            <option value="0.25">0.25x</option>
+            <option value="0.5">0.5x</option>
+            <option value="0.75">0.75x</option>
+            <option value="1.0" selected>1.0x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="1.75">1.75x</option>
+            <option value="2">2x</option>
+          </select>
+        </li>
+        <li>
+          <button type="button" name="review" title="${tooltips.review}">
+            <div class="icon icon-review"></div>
           </button>
-        </li>`).insertBefore($el.find('.BRcontrols .BRicon.zoom_out').closest('li'));
-    }
-    return $el;
-  };
-})(BookReader.prototype.initNavbar);
-
-// ttsToggle()
-//______________________________________________________________________________
-BookReader.prototype.ttsToggle = function () {
-  if (this.autoStop) this.autoStop();
-  if (this.ttsEngine.playing) {
-    this.ttsStop();
-  } else {
-    this.ttsStart();
+        </li>
+        <li>
+          <button type="button" name="play" title="${tooltips.play}">
+            <div class="icon icon-play"></div>
+            <div class="icon icon-pause"></div>
+          </button>
+        </li>
+        <li>
+          <button type="button" name="advance" title="${tooltips.advance}">
+            <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>
+    `);
+
+    $navBar.find('.BRcontrols').prepend(this.br.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();
+      let bookLanguage = this.ttsEngine.opts.bookLanguage;
+      if (this.br.plugins.translate?.translationManager?.active) {
+        bookLanguage = this.br.plugins.translate.langFromCode;
+      }
+
+      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) {
+        if (this.br.plugins.translate?.translationManager?.active) {
+          // Separate out Other Languages when translation active, not sure if too much / unwieldy
+          const toLang = this.br.plugins.translate.langToCode;
+          const translatedLanguages = this.ttsEngine.getVoices().filter(v => v.lang.startsWith(toLang)).sort(voiceSortOrder);
+          voicesMenu.append($(`<optgroup label="Book Language, Translated From (${bookLanguage})"> ${renderVoiceOption(bookLanguages)} </optgroup>`));
+          voicesMenu.append($(`<optgroup label="Book Language, Translated To (${toLang})"> ${renderVoiceOption(translatedLanguages)} </optgroup>`));
+          voicesMenu.append($(`<optgroup label="Other Languages"> ${renderVoiceOption(otherLanguages.filter(v => !v.lang.startsWith(toLang)).sort(voiceSortOrder))}`));
+        } else {
+          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.br.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.updateState());
+    this.ttsEngine.events.on('voiceschanged', () => renderVoicesMenu(voicesMenu));
+    this.br.on('translationEnabled', () => renderVoicesMenu(voicesMenu));
+    this.br.on('translationDisabled', () => renderVoicesMenu(voicesMenu));
+    this.br.refs.$BRReadAloudToolbar.find('[name=play]').on("click", this.playPause.bind(this));
+    this.br.refs.$BRReadAloudToolbar.find('[name=advance]').on("click", this.jumpForward.bind(this));
+    this.br.refs.$BRReadAloudToolbar.find('[name=review]').on("click", this.jumpBackward.bind(this));
+    const $rateSelector = this.br.refs.$BRReadAloudToolbar.find('select[name="playback-speed"]');
+    $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>
+          <span class="BRtooltip">${tooltips.readAloud}</span>
+        </button>
+      </li>`).insertBefore($navBar.find('.BRcontrols .BRicon.zoom_out').closest('li'));
   }
-};
-
-// ttsStart(
-//______________________________________________________________________________
-BookReader.prototype.ttsStart = function (startTTSEngine = true) {
-  if (this.constModeThumb == this.mode)
-    this.switchMode(this.constMode1up);
-
-  this.refs.$BRReadAloudToolbar.addClass('visible');
-  this.$('.BRicon.read').addClass('unread active');
-  this.ttsSendAnalyticsEvent('Start');
-  if (startTTSEngine)
-    this.ttsEngine.start(this.currentIndex(), this.getNumLeafs());
-};
-
-BookReader.prototype.ttsJumpForward = function () {
-  if (this.ttsEngine.paused) {
-    this.ttsEngine.resume();
+
+  toggle() {
+    this.br.plugins.autoplay?.stop();
+    if (this.ttsEngine.playing) {
+      this.stop();
+    } else {
+      this.start();
+    }
   }
-  this.ttsEngine.jumpForward();
-};
 
-BookReader.prototype.ttsJumpBackward = function () {
-  if (this.ttsEngine.paused) {
-    this.ttsEngine.resume();
+  start(startTTSEngine = true) {
+    const checkVoice = this.br.plugins.translate?.translationManager?.active ? toISO6391(this.br.plugins.translate.langToCode) : "";
+    const bookVoice = this.ttsEngine.getBestVoice(checkVoice);
+
+    const voicesMenu = this.br.refs.$BRReadAloudToolbar.find('[name=playback-voice');
+    this.ttsEngine.setVoice(bookVoice.voiceURI);
+    voicesMenu.val(bookVoice.voiceURI);
+    if (this.br.constModeThumb == this.br.mode)
+      this.br.switchMode(this.br.constMode1up);
+
+    this.br.refs.$BRReadAloudToolbar.addClass('visible');
+    this.br.$('.BRicon.read').addClass('unread active');
+    this.sendAnalyticsEvent('Start');
+    if (startTTSEngine)
+      this.ttsEngine.start(this.br.currentIndex(), this.br.book.getNumLeafs());
   }
-  this.ttsEngine.jumpBackward();
-};
-
-BookReader.prototype.ttsUpdateState = function() {
-  const isPlaying = !(this.ttsEngine.paused || !this.ttsEngine.playing);
-  this.$('.read-aloud [name=play]').toggleClass('playing', isPlaying);
-};
-
-BookReader.prototype.ttsPlayPause = function() {
-  if (!this.ttsEngine.playing) {
-    this.ttsToggle();
-  } else {
-    this.ttsEngine.togglePlayPause();
-    this.ttsUpdateState(this.ttsEngine.paused);
+
+  jumpForward() {
+    if (this.ttsEngine.paused) {
+      this.ttsEngine.resume();
+    }
+    this.ttsEngine.jumpForward();
   }
-};
-
-// ttsStop()
-//______________________________________________________________________________
-BookReader.prototype.ttsStop = function () {
-  this.refs.$BRReadAloudToolbar.removeClass('visible');
-  this.$('.BRicon.read').removeClass('unread active');
-  this.ttsSendAnalyticsEvent('Stop');
-  this.ttsEngine.stop();
-  this.ttsRemoveHilites();
-  this.removeProgressPopup();
-};
 
-/**
- * @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);
-    });
-};
+  jumpBackward() {
+    if (this.ttsEngine.paused) {
+      this.ttsEngine.resume();
+    }
+    this.ttsEngine.jumpBackward();
+  }
 
-/**
- * @param {PageChunk} chunk
- */
-BookReader.prototype.ttsSendChunkFinishedAnalyticsEvent = function(chunk) {
-  this.ttsSendAnalyticsEvent('ChunkFinished-Words', approximateWordCount(chunk.text));
-};
+  updateState() {
+    const isPlaying = !(this.ttsEngine.paused || !this.ttsEngine.playing);
+    this.br.$('.read-aloud [name=play]').toggleClass('playing', isPlaying);
+  }
 
-/**
- * Flip the page if the provided leaf index is not visible
- * @param {Number} leafIndex
- * @return {PromiseLike<void>} resolves once the flip animation has completed
- */
-BookReader.prototype.ttsMaybeFlipToIndex = function (leafIndex) {
-  const in2PageMode = this.constMode2up == this.mode;
-  let resolve = null;
-  const promise = new Promise(res => resolve = res);
-
-  if (!in2PageMode) {
-    this.jumpToIndex(leafIndex);
-    resolve();
-  } else {
-    const leafVisible = leafIndex == this.twoPage.currentIndexR || leafIndex == this.twoPage.currentIndexL;
-    if (leafVisible) {
-      resolve();
+  playPause() {
+    if (!this.ttsEngine.playing) {
+      this.toggle();
     } 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.ttsEngine.togglePlayPause();
+      this.updateState();
     }
   }
 
-  return promise;
-};
 
-/**
- * @param {PageChunk} chunk
- */
-BookReader.prototype.ttsHighlightChunk = function(chunk) {
-  this.ttsRemoveHilites();
-
-  if (this.constMode2up == this.mode) {
-    this.ttsHilite2UP(chunk);
-  } else {
-    this.ttsHilite1UP(chunk);
+  stop() {
+    this.br.refs.$BRReadAloudToolbar.removeClass('visible');
+    this.br.$('.BRicon.read').removeClass('unread active');
+    this.sendAnalyticsEvent('Stop');
+    this.ttsEngine.stop();
+    this.removeHilites();
+    this.br.removeProgressPopup();
   }
-};
 
-/**
- * @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;
+  /**
+   * @param {PageChunk} chunk
+   * Returns once the flip is done
+   */
+  async beforeChunkPlay(chunk) {
+    await this.maybeFlipToIndex(chunk.leafIndex);
+    this.highlightChunk(chunk);
+    this.scrollToChunk(chunk);
   }
 
-  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);
+  /**
+   * @param {PageChunk} chunk
+   */
+  sendChunkFinishedAnalyticsEvent(chunk) {
+    this.sendAnalyticsEvent('ChunkFinished-Words', approximateWordCount(chunk.text));
+  }
 
-  const containerTop = this.refs.$brContainer.prop('scrollTop');
-  const containerBot = containerTop + this.refs.$brContainer.height();
-  if (window?.soundManager?.debugMode) console.log('containerTop = ' + containerTop + ' containerBot = ' + containerBot);
+  /**
+   * Flip the page if the provided leaf index is not visible
+   * @param {Number} leafIndex
+   */
+  async maybeFlipToIndex(leafIndex) {
+    if (!this.br._isIndexDisplayed(leafIndex)) {
+      this.br.jumpToIndex(leafIndex);
+    }
+  }
 
-  if ((topOfFirstChunk < containerTop) || (botOfLastChunk > containerBot)) {
-    this.refs.$brContainer.stop(true).animate({scrollTop: topOfFirstChunk},'fast');
+  /**
+   * @param {PageChunk} chunk
+   */
+  highlightChunk(chunk) {
+    // The poorly-named variable leafIndex
+    const pageIndex = chunk.leafIndex;
+
+    this.removeHilites();
+    if (this.br.plugins.translate?.translationManager.active) {
+      const pageContainers = this.br.getActivePageContainerElementsForIndex(pageIndex);
+      const paragraphIndex = chunk.chunkIndex;
+      pageContainers.forEach(container => {
+        const translateElement = container.querySelector('.BRtranslateLayer');
+        const containerChildren = Array.from(translateElement.childNodes);
+        const paragraphEle = containerChildren[paragraphIndex];
+        if (!paragraphEle) { return; }
+        const [pOffHeight, pOffTop, pOffWidth, pOffLeft] = [paragraphEle.offsetHeight, paragraphEle.offsetTop, paragraphEle.offsetWidth, paragraphEle.offsetLeft];
+        const boxes = {pageIndex: [
+          {l: pOffLeft, r: pOffLeft + pOffWidth, b: pOffTop + pOffHeight, t: pOffTop},
+        ]};
+        renderBoxesInPageContainerLayer('ttsHiliteLayer', boxes.pageIndex, this.br.book.getPage(pageIndex), translateElement);
+      });
+      return;
+    }
+    // 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})),
+    };
+
+    // update any already created pages
+    for (const [pageIndexString, boxes] of Object.entries(this._ttsBoxesByIndex)) {
+      const pageIndex = parseFloat(pageIndexString);
+      const page = this.br.book.getPage(pageIndex);
+      const pageContainers = this.br.getActivePageContainerElementsForIndex(pageIndex);
+      pageContainers.forEach(container => renderBoxesInPageContainerLayer('ttsHiliteLayer', boxes, page, container));
+    }
   }
-};
 
-/**
- * @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'
+  /**
+   * @param {PageChunk} chunk
+   */
+  scrollToChunk(chunk) {
+    // It behaves weird if used in thumb mode
+    if (this.br.constModeThumb == this.br.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.br.constMode1up == this.br.mode || this.br.isFullscreenActive ? 'center' : 'nearest',
+      inline: 'center',
+      behavior: 'smooth',
     });
   }
 
-};
-
-/**
- * @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);
+  removeHilites() {
+    $(this.br.getActivePageContainerElements()).find('.ttsHiliteLayer').remove();
+    this._ttsBoxesByIndex = {};
   }
-};
-
-// ttsRemoveHilites()
-//______________________________________________________________________________
-BookReader.prototype.ttsRemoveHilites = function () {
-  $(this.ttsHilites).remove();
-  this.ttsHilites = [];
-};
 
-/**
- * @private
- * Send an analytics event with an optional value. Also attaches the book's language.
- * @param {string} action
- * @param {number} [value]
- */
-BookReader.prototype.ttsSendAnalyticsEvent = function(action, value) {
-  if (this.archiveAnalyticsSendEvent) {
-    const extraValues = {};
-    const mediaLanguage = this.ttsEngine.opts.bookLanguage;
-    if (mediaLanguage) extraValues.mediaLanguage = mediaLanguage;
-    this.archiveAnalyticsSendEvent('BRReadAloud', action, value, extraValues);
+  /**
+   * @private
+   * Send an analytics event with an optional value. Also attaches the book's language.
+   * @param {string} action
+   * @param {number} [value]
+   */
+  sendAnalyticsEvent(action, value) {
+    if (this.br.plugins.archiveAnalytics) {
+      const extraValues = {};
+      const mediaLanguage = this.ttsEngine.opts.bookLanguage;
+      if (mediaLanguage) extraValues.mediaLanguage = mediaLanguage;
+      this.br.plugins.archiveAnalytics.sendEvent('BRReadAloud', action, value, extraValues);
+    }
   }
-};
+}
+
+BookReader?.registerPlugin('tts', TtsPlugin);