@internetarchive/bookreader 5.0.0-9-multiple-files → 5.0.0-90

package/src/BookReader.js

@@ -19,31 +19,21 @@ This file is part of BookReader.
     The BookReader source is hosted at http://github.com/internetarchive/bookreader/
 
 */
-// effect.js gives acces to extra easing function (e.g. easeInOutExpo)
-import 'jquery-ui/ui/effect.js';
-
 // Needed by touch-punch
 import 'jquery-ui/ui/widget.js';
 import 'jquery-ui/ui/widgets/mouse.js';
 import 'jquery-ui-touch-punch';
 
-import './dragscrollable-br.js';
 import PACKAGE_JSON from '../package.json';
 import * as utils from './BookReader/utils.js';
 import { exposeOverrideable } from './BookReader/utils/classes.js';
-import { Navbar, getNavPageNumHtml } from './BookReader/Navbar/Navbar.js';
-import { DEFAULT_OPTIONS } from './BookReader/options.js';
+import { Navbar } from './BookReader/Navbar/Navbar.js';
+import { DEFAULT_OPTIONS, OptionsParseError } from './BookReader/options.js';
 /** @typedef {import('./BookReader/options.js').BookReaderOptions} BookReaderOptions */
 /** @typedef {import('./BookReader/options.js').ReductionFactor} ReductionFactor */
 /** @typedef {import('./BookReader/BookModel.js').PageIndex} PageIndex */
 import { EVENTS } from './BookReader/events.js';
-import { DebugConsole } from './BookReader/DebugConsole.js';
-import {
-  Toolbar,
-  blankInfoDiv,
-  blankShareDiv,
-  createPopup,
-} from './BookReader/Toolbar/Toolbar.js';
+import { Toolbar } from './BookReader/Toolbar/Toolbar.js';
 import { BookModel } from './BookReader/BookModel.js';
 import { Mode1Up } from './BookReader/Mode1Up.js';
 import { Mode2Up } from './BookReader/Mode2Up.js';
@@ -52,10 +42,6 @@ import { ImageCache } from './BookReader/ImageCache.js';
 import { PageContainer } from './BookReader/PageContainer.js';
 import { NAMED_REDUCE_SETS } from './BookReader/ReduceSet';
 
-if (location.toString().indexOf('_debugShowConsole=true') != -1) {
-  $(() => new DebugConsole().init());
-}
-
 /**
  * BookReader
  * @param {BookReaderOptions} options
@@ -76,6 +62,33 @@ BookReader.constMode1up = 1;
 BookReader.constMode2up = 2;
 /** thumbnails view */
 BookReader.constModeThumb = 3;
+
+// Although this can actualy have any BookReaderPlugin subclass as value, we
+// hardcode the known plugins here for type checking
+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.resume.js').ResumePlugin | null}*/
+  resume: null,
+  /** @type {typeof import('./plugins/plugin.text_selection.js').TextSelectionPlugin | null}*/
+  textSelection: null,
+  /** @type {typeof import('./plugins/tts/plugin.tts.js').TtsPlugin | null}*/
+  tts: null,
+};
+
+/**
+ * @param {string} pluginName
+ * @param {typeof import('./BookReaderPlugin.js').BookReaderPlugin} plugin
+ */
+BookReader.registerPlugin = function(pluginName, plugin) {
+  if (BookReader.PLUGINS[pluginName]) {
+    console.warn(`Plugin ${pluginName} already registered. Overwriting.`);
+  }
+  BookReader.PLUGINS[pluginName] = plugin;
+};
+
 /** image cache */
 BookReader.imageCache = null;
 
@@ -103,6 +116,38 @@ BookReader.prototype.setup = function(options) {
   // Store the options used to setup bookreader
   this.options = options;
 
+  // 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,
+    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,
+  };
+
+  // Delete anything that's null
+  for (const [pluginName, plugin] of Object.entries(this._plugins)) {
+    if (!plugin) delete this._plugins[pluginName];
+  }
+
+  // Now construct the rest of the plugins
+  for (const [pluginName, PluginClass] of Object.entries(BookReader.PLUGINS)) {
+    if (this._plugins[pluginName] || !PluginClass) continue;
+    this._plugins[pluginName] = new PluginClass(this);
+  }
+
+  // And call setup on them
+  for (const [pluginName, plugin] of Object.entries(this._plugins)) {
+    try {
+      plugin.setup(this.options.plugins?.[pluginName] ?? {});
+      // Write the options back; this way the plugin is the source of truth,
+      // and BR just contains a reference to it.
+      this.options.plugins[pluginName] = plugin.options;
+    } catch (e) {
+      console.error(`Error setting up plugin ${pluginName}`, e);
+    }
+  }
+
   /** @type {number} @deprecated some past iterations set this */
   this.numLeafs = undefined;
 
