Add language and locale in dropdown

vivek-nexus · Jul 14, 2024 · 78bf032 · 78bf032
1 parent d9c0407
commit 78bf032
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 2 deletions.
diff --git a/src/components/Player/PlayerControls.tsx b/src/components/Player/PlayerControls.tsx
@@ -113,6 +113,10 @@ export default function PlayerControls() {
     // Ref value is used to determine, what to do next
     function speechCompleteCallback() {
         console.log("Speech has ended")
+        // Pause using ref value does not work on Safari. The ref value updated by ref setting function, is not reflected in this callback. Just call setPlayerState("paused") in the respective function please.
+        if (speechEndReasonRef.current === "pause") {
+            setPlayerState("paused")
+        }
         if (speechEndReasonRef.current === "forward") {
             setSpeakingSentenceIndex((speakingSentenceIndex + 1))
         }
@@ -151,6 +155,8 @@ export default function PlayerControls() {
     function blurCallback() {
         speechSynthesis.cancel()
         speechEndReasonRef.current = "pause"
+        // For Safari
+        setPlayerState("paused")
     }
 
     // Keyboard press callback
@@ -187,6 +193,7 @@ export default function PlayerControls() {
         if (playerState === "playing") {
             speechSynthesis.cancel()
             speechEndReasonRef.current = "pause"
+            // For Safari
             setPlayerState("paused")
         }
         if (playerState === "paused") {

diff --git a/src/components/Player/VoicesDropdown.tsx b/src/components/Player/VoicesDropdown.tsx
@@ -66,7 +66,7 @@ export function VoicesDropdown() {
                 className="flex items-center justify-between"
                 onClick={() => handleOptionClick(data)}
             >
-                <span>{data.name}</span>
+                <span>{data.name} ({data.langWithLocale})</span>
                 {!data.localService &&
                     <span className="ml-2 px-3 py-1 text-xs bg-primary-800/30 text-white/70 rounded-full">NATURAL</span>
                 }

diff --git a/src/helpers/setUpWebSpeech/useChooseBestVoice.ts b/src/helpers/setUpWebSpeech/useChooseBestVoice.ts
@@ -20,7 +20,7 @@ export function useChooseBestVoice() {
         let defaultVoices: Voice[] = []
         const voicesOfAutoDetectedLanguage: Voice[] = []
 
-        // Loop through voices on the device
+        // Loop through populated voices
         for (const voice of voices) {
             // Pick up all voices of auto detected language
             if (voice.lang === languageCodeOfArticleToSpeak)
@@ -74,6 +74,7 @@ export function useChooseBestVoice() {
             setVoiceToSpeakWith({
                 default: false,
                 lang: "en",
+                langWithLocale: "en-US",
                 localService: true,
                 name: "Default voice",
                 value: "default-voice"

diff --git a/src/helpers/setUpWebSpeech/usePopulateVoices.ts b/src/helpers/setUpWebSpeech/usePopulateVoices.ts
@@ -41,6 +41,7 @@ export function usePopulateVoices() {
                 default: rawVoice.default,
                 // Get first two characters for two character language code. Some devices have three character language code before "-" or "_", so taking first two letters is more reliable. Default to English for type safety later on (to circle back).
                 lang: rawVoice.lang.slice(0, 2) ? rawVoice.lang.slice(0, 2) : `en`,
+                langWithLocale: rawVoice.lang,
                 localService: rawVoice.localService,
                 name: rawVoice.name,
                 value: rawVoice.voiceURI,

diff --git a/src/stores/usePlayerStore.ts b/src/stores/usePlayerStore.ts
@@ -4,6 +4,7 @@ export type Item = "rate" | "pitch" | "bgMusicVol"
 export type Voice = {
     default: boolean,
     lang: string,
+    langWithLocale: string,
     localService: boolean,
     name: string,
     value: string,
@@ -45,6 +46,7 @@ export const usePlayerStore = create<PlayerStoreState>(
         voiceToSpeakWith: {
             default: false,
             lang: "en",
+            langWithLocale: "en-US",
             localService: true,
             name: "Default voice",
             value: "default-voice"