@internetarchive/bookreader 5.0.0-97 → 5.0.0-99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-97",
+  "version": "5.0.0-99",
   "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 [
@@ -961,7 +1005,8 @@ BookReader.prototype.zoom = function(direction) {
   } else {
     this.activeMode.zoom('out');
   }
-  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
+  this.plugins.translate?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
   return;
 };
 
@@ -1208,7 +1253,8 @@ BookReader.prototype.switchMode = function(
   const eventName = mode + 'PageViewSelected';
   this.trigger(BookReader.eventNames[eventName]);
 
-  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
+  this.plugins.translate?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
 };
 
 BookReader.prototype.updateBrClasses = function() {
@@ -1280,7 +1326,8 @@ BookReader.prototype.enterFullscreen = async function(bindKeyboardControls = tru
   }
   this.jumpToIndex(currentIndex);
 
-  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
+  this.plugins.translate?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
   // Add "?view=theater"
   this.trigger(BookReader.eventNames.fragmentChange);
   // trigger event here, so that animations,
@@ -1326,7 +1373,8 @@ BookReader.prototype.exitFullScreen = async function () {
     await this.activeMode.mode1UpLit.updateComplete;
   }
 
-  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
+  this.plugins.translate?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
   // Remove "?view=theater"
   this.trigger(BookReader.eventNames.fragmentChange);
   this.refs.$br.removeClass('BRfullscreenAnimation');

package/src/css/_BRpages.scss

@@ -91,16 +91,8 @@
   }
 }
 
-svg.BRPageLayer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
 // Hides page layers during page flip animation
-.BRpageFlipping .BRPageLayer {
+.BRpageFlipping .BRtextLayer {
   display: none;
 }
 

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

@@ -54,6 +54,21 @@
     }
 }
 
+// Style URI TextFragments, eg #:~:text=example
+.BRtextLayer ::target-text {
+    // Similar colour to the default one used in Safari, Firefox. Note Chrome uses a purple colour
+    background-color: hsla(45, 80%, 66%, 0.6);
+    color: transparent;
+}
+
+.BRtranslateLayer ::selection {
+    background: hsla(210, 74%, 62%, 0.4);
+}
+
+.BRtranslateLayer ::-moz-selection {
+    background: hsla(210, 74%, 62%, 0.4);
+}
+
 .BRparagraphElement br {
     visibility: hidden;
 }
@@ -88,21 +103,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 +126,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;
@@ -132,8 +145,7 @@
 }
 
 .BRtextLayer.showingTranslation {
-    visibility: hidden;
-    pointer-events: none;
+    display: none;
 }
 
 .BRtranslateLayer .BRparagraphElement.BRtranslateHidden {

package/src/plugins/plugin.text_selection.js

@@ -1,9 +1,10 @@
 //@ts-check
 import { createDIVPageLayer } from '../BookReader/PageContainer.js';
-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';
+import { TextSelectionManager } from '../util/TextSelectionManager.js';
 /** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
 /** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
 
@@ -19,7 +20,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     singlePageDjvuXmlUrl: null,
     /** Whether to fetch the XML as a jsonp */
     jsonp: false,
-    /** Mox words tha can be selected when the text layer is protected */
+    /** Mox words that can be selected when the text layer is protected */
     maxProtectedWords: 200,
   }
 
@@ -45,7 +46,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     // now we do make that assumption.
     /** Whether the book is right-to-left */
     this.rtl = this.br.pageProgression === 'rl';
-    this.selectionObserver = new SelectionObserver('.BRtextLayer', this._onSelectionChange);
+    this.textSelectionManager = new TextSelectionManager('.BRtextLayer', this.br, {selectionElement: ['.BRwordElement', '.BRspace']}, this.options.maxProtectedWords);
   }
 
   /** @override */
@@ -53,72 +54,9 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     if (!this.options.enabled) return;
 
     this.loadData();
