@internetarchive/bookreader 5.0.0-38 → 5.0.0-39

package/stat/plugins/search/view.js

@@ -1,439 +0,0 @@
-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'))
-        .on("mouseenter", (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');
-        })
-        .on("mouseleave", (event) => $(event.target).removeClass('front'))
-        .on("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/stat/plugins/tts/AbstractTTSEngine.js

@@ -1,249 +0,0 @@
-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
- * @property {SpeechSynthesisVoice => void} setVoice
- **/
-
-/** 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 */
-  setVoice(voiceURI) {
-    this.voice = this.getVoices().find(voice => voice.voiceURI === 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() {
-    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];
-      }
-    }
-  }
-}