@internetarchive/bookreader 5.0.0-90 → 5.0.0-91

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# 5.0.0-91
+- Refactor: Migrate ChaptersPlugin to BookReaderPlugin system @cdrini
+  - Breaking changes:
+    - Options moved:
+        - `options.olHost` → `options.plugins.chapters.olHost`
+        - `options.enableChaptersPlugin` → `options.plugins.chapters.enabled`
+        - Note `table_of_contents` _did not_ move; that is still root-level
+    - All chapters state/methods moved from `BookReader` to `BookReader.plugins.chapters`. Full list:
+        - eg `BookReader._chapters*` has been moved to `BookReader.plugins.chapters._*`
+  - See https://github.com/internetarchive/bookreader/pull/1381
+- Feature: TextSelectionPlugin now supports `protected` option @cdrini
+- Feature: New option for ChaptersPlugin for explicit `openLibraryId` @cdrini
+- Fix: No longer error when book ends on unviewable page @cdrini
+- Fix: ReadAloud no longer jumps to top of page every time it scrolls @cdrini
+- Fix: Fix various ReadAloud issues -- ReadAloud stuttering, not stopping, getting stuck, etc. @cdrini
+
 # 5.0.0-90
 - Fix: Festival TTS not working @cdrini
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-90",
+  "version": "5.0.0-91",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",

package/src/BookReader/BookModel.js

