@internetarchive/bookreader 5.0.0-9 → 5.0.0-91

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, DEBUG_READ_ALOUD } 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 */
@@ -12,7 +13,7 @@ import AbstractTTSEngine from './AbstractTTSEngine.js';
  **/
 export default class WebTTSEngine extends AbstractTTSEngine {
   static isSupported() {
-    return typeof(window.speechSynthesis) !== 'undefined' && !/samsungbrowser/i.test(navigator.userAgent);
+    return typeof(window.speechSynthesis) !== 'undefined';
   }
 
   /** @param {TTSEngineOptions} options */
@@ -44,7 +45,11 @@ export default class WebTTSEngine extends AbstractTTSEngine {
           // album: 'The Ultimate Collection (Remastered)',
           artwork: [
             { src: br.options.thumbnail, type: 'image/jpg' },
-          ]
+          ],
+        });
+
+        navigator.mediaSession.setPositionState({
+          duration: Infinity,
         });
 
         navigator.mediaSession.setActionHandler('play', () => {
@@ -70,7 +75,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,18 +141,22 @@ 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;
 
     // Useful for debugging things
-    if (location.toString().indexOf('_debugReadAloud=true') != -1) {
+    if (DEBUG_READ_ALOUD) {
       this.utterance.addEventListener('pause', () => console.log('pause'));
       this.utterance.addEventListener('resume', () => console.log('resume'));
       this.utterance.addEventListener('start', () => console.log('start'));
       this.utterance.addEventListener('end', () => console.log('end'));
-      this.utterance.addEventListener('error', () => console.log('error'));
+      this.utterance.addEventListener('error', ev => console.log('error', ev));
       this.utterance.addEventListener('boundary', () => console.log('boundary'));
       this.utterance.addEventListener('mark', () => console.log('mark'));
       this.utterance.addEventListener('finish', () => console.log('finish'));
@@ -167,7 +191,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 +203,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 +244,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');
@@ -241,25 +264,25 @@ export class WebTTSSound {
     // 2. Pause doesn't work and doesn't fire
     // 3. Pause works but doesn't fire
     const pauseMightNotWork = (isFirefox() && isAndroid());
-    const pauseMightNotFire = isChrome() || pauseMightNotWork;
-
-    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();
-        });
+
+    // Pause sometimes works, but doesn't fire the event, so wait to see if it fires
+    const winner = await Promise.race([pausePromise, sleep(100).then(() => 'timeout')]);
+
+    // We got our pause event; nothing to do!
+    if (winner != 'timeout') return;
+
+    if (DEBUG_READ_ALOUD) {
+      console.log('TTS: Firing pause event manually');
     }
+
+    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() {
-    if (!this.started) {
+  async resume() {
+    if (!this.started || this.stopped) {
       this.play();
       return;
     }
@@ -271,23 +294,24 @@ export class WebTTSSound {
     // 2. Resume works + doesn't fire (Chrome Desktop)
     // 3. Resume doesn't work + doesn't fire (Chrome/FF Android)
     const resumeMightNotWork = (isChrome() && isAndroid()) || (isFirefox() && isAndroid());
-    const resumeMightNotFire = isChrome() || resumeMightNotWork;
 
     // Try resume
     const resumePromise = promisifyEvent(this.utterance, 'resume');
     speechSynthesis.resume();
 
-    if (resumeMightNotFire) {
-      Promise.race([resumePromise, sleep(100).then(() => 'timeout')])
-        .then(result => {
-          if (result != 'timeout') return;
+    const winner = await Promise.race([resumePromise, sleep(100).then(() => 'timeout')]);
+    // We got resume! All is good
+    if (winner != 'timeout') return;
 
-          this.utterance.dispatchEvent(new CustomEvent('resume', {}));
-          if (resumeMightNotWork) {
-            const reloadPromise = this.reload();
-            reloadPromise.then(() => this.play());
-          }
-        });
+    if (DEBUG_READ_ALOUD) {
+      console.log('TTS: Firing resume event manually');
+    }
+
+    // Fake it
+    this.utterance.dispatchEvent(new CustomEvent('resume', {}));
+    if (resumeMightNotWork) {
+      await this.reload();
+      this.play();
     }
   }
 
@@ -296,6 +320,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 +332,58 @@ 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() {
-    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;
+  async _chromePausingBugFix() {
+    if (DEBUG_READ_ALOUD) {
+      console.log('CHROME-PAUSE-HACK: starting');
+    }
+
+    const result = await Promise.race([
+      sleep(14000).then(() => 'timeout'),
+      promisifyEvent(this.utterance, 'pause').then(() => 'pause'),
+      promisifyEvent(this.utterance, 'end').then(() => 'end'),
+      // Some browsers (Edge) trigger error when the utterance is interrupted/stopped
+      promisifyEvent(this.utterance, 'error').then(() => 'error'),
+    ]);
+
+    if (DEBUG_READ_ALOUD) {
+      console.log(`CHROME-PAUSE-HACK: ${result}`);
+    }
+    if (result == 'end' || result == 'error') {
+      // audio was stopped/finished; nothing to do
+      if (DEBUG_READ_ALOUD) {
+        console.log('CHROME-PAUSE-HACK: stopped (end/error)');
+      }
+    } else if (result == 'pause') {
+      // 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
+      const result2 = await Promise.race([
+        promisifyEvent(this.utterance, 'resume').then(() => 'resume'),
+        sleep(14000).then(() => 'timeout'),
+      ]);
+      if (result2 == 'timeout') {
+        if (DEBUG_READ_ALOUD) {
+          console.log('CHROME-PAUSE-HACK: stopped (timed out while paused)');
         }
-      });
+        // We hit Chrome's secret cut off time while paused, and
+        // won't be able to resume normally, so trigger a stop.
+        this.stop();
+      } else {
+        // The user resumed before the cut off! Continue as normal
+        this._chromePausingBugFix();
+      }
+    } else if (result == 'timeout') {
+      // We hit Chrome's secret cut off time while playing.
+      // To be able to keep TTS-ing, quickly pause/resume.
+      speechSynthesis.pause();
+      await sleep(25);
+      speechSynthesis.resume();
+
+      // Listen for more
+      this._chromePausingBugFix();
+    }
   }
 }