@internetarchive/bookreader 5.0.0-111 → 5.0.0-112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-111",
+  "version": "5.0.0-112",
   "description": "The Internet Archive BookReader.",
   "type": "module",
   "files": [

package/src/BookReader/Navbar/Navbar.js

@@ -314,7 +314,7 @@ export class Navbar {
     const $sliders = this.$root.find('.BRpager').slider({
       animate: true,
       min: 0,
-      max: br.book.getNumLeafs() - 1,
+      max: Math.max(0, br.book.getNumLeafs() - 1),
       value: br.currentIndex(),
       range: "min",
     });
@@ -324,8 +324,8 @@ export class Navbar {
     $sliders.find('.ui-slider-handle').attr({
       'role': 'slider',
       'aria-label': 'Page navigation slider',
-      'aria-valuemin': 1,
-      'aria-valuemax': br.book.getNumLeafs(),
+      'aria-valuemin': 0,
+      'aria-valuemax': Math.max(0, br.book.getNumLeafs() - 1),
     });
 
     // Ignore up/down arrow keys and page up/down keys, since they're confusingly different
@@ -396,7 +396,6 @@ export class Navbar {
   */
   getNavPageNumString(index) {
     const { br } = this;
-    // Accessible index starts at 0 (alas) so we add 1 to make human
     const pageNum = br.book.getPageNum(index);
     const pageType = br.book.getPageProp(index, 'pageType');
     const numLeafs = br.book.getNumLeafs();
@@ -425,7 +424,7 @@ export class Navbar {
   updateNavPageNum(index) {
     this.$root.find('.BRcurrentpage').html(this.getNavPageNumString(index));
     this.$root.find('.ui-slider-handle').attr({
-      'aria-valuenow': index + 1,
+      'aria-valuenow': index,
       'aria-valuetext': this.getNavPageNumString(index),
     });
   }
@@ -446,19 +445,19 @@ export class Navbar {
 
 /**
  * Renders the html for the page string
- * @param {number} index
- * @param {number} numLeafs
+ * @param {PageIndex} index 0-indexed page index (0..numLeafs-1)
+ * @param {number} numLeafs total number of leaves
  * @param {number|string} pageNum
  * @param {*} pageType - Deprecated
  * @param {number} maxPageNum
- * @return {string}
+ * @return {string} e.g. "Page 14 (3/39)"
  */
 export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum) {
   const pageIsAsserted = pageNum[0] != 'n';
-  const pageIndex = index + 1;
 
   if (!pageIsAsserted) {
     pageNum = '—';
   }
-  return `Page ${pageNum} (${pageIndex}/${numLeafs})`;
+  const lastIndex = Math.max(0, numLeafs - 1);
+  return `Page ${pageNum} (${index}/${lastIndex})`;
 }

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

@@ -1,9 +1,9 @@
 // @ts-check
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { BookReaderPlugin } from '../../BookReaderPlugin.js';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { TranslationManager } from "./TranslationManager.js";
-import { toISO6391 } from '../tts/utils.js';
+import { toISO6391, toNativeName } from '../tts/utils.js';
 import { sortBy } from '../../../src/BookReader/utils.js';
 import { TextSelectionManager } from '../../../src/util/TextSelectionManager.js';
 import '@internetarchive/ia-activity-indicator';
@@ -63,14 +63,12 @@ export class TranslatePlugin extends BookReaderPlugin {
   textSelectionManager = new TextSelectionManager('.BRtranslateLayer', this.br, {selectionElement: [".BRlineElement"]}, 1);
 
   async init() {
-    const currentLanguage = toISO6391(this.br.options.bookLanguage.replace(/[.,/#!$%^&*;:{}=\-_`~()]/g, ""));
+    if (!this.options.enabled) return;
+
+    const bookLanguage = this.br.options.bookLanguage || '';
+    const currentLanguage = toISO6391(bookLanguage);
     this.langFromCode = currentLanguage ?? "en";
     this.textSelectionManager.init();
-
-    if (!this.options.enabled) {
-      return;
-    }
-
     this.translationManager.publicPath = this.br.options.imagesBaseURL.replace(/\/+$/, '') + '/..';
 
     /**
@@ -307,6 +305,14 @@ export class TranslatePlugin extends BookReaderPlugin {
   }
 
   handleToggleTranslation = async () => {
+    const shouldEnableTranslation = !this.userToggleTranslate;
+    if (shouldEnableTranslation && !this.isSourceLanguageSupported()) {
+      this.userToggleTranslate = false;
+      this.translationManager.active = false;
+      this._render();
+      return;
+    }
+
     this.userToggleTranslate = !this.userToggleTranslate;
     this.translationManager.active = this.userToggleTranslate;
 
@@ -325,6 +331,10 @@ export class TranslatePlugin extends BookReaderPlugin {
   /**
   * Update translation side menu
   */
+  isSourceLanguageSupported() {
+    return this.translationManager.fromLanguages.some((lang) => lang.code == this.langFromCode);
+  }
+
   _render() {
     this.br.shell.menuProviders['translate'] = {
       id: 'translate',
@@ -339,6 +349,7 @@ export class TranslatePlugin extends BookReaderPlugin {
         this._panel.detectedToLang = this.langToCode;
         this._panel.detectedFromLang = this.langFromCode;
         this._panel.loadingModel = this.loadingModel;
+        this._panel.sourceLanguageSupported = this.isSourceLanguageSupported();
       }
       }"
         @langFromChanged="${this.handleFromLangChange}"
@@ -351,6 +362,7 @@ export class TranslatePlugin extends BookReaderPlugin {
         .detectedFromLang=${this.langFromCode}
         .detectedToLang=${this.langToCode}
         .loadingModel=${this.loadingModel}
+        .sourceLanguageSupported=${this.isSourceLanguageSupported()}
         class="translate-panel"
       />`,
     };
@@ -369,12 +381,27 @@ export class BrTranslatePanel extends LitElement {
   @property({ type: String }) detectedFromLang = '';
   @property({ type: String }) detectedToLang = '';
   @property({ type: Boolean }) loadingModel;
+  @property({ type: Boolean }) sourceLanguageSupported = true;
+
+  @query('#lang-from') langFromDropdown;
+  @query('#lang-to') langToDropdown;
+
+  static styles = css`
+    .disclaimer {
+      padding: 10px;
+      border-radius: 8px;
+      font-size: 12px;
+      margin: 0 0 10px;
+      background-color: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.9);
+    }
 
-  /** @override */
-  createRenderRoot() {
-    // Disable shadow DOM; that would require a huge rejiggering of CSS
-    return this;
-  }
+    .disclaimer--warning {
+      margin: 10px 0;
+      background-color: rgba(255, 186, 8, 0.18);
+      color: #ffe7a3;
+    }
+  `;
 
   connectedCallback() {
     super.connectedCallback();
@@ -382,11 +409,12 @@ export class BrTranslatePanel extends LitElement {
   }
 
   render() {
+    const statusWarning = this._statusWarning();
+
     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;">
@@ -405,7 +433,7 @@ export class BrTranslatePanel extends LitElement {
       </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}">
+        <button class="start-translation-brn" @click="${this._toggleTranslation}" ?disabled=${!this.sourceLanguageSupported}>
               ${this.userTranslationActive ? "Stop Translating" : "Translate"}
             </button>
       </div>
@@ -426,9 +454,14 @@ export class BrTranslatePanel extends LitElement {
           })
           }
           </select>
-      </details>
+        </details>
+      </div>
       <div class="footer" id="status" style="margin-top:5%">
-      ${this._statusWarning()}
+        ${
+          statusWarning ? html`
+            <div class="disclaimer disclaimer--warning">${statusWarning}</div>
+          ` : ''
+        }
       </div>
 
       <div class="lang-models-loading"> 
@@ -469,17 +502,27 @@ export class BrTranslatePanel extends LitElement {
   }
 
   _getSelectedLang(type) {
-    /** @type {HTMLSelectElement} */
-    const dropdown = this.querySelector(`#lang-${type}`);
+    const dropdown = type === 'from' ? this.langFromDropdown : this.langToDropdown;
     return dropdown ? dropdown.value : '';
   }
 
+  /**
+   * Resolves a human-readable language name for a language code.
+   * Prefers names from loaded translation language lists, then falls back to
+   * ISO language metadata via toNativeName.
+   * @param {string} code
+   * @returns {string}
+   */
   _getLangName(code) {
-    const lang = [...this.fromLanguages, ...this.toLanguages].find(lang => lang.code === code);
-    return lang ? lang.name : '';
+    const lang = [...this.fromLanguages, ...this.toLanguages]
+      .find(lang => lang.code === code);
+    return lang?.name || toNativeName(code) || code;
   }
 
   _toggleTranslation(event) {
+    if (!this.sourceLanguageSupported) {
+      return;
+    }
     const toggleTranslateEvent = new CustomEvent('toggleTranslation', {
       detail: {value: event.target.value},
       bubbles: true,
@@ -491,6 +534,9 @@ export class BrTranslatePanel extends LitElement {
 
   // TODO: Hardcoded warning message for now but should add more statuses
   _statusWarning() {
+    if (!this.sourceLanguageSupported) {
+      return `Translating from ${this._getLangName(this.detectedFromLang)} is not supported`;
+    }
     if (this.detectedFromLang == this.detectedToLang) {
       return "Translate To language is the same as the Source language";
     }

package/src/plugins/tts/utils.js

@@ -53,7 +53,7 @@ export function toISO6391(language) {
 /**
  *
  * @param {string} language
- * @returns {string}
+ * @returns {string | null}
  */
 export function toNativeName(language) {
   if (!language) return null;