-
-    this.selectionObserver.attach();
-    new SelectionObserver('.BRtextLayer', (selectEvent) => {
-      // Track how often selection is used
-      if (selectEvent == 'started') {
-        this.br.plugins.archiveAnalytics?.sendEvent('BookReader', 'SelectStart');
-
-        // Set a class on the page to avoid hiding it when zooming/etc
-        this.br.refs.$br.find('.BRpagecontainer--hasSelection').removeClass('BRpagecontainer--hasSelection');
-        $(window.getSelection().anchorNode).closest('.BRpagecontainer').addClass('BRpagecontainer--hasSelection');
-      }
-    }).attach();
-
-    if (this.br.protected) {
-      document.addEventListener('selectionchange', this._limitSelection);
-      // Prevent right clicking when selected text
-      $(document.body).on('contextmenu dragstart copy', (e) => {
-        const selection = document.getSelection();
-        if (selection?.toString()) {
-          const intersectsTextLayer = $('.BRtextLayer')
-            .toArray()
-            .some(el => selection.containsNode(el, true));
-          if (intersectsTextLayer) {
-            e.preventDefault();
-            return false;
-          }
-        }
-      });
-    }
+    this.textSelectionManager.init();
   }
 
-  _limitSelection = () => {
-    const selection = window.getSelection();
-    if (!selection.rangeCount) return;
-
-    const range = selection.getRangeAt(0);
-
-    // Check if range.startContainer is inside the sub-tree of .BRContainer
-    const startInBr = !!range.startContainer.parentElement.closest('.BRcontainer');
-    const endInBr = !!range.endContainer.parentElement.closest('.BRcontainer');
-    if (!startInBr && !endInBr) return;
-    if (!startInBr || !endInBr) {
-      // weird case, just clear the selection
-      selection.removeAllRanges();
-      return;
-    }
-
-    // Find the last allowed word in the selection
-    const lastAllowedWord = genAt(
-      genFilter(
-        walkBetweenNodes(range.startContainer, range.endContainer),
-        (node) => node.classList?.contains('BRwordElement'),
-      ),
-      this.options.maxProtectedWords - 1,
-    );
-
-    if (!lastAllowedWord || range.endContainer.parentNode == lastAllowedWord) return;
-
-    const newRange = document.createRange();
-    newRange.setStart(range.startContainer, range.startOffset);
-    newRange.setEnd(lastAllowedWord.firstChild, lastAllowedWord.textContent.length);
-
-    selection.removeAllRanges();
-    selection.addRange(newRange);
-  };
-
   /**
    * @override
    * @param {PageContainer} pageContainer
@@ -133,20 +71,6 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     return pageContainer;
   }
 
-  /**
-   * @param {'started' | 'cleared'} type
-   * @param {HTMLElement} target
-   */
-  _onSelectionChange = (type, target) => {
-    if (type === 'started') {
-      this.textSelectingMode(target);
-    } else if (type === 'cleared') {
-      this.defaultMode(target);
-    } else {
-      throw new Error(`Unknown type ${type}`);
-    }
-  }
-
   loadData() {
     // Only fetch the full djvu xml if the single page url isn't there
     if (this.options.singlePageDjvuXmlUrl) return;
@@ -203,92 +127,6 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     }
   }
 