@@ -152,24 +197,16 @@ BookReader.prototype.setup = function(options) {
   this.ui = options.ui;
   this.uiAutoHide = options.uiAutoHide;
 
-  this.thumbWidth = 100; // will be overridden during prepareThumbnailView
+  this.thumbWidth = 100; // will be overridden during this._modes.modeThumb.prepare();
   this.thumbRowBuffer = options.thumbRowBuffer;
   this.thumbColumns = options.thumbColumns;
   this.thumbMaxLoading = options.thumbMaxLoading;
   this.thumbPadding = options.thumbPadding;
   this.displayedRows = [];
-
   this.displayedIndices = [];
-  /** @deprecated Unused; will be remove in v5 */
-  this.imgs = {};
-  /** @deprecated No longer used; will be remove in v5 */
-  this.prefetchedImgs = {}; //an object with numeric keys corresponding to page index, reduce
 
   this.animating = false;
-  this.flipSpeed = options.flipSpeed;
-  this.flipDelay = options.flipDelay;
-  this.twoPagePopUp = null;
-  this.leafEdgeTmp  = null;
+  this.flipSpeed = utils.parseAnimationSpeed(options.flipSpeed) || 400;
 
   /**
      * Represents the first displayed index
@@ -178,8 +215,7 @@ BookReader.prototype.setup = function(options) {
      * @property {number|null} firstIndex
      */
   this.firstIndex = null;
-  this.lastDisplayableIndex2up = null;
-  this.isFullscreenActive = false;
+  this.isFullscreenActive = options.startFullscreen || false;
   this.lastScroll = null;
 
   this.showLogo = options.showLogo;
@@ -212,26 +248,22 @@ BookReader.prototype.setup = function(options) {
 
   // Assign the data methods
   this.data = options.data;
-  if (options.getNumLeafs) BookReader.prototype.getNumLeafs = options.getNumLeafs;
-  if (options.getPageWidth) BookReader.prototype.getPageWidth = options.getPageWidth;
-  if (options.getPageHeight) BookReader.prototype.getPageHeight = options.getPageHeight;
-  if (options.getPageURI) BookReader.prototype.getPageURI = options.getPageURI;
-  if (options.getPageSide) BookReader.prototype.getPageSide = options.getPageSide;
-  if (options.getPageNum) BookReader.prototype.getPageNum = options.getPageNum;
-  if (options.getPageProp) BookReader.prototype.getPageProp = options.getPageProp;
-  if (options.getSpreadIndices) BookReader.prototype.getSpreadIndices = options.getSpreadIndices;
-  if (options.leafNumToIndex) BookReader.prototype.leafNumToIndex = options.leafNumToIndex;
 
   /** @type {{[name: string]: JQuery}} */
   this.refs = {};
 
-  /**
-   * @private (for now) Models are largely state storing classes. This might be too much
-   * granularity, but time will tell!
-   */
-  this._models = {
-    book: new BookModel(this),
-  };
+  /** The book being displayed in BookReader*/
+  this.book = new BookModel(this);
+
+  if (options.getNumLeafs) this.book.getNumLeafs = options.getNumLeafs.bind(this);
+  if (options.getPageWidth) this.book.getPageWidth = options.getPageWidth.bind(this);
+  if (options.getPageHeight) this.book.getPageHeight = options.getPageHeight.bind(this);
+  if (options.getPageURI) this.book.getPageURI = options.getPageURI.bind(this);
+  if (options.getPageSide) this.book.getPageSide = options.getPageSide.bind(this);
+  if (options.getPageNum) this.book.getPageNum = options.getPageNum.bind(this);
+  if (options.getPageProp) this.book.getPageProp = options.getPageProp.bind(this);
+  if (options.getSpreadIndices) this.book.getSpreadIndices = options.getSpreadIndices.bind(this);
+  if (options.leafNumToIndex) this.book.leafNumToIndex = options.leafNumToIndex.bind(this);
 
   /**
    * @private Components are 'subchunks' of bookreader functionality, usually UI related
@@ -245,14 +277,14 @@ BookReader.prototype.setup = function(options) {
   };
 
   this._modes = {
-    mode1Up: new Mode1Up(this, this._models.book),
-    mode2Up: new Mode2Up(this, this._models.book),
-    modeThumb: new ModeThumb(this, this._models.book),
+    mode1Up: new Mode1Up(this, this.book),
+    mode2Up: new Mode2Up(this, this.book),
+    modeThumb: new ModeThumb(this, this.book),
   };
 
   /** Stores classes which we want to expose (selectively) some methods as overridable */
   this._overrideable = {
-    '_models.book': this._models.book,
+    'book': this.book,
     '_components.navbar': this._components.navbar,
     '_components.toolbar': this._components.toolbar,
     '_modes.mode1Up': this._modes.mode1Up,
@@ -261,21 +293,55 @@ BookReader.prototype.setup = function(options) {
   };
 
   /** Image cache for general image fetching */
-  this.imageCache = new ImageCache(this._models.book, {
+  this.imageCache = new ImageCache(this.book, {
     useSrcSet: this.options.useSrcSet,
     reduceSet: this.reduceSet,
+    renderPageURI: options.renderPageURI.bind(this),
   });
+
+  /**
+   * Flag if BookReader has "focus" for keyboard shortcuts
+   * Initially true, set to false when:
+   * - BookReader scrolled out of view
+   * Set to true when:
+   * - BookReader scrolled into view
+   */
+  this.hasKeyFocus = true;
 };
 
-/** @deprecated unused outside Mode2Up */
-Object.defineProperty(BookReader.prototype, 'leafEdgeL', {
-  get() { return this._modes.mode2Up.leafEdgeL; },
-  set(newVal) { this._modes.mode2Up.leafEdgeL = newVal; }
-});
-/** @deprecated unused outside Mode2Up */
-Object.defineProperty(BookReader.prototype, 'leafEdgeR', {
-  get() { return this._modes.mode2Up.leafEdgeR; },
-  set(newVal) { this._modes.mode2Up.leafEdgeR = newVal; }
+/**
+ * Get all the HTML Elements that are being/can be rendered.
+ * Includes cached elements which might be rendered again.
+ */
+BookReader.prototype.getActivePageContainerElements = function() {
+  let containerEls = Object.values(this._modes.mode2Up.mode2UpLit.pageContainerCache).map(pc => pc.$container[0])
+    .concat(Object.values(this._modes.mode1Up.mode1UpLit.pageContainerCache).map(pc => pc.$container[0]));
+  if (this.mode == this.constModeThumb) {
+    containerEls = containerEls.concat(this.$('.BRpagecontainer').toArray());
+  }
+  return containerEls;
+};
+
+/**
+ * Get the HTML Elements for the rendered page. Note there can be more than one, since
+ * (at least as of writing) different modes can maintain different caches.
+ * @param {PageIndex} pageIndex
+ */
+BookReader.prototype.getActivePageContainerElementsForIndex = function(pageIndex) {
+  return [
+    this._modes.mode2Up.mode2UpLit.pageContainerCache[pageIndex]?.$container?.[0],
+    this._modes.mode1Up.mode1UpLit.pageContainerCache[pageIndex]?.$container?.[0],
+    ...(this.mode == this.constModeThumb ? this.$(`.pagediv${pageIndex}`).toArray() : []),
+  ].filter(x => x);
+};
+
+Object.defineProperty(BookReader.prototype, 'activeMode', {
+  /** @return {Mode1Up | Mode2Up | ModeThumb} */
+  get() { return {
+    1: this._modes.mode1Up,
+    2: this._modes.mode2Up,
+    3: this._modes.modeThumb,
+  }[this.mode]; },
 });
 
 /**
@@ -290,15 +356,15 @@ BookReader.util = utils;
  * @private
  */
 BookReader.prototype.extendParams = function(params, newParams) {
-  var modifiedNewParams = $.extend({}, newParams);
+  const modifiedNewParams = $.extend({}, newParams);
   if ('undefined' != typeof(modifiedNewParams.page)) {
-    var pageIndex = this._models.book.parsePageString(modifiedNewParams.page);
+    const pageIndex = this.book.parsePageString(modifiedNewParams.page);
     if (!isNaN(pageIndex))
       modifiedNewParams.index = pageIndex;
     delete modifiedNewParams.page;
   }
   $.extend(params, modifiedNewParams);
-}
+};
 
 /**
  * Parses params from from various initialization contexts (url, cookie, options)
@@ -306,7 +372,7 @@ BookReader.prototype.extendParams = function(params, newParams) {
  * @return {object} the parsed params
  */
 BookReader.prototype.initParams = function() {
-  var params = {};
+  const params = {};
   // Flag initializing for updateFromParams()
   params.init = true;
 
@@ -323,8 +389,8 @@ BookReader.prototype.initParams = function() {
 
   // If we have a title leaf, use that as the default instead of index 0,
   // but only use as default if book has a few pages
-  if ('undefined' != typeof(this.titleLeaf) && this._models.book.getNumLeafs() > 2) {
-    params.index = this._models.book.leafNumToIndex(this.titleLeaf);
+  if ('undefined' != typeof(this.titleLeaf) && this.book.getNumLeafs() > 2) {
+    params.index = this.book.leafNumToIndex(this.titleLeaf);
   } else {
     params.index = 0;
   }
@@ -339,9 +405,9 @@ BookReader.prototype.initParams = function() {
   }
 
   // Check for Resume plugin
-  if (this.options.enablePageResume) {
+  if (this._plugins.resume?.options.enabled) {
     // Check cookies
-    const val = this.getResumeValue();
+    const val = this._plugins.resume.getResumeValue();
     if (val !== null) {
       // If page index different from default
       if (params.index !== val) {
@@ -355,7 +421,7 @@ BookReader.prototype.initParams = function() {
   // Check for URL plugin
   if (this.options.enableUrlPlugin) {
     // Params explicitly set in URL take precedence over all other methods
-    var urlParams = this.paramsFromFragment(this.urlReadFragment());
+    let urlParams = this.paramsFromFragment(this.urlReadFragment());
 
     // Get params if hash fragment available with 'history' urlMode
     const hasHashURL = !Object.keys(urlParams).length && this.urlReadHashFragment();
@@ -377,7 +443,7 @@ BookReader.prototype.initParams = function() {
   // Check for Search plugin
   if (this.options.enableSearch) {
     // Go to first result only if no default or URL page
-    this.goToFirstResult = !params.pageFound
+    this.options.goToFirstResult = !params.pageFound;
 
     // If initialSearchTerm not set
     if (!this.options.initialSearchTerm) {
@@ -389,7 +455,7 @@ BookReader.prototype.initParams = function() {
       } else {
         // If we have a query string: q=[term]
         const searchParams = new URLSearchParams(this.readQueryString());
-        const searchTerm = searchParams.get('q')
+        const searchTerm = searchParams.get('q');
         if (searchTerm) {
           this.options.initialSearchTerm = utils.decodeURIComponentPlus(searchTerm);
         }
@@ -401,21 +467,21 @@ BookReader.prototype.initParams = function() {
   this.suppressFragmentChange = !params.fragmentChange;
 
   return params;
-}
+};
 
 /**
  * Allow mocking of window.location.search
  */
 BookReader.prototype.getLocationSearch = function () {
   return window.location.search;
-}
+};
 
 /**
  * Allow mocking of window.location.hash
  */
 BookReader.prototype.getLocationHash = function () {
   return window.location.hash;
-}
+};
 
 /**
  * Return URL or fragment querystring
@@ -428,37 +494,63 @@ BookReader.prototype.readQueryString = function() {
   const hash = this.getLocationHash();
   const found = hash.search(/\?\w+=/);
   return found > -1 ? hash.slice(found) : '';
-}
+};
 
 /**
  * Determines the initial mode for starting if a mode is not already
  * present in the params argument
  * @param {object} params
- * @return {number} the mode
+ * @return {1 | 2 | 3} the initial mode
  */
 BookReader.prototype.getInitialMode = function(params) {
-  // Use params or browser width to set view mode
-  var windowWidth = $(window).width();
-  var nextMode;
-  if ('undefined' != typeof(params.mode)) {
-    nextMode = params.mode;
-  } else if (this.ui == 'full'
-          && this.enableMobileNav
-          && this.isFullscreenActive
-          && windowWidth <= this.onePageMinBreakpoint
-  ) {
-    // In full mode, we set the default based on width
-    nextMode = this.constMode1up;
+  // if mobile breakpoint, we always show this.constMode1up mode
+  const windowWidth = $(window).width();
+  const isMobile = windowWidth && windowWidth <= this.onePageMinBreakpoint;
+
+  let initialMode;
+  if (params.mode) {
+    initialMode = params.mode;
+  } else if (isMobile) {
+    initialMode = this.constMode1up;
   } else {
-    nextMode = this.constMode2up;
+    initialMode = this.constMode2up;
   }
 
-  if (!this.canSwitchToMode(nextMode)) {
-    nextMode = this.constMode1up;
+  if (!this.canSwitchToMode(initialMode)) {
+    initialMode = this.constMode1up;
+  }
+
+  // override defaults mode via `options.defaults` metadata
+  if (this.options.defaults) {
+    try {
+      initialMode = _modeStringToNumber(this.options.defaults);
+    } catch (e) {
+      // Can ignore this error
+    }
   }
-  return nextMode;
+
+  return initialMode;
 };
 
+/**
+ * Converts a mode string to a the mode numeric constant
+ * @param {'mode/1up'|'mode/2up'|'mode/thumb'} modeString
+ * @return {1 | 2 | 3}
+ */
+export function _modeStringToNumber(modeString) {
+  const MAPPING = {
+    'mode/1up': 1,
+    'mode/2up': 2,
+    'mode/thumb': 3,
+  };
+
+  if (!(modeString in MAPPING)) {
+    throw new OptionsParseError(`Invalid mode string: ${modeString}`);
+  }
+
+  return MAPPING[modeString];
+}
+
 /**
  * This is called by the client to initialize BookReader.
  * It renders onto the DOM. It should only be called once.
@@ -467,7 +559,7 @@ BookReader.prototype.init = function() {
   this.init.initComplete = false;
   this.pageScale = this.reduce; // preserve current reduce
 
-  var params = this.initParams();
+  const params = this.initParams();
 
   this.firstIndex = params.index ? params.index : 0;
 
@@ -497,19 +589,21 @@ BookReader.prototype.init = function() {
   // Explicitly ensure this.mode exists for initNavbar() below
   this.mode = params.mode;
 
-  if (this.ui == "embed" && this.options.showNavbar) {
-    this.initEmbedNavbar();
-  } else {
-    if (this.options.showToolbar) {
-      this.initToolbar(this.mode, this.ui); // Build inside of toolbar div
-    }
-    if (this.options.showNavbar) {
-      this.initNavbar();
+  // Display Navigation
+  if (this.options.showToolbar) {
+    this.initToolbar(this.mode, this.ui); // Build inside of toolbar div
+  }
+  if (this.options.showNavbar) { // default navigation
+    const $navBar = this.initNavbar();
+
+    // extend navbar with plugins
+    for (const plugin of Object.values(this._plugins)) {
+      plugin.extendNavBar($navBar);
     }
   }
 
   // Switch navbar controls on mobile/desktop
-  this.switchNavbarControls();
+  this._components.navbar.switchNavbarControls();
 
   this.resizeBRcontainer();
   this.updateFromParams(params);
@@ -521,17 +615,17 @@ BookReader.prototype.init = function() {
   this.setupKeyListeners();
 
   this.lastScroll = (new Date().getTime());
-  this.refs.$brContainer.bind('scroll', this, function(e) {
+  this.refs.$brContainer.on('scroll', this, function(e) {
     // Note, this scroll event fires for both user, and js generated calls
     // It is functioning in some cases as the primary triggerer for rendering
     e.data.lastScroll = (new Date().getTime());
-    if (e.data.constMode2up != e.data.mode) {
+    if (e.data.constModeThumb == e.data.mode) {
       e.data.drawLeafsThrottled();
     }
   });
 
   if (this.options.autoResize) {
-    $(window).bind('resize', this, function(e) {
+    $(window).on('resize', this, function(e) {
       e.data.resize();
     });
     $(window).on("orientationchange", this, function(e) {
@@ -548,15 +642,27 @@ BookReader.prototype.init = function() {
     this.suppressFragmentChange = false;
   }
 
+  if (this.options.startFullscreen) {
+    this.enterFullscreen(true);
+  }
+
+  // Init plugins
+  for (const [pluginName, plugin] of Object.entries(this._plugins)) {
+    try {
+      plugin.init();
+    }
+    catch (e) {
+      console.error(`Error initializing plugin ${pluginName}`, e);
+    }
+  }
+
   this.init.initComplete = true;
   this.trigger(BookReader.eventNames.PostInit);
 
   // Must be called after this.init.initComplete set to true to allow
   // BookReader.prototype.resize to run.
-  if (this.options.startFullscreen) {
-    this.toggleFullscreen();
-  }
-}
+
+};
 
 /**
  * @param {EVENTS} name
@@ -564,7 +670,6 @@ BookReader.prototype.init = function() {
  */
 BookReader.prototype.trigger = function(name, props = this) {
   const eventName = 'BookReader:' + name;
-  $(document).trigger(eventName, props);
 
   utils.polyfillCustomEvent(window);
   window.dispatchEvent(new CustomEvent(eventName, {
@@ -572,14 +677,15 @@ BookReader.prototype.trigger = function(name, props = this) {
     composed: true,
     detail: { props },
   }));
+  $(document).trigger(eventName, props);
 };
 
 BookReader.prototype.bind = function(name, callback) {
-  $(document).bind('BookReader:' + name, callback);
+  $(document).on('BookReader:' + name, callback);
 };
 
 BookReader.prototype.unbind = function(name, callback) {
-  $(document).unbind('BookReader:' + name, callback);
+  $(document).off('BookReader:' + name, callback);
 };
 
 /**
@@ -591,135 +697,147 @@ BookReader.prototype.resize = function() {
   this.resizeBRcontainer();
 
   // Switch navbar controls on mobile/desktop
-  this.switchNavbarControls();
+  this._components.navbar.switchNavbarControls();
 
   if (this.constMode1up == this.mode) {
     if (this.onePage.autofit != 'none') {
-      this.resizePageView1up();
+      this._modes.mode1Up.resizePageView();
       this.centerPageView();
-      if (this.enableSearch) this.updateSearchHilites(); //deletes highlights but does not call remove()
     } else {
       this.centerPageView();
       this.displayedIndices = [];
-      if (this.enableSearch) this.updateSearchHilites(); //deletes highlights but does not call remove()
       this.drawLeafsThrottled();
     }
   } else if (this.constModeThumb == this.mode) {
-    this.prepareThumbnailView();
+    this._modes.modeThumb.prepare();
   } else {
-    // We only need to prepare again in autofit (size of spread changes)
-    if (this.twoPage.autofit) {
-      // most common path, esp. for archive.org books
-      this.prepareTwoPageView();
-    } else {
-      // used when zoomed in
-      // Re-center if the scrollbars have disappeared
-      var center = this.twoPageGetViewCenter();
-      var doRecenter = false;
-      if (this.twoPage.totalWidth < this.refs.$brContainer.prop('clientWidth')) {
-        center.percentageX = 0.5;
-        doRecenter = true;
-      }
-      if (this.twoPage.totalHeight < this.refs.$brContainer.prop('clientHeight')) {
-        center.percentageY = 0.5;
-        doRecenter = true;
-      }
-      if (doRecenter) {
-        this.twoPageCenterView(center.percentageX, center.percentageY);
-      }
-    }
+    this._modes.mode2Up.resizePageView();
   }
   this.trigger(BookReader.eventNames.resize);
 };
 
 /**
- * Binds keyboard event listeners
+ * Binds keyboard and keyboard focus event listeners
  */
-BookReader.prototype.setupKeyListeners = function() {
-  var self = this;
-
-  var KEY_PGUP = 33;
-  var KEY_PGDOWN = 34;
-  var KEY_END = 35;
-  var KEY_HOME = 36;
-
-  var KEY_LEFT = 37;
-  var KEY_UP = 38;
-  var KEY_RIGHT = 39;
-  var KEY_DOWN = 40;
-  // The minus(-) and equal(=) keys have different mappings for different browsers
-  var KEY_MINUS = 189; // Chrome
-  var KEY_MINUS_F = 173; // Firefox
-  var KEY_NUMPAD_SUBTRACT = 109;
-  var KEY_EQUAL = 187; // Chrome
-  var KEY_EQUAL_F = 61; // Firefox
-  var KEY_NUMPAD_ADD = 107;
-
-  // We use document here instead of window to avoid a bug in jQuery on IE7
-  $(document).keydown(function(e) {
-
-    // Keyboard navigation
-    if (!self.keyboardNavigationIsDisabled(e)) {
-      switch (e.keyCode) {
-      case KEY_PGUP:
-      case KEY_UP:
-        // In 1up mode page scrolling is handled by browser
-        if (self.constMode2up == self.mode) {
-          e.preventDefault();
-          self.prev();
-        }
-        break;
-      case KEY_DOWN:
-      case KEY_PGDOWN:
-        if (self.constMode2up == self.mode) {
-          e.preventDefault();
-          self.next();
+BookReader.prototype.setupKeyListeners = function () {
+
+  // Keyboard focus by BookReader in viewport
+  //
+  // Intersection observer and callback sets BookReader keyboard
+  // "focus" flag off when the BookReader is not in the viewport.
+  if (window.IntersectionObserver) {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.intersectionRatio === 0) {
+          this.hasKeyFocus = false;
+        } else {
+          this.hasKeyFocus = true;
         }
-        break;
-      case KEY_END:
+      });
+    }, {
+      root: null,
+      rootMargin: '0px',
+      threshold: [0, 0.05, 1],
+    });
+    observer.observe(this.refs.$br[0]);
+  }
+
+  // Keyboard listeners
+  document.addEventListener('keydown', (e) => {
+
+    // Ignore if BookReader "focus" flag not set
+    if (!this.hasKeyFocus) {
+      return;
+    }
+
+    // Ignore if modifiers are active.
+    if (e.getModifierState('Control') ||
+      e.getModifierState('Alt') ||
+      e.getModifierState('Meta') ||
+      e.getModifierState('Win') /* hack for IE */) {
+      return;
+    }
+
+    // Ignore in input elements
+    if (utils.isInputActive()) {
+      return;
+    }
+
+    // KeyboardEvent code values:
+    //   https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
+    switch (e.key) {
+
+    // Page navigation
+    case "Home":
+      e.preventDefault();
+      this.first();
+      break;
+    case "End":
+      e.preventDefault();
+      this.last();
+      break;
+    case "ArrowDown":
+    case "PageDown":
+    case "Down": // hack for IE and old Gecko
+      // In 1up and thumb mode page scrolling handled by browser
+      if (this.constMode2up === this.mode) {
         e.preventDefault();
-        self.last();
-        break;
-      case KEY_HOME:
+        this.next();
+      }
+      break;
+    case "ArrowUp":
+    case "PageUp":
+    case "Up": // hack for IE and old Gecko
+      // In 1up and thumb mode page scrolling handled by browser
+      if (this.constMode2up === this.mode) {
         e.preventDefault();
-        self.first();
-        break;
-      case KEY_LEFT:
-        if (self.constModeThumb != self.mode) {
-          e.preventDefault();
-          self.left();
-        }
-        break;
-      case KEY_RIGHT:
-        if (self.constModeThumb != self.mode) {
-          e.preventDefault();
-          self.right();
-        }
-        break;
-      case KEY_MINUS:
-      case KEY_MINUS_F:
-      case KEY_NUMPAD_SUBTRACT:
+        this.prev();
+      }
+      break;
+    case "ArrowLeft":
+    case "Left": // hack for IE and old Gecko
+      // No y-scrolling in thumb mode
+      if (this.constModeThumb != this.mode) {
         e.preventDefault();
-        self.zoom(-1);
-        break;
-      case KEY_EQUAL:
-      case KEY_EQUAL_F:
-      case KEY_NUMPAD_ADD:
+        this.left();
+      }
+      break;
+    case "ArrowRight":
+    case "Right": // hack for IE and old Gecko
+      // No y-scrolling in thumb mode
+      if (this.constModeThumb != this.mode) {
         e.preventDefault();
-        self.zoom(+1);
-        break;
+        this.right();
       }
+      break;
+    // Zoom
+    case '-':
+    case 'Subtract':
+      e.preventDefault();
+      this.zoom(-1);
+      break;
+    case '+':
+    case '=':
+    case 'Add':
+      e.preventDefault();
+      this.zoom(1);
+      break;
+    // Fullscreen
+    case 'F':
+    case 'f':
+      e.preventDefault();
+      this.toggleFullscreen();
+      break;
     }
   });
 };
 
 BookReader.prototype.drawLeafs = function() {
   if (this.constMode1up == this.mode) {
-    this.drawLeafsOnePage();
-  } else if (this.constModeThumb == this.mode) {
-    this.drawLeafsThumbnail();
+    // Not needed for Mode1Up anymore
+    return;
   } else {
-    this.drawLeafsTwoPage();
+    this.activeMode.drawLeafs();
   }
 };
 
@@ -728,11 +846,17 @@ BookReader.prototype.drawLeafs = function() {
  * @param {PageIndex} index
  */
 BookReader.prototype._createPageContainer = function(index) {
-  return new PageContainer(this._models.book.getPage(index, false), {
+  const pageContainer = new PageContainer(this.book.getPage(index, false), {
     isProtected: this.protected,
     imageCache: this.imageCache,
-    loadingImage: this.imagesBaseURL + 'loading.gif',
   });
+
+  // Call plugin handlers
+  for (const plugin of Object.values(this._plugins)) {
+    plugin._configurePageContainer(pageContainer);
+  }
+
+  return pageContainer;
 };
 
 BookReader.prototype.bindGestures = function(jElement) {
@@ -742,8 +866,8 @@ BookReader.prototype.bindGestures = function(jElement) {
   // when you move the book with one finger and then add another
   // finger to pinch. Gestures are aware of scroll state.
 
-  var self = this;
-  var numTouches = 1;
+  const self = this;
+  let numTouches = 1;
 
   jElement.unbind('touchmove').bind('touchmove', function(e) {
     if (e.originalEvent.cancelable) numTouches = e.originalEvent.touches.length;
@@ -764,60 +888,24 @@ BookReader.prototype.bindGestures = function(jElement) {
   });
 };
 
-/** @deprecated Not used outside ModeThumb */
-BookReader.prototype.drawLeafsThumbnail = ModeThumb.prototype.drawLeafs;
-exposeOverrideableMethod(ModeThumb, '_modes.modeThumb', 'drawLeafs', 'drawLeafsThumbnail');
-/** @deprecated Not used outside ModeThumb */
-BookReader.prototype.lazyLoadThumbnails = ModeThumb.prototype.lazyLoadThumbnails;
-exposeOverrideableMethod(ModeThumb, '_modes.modeThumb', 'lazyLoadThumbnails', 'lazyLoadThumbnails');
-BookReader.prototype.lazyLoadImage = ModeThumb.prototype.lazyLoadImage;
-exposeOverrideableMethod(ModeThumb, '_modes.modeThumb', 'lazyLoadImage', 'lazyLoadImage');
-/** @deprecated Internal use only */
-BookReader.prototype.zoomThumb = ModeThumb.prototype.zoom;
-exposeOverrideableMethod(ModeThumb, '_modes.modeThumb', 'zoom', 'zoomThumb');
-/** @deprecated Not used outside ModeThumb */
-BookReader.prototype.getThumbnailWidth = ModeThumb.prototype.getThumbnailWidth;
-exposeOverrideableMethod(ModeThumb, '_modes.modeThumb', 'getThumbnailWidth', 'getThumbnailWidth');
-/** @deprecated Not used outside ModeThumb */
-BookReader.prototype.prepareThumbnailView = ModeThumb.prototype.prepare;
-exposeOverrideableMethod(ModeThumb, '_modes.modeThumb', 'prepare', 'prepareThumbnailView');
-
 /**
  * A throttled version of drawLeafs
  */
 BookReader.prototype.drawLeafsThrottled = utils.throttle(
   BookReader.prototype.drawLeafs,
-  250 // 250 ms gives quick feedback, but doesn't eat cpu
+  250, // 250 ms gives quick feedback, but doesn't eat cpu
 );
 
 /**
  * @param {number} direction Pass 1 to zoom in, anything else to zoom out
  */
 BookReader.prototype.zoom = function(direction) {
-  switch (this.mode) {
-  case this.constMode1up:
-    if (direction == 1) {
-      // XXX other cases
-      this.zoom1up('in');
-    } else {
-      this.zoom1up('out');
-    }
-    break
-  case this.constMode2up:
-    if (direction == 1) {
-      // XXX other cases
-      this.zoom2up('in');
-    } else {
-      this.zoom2up('out');
-    }
-    break
-  case this.constModeThumb:
-    // XXX update zoomThumb for named directions
-    this.zoomThumb(direction);
-    break
+  if (direction == 1) {
+    this.activeMode.zoom('in');
+  } else {
+    this.activeMode.zoom('out');
   }
-
-  this.textSelectionPlugin?.stopPageFlip(this.refs.$brContainer);
+  this._plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
   return;
 };
 
@@ -834,19 +922,19 @@ BookReader.prototype.resizeBRcontainer = function(animate) {
   if (animate) {
     this.refs.$brContainer.animate({
       top: this.getToolBarHeight(),
-      bottom: this.getFooterHeight()
+      bottom: this.getFooterHeight(),
     }, this.constResizeAnimationDuration, 'linear');
   } else {
     this.refs.$brContainer.css({
       top: this.getToolBarHeight(),
-      bottom: this.getFooterHeight()
+      bottom: this.getFooterHeight(),
     });
   }
-}
+};
 
 BookReader.prototype.centerPageView = function() {
-  var scrollWidth  = this.refs.$brContainer.prop('scrollWidth');
-  var clientWidth  =  this.refs.$brContainer.prop('clientWidth');
+  const scrollWidth  = this.refs.$brContainer.prop('scrollWidth');
+  const clientWidth  =  this.refs.$brContainer.prop('clientWidth');
   if (scrollWidth > clientWidth) {
     this.refs.$brContainer.prop('scrollLeft', (scrollWidth - clientWidth) / 2);
   }
@@ -934,7 +1022,7 @@ BookReader.prototype._reduceSort = (a, b) => a.reduce - b.reduce;
  * @return {boolean} Returns true if page could be found, false otherwise.
  */
 BookReader.prototype.jumpToPage = function(pageNum) {
-  var pageIndex = this._models.book.parsePageString(pageNum);
+  const pageIndex = this.book.parsePageString(pageNum);
 
   if ('undefined' != typeof(pageIndex)) {
     this.jumpToIndex(pageIndex);
@@ -950,11 +1038,9 @@ BookReader.prototype.jumpToPage = function(pageNum) {
  * @param {PageIndex} index
  */
 BookReader.prototype._isIndexDisplayed = function(index) {
-  // One up "caches" pages +- current, so exclude those in the test.
-  return this.constMode1up == this.mode ? this.displayedIndices.slice(1, -1).includes(index) :
-    this.displayedIndices ? this.displayedIndices.includes(index) :
-      this.currentIndex() == index;
-}
+  return this.displayedIndices ? this.displayedIndices.includes(index) :
+    this.currentIndex() == index;
+};
 
 /**
  * Changes the current page
@@ -965,7 +1051,7 @@ BookReader.prototype._isIndexDisplayed = function(index) {
  */
 BookReader.prototype.jumpToIndex = function(index, pageX, pageY, noAnimate) {
   // Don't jump into specific unviewable page
-  const page = this._models.book.getPage(index);
+  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);
@@ -975,19 +1061,12 @@ BookReader.prototype.jumpToIndex = function(index, pageX, pageY, noAnimate) {
 
   this.trigger(BookReader.eventNames.stop);
 
-  if (this.constMode2up == this.mode) {
-    this._modes.mode2Up.jumpToIndex(index);
-  } else if (this.constModeThumb == this.mode) {
-    this._modes.modeThumb.jumpToIndex(index);
-  } else { // 1up
-    this._modes.mode1Up.jumpToIndex(index, pageX, pageY, noAnimate);
-  }
+  this.activeMode.jumpToIndex(index, pageX, pageY, noAnimate);
 };
 
 /**
  * Return mode or 1up if initial thumb
  * @param {number}
- * @see BookReader.prototype.drawLeafsThumbnail
  */
 BookReader.prototype.getPrevReadMode = function(mode) {
   if (mode === BookReader.constMode1up || mode === BookReader.constMode2up) {
@@ -996,7 +1075,7 @@ BookReader.prototype.getPrevReadMode = function(mode) {
     // Initial thumb, return 1up
     return BookReader.constMode1up;
   }
-}
+};
 
 /**
  * Switches the mode (eg 1up 2up thumb)
@@ -1010,8 +1089,8 @@ BookReader.prototype.switchMode = function(
   {
     suppressFragmentChange = false,
     init = false,
-    pageFound = false
-  } = {}
+    pageFound = false,
+  } = {},
 ) {
   // Skip checks before init() complete
   if (this.init.initComplete) {
@@ -1024,10 +1103,13 @@ BookReader.prototype.switchMode = function(
   }
 
   this.trigger(BookReader.eventNames.stop);
-  if (this.enableSearch) this.removeSearchHilites();
 
   this.prevReadMode = this.getPrevReadMode(this.mode);
 
+  if (this.mode != mode) {
+    this.activeMode.unprepare?.();
+  }
+
   this.mode = mode;
 
   // reinstate scale if moving from thumbnail view
@@ -1040,42 +1122,31 @@ BookReader.prototype.switchMode = function(
 
   // XXX maybe better to preserve zoom in each mode
   if (this.constMode1up == mode) {
-    this.onePageCalculateReductionFactors();
-    this.reduce = this.quantizeReduce(this.reduce, this.onePage.reductionFactors);
-    this.prepareOnePageView();
+    this._modes.mode1Up.prepare();
   } else if (this.constModeThumb == mode) {
     this.reduce = this.quantizeReduce(this.reduce, this.reductionFactors);
-    this.prepareThumbnailView();
+    this._modes.modeThumb.prepare();
   } else {
-    // $$$ why don't we save autofit?
-    // this.twoPage.autofit = null; // Take zoom level from other mode
-    // spread indices not set, so let's set them
-    if (init || !pageFound) {
-      this.setSpreadIndices();
-    }
-
-    this.twoPageCalculateReductionFactors(); // this sets this.twoPage && this.reduce
-    this.prepareTwoPageView();
-    this.twoPageCenterView(0.5, 0.5); // $$$ TODO preserve center
+    this._modes.mode2Up.prepare();
   }
 
   if (!(this.suppressFragmentChange || suppressFragmentChange)) {
     this.trigger(BookReader.eventNames.fragmentChange);
   }
-  var eventName = mode + 'PageViewSelected';
+  const eventName = mode + 'PageViewSelected';
   this.trigger(BookReader.eventNames[eventName]);
 
-  this.textSelectionPlugin?.stopPageFlip(this.refs.$brContainer);
+  this._plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
 };
 
 BookReader.prototype.updateBrClasses = function() {
-  var modeToClass = {};
+  const modeToClass = {};
   modeToClass[this.constMode1up] = 'BRmode1up';
-  modeToClass[this.constMode2up] = 'BRmode2Up';
+  modeToClass[this.constMode2up] = 'BRmode2up';
   modeToClass[this.constModeThumb] = 'BRmodeThumb';
 
   this.refs.$br
-    .removeClass('BRmode1up BRmode2Up BRmodeThumb')
+    .removeClass('BRmode1up BRmode2up BRmodeThumb')
     .addClass(modeToClass[this.mode]);
 
   if (this.isFullscreen()) {
@@ -1095,31 +1166,30 @@ BookReader.prototype.isFullscreen = function() {
  * Toggles fullscreen
  * @param { boolean } bindKeyboardControls
  */
-BookReader.prototype.toggleFullscreen = function(bindKeyboardControls = true) {
+BookReader.prototype.toggleFullscreen = async function(bindKeyboardControls = true) {
   if (this.isFullscreen()) {
-    this.exitFullScreen();
+    await this.exitFullScreen();
   } else {
-    this.enterFullscreen(bindKeyboardControls);
+    await this.enterFullscreen(bindKeyboardControls);
   }
 };
 
 /**
  * Enters fullscreen
  * including:
- * - animation
  * - binds keyboard controls
  * - fires custom event
  * @param { boolean } bindKeyboardControls
  */
-BookReader.prototype.enterFullscreen = function(bindKeyboardControls = true) {
+BookReader.prototype.enterFullscreen = async function(bindKeyboardControls = true) {
+  this.refs.$br.addClass('BRfullscreenAnimation');
   const currentIndex = this.currentIndex();
-  this.refs.$brContainer.css('opacity', 0);
 
   if (bindKeyboardControls) {
     this._fullscreenCloseHandler = (e) => {
       if (e.keyCode === 27) this.toggleFullscreen();
     };
-    $(document).keyup(this._fullscreenCloseHandler);
+    $(document).on("keyup", this._fullscreenCloseHandler);
   }
 
   const windowWidth = $(window).width();
@@ -1128,14 +1198,28 @@ BookReader.prototype.enterFullscreen = function(bindKeyboardControls = true) {
   }
 
   this.isFullscreenActive = true;
+  // prioritize class updates so CSS can propagate
+  this.updateBrClasses();
+  if (this.activeMode instanceof Mode1Up) {
+    this.activeMode.mode1UpLit.scale = this.activeMode.mode1UpLit.computeDefaultScale(this.book.getPage(currentIndex));
+    // Need the new scale to be applied before calling jumpToIndex
+    this.activeMode.mode1UpLit.requestUpdate();
+    await this.activeMode.mode1UpLit.updateComplete;
+  }
+  this.jumpToIndex(currentIndex);
+
+  this._plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  // Add "?view=theater"
+  this.trigger(BookReader.eventNames.fragmentChange);
+  // trigger event here, so that animations,
+  // class updates happen before book-nav relays to web components
+  this.trigger(BookReader.eventNames.fullscreenToggled);
 
-  this.refs.$brContainer.animate({opacity: 1}, 'fast', 'linear',() => {
-    this.resize();
-    this.jumpToIndex(currentIndex);
-  });
+  // resize book after all events & css updates
+  await new Promise(resolve => setTimeout(resolve, 0));
 
-  this.textSelectionPlugin?.stopPageFlip(this.refs.$brContainer);
-  this.trigger(BookReader.eventNames.fullscreenToggled);
+  this.resize();
+  this.refs.$br.removeClass('BRfullscreenAnimation');
 };
 
 /**
@@ -1145,26 +1229,35 @@ BookReader.prototype.enterFullscreen = function(bindKeyboardControls = true) {
  * - fires custom event
  * @param { boolean } bindKeyboardControls
  */
-BookReader.prototype.exitFullScreen = function() {
-  this.refs.$brContainer.css('opacity', 0);
-
-  $(document).unbind('keyup', this._fullscreenCloseHandler);
-
-  var windowWidth = $(window).width();
+BookReader.prototype.exitFullScreen = async function () {
+  this.refs.$br.addClass('BRfullscreenAnimation');
+  $(document).off('keyup', this._fullscreenCloseHandler);
 
+  const windowWidth = $(window).width();
   const canShow2up = this.options.controls.twoPage.visible;
   if (canShow2up && (windowWidth <= this.onePageMinBreakpoint)) {
     this.switchMode(this.constMode2up);
   }
 
   this.isFullscreenActive = false;
+  // Trigger fullscreen event immediately
+  // so that book-nav can relay to web components
+  this.trigger(BookReader.eventNames.fullscreenToggled);
+
   this.updateBrClasses();
+  await new Promise(resolve => setTimeout(resolve, 0));
+  this.resize();
 
-  this.refs.$brContainer.animate({opacity: 1}, 'fast', 'linear', () => {
-    this.resize();
-  });
-  this.textSelectionPlugin?.stopPageFlip(this.refs.$brContainer);
-  this.trigger(BookReader.eventNames.fullscreenToggled);
+  if (this.activeMode instanceof Mode1Up) {
+    this.activeMode.mode1UpLit.scale = this.activeMode.mode1UpLit.computeDefaultScale(this.book.getPage(this.currentIndex()));
+    this.activeMode.mode1UpLit.requestUpdate();
+    await this.activeMode.mode1UpLit.updateComplete;
+  }
+
+  this._plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  // Remove "?view=theater"
+  this.trigger(BookReader.eventNames.fragmentChange);
+  this.refs.$br.removeClass('BRfullscreenAnimation');
 };
 
 /**
@@ -1178,7 +1271,7 @@ BookReader.prototype.currentIndex = function() {
     return this.firstIndex; // $$$ TODO page in center of view would be better
   } else if (this.mode == this.constMode2up) {
     // Only allow indices that are actually present in book
-    return utils.clamp(this.firstIndex, 0, this._models.book.getNumLeafs() - 1);
+    return utils.clamp(this.firstIndex, 0, this.book.getNumLeafs() - 1);
   } else {
     throw 'currentIndex called for unimplemented mode ' + this.mode;
   }
@@ -1193,13 +1286,11 @@ BookReader.prototype.currentIndex = function() {
  */
 BookReader.prototype.updateFirstIndex = function(
   index,
-  { suppressFragmentChange = false } = {}
+  { suppressFragmentChange = false } = {},
 ) {
-  // Called multiple times when defaults contains "mode/1up",
-  // including after init(). Skip fragment change if no index change
-  if (this.firstIndex === index) {
-    suppressFragmentChange = true;
-  }
+  // If there's no change, do nothing
+  if (this.firstIndex === index) return;
+
   this.firstIndex = index;
   if (!(this.suppressFragmentChange || suppressFragmentChange)) {
     this.trigger(BookReader.eventNames.fragmentChange);
@@ -1210,8 +1301,12 @@ BookReader.prototype.updateFirstIndex = function(
   if (this.options.initialSearchTerm && !suppressFragmentChange) {
     this.suppressFragmentChange = false;
   }
-  this.trigger('pageChanged');
-  this.updateNavIndexThrottled(index);
+
+  this.trigger(BookReader.eventNames.pageChanged);
+
+  // event to know if user is actively reading
+  this.trigger(BookReader.eventNames.userAction);
+  this._components.navbar.updateNavIndexThrottled(index);
 };
 
 /**
@@ -1258,24 +1353,42 @@ BookReader.prototype.leftmost = function() {
   }
 };
 
-BookReader.prototype.next = function() {
+/**
+ * @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) {
-    this.trigger(BookReader.eventNames.stop);
-    this.flipFwdToIndex(null);
+    if (triggerStop) this.trigger(BookReader.eventNames.stop);
+    flipSpeed = utils.parseAnimationSpeed(flipSpeed) || this.flipSpeed;
+    this._modes.mode2Up.mode2UpLit.flipAnimation('next', {flipSpeed});
   } else {
-    if (this.firstIndex < this.lastDisplayableIndex()) {
+    if (this.firstIndex < this.book.getNumLeafs() - 1) {
       this.jumpToIndex(this.firstIndex + 1);
     }
   }
 };
 
-BookReader.prototype.prev = function() {
+/**
+ * @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) {
-    this.trigger(BookReader.eventNames.stop);
-    this.flipBackToIndex(null);
+    if (triggerStop) this.trigger(BookReader.eventNames.stop);
+    flipSpeed = utils.parseAnimationSpeed(flipSpeed) || this.flipSpeed;
+    this._modes.mode2Up.mode2UpLit.flipAnimation('prev', {flipSpeed});
   } else {
     if (this.firstIndex >= 1) {
       this.jumpToIndex(this.firstIndex - 1);
@@ -1284,257 +1397,13 @@ BookReader.prototype.prev = function() {
 };
 
 BookReader.prototype.first = function() {
-  this.jumpToIndex(this.firstDisplayableIndex());
+  this.jumpToIndex(0);
 };
 
 BookReader.prototype.last = function() {
-  this.jumpToIndex(this.lastDisplayableIndex());
-};
-
-/**
- * Scrolls down one screen view
- */
-BookReader.prototype.scrollDown = function() {
-  if ($.inArray(this.mode, [this.constMode1up, this.constModeThumb]) >= 0) {
-    if ( this.mode == this.constMode1up && (this.reduce >= this.onePageGetAutofitHeight()) ) {
-      // Whole pages are visible, scroll whole page only
-      return this.next();
-    }
-
-    this.refs.$brContainer.stop(true).animate(
-      { scrollTop: '+=' + this._scrollAmount() + 'px'},
-      400, 'easeInOutExpo'
-    );
-    return true;
-  } else {
-    return false;
-  }
-};
-
-/**
- * Scrolls up one screen view
- */
-BookReader.prototype.scrollUp = function() {
-  if ($.inArray(this.mode, [this.constMode1up, this.constModeThumb]) >= 0) {
-    if ( this.mode == this.constMode1up && (this.reduce >= this.onePageGetAutofitHeight()) ) {
-      // Whole pages are visible, scroll whole page only
-      return this.prev();
-    }
-
-    this.refs.$brContainer.stop(true).animate(
-      { scrollTop: '-=' + this._scrollAmount() + 'px'},
-      400, 'easeInOutExpo'
-    );
-    return true;
-  } else {
-    return false;
-  }
-};
-
-/**
- * The amount to scroll vertically in integer pixels
- */
-BookReader.prototype._scrollAmount = function() {
-  if (this.constMode1up == this.mode) {
-    // Overlap by % of page size
-    return parseInt(this.refs.$brContainer.prop('clientHeight') - this._models.book.getPageHeight(this.currentIndex()) / this.reduce * 0.03);
-  }
-
-  return parseInt(0.9 * this.refs.$brContainer.prop('clientHeight'));
-};
-
-/**
- * @deprecated No longer used; will be remove in v5
- */
-BookReader.prototype.prefetchImg = async function(index, fetchNow = false) {
-  console.warn('Call to deprecated function: BookReader.prefetchImg. No-op.');
-};
-
-/**
- * @deprecated No longer used; will be remove in v5
- */
-BookReader.prototype.pruneUnusedImgs = function() {
-  console.warn('Call to deprecated function: BookReader.pruneUnused. No-op.');
+  this.jumpToIndex(this.book.getNumLeafs() - 1);
 };
 
-/************************/
-/** Mode1Up extensions **/
-/************************/
-/** @deprecated not used outside BookReader */
-BookReader.prototype.prepareOnePageView = Mode1Up.prototype.prepare;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'prepare', 'prepareOnePageView');
-/** @deprecated not used outside BookReader */
-BookReader.prototype.drawLeafsOnePage = Mode1Up.prototype.drawLeafs;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'drawLeafs', 'drawLeafsOnePage');
-/** @deprecated not used outside BookReader */
-BookReader.prototype.zoom1up = Mode1Up.prototype.zoom;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'zoom', 'zoom1up');
-/** @deprecated not used outside Mode1Up */
-BookReader.prototype.onePageGetAutofitWidth = Mode1Up.prototype.getAutofitWidth;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'getAutofitWidth', 'onePageGetAutofitWidth');
-/** @deprecated not used outside Mode1Up, BookReader */
-BookReader.prototype.onePageGetAutofitHeight = Mode1Up.prototype.getAutofitHeight;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'getAutofitHeight', 'onePageGetAutofitHeight');
-/** @deprecated not used outside Mode1Up, BookReader */
-BookReader.prototype.onePageGetPageTop = Mode1Up.prototype.getPageTop;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'getPageTop', 'onePageGetPageTop');
-/** @deprecated not used outside Mode1Up, BookReader */
-BookReader.prototype.onePageCalculateReductionFactors = Mode1Up.prototype.calculateReductionFactors;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'calculateReductionFactors', 'onePageCalculateReductionFactors');
-/** @deprecated not used outside Mode1Up, BookReader */
-BookReader.prototype.resizePageView1up = Mode1Up.prototype.resizePageView;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'resizePageView', 'resizePageView1up');
-/** @deprecated not used outside Mode1Up */
-BookReader.prototype.onePageCalculateViewDimensions = Mode1Up.prototype.calculateViewDimensions;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'calculateViewDimensions', 'onePageCalculateViewDimensions');
-/** @deprecated not used outside Mode1Up */
-BookReader.prototype.centerX1up = Mode1Up.prototype.centerX;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'centerX', 'centerX1up');
-/** @deprecated not used outside Mode1Up */
-BookReader.prototype.centerY1up = Mode1Up.prototype.centerY;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'centerY', 'centerY1up');
-
-/************************/
-/** Mode2Up extensions **/
-/************************/
-/** @deprecated not used outside Mode2Up */
-BookReader.prototype.zoom2up = Mode2Up.prototype.zoom;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'zoom', 'zoom2up');
-BookReader.prototype.twoPageGetAutofitReduce = Mode2Up.prototype.getAutofitReduce;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'getAutofitReduce', 'twoPageGetAutofitReduce');
-BookReader.prototype.flipBackToIndex = Mode2Up.prototype.flipBackToIndex;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'flipBackToIndex', 'flipBackToIndex');
-BookReader.prototype.flipFwdToIndex = Mode2Up.prototype.flipFwdToIndex;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'flipFwdToIndex', 'flipFwdToIndex');
-BookReader.prototype.setHilightCss2UP = Mode2Up.prototype.setHilightCss;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'setHilightCss', 'setHilightCss2UP');
-/** @deprecated not used outside Mode2Up */
-BookReader.prototype.setClickHandler2UP = Mode2Up.prototype.setClickHandler;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'setClickHandler', 'setClickHandler2UP');
-/** @deprecated not used outside Mode2Up */
-BookReader.prototype.drawLeafsTwoPage = Mode2Up.prototype.drawLeafs;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'drawLeafs', 'drawLeafsTwoPage');
-/** @deprecated not used outside BookReader */
-BookReader.prototype.prepareTwoPageView = Mode2Up.prototype.prepareTwoPageView;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'prepareTwoPageView', 'prepareTwoPageView');
-/** @deprecated not used outside Mode2Up */
-BookReader.prototype.prepareTwoPagePopUp = Mode2Up.prototype.preparePopUp;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'preparePopUp', 'prepareTwoPagePopUp');
-/** @deprecated not used outside BookReader, Mode2Up */
-BookReader.prototype.calculateSpreadSize = Mode2Up.prototype.calculateSpreadSize;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'calculateSpreadSize', 'calculateSpreadSize');
-/** @deprecated not used outside BookReader, Mode2Up */
-BookReader.prototype.getIdealSpreadSize = Mode2Up.prototype.getIdealSpreadSize;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'getIdealSpreadSize', 'getIdealSpreadSize');
-/** @deprecated not used outside BookReader, Mode2Up */
-BookReader.prototype.getSpreadSizeFromReduce = Mode2Up.prototype.getSpreadSizeFromReduce;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'getSpreadSizeFromReduce', 'getSpreadSizeFromReduce');
-/** @deprecated unused */
-BookReader.prototype.twoPageIsZoomedIn = Mode2Up.prototype.isZoomedIn;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'isZoomedIn', 'twoPageIsZoomedIn');
-/** @deprecated not used outside BookReader */
-BookReader.prototype.twoPageCalculateReductionFactors = Mode2Up.prototype.calculateReductionFactors;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'calculateReductionFactors', 'twoPageCalculateReductionFactors');
-/** @deprecated unused */
-BookReader.prototype.twoPageSetCursor = Mode2Up.prototype.setCursor;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'setCursor', 'twoPageSetCursor');
-/** @deprecated unused outside BookReader, Mode2Up */
-BookReader.prototype.flipLeftToRight = Mode2Up.prototype.flipLeftToRight;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'flipLeftToRight', 'flipLeftToRight');
-/** @deprecated unused outside BookReader, Mode2Up */
-BookReader.prototype.flipRightToLeft = Mode2Up.prototype.flipRightToLeft;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'flipRightToLeft', 'flipRightToLeft');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.setMouseHandlers2UP = Mode2Up.prototype.setMouseHandlers;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'setMouseHandlers', 'setMouseHandlers2UP');
-/** @deprecated unused outside BookReader, Mode2Up */
-BookReader.prototype.prepareFlipLeftToRight = Mode2Up.prototype.prepareFlipLeftToRight;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'prepareFlipLeftToRight', 'prepareFlipLeftToRight');
-/** @deprecated unused outside BookReader, Mode2Up */
-BookReader.prototype.prepareFlipRightToLeft = Mode2Up.prototype.prepareFlipRightToLeft;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'prepareFlipRightToLeft', 'prepareFlipRightToLeft');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.getPageWidth2UP = Mode2Up.prototype.getPageWidth;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'getPageWidth', 'getPageWidth2UP');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.twoPageGutter = Mode2Up.prototype.gutter;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'gutter', 'twoPageGutter');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.twoPageTop = Mode2Up.prototype.top;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'top', 'twoPageTop');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.twoPageCoverWidth = Mode2Up.prototype.coverWidth;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'coverWidth', 'twoPageCoverWidth');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.twoPageGetViewCenter = Mode2Up.prototype.getViewCenter;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'getViewCenter', 'twoPageGetViewCenter');
-/** @deprecated unused outside BookReader, Mode2Up */
-BookReader.prototype.twoPageCenterView = Mode2Up.prototype.centerView;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'centerView', 'twoPageCenterView');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.twoPageFlipAreaHeight = Mode2Up.prototype.flipAreaHeight;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'flipAreaHeight', 'twoPageFlipAreaHeight');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.twoPageFlipAreaWidth = Mode2Up.prototype.flipAreaWidth;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'flipAreaWidth', 'twoPageFlipAreaWidth');
-/** @deprecated unused outside BookReader, Mode2Up */
-BookReader.prototype.twoPageFlipAreaTop = Mode2Up.prototype.flipAreaTop;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'flipAreaTop', 'twoPageFlipAreaTop');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.twoPageLeftFlipAreaLeft = Mode2Up.prototype.leftFlipAreaLeft;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'leftFlipAreaLeft', 'twoPageLeftFlipAreaLeft');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.twoPageRightFlipAreaLeft = Mode2Up.prototype.rightFlipAreaLeft;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'rightFlipAreaLeft', 'twoPageRightFlipAreaLeft');
-/** @deprecated unused outside BookReader, Mode2Up */
-BookReader.prototype.gutterOffsetForIndex = Mode2Up.prototype.gutterOffsetForIndex;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'gutterOffsetForIndex', 'gutterOffsetForIndex');
-/** @deprecated unused outside BookReader, Mode2Up */
-BookReader.prototype.leafEdgeWidth = Mode2Up.prototype.leafEdgeWidth;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'leafEdgeWidth', 'leafEdgeWidth');
-/** @deprecated unused outside BookReader, Mode2Up */
-BookReader.prototype.jumpIndexForLeftEdgePageX = Mode2Up.prototype.jumpIndexForLeftEdgePageX;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'jumpIndexForLeftEdgePageX', 'jumpIndexForLeftEdgePageX');
-/** @deprecated unused outside BookReader, Mode2Up */
-BookReader.prototype.jumpIndexForRightEdgePageX = Mode2Up.prototype.jumpIndexForRightEdgePageX;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'jumpIndexForRightEdgePageX', 'jumpIndexForRightEdgePageX');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.prefetch = Mode2Up.prototype.prefetch;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'prefetch', 'prefetch');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.setSpreadIndices = Mode2Up.prototype.setSpreadIndices;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'setSpreadIndices', 'setSpreadIndices');
-/**
- * Immediately stop flip animations.  Callbacks are triggered.
- */
-BookReader.prototype.stopFlipAnimations = function() {
-  this.trigger(BookReader.eventNames.stop);
-
-  // Stop animation, clear queue, trigger callbacks
-  if (this.leafEdgeTmp) {
-    $(this.leafEdgeTmp).stop(false, true);
-  }
-  jQuery.each(this._modes.mode2Up.pageContainers, function() {
-    $(this.$container).stop(false, true);
-  });
-
-  // And again since animations also queued in callbacks
-  if (this.leafEdgeTmp) {
-    $(this.leafEdgeTmp).stop(false, true);
-  }
-  jQuery.each(this._modes.mode2Up.pageContainers, function() {
-    $(this.$container).stop(false, true);
-  });
-};
-
-/**
- * Returns true if keyboard navigation should be disabled for the event
- * @param {Event}
- * @return {boolean}
- */
-BookReader.prototype.keyboardNavigationIsDisabled = function(event) {
-  return event.target.tagName == "INPUT";
-};
 
 /**
  * @template TClass extends { br: BookReader }
@@ -1558,30 +1427,9 @@ function exposeOverrideableMethod(Class, classKey, method, brMethod = method) {
 /***********************/
 /** Navbar extensions **/
 /***********************/
