@internetarchive/bookreader 5.0.0-71 → 5.0.0-73

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# 5.0.0-73
+- Feature: Add `table_of_contents` option to work with chapters plugin @cdrini
+- Fix: Simple demos not working @xonx4l
+- Dev: Update test/build dependencies @cdrini
+
+# 5.0.0-72
+- Fix: Play/pause button out of sync with ReadAloud @sbwhitt
+- Fix: BookReader not loading in sandboxed iframe @cdrini
+- Dev: Fix noisy sentry error firing on any selection @cdrini
+- Dev: Update to Node 20 @cdrini
+
 # 5.0.0-71
 - Dev: update jest monorepo @renovate
 - Fix: Share & Mutliple View menu panel refactor @iisa

package/netlify.toml

@@ -1,6 +1,6 @@
 [build.environment]
   # Keep in sync with CI in .github/workflows/node.js.yml
-  NODE_VERSION = "16"
+  NODE_VERSION = "20"
 
 [[headers]]
   # Define which paths this specific [[headers]] block will cover.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-71",
+  "version": "5.0.0-73",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -40,18 +40,18 @@
     "lit": "^2.5.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.9",
-    "@babel/eslint-parser": "7.22.9",
+    "@babel/core": "7.23.3",
+    "@babel/eslint-parser": "7.23.3",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-decorators": "7.22.7",
-    "@babel/preset-env": "7.22.9",
-    "@open-wc/testing-helpers": "^2.3.0",
-    "@types/jest": "29.5.5",
+    "@babel/plugin-proposal-decorators": "7.23.3",
+    "@babel/preset-env": "7.23.3",
+    "@open-wc/testing-helpers": "3.0.0",
+    "@types/jest": "29.5.10",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "babel-loader": "9.1.3",
     "codecov": "^3.8.3",
     "concurrently": "7.6.0",
-    "core-js": "3.27.1",
+    "core-js": "3.33.3",
     "cpx2": "4.2.3",
     "eslint": "^7.32.0",
     "eslint-plugin-no-jquery": "^2.7.0",
@@ -67,21 +67,20 @@
     "jquery-ui-touch-punch": "0.2.3",
     "jquery.browser": "0.1.0",
     "live-server": "1.2.2",
-    "node-fetch": "3.3.2",
-    "regenerator-runtime": "0.13.11",
-    "sass": "1.64.2",
-    "sinon": "^15.1.0",
+    "regenerator-runtime": "0.14.0",
+    "sass": "1.69.5",
+    "sinon": "17.0.1",
     "soundmanager2": "2.97.20170602",
-    "svgo": "3.0.2",
+    "svgo": "3.0.4",
     "testcafe": "2.6.2",
     "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",
