@internetarchive/bookreader 5.0.0-18

package/src/plugins/search/view.js

@@ -0,0 +1,440 @@
+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({ br, searchCancelledCallback = () => {} }) {
+    this.br = br;
+
+    // Search results are returned as a text blob with the hits wrapped in
+    // triple mustaches. Hits occasionally include text beyond the search
+    // term, so everything within the staches is captured and wrapped.
+    this.matcher = new RegExp('{{{(.+?)}}}', 'g');
+    this.matches = [];
+    this.cacheDOMElements();
+    this.bindEvents();
+    this.cancelSearch = searchCancelledCallback;
+  }
+
+  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(dispatchEventWhenComplete = true) {
+    this.br.removeSearchResults();
+    this.removeResultPins();
+    this.emptyMatches();
+    this.setQuery('');
+    this.teardownSearchNavigation();
+    if (dispatchEventWhenComplete) {
+      this.br.trigger('SearchResultsCleared');
+    }
+  }
+
+  toggleSidebar() {
+    this.br.trigger('ToggleSearchMenu');
+  }
+
+  renderSearchNavigation() {
+    const selector = 'BRsearch-navigation';
+    $('.BRnav').before(`
+      <div class="${selector}">
+        <button class="toggle-sidebar">
+          <h4>
+            <span class="icon icon-search"></span> Results
+          </h4>
+        </button>
+        <div class="pagination">
+          <button class="prev" title="Previous result"><span class="icon icon-chevron hflip"></span></button>
+          <span data-id="resultsCount">${this.resultsPosition()}</span>
+          <button class="next" title="Next result"><span class="icon icon-chevron"></button>
+        </div>
+        <button class="clear" title="Clear search results">
+          <span class="icon icon-close"></span>
+        </button>
+      </div>
+    `);
+    this.dom.searchNavigation = $(`.${selector}`);
+  }
+
+  resultsPosition() {
+    let positionMessage = `${this.matches.length} result${this.matches.length === 1 ? '' : 's'}`;
+    if (~this.currentMatchIndex) {
+      positionMessage = `${this.currentMatchIndex + 1} / ${this.matches.length}`;
+    }
+    return positionMessage;
+  }
+
+  bindSearchNavigationEvents() {
+    if (!this.dom.searchNavigation) { return; }
+    const namespace = 'searchNavigation';
+
+    this.dom.searchNavigation
+      .on(`click.${namespace}`, '.clear', this.clearSearchFieldAndResults.bind(this))
+      .on(`click.${namespace}`, '.prev', this.showPrevResult.bind(this))
+      .on(`click.${namespace}`, '.next', this.showNextResult.bind(this))
+      .on(`click.${namespace}`, '.toggle-sidebar', this.toggleSidebar.bind(this))
+      .on(`click.${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) {
+    const matchPages = this.matches.map((m) => m.par[0].page);
+    const currentPage = this.br.currentIndex() + 1;
+    const closestTo = (pool, comparator) => {
+      if (pool.length === 1) { return pool[0]; }
+      const start = pool.slice(0, pool.length / 2);
+      const end = pool.slice(pool.length / 2);
+      return closestTo((comparisonFn(start, end, comparator) ? start : end), comparator);
+    };
+
+    const closestPage = closestTo(matchPages, currentPage);
+    return this.matches.indexOf(this.matches.find((m) => m.par[0].page === closestPage));
+  }
+
+  updateResultsPosition() {
+    this.dom.searchNavigation.find('[data-id=resultsCount]').text(this.resultsPosition());
+  }
+
+  updateSearchNavigationButtons() {
+    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() {
+    let 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) {
+    const pinsVisibleState = bool ? 'visible' : 'hidden';
+    this.br.refs.$BRfooter.find('.BRsearch').css({ visibility: pinsVisibleState });
+  }
+
+  buildToolbarSearch() {
+    const toolbarSearch = document.createElement('span');
+    toolbarSearch.classList.add('BRtoolbarSection', 'BRtoolbarSectionSearch');
+    toolbarSearch.innerHTML = `
+      <form class="BRbooksearch desktop">
+        <input type="search" name="query" class="BRsearchInput" value="" placeholder="Search inside"/>
+        <button type="submit" class="BRsearchSubmit">
+          <img src="${this.br.imagesBaseURL}icon_search_button.svg" />
+        </button>
+      </form>
+    `;
+    return toolbarSearch;
+  }
+
+  /**
+   * @param {array} matches
+   */
+  renderPins(matches) {
+    matches.forEach((match) => {
+      const queryString = match.text;
+      const pageIndex = this.br.leafNumToIndex(match.par[0].page);
+      const pageNumber = this.br.getPageNum(pageIndex);
+      const uiStringSearch = "Search result"; // i18n
+      const uiStringPage = "Page"; // i18n
+
+      const percentThrough = this.br.constructor.util.cssPercentage(pageIndex, this.br.getNumLeafs() - 1);
+
+      const queryStringWithB = queryString.replace(this.matcher, '<b>$1</b>');
+
+      let queryStringWithBTruncated = '';
+
+      if (queryString.length > 100) {
+        queryStringWithBTruncated = queryString
+          .replace(/^(.{100}[^\s]*).*/, "$1")
+          .replace(this.matcher, '<b>$1</b>')
+                + '...';
+      }
+
+      // draw marker
+      $('<div>')
+        .addClass('BRsearch')
+        .css({
+          left: percentThrough,
+        })
+        .attr('title', uiStringSearch)
+        .append(`
+          <div class="BRquery">
+            <div>${queryStringWithBTruncated || queryStringWithB}</div>
+            <div>${uiStringPage} ${pageNumber}</div>
+          </div>
+        `)
+        .data({ pageIndex })
+        .appendTo(this.br.$('.BRnavline'))
+        .hover(
+          (event) => {
+            // remove from other markers then turn on just for this
+            // XXX should be done when nav slider moves
+            const marker = event.currentTarget;
+            const tooltip = marker.querySelector('.BRquery');
+            const tooltipOffset = tooltip.getBoundingClientRect();
+            const targetOffset = marker.getBoundingClientRect();
+            const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
+            if (tooltipOffset.x - boxSizeAdjust < 0) {
+              tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
+            }
+            $('.BRsearch,.BRchapter').removeClass('front');
+            $(event.target).addClass('front');
+          },
+          (event) => $(event.target).removeClass('front'))
+        .click(function (event) {
+          // closures are nested and deep, using an arrow function breaks references.
+          // Todo: update to arrow function & clean up closures
+          // to remove `bind` dependency
+          this.br._searchPluginGoToResult(+$(event.target).data('pageIndex'));
+        }.bind(this));
+    });
+  }
+
+  /**
+   * @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(textIsProcessing = false) {
+    const errorDetails = `${!textIsProcessing ? 'The text may still be processing. ' : ''}Please try again.`;
+    this.renderModalMessage(`
+      Sorry, there was an error with your search.
+      <br />
+      ${errorDetails}
+    `);
+    this.delayModalRemovalFor(4000);
+  }
+
+  renderBookNotIndexedModal() {
+    this.renderModalMessage(`
+      <p>
+         This book hasn't been indexed for searching yet.
+         We've just started indexing it, so search should be available soon.
+         <br />
+         Please try again later. Thanks!
+      </p>
+    `);
+    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) {
+    const 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();
+    const 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, { results, options }) {
+    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();
+    }
+  }
+
+  /**
+   * @param {Event} e
+   */
+  handleNavToggledCallback(e) {
+    const is_visible = this.br.navigationIsVisible();
+    this.togglePinsFor(is_visible);
+  }
+
+  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(event = {}) {
+    this.toggleSearchPending(false);
+    const isIndexed = event?.detail?.props?.results?.indexed;
+    this.renderErrorModal(isIndexed);
+  }
+
+  handleSearchCallbackBookNotIndexed() {
+    this.toggleSearchPending(false);
+    this.renderBookNotIndexedModal();
+  }
+
+  handleSearchCallbackEmpty() {
+    this.toggleSearchPending(false);
+    this.renderResultsEmptyModal();
+  }
+
+  bindEvents() {
+    const namespace = 'BookReader:';
+
+    window.addEventListener(`${namespace}SearchCallbackError`, this.handleSearchCallbackError.bind(this));
+    $(document).on(`${namespace}SearchCallback`, this.handleSearchCallback.bind(this))
+      .on(`${namespace}navToggled`, this.handleNavToggledCallback.bind(this))
+      .on(`${namespace}SearchStarted`, this.handleSearchStarted.bind(this))
+      .on(`${namespace}SearchCallbackBookNotIndexed`, this.handleSearchCallbackBookNotIndexed.bind(this))
+      .on(`${namespace}SearchCallbackEmpty`, this.handleSearchCallbackEmpty.bind(this))
+      .on(`${namespace}pageChanged`, this.updateSearchNavigation.bind(this));
+
+    this.dom.toolbarSearch.querySelector('form').addEventListener('submit', this.submitHandler.bind(this));
+  }
+}
+
+export default SearchView;

package/src/plugins/tts/AbstractTTSEngine.js

@@ -0,0 +1,242 @@
+import PageChunkIterator from './PageChunkIterator.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
+ **/
+
+/** Handling bookreader's text-to-speech */
+export default class AbstractTTSEngine {
+  /**
+   * @protected
+   * @param {TTSEngineOptions} options
+   */
+  constructor(options) {
+    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.voice = AbstractTTSEngine.getBestBookVoice(this.getVoices(), this.opts.bookLanguage);
+    });
+    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.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._chunkIterator = null;
+    this.activeSound = null;
+    this.events.trigger('stop');
+  }
+
+  /** @public */
+  pause() {
+    const fireEvent = !this.paused && this.activeSound;
+    this.paused = true;
+    if (this.activeSound) this.activeSound.pause();
+    if (fireEvent) this.events.trigger('pause');
+  }
+
+  /** @public */
+  resume() {
+    const 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() {
+    Promise.all([
+      this.activeSound.stop(),
+      this._chunkIterator.decrement()
+        .then(() => this._chunkIterator.decrement())
+    ])
+      .then(() => this.step());
+  }
+
+  /** @param {number} newRate */
+  setPlaybackRate(newRate) {
+    this.playbackRate = newRate;
+    if (this.activeSound) this.activeSound.setPlaybackRate(newRate);
+  }
+
+  /** @private */
+  step() {
+    this._chunkIterator.next()
+      .then(chunk => {
+        if (chunk == PageChunkIterator.AT_END) {
+          this.stop();
+          this.opts.onDone();
+          return;
+        }
+
+        this.opts.onLoadingStart();
+        const sound = this.createSound(chunk);
+        sound.chunk = chunk;
+        sound.rate = this.playbackRate;
+        sound.voice = this.voice;
+        sound.load(() => this.opts.onLoadingComplete());
+
+        this.opts.onLoadingComplete();
+        return this.opts.beforeChunkPlay(chunk).then(() => sound);
+      })
+      .then(sound => {
+        if (!this.playing) return;
+
+        const playPromise = this.playSound(sound)
+          .then(() => this.opts.afterChunkPlay(sound.chunk));
+        if (this.paused) this.pause();
+        return playPromise;
+      })
+      .then(() => {
+        if (this.playing) return this.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, userLanguages = navigator.languages) {
+    const 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
+    const matchingUserLangs = userLanguages.filter(lang => lang.startsWith(bookLanguage));
+
+    // Try to find voices that intersect these two sets
+    return 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 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) {
+    for (const lang of languages) {
+      // Chrome Android was returning voice languages like `en_US` instead of `en-US`
+      const matchingVoices = voices.filter(v => v.lang.replace('_', '-').startsWith(lang));
+      if (matchingVoices.length) {
+        return matchingVoices.find(v => v.default) || matchingVoices[0];
+      }
+    }
+  }
+}