Fail nicely on browsers with no tts support

bluerobotics · Oct 24, 2023 · f01802f · f01802f
1 parent 545779c
commit f01802f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/src/components/widgets/Alerter.vue b/src/components/widgets/Alerter.vue
@@ -4,9 +4,9 @@
       ref="currentAlertBar"
       class="flex items-center justify-between p-1 overflow-hidden rounded cursor-pointer select-none whitespace-nowrap bg-slate-800/75"
     >
-      <p class="mx-1 overflow-hidden text-xl font-medium text-gray-100">{{ currentAlert.message }}</p>
+      <p class="mx-1 overflow-hidden text-xl font-medium text-gray-100">{{ currentAlert?.message }}</p>
       <div class="flex flex-col justify-center mx-1 font-mono text-xs font-semibold leading-3 text-right text-gray-100">
-        <p>{{ formattedDate(currentAlert.time_created || new Date()) }}</p>
+        <p>{{ formattedDate(currentAlert?.time_created || new Date()) }}</p>
         <p>{{ currentAlert.level.toUpperCase() }}</p>
       </div>
     </div>
@@ -16,12 +16,12 @@
       :class="{ 'opacity-0 invisible': !isShowingExpandedAlerts }"
     >
       <div v-for="(alert, i) in sortedAlertsReversed" :key="alert.time_created.toISOString()">
-        <div v-tooltip.right="alert.message" class="flex items-center justify-between whitespace-nowrap">
-          <p class="mx-1 overflow-hidden text-lg font-medium leading-none text-ellipsis">{{ alert.message }}</p>
+        <div v-tooltip.right="alert?.message" class="flex items-center justify-between whitespace-nowrap">
+          <p class="mx-1 overflow-hidden text-lg font-medium leading-none text-ellipsis">{{ alert?.message }}</p>
           <div
             class="flex flex-col justify-center mx-1 font-mono text-xs font-semibold leading-3 text-right text-gray-100"
           >
-            <p>{{ formattedDate(alert.time_created || new Date()) }}</p>
+            <p>{{ formattedDate(alert?.time_created || new Date()) }}</p>
             <p>{{ alert.level.toUpperCase() }}</p>
           </div>
         </div>
@@ -47,7 +47,7 @@ const alertPersistencyInterval = 10 // in seconds
 
 const formattedDate = (datetime: Date): string => format(datetime, 'HH:mm:ss')
 
-const currentAlert = ref(alertStore.alerts[0])
+const currentAlert = ref(alertStore.alerts?.[0] ?? undefined)
 
 // eslint-disable-next-line no-undef
 let currentAlertInterval: NodeJS.Timer | undefined = undefined

diff --git a/src/stores/alert.ts b/src/stores/alert.ts
@@ -1,6 +1,6 @@
 import { useStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 
 import { Alert, AlertLevel } from '../types/alert'
 
@@ -49,29 +49,37 @@ export const useAlertStore = defineStore('alert', () => {
   }
 
   // Alert speech syntesis routine
-  const synth = window.speechSynthesis
+  const synth = ref(window.speechSynthesis)
 
   // We need to cache these otherwise they get garbage collected...
+  let availableAlertSpeechVoiceNames
   const utterance_cache: SpeechSynthesisUtterance[] = []
+  if (synth.value !== undefined) {
+    synth.value.onvoiceschanged = () => {
+      synth.value.getVoices().forEach((voice) => {
+        availableAlertSpeechVoices.push(voice)
+        if (selectedAlertSpeechVoiceName.value === undefined && voice.default) {
+          selectedAlertSpeechVoiceName.value = voice.name
+        }
+      })
+    }
 
-  synth.onvoiceschanged = () => {
-    synth.getVoices().forEach((voice) => {
-      availableAlertSpeechVoices.push(voice)
-      if (selectedAlertSpeechVoiceName.value === undefined && voice.default) {
-        selectedAlertSpeechVoiceName.value = voice.name
-      }
-    })
+    availableAlertSpeechVoiceNames = computed(() =>
+      availableAlertSpeechVoices.map((v) => ({ value: v.name, name: `${v.name} (${v.lang})` }))
+    )
+  } else {
+    availableAlertSpeechVoiceNames = computed(() => [])
   }
 
-  const availableAlertSpeechVoiceNames = computed(() =>
-    availableAlertSpeechVoices.map((v) => ({ value: v.name, name: `${v.name} (${v.lang})` }))
-  )
-
   /**
    * Speaks a text out loud using the browsers TTS engine
    * @param {string} text string
    */
   function speak(text: string): void {
+    if (!synth.value) {
+      console.warn('No speechSynthesis available')
+      return
+    }
     const utterance = new SpeechSynthesisUtterance(text)
     const voice = availableAlertSpeechVoices.find((v) => v.name === selectedAlertSpeechVoiceName.value)
     if (voice) {
@@ -85,7 +93,7 @@ export const useAlertStore = defineStore('alert', () => {
     utterance.onerror = function (event) {
       console.error(`SpeechSynthesisUtterance error: ${event.error}`)
     }
-    synth.speak(utterance)
+    synth.value.speak(utterance)
   }
 
   watch(alerts, () => {