@internetarchive/bookreader 5.0.0-88 → 5.0.0-89

package/src/plugins/plugin.autoplay.js

@@ -1,128 +1,124 @@
-/*global BookReader */
+// @ts-check
+import { EVENTS } from "../BookReader/events";
+import { parseAnimationSpeed } from "../BookReader/utils";
+import { BookReaderPlugin } from "../BookReaderPlugin";
 
 /**
  * Plugin which adds an autoplay feature. Useful for kiosk situations.
  */
-jQuery.extend(BookReader.defaultOptions, {
-  enableAutoPlayPlugin: true,
-});
-
-/**
- * @override BookReader.setup
- */
-BookReader.prototype.setup = (function(super_) {
-  return function (options) {
-    super_.call(this, options);
-
-    this.autoTimer = null;
-    this.flipDelay = 5000;
-  };
-})(BookReader.prototype.setup);
+export class AutoplayPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+    /**
+     * @type {number | 'fast' | 'slow'}
+     * How quickly the flip animation should run.
+     **/
+    flipSpeed: 1500,
+    /** How long to pause on each page between flips */
+    flipDelay: 5000,
+    /** Allow controlling the autoflip/speed/delay from the url */
+    urlParams: true,
+  }
 
-/**
- * @override BookReader.init
- */
-BookReader.prototype.init = (function(super_) {
-  return function (options) {
-    super_.call(this, options);
+  timer = null;
 
-    if (!this.options.enableAutoPlayPlugin) return;
+  /** @override */
+  init() {
+    if (!this.options.enabled) return;
 
-    this.bind(BookReader.eventNames.stop, () => this.autoStop());
+    this.br.bind(EVENTS.stop, () => this.stop());
 
-    const urlParams = new URLSearchParams(window.location.search);
-    if (urlParams.get('autoflip') === '1') {
-      this.autoToggle();
+    if (this.options.urlParams) {
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.get('flipSpeed')) {
+        this.options.flipSpeed = parseAnimationSpeed(urlParams.get('flipSpeed')) || this.options.flipSpeed;
+      }
+      if (urlParams.get('flipDelay')) {
+        this.options.flipDelay = parseAnimationSpeed(urlParams.get('flipDelay')) || this.options.flipDelay;
+      }
+      if (urlParams.get('autoflip') === '1') {
+        this.toggle();
+      }
     }
-  };
-})(BookReader.prototype.init);
-
-/**
- * @override BookReader.bindNavigationHandlers
- */
-BookReader.prototype.bindNavigationHandlers = (function(super_) {
-  return function() {
-    super_.call(this);
+  }
 
-    if (!this.options.enableAutoPlayPlugin) return;
+  /** @override */
+  _bindNavigationHandlers() {
+    if (!this.options.enabled) return;
 
-    const jIcons = this.$('.BRicon');
+    const jIcons = this.br.$('.BRicon');
 
-    jIcons.filter('.play').click(() => {
-      this.autoToggle();
+    jIcons.filter('.play').on('click', () => {
+      this.toggle();
       return false;
     });
 
-    jIcons.filter('.pause').click(() => {
-      this.autoToggle();
+    jIcons.filter('.pause').on('click', () => {
+      this.toggle();
       return false;
     });
-  };
-})(BookReader.prototype.bindNavigationHandlers);
-
-/**
- * Starts autoplay mode
- * @param {object} overrides
- * @param {number} overrides.flipSpeed
- * @param {number} overrides.flipDelay
- */
-BookReader.prototype.autoToggle = function(overrides) {
-  if (!this.options.enableAutoPlayPlugin) return;
-
-  const options = $.extend({
-    flipSpeed: this.flipSpeed,
-    flipDelay: this.flipDelay,
-  }, overrides);
-
-  this.flipSpeed = typeof options.flipSpeed === "number" ? options.flipSpeed : this.flipSpeed;
-  this.flipDelay = typeof options.flipDelay === "number" ? options.flipDelay : this.flipDelay;
-  this.trigger(BookReader.eventNames.stop);
-
-  let bComingFrom1up = false;
-  if (this.constMode2up != this.mode) {
-    bComingFrom1up = true;
-    this.switchMode(this.constMode2up);
   }
 
-  if (null == this.autoTimer) {
-    // $$$ Draw events currently cause layout problems when they occur during animation.
-    //     There is a specific problem when changing from 1-up immediately to autoplay in RTL so
-    //     we workaround for now by not triggering immediate animation in that case.
-    //     See https://bugs.launchpad.net/gnubook/+bug/328327
-    if (('rl' == this.pageProgression) && bComingFrom1up) {
-      // don't flip immediately -- wait until timer fires
-    } else {
-      // flip immediately
-      this.next({ triggerStop: false });
+  /**
+   * Starts autoplay mode
+   * @param {object} overrides
+   * @param {number} overrides.flipSpeed
+   * @param {number} overrides.flipDelay
+   */
+  toggle(overrides = null) {
+    if (!this.options.enabled) return;
+
+    Object.assign(this.options, overrides);
+    this.br.trigger(EVENTS.stop);
+
+    let bComingFrom1up = false;
+    if (this.br.constMode2up != this.br.mode) {
+      bComingFrom1up = true;
+      this.br.switchMode(this.br.constMode2up);
     }
 
-    this.$('.play').hide();
-    this.$('.pause').show();
-    this.autoTimer = setInterval(() => {
-      if (this.animating) return;
-
-      if (Math.max(this.twoPage.currentIndexL, this.twoPage.currentIndexR) >= this.book.getNumLeafs() - 1) {
-        this.prev({ triggerStop: false }); // $$$ really what we want?
+    if (null == this.timer) {
+      // $$$ Draw events currently cause layout problems when they occur during animation.
+      //     There is a specific problem when changing from 1-up immediately to autoplay in RTL so
+      //     we workaround for now by not triggering immediate animation in that case.
+      //     See https://bugs.launchpad.net/gnubook/+bug/328327
+      if (('rl' == this.br.pageProgression) && bComingFrom1up) {
+        // don't flip immediately -- wait until timer fires
       } else {
-        this.next({ triggerStop: false });
+        // flip immediately
+        this.br.next({ triggerStop: false, flipSpeed: this.options.flipSpeed });
       }
-    }, this.flipDelay);
-  } else {
-    this.autoStop();
+
+      this.br.$('.play').hide();
+      this.br.$('.pause').show();
+      this.timer = setInterval(() => {
+        if (this.br.animating) return;
+
+        if (Math.max(this.br.twoPage.currentIndexL, this.br.twoPage.currentIndexR) >= this.br.book.getNumLeafs() - 1) {
+          this.br.prev({ triggerStop: false, flipSpeed: this.options.flipSpeed }); // $$$ really what we want?
+        } else {
+          this.br.next({ triggerStop: false, flipSpeed: this.options.flipSpeed });
+        }
+      }, parseAnimationSpeed(this.options.flipDelay));
+    } else {
+      this.stop();
+    }
   }
-};
 
-/**
- * Stop autoplay mode, allowing animations to finish
- */
-BookReader.prototype.autoStop = function() {
-  if (!this.options.enableAutoPlayPlugin) return;
-
-  if (null != this.autoTimer) {
-    clearInterval(this.autoTimer);
-    this.flipSpeed = 'fast';
-    this.$('.pause').hide();
-    this.$('.play').show();
-    this.autoTimer = null;
+  /**
+   * Stop autoplay mode, allowing animations to finish
+   */
+  stop() {
+    if (!this.options.enabled) return;
+
+    if (null != this.timer) {
+      clearInterval(this.timer);
+      this.br.$('.pause').hide();
+      this.br.$('.play').show();
+      this.timer = null;
+    }
   }
-};
+}
+
+const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
+BookReader?.registerPlugin('autoplay', AutoplayPlugin);

package/src/plugins/plugin.iiif.js

@@ -1,17 +1,22 @@
 // @ts-check
+import { BookReaderPlugin } from '../BookReaderPlugin';
+
 const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
 
-export const DEFAULT_OPTIONS = {
-  enabled: true,
-  /** @type {import('@iiif/presentation-3').Manifest | import('@iiif/presentation-2').Manifest} */
-  manifest: null,
-};
+export class IiifPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+    /** @type {import('@iiif/presentation-3').Manifest | import('@iiif/presentation-2').Manifest} */
+    manifest: null,
+  }
 
-class IIIFPlugin {
-  constructor(options = DEFAULT_OPTIONS, optionVariables) {
-    this.options = options;
-    this.optionVariables = optionVariables;
-    this.manifest = options.manifest;
+  setup(options) {
+    super.setup(options);
+    this.manifest = this.options.manifest;
+
+    if (this.options.enabled) {
+      Object.assign(this.br.options, this.load());
+    }
   }
 
   load() {
@@ -133,23 +138,4 @@ function resolveInternationalString(internationalString) {
   return (internationalString[navigator.language] || internationalString[anyLang])[0];
 }
 
-export class BookReaderWithIIIFPlugin extends BookReader {
-  setup(options) {
-    const pluginOpts = Object.assign(
-      {},
-      DEFAULT_OPTIONS,
-      options.plugins.iiif,
-    );
-
-    if (pluginOpts.enabled) {
-      this.iiifPlugin = new IIIFPlugin(pluginOpts, options.vars);
-      // Write this back; this way the plugin is the source of truth, and BR just
-      // contains a reference to it.
-      options.plugins.iiif = this.iiifPlugin.options;
-      Object.assign(options, this.iiifPlugin.load());
-    }
-    return super.setup(options);
-  }
-}
-window.BookReader = BookReaderWithIIIFPlugin;
-export default BookReaderWithIIIFPlugin;
+BookReader?.registerPlugin('iiif', IiifPlugin);

package/src/plugins/plugin.resume.js

@@ -1,3 +1,5 @@
+import { EVENTS } from '../BookReader/events.js';
+import { BookReaderPlugin } from '../BookReaderPlugin.js';
 import * as docCookies from '../util/docCookies.js';
 
 /* global BookReader */
@@ -8,61 +10,62 @@ BookReader.docCookies = docCookies;
 /**
  * Plugin to remember the current page number in a cookie
  */
-jQuery.extend(BookReader.defaultOptions, {
-  enablePageResume: true,
-  /** @type {string|null} eg '/', '/details/id' */
-  resumeCookiePath: null,
-});
+export class ResumePlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+    /** @type {string|null} eg '/', '/details/id' */
+    cookiePath: null,
+  }
 
-/** @override */
-BookReader.prototype.init = (function(super_) {
-  return function() {
-    super_.call(this);
-    if (this.options.enablePageResume) {
-      this.bind(BookReader.eventNames.fragmentChange, () => {
-        const params = this.paramsFromCurrent();
+  /** @override */
+  init() {
+    if (this.options.enabled) {
+      this.br.bind(EVENTS.fragmentChange, () => {
+        const params = this.br.paramsFromCurrent();
         this.updateResumeValue(params.index);
       });
     }
-  };
-})(BookReader.prototype.init);
+  }
 
-/**
- * Gets page resume value, for remembering reader's page
- * Can be overridden for different implementation
- *
- * @return {number|null}
- */
-BookReader.prototype.getResumeValue = function() {
-  const val = BookReader.docCookies.getItem('br-resume');
-  if (val !== null) return parseInt(val);
-  else return null;
-};
+  /**
+   * Gets page resume value, for remembering reader's page
+   * Can be overridden for different implementation
+   *
+   * @return {number|null}
+   */
+  getResumeValue() {
+    const val = BookReader.docCookies.getItem('br-resume');
+    if (val !== null) return parseInt(val);
+    else return null;
+  }
 
-/**
- * Return cookie path using pathname up to /page/... or /mode/...
- * using window.location.pathname for urlPathPart:
- * - matches encoding
- * - ignores querystring part
- * - ignores fragment part (after #)
- * @param {string} urlPathPart - window.location.pathname
- */
-BookReader.prototype.getCookiePath = function(urlPathPart) {
-  return urlPathPart.match('.+?(?=/page/|/mode/|$)')[0];
-};
+  /**
+   * Return cookie path using pathname up to /page/... or /mode/...
+   * using window.location.pathname for urlPathPart:
+   * - matches encoding
+   * - ignores querystring part
+   * - ignores fragment part (after #)
+   * @param {string} urlPathPart - window.location.pathname
+   */
+  getCookiePath(urlPathPart) {
+    return urlPathPart.match('.+?(?=/page/|/mode/|$)')[0];
+  }
 
-/**
- * Sets page resume value, for remembering reader's page
- * Can be overridden for different implementation
- *
- * @param {Number} index leaf index
- * @param {string} [cookieName]
- */
-BookReader.prototype.updateResumeValue = function(index, cookieName) {
-  const ttl = new Date(+new Date + 12096e5); // 2 weeks
-  // For multiple files in item, leave resumeCookiePath blank
-  // It's likely we can remove resumeCookiePath using getCookiePath()
-  const path = this.options.resumeCookiePath
-    || this.getCookiePath(window.location.pathname);
-  BookReader.docCookies.setItem(cookieName || 'br-resume', index, ttl, path, null, false);
-};
+  /**
+   * Sets page resume value, for remembering reader's page
+   * Can be overridden for different implementation
+   *
+   * @param {Number} index leaf index
+   * @param {string} [cookieName]
+   */
+  updateResumeValue(index, cookieName) {
+    const ttl = new Date(+new Date + 12096e5); // 2 weeks
+    // For multiple files in item, leave cookiePath blank
+    // It's likely we can remove cookiePath using getCookiePath()
+    const path = this.options.cookiePath
+      || this.getCookiePath(window.location.pathname);
+    BookReader.docCookies.setItem(cookieName || 'br-resume', index, ttl, path, null, false);
+  }
+}
+
+BookReader?.registerPlugin('resume', ResumePlugin);

package/src/plugins/plugin.text_selection.js

@@ -1,23 +1,13 @@
 //@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';
 /** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
 /** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
 
 const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
 
-export const DEFAULT_OPTIONS = {
-  enabled: true,
-  /** @type {StringWithVars} The URL to fetch the entire DJVU xml. Supports options.vars */
-  fullDjvuXmlUrl: null,
-  /** @type {StringWithVars} The URL to fetch a single page of the DJVU xml. Supports options.vars. Also has {{pageIndex}} */
-  singlePageDjvuXmlUrl: null,
-  /** Whether to fetch the XML as a jsonp */
-  jsonp: false,
-};
-/** @typedef {typeof DEFAULT_OPTIONS} TextSelectionPluginOptions */
-
 /**
  * @template T
  */
@@ -39,30 +29,73 @@ export class Cache {
   }
 }
 
-export class TextSelectionPlugin {
+export class TextSelectionPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+    /** @type {StringWithVars} The URL to fetch the entire DJVU xml. Supports options.vars */
+    fullDjvuXmlUrl: null,
+    /** @type {StringWithVars} The URL to fetch a single page of the DJVU xml. Supports options.vars. Also has {{pageIndex}} */
+    singlePageDjvuXmlUrl: null,
+    /** Whether to fetch the XML as a jsonp */
+    jsonp: false,
+  }
+
+  /**@type {PromiseLike<JQuery<HTMLElement>|undefined>} */
+  djvuPagesPromise = null;
+
+  /** @type {Cache<{index: number, response: any}>} */
+  pageTextCache = new Cache();
+
   /**
-   * @param {'lr' | 'rl'} pageProgression In the future this should be in the ocr file
-   * since a book being right to left doesn't mean the ocr is right to left. But for
-   * now we do make that assumption.
+   * Sometimes there are too many words on a page, and the browser becomes near
+   * unusable. For now don't render text layer for pages with too many words.
    */
-  constructor(options = DEFAULT_OPTIONS, optionVariables, pageProgression = 'lr') {
-    this.options = options;
-    this.optionVariables = optionVariables;
-    /**@type {PromiseLike<JQuery<HTMLElement>|undefined>} */
-    this.djvuPagesPromise = null;
+  maxWordRendered = 2500;
+
+  /**
+   * @param {import('../BookReader.js').default} br
+   */
+  constructor(br) {
+    super(br);
+    // In the future this should be in the ocr file
+    // since a book being right to left doesn't mean the ocr is right to left. But for
+    // now we do make that assumption.
     /** Whether the book is right-to-left */
-    this.rtl = pageProgression === 'rl';
+    this.rtl = this.br.pageProgression === 'rl';
+    this.selectionObserver = new SelectionObserver('.BRtextLayer', this._onSelectionChange);
+  }
 
-    /** @type {Cache<{index: number, response: any}>} */
-    this.pageTextCache = new Cache();
+  /** @override */
+  init() {
+    if (!this.options.enabled) return;
 
-    /**
-     * Sometimes there are too many words on a page, and the browser becomes near
-     * unusable. For now don't render text layer for pages with too many words.
-     */
-    this.maxWordRendered = 2500;
+    this.loadData();
 
-    this.selectionObserver = new SelectionObserver('.BRtextLayer', this._onSelectionChange);
+    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();
+  }
+
+  /**
+   * @override
+   * @param {PageContainer} pageContainer
+   * @returns {PageContainer}
+   */
+  _configurePageContainer(pageContainer) {
+    // Disable if thumb mode; it's too janky
+    // .page can be null for "pre-cover" region
+    if (this.br.mode !== this.br.constModeThumb && pageContainer.page) {
+      this.createTextLayer(pageContainer);
+    }
+    return pageContainer;
   }
 
   /**
@@ -79,18 +112,16 @@ export class TextSelectionPlugin {
     }
   }
 
-  init() {
-    this.selectionObserver.attach();
-
+  loadData() {
     // Only fetch the full djvu xml if the single page url isn't there
     if (this.options.singlePageDjvuXmlUrl) return;
     this.djvuPagesPromise = $.ajax({
       type: "GET",
-      url: applyVariables(this.options.fullDjvuXmlUrl, this.optionVariables),
+      url: applyVariables(this.options.fullDjvuXmlUrl, this.br.options.vars),
       dataType: this.options.jsonp ? "jsonp" : "html",
       cache: true,
       xhrFields: {
-        withCredentials: window.br.protected,
+        withCredentials: this.br.protected,
       },
       error: (e) => undefined,
     }).then((res) => {
@@ -115,11 +146,11 @@ export class TextSelectionPlugin {
       }
       const res = await $.ajax({
         type: "GET",
-        url: applyVariables(this.options.singlePageDjvuXmlUrl, this.optionVariables, { pageIndex: index }),
+        url: applyVariables(this.options.singlePageDjvuXmlUrl, this.br.options.vars, { pageIndex: index }),
         dataType: this.options.jsonp ? "jsonp" : "html",
         cache: true,
         xhrFields: {
-          withCredentials: window.br.protected,
+          withCredentials: this.br.protected,
         },
         error: (e) => undefined,
       });
@@ -410,46 +441,7 @@ export class TextSelectionPlugin {
   }
 }
 
-export class BookreaderWithTextSelection extends BookReader {
-  init() {
-    const options = Object.assign({}, DEFAULT_OPTIONS, this.options.plugins.textSelection);
-    if (options.enabled) {
-      this.textSelectionPlugin = new TextSelectionPlugin(options, this.options.vars, this.pageProgression);
-      // Write this back; this way the plugin is the source of truth, and BR just
-      // contains a reference to it.
-      this.options.plugins.textSelection = options;
-      this.textSelectionPlugin.init();
-
-      new SelectionObserver('.BRtextLayer', (selectEvent) => {
-        // Track how often selection is used
-        if (selectEvent == 'started') {
-          this._plugins.archiveAnalytics?.sendEvent('BookReader', 'SelectStart');
-
-          // Set a class on the page to avoid hiding it when zooming/etc
-          this.refs.$br.find('.BRpagecontainer--hasSelection').removeClass('BRpagecontainer--hasSelection');
-          $(window.getSelection().anchorNode).closest('.BRpagecontainer').addClass('BRpagecontainer--hasSelection');
-        }
-      }).attach();
-    }
-
-    super.init();
-  }
-
-  /**
-   * @param {number} index
-   */
-  _createPageContainer(index) {
-    const pageContainer = super._createPageContainer(index);
-    // Disable if thumb mode; it's too janky
-    // .page can be null for "pre-cover" region
-    if (this.mode !== this.constModeThumb && pageContainer.page) {
-      this.textSelectionPlugin?.createTextLayer(pageContainer);
-    }
-    return pageContainer;
-  }
-}
-window.BookReader = BookreaderWithTextSelection;
-export default BookreaderWithTextSelection;
+BookReader?.registerPlugin('textSelection', TextSelectionPlugin);
 
 
 /**

package/src/plugins/tts/AbstractTTSEngine.js

@@ -6,8 +6,7 @@ import { hasLocalStorage } from './utils.js';
 /**
  * @export
  * @typedef {Object} TTSEngineOptions
- * @property {String} server
- * @property {String} bookPath
+ * @property {import('@/src/util/strings.js').StringWithVars} pageChunkUrl
  * @property {ISO6391} bookLanguage
  * @property {Function} onLoadingStart
  * @property {Function} onLoadingComplete
@@ -85,8 +84,7 @@ export default class AbstractTTSEngine {
     this.opts.onLoadingStart();
 
     this._chunkIterator = new PageChunkIterator(numLeafs, leafIndex, {
-      server: this.opts.server,
-      bookPath: this.opts.bookPath,
+      pageChunkUrl: this.opts.pageChunkUrl,
       pageBufferSize: 5,
     });
 

package/src/plugins/tts/PageChunk.js

@@ -1,3 +1,5 @@
+import { applyVariables } from "../../util/strings.js";
+
 /**
  * Class to manage a 'chunk' (approximately a paragraph) of text on a page.
  */
@@ -16,24 +18,18 @@ export default class PageChunk {
   }
 
   /**
-   * @param {string} server
-   * @param {string} bookPath
+   * @param {import('@/src/util/strings.js').StringWithVars} pageChunkUrl
    * @param {number} leafIndex
    * @return {Promise<PageChunk[]>}
    */
-  static async fetch(server, bookPath, leafIndex) {
+  static async fetch(pageChunkUrl, leafIndex) {
     const chunks = await $.ajax({
       type: 'GET',
-      url: `https://${server}/BookReader/BookReaderGetTextWrapper.php`,
+      url: applyVariables(pageChunkUrl, { pageIndex: leafIndex }),
       cache: true,
       xhrFields: {
         withCredentials: window.br.protected,
       },
-      data: {
-        path: `${bookPath}_djvu.xml`,
-        page: leafIndex,
-        callback: 'false',
-      },
     });
     return PageChunk._fromTextWrapperResponse(leafIndex, chunks);
   }