@@ -274,6 +274,7 @@ export class BookModel {
    * @param {number} [arg0.end] exclusive
    * @param {boolean} [arg0.combineConsecutiveUnviewables] Yield only first unviewable
    * of a chunk of unviewable pages instead of each page
+   * @return {Generator<PageModel>}
    */
   * pagesIterator({ start = 0, end = Infinity, combineConsecutiveUnviewables = false } = {}) {
     start = Math.max(0, start);
@@ -483,7 +484,7 @@ export class PageModel {
    * @param {object} [arg0]
    * @param {boolean} [arg0.combineConsecutiveUnviewables] Whether to only yield the first page
    * of a series of unviewable pages instead of each page
-   * @return {PageModel|void}
+   * @return {PageModel|undefined}
    */
   findNext({ combineConsecutiveUnviewables = false } = {}) {
     return this.book
@@ -495,7 +496,7 @@ export class PageModel {
    * @param {object} [arg0]
    * @param {boolean} [arg0.combineConsecutiveUnviewables] Whether to only yield the first page
    * of a series of unviewable pages instead of each page
-   * @return {PageModel|void}
+   * @return {PageModel|undefined}
    */
   findPrev({ combineConsecutiveUnviewables = false } = {}) {
     if (this.index == 0) return undefined;
@@ -518,7 +519,7 @@ export class PageModel {
    * @param {object} [arg0]
    * @param {boolean} [arg0.combineConsecutiveUnviewables] Whether to only yield the first page
    * of a series of unviewable pages instead of each page
-   * @return {PageModel|void}
+   * @return {PageModel|undefined}
    */
   findLeft({ combineConsecutiveUnviewables = false } = {}) {
     return this.book.pageProgression === 'lr' ? this.findPrev({ combineConsecutiveUnviewables }) : this.findNext({ combineConsecutiveUnviewables });
@@ -528,7 +529,7 @@ export class PageModel {
    * @param {object} [arg0]
    * @param {boolean} [arg0.combineConsecutiveUnviewables] Whether to only yield the first page
    * of a series of unviewable pages instead of each page
-   * @return {PageModel|void}
+   * @return {PageModel|undefined}
    */
   findRight({ combineConsecutiveUnviewables = false } = {}) {
     return this.book.pageProgression === 'lr' ? this.findNext({ combineConsecutiveUnviewables }) : this.findPrev({ combineConsecutiveUnviewables });

package/src/BookReader/options.js

@@ -145,6 +145,8 @@ export const DEFAULT_OPTIONS = {
     archiveAnalytics: null,
     /** @type {import('../plugins/plugin.autoplay.js').AutoplayPlugin['options']}*/
     autoplay: null,
+    /** @type {import('../plugins/plugin.chapters.js').ChaptersPlugin['options']} */
+    chapters: null,
     /** @type {import('../plugins/plugin.iiif.js').IiifPlugin['options']} */
     iiif: null,
     /** @type {import('../plugins/plugin.resume.js').ResumePlugin['options']} */

package/src/BookReader.js

@@ -44,7 +44,7 @@ import { NAMED_REDUCE_SETS } from './BookReader/ReduceSet';
 
 /**
  * BookReader
- * @param {BookReaderOptions} options
+ * @param {Partial<BookReaderOptions>} overrides
  * TODO document all options properties
  * @constructor
  */
@@ -70,6 +70,8 @@ BookReader.PLUGINS = {
   archiveAnalytics: null,
   /** @type {typeof import('./plugins/plugin.autoplay.js').AutoplayPlugin | null}*/
   autoplay: null,
+  /** @type {typeof import('./plugins/plugin.chapters.js').ChaptersPlugin | null}*/
+  chapters: null,
   /** @type {typeof import('./plugins/plugin.resume.js').ResumePlugin | null}*/
   resume: null,
   /** @type {typeof import('./plugins/plugin.text_selection.js').TextSelectionPlugin | null}*/
@@ -80,7 +82,7 @@ BookReader.PLUGINS = {
 
 /**
  * @param {string} pluginName
- * @param {typeof import('./BookReaderPlugin.js').BookReaderPlugin} plugin
+ * @param {new (...args: any[]) => import('./BookReaderPlugin.js').BookReaderPlugin} plugin
  */
 BookReader.registerPlugin = function(pluginName, plugin) {
   if (BookReader.PLUGINS[pluginName]) {
@@ -116,10 +118,14 @@ BookReader.prototype.setup = function(options) {
   // Store the options used to setup bookreader
   this.options = options;
 
+  /** @type {import('@/src/BookNavigator/book-navigator.js').BookNavigator} */
+  this.shell;
+
   // Construct the usual plugins first to get type hints
   this._plugins = {
     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,
     resume: BookReader.PLUGINS.resume ? new BookReader.PLUGINS.resume(this) : null,
     textSelection: BookReader.PLUGINS.textSelection ? new BookReader.PLUGINS.textSelection(this) : null,
     tts: BookReader.PLUGINS.tts ? new BookReader.PLUGINS.tts(this) : null,
@@ -1052,16 +1058,20 @@ BookReader.prototype._isIndexDisplayed = function(index) {
 BookReader.prototype.jumpToIndex = function(index, pageX, pageY, noAnimate) {
   // Don't jump into specific unviewable page
   const page = this.book.getPage(index);
+
   if (!page.isViewable && page.unviewablesStart != page.index) {
     // If already in unviewable range, jump to end of that range
     const alreadyInPreview = this._isIndexDisplayed(page.unviewablesStart);
-    const newIndex = alreadyInPreview ? page.findNext({ combineConsecutiveUnviewables: true }).index : page.unviewablesStart;
-    return this.jumpToIndex(newIndex, pageX, pageY, noAnimate);
-  }
-
-  this.trigger(BookReader.eventNames.stop);
+    const newIndex = alreadyInPreview ? page.findNext({ combineConsecutiveUnviewables: true })?.index : page.unviewablesStart;
+    // Rare, but a book can end on an unviewable page, so this could be undefined
+    if (typeof newIndex !== 'undefined') {
+      this.jumpToIndex(newIndex, pageX, pageY, noAnimate);
+    }
+  } else {
+    this.trigger(BookReader.eventNames.stop);
 
-  this.activeMode.jumpToIndex(index, pageX, pageY, noAnimate);
+    this.activeMode.jumpToIndex(index, pageX, pageY, noAnimate);
+  }
 };
 
 /**

package/src/plugins/plugin.chapters.js

@@ -1,85 +1,240 @@
-/* global BookReader */
+// @ts-check
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import '@internetarchive/icon-toc/icon-toc';
-/** @typedef {import('@/src/BookNavigator/book-navigator.js').BookNavigator} BookNavigator */
+import { BookReaderPlugin } from "../BookReaderPlugin";
+import { applyVariables } from "../util/strings.js";
+/** @typedef {import('@/src/BookReader/BookModel.js').PageIndex} PageIndex */
+/** @typedef {import('@/src/BookReader/BookModel.js').PageString} PageString */
+/** @typedef {import('@/src/BookReader/BookModel.js').LeafNum} LeafNum */
+
+// @ts-ignore
+const BookReader = /** @type {typeof import('@/src/BookReader.js').default} */(window.BookReader);
 
 /**
  * Plugin for chapter markers in BookReader. Fetches from openlibrary.org
  * Could be forked, or extended to alter behavior
  */
+export class ChaptersPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+
+    /**
+     * The Open Library host to fetch/query Open Library.
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     */
+    openLibraryHost: 'https://openlibrary.org',
+
+    /**
+     * The Open Library edition to fetch the table of contents from.
+     * E.g. 'OL12345M'
+     *
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     */
+    openLibraryId: '',
+
+    /**
+     * The Internet Archive identifier to fetch the Open Library table
+     * of contents from.
+     * E.g. 'goody'
+     *
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     */
+    internetArchiveId: '',
+
+    /**
+     * @deprecated
+     * Old name for openLibraryHost
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     */
+    olHost: 'https://openlibrary.org',
+
+    /**
+     * @deprecated
+     * Old name for internetArchiveId
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     */
+    bookId: '{{bookId}}',
+  }
+
+  /** @type {TocEntry[]} */
+  _tocEntries;
 
-jQuery.extend(BookReader.defaultOptions, {
-  olHost: 'https://openlibrary.org',
-  enableChaptersPlugin: true,
-  bookId: '',
-});
-
-/** @override Extend to call Open Library for TOC */
-BookReader.prototype.init = (function(super_) {
-  return function() {
-    super_.call(this);
-    if (this.options.enableChaptersPlugin && this.ui !== 'embed') {
-      this._chapterInit();
+  /** @type {BRChaptersPanel} */
+  _chaptersPanel;
+
+  /** @override */
+  setup(options) {
+    super.setup(options);
+    this.options.internetArchiveId = this.options.internetArchiveId || this.options.bookId;
+    this.options.openLibraryHost = this.options.openLibraryHost || this.options.olHost;
+  }
+
+  /** @override Extend to call Open Library for TOC */
+  async init() {
+    if (!this.options.enabled || this.br.ui === 'embed') {
+      return;
     }
-  };
-})(BookReader.prototype.init);
-
-BookReader.prototype._chapterInit = async function() {
-  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;
+
+    let rawTableOfContents = null;
+    // Prefer explicit TOC if specified
+    if (this.br.options.table_of_contents?.length) {
+      rawTableOfContents = this.br.options.table_of_contents;
+    } else {
+      // Otherwise fetch from OL
+      const olEdition = await this.getOpenLibraryRecord();
+      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.br.book.leafNumToIndex(rawTOCEntry.leaf) :
+              rawTOCEntry.pagenum ? this.br.book.getPageIndex(rawTOCEntry.pagenum) :
+                undefined
+          ),
+        })));
+      this._render();
+      this.br.bind(BookReader.eventNames.pageChanged, () => this._updateCurrent());
     }
   }
 
-  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());
+  /**
+   * Update the table of contents based on array of TOC entries.
+   */
+  _render() {
+    this.br.shell.menuProviders['chapters'] = {
+      id: 'chapters',
+      icon: html`<ia-icon-toc style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-toc>`,
+      label: 'Table of Contents',
+      component: html`<br-chapters-panel
+        .contents="${this._tocEntries}"
+        .jumpToPage="${(pageIndex) => {
+        this._updateCurrent(pageIndex);
+        this.br.jumpToIndex(pageIndex);
+      }}"
+        @connected="${(e) => {
+        this._chaptersPanel = e.target;
+        this._updateCurrent();
+      }}"
+      />`,
+    };
+    this.br.shell.addMenuShortcut('chapters');
+    this.br.shell.updateMenuContents();
+    this._tocEntries.forEach((tocEntry, i) => this._renderMarker(tocEntry, i));
   }
-};
 
-/**
- * Update the table of contents based on array of TOC entries.
- */
-BookReader.prototype._chaptersRender = function() {
-  const shell = /** @type {BookNavigator} */(this.shell);
-  shell.menuProviders['chapters'] = {
-    id: 'chapters',
-    icon: html`<ia-icon-toc style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-toc>`,
-    label: 'Table of Contents',
-    component: html`<br-chapters-panel
-      .contents="${this._tocEntries}"
-      .jumpToPage="${(pageIndex) => {
-      this._chaptersUpdateCurrent(pageIndex);
-      this.jumpToIndex(pageIndex);
-    }}"
-      @connected="${(e) => {
-      this._chaptersPanel = e.target;
-      this._chaptersUpdateCurrent();
-    }}"
-    />`,
-  };
-  shell.addMenuShortcut('chapters');
-  shell.updateMenuContents();
-  this._tocEntries.forEach((tocEntry, i) => this._chaptersRenderMarker(tocEntry, i));
-};
+  /**
+   * @param {TocEntry} tocEntry
+   * @param {number} entryIndex
+   */
+  _renderMarker(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(' ') || `Chapter ${entryIndex + 1}`;
+
+    const percentThrough = BookReader.util.cssPercentage(tocEntry.pageIndex, this.br.book.getNumLeafs() - 1);
+    $(`<div></div>`)
+      .append(
+        $('<div />')
+          .text(chapterStr)
+          .append(
+            $('<div class="BRchapterPage" />')
+              .text(this.br.book.getPageName(tocEntry.pageIndex)),
+          ),
+      )
+      .addClass('BRchapter')
+      .css({ left: percentThrough })
+      .appendTo(this.br.$('.BRnavline'))
+      .on("mouseenter", event => {
+        // remove hover effect from other markers then turn on just for this
+        const marker = event.currentTarget;
+        const tooltip = marker.querySelector('div');
+        const tooltipOffset = tooltip.getBoundingClientRect();
+        const targetOffset = marker.getBoundingClientRect();
+        const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
+        if (tooltipOffset.x - boxSizeAdjust < 0) {
+          tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
+        }
+        this.br.$('.BRsearch,.BRchapter').removeClass('front');
+        $(event.target).addClass('front');
+      })
+      .on("mouseleave", event => $(event.target).removeClass('front'))
+      .on('click', () => {
+        this._updateCurrent(tocEntry.pageIndex);
+        this.br.jumpToIndex(tocEntry.pageIndex);
+      });
+
+    this.br.$('.BRchapter, .BRsearch').each((i, el) => {
+      const $el = $(el);
+      $el
+        .on("mouseenter", () => $el.addClass('front'))
+        .on("mouseleave", () => $el.removeClass('front'));
+    });
+  }
+
+  /**
+   * This makes a call to OL API and calls the given callback function with the
+   * response from the API.
+   */
+  async getOpenLibraryRecord() {
+    const olHost = applyVariables(this.options.openLibraryHost, this.br.options.vars);
+
+    if (this.options.openLibraryId) {
+      const openLibraryId = applyVariables(this.options.openLibraryId, this.br.options.vars);
+      return await $.ajax({ url: `${olHost}/books/${openLibraryId}.json` });
+    }
+
+    if (this.options.internetArchiveId) {
+      const ocaid = applyVariables(this.options.internetArchiveId, this.br.options.vars);
+
+      // Try looking up by ocaid first, then by source_record
+      const baseQueryUrl = `${olHost}/query.json?type=/type/edition&*=&`;
+
+      let data = await $.ajax({
+        url: baseQueryUrl + new URLSearchParams({ ocaid, limit: '1' }),
+      });
+
+      if (!data || !data.length) {
+        // try source_records
+        data = await $.ajax({
+          url: baseQueryUrl + new URLSearchParams({ source_records: `ia:${ocaid}`, limit: '1' }),
+        });
+      }
+
+      return data?.[0];
+    }
+
+    return null;
+  }
+
+  /**
+   * @private
+   * Highlights the current chapter based on current page
+   * @param {PageIndex} curIndex
+   */
+  _updateCurrent(
+    curIndex = (this.br.mode == 2 ? Math.max(...this.br.displayedIndices) : this.br.firstIndex),
+  ) {
+    const tocEntriesIndexed = this._tocEntries.filter((el) => el.pageIndex != undefined).reverse();
+    const currChapter = tocEntriesIndexed[
+      // subtract one so that 2up shows the right label
+      tocEntriesIndexed.findIndex((chapter) => chapter.pageIndex <= curIndex)
+    ];
+    if (this._chaptersPanel) {
+      this._chaptersPanel.currentChapter = currChapter;
+    }
+  }
+}
+BookReader?.registerPlugin('chapters', ChaptersPlugin);
 
 /**
  * @typedef {Object} TocEntry
@@ -99,98 +254,6 @@ BookReader.prototype._chaptersRender = function() {
  * }
  */
 
-/**
- * @param {TocEntry} tocEntry
- * @param {number} entryIndex
- */
-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(' ') || `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(this.book.getPageName(tocEntry.pageIndex)),
-        ),
-    )
-    .addClass('BRchapter')
-    .css({ left: percentThrough })
-    .appendTo(this.$('.BRnavline'))
-    .on("mouseenter", event => {
-      // remove hover effect from other markers then turn on just for this
-      const marker = event.currentTarget;
-      const tooltip = marker.querySelector('div');
-      const tooltipOffset = tooltip.getBoundingClientRect();
-      const targetOffset = marker.getBoundingClientRect();
-      const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
-      if (tooltipOffset.x - boxSizeAdjust < 0) {
-        tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
-      }
-      this.$('.BRsearch,.BRchapter').removeClass('front');
-      $(event.target).addClass('front');
-    })
-    .on("mouseleave", event => $(event.target).removeClass('front'))
-    .on('click', () => {
-      this._chaptersUpdateCurrent(tocEntry.pageIndex);
-      this.jumpToIndex(tocEntry.pageIndex);
-    });
-
-  this.$('.BRchapter, .BRsearch').each((i, el) => {
-    const $el = $(el);
-    $el
-      .on("mouseenter", () => $el.addClass('front'))
-      .on("mouseleave", () => $el.removeClass('front'));
-  });
-};
-
-/**
- * This makes a call to OL API and calls the given callback function with the
- * response from the API.
- *
- * @param {string} olHost
- * @param {string} ocaid
- */
-BookReader.prototype.getOpenLibraryRecord = async function (olHost, ocaid) {
-  // Try looking up by ocaid first, then by source_record
-  const baseURL = `${olHost}/query.json?type=/type/edition&*=`;
-  const fetchUrlByBookId = `${baseURL}&ocaid=${ocaid}`;
-
-  let data = await $.ajax({ url: fetchUrlByBookId });
-
-  if (!data || !data.length) {
-    // try sourceid
-    data = await $.ajax({ url: `${baseURL}&source_records=ia:${ocaid}` });
-  }
-
-  return data?.[0];
-};
-
-/**
- * @private
- * Highlights the current chapter based on current page
- * @param {PageIndex} curIndex
- */
-BookReader.prototype._chaptersUpdateCurrent = function(
-  curIndex = (this.mode == 2 ? Math.max(...this.displayedIndices) : this.firstIndex),
-) {
-  const tocEntriesIndexed = this._tocEntries.filter((el) => el.pageIndex != undefined).reverse();
-  const currChapter = tocEntriesIndexed[
-    // subtract one so that 2up shows the right label
-    tocEntriesIndexed.findIndex((chapter) => chapter.pageIndex <= curIndex)
-  ];
-  if (this._chaptersPanel) {
-    this._chaptersPanel.currentChapter = currChapter;
-  }
-};
-
 @customElement('br-chapters-panel')
 export class BRChaptersPanel extends LitElement {
   /** @type {TocEntry[]} */

package/src/plugins/plugin.text_selection.js

@@ -82,6 +82,22 @@ export class TextSelectionPlugin extends BookReaderPlugin {
         $(window.getSelection().anchorNode).closest('.BRpagecontainer').addClass('BRpagecontainer--hasSelection');
       }
     }).attach();
+
+    if (this.br.protected) {
+      // 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;
+          }
+        }
+      });
+    }
   }
 
   /**