@internetarchive/bookreader 5.0.0-113 → 5.0.0-115

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-113",
+  "version": "5.0.0-115",
   "description": "The Internet Archive BookReader.",
   "type": "module",
   "files": [
@@ -32,21 +32,21 @@
   "private": false,
   "dependencies": {
     "@internetarchive/bergamot-translator": "^0.4.9-ia.1",
-    "@internetarchive/ia-activity-indicator": "0.0.6",
-    "@internetarchive/ia-item-navigator": "2.2.2",
-    "@internetarchive/icon-bookmark": "^1.4.0",
-    "@internetarchive/icon-close": "1.4.0",
-    "@internetarchive/icon-dl": "^1.4.0",
-    "@internetarchive/icon-edit-pencil": "^1.4.1",
-    "@internetarchive/icon-ia-logo": "1.4.0",
-    "@internetarchive/icon-magnify-minus": "^1.4.0",
-    "@internetarchive/icon-magnify-plus": "^1.4.0",
-    "@internetarchive/icon-search": "^1.4.0",
-    "@internetarchive/icon-share": "1.4.0",
-    "@internetarchive/icon-toc": "^1.4.0",
-    "@internetarchive/icon-visual-adjustment": "^1.4.0",
-    "@internetarchive/modal-manager": "2.0.5",
-    "@internetarchive/shared-resize-observer": "^0.2.0",
+    "@internetarchive/ia-activity-indicator": "1.0.0",
+    "@internetarchive/ia-item-navigator": "2.2.3",
+    "@internetarchive/icon-bookmark": "1.4.1",
+    "@internetarchive/icon-close": "1.4.1",
+    "@internetarchive/icon-dl": "1.4.1",
+    "@internetarchive/icon-edit-pencil": "1.4.1",
+    "@internetarchive/icon-ia-logo": "1.4.1",
+    "@internetarchive/icon-magnify-minus": "1.4.1",
+    "@internetarchive/icon-magnify-plus": "1.4.1",
+    "@internetarchive/icon-search": "1.4.1",
+    "@internetarchive/icon-share": "1.4.1",
+    "@internetarchive/icon-toc": "1.4.1",
+    "@internetarchive/icon-visual-adjustment": "1.4.1",
+    "@internetarchive/modal-manager": "2.0.6",
+    "@internetarchive/shared-resize-observer": "0.2.0",
     "interactjs": "^1.10.18",
     "iso-language-codes": "2.0.0",
     "jquery": "3.6.1",
@@ -58,36 +58,36 @@
     "soundmanager2": "2.97.20170602"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/eslint-parser": "7.28.6",
+    "@babel/core": "7.29.7",
+    "@babel/eslint-parser": "7.29.7",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-decorators": "7.29.0",
-    "@babel/preset-env": "7.29.2",
-    "@iiif/presentation-2": "^1.0.4",
-    "@iiif/presentation-3": "^2.1.3",
+    "@babel/plugin-proposal-decorators": "7.29.7",
+    "@babel/preset-env": "7.29.7",
+    "@iiif/presentation-2": "1.0.4",
+    "@iiif/presentation-3": "2.2.3",
     "@open-wc/testing-helpers": "3.0.1",
     "@types/jest": "30.0.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "babel-loader": "10.1.1",
-    "concurrently": "9.0.1",
+    "concurrently": "10.0.3",
     "core-js": "3.49.0",
-    "cpx2": "8.0.0",
+    "cpx2": "9.0.0",
     "eslint": "7.32.0",
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-testcafe": "0.2.1",
     "http-server": "14.1.1",
     "hypothesis": "^1.1627.0",
-    "jest": "30.3.0",
-    "jest-environment-jsdom": "30.3.0",
+    "jest": "30.4.2",
+    "jest-environment-jsdom": "30.4.1",
     "live-server": "1.2.2",
     "regenerator-runtime": "0.14.1",
-    "sass": "1.98.0",
-    "sinon": "21.0.3",
+    "sass": "1.100.0",
+    "sinon": "22.0.0",
     "svgo": "4.0.1",
     "testcafe": "3.7.4",
     "testcafe-browser-provider-browserstack": "1.15.2",
-    "webpack": "5.105.4",
-    "webpack-cli": "7.0.2"
+    "webpack": "5.107.2",
+    "webpack-cli": "7.0.3"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -133,7 +133,13 @@
     "test:e2e:dev": "npx testcafe --live --dev",
     "DOCS:update:test-deps": "If CI succeeds, these should be good to update",
     "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing-helpers@latest @types/jest@latest eslint@7 eslint-plugin-testcafe@latest jest@latest jest-environment-jsdom@latest sinon@latest testcafe@latest",
+    "update:test-deps:test": "npm run lint && npm run test && npm run test:e2e",
     "DOCS:update:build-deps": "These can cause strange changes, so do an npm run build + check file size (git diff --stat), and check the site is as expected",
-    "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest @babel/plugin-proposal-class-properties@latest @babel/plugin-proposal-decorators@latest babel-loader@latest core-js@latest regenerator-runtime@latest sass@latest svgo@latest webpack@latest webpack-cli@latest"
+    "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest @babel/plugin-proposal-class-properties@latest @babel/plugin-proposal-decorators@latest babel-loader@latest core-js@latest regenerator-runtime@latest sass@latest svgo@latest webpack@latest webpack-cli@latest",
+    "update:build-deps:test": "npm run build",
+    "DOCS:update:dev-deps": "Packages used for development",
+    "update:dev-deps": "npm i @iiif/presentation-2@latest @iiif/presentation-3@latest concurrently@latest cpx2@latest http-server@latest live-server@latest",
+    "DOCS:update:ia-deps": "Packages by @internetarchive",
+    "update:ia-deps": "npm i @internetarchive/ia-activity-indicator@latest @internetarchive/ia-item-navigator@latest @internetarchive/icon-bookmark@latest @internetarchive/icon-close@latest @internetarchive/icon-dl@latest @internetarchive/icon-edit-pencil@latest @internetarchive/icon-ia-logo@latest @internetarchive/icon-magnify-minus@latest @internetarchive/icon-magnify-plus@latest @internetarchive/icon-search@latest @internetarchive/icon-share@latest @internetarchive/icon-toc@latest @internetarchive/icon-visual-adjustment@latest @internetarchive/modal-manager@latest @internetarchive/shared-resize-observer@latest"
   }
 }

