@internetarchive/bookreader 5.0.0-88-alpha.7 → 5.0.0-88-alpha.9

package/dist/esm/plugins/search/view.js

@@ -0,0 +1,360 @@
+class SearchView {
+  /**
+   * @param {object} params
+   * @param {object} params.br The BookReader instance
+   * @param {function} params.cancelSearch callback when a user wants to cancel search
+   *
+   * @event BookReader:SearchResultsCleared - when the search results nav gets cleared
+   * @event BookReader:ToggleSearchMenu - when search results menu should toggle
+   */
+  constructor(_ref) {
+    var {
+      br,
+      searchCancelledCallback = () => {}
+    } = _ref;
+    this.br = br;
+    this.matches = [];
+    this.cacheDOMElements();
+    this.cancelSearch = searchCancelledCallback;
+  }
+  init() {
+    this.bindEvents();
+  }
+  cacheDOMElements() {
+    this.dom = {};
+    // Search input within the top toolbar. Will be removed once the mobile menu is replaced.
+    this.dom.toolbarSearch = this.buildToolbarSearch();
+  }
+
+  /**
+   * @param {string} query
+   */
+  setQuery(query) {
+    this.br.$('[name="query"]').val(query);
+  }
+  emptyMatches() {
+    this.matches = [];
+  }
+  removeResultPins() {
+    this.br.$('.BRnavpos .BRsearch').remove();
+  }
+  clearSearchFieldAndResults() {
+    var dispatchEventWhenComplete = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    this.br.removeSearchResults();
+    this.removeResultPins();
+    this.emptyMatches();
+    this.setQuery('');
+    this.teardownSearchNavigation();
+    if (dispatchEventWhenComplete) {
+      this.br.trigger('SearchResultsCleared');
+    }
+  }
+  toggleSidebar() {
+    this.br.trigger('ToggleSearchMenu');
+  }
+  renderSearchNavigation() {
+    var selector = 'BRsearch-navigation';
+    $('.BRnav').before("\n      <div class=\"".concat(selector, "\">\n        <button class=\"toggle-sidebar\">\n          <h4>\n            <span class=\"icon icon-search\"></span> Results\n          </h4>\n        </button>\n        <div class=\"pagination\">\n          <button class=\"prev\" title=\"Previous result\"><span class=\"icon icon-chevron hflip\"></span></button>\n          <span data-id=\"resultsCount\">").concat(this.resultsPosition(), "</span>\n          <button class=\"next\" title=\"Next result\"><span class=\"icon icon-chevron\"></button>\n        </div>\n        <button class=\"clear\" title=\"Clear search results\">\n          <span class=\"icon icon-close\"></span>\n        </button>\n      </div>\n    "));
+    this.dom.searchNavigation = $(".".concat(selector));
+  }
+  resultsPosition() {
+    var positionMessage = "".concat(this.matches.length, " result").concat(this.matches.length === 1 ? '' : 's');
+    if (~this.currentMatchIndex) {
+      positionMessage = "".concat(this.currentMatchIndex + 1, " / ").concat(this.matches.length);
+    }
+    return positionMessage;
+  }
+  bindSearchNavigationEvents() {
+    if (!this.dom.searchNavigation) {
+      return;
+    }
+    var namespace = 'searchNavigation';
+    this.dom.searchNavigation.on("click.".concat(namespace), '.clear', this.clearSearchFieldAndResults.bind(this)).on("click.".concat(namespace), '.prev', this.showPrevResult.bind(this)).on("click.".concat(namespace), '.next', this.showNextResult.bind(this)).on("click.".concat(namespace), '.toggle-sidebar', this.toggleSidebar.bind(this)).on("click.".concat(namespace), false);
+  }
+  showPrevResult() {
+    if (this.currentMatchIndex === 0) {
+      return;
+    }
+    if (this.br.mode === this.br.constModeThumb) {
+      this.br.switchMode(this.br.constMode1up);
+    }
+    if (!~this.currentMatchIndex) {
+      this.currentMatchIndex = this.getClosestMatchIndex((start, end, comparator) => end[0] > comparator) + 1;
+    }
+    this.br.$('.BRnavline .BRsearch').eq(--this.currentMatchIndex).click();
+    this.updateResultsPosition();
+    this.updateSearchNavigationButtons();
+  }
+  showNextResult() {
+    if (this.currentMatchIndex + 1 === this.matches.length) {
+      return;
+    }
+    if (this.br.mode === this.br.constModeThumb) {
+      this.br.switchMode(this.br.constMode1up);
+    }
+    if (!~this.currentMatchIndex) {
+      this.currentMatchIndex = this.getClosestMatchIndex((start, end, comparator) => start[start.length - 1] > comparator) - 1;
+    }
+    this.br.$('.BRnavline .BRsearch').eq(++this.currentMatchIndex).click();
+    this.updateResultsPosition();
+    this.updateSearchNavigationButtons();
+  }
+
+  /**
+   * Obtains closest match based on the logical comparison function passed in.
+   * When the comparison function returns true, the starting (left) half of the
+   * matches array is used in the binary split, else the ending (right) half is
+   * used. A recursive call is made to perform the same split and comparison
+   * on the winning half of the matches. This is traditionally known as binary
+   * search (https://en.wikipedia.org/wiki/Binary_search_algorithm), and in
+   * most cases (medium to large search result arrays) should outperform
+   * traversing the array from start to finish. In the case of small arrays,
+   * the speed difference is negligible.
+   *
+   * @param {function} comparisonFn
+   * @return {number} matchIndex
+   */
+  getClosestMatchIndex(comparisonFn) {
+    var matchPages = this.matches.map(m => m.par[0].page);
+    var currentPage = this.br.currentIndex() + 1;
+    var closestTo = (pool, comparator) => {
+      if (pool.length === 1) {
+        return pool[0];
+      }
+      var start = pool.slice(0, pool.length / 2);
+      var end = pool.slice(pool.length / 2);
+      return closestTo(comparisonFn(start, end, comparator) ? start : end, comparator);
+    };
+    var closestPage = closestTo(matchPages, currentPage);
+    return this.matches.indexOf(this.matches.find(m => m.par[0].page === closestPage));
+  }
+  updateResultsPosition() {
+    if (!this.dom.searchNavigation) return;
+    this.dom.searchNavigation.find('[data-id=resultsCount]').text(this.resultsPosition());
+  }
+  updateSearchNavigationButtons() {
+    if (!this.dom.searchNavigation) return;
+    this.dom.searchNavigation.find('.prev').attr('disabled', !this.currentMatchIndex);
+    this.dom.searchNavigation.find('.next').attr('disabled', this.currentMatchIndex + 1 === this.matches.length);
+  }
+  teardownSearchNavigation() {
+    if (!this.dom.searchNavigation) {
+      this.dom.searchNavigation = $('.BRsearch-navigation');
+    }
+    if (!this.dom.searchNavigation.length) {
+      return;
+    }
+    this.dom.searchNavigation.off('.searchNavigation').remove();
+    this.dom.searchNavigation = null;
+    this.br.resize();
+  }
+  setCurrentMatchIndex() {
+    var matchingSearchResult;
+    if (this.br.mode === this.br.constModeThumb) {
+      this.currentMatchIndex = -1;
+      return;
+    }
+    if (this.br.mode === this.br.constMode2up) {
+      matchingSearchResult = this.find2upMatchingSearchResult();
+    } else {
+      matchingSearchResult = this.find1upMatchingSearchResult();
+    }
+    this.currentMatchIndex = this.matches.indexOf(matchingSearchResult);
+  }
+  find1upMatchingSearchResult() {
+    return this.matches.find(m => this.br.currentIndex() === m.par[0].page - 1);
+  }
+  find2upMatchingSearchResult() {
+    return this.matches.find(m => this.br._isIndexDisplayed(m.par[0].page - 1));
+  }
+  updateSearchNavigation() {
+    if (!this.matches.length) {
+      return;
+    }
+    this.setCurrentMatchIndex();
+    this.updateResultsPosition();
+    this.updateSearchNavigationButtons();
+  }
+
+  /**
+   * @param {boolean} bool
+   */
+  togglePinsFor(bool) {
+    var pinsVisibleState = bool ? 'visible' : 'hidden';
+    this.br.refs.$BRfooter.find('.BRsearch').css({
+      visibility: pinsVisibleState
+    });
+  }
+  buildToolbarSearch() {
+    var toolbarSearch = document.createElement('span');
+    toolbarSearch.classList.add('BRtoolbarSection', 'BRtoolbarSectionSearch');
+    toolbarSearch.innerHTML = "\n      <form class=\"BRbooksearch desktop\">\n        <input type=\"search\" name=\"query\" class=\"BRsearchInput\" value=\"\" placeholder=\"Search inside\"/>\n        <button type=\"submit\" class=\"BRsearchSubmit\">\n          <img src=\"".concat(this.br.imagesBaseURL, "icon_search_button.svg\" />\n        </button>\n      </form>\n    ");
+    return toolbarSearch;
+  }
+
+  /**
+   * @param {array} matches
+   */
+  renderPins(matches) {
+    matches.forEach(match => {
+      var pageIndex = this.br.book.leafNumToIndex(match.par[0].page);
+      var uiStringSearch = "Search result"; // i18n
+      var percentThrough = this.br.constructor.util.cssPercentage(pageIndex, this.br.book.getNumLeafs() - 1);
+      var html = match.html;
+      if (html.length > 200) {
+        var start = Math.max(0, html.indexOf('<mark>') - 100);
+        if (start != 0) {
+          html = '…' + match.html.substring(start)
+          // Make sure at word boundary though
+          .replace(/^\S+/, '');
+        }
+      }
+      // draw marker
+      $('<div>').addClass('BRsearch').css({
+        left: percentThrough
+      }).attr('title', uiStringSearch).append("\n          <div class=\"BRquery\">\n            <main>".concat(html, "</main>\n            <footer>Page ").concat(match.displayPageNumber, "</footer>\n          </div>\n        ")).appendTo(this.br.$('.BRnavline')).on("mouseenter", event => {
+        // remove from other markers then turn on just for this
+        // XXX should be done when nav slider moves
+        var marker = event.currentTarget;
+        var tooltip = marker.querySelector('.BRquery');
+        var tooltipOffset = tooltip.getBoundingClientRect();
+        var targetOffset = marker.getBoundingClientRect();
+        var boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
+        if (tooltipOffset.x - boxSizeAdjust < 0) {
+          tooltip.style.setProperty('transform', "translateX(-".concat(targetOffset.left - boxSizeAdjust, "px)"));
+        }
+        $('.BRsearch,.BRchapter').removeClass('front');
+        $(event.target).addClass('front');
+      }).on("mouseleave", event => $(event.target).removeClass('front')).on("click", () => {
+        this.br._searchPluginGoToResult(match.matchIndex);
+      });
+    });
+  }
+
+  /**
+   * @param {boolean} bool
+   */
+  toggleSearchPending(bool) {
+    if (bool) {
+      this.br.showProgressPopup("Search results will appear below...", () => this.progressPopupClosed());
+    } else {
+      this.br.removeProgressPopup();
+    }
+  }
+
+  /**
+   * Primary callback when user cancels search popup
+   */
+  progressPopupClosed() {
+    this.toggleSearchPending();
+    this.cancelSearch();
+  }
+  renderErrorModal() {
+    var textIsProcessing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var errorDetails = "".concat(!textIsProcessing ? 'The text may still be processing. ' : '', "Please try again.");
+    this.renderModalMessage("\n      Sorry, there was an error with your search.\n      <br />\n      ".concat(errorDetails, "\n    "));
+    this.delayModalRemovalFor(4000);
+  }
+  renderBookNotIndexedModal() {
+    this.renderModalMessage("\n      <p>\n         This book hasn't been indexed for searching yet.\n         We've just started indexing it, so search should be available soon.\n         <br />\n         Please try again later. Thanks!\n      </p>\n    ");
+    this.delayModalRemovalFor(5000);
+  }
+  renderResultsEmptyModal() {
+    this.renderModalMessage('No matches were found.');
+    this.delayModalRemovalFor(2000);
+  }
+
+  /**
+   * @param {string} messageHTML The innerHTML string used to popupate the modal contents
+   */
+  renderModalMessage(messageHTML) {
+    var modal = document.createElement('div');
+    modal.classList.add('BRprogresspopup', 'search_modal');
+    modal.innerHTML = messageHTML;
+    document.querySelector(this.br.el).append(modal);
+  }
+
+  /**
+   * @param {number} timeoutMS
+   */
+  delayModalRemovalFor(timeoutMS) {
+    setTimeout(this.br.removeProgressPopup.bind(this.br), timeoutMS);
+  }
+
+  /**
+   * @param {Event} e
+   */
+  submitHandler(e) {
+    e.preventDefault();
+    var query = e.target.querySelector('[name="query"]').value;
+    if (!query.length) {
+      return false;
+    }
+    this.br.search(query);
+    this.emptyMatches();
+    this.toggleSearchPending(true);
+    return false;
+  }
+
+  /**
+   * @param {Event} e
+   * @param {object} properties
+   *   @param {object} properties.results
+   *   @param {object} properties.options
+   */
+  handleSearchCallback(e, _ref2) {
+    var {
+      results,
+      options
+    } = _ref2;
+    this.matches = results.matches;
+    this.setCurrentMatchIndex();
+    this.teardownSearchNavigation();
+    this.renderSearchNavigation();
+    this.bindSearchNavigationEvents();
+    this.renderPins(results.matches);
+    this.toggleSearchPending(false);
+    if (options.goToFirstResult) {
+      $(document).one('BookReader:pageChanged', () => {
+        this.br.resize();
+      });
+    } else {
+      this.br.resize();
+    }
+  }
+  handleSearchStarted() {
+    this.emptyMatches();
+    this.br.removeSearchHilites();
+    this.removeResultPins();
+    this.toggleSearchPending(true);
+    this.teardownSearchNavigation();
+    this.setQuery(this.br.searchTerm);
+  }
+
+  /**
+   * Event listener for: `BookReader:SearchCallbackError`
+   * @param {CustomEvent} event
+   */
+  handleSearchCallbackError() {
+    var _event$detail;
+    var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    this.toggleSearchPending(false);
+    var isIndexed = event === null || event === void 0 || (_event$detail = event.detail) === null || _event$detail === void 0 || (_event$detail = _event$detail.props) === null || _event$detail === void 0 || (_event$detail = _event$detail.results) === null || _event$detail === void 0 ? void 0 : _event$detail.indexed;
+    this.renderErrorModal(isIndexed);
+  }
+  handleSearchCallbackBookNotIndexed() {
+    this.toggleSearchPending(false);
+    this.renderBookNotIndexedModal();
+  }
+  handleSearchCallbackEmpty() {
+    this.toggleSearchPending(false);
+    this.renderResultsEmptyModal();
+  }
+  bindEvents() {
+    var namespace = 'BookReader:';
+    window.addEventListener("".concat(namespace, "SearchCallbackError"), this.handleSearchCallbackError.bind(this));
+    $(document).on("".concat(namespace, "SearchCallback"), this.handleSearchCallback.bind(this)).on("".concat(namespace, "SearchStarted"), this.handleSearchStarted.bind(this)).on("".concat(namespace, "SearchCallbackBookNotIndexed"), this.handleSearchCallbackBookNotIndexed.bind(this)).on("".concat(namespace, "SearchCallbackEmpty"), this.handleSearchCallbackEmpty.bind(this)).on("".concat(namespace, "pageChanged"), this.updateSearchNavigation.bind(this));
+    this.dom.toolbarSearch.querySelector('form').addEventListener('submit', this.submitHandler.bind(this));
+  }
+}
+export default SearchView;

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