+/** This cannot be removed yet because plugin.tts.js overrides it */
 BookReader.prototype.initNavbar = Navbar.prototype.init;
 exposeOverrideableMethod(Navbar, '_components.navbar', 'init', 'initNavbar');
-BookReader.prototype.switchNavbarControls = Navbar.prototype.switchNavbarControls;
-exposeOverrideableMethod(Navbar, '_components.navbar', 'switchNavbarControls');
-BookReader.prototype.updateViewModeButton = Navbar.prototype.updateViewModeButton;
-exposeOverrideableMethod(Navbar, '_components.navbar', 'updateViewModeButton');
-BookReader.prototype.getNavPageNumString = Navbar.prototype.getNavPageNumString;
-exposeOverrideableMethod(Navbar, '_components.navbar', 'getNavPageNumString');
-/** @deprecated */
-BookReader.prototype.initEmbedNavbar = Navbar.prototype.initEmbed;
-exposeOverrideableMethod(Navbar, '_components.navbar', 'initEmbed', 'initEmbedNavbar');
-/** @deprecated unused */
-BookReader.prototype.getNavPageNumHtml = getNavPageNumHtml;
-/** @deprecated unused outside this file */
-BookReader.prototype.updateNavPageNum = Navbar.prototype.updateNavPageNum;
-exposeOverrideableMethod(Navbar, '_components.navbar', 'updateNavPageNum');
-/** @deprecated unused outside this file */
-BookReader.prototype.updateNavIndex = Navbar.prototype.updateNavIndex;
-exposeOverrideableMethod(Navbar, '_components.navbar', 'updateNavIndex');
-/** @deprecated unused outside this file */
-BookReader.prototype.updateNavIndexThrottled = utils.throttle(BookReader.prototype.updateNavIndex, 250, false);
-/** @deprecated unused */
-BookReader.prototype.updateNavIndexDebounced = utils.debounce(BookReader.prototype.updateNavIndex, 500, false);
-
 
 /************************/
 /** Toolbar extensions **/
