@internetarchive/bookreader 5.0.0-97 → 5.0.0-99

package/src/plugins/translate/plugin.translate.js

@@ -2,7 +2,11 @@
 import { html, LitElement } from 'lit';
 import { BookReaderPlugin } from '../../BookReaderPlugin.js';
 import { customElement, property } from 'lit/decorators.js';
-import { langs, TranslationManager } from "./TranslationManager.js";
+import { TranslationManager } from "./TranslationManager.js";
+import { toISO6391 } from '../tts/utils.js';
+import { sortBy } from '../../../src/BookReader/utils.js';
+import { TextSelectionManager } from '../../../src/util/TextSelectionManager.js';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator.js';
 
 // @ts-ignore
 const BookReader = /** @type {typeof import('@/src/BookReader.js').default} */(window.BookReader);
@@ -11,6 +15,8 @@ export class TranslatePlugin extends BookReaderPlugin {
 
   options = {
     enabled: true,
+
+    /** @type {string | import('lit').TemplateResult} */
     panelDisclaimerText: "Translations are in alpha",
   }
 
@@ -27,10 +33,10 @@ export class TranslatePlugin extends BookReaderPlugin {
   toLanguages = [];
 
   /**
-   * Current language code that is being translated From
+   * Current language code that is being translated From. Defaults to EN currently
    * @type {!string}
    */
-  langFromCode = "en";
+  langFromCode;
 
   /**
    * Current language code that is being translated To
@@ -43,7 +49,22 @@ export class TranslatePlugin extends BookReaderPlugin {
    */
   _panel;
 
+  /**
+   * @type {boolean} userToggleTranslate - Checks if user has initiated translation
+   * Should synchronize with the state of TranslationManager's active state
+   */
+  userToggleTranslate;
+
+  /**
+   * @type {boolean} loadingModel - Shows loading animation while downloading lang model
+   */
+  loadingModel = true;
+
+
   async init() {
+    const currentLanguage = toISO6391(this.br.options.bookLanguage.replace(/[.,/#!$%^&*;:{}=\-_`~()]/g, ""));
+    this.langFromCode = currentLanguage ?? "en";
+
     if (!this.options.enabled) {
       return;
     }
@@ -84,10 +105,8 @@ export class TranslatePlugin extends BookReaderPlugin {
     await this.translationManager.initWorker();
     // Note await above lets _render function properly, since it gives the browser
     // time to render the rest of bookreader, which _render depends on
-    this._render();
-
     this.langToCode = this.translationManager.toLanguages[0].code;
-
+    this._render();
   }
 
   /** @param {HTMLElement} page*/
@@ -114,7 +133,8 @@ export class TranslatePlugin extends BookReaderPlugin {
 
   /** @param {HTMLElement} page */
   async translateRenderedLayer(page, priority) {
-    if (this.br.mode == this.br.constModeThumb) {
+    // Do not run translation if in thumbnail mode or if user did not initiate transations
+    if (this.br.mode == this.br.constModeThumb || !this.userToggleTranslate || this.langFromCode == this.langToCode) {
       return;
     }
 
@@ -123,7 +143,7 @@ export class TranslatePlugin extends BookReaderPlugin {
     let pageTranslationLayer;
     if (!page.querySelector('.BRPageLayer.BRtranslateLayer')) {
       pageTranslationLayer = document.createElement('div');
-      pageTranslationLayer.classList.add('BRPageLayer', 'BRtranslateLayer');
+      pageTranslationLayer.classList.add('BRPageLayer', 'BRtranslateLayer', 'BRtranslateLayerLoading');
       pageTranslationLayer.setAttribute('lang', `${this.langToCode}`);
       page.prepend(pageTranslationLayer);
     } else {
@@ -141,7 +161,7 @@ export class TranslatePlugin extends BookReaderPlugin {
     });
     const paragraphs = this.getParagraphsOnPage(page);
 
-    paragraphs.forEach(async (paragraph, pidx) => {
+    const paragraphTranslationPromises = paragraphs.map(async (paragraph, pidx) => {
       let translatedParagraph = page.querySelector(`[data-translate-index='${pageIndex}-${pidx}']`);
       if (!translatedParagraph) {
         translatedParagraph = document.createElement('p');
@@ -149,6 +169,11 @@ export class TranslatePlugin extends BookReaderPlugin {
         translatedParagraph.setAttribute('data-translate-index', `${pageIndex}-${pidx}`);
         translatedParagraph.className = 'BRparagraphElement';
         const originalParagraphStyle = paragraphs[pidx];
+        // check text selection paragraphs for header/footer roles
+        if (paragraph.classList.contains('ocr-role-header-footer')) {
+          translatedParagraph.ariaHidden = "true";
+          translatedParagraph.classList.add('ocr-role-header-footer');
+        }
         const fontSize = `${parseInt($(originalParagraphStyle).css("font-size"))}px`;
 
         $(translatedParagraph).css({
@@ -159,28 +184,15 @@ export class TranslatePlugin extends BookReaderPlugin {
           "width": $(originalParagraphStyle).css("width"),
           "font-size": fontSize,
         });
-
-        // Note: We'll likely want to switch to using the same logic as
-        // TextSelectionPlugin's selection, which allows for e.g. click-to-flip
-        // to work simultaneously with text selection.
-        translatedParagraph.addEventListener('mousedown', (e) => {
-          e.stopPropagation();
-          e.stopImmediatePropagation();
-        });
-
-        translatedParagraph.addEventListener('mouseup', (e) => {
-          e.stopPropagation();
-          e.stopImmediatePropagation();
-        });
-
-        translatedParagraph.addEventListener('dragstart', (e) =>{
-          e.preventDefault();
-        });
         pageTranslationLayer.append(translatedParagraph);
       }
 
       if (paragraph.textContent.length !== 0) {
         const pagePriority = parseFloat(pageIndex) + priority + pidx;
+        this.translationManager.getTranslationModel(this.langFromCode, this.langToCode).then(() => {
+          this._panel.loadingModel = false;
+          this.loadingModel = false;
+        });
         const translatedText = await this.translationManager.getTranslation(this.langFromCode, this.langToCode, pageIndex, pidx, paragraph.textContent, pagePriority);
         // prevent duplicate spans from appearing if exists
         translatedParagraph.firstElementChild?.remove();
@@ -199,10 +211,39 @@ export class TranslatePlugin extends BookReaderPlugin {
         }
       }
     });
+
+    this.textSelectionManager?.stopPageFlip(this.br.refs.$brContainer);
+    await Promise.all(paragraphTranslationPromises);
+    this.br.trigger('translateLayerRendered', {
+      leafIndex: pageIndex,
+      translateLayer: pageTranslationLayer,
+    });
+  }
+
+  /**
+   * Get the translation layers for a specific leaf index.
+   * @param {number} leafIndex
+   * @returns {Promise<HTMLElement[]>}
+   */
+  async getTranslateLayers(leafIndex) {
+    const pageContainerElements = this.br.getActivePageContainerElementsForIndex(leafIndex);
+    const translateLayer = $(pageContainerElements).filter(`[data-index='${leafIndex}']`).find('.BRtranslateLayer');
+    if (translateLayer.length) return translateLayer.toArray();
+
+    return new Promise((res, rej) => {
+      const handler = async (_, extraParams) => {
+        if (extraParams.leafIndex == leafIndex) {
+          this.br.off('translateLayerRendered', handler); // remember to detach translateLayer
+          res([extraParams.translateLayer]);
+        }
+      };
+      this.br.on('translateLayerRendered', handler);
+    });
   }
 
   clearAllTranslations() {
     document.querySelectorAll('.BRtranslateLayer').forEach(el => el.remove());
+    document.querySelectorAll('.showingTranslation').forEach(el => el.classList.remove('showingTranslation'));
   }
 
   /**
@@ -247,16 +288,21 @@ export class TranslatePlugin extends BookReaderPlugin {
 
     // Update the from language
     this.langFromCode = selectedLangFrom;
+    this._panel.requestUpdate();
 
     // Add 'From' language to 'To' list if not already present
     if (!this.translationManager.toLanguages.some(lang => lang.code === selectedLangFrom)) {
-      this.translationManager.toLanguages.push({ code: selectedLangFrom, name: langs[selectedLangFrom] });
+      this.translationManager.toLanguages.push({
+        code: selectedLangFrom,
+        name: this.translationManager.fromLanguages.find((entry) => entry.code == selectedLangFrom).name,
+      });
     }
 
     // Update the 'To' languages list and set the correct 'To' language
     this._panel.toLanguages = this.translationManager.toLanguages;
 
     console.log(this.langFromCode, this.langToCode);
+    this._render();
     if (this.langFromCode !== this.langToCode) {
       this.translateActivePageContainerElements();
     }
@@ -265,12 +311,32 @@ export class TranslatePlugin extends BookReaderPlugin {
   handleToLangChange = async (e) => {
     this.clearAllTranslations();
     this.langToCode = e.detail.value;
+    this._render();
     this.translateActivePageContainerElements();
   }
 
+  handleToggleTranslation = async () => {
+    this.userToggleTranslate = !this.userToggleTranslate;
+    this.translationManager.active = this.userToggleTranslate;
+    // Init textSelectionManager only after the translation is active
+    if (!this.textSelectionManager) {
+      this.textSelectionManager = new TextSelectionManager('.BRtranslateLayer', this.br, {selectionElement: [".BRlineElement"]}, 1);
+      this.textSelectionManager.init();
+    }
+    this._render();
+    if (!this.userToggleTranslate) {
+      this.clearAllTranslations();
+      this.br.trigger('translationDisabled', { });
+      this.textSelectionManager.detach();
+    } else {
+      this.br.trigger('translationEnabled', { });
+      this.translateActivePageContainerElements();
+      this.textSelectionManager.attach();
+    }
+  }
 
   /**
-  * Update the table of contents based on array of TOC entries.
+  * Update translation side menu
   */
   _render() {
     this.br.shell.menuProviders['translate'] = {
@@ -282,13 +348,22 @@ export class TranslatePlugin extends BookReaderPlugin {
         this._panel = e.target;
         this._panel.fromLanguages = this.translationManager.fromLanguages;
         this._panel.toLanguages = this.translationManager.toLanguages;
+        this._panel.userTranslationActive = this.userToggleTranslate;
+        this._panel.detectedToLang = this.langToCode;
+        this._panel.detectedFromLang = this.langFromCode;
+        this._panel.loadingModel = this.loadingModel;
       }
       }"
         @langFromChanged="${this.handleFromLangChange}"
         @langToChanged="${this.handleToLangChange}"
+        @toggleTranslation="${this.handleToggleTranslation}"
         .fromLanguages="${this.translationManager.fromLanguages}"
         .toLanguages="${this.translationManager.toLanguages}"
         .disclaimerMessage="${this.options.panelDisclaimerText}"
+        .userTranslationActive=${this.userToggleTranslate}
+        .detectedFromLang=${this.langFromCode}
+        .detectedToLang=${this.langToCode}
+        .loadingModel=${this.loadingModel}
         class="translate-panel"
       />`,
     };
@@ -303,6 +378,10 @@ export class BrTranslatePanel extends LitElement {
   @property({ type: Array }) toLanguages = []; // List of obj {code, name}
   @property({ type: String }) prevSelectedLang = ''; // Tracks the previous selected language for the "To" dropdown
   @property({ type: String }) disclaimerMessage = '';
+  @property({ type: Boolean }) userTranslationActive = false;
+  @property({ type: String }) detectedFromLang = '';
+  @property({ type: String }) detectedToLang = '';
+  @property({ type: Boolean }) loadingModel;
 
   /** @override */
   createRenderRoot() {
@@ -316,42 +395,60 @@ export class BrTranslatePanel extends LitElement {
   }
 
   render() {
-    const showPrevLangButton =
-      this.prevSelectedLang &&
-      (this.prevSelectedLang !== this._getSelectedLang('to') || this._getSelectedLang('from') === this._getSelectedLang('to'));
-
-    return html`<div class="app">
-      <div class="panel panel--from">
+    return html`<div class="app" style="margin-top: 5%;padding-right: 5px;">
+      <div
+        class="disclaimer"
+        id="disclaimerMessage"
+        style="background-color: rgba(255,255,255,0.1);padding: 10px;border-radius: 8px;font-size: 12px;margin-bottom: 10px;color: rgba(255,255,255, 0.9);"
+      >${this.disclaimerMessage}</div>
+
+      <div class="panel panel--to" style="padding: 0 10px;">
         <label>
-          From
-          <select id="lang-from" name="from" class="lang-select" @change="${this._onLangFromChange}">
-            ${this.fromLanguages.map(
-      lang => html`<option value="${lang.code}">${lang.name}</option>`,
-    )}
+          <span style="font-size: 12px;color: #ccc;">Translate To</span>
+          <select id="lang-to" name="to" class="lang-select" style="display:block; width:100%;" @change="${this._onLangToChange}">
+          ${sortBy(this.toLanguages, ((lang) => lang.name.toLowerCase()
+    )).map((lang) => {
+      return html`<option value="${lang.code}" 
+                        ?selected=${lang.code == this.detectedToLang}
+                        > ${lang.name ? lang.name : lang.code} </option>`;
+    })
+          }
           </select>
         </label>
       </div>
-      <div class="panel panel--to">
-        <label>
-          To
-          <select id="lang-to" name="to" class="lang-select" @change="${this._onLangToChange}">
-            ${this.toLanguages.map(
-      lang => html`<option value="${lang.code}">${lang.name}</option>`,
-    )}
+
+      <div class="panel panel--start" style="text-align: right;padding: 0 10px;/*! font-size: 18px; */margin-top: 10px;">
+            <button class="start-translation-brn" @click="${this._toggleTranslation}">
+              ${this.userTranslationActive ? "Stop Translating" : "Translate"}
+            </button>
+      </div>
+
+      <div class="panel panel--from" style="font-size: 12px;color: #ccc;text-align: center;padding: 8px 10px;">
+        <details style="display: contents">
+          <summary style="text-decoration: underline white; cursor:pointer; display:inline-block"> 
+            <i>
+              Source: ${this._getLangName(this.detectedFromLang)} ${this.prevSelectedLang ? "" : "(detected)"} 
+            </i> Change 
+          </summary>
+          <select id="lang-from" name="from" class="lang-select" value=${this.detectedFromLang} @change="${this._onLangFromChange}" style="width:65%; margin-top: 3%; margin-bottom: 3%">
+          ${sortBy(this.fromLanguages, ((lang) => lang.name.toLowerCase()
+          )).map((lang) => {
+            return html`<option value="${lang.code}"
+                      ?selected=${lang.code == this.detectedFromLang}
+                      >${lang.name ? lang.name : lang.code} </option>`;
+          })
+          }
           </select>
-        </label>
-        ${showPrevLangButton
-      ? html`<button class="prev-lang-btn" @click="${this._onPrevLangClick}">
-              ${this._getLangName(this.prevSelectedLang)}
-            </button>`
-      : ''}
+      </details>
+      <div class="footer" id="status" style="margin-top:5%">
+      ${this._statusWarning()}
+      </div>
+
+      <div class="lang-models-loading"> 
+      ${this._languageModelStatus()}
       </div>
-      <div class="footer" id="status"></div>
-      <br/>
-      <div class="disclaimer" id="disclaimerMessage"> ${this.disclaimerMessage} </div>
     </div>`;
   }
-
   _onLangFromChange(event) {
     const langFromChangedEvent = new CustomEvent('langFromChanged', {
       detail: { value: event.target.value },
@@ -364,6 +461,8 @@ export class BrTranslatePanel extends LitElement {
     if (this._getSelectedLang('to') !== this._getSelectedLang('from')) {
       this.prevSelectedLang = this._getSelectedLang('from');
     }
+    this.loadingModel = true;
+    this.detectedFromLang = event.target.value;
   }
 
   _onLangToChange(event) {
@@ -378,30 +477,12 @@ export class BrTranslatePanel extends LitElement {
     if (this._getSelectedLang('from') !== event.target.value) {
       this.prevSelectedLang = this._getSelectedLang('from');
     }
-  }
-
-  _onPrevLangClick() {
-    const prevLang = this.prevSelectedLang;
-    if (prevLang == this._getSelectedLang('from')) {
-      console.log("_onPrevLangClick: will not change since prevLang is the same as the current 'To' language code");
-      return;
-    }
-    this.prevSelectedLang = this._getSelectedLang('to'); // Update prevSelectedLang to current "To" value
-    const langToChangedEvent = new CustomEvent('langToChanged', {
-      detail: { value: prevLang },
-      bubbles: true,
-      composed: true,
-    });
-    this.dispatchEvent(langToChangedEvent);
-
-    // Update the "To" dropdown to the previous language
-    const toDropdown = this.querySelector('#lang-to');
-    if (toDropdown) {
-      toDropdown.value = prevLang;
-    }
+    this.loadingModel = true;
+    this.detectedToLang = event.target.value;
   }
 
   _getSelectedLang(type) {
+    /** @type {HTMLSelectElement} */
     const dropdown = this.querySelector(`#lang-${type}`);
     return dropdown ? dropdown.value : '';
   }
@@ -410,5 +491,35 @@ export class BrTranslatePanel extends LitElement {
     const lang = [...this.fromLanguages, ...this.toLanguages].find(lang => lang.code === code);
     return lang ? lang.name : '';
   }
-}
 
+  _toggleTranslation(event) {
+    const toggleTranslateEvent = new CustomEvent('toggleTranslation', {
+      detail: {value: event.target.value},
+      bubbles: true,
+      composed:true,
+    });
+    this.userTranslationActive = !this.userTranslationActive;
+    this.dispatchEvent(toggleTranslateEvent);
+  }
+
+  // TODO: Hardcoded warning message for now but should add more statuses
+  _statusWarning() {
+    if (this.detectedFromLang == this.detectedToLang) {
+      return "Translate To language is the same as the Source language";
+    }
+    return "";
+  }
+
+  _languageModelStatus() {
+    if (this.userTranslationActive) {
+      if (this.loadingModel) {
+        return html`
+        <ia-activity-indicator mode="processing" style="display:block; width: 40px; height: 40px; margin: 0 auto;"></ia-activity-indicator>
+        <p>Downloading language model</p>
+        `;
+      }
+      return html`<p>Language model loaded</p>`;
+    }
+    return "";
+  }
+}

package/src/plugins/tts/AbstractTTSEngine.js

@@ -86,9 +86,8 @@ export default class AbstractTTSEngine {
 
     this._chunkIterator = new PageChunkIterator(numLeafs, leafIndex, {
       pageChunkUrl: this.opts.pageChunkUrl,
-      pageBufferSize: 5,
+      pageBufferSize: 3,
     });
-
     this.step();
     this.events.trigger('start');
   }
@@ -205,8 +204,8 @@ export default class AbstractTTSEngine {
   }
 
   /** Convenience wrapper for {@see AbstractTTSEngine.getBestVoice} */
-  getBestVoice() {
-    return AbstractTTSEngine.getBestBookVoice(this.getVoices(), this.opts.bookLanguage);
+  getBestVoice(languageOverride) {
+    return AbstractTTSEngine.getBestBookVoice(this.getVoices(), languageOverride || this.opts.bookLanguage);
   }
 
   /**

package/src/plugins/tts/PageChunk.js

@@ -23,15 +23,34 @@ export default class PageChunk {
    * @return {Promise<PageChunk[]>}
    */
   static async fetch(pageChunkUrl, leafIndex) {
-    const chunks = await $.ajax({
-      type: 'GET',
-      url: applyVariables(pageChunkUrl, { pageIndex: leafIndex }),
-      cache: true,
-      xhrFields: {
-        withCredentials: window.br.protected,
-      },
-    });
-    return PageChunk._fromTextWrapperResponse(leafIndex, chunks);
+    if (window.br.plugins.translate?.translationManager.active) {
+      const translateLayers = await window.br.plugins.translate.getTranslateLayers(leafIndex);
+      const paragraphs = Array.from(translateLayers[0].childNodes);
+
+      const pageChunks = [];
+      for (const [idx, item] of paragraphs.entries()) {
+        // Should not read paragraphs w/ header or footer roles
+        if (!item.classList.contains('ocr-role-header-footer')) {
+          const translatedChunk = new PageChunk(leafIndex, idx, item.textContent, []);
+          pageChunks.push(translatedChunk);
+        }
+      }
+      if (pageChunks.length === 0) {
+        const placeholder = new PageChunk(leafIndex, 0, "", []);
+        pageChunks.push(placeholder);
+      }
+      return pageChunks;
+    } else {
+      const chunks = await $.ajax({
+        type: 'GET',
+        url: applyVariables(pageChunkUrl, { pageIndex: leafIndex }),
+        cache: true,
+        xhrFields: {
+          withCredentials: window.br.protected,
+        },
+      });
+      return PageChunk._fromTextWrapperResponse(leafIndex, chunks);
+    }
   }
 
   /**

package/src/plugins/tts/WebTTSEngine.js

@@ -30,7 +30,11 @@ export default class WebTTSEngine extends AbstractTTSEngine {
   start(leafIndex, numLeafs) {
     // Need to run in this function to capture user intent to start playing audio
     if ('mediaSession' in navigator) {
-      const audio = new Audio(SILENCE_6S_MP3);
+      /**
+       * According to https://developers.google.com/web/updates/2017/02/media-session#implementation_notes , it needs to be at least 5 seconds
+       * long to allow usage of the media sessions api
+       */
+      const audio = new Audio(br.options.imagesBaseURL + '../silence.mp3');
       audio.loop = true;
 
       this.events.on('pause', () => audio.pause());
@@ -386,9 +390,3 @@ export class WebTTSSound {
     }
   }
 }
-
-/**
- * According to https://developers.google.com/web/updates/2017/02/media-session#implementation_notes , it needs to be at least 5 seconds
- * long to allow usage of the media sessions api
- */
-const SILENCE_6S_MP3 = 'data:audio/mp3;base64,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';

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

@@ -165,13 +165,26 @@ export class TtsPlugin extends BookReaderPlugin {
 
     const renderVoicesMenu = (voicesMenu) => {
       voicesMenu.empty();
-      const bookLanguage = this.ttsEngine.opts.bookLanguage;
+      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) {
-        voicesMenu.append($(`<optgroup label="Book Language (${bookLanguage})"> ${renderVoiceOption(bookLanguages)} </optgroup>`));
-        voicesMenu.append($(`<optgroup label="Other Languages"> ${renderVoiceOption(otherLanguages)} </optgroup>`));
+        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();
@@ -185,6 +198,8 @@ export class TtsPlugin extends BookReaderPlugin {
     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));
@@ -208,6 +223,12 @@ export class TtsPlugin extends BookReaderPlugin {
   }
 
   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);
 
@@ -291,7 +312,22 @@ export class TtsPlugin extends BookReaderPlugin {
     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})),