@@ -0,0 +1,282 @@
+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); }); }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import PageChunkIterator from './PageChunkIterator.js';
+import { hasLocalStorage } from './utils.js';
+/** @typedef {import('./utils.js').ISO6391} ISO6391 */
+/** @typedef {import('./PageChunk.js')} PageChunk */
+
+/**
+ * @export
+ * @typedef {Object} TTSEngineOptions
+ * @property {String} server
+ * @property {String} bookPath
+ * @property {ISO6391} bookLanguage
+ * @property {Function} onLoadingStart
+ * @property {Function} onLoadingComplete
+ * @property {Function} onDone called when the entire book is done
+ * @property {function(PageChunk): PromiseLike} beforeChunkPlay will delay the playing of the chunk
+ * @property {function(PageChunk): void} afterChunkPlay fires once a chunk has fully finished
+ */
+
+/**
+ * @typedef {Object} AbstractTTSSound
+ * @property {PageChunk} chunk
+ * @property {boolean} loaded
+ * @property {number} rate
+ * @property {SpeechSynthesisVoice} voice
+ * @property {(callback: Function) => void} load
+ * @property {() => PromiseLike} play
+ * @property {() => Promise} stop
+ * @property {() => void} pause
+ * @property {() => void} resume
+ * @property {() => void} finish force the sound to 'finish'
+ * @property {number => void} setPlaybackRate
+ * @property {SpeechSynthesisVoice => void} setVoice
+ **/
+
+/** Handling bookreader's text-to-speech */
+export default class AbstractTTSEngine {
+  /**
+   * @protected
+   * @param {TTSEngineOptions} options
+   */
+  constructor(options) {
+    _defineProperty(this, "updateBestVoice", () => {
+      this.voice = AbstractTTSEngine.getBestBookVoice(this.getVoices(), this.opts.bookLanguage);
+    });
+    this.playing = false;
+    this.paused = false;
+    this.opts = options;
+    /** @type {PageChunkIterator} */
+    this._chunkIterator = null;
+    /** @type {AbstractTTSSound} */
+    this.activeSound = null;
+    this.playbackRate = 1;
+    /** Events we can bind to */
+    this.events = $({});
+    /** @type {SpeechSynthesisVoice} */
+    this.voice = null;
+    // Listen for voice changes (fired by subclasses)
+    this.events.on('voiceschanged', this.updateBestVoice);
+    this.events.trigger('voiceschanged');
+  }
+
+  /**
+   * @abstract
+   * @return {boolean}
+   */
+  static isSupported() {
+    throw new Error("Unimplemented abstract class");
+  }
+
+  /**
+   * @abstract
+   * @return {SpeechSynthesisVoice[]}
+   */
+  getVoices() {
+    throw new Error("Unimplemented abstract class");
+  }
+
+  /** @abstract */
+  init() {
+    return null;
+  }
+  /**
+   * @param {number} leafIndex
+   * @param {number} numLeafs total number of leafs in the current book
+   */
+  start(leafIndex, numLeafs) {
+    this.playing = true;
+    this.paused = false;
+    this.opts.onLoadingStart();
+    this._chunkIterator = new PageChunkIterator(numLeafs, leafIndex, {
+      server: this.opts.server,
+      bookPath: this.opts.bookPath,
+      pageBufferSize: 5
+    });
+    this.step();
+    this.events.trigger('start');
+  }
+  stop() {
+    if (this.activeSound) this.activeSound.stop();
+    this.playing = false;
+    this.paused = true;
+    this._chunkIterator = null;
+    this.activeSound = null;
+    this.events.trigger('stop');
+  }
+
+  /** @public */
+  pause() {
+    var fireEvent = !this.paused && this.activeSound;
+    this.paused = true;
+    if (this.activeSound) this.activeSound.pause();
+    if (fireEvent) this.events.trigger('pause');
+  }
+
+  /** @public */
+  resume() {
+    var fireEvent = this.paused && this.activeSound;
+    this.paused = false;
+    if (this.activeSound) this.activeSound.resume();
+    if (fireEvent) this.events.trigger('resume');
+  }
+  togglePlayPause() {
+    if (this.paused) this.resume();else this.pause();
+  }
+
+  /** @public */
+  jumpForward() {
+    if (this.activeSound) this.activeSound.finish();
+  }
+
+  /** @public */
+  jumpBackward() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      yield Promise.all([_this.activeSound.stop(), _this._chunkIterator.decrement().then(() => _this._chunkIterator.decrement())]);
+      _this.step();
+    })();
+  }
+
+  /** @param {string} voiceURI */
+  setVoice(voiceURI) {
+    // if the user actively selects a voice, don't re-choose best voice anymore
+    // MS Edge fires voices changed randomly very often
+    this.events.off('voiceschanged', this.updateBestVoice);
+    this.voice = this.getVoices().find(voice => voice.voiceURI === voiceURI);
+    // if the current book has a language set, store the selected voice with the book language as a suffix
+    if (this.opts.bookLanguage && hasLocalStorage()) {
+      localStorage.setItem("BRtts-voice-".concat(this.opts.bookLanguage), this.voice.voiceURI);
+    }
+    if (this.activeSound) this.activeSound.setVoice(this.voice);
+  }
+
+  /** @param {number} newRate */
+  setPlaybackRate(newRate) {
+    this.playbackRate = newRate;
+    if (this.activeSound) this.activeSound.setPlaybackRate(newRate);
+  }
+
+  /** @private */
+  step() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      var chunk = yield _this2._chunkIterator.next();
+      if (chunk == PageChunkIterator.AT_END) {
+        _this2.stop();
+        _this2.opts.onDone();
+        return;
+      }
+      _this2.opts.onLoadingStart();
+      var sound = _this2.createSound(chunk);
+      sound.chunk = chunk;
+      sound.rate = _this2.playbackRate;
+      sound.voice = _this2.voice;
+      sound.load(() => _this2.opts.onLoadingComplete());
+      _this2.opts.onLoadingComplete();
+      yield _this2.opts.beforeChunkPlay(chunk);
+      if (!_this2.playing) return;
+      var playPromise = yield _this2.playSound(sound).then(() => _this2.opts.afterChunkPlay(sound.chunk));
+      if (_this2.paused) _this2.pause();
+      yield playPromise;
+      if (_this2.playing) return _this2.step();
+    })();
+  }
+
+  /**
+   * @abstract
+   * @param {PageChunk} chunk
+   * @return {AbstractTTSSound}
+   */
+  createSound(chunk) {
+    throw new Error("Unimplemented abstract class");
+  }
+
+  /**
+   * @param {AbstractTTSSound} sound
+   * @return {PromiseLike} promise called once playing finished
+   */
+  playSound(sound) {
+    this.activeSound = sound;
+    if (!this.activeSound.loaded) this.opts.onLoadingStart();
+    return this.activeSound.play();
+  }
+
+  /** Convenience wrapper for {@see AbstractTTSEngine.getBestVoice} */
+  getBestVoice() {
+    return AbstractTTSEngine.getBestBookVoice(this.getVoices(), this.opts.bookLanguage);
+  }
+
+  /**
+   * @private
+   * Find the best voice to use given the available voices, the book language, and the user's
+   * languages.
+   * @param {SpeechSynthesisVoice[]} voices
+   * @param {ISO6391} bookLanguage
+   * @param {string[]} userLanguages languages in BCP47 format (e.g. en-US). Ordered by preference.
+   * @return {SpeechSynthesisVoice | undefined}
+   */
+  static getBestBookVoice(voices, bookLanguage) {
+    var userLanguages = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : navigator.languages;
+    var bookLangVoices = voices.filter(v => v.lang.startsWith(bookLanguage));
+    // navigator.languages browser support isn't great yet, so get just 1 language otherwise
+    // Sample navigator.languages: ["en-CA", "fr-CA", "fr", "en-US", "en", "de-DE", "de"]
+    userLanguages = userLanguages || (navigator.language ? [navigator.language] : []);
+
+    // user languages that match the book language
+    var matchingUserLangs = userLanguages.filter(lang => lang.startsWith(bookLanguage));
+
+    // First try to find the last chosen voice from localStorage for the current book language
+    return AbstractTTSEngine.getMatchingStoredVoice(bookLangVoices, bookLanguage)
+    // Try to find voices that intersect these two sets
+    || AbstractTTSEngine.getMatchingVoice(matchingUserLangs, bookLangVoices)
+    // no user languages match the books; let's return the best voice for the book language
+    || bookLangVoices.find(v => v.default) || bookLangVoices[0]
+    // No voices match the book language? let's find a voice in the user's language
+    // and ignore book lang
+    || AbstractTTSEngine.getMatchingVoice(userLanguages, voices)
+    // C'mon! Ok, just read with whatever we got!
+    || voices.find(v => v.default) || voices[0];
+  }
+
+  /**
+   * @private
+   * Get the voice last selected by the user for the book language from localStorage.
+   * Returns undefined if no voice is stored or found.
+   * @param {SpeechSynthesisVoice[]} voices  browser voices to choose from
+   * @param {ISO6391} bookLanguage  book language to look for
+   * @return {SpeechSynthesisVoice | undefined}
+   */
+  static getMatchingStoredVoice(voices, bookLanguage) {
+    var storedVoice = hasLocalStorage() && localStorage.getItem("BRtts-voice-".concat(bookLanguage));
+    return storedVoice ? voices.find(v => v.voiceURI === storedVoice) : undefined;
+  }
+
+  /**
+     * @private
+     * Get the best voice that matches one of the BCP47 languages (order by preference)
+     * @param {string[]} languages in BCP 47 format (e.g. 'en-US', or 'en'); ordered by preference
+     * @param {SpeechSynthesisVoice[]} voices voices to choose from
+     * @return {SpeechSynthesisVoice | undefined}
+     */
+  static getMatchingVoice(languages, voices) {
+    var _loop = function _loop(lang) {
+        // Chrome Android was returning voice languages like `en_US` instead of `en-US`
+        var matchingVoices = voices.filter(v => v.lang.replace('_', '-').startsWith(lang));
+        if (matchingVoices.length) {
+          return {
+            v: matchingVoices.find(v => v.default) || matchingVoices[0]
+          };
+        }
+      },
+      _ret;
+    for (var lang of languages) {
+      _ret = _loop(lang);
+      if (_ret) return _ret.v;
+    }
+  }
+}