proper progress tracking in options page's voice test function

ken107 · ken107 · commit 9c5e9f7880e1 · 2026-01-28T09:34:38.000+07:00
- show progress spinner while loading (was not working correctly)
- display Stop button to allow user to stop speech
- ensure error message is shown if any error occurs
diff --git a/_locales/ar/messages.json b/_locales/ar/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "إعادة تعيين"
   },
+  "options_stop_button": {
+    "message": "إيقاف"
+  },
   "options_logged_in_as": {
     "message": "تسجيل الدخول باسم"
   },
diff --git a/_locales/cs/messages.json b/_locales/cs/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Obnovit"
   },
+  "options_stop_button": {
+    "message": "Zastavit"
+  },
   "options_logged_in_as": {
     "message": "Přihlášen jako"
   },
diff --git a/_locales/da/messages.json b/_locales/da/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Nulstil"
   },
+  "options_stop_button": {
+    "message": "Stop"
+  },
   "options_logged_in_as": {
     "message": "Logget ind som"
   },
diff --git a/_locales/de/messages.json b/_locales/de/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Zurücksetzen"
   },
+  "options_stop_button": {
+    "message": "Stoppen"
+  },
   "options_logged_in_as": {
     "message": "Angemeldet als"
   },
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -80,6 +80,9 @@
   "options_test_button": {
     "message": "Test"
   },
+  "options_stop_button": {
+    "message": "Stop"
+  },
   "options_reset_button": {
     "message": "Reset"
   },
diff --git a/_locales/es/messages.json b/_locales/es/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Reiniciar"
   },
+  "options_stop_button": {
+    "message": "Detener"
+  },
   "options_logged_in_as": {
     "message": "Conectado como"
   },
diff --git a/_locales/fi/messages.json b/_locales/fi/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Nollaa"
   },
+  "options_stop_button": {
+    "message": "Pysäytä"
+  },
   "options_logged_in_as": {
     "message": "Kirjautunut sisään nimellä"
   },
diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Réinitialiser"
   },
+  "options_stop_button": {
+    "message": "Arrêter"
+  },
   "options_logged_in_as": {
     "message": "Connecté en tant que"
   },
diff --git a/_locales/hi/messages.json b/_locales/hi/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "रीसेट"
   },
+  "options_stop_button": {
+    "message": "रोकें"
+  },
   "options_logged_in_as": {
     "message": "के रूप में लॉग इन"
   },
diff --git a/_locales/id/messages.json b/_locales/id/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Reset"
   },
+  "options_stop_button": {
+    "message": "Berhenti"
+  },
   "options_logged_in_as": {
     "message": "Masuk sebagai"
   },
diff --git a/_locales/it/messages.json b/_locales/it/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Reset"
   },
+  "options_stop_button": {
+    "message": "Interrompi"
+  },
   "options_logged_in_as": {
     "message": "Collegato come"
   },
diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "リセット"
   },
+  "options_stop_button": {
+    "message": "停止"
+  },
   "options_logged_in_as": {
     "message": "次のユーザーとしてログイン"
   },
diff --git a/_locales/ko/messages.json b/_locales/ko/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "초기화"
   },
+  "options_stop_button": {
+    "message": "중지"
+  },
   "options_logged_in_as": {
     "message": "로그인 계정"
   },
diff --git a/_locales/nl/messages.json b/_locales/nl/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Resetten"
   },
+  "options_stop_button": {
+    "message": "Stoppen"
+  },
   "options_logged_in_as": {
     "message": "Ingelogd als"
   },
diff --git a/_locales/no/messages.json b/_locales/no/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Tilbakestill"
   },
+  "options_stop_button": {
+    "message": "Stopp"
+  },
   "options_logged_in_as": {
     "message": "Logget inn som"
   },
diff --git a/_locales/pl/messages.json b/_locales/pl/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Resetuj"
   },
+  "options_stop_button": {
+    "message": "Zatrzymaj"
+  },
   "options_logged_in_as": {
     "message": "Zalogowano jako"
   },
diff --git a/_locales/pt_BR/messages.json b/_locales/pt_BR/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Redefinir"
   },
+  "options_stop_button": {
+    "message": "Parar"
+  },
   "options_logged_in_as": {
     "message": "Conectado como"
   },
diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Сброс"
   },
+  "options_stop_button": {
+    "message": "Остановить"
+  },
   "options_logged_in_as": {
     "message": "Вы вошли как"
   },
diff --git a/_locales/sv/messages.json b/_locales/sv/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Återställ"
   },
+  "options_stop_button": {
+    "message": "Stoppa"
+  },
   "options_logged_in_as": {
     "message": "Inloggad som"
   },
diff --git a/_locales/tg/messages.json b/_locales/tg/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Бозсозӣ"
   },
+  "options_stop_button": {
+    "message": "Қатъ кардан"
+  },
   "options_logged_in_as": {
     "message": "Бо номи зерин ворид шуд:"
   },
diff --git a/_locales/th/messages.json b/_locales/th/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "รีเซ็ต"
   },