-    "webpack": "5.88.2",
+    "webpack": "5.89.0",
     "webpack-cli": "5.1.4"
   },
   "jest": {
     "testEnvironment": "jsdom",
     "transformIgnorePatterns": [
-      "node_modules/(?!(lit-html|lit-element|lit|@lit|@internetarchive|@open-wc)/)"
+      "node_modules/(?!(sinon|lit-html|lit-element|lit|@lit|@internetarchive|@open-wc)/)"
     ],
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/$1"

package/scripts/preversion.js

@@ -2,10 +2,6 @@ const { version: OLD_VERSION } = require('../package.json');
 const OLD_RELEASE_URL = `https://api.github.com/repos/internetarchive/bookreader/releases/tags/v${OLD_VERSION}`;
 
 async function main() {
-    // Need this because fetch is ESM-only, and we're on Node 16. Someday we should
-    // be able to move this up to the top without renaming this file to a .mjs or whatever
-    const {default: fetch} = await import('node-fetch');
-
     const {created_at} = await fetch(OLD_RELEASE_URL).then(r => r.json());
     const today = new Date().toISOString().slice(0, -5);
     const searchUrl = 'https://github.com/internetarchive/bookreader/pulls?' + new URLSearchParams({

package/src/BookReader/options.js

@@ -180,6 +180,9 @@ export const DEFAULT_OPTIONS = {
    */
   data: [],
 
+  /** @type {import('../plugins/plugin.chapters.js').TocEntry[]} */
+  table_of_contents: null,
+
   /** Advanced methods for page rendering */
   /** @type {() => number} */
   getNumLeafs: null,

package/src/BookReader/utils/SelectionObserver.js

@@ -30,8 +30,10 @@ export class SelectionObserver {
     const sel = window.getSelection();
 
     if (!this.selecting && sel.toString()) {
+      const target = $(sel.anchorNode).closest(this.selector)[0];
+      if (!target) return;
+      this.target = target;
       this.selecting = true;
-      this.target = $(sel.anchorNode).closest(this.selector)[0];
       this.handler('started', this.target);
     }
 

package/src/css/_BRsearch.scss

@@ -9,8 +9,7 @@
   display: none;
   position: absolute;
   bottom: calc(100% + 5px);
-  left: 50%;
-  transform: translateX(-50%);
+  left: -14px;
   width: 350px;
   max-width: 100vw;
   padding: 12px 14px;
@@ -34,9 +33,7 @@
     position: absolute;
     content: "";
     bottom: -9px;
-    left: 50%;
-    margin-left: -1px;
-    transform: translateX(-50%);
+    left: 0;
     width: 30px;
     height: 10px;
     clip-path: polygon(0 0, 100% 0, 50% 100%);
@@ -131,9 +128,10 @@
     main {
       @include ellipsis-lines(4);
       margin-bottom: 6px;
+      &:before { content: "“"; }
+      &:after { content: "”"; }
     }
     footer {
-      text-align: center;
       font-size: 0.85em;
       opacity: .8;
     }

package/src/plugins/plugin.chapters.js

@@ -28,11 +28,28 @@ BookReader.prototype.init = (function(super_) {
 })(BookReader.prototype.init);
 
 BookReader.prototype._chapterInit = async function() {
-  const olEdition = await this.getOpenLibraryRecord(this.options.olHost, this.options.bookId);
-  if (olEdition?.table_of_contents?.length) {
-    this._tocEntries = olEdition.table_of_contents.map(rawTOCEntry => (
-      Object.assign({}, rawTOCEntry, {pageIndex: this.book.getPageIndex(rawTOCEntry.pagenum)})
-    ));
+  let rawTableOfContents = null;
+  // Prefer IA TOC for now, until we update the second half to check for
+  // `openlibrary_edition` on the IA metadata instead of making a bunch of
+  // requests to OL.
+  if (this.options.table_of_contents?.length) {
+    rawTableOfContents = this.options.table_of_contents;
+  } else {
+    const olEdition = await this.getOpenLibraryRecord(this.options.olHost, this.options.bookId);
+    if (olEdition?.table_of_contents?.length) {
+      rawTableOfContents = olEdition.table_of_contents;
+    }
+  }
+
+  if (rawTableOfContents) {
+    this._tocEntries = rawTableOfContents
+      .map(rawTOCEntry => (Object.assign({}, rawTOCEntry, {
+        pageIndex: (
+          typeof(rawTOCEntry.leaf) == 'number' ? this.book.leafNumToIndex(rawTOCEntry.leaf) :
+            rawTOCEntry.pagenum ? this.book.getPageIndex(rawTOCEntry.pagenum) :
+              undefined
+        ),
+      })));
     this._chaptersRender(this._tocEntries);
     this.bind(BookReader.eventNames.pageChanged, () => this._chaptersUpdateCurrent());
   }
@@ -60,19 +77,18 @@ BookReader.prototype._chaptersRender = function() {
     />`,
   };
   shell.updateMenuContents();
-  for (const tocEntry of this._tocEntries) {
-    this._chaptersRenderMarker(tocEntry);
-  }
+  this._tocEntries.forEach((tocEntry, i) => this._chaptersRenderMarker(tocEntry, i));
 };
 
 /**
  * @typedef {Object} TocEntry
  * Table of contents entry as defined by Open Library, with some extra values for internal use
- * @property {string} pagenum
- * @property {number} level
- * @property {string} label
- * @property {string} title
- * @property {number} pageIndex - Added
+ * @property {number} [level]
+ * @property {string} [label]
+ * @property {string} [title]
+ * @property {PageString} [pagenum]
+ * @property {LeafNum} [leaf]
+ * @property {number} [pageIndex] - Added
  *
  * @example {
  *   "pagenum": "17",
@@ -84,21 +100,25 @@ BookReader.prototype._chaptersRender = function() {
 
 /**
  * @param {TocEntry} tocEntry
+ * @param {number} entryIndex
  */
-BookReader.prototype._chaptersRenderMarker = function(tocEntry) {
+BookReader.prototype._chaptersRenderMarker = function(tocEntry, entryIndex) {
   if (tocEntry.pageIndex == undefined) return;
 
   //creates a string with non-void tocEntry.label and tocEntry.title
   const chapterStr = [tocEntry.label, tocEntry.title]
     .filter(x => x)
-    .join(' ');
+    .join(' ') || `Chapter ${entryIndex + 1}`;
 
   const percentThrough = BookReader.util.cssPercentage(tocEntry.pageIndex, this.book.getNumLeafs() - 1);
   $(`<div></div>`)
     .append(
       $('<div />')
         .text(chapterStr)
-        .append($('<div class="BRchapterPage" />').text(`Page ${tocEntry.pagenum}`))
+        .append(
+          $('<div class="BRchapterPage" />')
+            .text(this.book.getPageName(tocEntry.pageIndex))
+        )
     )
     .addClass('BRchapter')
     .css({ left: percentThrough })

package/src/plugins/tts/AbstractTTSEngine.js

@@ -1,4 +1,5 @@
 import PageChunkIterator from './PageChunkIterator.js';
+import { hasLocalStorage } from './utils.js';
 /** @typedef {import('./utils.js').ISO6391} ISO6391 */
 /** @typedef {import('./PageChunk.js')} PageChunk */
 
@@ -80,6 +81,7 @@ export default class AbstractTTSEngine {
    */
   start(leafIndex, numLeafs) {
     this.playing = true;
+    this.paused = false;
     this.opts.onLoadingStart();
 
     this._chunkIterator = new PageChunkIterator(numLeafs, leafIndex, {
@@ -95,6 +97,7 @@ export default class AbstractTTSEngine {
   stop() {
     if (this.activeSound) this.activeSound.stop();
     this.playing = false;
+    this.paused = true;
     this._chunkIterator = null;
     this.activeSound = null;
     this.events.trigger('stop');
@@ -143,7 +146,7 @@ export default class AbstractTTSEngine {
     this.events.off('voiceschanged', this.updateBestVoice);
     this.voice = this.getVoices().find(voice => voice.voiceURI === voiceURI);
     // if the current book has a language set, store the selected voice with the book language as a suffix
-    if (this.opts.bookLanguage) {
+    if (this.opts.bookLanguage && hasLocalStorage()) {
       localStorage.setItem(`BRtts-voice-${this.opts.bookLanguage}`, this.voice.voiceURI);
     }
     if (this.activeSound) this.activeSound.setVoice(this.voice);
@@ -247,7 +250,7 @@ export default class AbstractTTSEngine {
    * @return {SpeechSynthesisVoice | undefined}
    */
   static getMatchingStoredVoice(voices, bookLanguage) {
-    const storedVoice = localStorage.getItem(`BRtts-voice-${bookLanguage}`);
+    const storedVoice = hasLocalStorage() && localStorage.getItem(`BRtts-voice-${bookLanguage}`);
     return (storedVoice ? voices.find(v => v.voiceURI === storedVoice) : undefined);
   }
 

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

@@ -251,7 +251,7 @@ BookReader.prototype.ttsPlayPause = function() {
     this.ttsToggle();
   } else {
     this.ttsEngine.togglePlayPause();
-    this.ttsUpdateState(this.ttsEngine.paused);
+    this.ttsUpdateState();
   }
 };
 

package/src/plugins/tts/utils.js

@@ -64,3 +64,18 @@ function searchForISO6391(language, columnsToSearch) {
   }
   return null;
 }
+
+/**
+ * Checks whether the current browser supports localStorage or
+ * if the current context has access to it.
+ * @return {boolean}
+ */
+export function hasLocalStorage() {
+  try {
+    return !!window.localStorage;
+  } catch (e) {
+    // Will throw in sandboxed iframe
+    // DOMException: Window.localStorage getter: Forbidden in a sandboxed document without the 'allow-same-origin' flag.
+    return false;
+  }
+}

package/tests/jest/BookReader/utils/SelectionObserver.test.js

@@ -40,4 +40,18 @@ describe("SelectionObserver", () => {
     observer._onSelectionChange();
     expect(handler.callCount).toBe(2);
   });
+
+  test('Only fires when selection started in selector', () => {
+    const handler = sinon.spy();
+    const observer = new SelectionObserver(".text-layer", handler);
+    const target = document.createElement("div");
+    target.classList.add("text-layer");
+
+    // stub window.getSelection
+    const getSelectionStub = sinon.stub(window, "getSelection");
+    getSelectionStub.returns({ toString: () => "test", anchorNode: document.body });
+    observer._onSelectionChange();
+    expect(handler.callCount).toBe(0);
+    expect(observer.selecting).toBe(false);
+  });
 });

package/tests/jest/plugins/plugin.chapters.test.js

@@ -4,7 +4,9 @@ import BookReader from "@/src/BookReader.js";
 import "@/src/plugins/plugin.chapters.js";
 import { BookModel } from "@/src/BookReader/BookModel";
 import { deepCopy } from "../utils";
+/** @typedef {import('@/src/plugins/plugin.chapters').TocEntry} TocEntry  */
 
+/** @type {TocEntry[]} */
 const SAMPLE_TOC = [{
   "pagenum": "3",
   "level": 1,
@@ -34,16 +36,15 @@ const SAMPLE_TOC = [{
   "pageIndex": 40,
 }];
 
+/** @type {TocEntry[]} */
 const SAMPLE_TOC_UNDEF = [
   {
-    "pagenum": "undefined",
     "level": 1,
     "label": "CHAPTER I",
     "type": { "key": "/type/toc_item" },
     "title": "THE COUNTRY AND THE MISSION 1",
   },
   {
-    "pagenum": "undefined",
     "level": 1,
     "label": "CHAPTER II",
     "type": { "key": "/type/toc_item" },
@@ -51,6 +52,18 @@ const SAMPLE_TOC_UNDEF = [
   },
 ];
 
+/** @type {TocEntry[]} */
+const SAMPLE_TOC_OPTION = [
+  {
+    "level": 1,
+    "title": "THE COUNTRY AND THE MISSION 1",
+  },
+  {
+    "level": 1,
+    "title": "THE COUNTRY AND THE MISSION 2",
+  },
+];
+
 afterEach(() => {
   sinon.restore();
 });
@@ -92,7 +105,7 @@ describe("BRChaptersPlugin", () => {
         },
         getOpenLibraryRecord: async () => ({
           "title": "The Adventures of Sherlock Holmes",
-          "table_of_contents": deepCopy(SAMPLE_TOC_UNDEF),
+          "table_of_contents": deepCopy(SAMPLE_TOC_OPTION),
           "ocaid": "adventureofsherl0000unse",
         }),
         _chaptersRender: sinon.stub(),
@@ -100,6 +113,41 @@ describe("BRChaptersPlugin", () => {
       await BookReader.prototype._chapterInit.call(fakeBR);
       expect(fakeBR._chaptersRender.callCount).toBe(1);
     });
+
+    test("does not fetch open library record if table of contents in options", async () => {
+      const fakeBR = {
+        options: {
+          table_of_contents: deepCopy(SAMPLE_TOC_UNDEF),
+        },
+        bind: sinon.stub(),
+        getOpenLibraryRecord: sinon.stub(),
+        _chaptersRender: sinon.stub(),
+      };
+      await BookReader.prototype._chapterInit.call(fakeBR);
+      expect(fakeBR.getOpenLibraryRecord.callCount).toBe(0);
+      expect(fakeBR._chaptersRender.callCount).toBe(1);
+    });
+
+    test("converts leafs and pagenums to page index", async () => {
+      const table_of_contents = deepCopy(SAMPLE_TOC_UNDEF);
+      table_of_contents[0].leaf = 0;
+      table_of_contents[1].pagenum = '17';
+      const fakeBR = {
+        options: {
+          table_of_contents,
+        },
+        bind: sinon.stub(),
+        book: {
+          leafNumToIndex: (leaf) => leaf + 1,
+          getPageIndex: (str) => parseFloat(str),
+        },
+        _chaptersRender: sinon.stub(),
+      };
+      await BookReader.prototype._chapterInit.call(fakeBR);
+      expect(fakeBR._chaptersRender.callCount).toBe(1);
+      expect(fakeBR._tocEntries[0].pageIndex).toBe(1);
+      expect(fakeBR._tocEntries[1].pageIndex).toBe(17);
+    });
   });
 
   describe('_chaptersRender', () => {