@internetarchive/bookreader 5.0.0-97 → 5.0.0-98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-97",
+  "version": "5.0.0-98",
   "description": "The Internet Archive BookReader.",
   "type": "module",
   "files": [
@@ -31,7 +31,7 @@
   "homepage": "https://github.com/internetarchive/bookreader#readme",
   "private": false,
   "dependencies": {
-    "@internetarchive/bergamot-translator": "0.4.9-ia.0",
+    "@internetarchive/bergamot-translator": "^0.4.9-ia.1",
     "@internetarchive/ia-activity-indicator": "^0.0.4",
     "@internetarchive/ia-item-navigator": "^2.1.2",
     "@internetarchive/icon-bookmark": "^1.3.4",

package/src/BookReader/options.js

@@ -147,21 +147,25 @@ export const DEFAULT_OPTIONS = {
    **/
   plugins: {
     /** @type {Partial<import('../plugins/plugin.archive_analytics.js').ArchiveAnalyticsPlugin['options'>]}*/
-    archiveAnalytics: null,
+    archiveAnalytics: {},
     /** @type {Partial<import('../plugins/plugin.autoplay.js').AutoplayPlugin['options'>]}*/
-    autoplay: null,
+    autoplay: {},
     /** @type {Partial<import('../plugins/plugin.chapters.js').ChaptersPlugin['options']>} */
-    chapters: null,
+    chapters: {},
+    /** @type {Partial<import('../plugins/plugin.experiments.js').ExperimentsPlugin['options']>} */
+    experiments: {},
     /** @type {Partial<import('../plugins/plugin.iiif.js').IiifPlugin['options']>} */
-    iiif: null,
+    iiif: {},
     /** @type {Partial<import('../plugins/plugin.resume.js').ResumePlugin['options']>} */
-    resume: null,
+    resume: {},
     /** @type {Partial<import('../plugins/search/plugin.search.js').SearchPlugin['options']>} */
-    search: null,
+    search: {},
     /** @type {Partial<import('../plugins/plugin.text_selection.js').TextSelectionPlugin['options']>} */
-    textSelection: null,
+    textSelection: {},
+    /** @type {Partial<import('../plugins/translate/plugin.translate.js').TranslatePlugin['options']>} */
+    translate: {},
     /** @type {Partial<import('../plugins/tts/plugin.tts.js').TtsPlugin['options']>} */
-    tts: null,
+    tts: {},
   },
 
   /**

package/src/BookReader.js

@@ -49,10 +49,47 @@ import { NAMED_REDUCE_SETS } from './BookReader/ReduceSet.js';
  * @constructor
  */
 export default function BookReader(overrides = {}) {
-  const options = jQuery.extend(true, {}, BookReader.defaultOptions, overrides, BookReader.optionOverrides);
+  const options = BookReader.extendOptions({}, BookReader.defaultOptions, overrides, BookReader.optionOverrides);
   this.setup(options);
 }
 
+/**
+ * Extend the default options for BookReader
+ * Accepts any number of option objects and merges them in order.
+ *
+ * Does a shallow merge of everything except plugin options. These are individually merged.
+ * @param {...Partial<BookReaderOptions>} newOptions
+ */
+BookReader.extendOptions = function(...newOptions) {
+  if (newOptions.length <= 1) {
+    return newOptions[0];
+  }
+  /** @type {Array<keyof BookReaderOptions>} */
+  const shallowOverrides = ['onePage', 'twoPage', 'vars'];
+  /** @type {Array<keyof BookReaderOptions>} */
+  const mapOverrides = ['plugins', 'controls'];
+
+  const result = newOptions.shift();
+  for (const opts of newOptions) {
+    for (const [key, value] of Object.entries(opts)) {
+      if (shallowOverrides.includes(key)) {
+        result[key] ||= {};
+        result[key] = Object.assign(result[key], value);
+      } else if (mapOverrides.includes(key)) {
+        result[key] ||= {};
+        for (const [name, mapValue] of Object.entries(value)) {
+          result[key][name] ||= {};
+          Object.assign(result[key][name], mapValue);
+        }
+      } else {
+        result[key] = value;
+      }
+    }
+  }
+
+  return result;
+};
+
 BookReader.version = PACKAGE_JSON.version;
 
 // Mode constants
@@ -72,12 +109,16 @@ BookReader.PLUGINS = {
   autoplay: null,
   /** @type {typeof import('./plugins/plugin.chapters.js').ChaptersPlugin | null}*/
   chapters: null,
+  /** @type {typeof import('./plugins/plugin.experiments.js').ExperimentsPlugin | null}*/
+  experiments: null,
   /** @type {typeof import('./plugins/plugin.resume.js').ResumePlugin | null}*/
   resume: null,
   /** @type {typeof import('./plugins/search/plugin.search.js').SearchPlugin | null}*/
   search: null,
   /** @type {typeof import('./plugins/plugin.text_selection.js').TextSelectionPlugin | null}*/
   textSelection: null,
+  /** @type {typeof import('./plugins/translate/plugin.translate.js').TranslatePlugin | null}*/
+  translate: null,
   /** @type {typeof import('./plugins/tts/plugin.tts.js').TtsPlugin | null}*/
   tts: null,
 };
@@ -138,9 +179,11 @@ BookReader.prototype.setup = function(options) {
     archiveAnalytics: BookReader.PLUGINS.archiveAnalytics ? new BookReader.PLUGINS.archiveAnalytics(this) : null,
     autoplay: BookReader.PLUGINS.autoplay ? new BookReader.PLUGINS.autoplay(this) : null,
     chapters: BookReader.PLUGINS.chapters ? new BookReader.PLUGINS.chapters(this) : null,
+    experiments: BookReader.PLUGINS.experiments ? new BookReader.PLUGINS.experiments(this) : null,
     search: BookReader.PLUGINS.search ? new BookReader.PLUGINS.search(this) : null,
     resume: BookReader.PLUGINS.resume ? new BookReader.PLUGINS.resume(this) : null,
     textSelection: BookReader.PLUGINS.textSelection ? new BookReader.PLUGINS.textSelection(this) : null,
+    translate: BookReader.PLUGINS.translate ? new BookReader.PLUGINS.translate(this) : null,
     tts: BookReader.PLUGINS.tts ? new BookReader.PLUGINS.tts(this) : null,
   };
 
@@ -365,6 +408,7 @@ BookReader.prototype.getActivePageContainerElements = function() {
  * Get the HTML Elements for the rendered page. Note there can be more than one, since
  * (at least as of writing) different modes can maintain different caches.
  * @param {PageIndex} pageIndex
+ * @returns {HTMLElement[]}
  */
 BookReader.prototype.getActivePageContainerElementsForIndex = function(pageIndex) {
   return [

package/src/css/_BRsearch.scss

@@ -45,6 +45,7 @@
   // but they appear the same in the UI.
   .searchHiliteLayer, .ttsHiliteLayer {
     pointer-events: none;
+    z-index: 4;
 
     rect {
       // Note: Can't use fill-opacity ; safari inexplicably applies that to

package/src/css/_TextSelection.scss

@@ -88,21 +88,20 @@
 // These are Microsoft Edge specific fixed to make some of the
 // browsers features work well. These are for the in-place
 // translation.
+.BRtextLayer:has([_istranslated="1"], msreadoutspan) {
+    mix-blend-mode: normal;
+}
+
 .BRwordElement, .BRspace {
     &[_istranslated="1"], &[_msttexthash] {
-        background-color: #e4dccd;
         color: black;
         letter-spacing: unset !important;
-        background: #ccbfa7;
     }
 }
 
-.BRlineElement font[_mstmutation="1"] {
-    background: #ccbfa7;
-}
-
 .BRlineElement:has([_istranslated="1"], [_msttexthash]) {
-    background-color: #e4dccd;
+    background: rgba(248, 237, 192, 0.8);
+    backdrop-filter: blur(8px);
     color: black;
     text-align: justify;
     width: inherit;
@@ -112,14 +111,13 @@
 }
 
 .BRlineElement[_msttexthash] {
-    background: #ccbfa7;
     word-spacing: unset !important;
 }
 
 .BRtranslateLayer .BRparagraphElement {
     pointer-events: auto;
     overflow-y: auto;
-    background: rgba(248, 237, 192, 0.5);
+    background: rgba(248, 237, 192, 0.8);
     backdrop-filter: blur(8px);
     color:black;
     line-height: 1em;

package/src/plugins/plugin.text_selection.js

@@ -4,6 +4,7 @@ import { SelectionObserver } from '../BookReader/utils/SelectionObserver.js';
 import { BookReaderPlugin } from '../BookReaderPlugin.js';
 import { applyVariables } from '../util/strings.js';
 import { Cache } from '../util/cache.js';
+import { toISO6391 } from './tts/utils.js';
 /** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
 /** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
 
@@ -314,6 +315,10 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     const ratioW = parseFloat(pageContainer.$container[0].style.width) / pageContainer.page.width;
     const ratioH = parseFloat(pageContainer.$container[0].style.height) / pageContainer.page.height;
     textLayer.style.transform = `scale(${ratioW}, ${ratioH})`;
+    const bookLangCode = toISO6391(this.br.options.bookLanguage);
+    if (bookLangCode) {
+      textLayer.setAttribute("lang", bookLangCode);
+    }
     textLayer.setAttribute("dir", this.rtl ? "rtl" : "ltr");
 
     const ocrParagraphs = $(XMLpage).find("PARAGRAPH[coords]").toArray();
@@ -353,6 +358,10 @@ export class TextSelectionPlugin extends BookReaderPlugin {
   renderParagraph(ocrParagraph) {
     const paragEl = document.createElement('p');
     paragEl.classList.add('BRparagraphElement');
+    if (ocrParagraph.getAttribute("x-role")) {
+      paragEl.classList.add('ocr-role-header-footer');
+      paragEl.ariaHidden = "true";
+    }
     const [paragLeft, paragBottom, paragRight, paragTop] = $(ocrParagraph).attr("coords").split(",").map(parseFloat);
     const wordHeightArr = [];
     const lines = $(ocrParagraph).find("LINE[coords]").toArray();

package/src/plugins/translate/TranslationManager.js

@@ -1,6 +1,7 @@
 // @ts-check
 import { Cache } from '../../util/cache.js';
 import { BatchTranslator } from '@internetarchive/bergamot-translator/translator.js';
+import { toISO6391 } from '../tts/utils.js';
 
 export const langs = /** @type {{[lang: string]: string}} */ {
   "bg": "Bulgarian",
@@ -68,7 +69,7 @@ export class TranslationManager {
       this._initResolve = resolve;
       this._initReject = reject;
     });
-    const registryUrl = "https://cors.archive.org/cors/mozilla-translate-models/";
+    const registryUrl = "https://cors.archive.org/cors/mozilla-translate-models/firefox_models/";
     const registryJson = await fetch(registryUrl + "registry.json").then(r => r.json());
     for (const language of Object.values(registryJson)) {
       for (const file of Object.values(language)) {
@@ -97,10 +98,10 @@ export class TranslationManager {
       // List of dev models found here https://github.com/mozilla/firefox-translations-models/tree/main/models/base
       // There are also differences between the model types in the repo above here: https://github.com/mozilla/firefox-translations-models?tab=readme-ov-file#firefox-translations-models
       if (firstLang !== "en") {
-        this.fromLanguages.push({code: firstLang, name:langs[firstLang], type: "prod"});
+        this.fromLanguages.push({code: firstLang, name: toISO6391(firstLang, true), type: "prod"});
       }
       if (secondLang !== "en") {
-        this.toLanguages.push({code: secondLang, name:langs[secondLang], type: "prod"});
+        this.toLanguages.push({code: secondLang, name: toISO6391(secondLang, true), type: "prod"});
       }
     }
     this._initResolve([this.modelRegistry]);
@@ -160,6 +161,8 @@ export class TranslationManager {
     }).then((resp) => {
       const response = resp;
       this.currentlyTranslating[key].resolve(response.target.text);
+      this.alreadyTranslated.add({index: key, response: response.target.text});
+      delete this.currentlyTranslating[key];
     });
 
     return promise;

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

@@ -3,6 +3,8 @@ 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);
@@ -11,6 +13,8 @@ export class TranslatePlugin extends BookReaderPlugin {
 
   options = {
     enabled: true,
+
+    /** @type {string | import('lit').TemplateResult} */
     panelDisclaimerText: "Translations are in alpha",
   }
 
@@ -27,10 +31,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 +47,16 @@ 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;
+
   async init() {
+    const currentLanguage = toISO6391(this.br.options.bookLanguage.replace(/[.,/#!$%^&*;:{}=\-_`~()]/g, ""));
+    this.langFromCode = currentLanguage ?? "en";
+
     if (!this.options.enabled) {
       return;
     }
@@ -84,10 +97,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 +125,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 +135,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 +153,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 +161,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({
@@ -199,6 +216,32 @@ export class TranslatePlugin extends BookReaderPlugin {
         }
       }
     });
+    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() {
@@ -268,9 +311,20 @@ export class TranslatePlugin extends BookReaderPlugin {
     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 the table of contents based on array of TOC entries.
+  * Update translation side menu
   */
   _render() {
     this.br.shell.menuProviders['translate'] = {
@@ -286,9 +340,13 @@ export class TranslatePlugin extends BookReaderPlugin {
       }"
         @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"
       />`,
     };
@@ -303,6 +361,9 @@ 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 = '';
 
   /** @override */
   createRenderRoot() {
@@ -316,42 +377,56 @@ 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="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 +439,7 @@ export class BrTranslatePanel extends LitElement {
     if (this._getSelectedLang('to') !== this._getSelectedLang('from')) {
       this.prevSelectedLang = this._getSelectedLang('from');
     }
+    this.detectedFromLang = event.target.value;
   }
 
   _onLangToChange(event) {
@@ -378,30 +454,11 @@ 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.detectedToLang = event.target.value;
   }
 
   _getSelectedLang(type) {
+    /** @type {HTMLSelectElement} */
     const dropdown = this.querySelector(`#lang-${type}`);
     return dropdown ? dropdown.value : '';
   }
@@ -410,5 +467,23 @@ 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 "";
+  }
 }
 

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);
+    }
   }
 
   /**