+  "options_stop_button": {
+    "message": "หยุด"
+  },
   "options_logged_in_as": {
     "message": "เข้าสู่ระบบเป็น"
   },
diff --git a/_locales/tr/messages.json b/_locales/tr/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Sıfırla"
   },
+  "options_stop_button": {
+    "message": "Durdur"
+  },
   "options_logged_in_as": {
     "message": "Olarak oturum açtı"
   },
diff --git a/_locales/uk/messages.json b/_locales/uk/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Скинути"
   },
+  "options_stop_button": {
+    "message": "Зупинити"
+  },
   "options_logged_in_as": {
     "message": "Ви увійшли як"
   },
diff --git a/_locales/vi/messages.json b/_locales/vi/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "Reset"
   },
+  "options_stop_button": {
+    "message": "Dừng"
+  },
   "options_logged_in_as": {
     "message": "đăng nhập như"
   },
diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "重设"
   },
+  "options_stop_button": {
+    "message": "停止"
+  },
   "options_logged_in_as": {
     "message": "登录为"
   },
diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json
@@ -83,6 +83,9 @@
   "options_reset_button": {
     "message": "重設"
   },
+  "options_stop_button": {
+    "message": "停止"
+  },
   "options_logged_in_as": {
     "message": "登錄為"
   },
diff --git a/js/options.js b/js/options.js
@@ -218,44 +218,65 @@
 
 
 
+  //voiceTest
+  const demoSpeech = {
+    get(lang) {
+      return this[lang] || (
+        this[lang] = ajaxGet(config.serviceUrl + "/read-aloud/get-demo-speech-text/" + lang).then(JSON.parse)
+      )
+    }
+  }
+  const voiceTestSubject = new rxjs.Subject()
+  rxjs.defer(() => domReadyPromise).pipe(
+    rxjs.exhaustMap(() =>
+      voiceTestSubject.pipe(
+        rxjs.switchScan(({state}) =>
+          rxjs.iif(
+            () => state == "STOPPED",
+            //play
+            rxjs.defer(() => {
+              return voices$.pipe(rxjs.take(1))
+            }).pipe(
+              rxjs.exhaustMap(voices => {
+                const voiceName = $("#voices").val()
+                const voice = voiceName && findVoiceByName(voices, voiceName)
+                const {lang} = parseLang(voice && getFirstLanguage(voice) || "en-US")
+                return rxjs.defer(() => demoSpeech.get(lang)).pipe(
+                  rxjs.exhaustMap(({text}) => bgPageInvoke("playText", [text, {lang}]))
+                )
+              }),
+              rxjs.exhaustMap(() =>
+                rxjs.timer(100, 500).pipe(
+                  rxjs.exhaustMap(() => bgPageInvoke("getPlaybackState")),
+                  rxjs.takeWhile(({state}) => state != "STOPPED", true)
+                )
+              )
+            ),
+            //stop
+            rxjs.defer(() => bgPageInvoke("stop")).pipe(
+              rxjs.map(() => ({state: "STOPPED"}))
+            )
+          ),
+          {state: "STOPPED"}
+        ),
+        rxjs.startWith({state: "STOPPED"})
+      )
+    )
+  ).subscribe(({state, playbackError}) => {
+    $("#test-voice .spinner").toggle(state == "LOADING")
+    $("#test-voice [data-i18n]").text(
+      brapi.i18n.getMessage(state == "STOPPED" ? "options_test_button" : "options_stop_button")
+    )
+    if (state == "STOPPED" && playbackError) handleError(playbackError)
+    else $("#status").parent().hide()
+  })
+
+
+
   //buttons
   domReadyPromise
     .then(() => {
-      var demoSpeech = {};
-      const statusTracker$ = new rxjs.Subject()
-      statusTracker$.pipe(
-        rxjs.switchMap(() =>
-          rxjs.interval(500).pipe(
-            rxjs.exhaustMap(() => bgPageInvoke("getPlaybackState")),
-            rxjs.takeWhile(({state}) => state != "STOPPED", true)
-          )
-        )
-      ).subscribe(({playbackError}) => {
-        if (playbackError) handleError(playbackError)
-      })
-
-      $("#test-voice")
-        .click(async function() {
-          try {
-            var voiceName = $("#voices").val();
-            var voice = voiceName && findVoiceByName(await rxjs.firstValueFrom(voices$), voiceName);
-            const { lang } = parseLang(voice && getFirstLanguage(voice) || "en-US")
-            $("#test-voice .spinner").show();
-            $("#status").parent().hide();
-            if (!demoSpeech[lang]) {
-              demoSpeech[lang] = await ajaxGet(config.serviceUrl + "/read-aloud/get-demo-speech-text/" + lang).then(JSON.parse)
-            }
-            await bgPageInvoke("playText", [demoSpeech[lang].text, {lang: lang}])
-            statusTracker$.next()
-          }
-          catch (err) {
-            handleError(err);
-          }
-          finally {
-            $("#test-voice .spinner").hide();
-          }
-        })
-      $("#test-voice .spinner").hide();
+      $("#test-voice").click(() => voiceTestSubject.next())
       $("#reset")
         .click(function() {
           clearSettings()
