@internetarchive/bookreader 5.0.0-3 → 5.0.0-30-d

package/src/plugins/search/plugin.search.js

@@ -20,8 +20,13 @@
  *   the book has not had OCR text indexed yet. Receives `instance`
  * @event BookReader:SearchCallbackEmpty - When no results found. Receives
  *   `instance`
+ * @event BookReader:SearchCanceled - When no results found. Receives
+ *   `instance`
  */
+import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.js';
 import SearchView from './view.js';
+/** @typedef {import('../../BookReader/PageContainer').PageContainer} PageContainer */
+/** @typedef {import('../../BookReader/BookModel').PageIndex} PageIndex */
 
 jQuery.extend(BookReader.defaultOptions, {
   server: 'ia600609.us.archive.org',
@@ -42,7 +47,6 @@ BookReader.prototype.setup = (function (super_) {
     this.searchResults = null;
     this.searchInsideUrl = options.searchInsideUrl;
     this.enableSearch = options.enableSearch;
-    this.goToFirstResult = false;
 
     // Base server used by some api calls
     this.bookId = options.bookId;
@@ -50,11 +54,14 @@ BookReader.prototype.setup = (function (super_) {
     this.subPrefix = options.subPrefix;
     this.bookPath = options.bookPath;
 
-    if (this.searchView) { return; }
-    this.searchView = new SearchView({
-      br: this,
-      selector: '#BRsearch_tray',
-    });
+    this.searchXHR = null;
+    this._cancelSearch.bind(this);
+    this.cancelSearchRequest.bind(this);
+
+    /** @type { {[pageIndex: number]: SearchInsideMatchBox[]} } */
+    this._searchBoxesByIndex = {};
+
+    this.searchView = undefined;
   };
 })(BookReader.prototype.setup);
 
@@ -62,28 +69,31 @@ BookReader.prototype.setup = (function (super_) {
 BookReader.prototype.init = (function (super_) {
   return function () {
     super_.call(this);
-
+    // give SearchView the most complete bookreader state
+    this.searchView = new SearchView({
+      br: this,
+      searchCancelledCallback: () => {
+        this._cancelSearch();
+        this.trigger('SearchCanceled', { term: this.searchTerm, instance: this });
+      }
+    });
     if (this.options.enableSearch && this.options.initialSearchTerm) {
+      /**
+       * this.search() take two parameter
+       * 1. this.options.initialSearchTerm - search term
+       * 2. {
+       *  goToFirstResult: this.options.goToFirstResult,
+       *  suppressFragmentChange: false // always want to change fragment in URL
+       * }
+       */
       this.search(
         this.options.initialSearchTerm,
-        { goToFirstResult: this.goToFirstResult, suppressFragmentChange: true }
+        { goToFirstResult: this.options.goToFirstResult, suppressFragmentChange: false }
       );
     }
   };
 })(BookReader.prototype.init);
 
-/** @override */
-BookReader.prototype.buildMobileDrawerElement = (function (super_) {
-  return function () {
-    const $el = super_.call(this);
-    if (!this.enableSearch) { return; }
-    if (this.searchView.dom.mobileSearch) {
-      $el.find('.BRmobileMenu__moreInfoRow').after(this.searchView.dom.mobileSearch);
-    }
-    return $el;
-  };
-})(BookReader.prototype.buildMobileDrawerElement);
-
 /** @override */
 BookReader.prototype.buildToolbarElement = (function (super_) {
   return function () {
@@ -96,6 +106,18 @@ BookReader.prototype.buildToolbarElement = (function (super_) {
   };
 })(BookReader.prototype.buildToolbarElement);
 
+/** @override */
+BookReader.prototype._createPageContainer = (function (super_) {
+  return function (index) {
+    const pageContainer = super_.call(this, index);
+    if (this.enableSearch && pageContainer.page && index in this._searchBoxesByIndex) {
+      const pageIndex = pageContainer.page.index;
+      renderBoxesInPageContainerLayer('searchHiliteLayer', this._searchBoxesByIndex[pageIndex], pageContainer.page, pageContainer.$container[0]);
+    }
+    return pageContainer;
+  };
+})(BookReader.prototype._createPageContainer);
+
 /**
  * @typedef {object} SearchOptions
  * @property {boolean} goToFirstResult
@@ -157,7 +179,15 @@ BookReader.prototype.search = function(term = '', overrides = {}) {
 
   const url = `${baseUrl}${paramStr}`;
 
+  const cleanup = () => {
+    this.searchXHR = null;
+    window.BRSearchInProgress = () => {};
+  };
+
   const processSearchResults = (searchInsideResults) => {
+    if (!this.searchXHR) {
+      return;
+    }
     const responseHasError = searchInsideResults.error || !searchInsideResults.matches.length;
     const hasCustomError = typeof options.error === 'function';
     const hasCustomSuccess = typeof options.success === 'function';
@@ -171,15 +201,49 @@ BookReader.prototype.search = function(term = '', overrides = {}) {
         ? options.success.call(this, searchInsideResults, options)
         : this.BRSearchCallback(searchInsideResults, options);
     }
+    cleanup();
+  };
+
+  const beforeSend = (xhr) => {
+    this.searchXHR = xhr;
+    window.BRSearchInProgress = processSearchResults;
   };
 
-  this.trigger('SearchStarted', { term: this.searchTerm });
+  this.trigger('SearchStarted', { term: this.searchTerm, instance: this });
   return $.ajax({
     url: url,
-    dataType: 'jsonp'
+    dataType: 'jsonp',
+    cache: true,
+    beforeSend,
+    jsonpCallback: 'BRSearchInProgress'
   }).then(processSearchResults);
 };
 
+/**
+ * cancels AJAX Call
+ * emits custom event
+ */
+BookReader.prototype._cancelSearch = function () {
+  this.searchXHR?.abort();
+  this.searchView.clearSearchFieldAndResults(false);
+  this.searchTerm = '';
+  this.searchXHR = null;
+  this.searchResults = [];
+  window.BRSearchInProgress = () => {};
+};
+
+/**
+ * External function to cancel search
+ * checks for term & xhr in flight before running
+ */
+BookReader.prototype.cancelSearchRequest = function () {
+  if (this.searchXHR !== null) {
+    this._cancelSearch();
+    this.searchView.toggleSearchPending();
+    this.trigger('SearchCanceled', { term: this.searchTerm, instance: this });
+  }
+};
+
 /**
   * @typedef {object} SearchInsideMatchBox
   * @property {number} page
@@ -211,15 +275,16 @@ BookReader.prototype.search = function(term = '', overrides = {}) {
  * @param {boolean} options.goToFirstResult
  */
 BookReader.prototype.BRSearchCallback = function(results, options) {
-  this.searchResults = results;
+  this.searchResults = results || [];
 
   this.updateSearchHilites();
   this.removeProgressPopup();
   if (options.goToFirstResult) {
-    this._searchPluginGoToResult(results.matches[0].par[0].page);
+    const pageIndex = this._models.book.leafNumToIndex(results.matches[0].par[0].page);
+    this._searchPluginGoToResult(pageIndex);
   }
   this.trigger('SearchCallback', { results, options, instance: this });
-}
+};
 
 /**
  * Main search results error handler
@@ -259,95 +324,39 @@ BookReader.prototype._BRSearchCallbackError = function(results) {
  * updates search on-page highlights controller
  */
 BookReader.prototype.updateSearchHilites = function() {
-  if (this.constMode2up == this.mode) {
-    this.updateSearchHilites2UP();
-    return;
-  }
-  this.updateSearchHilites1UP();
-};
+  /** @type {SearchInsideMatch[]} */
+  const matches = this.searchResults?.matches || [];
+  /** @type { {[pageIndex: number]: SearchInsideMatch[]} } */
+  const boxesByIndex = {};
 
-/**
- * update search on-page highlights in 1up mode
- */
-BookReader.prototype.updateSearchHilites1UP = function() {
-  const results = this.searchResults;
-  if (null == results) return;
-  results.matches.forEach(match => {
-    match.par[0].boxes.forEach(box => {
+  // Clear any existing svg layers
+  this.removeSearchHilites();
+
+  // Group by pageIndex
+  for (const match of matches) {
+    for (const box of match.par[0].boxes) {
       const pageIndex = this.leafNumToIndex(box.page);
-      const pageIsInView = jQuery.inArray(pageIndex, this.displayedIndices) >= 0;
-      if (pageIsInView) {
-        if (!box.div) {
-          //create a div for the search highlight, and stash it in the box object
-          box.div = document.createElement('div');
-          $(box.div).prop('className', 'BookReaderSearchHilite').appendTo(this.$(`.pagediv${pageIndex}`));
-        }
-        const page = this._models.book.getPage(pageIndex);
-        const highlight = {
-          width: this._modes.mode1Up.physicalInchesToDisplayPixels((box.r - box.l) / page.ppi),
-          height: this._modes.mode1Up.physicalInchesToDisplayPixels((box.b - box.t) / page.ppi),
-          left: this._modes.mode1Up.physicalInchesToDisplayPixels(box.l / page.ppi),
-          top: this._modes.mode1Up.physicalInchesToDisplayPixels(box.t / page.ppi),
-        };
-        $(box.div).css(highlight);
-      } else {
-        if (box.div) {
-          $(box.div).remove();
-          box.div = null;
-        }
-      }
-    });
-  });
-};
+      const pageMatches = boxesByIndex[pageIndex] || (boxesByIndex[pageIndex] = []);
+      pageMatches.push(box);
+    }
+  }
 
-/**
- * update search on-page highlights in 2up mode
- */
-BookReader.prototype.updateSearchHilites2UP = function() {
-  const results = this.searchResults;
+  // update any already created pages
+  for (const [pageIndexString, boxes] of Object.entries(boxesByIndex)) {
+    const pageIndex = parseFloat(pageIndexString);
+    const page = this._models.book.getPage(pageIndex);
+    const pageContainers = this.getActivePageContainerElementsForIndex(pageIndex);
+    pageContainers.forEach(container => renderBoxesInPageContainerLayer('searchHiliteLayer', boxes, page, container));
+  }
 
-  if (results === null) return;
-
-  const { matches } = results;
-  matches.forEach((match) => {
-    match.par[0].boxes.forEach(box => {
-      const pageIndex = this.leafNumToIndex(match.par[0].page);
-      const pageIsInView = jQuery.inArray(pageIndex, this.displayedIndices) >= 0;
-      const { isViewable } = this._models.book.getPage(pageIndex);
-
-      if (pageIsInView && isViewable) {
-        if (!box.div) {
-          //create a div for the search highlight, and stash it in the box object
-          box.div = document.createElement('div');
-          $(box.div).addClass('BookReaderSearchHilite')
-            .appendTo(this.refs.$brTwoPageView);
-        }
-        this.setHilightCss2UP(box.div, pageIndex, box.l, box.r, box.t, box.b);
-      } else {
-        // clear stale reference
-        if (box.div) {
-          $(box.div).remove();
-          box.div = null;
-        }
-      }
-    });
-  });
+  this._searchBoxesByIndex = boxesByIndex;
 };
 
 /**
  * remove search highlights
  */
 BookReader.prototype.removeSearchHilites = function() {
-  const results = this.searchResults;
-  if (null == results || !results.matches) { return; }
-  results.matches.forEach(match => {
-    match.par[0].boxes.forEach(box => {
-      if (null != box.div) {
-        $(box.div).remove();
-        box.div = null;
-      }
-    });
-  });
+  $(this.getActivePageContainerElements()).find('.searchHiliteLayer').remove();
 };
 
 /**

package/src/plugins/search/view.js

@@ -1,75 +1,31 @@
 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;
+  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(params.selector);
+    this.cacheDOMElements();
     this.bindEvents();
+    this.cancelSearch = searchCancelledCallback;
   }
 
-  /**
-   * @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 +34,6 @@ class SearchView {
   }
 
   emptyMatches() {
-    this.dom.results.innerHTML = '';
     this.matches = [];
   }
 
@@ -86,48 +41,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,7 +142,7 @@ 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));
@@ -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');
@@ -363,28 +260,26 @@ class SearchView {
         `)
         .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) {
+        .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'));
-          this.br.updateSearchHilites();
         }.bind(this));
     });
   }
@@ -393,20 +288,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 +348,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 +356,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 +373,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', () => {
@@ -498,7 +390,6 @@ class SearchView {
   handleNavToggledCallback(e) {
     const is_visible = this.br.navigationIsVisible();
     this.togglePinsFor(is_visible);
-    this.toggleSearchTray(is_visible ? !!this.dom.results.querySelector('li') : false);
   }
 
   handleSearchStarted() {
@@ -510,9 +401,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 +424,15 @@ 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

@@ -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 */
@@ -133,6 +134,12 @@ export default class AbstractTTSEngine {
       .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;