-  /**
-   * Intercept copied text to remove any styling applied to it
-   * @param {JQuery} $container
-   */
-  interceptCopy($container) {
-    $container[0].addEventListener('copy', (event) => {
-      const selection = document.getSelection();
-      event.clipboardData.setData('text/plain', selection.toString());
-      event.preventDefault();
-    });
-  }
-
-  /**
-   * Applies mouse events when in default mode
-   * @param {HTMLElement} textLayer
-   */
-  defaultMode(textLayer) {
-    const $pageContainer = $(textLayer).closest('.BRpagecontainer');
-    textLayer.style.pointerEvents = "none";
-    $pageContainer.find("img").css("pointer-events", "auto");
-
-    $(textLayer).off(".textSelectPluginHandler");
-    const startedMouseDown = this.mouseIsDown;
-    let skipNextMouseup = this.mouseIsDown;
-    if (startedMouseDown) {
-      textLayer.style.pointerEvents = "auto";
-    }
-
-    // Need to stop propagation to prevent DragScrollable from
-    // blocking selection
-    $(textLayer).on("mousedown.textSelectPluginHandler", (event) => {
-      this.mouseIsDown = true;
-      if ($(event.target).is(".BRwordElement, .BRspace")) {
-        event.stopPropagation();
-      }
-    });
-
-    $(textLayer).on("mouseup.textSelectPluginHandler", (event) => {
-      this.mouseIsDown = false;
-      textLayer.style.pointerEvents = "none";
-      if (skipNextMouseup) {
-        skipNextMouseup = false;
-        event.stopPropagation();
-      }
-    });
-  }
-
-  /**
-   * This mode is active while there is a selection on the given textLayer
-   * @param {HTMLElement} textLayer
-   */
-  textSelectingMode(textLayer) {
-    const $pageContainer = $(textLayer).closest('.BRpagecontainer');
-    // Make text layer consume all events
-    textLayer.style.pointerEvents = "all";
-    // Block img from getting long-press to save while selecting
-    $pageContainer.find("img").css("pointer-events", "none");
-
-    $(textLayer).off(".textSelectPluginHandler");
-
-    $(textLayer).on('mousedown.textSelectPluginHandler', (event) => {
-      this.mouseIsDown = true;
-      event.stopPropagation();
-    });
-
-    // Prevent page flip on click
-    $(textLayer).on('mouseup.textSelectPluginHandler', (event) => {
-      this.mouseIsDown = false;
-      event.stopPropagation();
-    });
-  }
-
-  /**
-   * Initializes text selection modes if there is a text layer on the page
-   * @param {JQuery} $container
-   */
-  stopPageFlip($container) {
-    /** @type {JQuery<HTMLElement>} */
-    const $textLayer = $container.find('.BRtextLayer');
-    if (!$textLayer.length) return;
-    $textLayer.each((i, s) => this.defaultMode(s));
-    if (!this.br.protected) {
-      this.interceptCopy($container);
-    }
-  }
-
   /**
    * @param {PageContainer} pageContainer
    */
@@ -314,6 +152,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();
@@ -339,7 +181,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
       textLayer.appendChild(paragEl);
     }
     $container.append(textLayer);
-    this.stopPageFlip($container);
+    this.textSelectionManager.stopPageFlip($container);
     this.br.trigger('textLayerRendered', {
       pageIndex,
       pageContainer,
@@ -353,6 +195,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,27 +1,7 @@
 // @ts-check
 import { Cache } from '../../util/cache.js';
 import { BatchTranslator } from '@internetarchive/bergamot-translator/translator.js';
-
-export const langs = /** @type {{[lang: string]: string}} */ {
-  "bg": "Bulgarian",
-  "ca": "Catalan",
-  "cs": "Czech",
-  "nl": "Dutch",
-  "en": "English",
-  "et": "Estonian",
-  "de": "German",
-  "fr": "French",
-  "is": "Icelandic",
-  "it": "Italian",
-  "nb": "Norwegian Bokmål",
-  "nn": "Norwegian Nynorsk",
-  "fa": "Persian",
-  "pl": "Polish",
-  "pt": "Portuguese",
-  "ru": "Russian",
-  "es": "Spanish",
-  "uk": "Ukrainian",
-};
+import { toISO6391 } from '../tts/utils.js';
 
 export class TranslationManager {
   /** @type {Cache<{index: string, response: string}>} */
@@ -68,7 +48,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 +77,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,8 +140,23 @@ 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;
   }
+
+  /**
+   * Checks and updates the status of a model that is currently being retreived from IA
+   * @param {string} fromLanguage
+   * @param {string} toLanguage
+   * @returns {Promise<boolean>}
+   */
+  getTranslationModel = async(fromLanguage, toLanguage) => {
+    return this.translator.backing.getTranslationModel({from: fromLanguage, to: toLanguage})
+      .catch((err) => {
+        console.error(`An error occurred while trying to retreive the ${fromLanguage}-${toLanguage} model`);
+      });
+  }
 }