@@ -1596,24 +1444,14 @@ BookReader.prototype.buildInfoDiv = Toolbar.prototype.buildInfoDiv;
 exposeOverrideableMethod(Toolbar, '_components.toolbar', 'buildInfoDiv');
 BookReader.prototype.getToolBarHeight = Toolbar.prototype.getToolBarHeight;
 exposeOverrideableMethod(Toolbar, '_components.toolbar', 'getToolBarHeight');
-/** @deprecated zoom no longer in toolbar */
-BookReader.prototype.updateToolbarZoom = Toolbar.prototype.updateToolbarZoom;
-exposeOverrideableMethod(Toolbar, '_components.toolbar', 'updateToolbarZoom');
-/** @deprecated unused */
-BookReader.prototype.blankInfoDiv = blankInfoDiv;
-/** @deprecated unused */
-BookReader.prototype.blankShareDiv = blankShareDiv;
-/** @deprecated unused */
-BookReader.prototype.createPopup = createPopup;
 
 /**
  * Bind navigation handlers
  */
 BookReader.prototype.bindNavigationHandlers = function() {
   const self = this;
+  const jIcons = this.$('.BRicon');
 
-  // Note the mobile plugin attaches itself to body, so we need to select outside
-  const jIcons = this.$('.BRicon').add('.BRmobileMenu .BRicon');
   // Map of jIcon class -> click handler
   const navigationControls = {
     book_left: () => {
@@ -1624,20 +1462,6 @@ BookReader.prototype.bindNavigationHandlers = function() {
       this.trigger(BookReader.eventNames.stop);
       this.right();
     },
-    book_up: () => {
-      if ($.inArray(this.mode, [this.constMode1up, this.constModeThumb]) >= 0) {
-        this.scrollUp();
-      } else {
-        this.prev();
-      }
-    },
-    book_down: () => {
-      if ($.inArray(this.mode, [this.constMode1up, this.constModeThumb]) >= 0) {
-        this.scrollDown();
-      } else {
-        this.next();
-      }
-    },
     book_top: this.first.bind(this),
     book_bottom: this.last.bind(this),
     book_leftmost: this.leftmost.bind(this),
@@ -1663,7 +1487,7 @@ BookReader.prototype.bindNavigationHandlers = function() {
     },
     full: () => {
       if (this.ui == 'embed') {
-        var url = this.$('.BRembedreturn a').attr('href');
+        const url = this.$('.BRembedreturn a').attr('href');
         window.open(url);
       } else {
         this.toggleFullscreen();
@@ -1671,29 +1495,31 @@ BookReader.prototype.bindNavigationHandlers = function() {
     },
   };
 
-  jIcons.filter('.fit').bind('fit', function() {
-    // XXXmang implement autofit zoom
+  // custom event for auto-loan-renew in ia-book-actions
+  // - to know if user is actively reading
+  this.$('nav.BRcontrols li button').on('click', () => {
+    this.trigger(BookReader.eventNames.userAction);
   });
 
   for (const control in navigationControls) {
     jIcons.filter(`.${control}`).on('click.bindNavigationHandlers', () => {
-      navigationControls[control]()
+      navigationControls[control]();
       return false;
     });
   }
 
-  var $brNavCntlBtmEl = this.$('.BRnavCntlBtm');
-  var $brNavCntlTopEl = this.$('.BRnavCntlTop');
+  const $brNavCntlBtmEl = this.$('.BRnavCntlBtm');
+  const $brNavCntlTopEl = this.$('.BRnavCntlTop');
 
   this.$('.BRnavCntl').click(
     function() {
-      var promises = [];
+      const promises = [];
       // TODO don't use magic constants
       // TODO move this to a function
       if ($brNavCntlBtmEl.hasClass('BRdn')) {
         if (self.refs.$BRtoolbar)
           promises.push(self.refs.$BRtoolbar.animate(
-            {top: self.getToolBarHeight() * -1}
+            {top: self.getToolBarHeight() * -1},
           ).promise());
         promises.push(self.$('.BRfooter').animate({bottom: self.getFooterHeight() * -1}).promise());
         $brNavCntlBtmEl.addClass('BRup').removeClass('BRdn');
@@ -1707,7 +1533,7 @@ BookReader.prototype.bindNavigationHandlers = function() {
         $brNavCntlBtmEl.addClass('BRdn').removeClass('BRup');
         $brNavCntlTopEl.addClass('BRup').removeClass('BRdn');
         self.$('.BRnavCntlBtm.BRnavCntl').animate({height:'30px'});
-        self.$('.BRvavCntl').animate({opacity:1})
+        self.$('.BRvavCntl').animate({opacity:1});
       }
       $.when.apply($, promises).done(function() {
         // Only do full resize in auto mode and need to recalc. size
@@ -1723,388 +1549,45 @@ BookReader.prototype.bindNavigationHandlers = function() {
           self.resizeBRcontainer();
         }
       });
-    }
-  );
-  $brNavCntlBtmEl.mouseover(function() {
-    if ($(this).hasClass('BRup')) {
-      self.$('.BRnavCntl').animate({opacity:1},250);
-    }
-  }).mouseleave(function() {
-    if ($(this).hasClass('BRup')) {
-      self.$('.BRnavCntl').animate({opacity:.75},250);
-    }
-  });
-  $brNavCntlTopEl.mouseover(function() {
-    if ($(this).hasClass('BRdn')) {
-      self.$('.BRnavCntl').animate({opacity:1},250);
-    }
-  }).mouseleave(function() {
-    if ($(this).hasClass('BRdn')) {
-      self.$('.BRnavCntl').animate({opacity:.75},250);
-    }
-  });
-
-  this.initSwipeData();
-
-  $(document).off('mousemove.navigation', this.el);
-  $(document).on(
-    'mousemove.navigation',
-    this.el,
-    { 'br': this },
-    this.navigationMousemoveHandler
-  );
-
-  $(document).off('mousedown.swipe', '.BRpageimage');
-  $(document).on(
-    'mousedown.swipe',
-    '.BRpageimage',
-    { 'br': this },
-    this.swipeMousedownHandler
-  );
-
-  this.bindMozTouchHandlers();
-};
-
-/**
- * Unbind navigation handlers
- */
-BookReader.prototype.unbindNavigationHandlers = function() {
-  $(document).off('mousemove.navigation', this.el);
-};
-
-/**
- * Handle mousemove related to navigation.  Bind at #BookReader level to allow autohide.
- */
-BookReader.prototype.navigationMousemoveHandler = function(event) {
-  // $$$ possibly not great to be calling this for every mousemove
-  if (event.data['br'].uiAutoHide) {
-    // 77px is an approximate height of the Internet Archive Top Nav
-    // 75 & 76 (pixels) provide used in this context is checked against the IA top nav height
-    var navkey = $(document).height() - 75;
-    if ((event.pageY < 76) || (event.pageY > navkey)) {
-      // inside or near navigation elements
-      event.data['br'].hideNavigation();
-    } else {
-      event.data['br'].showNavigation();
-    }
-  }
-};
-
-BookReader.prototype.initSwipeData = function(clientX, clientY) {
-  /*
-     * Based on the really quite awesome "Today's Guardian" at http://guardian.gyford.com/
-     */
-  this._swipe = {
-    mightBeSwiping: false,
-    didSwipe: false,
-    mightBeDraggin: false,
-    didDrag: false,
-    startTime: (new Date).getTime(),
-    startX: clientX,
-    startY: clientY,
-    lastX: clientX,
-    lastY: clientY,
-    deltaX: 0,
-    deltaY: 0,
-    deltaT: 0
-  }
-};
-
-BookReader.prototype.swipeMousedownHandler = function(event) {
-  var self = event.data['br'];
-
-  // We should be the last bubble point for the page images
-  // Disable image drag and select, but keep right-click
-  if (event.which == 3) {
-    return !self.protected;
-  }
-
-  $(event.target).bind('mouseout.swipe',
-    { 'br': self},
-    self.swipeMouseupHandler
-  ).bind('mouseup.swipe',
-    { 'br': self},
-    self.swipeMouseupHandler
-  ).bind('mousemove.swipe',
-    { 'br': self },
-    self.swipeMousemoveHandler
+    },
   );
-
-  self.initSwipeData(event.clientX, event.clientY);
-  self._swipe.mightBeSwiping = true;
-  self._swipe.mightBeDragging = true;
-
-  event.preventDefault();
-  event.returnValue  = false;
-  event.cancelBubble = true;
-  return false;
-};
-
-BookReader.prototype.swipeMousemoveHandler = function(event) {
-  var self = event.data['br'];
-  var _swipe = self._swipe;
-  if (! _swipe.mightBeSwiping) {
-    return;
-  }
-
-  // Update swipe data
-  _swipe.deltaX = event.clientX - _swipe.startX;
-  _swipe.deltaY = event.clientY - _swipe.startY;
-  _swipe.deltaT = (new Date).getTime() - _swipe.startTime;
-
-  var absX = Math.abs(_swipe.deltaX);
-  var absY = Math.abs(_swipe.deltaY);
-
-  // Minimum distance in the amount of tim to trigger the swipe
-  var minSwipeLength = Math.min(self.refs.$br.width() / 5, 80);
-  var maxSwipeTime = 400;
-
-  // Check for horizontal swipe
-  if (absX > absY && (absX > minSwipeLength) && _swipe.deltaT < maxSwipeTime) {
-    _swipe.mightBeSwiping = false; // only trigger once
-    _swipe.didSwipe = true;
-    if (self.mode == self.constMode2up) {
-      if (_swipe.deltaX < 0) {
-        self.right();
-      } else {
-        self.left();
+  $brNavCntlBtmEl
+    .on("mouseover", function() {
+      if ($(this).hasClass('BRup')) {
+        self.$('.BRnavCntl').animate({opacity:1},250);
       }
-    }
-  }
-
-  if ( _swipe.deltaT > maxSwipeTime && !_swipe.didSwipe) {
-    if (_swipe.mightBeDragging) {
-      // Dragging
-      _swipe.didDrag = true;
-      self.refs.$brContainer
-        .scrollTop(self.refs.$brContainer.scrollTop() - event.clientY + _swipe.lastY)
-        .scrollLeft(self.refs.$brContainer.scrollLeft() - event.clientX + _swipe.lastX);
-    }
-  }
-  _swipe.lastX = event.clientX;
-  _swipe.lastY = event.clientY;
-
-  event.preventDefault();
-  event.returnValue  = false;
-  event.cancelBubble = true;
-  return false;
-};
-
-BookReader.prototype.swipeMouseupHandler = function(event) {
-  var _swipe = event.data['br']._swipe;
-  _swipe.mightBeSwiping = false;
-  _swipe.mightBeDragging = false;
-
-  $(event.target).unbind('mouseout.swipe').unbind('mouseup.swipe').unbind('mousemove.swipe');
-
-  if (_swipe.didSwipe || _swipe.didDrag) {
-    // Swallow event if completed swipe gesture
-    event.preventDefault();
-    event.returnValue  = false;
-    event.cancelBubble = true;
-    return false;
-  }
-  return true;
-};
-
-BookReader.prototype.bindMozTouchHandlers = function() {
-  var self = this;
-
-  // Currently only want touch handlers in 2up
-  this.refs.$br.bind('MozTouchDown', function(event) {
-    if (this.mode == self.constMode2up) {
-      event.preventDefault();
-    }
-  })
-    .bind('MozTouchMove', function(event) {
-      if (this.mode == self.constMode2up) {
-        event.preventDefault();
+    })
+    .on("mouseleave", function() {
+      if ($(this).hasClass('BRup')) {
+        self.$('.BRnavCntl').animate({opacity:.75},250);
+      }
+    });
+  $brNavCntlTopEl
+    .on("mouseover", function() {
+      if ($(this).hasClass('BRdn')) {
+        self.$('.BRnavCntl').animate({opacity:1},250);
       }
     })
-    .bind('MozTouchUp', function(event) {
-      if (this.mode == self.constMode2up) {
-        event.preventDefault();
+    .on("mouseleave", function() {
+      if ($(this).hasClass('BRdn')) {
+        self.$('.BRnavCntl').animate({opacity:.75},250);
       }
     });
-};
-
-/**
- * Returns true if the navigation elements are currently visible
- * @return {boolean}
- */
-BookReader.prototype.navigationIsVisible = function() {
-  // $$$ doesn't account for transitioning states, nav must be fully visible to return true
-  var toolpos = this.refs.$BRtoolbar.position();
-  var tooltop = toolpos.top;
-  return tooltop == 0;
-};
-
-/**
- * Main controller that sets navigation into view.
- * Defaults to SHOW the navigation chrome
- */
-BookReader.prototype.setNavigationView = function brSetNavigationView(hide) {
-  var animationLength = this.constNavAnimationDuration;
-  var animationType = 'linear';
-  var resizePageContainer = function resizePageContainer () {
-    /* main page container fills whole container */
-    if (this.constMode2up !== this.mode) {
-      var animate = true;
-      this.resizeBRcontainer(animate);
-    }
-    this.trigger(BookReader.eventNames.navToggled);
-  }.bind(this);
-
-  var toolbarHeight = 0;
-  var navbarHeight = 0;
-  if (hide) {
-    toolbarHeight = this.getToolBarHeight() * -1;
-    navbarHeight = this.getFooterHeight() * -1;
-
-    this.refs.$BRtoolbar.addClass('js-menu-hide');
-    this.refs.$BRfooter.addClass('js-menu-hide');
-  } else {
-    this.refs.$BRtoolbar.removeClass('js-menu-hide');
-    this.refs.$BRfooter.removeClass('js-menu-hide');
-  }
-
-  this.refs.$BRtoolbar.animate(
-    { top: toolbarHeight },
-    animationLength,
-    animationType,
-    resizePageContainer
-  );
-  this.refs.$BRfooter.animate(
-    { bottom: navbarHeight },
-    animationLength,
-    animationType,
-    resizePageContainer
-  );
-};
-/**
- * Hide navigation elements, if visible
- */
-BookReader.prototype.hideNavigation = function() {
-  // Check if navigation is showing
-  if (this.navigationIsVisible()) {
-    var hide = true;
-    this.setNavigationView(hide);
-  }
-};
-
-/**
- * Show navigation elements
- */
-BookReader.prototype.showNavigation = function() {
-  // Check if navigation is hidden
-  if (!this.navigationIsVisible()) {
-    this.setNavigationView();
-  }
-};
-
-/**
- * Returns the index of the first visible page, dependent on the mode.
- * $$$ Currently we cannot display the front/back cover in 2-up and will need to update
- * this function when we can as part of https://bugs.launchpad.net/gnubook/+bug/296788
- * @return {number}
- */
-BookReader.prototype.firstDisplayableIndex = function() {
-  if (this.mode != this.constMode2up) {
-    return 0;
-  }
-
-  if ('rl' != this.pageProgression) {
-    // LTR
-    if (this._models.book.getPageSide(0) == 'L') {
-      return 0;
-    } else {
-      return -1;
-    }
-  } else {
-    // RTL
-    if (this._models.book.getPageSide(0) == 'R') {
-      return 0;
-    } else {
-      return -1;
-    }
-  }
-};
-
-/**
- * Returns the index of the last visible page, dependent on the mode.
- * $$$ Currently we cannot display the front/back cover in 2-up and will need to update
- * this function when we can as part of https://bugs.launchpad.net/gnubook/+bug/296788
- * @return {number}
- */
-BookReader.prototype.lastDisplayableIndex = function() {
-
-  var lastIndex = this._models.book.getNumLeafs() - 1;
 
-  if (this.mode != this.constMode2up) {
-    return lastIndex;
-  }
-
-  if ('rl' != this.pageProgression) {
-    // LTR
-    if (this._models.book.getPageSide(lastIndex) == 'R') {
-      return lastIndex;
-    } else {
-      return lastIndex + 1;
-    }
-  } else {
-    // RTL
-    if (this._models.book.getPageSide(lastIndex) == 'L') {
-      return lastIndex;
-    } else {
-      return lastIndex + 1;
-    }
+  // Call _bindNavigationHandlers on the plugins
+  for (const plugin of Object.values(this._plugins)) {
+    plugin._bindNavigationHandlers();
   }
 };
 
-
 /**************************/
 /** BookModel extensions **/
 /**************************/
-/** @deprecated not used outside */
-BookReader.prototype.getMedianPageSize = BookModel.prototype.getMedianPageSize;
-exposeOverrideableMethod(BookModel, '_models.book', 'getMedianPageSize');
-BookReader.prototype._getPageWidth = BookModel.prototype._getPageWidth;
-exposeOverrideableMethod(BookModel, '_models.book', '_getPageWidth');
-BookReader.prototype._getPageHeight = BookModel.prototype._getPageHeight;
-exposeOverrideableMethod(BookModel, '_models.book', '_getPageHeight');
-BookReader.prototype.getPageIndex = BookModel.prototype.getPageIndex;
-exposeOverrideableMethod(BookModel, '_models.book', 'getPageIndex');
-/** @deprecated not used outside */
-BookReader.prototype.getPageIndices = BookModel.prototype.getPageIndices;
-exposeOverrideableMethod(BookModel, '_models.book', 'getPageIndices');
-BookReader.prototype.getPageName = BookModel.prototype.getPageName;
-exposeOverrideableMethod(BookModel, '_models.book', 'getPageName');
-BookReader.prototype.getNumLeafs = BookModel.prototype.getNumLeafs;
-exposeOverrideableMethod(BookModel, '_models.book', 'getNumLeafs');
-BookReader.prototype.getPageWidth = BookModel.prototype.getPageWidth;
-exposeOverrideableMethod(BookModel, '_models.book', 'getPageWidth');
-BookReader.prototype.getPageHeight = BookModel.prototype.getPageHeight;
-exposeOverrideableMethod(BookModel, '_models.book', 'getPageHeight');
+// Must modify petabox extension, which expects this on the prototype
+// before removing.
 BookReader.prototype.getPageURI = BookModel.prototype.getPageURI;
-exposeOverrideableMethod(BookModel, '_models.book', 'getPageURI');
-BookReader.prototype.getPageSide = BookModel.prototype.getPageSide;
-exposeOverrideableMethod(BookModel, '_models.book', 'getPageSide');
-BookReader.prototype.getPageNum = BookModel.prototype.getPageNum;
-exposeOverrideableMethod(BookModel, '_models.book', 'getPageNum');
-BookReader.prototype.getPageProp = BookModel.prototype.getPageProp;
-exposeOverrideableMethod(BookModel, '_models.book', 'getPageProp');
-BookReader.prototype.getSpreadIndices = BookModel.prototype.getSpreadIndices;
-exposeOverrideableMethod(BookModel, '_models.book', 'getSpreadIndices');
-BookReader.prototype.leafNumToIndex = BookModel.prototype.leafNumToIndex;
-exposeOverrideableMethod(BookModel, '_models.book', 'leafNumToIndex');
-BookReader.prototype.parsePageString = BookModel.prototype.parsePageString;
-exposeOverrideableMethod(BookModel, '_models.book', 'parsePageString');
-/** @deprecated unused */
-BookReader.prototype._getDataFlattened = BookModel.prototype._getDataFlattened;
-exposeOverrideableMethod(BookModel, '_models.book', '_getDataFlattened');
-/** @deprecated unused */
-BookReader.prototype._getDataProp = BookModel.prototype._getDataProp;
-exposeOverrideableMethod(BookModel, '_models.book', '_getDataProp');
+exposeOverrideableMethod(BookModel, 'book', 'getPageURI');
+
 
 // Parameter related functions
 
@@ -2123,7 +1606,7 @@ BookReader.prototype.updateFromParams = function(params) {
   if (mode) {
     this.switchMode(
       mode,
-      { init: init, suppressFragmentChange: !fragmentChange }
+      { init: init, suppressFragmentChange: !fragmentChange },
     );
   }
 
@@ -2135,7 +1618,7 @@ BookReader.prototype.updateFromParams = function(params) {
     }
   } else if ('undefined' != typeof(params.page)) {
     // $$$ this assumes page numbers are unique
-    if (params.page != this._models.book.getPageNum(this.currentIndex())) {
+    if (params.page != this.book.getPageNum(this.currentIndex())) {
       this.jumpToPage(params.page);
     }
   }
@@ -2169,7 +1652,7 @@ BookReader.prototype.canSwitchToMode = function(mode) {
     // check there are enough pages to display
     // $$$ this is a workaround for the mis-feature that we can't display
     //     short books in 2up mode
-    if (this._models.book.getNumLeafs() < 2) {
+    if (this.book.getNumLeafs() < 2) {
       return false;
     }
   }
@@ -2177,31 +1660,6 @@ BookReader.prototype.canSwitchToMode = function(mode) {
   return true;
 };
 
-
-/**
- * @deprecated. Use PageModel.getURISrcSet. Slated for removal in v5.
- * Returns the srcset with correct URIs or void string if out of range
- * Also makes the reduce argument optional
- * @param {number} index
- * @param {number} [reduce]
- * @param {number} [rotate]
- * @return {string}
- */
-BookReader.prototype._getPageURISrcset = function(index, reduce, rotate) {
-  const page = this._models.book.getPage(index, false);
-  // Synthesize page
-  if (!page) return "";
-
-  // reduce not passed in
-  // $$$ this probably won't work for thumbnail mode
-  if ('undefined' == typeof(reduce)) {
-    reduce = page.height / this.twoPage.height;
-  }
-
-  return page.getURISrcSet(reduce, rotate);
-}
-
-
 /**
  * Returns the page URI or transparent image if out of range
  * Also makes the reduce argument optional
@@ -2211,7 +1669,7 @@ BookReader.prototype._getPageURISrcset = function(index, reduce, rotate) {
  * @return {string}
  */
 BookReader.prototype._getPageURI = function(index, reduce, rotate) {
-  const page = this._models.book.getPage(index, false);
+  const page = this.book.getPage(index, false);
   // Synthesize page
   if (!page) return this.imagesBaseURL + "transparent.png";
 
@@ -2225,21 +1683,37 @@ BookReader.prototype._getPageURI = function(index, reduce, rotate) {
 };
 
 /**
- * @param {string}
+ * @param {string} msg
+ * @param {function|undefined} onCloseCallback
  */
-BookReader.prototype.showProgressPopup = function(msg) {
+BookReader.prototype.showProgressPopup = function(msg, onCloseCallback) {
   if (this.popup) return;
 
   this.popup = document.createElement("div");
   $(this.popup).prop('className', 'BRprogresspopup');
-  var bar = document.createElement("div");
+
+  if (typeof(onCloseCallback) === 'function') {
+    const closeButton = document.createElement('button');
+    closeButton.setAttribute('title', 'close');
+    closeButton.setAttribute('class', 'close-popup');
+    const icon = document.createElement('span');
+    icon.setAttribute('class', 'icon icon-close-dark');
+    $(closeButton).append(icon);
+    closeButton.addEventListener('click', () => {
+      onCloseCallback();
+      this.removeProgressPopup();
+    });
+    $(this.popup).append(closeButton);
+  }
+
+  const bar = document.createElement("div");
   $(bar).css({
-    height:   '20px'
+    height:   '20px',
   }).prop('className', 'BRprogressbar');
   $(this.popup).append(bar);
 
   if (msg) {
-    var msgdiv = document.createElement("div");
+    const msgdiv = document.createElement("div");
     msgdiv.innerHTML = msg;
     $(this.popup).append(msgdiv);
   }
@@ -2261,7 +1735,7 @@ BookReader.prototype.initUIStrings = function() {
   // the toolbar and nav bar easier
 
   // Setup tooltips -- later we could load these from a file for i18n
-  var titles = {
+  const titles = {
     '.logo': 'Go to Archive.org', // $$$ update after getting OL record
     '.zoom_in': 'Zoom in',
     '.zoom_out': 'Zoom out',
@@ -2277,8 +1751,6 @@ BookReader.prototype.initUIStrings = function() {
     '.full': 'Toggle fullscreen',
     '.book_left': 'Flip left',
     '.book_right': 'Flip right',
-    '.book_up': 'Page up',
-    '.book_down': 'Page down',
     '.play': 'Play',
     '.pause': 'Pause',
     '.BRdn': 'Show/hide nav bar', // Would have to keep updating on state change to have just "Hide nav bar"
@@ -2293,10 +1765,10 @@ BookReader.prototype.initUIStrings = function() {
     titles['.book_rightmost'] = 'First page';
   }
 
-  for (var icon in titles) {
+  for (const icon in titles) {
     this.$(icon).prop('title', titles[icon]);
   }
-}
+};
 
 /**
  * Reloads images. Useful when some images might have failed.
@@ -2304,7 +1776,7 @@ BookReader.prototype.initUIStrings = function() {
 BookReader.prototype.reloadImages = function() {
   this.refs.$brContainer.find('img').each(function(index, elem) {
     if (!elem.complete || elem.naturalHeight === 0) {
-      var src = elem.src;
+      const src = elem.src;
       elem.src = '';
       setTimeout(function() {
         elem.src = src;
@@ -2318,16 +1790,16 @@ BookReader.prototype.reloadImages = function() {
  * @return {number}
  */
 BookReader.prototype.getFooterHeight = function() {
-  var $heightEl = this.mode == this.constMode2up ? this.refs.$BRfooter : this.refs.$BRnav;
+  const $heightEl = this.mode == this.constMode2up ? this.refs.$BRfooter : this.refs.$BRnav;
   if ($heightEl && this.refs.$BRfooter) {
-    var outerHeight = $heightEl.outerHeight();
-    var bottom = parseInt(this.refs.$BRfooter.css('bottom'));
+    const outerHeight = $heightEl.outerHeight();
+    const bottom = parseInt(this.refs.$BRfooter.css('bottom'));
     if (!isNaN(outerHeight) && !isNaN(bottom)) {
       return outerHeight + bottom;
     }
   }
   return 0;
-}
+};
 
 // Basic Usage built-in Methods (can be overridden through options)
 // This implementation uses options.data value for populating BookReader
@@ -2337,10 +1809,11 @@ BookReader.prototype.getFooterHeight = function() {
  * @return {Object}
  */
 BookReader.prototype.paramsFromCurrent = function() {
-  var params = {};
+  const params = {};
 
-  var index = this.currentIndex();
-  var pageNum = this._models.book.getPageNum(index);
+  // Path params
+  const index = this.currentIndex();
+  const pageNum = this.book.getPageNum(index);
   if ((pageNum === 0) || pageNum) {
     params.page = pageNum;
   }
@@ -2348,10 +1821,17 @@ BookReader.prototype.paramsFromCurrent = function() {
   params.index = index;
   params.mode = this.mode;
 
+  // Unused params
   // $$$ highlight
   // $$$ region
 
-  // search
+  // Querystring params
+  // View
+  const fullscreenView = 'theater';
+  if (this.isFullscreenActive) {
+    params.view = fullscreenView;
+  }
+  // Search
   if (this.enableSearch) {
     params.search = this.searchTerm;
   }
@@ -2372,7 +1852,7 @@ BookReader.prototype.paramsFromCurrent = function() {
  * @return {Object}
  */
 BookReader.prototype.paramsFromFragment = function(fragment) {
-  var params = {};
+  const params = {};
 
   // For backwards compatibility we allow an initial # character
   // (as from window.location.hash) but don't require it
@@ -2381,7 +1861,7 @@ BookReader.prototype.paramsFromFragment = function(fragment) {
   }
 
   // Simple #nn syntax
-  var oldStyleLeafNum = parseInt( /^\d+$/.exec(fragment) );
+  const oldStyleLeafNum = parseInt( /^\d+$/.exec(fragment) );
   if ( !isNaN(oldStyleLeafNum) ) {
     params.index = oldStyleLeafNum;
 
@@ -2390,9 +1870,9 @@ BookReader.prototype.paramsFromFragment = function(fragment) {
   }
 
   // Split into key-value pairs
-  var urlArray = fragment.split('/');
-  var urlHash = {};
-  for (var i = 0; i < urlArray.length; i += 2) {
+  const urlArray = fragment.split('/');
+  const urlHash = {};
+  for (let i = 0; i < urlArray.length; i += 2) {
     urlHash[urlArray[i]] = urlArray[i + 1];
   }
 
@@ -2408,7 +1888,7 @@ BookReader.prototype.paramsFromFragment = function(fragment) {
   // Index and page
   if ('undefined' != typeof(urlHash['page'])) {
     // page was set -- may not be int
-    params.page = urlHash['page'];
+    params.page = decodeURIComponent(urlHash['page']);
   }
 
   // $$$ process /region
@@ -2422,7 +1902,7 @@ BookReader.prototype.paramsFromFragment = function(fragment) {
 
   // $$$ process /theme
   if (urlHash['theme'] != undefined) {
-    params.theme = urlHash['theme']
+    params.theme = urlHash['theme'];
   }
   return params;
 };
@@ -2440,11 +1920,10 @@ BookReader.prototype.paramsFromFragment = function(fragment) {
  * @return {string}
  */
 BookReader.prototype.fragmentFromParams = function(params, urlMode = 'hash') {
-  const separator = '/';
   const fragments = [];
 
   if ('undefined' != typeof(params.page)) {
-    fragments.push('page', params.page);
+    fragments.push('page', encodeURIComponent(params.page));
   } else {
     if ('undefined' != typeof(params.index)) {
       // Don't have page numbering but we do have the index
@@ -2470,15 +1949,18 @@ BookReader.prototype.fragmentFromParams = function(params, urlMode = 'hash') {
 
   // search
   if (params.search && urlMode === 'hash') {
-    fragments.push('search', params.search);
+    fragments.push('search', utils.encodeURIComponentPlus(params.search));
   }
 
-  return utils.encodeURIComponentPlus(fragments.join(separator)).replace(/%2F/g, '/');
+  return fragments.join('/');
 };
 
 /**
  * Create, update querystring from the params object
  *
+ * Handles:
+ *  view=
+ *  q=
  * @param {Object} params
  * @param {string} currQueryString
  * @param {string} [urlMode]
@@ -2487,30 +1969,32 @@ BookReader.prototype.fragmentFromParams = function(params, urlMode = 'hash') {
 BookReader.prototype.queryStringFromParams = function(
   params,
   currQueryString,
-  urlMode = 'hash'
+  urlMode = 'hash',
 ) {
   const newParams = new URLSearchParams(currQueryString);
+
+  if (params.view) {
+    // Set ?view=theater when fullscreen
+    newParams.set('view', params.view);
+  } else {
+    // Remove
+    newParams.delete('view');
+  }
+
   if (params.search && urlMode === 'history') {
-    newParams.set('q', params.search)
+    newParams.set('q', params.search);
   }
   // https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString
   // Note: This method returns the query string without the question mark.
   const result = newParams.toString();
   return result ? '?' + result : '';
-}
+};
 
 /**
  * Helper to select within instance's elements
  */
 BookReader.prototype.$ = function(selector) {
   return this.refs.$br.find(selector);
-}
-
-/**
- * Polyfill for deprecated method
- */
-jQuery.curCSS = function(element, prop, val) {
-  return jQuery(element).css(prop, val);
 };
 
 window.BookReader = BookReader;