package/src/BookReader/utils/SelectionObserver.js

@@ -4,7 +4,7 @@ export class SelectionObserver {
   startedInSelector = false;
   /** @type {HTMLElement} */
   target = null;
-  /** @type {Node} */
+  /** @type {Node | null} */
   lastKnownFocusNode = null;
 
   /**
@@ -30,6 +30,7 @@ export class SelectionObserver {
 
   _onSelectionChange = () => {
     const sel = window.getSelection();
+    if (!sel) return;
 
     if (!this.selecting && sel.toString()) {
       const target = $(sel.anchorNode).closest(this.selector)[0];
@@ -40,13 +41,14 @@ export class SelectionObserver {
       this.handler('started', this.target);
     }
 
-    if (this.selecting && (this.lastKnownFocusNode != sel.focusNode || sel.toString() && !sel.isCollapsed)) {
+    if (this.selecting && this.lastKnownFocusNode != sel.focusNode && sel.toString() && !sel.isCollapsed) {
       this.lastKnownFocusNode = sel.focusNode;
       this.handler('changed', this.target);
     }
 
     if (this.selecting && (sel.isCollapsed || !sel.toString() || !$(sel.anchorNode).closest(this.selector)[0])) {
       this.selecting = false;
+      this.lastKnownFocusNode = null;
       this.handler('cleared', this.target);
     }
   };

package/src/BookReader.js

@@ -151,7 +151,7 @@ BookReader.defaultOptions = DEFAULT_OPTIONS;
  * @type {BookReaderOptions}
  * This is here, just in case you need to absolutely override an option.
  */
-BookReader.optionOverrides = {};
+BookReader.optionOverrides = BookReader.optionOverrides || {};
 
 /**
  * Setup
@@ -852,6 +852,7 @@ BookReader.prototype.setupKeyListeners = function () {
 
     // Ignore if modifiers are active.
     if (e.getModifierState('Control') ||
+      e.getModifierState('Shift') ||
       e.getModifierState('Alt') ||
       e.getModifierState('Meta') ||
       e.getModifierState('Win') /* hack for IE */) {

package/src/css/_TextSelection.scss

@@ -149,10 +149,20 @@
   display: none;
   border-radius: 20px;
   background-color: #333;
+  color: white;
   color-scheme: dark;
   padding: 2px;
   overflow: hidden;
-  transition: border-radius 0.2s;
+  opacity: 1;
+  transition: border-radius 0.2s, opacity 0.2s;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+.br-select-menu__root--scrolling {
+  opacity: 0;
+  pointer-events: none;
 }
 .br-select-menu__root:hover {
   border-radius: 8px;
@@ -171,6 +181,7 @@
   align-items: center;
   border-radius: 20px;
   font-family: inherit;
+  color: inherit;
   border: 0;
   transition: background-color 0.2s, border-radius 0.2s;
   cursor: pointer;
@@ -190,18 +201,23 @@
 }
 
 .br-select-menu__label {
-  width: 0px;
-  opacity: 0;
-  interpolate-size: allow-keywords;
-  transition: width 0.2s;
+  margin-left: 4px;
   font-size: 12px;
 }
 
-
-.br-select-menu__root:hover .br-select-menu__label {
-  width: auto;
-  margin-left: 4px;
-  opacity: 1;
+@media (hover: hover) {
+    .br-select-menu__label {
+        width: 0px;
+        margin-left: 0;
+        opacity: 0;
+        interpolate-size: allow-keywords;
+        transition: width 0.2s;
+    }
+    .br-select-menu__root:hover .br-select-menu__label {
+        width: auto;
+        margin-left: 4px;
+        opacity: 1;
+    }
 }
 
 .BRtextLayer .BRhighlight {
@@ -210,9 +226,14 @@
     color: transparent;
 }
 
-// Style URI TextFragments, eg #:~:text=example
+@keyframes highlightTargetFlash {
+  to { background-color: hsla(45, 80%, 66%, 1); }
+}
+
+// Style URI TextFragments, eg ?text=example
 .BRtextLayer .BRhighlight--target-text, .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;
+    animation: highlightTargetFlash 600ms 1 reverse;
 }

package/src/ia-bookreader/ia-bookreader.js

@@ -302,8 +302,11 @@ export class IaBookReader extends LitElement {
       providers.bookmarks = new BookmarksProvider({
         ...this.baseProviderConfig,
         onProviderChange: (bookmarks) => {
-          const method = Object.keys(bookmarks).length ? 'add' : 'remove';
-          this[`${method}MenuShortcut`]('bookmarks');
+          if (Object.keys(bookmarks).length) {
+            this.addMenuShortcut('bookmarks');
+          } else {
+            this.removeMenuShortcut('bookmarks');
+          }
           this.updateMenuContents();
         },
       });
@@ -463,6 +466,14 @@ export class IaBookReader extends LitElement {
     this._sortMenuShortcuts();
   }
 
+  /**
+   * @param {string} menuId
+   */
+  removeMenuShortcut(menuId) {
+    this.menuShortcuts = this.menuShortcuts.filter((m) => m.id !== menuId);
+    this._sortMenuShortcuts();
+  }
+
   /**
    * Sorts the menuShortcuts property by comparing each provider's id to
    * the id in each iteration over the shortcutOrder array.

package/src/plugins/plugin.experiments.js

@@ -52,8 +52,11 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     /** Where the state of this plugin is saved in localStorage */
     localStorageKey: 'BrExperiments',
 
-    /** The experiments that should be shown in the experiments panel */
-    enabledExperiments: ['translate', 'copyLinkToHighlight'],
+    /** @type {ExperimentName[]} Experiments shown in the experiments panel */
+    availableExperiments: ['translate', 'copyLinkToHighlight'],
+
+    /** @type {ExperimentName[]} Experiments enabled by default */
+    autoEnabledExperiments: [],
   }
 
   /** @type {ExperimentModel[]} */
@@ -160,7 +163,14 @@ export class ExperimentsPlugin extends BookReaderPlugin {
       if (experiment.icon) {
         experiment.icon = experiment.buildAssetPath(experiment.icon);
       }
+
       experiment.br = this.br;
+
+      // Enable any experiments that should be automatically enabled
+      if (!experiment.enabled && this.options.autoEnabledExperiments.includes(experiment.name)) {
+        experiment.enabled = true;
+        await experiment.enable({ manual: false });
+      }
     }
 
     this._loadExperimentStates();
@@ -222,7 +232,7 @@ export class ExperimentsPlugin extends BookReaderPlugin {
       `,
       label: 'Experiments',
       component: html`<br-experiments-panel
-        .experiments="${this.allExperiments.filter(experiment => this.options.enabledExperiments.includes(experiment.name))}"
+        .experiments="${this.allExperiments.filter(experiment => this.options.availableExperiments.includes(experiment.name))}"
         @connected="${e => this._panel = e.target}"
         @toggle="${async e => {
         await this._toggleExperiment(e.detail.experiment, e.detail.enabled);

package/src/plugins/plugin.iiif.js

@@ -3,13 +3,19 @@ import { BookReaderPlugin } from '../BookReaderPlugin.js';
 
 const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
 
+/**
+ * @extends BookReaderPlugin<IiifPlugin['options']>
+ */
 export class IiifPlugin extends BookReaderPlugin {
   options = {
     enabled: true,
-    /** @type {import('@iiif/presentation-3').Manifest | import('@iiif/presentation-2').Manifest} */
+    /** @type {import('@iiif/presentation-3').Manifest | import('@iiif/presentation-2').Manifest | null} */
     manifest: null,
   }
 
+  /**
+   * @param {IiifPlugin['options']} options
+   */
   setup(options) {
     super.setup(options);
     this.manifest = this.options.manifest;

package/src/plugins/plugin.text_selection.js

@@ -36,6 +36,8 @@ export class TextSelectionPlugin extends BookReaderPlugin {
    */
   maxWordRendered = 2500;
 
+  _jumpedToHighlight = false;
+
   /**
    * @param {import('../BookReader.js').default} br
    */
@@ -71,7 +73,12 @@ export class TextSelectionPlugin extends BookReaderPlugin {
         const pageIndex = targetTextFragment.pageIndex;
         const hasTargetText = pageIndex === parseFloat(pageContainerEl.getAttribute('data-index'));
         if (hasTargetText) {
-          renderHighlight(textLayer, targetTextFragment, 'BRhighlight--target-text');
+          const markEls = renderHighlight(textLayer, targetTextFragment, 'BRhighlight--target-text');
+          // Only jump once; presumably on first page load.
+          if (!this._jumpedToHighlight) {
+            markEls[0].scrollIntoView({behavior: 'smooth', block: 'center'});
+            this._jumpedToHighlight = true;
+          }
         }
       });
     }

package/src/plugins/tts/WebTTSEngine.js

@@ -1,6 +1,6 @@
 /* global br */
-import { isChrome, isFirefox } from '../../util/browserSniffing.js';
-import { isAndroid, DEBUG_READ_ALOUD } from './utils.js';
+import { isChrome, isFirefox, isAndroid } from '../../util/browserSniffing.js';
+import { DEBUG_READ_ALOUD } from './utils.js';
 import { promisifyEvent, sleep } from '../../BookReader/utils.js';
 import AbstractTTSEngine from './AbstractTTSEngine.js';
 /** @typedef {import("./AbstractTTSEngine.js").PageChunk} PageChunk */

package/src/plugins/tts/plugin.tts.js

@@ -2,11 +2,11 @@
 
 import FestivalTTSEngine from './FestivalTTSEngine.js';
 import WebTTSEngine from './WebTTSEngine.js';
-import { toISO6391, approximateWordCount } from './utils.js';
+import { toISO6391 } from './utils.js';
 import { en as tooltips } from './tooltip_dict.js';
 import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.js';
 import { BookReaderPlugin } from '../../BookReaderPlugin.js';
-import { applyVariables } from '../../util/strings.js';
+import { applyVariables, countWords } from '../../util/strings.js';
 /** @typedef {import('./PageChunk.js').default} PageChunk */
 /** @typedef {import("./AbstractTTSEngine.js").default} AbstractTTSEngine */
 
@@ -291,7 +291,7 @@ export class TtsPlugin extends BookReaderPlugin {
    * @param {PageChunk} chunk
    */
   sendChunkFinishedAnalyticsEvent(chunk) {
-    this.sendAnalyticsEvent('ChunkFinished-Words', approximateWordCount(chunk.text));
+    this.sendAnalyticsEvent('ChunkFinished-Words', countWords(chunk.text));
   }
 
   /**

package/src/plugins/tts/utils.js

@@ -1,25 +1,6 @@
 // @ts-check
 import langs from 'iso-language-codes';
 
-/**
- * Use regex to approximate word count in a string
- * @param {string} text
- * @return {number}
- */
-export function approximateWordCount(text) {
-  const m = text.match(/\S+/g);
-  return m ? m.length : 0;
-}
-
-/**
- * Checks whether the current browser is on android
- * @param {string} [userAgent]
- * @return {boolean}
- */
-export function isAndroid(userAgent = navigator.userAgent) {
-  return /android/i.test(userAgent);
-}
-
 /** @type {{[lang: string]: string}} */
 // Handle odd one-off language pairs that might show up over time
 const specialLangs =  {