@internetarchive/bookreader 5.0.0-88-alpha.8 → 5.0.0-88-alpha.10

package/dist/esm/plugins/tts/plugin.tts.js

@@ -0,0 +1,315 @@
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+/* global BookReader */
+/**
+ * Plugin for Text to Speech in BookReader
+ */
+import FestivalTTSEngine from './FestivalTTSEngine.js';
+import WebTTSEngine from './WebTTSEngine.js';
+import { toISO6391, approximateWordCount } from './utils.js';
+import { en as tooltips } from './tooltip_dict.js';
+import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.js';
+/** @typedef {import('./PageChunk.js').default} PageChunk */
+/** @typedef {import("./AbstractTTSEngine.js").default} AbstractTTSEngine */
+
+// Default options for TTS
+jQuery.extend(BookReader.defaultOptions, {
+  server: 'ia600609.us.archive.org',
+  bookPath: '',
+  enableTtsPlugin: true
+});
+
+// Extend the constructor to add TTS properties
+BookReader.prototype.setup = function (super_) {
+  return function (options) {
+    super_.call(this, options);
+    if (this.options.enableTtsPlugin) {
+      /** @type { {[pageIndex: number]: Array<{ l: number, r: number, t: number, b: number }>} } */
+      this._ttsBoxesByIndex = {};
+      var TTSEngine = WebTTSEngine.isSupported() ? WebTTSEngine : FestivalTTSEngine.isSupported() ? FestivalTTSEngine : null;
+      if (/_forceTTSEngine=(festival|web)/.test(location.toString())) {
+        var engineName = location.toString().match(/_forceTTSEngine=(festival|web)/)[1];
+        TTSEngine = {
+          festival: FestivalTTSEngine,
+          web: WebTTSEngine
+        }[engineName];
+      }
+      if (TTSEngine) {
+        /** @type {AbstractTTSEngine} */
+        this.ttsEngine = new TTSEngine({
+          server: options.server,
+          bookPath: options.bookPath,
+          bookLanguage: toISO6391(options.bookLanguage),
+          onLoadingStart: this.showProgressPopup.bind(this, 'Loading audio...'),
+          onLoadingComplete: this.removeProgressPopup.bind(this),
+          onDone: this.ttsStop.bind(this),
+          beforeChunkPlay: this.ttsBeforeChunkPlay.bind(this),
+          afterChunkPlay: this.ttsSendChunkFinishedAnalyticsEvent.bind(this)
+        });
+      }
+    }
+  };
+}(BookReader.prototype.setup);
+BookReader.prototype.init = function (super_) {
+  return function () {
+    if (this.options.enableTtsPlugin) {
+      // Bind to events
+
+      this.bind(BookReader.eventNames.PostInit, () => {
+        this.$('.BRicon.read').click(() => {
+          this.ttsToggle();
+          return false;
+        });
+        if (this.ttsEngine) {
+          this.ttsEngine.init();
+          if (/[?&]_autoReadAloud=show/.test(location.toString())) {
+            this.ttsStart(false); // false flag is to initiate read aloud controls
+          }
+        }
+      });
+
+      // This is fired when the hash changes by one of the other plugins!
+      // i.e. it will fire every time the page changes -_-
+      // this.bind(BookReader.eventNames.stop, function(e, br) {
+      //     this.ttsStop();
+      // }.bind(this));
+    }
+    super_.call(this);
+  };
+}(BookReader.prototype.init);
+
+/** @override */
+BookReader.prototype._createPageContainer = function (super_) {
+  return function (index) {
+    var pageContainer = super_.call(this, index);
+    if (this.options.enableTtsPlugin && pageContainer.page && index in this._ttsBoxesByIndex) {
+      var pageIndex = pageContainer.page.index;
+      renderBoxesInPageContainerLayer('ttsHiliteLayer', this._ttsBoxesByIndex[pageIndex], pageContainer.page, pageContainer.$container[0]);
+    }
+    return pageContainer;
+  };
+}(BookReader.prototype._createPageContainer);
+
+// Extend buildMobileDrawerElement
+BookReader.prototype.buildMobileDrawerElement = function (super_) {
+  return function () {
+    var $el = super_.call(this);
+    if (this.options.enableTtsPlugin && this.ttsEngine) {
+      $el.find('.BRmobileMenu__moreInfoRow').after($("\n        <li>\n            <span>\n                <span class=\"DrawerIconWrapper\"><img class=\"DrawerIcon\" src=\"".concat(this.imagesBaseURL, "icon_speaker_open.svg\" alt=\"info-speaker\"/></span>\n                Read Aloud\n            </span>\n            <div>\n                <span class=\"larger\">Press to toggle read aloud</span>\n                <br/>\n                <button class=\"BRicon read\"></button>\n            </div>\n        </li>")));
+    }
+    return $el;
+  };
+}(BookReader.prototype.buildMobileDrawerElement);
+
+// Extend initNavbar
+BookReader.prototype.initNavbar = function (super_) {
+  return function () {
+    var $el = super_.call(this);
+    if (this.options.enableTtsPlugin && this.ttsEngine) {
+      this.refs.$BRReadAloudToolbar = $("\n        <ul class=\"read-aloud\">\n          <li>\n            <select class=\"playback-speed\" name=\"playback-speed\" title=\"".concat(tooltips.playbackSpeed, "\">\n              <option value=\"0.25\">0.25x</option>\n              <option value=\"0.5\">0.5x</option>\n              <option value=\"0.75\">0.75x</option>\n              <option value=\"1.0\" selected>1.0x</option>\n              <option value=\"1.25\">1.25x</option>\n              <option value=\"1.5\">1.5x</option>\n              <option value=\"1.75\">1.75x</option>\n              <option value=\"2\">2x</option>\n            </select>\n          </li>\n          <li>\n            <button type=\"button\" name=\"review\" title=\"").concat(tooltips.review, "\">\n              <div class=\"icon icon-review\"></div>\n            </button>\n          </li>\n          <li>\n            <button type=\"button\" name=\"play\" title=\"").concat(tooltips.play, "\">\n              <div class=\"icon icon-play\"></div>\n              <div class=\"icon icon-pause\"></div>\n            </button>\n          </li>\n          <li>\n            <button type=\"button\" name=\"advance\" title=\"").concat(tooltips.advance, "\">\n              <div class=\"icon icon-advance\"></div>\n            </button>\n          </li>\n          <li>\n            <select class=\"playback-voices\" name=\"playback-voice\" style=\"display: none\" title=\"Change read aloud voices\">\n            </select>\n          </li>\n        </ul>\n      "));
+      $el.find('.BRcontrols').prepend(this.refs.$BRReadAloudToolbar);
+      var renderVoiceOption = voices => {
+        return voices.map(voice => "<option value=\"".concat(voice.voiceURI, "\">").concat(voice.lang, " - ").concat(voice.name, "</option>")).join('');
+      };
+      var voiceSortOrder = (a, b) => "".concat(a.lang, " - ").concat(a.name).localeCompare("".concat(b.lang, " - ").concat(b.name));
+      var renderVoicesMenu = voicesMenu => {
+        voicesMenu.empty();
+        var bookLanguage = this.ttsEngine.opts.bookLanguage;
+        var bookLanguages = this.ttsEngine.getVoices().filter(v => v.lang.startsWith(bookLanguage)).sort(voiceSortOrder);
+        var otherLanguages = this.ttsEngine.getVoices().filter(v => !v.lang.startsWith(bookLanguage)).sort(voiceSortOrder);
+        if (this.ttsEngine.getVoices().length > 1) {
+          voicesMenu.append($("<optgroup label=\"Book Language (".concat(bookLanguage, ")\"> ").concat(renderVoiceOption(bookLanguages), " </optgroup>")));
+          voicesMenu.append($("<optgroup label=\"Other Languages\"> ".concat(renderVoiceOption(otherLanguages), " </optgroup>")));
+          voicesMenu.val(this.ttsEngine.voice.voiceURI);
+          voicesMenu.show();
+        } else {
+          voicesMenu.hide();
+        }
+      };
+      var voicesMenu = this.refs.$BRReadAloudToolbar.find('[name=playback-voice]');
+      renderVoicesMenu(voicesMenu);
+      voicesMenu.on("change", ev => this.ttsEngine.setVoice(voicesMenu.val()));
+      this.ttsEngine.events.on('pause resume start', () => this.ttsUpdateState());
+      this.ttsEngine.events.on('voiceschanged', () => renderVoicesMenu(voicesMenu));
+      this.refs.$BRReadAloudToolbar.find('[name=play]').on("click", this.ttsPlayPause.bind(this));
+      this.refs.$BRReadAloudToolbar.find('[name=advance]').on("click", this.ttsJumpForward.bind(this));
+      this.refs.$BRReadAloudToolbar.find('[name=review]').on("click", this.ttsJumpBackward.bind(this));
+      var $rateSelector = this.refs.$BRReadAloudToolbar.find('select[name="playback-speed"]');
+      $rateSelector.on("change", ev => this.ttsEngine.setPlaybackRate(parseFloat($rateSelector.val())));
+      $("<li>\n          <button class=\"BRicon read js-tooltip\" title=\"".concat(tooltips.readAloud, "\">\n            <div class=\"icon icon-read-aloud\"></div>\n            <span class=\"BRtooltip\">").concat(tooltips.readAloud, "</span>\n          </button>\n        </li>")).insertBefore($el.find('.BRcontrols .BRicon.zoom_out').closest('li'));
+    }
+    return $el;
+  };
+}(BookReader.prototype.initNavbar);
+
+// ttsToggle()
+//______________________________________________________________________________
+BookReader.prototype.ttsToggle = function () {
+  if (this.autoStop) this.autoStop();
+  if (this.ttsEngine.playing) {
+    this.ttsStop();
+  } else {
+    this.ttsStart();
+  }
+};
+
+// ttsStart(
+//______________________________________________________________________________
+BookReader.prototype.ttsStart = function () {
+  var startTTSEngine = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  if (this.constModeThumb == this.mode) this.switchMode(this.constMode1up);
+  this.refs.$BRReadAloudToolbar.addClass('visible');
+  this.$('.BRicon.read').addClass('unread active');
+  this.ttsSendAnalyticsEvent('Start');
+  if (startTTSEngine) this.ttsEngine.start(this.currentIndex(), this.book.getNumLeafs());
+};
+BookReader.prototype.ttsJumpForward = function () {
+  if (this.ttsEngine.paused) {
+    this.ttsEngine.resume();
+  }
+  this.ttsEngine.jumpForward();
+};
+BookReader.prototype.ttsJumpBackward = function () {
+  if (this.ttsEngine.paused) {
+    this.ttsEngine.resume();
+  }
+  this.ttsEngine.jumpBackward();
+};
+BookReader.prototype.ttsUpdateState = function () {
+  var isPlaying = !(this.ttsEngine.paused || !this.ttsEngine.playing);
+  this.$('.read-aloud [name=play]').toggleClass('playing', isPlaying);
+};
+BookReader.prototype.ttsPlayPause = function () {
+  if (!this.ttsEngine.playing) {
+    this.ttsToggle();
+  } else {
+    this.ttsEngine.togglePlayPause();
+    this.ttsUpdateState();
+  }
+};
+
+// ttsStop()
+//______________________________________________________________________________
+BookReader.prototype.ttsStop = function () {
+  this.refs.$BRReadAloudToolbar.removeClass('visible');
+  this.$('.BRicon.read').removeClass('unread active');
+  this.ttsSendAnalyticsEvent('Stop');
+  this.ttsEngine.stop();
+  this.ttsRemoveHilites();
+  this.removeProgressPopup();
+};
+
+/**
+ * @param {PageChunk} chunk
+ * @return {PromiseLike<void>} returns once the flip is done
+ */
+BookReader.prototype.ttsBeforeChunkPlay = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(function* (chunk) {
+    yield this.ttsMaybeFlipToIndex(chunk.leafIndex);
+    this.ttsHighlightChunk(chunk);
+    this.ttsScrollToChunk(chunk);
+  });
+  return function (_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+/**
+ * @param {PageChunk} chunk
+ */
+BookReader.prototype.ttsSendChunkFinishedAnalyticsEvent = function (chunk) {
+  this.ttsSendAnalyticsEvent('ChunkFinished-Words', approximateWordCount(chunk.text));
+};
+
+/**
+ * Flip the page if the provided leaf index is not visible
+ * @param {Number} leafIndex
+ */
+BookReader.prototype.ttsMaybeFlipToIndex = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(function* (leafIndex) {
+    if (this.constMode2up != this.mode) {
+      this.jumpToIndex(leafIndex);
+    } else {
+      yield this._modes.mode2Up.mode2UpLit.jumpToIndex(leafIndex);
+    }
+  });
+  return function (_x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+/**
+ * @param {PageChunk} chunk
+ */
+BookReader.prototype.ttsHighlightChunk = function (chunk) {
+  var _this = this;
+  // The poorly-named variable leafIndex
+  var pageIndex = chunk.leafIndex;
+  this.ttsRemoveHilites();
+
+  // group by index; currently only possible to have chunks on one page :/
+  this._ttsBoxesByIndex = {
+    [pageIndex]: chunk.lineRects.map(_ref3 => {
+      var [l, b, r, t] = _ref3;
+      return {
+        l,
+        r,
+        b,
+        t
+      };
+    })
+  };
+
+  // update any already created pages
+  var _loop = function _loop(boxes) {
+    var pageIndex = parseFloat(pageIndexString);
+    var page = _this.book.getPage(pageIndex);
+    var pageContainers = _this.getActivePageContainerElementsForIndex(pageIndex);
+    pageContainers.forEach(container => renderBoxesInPageContainerLayer('ttsHiliteLayer', boxes, page, container));
+  };
+  for (var [pageIndexString, boxes] of Object.entries(this._ttsBoxesByIndex)) {
+    _loop(boxes);
+  }
+};
+
+/**
+ * @param {PageChunk} chunk
+ */
+BookReader.prototype.ttsScrollToChunk = function (chunk) {
+  var _$$last;
+  // It behaves weird if used in thumb mode
+  if (this.constModeThumb == this.mode) return;
+  (_$$last = $(".pagediv".concat(chunk.leafIndex, " .ttsHiliteLayer rect")).last()) === null || _$$last === void 0 || (_$$last = _$$last[0]) === null || _$$last === void 0 || _$$last.scrollIntoView({
+    // Only vertically center the highlight if we're in 1up or in full screen. In
+    // 2up, if we're not fullscreen, the whole body gets scrolled around to try to
+    // center the highlight 🙄 See:
+    // https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move/11041376
+    // Note: nearest doesn't quite work great, because the ReadAloud toolbar is now
+    // full-width, and covers up the last line of the highlight.
+    block: this.constMode1up == this.mode || this.isFullscreenActive ? 'center' : 'nearest',
+    inline: 'center',
+    behavior: 'smooth'
+  });
+};
+
+// ttsRemoveHilites()
+//______________________________________________________________________________
+BookReader.prototype.ttsRemoveHilites = function () {
+  $(this.getActivePageContainerElements()).find('.ttsHiliteLayer').remove();
+  this._ttsBoxesByIndex = {};
+};
+
+/**
+ * @private
+ * Send an analytics event with an optional value. Also attaches the book's language.
+ * @param {string} action
+ * @param {number} [value]
+ */
+BookReader.prototype.ttsSendAnalyticsEvent = function (action, value) {
+  if (this.archiveAnalyticsSendEvent) {
+    var extraValues = {};
+    var mediaLanguage = this.ttsEngine.opts.bookLanguage;
+    if (mediaLanguage) extraValues.mediaLanguage = mediaLanguage;
+    this.archiveAnalyticsSendEvent('BRReadAloud', action, value, extraValues);
+  }
+};

package/dist/esm/plugins/tts/tooltip_dict.js

@@ -0,0 +1,14 @@
+export var en = {
+  advance: 'Advance 10 seconds',
+  play: 'Play',
+  playbackSpeed: 'Playback speed',
+  readAloud: 'Read this book aloud',
+  review: 'Review 10 seconds'
+};
+export var es = {
+  advance: 'Avance 10 segundos',
+  play: 'Jugar',
+  playbackSpeed: 'Velocidad de reproducción',
+  readAloud: 'Lee este libro en voz alta',
+  review: 'Revisar 10 segundos'
+};

package/dist/esm/plugins/tts/utils.js

@@ -0,0 +1,79 @@
+import langs from 'iso-language-codes/js/data.js';
+
+/**
+ * Use regex to approximate word count in a string
+ * @param {string} text
+ * @return {number}
+ */
+export function approximateWordCount(text) {
+  var m = text.match(/\S+/g);
+  return m ? m.length : 0;
+}
+
+/**
+ * Checks whether the current browser is on android
+ * @param {string} [userAgent]
+ * @return {boolean}
+ */
+export function isAndroid() {
+  var userAgent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : navigator.userAgent;
+  return /android/i.test(userAgent);
+}
+
+/**
+ * @typedef {string} ISO6391
+ * Language code in ISO 639-1 format. e.g. en, fr, zh
+ **/
+
+/** Each lang is an array, with each index mapping to a different property */
+var COLUMN_TO_LANG_INDEX = {
+  'Name': 0,
+  'Endonym': 1,
+  'ISO 639-1': 2,
+  'ISO 639-2/T': 3,
+  'ISO 639-2/B': 4
+};
+
+/**
+ * @param {string} language in some format
+ * @return {ISO6391?}
+ */
+export function toISO6391(language) {
+  if (!language) return null;
+  language = language.toLowerCase();
+  return searchForISO6391(language, ['ISO 639-1']) || searchForISO6391(language, ['ISO 639-2/B']) || searchForISO6391(language, ['ISO 639-2/T', 'Endonym', 'Name']);
+}
+
+/**
+ * Searches for the given long in the given columns.
+ * @param {string} language
+ * @param {Array<keyof COLUMN_TO_LANG_INDEX>} columnsToSearch
+ * @return {ISO6391?}
+ */
+function searchForISO6391(language, columnsToSearch) {
+  for (var i = 0; i < langs.length; i++) {
+    for (var colI = 0; colI < columnsToSearch.length; colI++) {
+      var column = columnsToSearch[colI];
+      var columnValue = langs[i][COLUMN_TO_LANG_INDEX[column]];
+      if (columnValue.split(', ').map(x => x.toLowerCase()).indexOf(language) != -1) {
+        return langs[i][COLUMN_TO_LANG_INDEX['ISO 639-1']];
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Checks whether the current browser supports localStorage or
+ * if the current context has access to it.
+ * @return {boolean}
+ */
+export function hasLocalStorage() {
+  try {
+    return !!window.localStorage;
+  } catch (e) {
+    // Will throw in sandboxed iframe
+    // DOMException: Window.localStorage getter: Forbidden in a sandboxed document without the 'allow-same-origin' flag.
+    return false;
+  }
+}

package/dist/esm/plugins/url/UrlPlugin.js

@@ -0,0 +1,197 @@
+export class UrlPlugin {
+  constructor() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    this.bookReaderOptions = options;
+
+    // the canonical order of elements is important in the path and query string
+    this.urlSchema = [{
+      name: 'page',
+      position: 'path',
+      default: 'n0'
+    }, {
+      name: 'mode',
+      position: 'path',
+      default: '2up'
+    }, {
+      name: 'search',
+      position: 'path',
+      deprecated_for: 'q'
+    }, {
+      name: 'q',
+      position: 'query_param'
+    }, {
+      name: 'sort',
+      position: 'query_param'
+    }, {
+      name: 'view',
+      position: 'query_param'
+    }, {
+      name: 'admin',
+      position: 'query_param'
+    }];
+    this.urlState = {};
+    this.urlMode = this.bookReaderOptions.urlMode || 'hash';
+    this.urlHistoryBasePath = this.bookReaderOptions.urlHistoryBasePath || '/';
+    this.urlLocationPollId = null;
+    this.oldLocationHash = null;
+    this.oldUserHash = null;
+  }
+
+  /**
+   * Parse JSON object URL state to string format
+   * Arrange path names in an order that it is positioned on the urlSchema
+   * @param {Object} urlState
+   * @returns {string}
+   */
+  urlStateToUrlString(urlState) {
+    var searchParams = new URLSearchParams();
+    var pathParams = {};
+    Object.keys(urlState).forEach(key => {
+      var _schema, _schema2;
+      var schema = this.urlSchema.find(schema => schema.name === key);
+      if ((_schema = schema) !== null && _schema !== void 0 && _schema.deprecated_for) {
+        schema = this.urlSchema.find(schemaKey => schemaKey.name === schema.deprecated_for);
+      }
+      if (((_schema2 = schema) === null || _schema2 === void 0 ? void 0 : _schema2.position) == 'path') {
+        var _schema3;
+        pathParams[(_schema3 = schema) === null || _schema3 === void 0 ? void 0 : _schema3.name] = urlState[key];
+      } else {
+        var _schema4;
+        searchParams.append(((_schema4 = schema) === null || _schema4 === void 0 ? void 0 : _schema4.name) || key, urlState[key]);
+      }
+    });
+    var strPathParams = this.urlSchema.filter(s => s.position == 'path').map(schema => pathParams[schema.name] ? "".concat(schema.name, "/").concat(encodeURIComponent(pathParams[schema.name])) : '').join('/');
+
+    // replace consecutive slashes with a single slash + remove trailing slashes
+    var strStrippedTrailingSlash = "".concat(strPathParams.replace(/\/+/g, '/').replace(/\/+$/, ''));
+    var concatenatedPath = "".concat(strStrippedTrailingSlash, "?").concat(searchParams.toString());
+    return searchParams.toString() ? concatenatedPath : "".concat(strStrippedTrailingSlash);
+  }
+
+  /**
+   * Parse string URL and add it in the current urlState
+   * Example:
+   *  /page/n7/mode/2up => {page: 'n7', mode: '2up'}
+   *  /page/n7/mode/2up/search/hello => {page: 'n7', mode: '2up', q: 'hello'}
+   * @param {string} urlString
+   * @returns {object}
+   */
+  urlStringToUrlState(urlString) {
+    var urlState = {};
+
+    // Fetch searchParams from given {str}
+    // Note: whole URL path is needed for URL parsing
+    var urlPath = new URL(urlString, 'http://example.com');
+    var urlSearchParamsObj = Object.fromEntries(urlPath.searchParams.entries());
+    var splitUrlMatches = urlPath.pathname.match(/[^\\/]+\/[^\\/]+/g);
+    var urlStrSplitSlashObj = splitUrlMatches ? Object.fromEntries(splitUrlMatches.map(x => x.split('/'))) : {};
+    var doesKeyExists = (_object, _key) => {
+      return Object.keys(_object).some(value => value == _key);
+    };
+
+    // Add path objects to urlState
+    this.urlSchema.filter(schema => schema.position == 'path').forEach(schema => {
+      var hasPropertyKey = doesKeyExists(urlStrSplitSlashObj, schema.name);
+      var hasDeprecatedKey = doesKeyExists(schema, 'deprecated_for') && hasPropertyKey;
+
+      // Not in the URL
+      if (!hasPropertyKey && !hasDeprecatedKey) {
+        return;
+      }
+      var urlStateParam = hasDeprecatedKey ? schema.deprecated_for : schema.name;
+      urlState[urlStateParam] = decodeURIComponent(urlStrSplitSlashObj[schema.name]);
+    });
+
+    // Add searchParams to urlState
+    Object.entries(urlSearchParamsObj).forEach(_ref => {
+      var [key, value] = _ref;
+      urlState[key] = value;
+    });
+    return urlState;
+  }
+
+  /**
+   * Add or update key-value to the urlState
+   * @param {string} key
+   * @param {string} val
+   */
+  setUrlParam(key, value) {
+    this.urlState[key] = value;
+    this.pushToAddressBar();
+  }
+
+  /**
+   * Delete key-value to the urlState
+   * @param {string} key
+   */
+  removeUrlParam(key) {
+    delete this.urlState[key];
+    this.pushToAddressBar();
+  }
+
+  /**
+   * Get key-value from the urlState
+   * @param {string} key
+   * @return {string}
+   */
+  getUrlParam(key) {
+    return this.urlState[key];
+  }
+
+  /**
+   * Push URL params to addressbar
+   */
+  pushToAddressBar() {
+    var urlStrPath = this.urlStateToUrlString(this.urlState);
+    var concatenatedPath = urlStrPath !== '/' ? urlStrPath : '';
+    if (this.urlMode == 'history') {
+      if (!window.history || !window.history.replaceState) {
+        this.options.urlMode = 'hash';
+      } else {
+        var newUrlPath = "".concat(this.urlHistoryBasePath).concat(concatenatedPath).trim().replace(/(\/+)/g, '/');
+        try {
+          window.history.replaceState({}, null, newUrlPath);
+        } catch (e) {
+          // DOMException on Chrome when in sandboxed iframe
+          this.urlMode = 'hash';
+        }
+      }
+    }
+    if (this.urlMode == 'hash') {
+      window.location.replace('#' + concatenatedPath);
+    }
+    this.oldLocationHash = urlStrPath;
+  }
+
+  /**
+   * Get the url and check if it has changed
+   * If it was changeed, update the urlState
+   */
+  listenForHashChanges() {
+    this.oldLocationHash = window.location.hash.substr(1);
+    if (this.urlLocationPollId) {
+      clearInterval(this.urlLocationPollId);
+      this.urlLocationPollId = null;
+    }
+
+    // check if the URL changes
+    var updateHash = () => {
+      var newFragment = window.location.hash.substr(1);
+      var hasFragmentChange = newFragment != this.oldLocationHash;
+      if (!hasFragmentChange) {
+        return;
+      }
+      this.urlState = this.urlStringToUrlState(newFragment);
+    };
+    this.urlLocationPollId = setInterval(updateHash, 500);
+  }
+
+  /**
+   * Will read either the hash or URL and return the bookreader fragment
+   */
+  pullFromAddressBar() {
+    var location = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.location;
+    var path = this.urlMode === 'history' ? location.pathname.substr(this.urlHistoryBasePath.length) + location.search : location.hash.substr(1);
+    this.urlState = this.urlStringToUrlState(path);
+  }
+}