@internetarchive/bookreader 5.0.0-9 → 5.0.0-90

package/src/plugins/tts/WebTTSEngine.js

@@ -1,6 +1,7 @@
 /* global br */
 import { isChrome, isFirefox } from '../../util/browserSniffing.js';
-import { sleep, promisifyEvent, isAndroid } from './utils.js';
+import { isAndroid } from './utils.js';
+import { promisifyEvent, sleep } from '../../BookReader/utils.js';
 import AbstractTTSEngine from './AbstractTTSEngine.js';
 /** @typedef {import("./AbstractTTSEngine.js").PageChunk} PageChunk */
 /** @typedef {import("./AbstractTTSEngine.js").AbstractTTSSound} AbstractTTSSound */
@@ -44,7 +45,7 @@ export default class WebTTSEngine extends AbstractTTSEngine {
           // album: 'The Ultimate Collection (Remastered)',
           artwork: [
             { src: br.options.thumbnail, type: 'image/jpg' },
-          ]
+          ],
         });
 
         navigator.mediaSession.setActionHandler('play', () => {
@@ -70,7 +71,22 @@ export default class WebTTSEngine extends AbstractTTSEngine {
   }
 
   /** @override */
-  getVoices() { return speechSynthesis.getVoices(); }
+  getVoices() {
+    const voices = speechSynthesis.getVoices();
+    if (voices.filter(v => v.default).length != 1) {
+      // iOS bug where the default system voice is sometimes
+      // missing from the list
+      voices.unshift({
+        voiceURI: 'bookreader.SystemDefault',
+        name: 'System Default',
+        // Not necessarily true, but very likely
+        lang: navigator.language,
+        default: true,
+        localService: true,
+      });
+    }
+    return voices;
+  }
 
   /** @override */
   createSound(chunk) {
@@ -121,7 +137,11 @@ export class WebTTSSound {
     this.started = false;
 
     this.utterance = new SpeechSynthesisUtterance(this.text.slice(this._charIndex));
-    this.utterance.voice = this.voice;
+    // iOS bug where the default system voice is sometimes
+    // missing from the list
+    if (this.voice?.voiceURI !== 'bookreader.SystemDefault') {
+      this.utterance.voice = this.voice;
+    }
     // Need to also set lang (for some reason); won't set voice on Chrome@Android otherwise
     if (this.voice) this.utterance.lang = this.voice.lang;
     this.utterance.rate = this.rate;
@@ -167,7 +187,7 @@ export class WebTTSSound {
    * left off.
    * @return {Promise<void>}
    */
-  reload() {
+  async reload() {
     // We'll restore the pause state, so copy it here
     const wasPaused = this.paused;
     // Use recent event to determine where we'll restart from
@@ -179,14 +199,12 @@ export class WebTTSSound {
     }
 
     // We can't modify the utterance object, so we have to make a new one
-    return this.stop()
-      .then(() => {
-        this.load();
-        // Instead of playing and immediately pausing, we don't start playing. Note
-        // this is a requirement because pause doesn't work consistently across
-        // browsers.
-        if (!wasPaused) this.play();
-      });
+    await this.stop();
+    this.load();
+    // Instead of playing and immediately pausing, we don't start playing. Note
+    // this is a requirement because pause doesn't work consistently across
+    // browsers.
+    if (!wasPaused) this.play();
   }
 
   play() {
@@ -222,15 +240,16 @@ export class WebTTSSound {
     return endPromise;
   }
 
-  finish() {
-    this.stop().then(() => this.utterance.dispatchEvent(new Event('finish')));
+  async finish() {
+    await this.stop();
+    this.utterance.dispatchEvent(new Event('finish'));
   }
 
   /**
    * @override
    * Will fire a pause event unless already paused
    **/
-  pause() {
+  async pause() {
     if (this.paused) return;
 
     const pausePromise = promisifyEvent(this.utterance, 'pause');
@@ -246,19 +265,18 @@ export class WebTTSSound {
     if (pauseMightNotFire) {
       // wait for it just in case
       const timeoutPromise = sleep(100).then(() => 'timeout');
-      Promise.race([pausePromise, timeoutPromise])
-        .then(result => {
-          // We got our pause event; nothing to do!
-          if (result != 'timeout') return;
-
-          this.utterance.dispatchEvent(new CustomEvent('pause', this._lastEvents.start));
-          // if pause might not work, then we'll stop entirely and restart later
-          if (pauseMightNotWork) this.stop();
-        });
+      const result = await Promise.race([pausePromise, timeoutPromise]);
+      // We got our pause event; nothing to do!
+      if (result != 'timeout') return;
+
+      this.utterance.dispatchEvent(new CustomEvent('pause', this._lastEvents.start));
+
+      // if pause might not work, then we'll stop entirely and restart later
+      if (pauseMightNotWork) this.stop();
     }
   }
 
-  resume() {
+  async resume() {
     if (!this.started) {
       this.play();
       return;
@@ -278,16 +296,15 @@ export class WebTTSSound {
     speechSynthesis.resume();
 
     if (resumeMightNotFire) {
-      Promise.race([resumePromise, sleep(100).then(() => 'timeout')])
-        .then(result => {
-          if (result != 'timeout') return;
-
-          this.utterance.dispatchEvent(new CustomEvent('resume', {}));
-          if (resumeMightNotWork) {
-            const reloadPromise = this.reload();
-            reloadPromise.then(() => this.play());
-          }
-        });
+      const result = await Promise.race([resumePromise, sleep(100).then(() => 'timeout')]);
+
+      if (result != 'timeout') return;
+
+      this.utterance.dispatchEvent(new CustomEvent('resume', {}));
+      if (resumeMightNotWork) {
+        await this.reload();
+        this.play();
+      }
     }
   }
 
@@ -296,6 +313,11 @@ export class WebTTSSound {
     this.reload();
   }
 
+  /** @param {SpeechSynthesisVoice} voice */
+  setVoice(voice) {
+    this.voice = voice;
+    this.reload();
+  }
   /**
    * @private
    * Chrome has a bug where it only plays 15 seconds of TTS and then
@@ -303,45 +325,39 @@ export class WebTTSSound {
    * We avoid this (as described here: https://bugs.chromium.org/p/chromium/issues/detail?id=679437#c15 )
    * by pausing after 14 seconds and ~instantly resuming.
    */
-  _chromePausingBugFix() {
+  async _chromePausingBugFix() {
     const timeoutPromise = sleep(14000).then(() => 'timeout');
     const pausePromise = promisifyEvent(this.utterance, 'pause').then(() => 'paused');
     const endPromise = promisifyEvent(this.utterance, 'end').then(() => 'ended');
-    return Promise.race([timeoutPromise, pausePromise, endPromise])
-      .then(result => {
-        if (location.toString().indexOf('_debugReadAloud=true') != -1) {
-          console.log(`CHROME-PAUSE-HACK: ${result}`);
-        }
-        switch (result) {
-        case 'ended':
-          // audio was stopped/finished; nothing to do
-          break;
-        case 'paused':
-          // audio was paused; wait for resume
-          // Chrome won't let you resume the audio if 14s have passed 🤷‍
-          // We could do the same as before (but resume+pause instead of pause+resume),
-          // but that means we'd _constantly_ be running in the background. So in that
-          // case, let's just restart the chunk
-          Promise.race([
-            promisifyEvent(this.utterance, 'resume'),
-            sleep(14000).then(() => 'timeout'),
-          ])
-            .then(result => {
-              result == 'timeout' ? this.reload() : this._chromePausingBugFix();
-            });
-          break;
-        case 'timeout':
-          // We hit Chrome's secret cut off time. Pause/resume
-          // to be able to keep TTS-ing
-          speechSynthesis.pause();
-          sleep(25)
-            .then(() => {
-              speechSynthesis.resume();
-              this._chromePausingBugFix();
-            });
-          break;
-        }
-      });
+    const result = await Promise.race([timeoutPromise, pausePromise, endPromise]);
+    if (location.toString().indexOf('_debugReadAloud=true') != -1) {
+      console.log(`CHROME-PAUSE-HACK: ${result}`);
+    }
+    switch (result) {
+    case 'ended':
+      // audio was stopped/finished; nothing to do
+      break;
+    case 'paused':
+      // audio was paused; wait for resume
+      // Chrome won't let you resume the audio if 14s have passed 🤷‍
+      // We could do the same as before (but resume+pause instead of pause+resume),
+      // but that means we'd _constantly_ be running in the background. So in that
+      // case, let's just restart the chunk
+      await Promise.race([
+        promisifyEvent(this.utterance, 'resume'),
+        sleep(14000).then(() => 'timeout'),
+      ]);
+      result == 'timeout' ? this.reload() : this._chromePausingBugFix();
+      break;
+    case 'timeout':
+      // We hit Chrome's secret cut off time. Pause/resume
+      // to be able to keep TTS-ing
+      speechSynthesis.pause();
+      await sleep(25);
+      speechSynthesis.resume();
+      this._chromePausingBugFix();
+      break;
+    }
   }
 }