@internetarchive/bookreader 5.0.0-96 → 5.0.0-98

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

@@ -0,0 +1,489 @@
+// @ts-check
+import { html, LitElement } from 'lit';
+import { BookReaderPlugin } from '../../BookReaderPlugin.js';
+import { customElement, property } from 'lit/decorators.js';
+import { langs, TranslationManager } from "./TranslationManager.js";
+import { toISO6391 } from '../tts/utils.js';
+import { sortBy } from '../../../src/BookReader/utils.js';
+
+// @ts-ignore
+const BookReader = /** @type {typeof import('@/src/BookReader.js').default} */(window.BookReader);
+
+export class TranslatePlugin extends BookReaderPlugin {
+
+  options = {
+    enabled: true,
+
+    /** @type {string | import('lit').TemplateResult} */
+    panelDisclaimerText: "Translations are in alpha",
+  }
+
+  /** @type {TranslationManager} */
+  translationManager = new TranslationManager();
+
+  /** @type {Worker}*/
+  worker;
+
+  /**
+   * Contains the list of languages available to translate to
+   * @type {string[]}
+   */
+  toLanguages = [];
+
+  /**
+   * Current language code that is being translated From. Defaults to EN currently
+   * @type {!string}
+   */
+  langFromCode
+
+  /**
+   * Current language code that is being translated To
+   * @type {!string}
+   */
+  langToCode;
+  /**
+   * @type {BrTranslatePanel} _panel - Represents a panel used in the plugin.
+   * The specific type and purpose of this panel should be defined based on its usage.
+   */
+  _panel;
+
+  /**
+   * @type {boolean} userToggleTranslate - Checks if user has initiated translation
+   * Should synchronize with the state of TranslationManager's active state
+   */
+  userToggleTranslate;
+
+  async init() {
+    const currentLanguage = toISO6391(this.br.options.bookLanguage.replace(/[.,/#!$%^&*;:{}=\-_`~()]/g, ""));
+    this.langFromCode = currentLanguage ?? "en";
+
+    if (!this.options.enabled) {
+      return;
+    }
+
+    this.translationManager.publicPath = this.br.options.imagesBaseURL.replace(/\/+$/, '') + '/..';
+
+    /**
+     * @param {*} ev
+     * @param {object} eventProps
+    */
+    this.br.on('textLayerRendered', async (_, {pageIndex, pageContainer}) => {
+      // Stops invalid models from running, also prevents translation on page load
+      // TODO check if model has finished loading or if it exists
+      if (!this.translationManager) {
+        return;
+      }
+      if (this.translationManager.active) {
+        const pageElement = pageContainer.$container[0];
+        this.translateRenderedLayer(pageElement);
+      }
+    });
+
+    /**
+     * @param {*} ev
+     * @param {object} eventProps
+    */
+    this.br.on('pageVisible', (_, {pageContainerEl}) => {
+      if (!this.translationManager.active) {
+        return;
+      }
+      for (const paragraphEl of pageContainerEl.querySelectorAll('.BRtranslateLayer > .BRparagraphElement')) {
+        if (paragraphEl.textContent) {
+          this.fitVisiblePage(paragraphEl);
+        }
+      }
+    });
+
+    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.langToCode = this.translationManager.toLanguages[0].code;
+    this._render();
+  }
+
+  /** @param {HTMLElement} page*/
+  getParagraphsOnPage = (page) => {
+    return page ? Array.from(page.querySelectorAll(".BRtextLayer > .BRparagraphElement")) : [];
+  }
+
+  translateActivePageContainerElements() {
+    const currentlyActiveContainers = this.br.getActivePageContainerElements();
+    const visiblePageContainers = currentlyActiveContainers.filter((element) => {
+      return element.classList.contains('BRpage-visible');
+    });
+    const hiddenPageContainers = currentlyActiveContainers.filter((element) => {
+      return !element.classList.contains('BRpage-visible');
+    });
+
+    for (const page of visiblePageContainers) {
+      this.translateRenderedLayer(page, 0);
+    }
+    for (const loadingPage of hiddenPageContainers) {
+      this.translateRenderedLayer(loadingPage, 1000);
+    }
+  }
+
+  /** @param {HTMLElement} page */
+  async translateRenderedLayer(page, priority) {
+    // 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;
+    }
+
+    const pageIndex = page.dataset.index;
+
+    let pageTranslationLayer;
+    if (!page.querySelector('.BRPageLayer.BRtranslateLayer')) {
+      pageTranslationLayer = document.createElement('div');
+      pageTranslationLayer.classList.add('BRPageLayer', 'BRtranslateLayer', 'BRtranslateLayerLoading');
+      pageTranslationLayer.setAttribute('lang', `${this.langToCode}`);
+      page.prepend(pageTranslationLayer);
+    } else {
+      pageTranslationLayer = page.querySelector('.BRPageLayer.BRtranslateLayer');
+    }
+
+    const textLayerElement = page.querySelector('.BRtextLayer');
+    textLayerElement.classList.add('showingTranslation');
+    $(pageTranslationLayer).css({
+      "width": $(textLayerElement).css("width"),
+      "height": $(textLayerElement).css("height"),
+      "transform": $(textLayerElement).css("transform"),
+      "pointer-events": $(textLayerElement).css("pointer-events"),
+      "z-index": 3,
+    });
+    const paragraphs = this.getParagraphsOnPage(page);
+
+    const paragraphTranslationPromises = paragraphs.map(async (paragraph, pidx) => {
+      let translatedParagraph = page.querySelector(`[data-translate-index='${pageIndex}-${pidx}']`);
+      if (!translatedParagraph) {
+        translatedParagraph = document.createElement('p');
+        // set data-translate-index on the placeholder
+        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({
+          "margin-left": $(originalParagraphStyle).css("margin-left"),
+          "margin-top": $(originalParagraphStyle).css("margin-top"),
+          "top": $(originalParagraphStyle).css("top"),
+          "height": $(originalParagraphStyle).css("height"),
+          "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;
+        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();
+
+        const firstWordSpacing = paragraphs[pidx]?.firstChild?.firstChild;
+        const createSpan = document.createElement('span');
+        createSpan.className = 'BRlineElement';
+        createSpan.textContent = translatedText;
+        translatedParagraph.appendChild(createSpan);
+
+        $(createSpan).css({
+          "text-indent": $(firstWordSpacing).css('padding-left'),
+        });
+        if (page.classList.contains('BRpage-visible')) {
+          this.fitVisiblePage(translatedParagraph);
+        }
+      }
+    });
+    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());
+  }
+
+  /**
+   * @param {Element} paragEl
+   */
+  fitVisiblePage(paragEl) {
+    // For some reason, Chrome does not detect the transform property for the translation + text layers
+    // Could not get it to fetch the transform value using $().css method
+    // Oddly enough the value is retrieved if using .style.transform instead?
+    const translateLayerEl = paragEl.parentElement;
+    if ($(translateLayerEl).css('transform') == 'none') {
+      const pageNumber = paragEl.getAttribute('data-translate-index').split('-')[0];
+      /** @type {HTMLElement} selectionTransform */
+      const textLayerEl = document.querySelector(`[data-index='${pageNumber}'] .BRtextLayer`);
+      $(translateLayerEl).css({'transform': textLayerEl.style.transform});
+    }
+
+    const originalFontSize = parseInt($(paragEl).css("font-size"));
+    let adjustedFontSize = originalFontSize;
+    while (paragEl.clientHeight < paragEl.scrollHeight && adjustedFontSize > 0) {
+      adjustedFontSize--;
+      $(paragEl).css({ "font-size": `${adjustedFontSize}px` });
+    }
+
+    const textHeight = paragEl.firstElementChild.clientHeight;
+    const scrollHeight = paragEl.scrollHeight;
+    const fits = textHeight < scrollHeight;
+    if (fits) {
+      const lines = textHeight / adjustedFontSize;
+      // Line heights for smaller paragraphs occasionally need a minor adjustment
+      const newLineHeight = scrollHeight / lines;
+      $(paragEl).css({
+        "line-height" : `${newLineHeight}px`,
+        "overflow": "visible",
+      });
+    }
+  }
+
+  handleFromLangChange = async (e) => {
+    this.clearAllTranslations();
+    const selectedLangFrom = e.detail.value;
+
+    // Update the from language
+    this.langFromCode = selectedLangFrom;
+
+    // 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] });
+    }
+
+    // Update the 'To' languages list and set the correct 'To' language
+    this._panel.toLanguages = this.translationManager.toLanguages;
+
+    console.log(this.langFromCode, this.langToCode);
+    if (this.langFromCode !== this.langToCode) {
+      this.translateActivePageContainerElements();
+    }
+  }
+
+  handleToLangChange = async (e) => {
+    this.clearAllTranslations();
+    this.langToCode = e.detail.value;
+    this.translateActivePageContainerElements();
+  }
+
+  handleToggleTranslation = async () => {
+    this.userToggleTranslate = !this.userToggleTranslate;
+    this.translationManager.active = this.userToggleTranslate;
+    if (!this.userToggleTranslate) {
+      this.clearAllTranslations();
+      this.br.trigger('translationDisabled', { });
+    } else {
+      this.br.trigger('translationEnabled', { });
+      this.translateActivePageContainerElements();
+    }
+  }
+
+  /**
+  * Update translation side menu
+  */
+  _render() {
+    this.br.shell.menuProviders['translate'] = {
+      id: 'translate',
+      icon: html`<img src='${this.br.options.imagesBaseURL}/translate.svg' width="26"/>`,
+      label: 'Translate',
+      component: html`<br-translate-panel
+        @connected="${e => {
+        this._panel = e.target;
+        this._panel.fromLanguages = this.translationManager.fromLanguages;
+        this._panel.toLanguages = this.translationManager.toLanguages;
+      }
+      }"
+        @langFromChanged="${this.handleFromLangChange}"
+        @langToChanged="${this.handleToLangChange}"
+        @toggleTranslation="${this.handleToggleTranslation}"
+        .fromLanguages="${this.translationManager.fromLanguages}"
+        .toLanguages="${this.translationManager.toLanguages}"
+        .disclaimerMessage="${this.options.panelDisclaimerText}"
+        .userTranslationActive=${false}
+        .detectedFromLang=${this.langFromCode}
+        .detectedToLang=${this.langToCode}
+        class="translate-panel"
+      />`,
+    };
+    this.br.shell.updateMenuContents();
+  }
+}
+BookReader?.registerPlugin('translate', TranslatePlugin);
+
+@customElement('br-translate-panel')
+export class BrTranslatePanel extends LitElement {
+  @property({ type: Array }) fromLanguages = []; // List of obj {code, name}
+  @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 = '';
+
+  /** @override */
+  createRenderRoot() {
+    // Disable shadow DOM; that would require a huge rejiggering of CSS
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent('connected'));
+  }
+
+  render() {
+    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>
+          <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--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>
+      </details>
+      <div class="footer" id="status" style="margin-top:5%">
+      ${this._statusWarning()}
+      </div>
+    </div>`;
+  }
+  _onLangFromChange(event) {
+    const langFromChangedEvent = new CustomEvent('langFromChanged', {
+      detail: { value: event.target.value },
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(langFromChangedEvent);
+
+    // Update the prevSelectedLang if "To" is different from "From"
+    if (this._getSelectedLang('to') !== this._getSelectedLang('from')) {
+      this.prevSelectedLang = this._getSelectedLang('from');
+    }
+    this.detectedFromLang = event.target.value;
+  }
+
+  _onLangToChange(event) {
+    const langToChangedEvent = new CustomEvent('langToChanged', {
+      detail: { value: event.target.value },
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(langToChangedEvent);
+
+    // Update the prevSelectedLang if "To" is different from "From"
+    if (this._getSelectedLang('from') !== event.target.value) {
+      this.prevSelectedLang = this._getSelectedLang('from');
+    }
+    this.detectedToLang = event.target.value;
+  }
+
+  _getSelectedLang(type) {
+    /** @type {HTMLSelectElement} */
+    const dropdown = this.querySelector(`#lang-${type}`);
+    return dropdown ? dropdown.value : '';
+  }
+
+  _getLangName(code) {
+    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 "";
+  }
+}
+

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})),