@internetarchive/bookreader 5.0.0-98 → 5.0.0-99

package/package.json

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

package/src/BookReader.js

@@ -1005,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;
 };
 
@@ -1252,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() {
@@ -1324,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,
@@ -1370,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/_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;
 }
@@ -130,8 +145,7 @@
 }
 
 .BRtextLayer.showingTranslation {
-    visibility: hidden;
-    pointer-events: none;
+    display: none;
 }
 
 .BRtranslateLayer .BRparagraphElement.BRtranslateHidden {

package/src/plugins/plugin.text_selection.js

@@ -1,10 +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 */
 
@@ -20,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,
   }
 
@@ -46,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 */
@@ -54,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
@@ -134,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;
@@ -204,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
    */
@@ -344,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,

package/src/plugins/translate/TranslationManager.js

@@ -3,27 +3,6 @@ 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",
-  "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",
-};
-
 export class TranslationManager {
   /** @type {Cache<{index: string, response: string}>} */
   alreadyTranslated = new Cache(100);
@@ -167,4 +146,17 @@ export class TranslationManager {
 
     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`);
+      });
+  }
 }

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

@@ -2,9 +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);
@@ -34,7 +36,7 @@ export class TranslatePlugin extends BookReaderPlugin {
    * Current language code that is being translated From. Defaults to EN currently
    * @type {!string}
    */
-  langFromCode
+  langFromCode;
 
   /**
    * Current language code that is being translated To
@@ -53,6 +55,12 @@ export class TranslatePlugin extends BookReaderPlugin {
    */
   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";
@@ -176,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();
@@ -216,6 +211,8 @@ export class TranslatePlugin extends BookReaderPlugin {
         }
       }
     });
+
+    this.textSelectionManager?.stopPageFlip(this.br.refs.$brContainer);
     await Promise.all(paragraphTranslationPromises);
     this.br.trigger('translateLayerRendered', {
       leafIndex: pageIndex,
@@ -246,6 +243,7 @@ export class TranslatePlugin extends BookReaderPlugin {
 
   clearAllTranslations() {
     document.querySelectorAll('.BRtranslateLayer').forEach(el => el.remove());
+    document.querySelectorAll('.showingTranslation').forEach(el => el.classList.remove('showingTranslation'));
   }
 
   /**
@@ -290,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();
     }
@@ -308,18 +311,27 @@ 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();
     }
   }
 
@@ -336,6 +348,10 @@ 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}"
@@ -344,9 +360,10 @@ export class TranslatePlugin extends BookReaderPlugin {
         .fromLanguages="${this.translationManager.fromLanguages}"
         .toLanguages="${this.translationManager.toLanguages}"
         .disclaimerMessage="${this.options.panelDisclaimerText}"
-        .userTranslationActive=${false}
+        .userTranslationActive=${this.userToggleTranslate}
         .detectedFromLang=${this.langFromCode}
         .detectedToLang=${this.langToCode}
+        .loadingModel=${this.loadingModel}
         class="translate-panel"
       />`,
     };
@@ -364,6 +381,7 @@ export class BrTranslatePanel extends LitElement {
   @property({ type: Boolean }) userTranslationActive = false;
   @property({ type: String }) detectedFromLang = '';
   @property({ type: String }) detectedToLang = '';
+  @property({ type: Boolean }) loadingModel;
 
   /** @override */
   createRenderRoot() {
@@ -425,6 +443,10 @@ export class BrTranslatePanel extends LitElement {
       <div class="footer" id="status" style="margin-top:5%">
       ${this._statusWarning()}
       </div>
+
+      <div class="lang-models-loading"> 
+      ${this._languageModelStatus()}
+      </div>
     </div>`;
   }
   _onLangFromChange(event) {
@@ -439,6 +461,7 @@ 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;
   }
 
@@ -454,6 +477,7 @@ export class BrTranslatePanel extends LitElement {
     if (this._getSelectedLang('from') !== event.target.value) {
       this.prevSelectedLang = this._getSelectedLang('from');
     }
+    this.loadingModel = true;
     this.detectedToLang = event.target.value;
   }
 
@@ -485,5 +509,17 @@ export class BrTranslatePanel extends LitElement {
     }
     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 "";
+  }
+}