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

package/src/plugins/search/view.js

@@ -1,75 +1,29 @@
 class SearchView {
   /**
    * @param {object} params
-   *   @param {string} params.selector A selector for the element that the search tray will be rendered in
-   *   @param {string} params.query An existing query string
-   *   @param {object} params.br The BookReader instance
+   * @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(params) {
-    if (!params.selector) {
-      console.warn('BookReader::Search - SearchView must be passed a valid CSS selector');
-      return;
-    }
-
-    this.br = params.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');
+  constructor({ br, searchCancelledCallback = () => {} }) {
+    this.br = br;
     this.matches = [];
-    this.cacheDOMElements(params.selector);
+    this.cacheDOMElements();
+    this.cancelSearch = searchCancelledCallback;
+  }
+
+  init() {
     this.bindEvents();
   }
 
-  /**
-   * @param {string} selector A selector for the element that the search tray will be rendered in
-   */
-  cacheDOMElements(selector) {
+  cacheDOMElements() {
     this.dom = {};
-
-    // The parent search tray in mobile menu
-    this.dom.searchTray = this.renderSearchTray(selector);
-    // Container for rendered search results
-    this.dom.results = this.dom.searchTray.querySelector('[data-id="results"]');
-    // Element used to display number of results
-    this.dom.resultsCount = this.dom.searchTray.querySelector('[data-id="results_count"]');
-    // Search input within the mobile search tray
-    this.dom.searchField = this.dom.searchTray.querySelector('[name="query"]');
-    // Waiting indicator displayed while waiting for a search request
-    this.dom.searchPending = this.dom.searchTray.querySelector('[data-id="searchPending"]');
-    // The element added to the mobile menu that is animated into view when
-    // the "search" nav item is clicked
-    this.dom.mobileSearch = this.buildMobileDrawer();
     // Search input within the top toolbar. Will be removed once the mobile menu is replaced.
     this.dom.toolbarSearch = this.buildToolbarSearch();
   }
 
-  /**
-   * @param {boolean} bool
-   */
-  toggleSearchTray(bool = this.dom.searchTray.classList.contains('hidden')) {
-    this.dom.searchTray.classList.toggle('hidden', !bool);
-  }
-
-  /**
-   * @param {boolean} bool
-   */
-  toggleResultsCount(bool) {
-    this.dom.resultsCount.classList.toggle('visible', bool);
-  }
-
-  /**
-   * @param {SearchInsideResults} results
-   */
-  updateResultsCount(results) {
-    this.dom.resultsCount.innerText = `(${results} result${results != 1 ? 's' : ''})`;
-    this.toggleResultsCount(true);
-  }
-
   /**
    * @param {string} query
    */
@@ -78,7 +32,6 @@ class SearchView {
   }
 
   emptyMatches() {
-    this.dom.results.innerHTML = '';
     this.matches = [];
   }
 
@@ -86,48 +39,20 @@ class SearchView {
     this.br.$('.BRnavpos .BRsearch').remove();
   }
 
-  clearSearchFieldAndResults() {
+  clearSearchFieldAndResults(dispatchEventWhenComplete = true) {
     this.br.removeSearchResults();
-    this.toggleResultsCount(false);
     this.removeResultPins();
     this.emptyMatches();
     this.setQuery('');
     this.teardownSearchNavigation();
-    this.br.trigger('SearchResultsCleared');
+    if (dispatchEventWhenComplete) {
+      this.br.trigger('SearchResultsCleared');
+    }
   }
 
   toggleSidebar() {
     this.br.trigger('ToggleSearchMenu');
   }
-  /**
-   * @param {string} selector The ID attribute to be used for the search tray
-   */
-  renderSearchTray(selector) {
-    const searchTray = document.createElement('div');
-    searchTray.setAttribute('id', selector.replace(/^#/, ''));
-    searchTray.innerHTML = `
-      <header>
-        <div>
-          <h3>Search inside</h3>
-          <p data-id="results_count"></p>
-        </div>
-        <a href="#" class="close"></a>
-      </header>
-      <form action="" method="get">
-        <fieldset>
-          <input name="all_files" id="all_files" type="checkbox" />
-          <label class="checkbox" for="all_files">Search all files</label>
-          <input type="search" name="query" placeholder="Enter a search term" />
-        </fieldset>
-      </form>
-      <div data-id="searchPending" id="search_pending">
-        <p>Your search results will appear below</p>
-        <div class="loader tc mt20"></div>
-      </div>
-      <ul data-id="results"></ul>
-    `;
-    return searchTray;
-  }
 
   renderSearchNavigation() {
     const selector = 'BRsearch-navigation';
@@ -215,17 +140,19 @@ class SearchView {
       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() {
+    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);
   }
@@ -272,19 +199,6 @@ class SearchView {
     this.updateSearchNavigationButtons();
   }
 
-  /**
-   * @param {array} matches
-   */
-  renderMatches(matches) {
-    const items = matches.map((match) => `
-      <li data-page="${match.par[0].page}" data-page-index="${this.br.leafNumToIndex(match.par[0].page)}">
-        <h4>Page ${match.par[0].page}</h4>
-        <p>${match.text.replace(this.matcher, '<mark>$1</mark>')}</p>
-      </li>
-    `);
-    this.dom.results.innerHTML = items.join('');
-  }
-
   /**
    * @param {boolean} bool
    */
@@ -293,23 +207,6 @@ class SearchView {
     this.br.refs.$BRfooter.find('.BRsearch').css({ visibility: pinsVisibleState });
   }
 
-  buildMobileDrawer() {
-    const mobileSearch = document.createElement('li');
-    mobileSearch.innerHTML = `
-      <span>
-        <span class="DrawerIconWrapper">
-          <img class="DrawerIcon" src="${this.br.imagesBaseURL}icon_search_button.svg" />
-        </span>
-        Search
-      </span>
-      <div data-id="search_slot">
-      </div>
-    `;
-    mobileSearch.querySelector('[data-id="search_slot"]').appendChild(this.dom.searchTray);
-    mobileSearch.classList.add('BRmobileMenu__search');
-    return mobileSearch;
-  }
-
   buildToolbarSearch() {
     const toolbarSearch = document.createElement('span');
     toolbarSearch.classList.add('BRtoolbarSection', 'BRtoolbarSectionSearch');
@@ -329,25 +226,20 @@ class SearchView {
    */
   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 pageIndex = this.br.book.leafNumToIndex(match.par[0].page);
       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>')
-                + '...';
+      const percentThrough = this.br.constructor.util.cssPercentage(pageIndex, this.br.book.getNumLeafs() - 1);
+
+      let html = match.html;
+      if (html.length > 200) {
+        const 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')
@@ -357,35 +249,27 @@ class SearchView {
         .attr('title', uiStringSearch)
         .append(`
           <div class="BRquery">
-            <div>${queryStringWithBTruncated || queryStringWithB}</div>
-            <div>${uiStringPage} ${pageNumber}</div>
+            <main>${html}</main>
+            <footer>Page ${match.displayPageNumber}</footer>
           </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'));
-          this.br.updateSearchHilites();
-        }.bind(this));
+        .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", () => { this.br._searchPluginGoToResult(match.matchIndex); });
     });
   }
 
@@ -393,20 +277,28 @@ class SearchView {
    * @param {boolean} bool
    */
   toggleSearchPending(bool) {
-    this.dom.searchPending.classList.toggle('visible', bool);
     if (bool) {
-      this.br.showProgressPopup("Search results will appear below...");
+      this.br.showProgressPopup("Search results will appear below...", () => this.progressPopupClosed());
     }
     else {
       this.br.removeProgressPopup();
     }
   }
 
-  renderErrorModal() {
+  /**
+   * 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 />
-      The text may still be processing.
+      ${errorDetails}
     `);
     this.delayModalRemovalFor(4000);
   }
@@ -445,14 +337,6 @@ class SearchView {
     setTimeout(this.br.removeProgressPopup.bind(this.br), timeoutMS);
   }
 
-  openMobileMenu() {
-    this.br.refs.$mmenu.data('mmenu').open();
-  }
-
-  closeMobileMenu() {
-    this.br.refs.$mmenu.data('mmenu').close();
-  }
-
   /**
    * @param {Event} e
    */
@@ -461,7 +345,6 @@ class SearchView {
     const query = e.target.querySelector('[name="query"]').value;
     if (!query.length) { return false; }
     this.br.search(query);
-    this.dom.searchField.blur();
     this.emptyMatches();
     this.toggleSearchPending(true);
     return false;
@@ -479,9 +362,7 @@ class SearchView {
     this.teardownSearchNavigation();
     this.renderSearchNavigation();
     this.bindSearchNavigationEvents();
-    this.renderMatches(results.matches);
     this.renderPins(results.matches);
-    this.updateResultsCount(results.matches.length);
     this.toggleSearchPending(false);
     if (options.goToFirstResult) {
       $(document).one('BookReader:pageChanged', () => {
@@ -492,15 +373,6 @@ class SearchView {
     }
   }
 
-  /**
-   * @param {Event} e
-   */
-  handleNavToggledCallback(e) {
-    const is_visible = this.br.navigationIsVisible();
-    this.togglePinsFor(is_visible);
-    this.toggleSearchTray(is_visible ? !!this.dom.results.querySelector('li') : false);
-  }
-
   handleSearchStarted() {
     this.emptyMatches();
     this.br.removeSearchHilites();
@@ -510,9 +382,14 @@ class SearchView {
     this.setQuery(this.br.searchTerm);
   }
 
-  handleSearchCallbackError() {
+  /**
+   * Event listener for: `BookReader:SearchCallbackError`
+   * @param {CustomEvent} event
+   */
+  handleSearchCallbackError(event = {}) {
     this.toggleSearchPending(false);
-    this.renderErrorModal();
+    const isIndexed = event?.detail?.props?.results?.indexed;
+    this.renderErrorModal(isIndexed);
   }
 
   handleSearchCallbackBookNotIndexed() {
@@ -528,26 +405,14 @@ class SearchView {
   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}SearchCallbackError`, this.handleSearchCallbackError.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.searchTray.addEventListener('submit', this.submitHandler.bind(this));
     this.dom.toolbarSearch.querySelector('form').addEventListener('submit', this.submitHandler.bind(this));
-    this.dom.searchField.addEventListener('search', () => {
-      if (this.dom.searchField.value) { return; }
-      this.clearSearchFieldAndResults();
-    });
-
-    $(this.dom.results).on('click', 'li', (e) => {
-      this.br._searchPluginGoToResult(+e.currentTarget.dataset.pageIndex);
-      this.br.updateSearchHilites();
-      this.closeMobileMenu();
-    });
   }
 }
 

package/src/plugins/tts/AbstractTTSEngine.js

@@ -1,12 +1,12 @@
 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 {import('@/src/util/strings.js').StringWithVars} pageChunkUrl
  * @property {ISO6391} bookLanguage
  * @property {Function} onLoadingStart
  * @property {Function} onLoadingComplete
@@ -28,6 +28,7 @@ import PageChunkIterator from './PageChunkIterator.js';
  * @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 */
@@ -39,6 +40,7 @@ export default class AbstractTTSEngine {
   constructor(options) {
     this.playing = false;
     this.paused = false;
+    /** @type {TTSEngineOptions} */
     this.opts = options;
     /** @type {PageChunkIterator} */
     this._chunkIterator = null;
@@ -50,9 +52,7 @@ export default class AbstractTTSEngine {
     /** @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.on('voiceschanged', this.updateBestVoice);
     this.events.trigger('voiceschanged');
   }
 
@@ -71,17 +71,21 @@ export default class AbstractTTSEngine {
   /** @abstract */
   init() { return null; }
 
+  updateBestVoice = () => {
+    this.voice = AbstractTTSEngine.getBestBookVoice(this.getVoices(), this.opts.bookLanguage);
+  }
+
   /**
    * @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,
+      pageChunkUrl: this.opts.pageChunkUrl,
       pageBufferSize: 5,
     });
 
@@ -92,6 +96,7 @@ export default class AbstractTTSEngine {
   stop() {
     if (this.activeSound) this.activeSound.stop();
     this.playing = false;
+    this.paused = true;
     this._chunkIterator = null;
     this.activeSound = null;
     this.events.trigger('stop');
@@ -124,13 +129,26 @@ export default class AbstractTTSEngine {
   }
 
   /** @public */
-  jumpBackward() {
-    Promise.all([
+  async jumpBackward() {
+    await Promise.all([
       this.activeSound.stop(),
       this._chunkIterator.decrement()
-        .then(() => this._chunkIterator.decrement())
-    ])
-      .then(() => this.step());
+        .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-${this.opts.bookLanguage}`, this.voice.voiceURI);
+    }
+    if (this.activeSound) this.activeSound.setVoice(this.voice);
   }
 
   /** @param {number} newRate */
@@ -140,36 +158,33 @@ export default class AbstractTTSEngine {
   }
 
   /** @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();
-      });
+  async step() {
+    const chunk = await  this._chunkIterator.next();
+    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();
+
+    await this.opts.beforeChunkPlay(chunk);
+
+    if (!this.playing) return;
+
+    const playPromise = await this.playSound(sound)
+      .then(()=> this.opts.afterChunkPlay(sound.chunk));
+
+    if (this.paused) this.pause();
+    await playPromise;
+
+    if (this.playing) return this.step();
   }
 
   /**
@@ -212,10 +227,12 @@ export default class AbstractTTSEngine {
     // 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) ||
+    // 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])
+        || (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)
@@ -223,6 +240,19 @@ export default class AbstractTTSEngine {
         || (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) {
+    const storedVoice = hasLocalStorage() && localStorage.getItem(`BRtts-voice-${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)