fix(stage-ui): speech provider not set correctly when choosing voices

packages/stage-pages/src/pages/settings/modules/speech.vue

@@ -154,6 +154,7 @@ function updateCustomVoiceName(value: string | undefined) {
     activeSpeechVoice.value = undefined
     return
   }
+
   activeSpeechVoice.value = {
     id: value,
     name: value,

packages/stage-ui/src/stores/audio.ts

@@ -1,6 +1,6 @@
 import { useDevicesList, useUserMedia } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { computed, nextTick, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
 
 function calculateVolumeWithLinearNormalize(analyser: AnalyserNode) {
   const dataBuffer = new Uint8Array(analyser.frequencyBinCount)
@@ -68,12 +68,6 @@ function calculateVolume(analyser: AnalyserNode, mode: 'linear' | 'minmax' = 'li
 export const useAudioContext = defineStore('audio-context', () => {
   const audioContext = shallowRef<AudioContext>(new AudioContext())
 
-  onUnmounted(async () => {
-    // Close audio context
-    if (audioContext)
-      await audioContext.value.suspend()
-  })
-
   return {
     audioContext,
     calculateVolume,

packages/stage-ui/src/stores/modules/speech.ts

@@ -106,6 +106,9 @@ export const useSpeechStore = defineStore('speech', () => {
       await loadVoicesForProvider(newProvider)
       // Don't reset voice settings when changing providers to allow for persistence
     }
+  }, {
+    // REVIEW: should we always load voices on init? What will happen when network is not available?
+    immediate: true,
   })
 
   onMounted(() => {
@@ -116,20 +119,13 @@ export const useSpeechStore = defineStore('speech', () => {
     })
   })
 
-  watch(activeSpeechVoiceId, (voiceId) => {
+  watch([activeSpeechVoiceId, availableVoices], ([voiceId, voices]) => {
     if (voiceId) {
-      activeSpeechVoice.value = availableVoices.value[activeSpeechProvider.value]?.find(voice => voice.id === voiceId)
-    }
-  }, {
-    immediate: true,
-  })
-
-  watch(availableVoices, (voices) => {
-    if (activeSpeechVoiceId.value) {
-      activeSpeechVoice.value = voices[activeSpeechProvider.value]?.find(voice => voice.id === activeSpeechVoiceId.value)
+      activeSpeechVoice.value = voices[activeSpeechProvider.value]?.find(voice => voice.id === voiceId)
     }
   }, {
     immediate: true,
+    deep: true,
   })
 
   /**