Migrate AutoplayPlugin to BookReaderPlugin

src/BookReader.js

@@ -68,6 +68,8 @@
 BookReader.PLUGINS = {
   /** @type {typeof import('./plugins/plugin.archive_analytics.js').ArchiveAnalyticsPlugin | null}*/
   archiveAnalytics: null,
+  /** @type {typeof import('./plugins/plugin.autoplay.js').AutoplayPlugin | null}*/
+  autoplay: null,
   /** @type {typeof import('./plugins/plugin.text_selection.js').TextSelectionPlugin | null}*/
   textSelection: null,
 };
@@ -168,11 +170,7 @@
   this.displayedIndices = [];
 
   this.animating = false;
-  this.flipSpeed = typeof options.flipSpeed === 'number' ? options.flipSpeed : {
-    'fast': 200,
-    'slow': 600,
-  }[options.flipSpeed] || 400;
-  this.flipDelay = options.flipDelay;
+  this.flipSpeed = utils.parseAnimationSpeed(options.flipSpeed) || 400;
 
   /**
      * Represents the first displayed index
@@ -261,6 +259,7 @@
   // Construct the usual suspects 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,
     textSelection: BookReader.PLUGINS.textSelection ? new BookReader.PLUGINS.textSelection(this) : null,
   };
 
@@ -1343,24 +1342,42 @@
   }
 };
 
-BookReader.prototype.next = function({triggerStop = true} = {}) {
+/**
+ * @param {object} options
+ * @param {boolean} [options.triggerStop = true]
+ * @param {number | 'fast' | 'slow'} [options.flipSpeed]
+ */
+BookReader.prototype.next = function({
+  triggerStop = true,
+  flipSpeed = null,
+} = {}) {
   if (this.constMode2up == this.mode) {
     if (triggerStop) this.trigger(BookReader.eventNames.stop);
-    this._modes.mode2Up.mode2UpLit.flipAnimation('next');
+    flipSpeed = utils.parseAnimationSpeed(flipSpeed) || this.flipSpeed;
+    this._modes.mode2Up.mode2UpLit.flipAnimation('next', {flipSpeed});
   } else {
     if (this.firstIndex < this.book.getNumLeafs() - 1) {
       this.jumpToIndex(this.firstIndex + 1);
     }
   }
 };
 
-BookReader.prototype.prev = function({triggerStop = true} = {}) {
+/**
+ * @param {object} options
+ * @param {boolean} [options.triggerStop = true]
+ * @param {number | 'fast' | 'slow'} [options.flipSpeed]
+ */
+BookReader.prototype.prev = function({
+  triggerStop = true,
+  flipSpeed = null,
+} = {}) {
   const isOnFrontPage = this.firstIndex < 1;
   if (isOnFrontPage) return;
 
   if (this.constMode2up == this.mode) {
     if (triggerStop) this.trigger(BookReader.eventNames.stop);
-    this._modes.mode2Up.mode2UpLit.flipAnimation('prev');
+    flipSpeed = utils.parseAnimationSpeed(flipSpeed) || this.flipSpeed;
+    this._modes.mode2Up.mode2UpLit.flipAnimation('prev', {flipSpeed});
   } else {
     if (this.firstIndex >= 1) {
       this.jumpToIndex(this.firstIndex - 1);
@@ -1545,6 +1562,11 @@
         self.$('.BRnavCntl').animate({opacity:.75},250);
       }
     });
+
+  // Call _bindNavigationHandlers on the plugins
+  for (const plugin of Object.values(this._plugins)) {
+    plugin._bindNavigationHandlers();
+  }
 };
 
 /**************************/

src/BookReader/Mode2UpLit.js

@@ -493,13 +493,14 @@
   /**
    * @param {'left' | 'right' | 'next' | 'prev' | PageIndex | PageModel | {left: PageModel | null, right: PageModel | null}} nextSpread
    */
-  async flipAnimation(nextSpread, { animate = true } = {}) {
+  async flipAnimation(nextSpread, { animate = true, flipSpeed = this.flipSpeed } = {}) {
     const curSpread = (this.pageLeft || this.pageRight)?.spread;
     if (!curSpread) {
       // Nothings been actually rendered yet! Will be corrected during initFirstRender
       return;
     }
 
+    flipSpeed = flipSpeed || this.flipSpeed; // Handle null
     nextSpread = this.parseNextSpread(nextSpread);
     if (this.activeFlip || !nextSpread) return;
 
@@ -559,7 +560,7 @@
 
       /** @type {KeyframeAnimationOptions} */
       const animationStyle = {
-        duration: this.flipSpeed + this.activeFlip.pagesFlippingCount,
+        duration: flipSpeed + this.activeFlip.pagesFlippingCount,
         easing: 'ease-in',
         fill: 'none',
       };

src/BookReader/options.js

@@ -143,6 +143,8 @@ export const DEFAULT_OPTIONS = {
   plugins: {
     /** @type {import('../plugins/plugin.archive_analytics.js').ArchiveAnalyticsPlugin['options']}*/
     archiveAnalytics: null,
+    /** @type {import('../plugins/plugin.autoplay.js').AutoplayPlugin['options']}*/
+    autoplay: null,
     /** @type {import('../plugins/plugin.text_selection.js').TextSelectionPlugin['options']} */
     textSelection: null,
   },

src/BookReader/utils.js

@@ -288,3 +288,13 @@ export function promisifyEvent(target, eventType) {
 export function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
 }
+
+/**
+ * @param {number | 'fast' | 'slow' | string} speed
+ * Parsing of the jquery animation speed; see https://api.jquery.com/animate/
+ */
+export function parseAnimationSpeed(speed) {
+  if (speed === 'slow') return 600;
+  if (speed === 'fast') return 200;
+  return parseInt(speed, 10);
+}

src/BookReaderPlugin.js

@@ -33,4 +33,7 @@ export class BookReaderPlugin {
    */
   _configurePageContainer(pageContainer) {
   }
+
+  /** @abstract @protected */
+  _bindNavigationHandlers() {}
 }

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);

src/plugins/tts/plugin.tts.js

@@ -206,7 +206,7 @@ BookReader.prototype.initNavbar = (function (super_) {
 // ttsToggle()
 //______________________________________________________________________________
 BookReader.prototype.ttsToggle = function () {
-  if (this.autoStop) this.autoStop();
+  this._plugins.autoplay?.stop();
   if (this.ttsEngine.playing) {
     this.ttsStop();
   } else {

src/plugins/url/plugin.url.js

@@ -106,7 +106,7 @@
     this.trigger(BookReader.eventNames.stop);
     if (this.animating) {
       // Queue change if animating
-      if (this.autoStop) this.autoStop();
+      this._plugins.autoplay?.stop();
       this.animationFinishedCallback = updateParams;
     } else {
       // update immediately