Handle global audio play errors (#4011)

* Fix audio errors

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Update frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue

* Update frontend/src/utils/sentry-config.ts

---------

Signed-off-by: Olga Bulat <obulat@gmail.com>

frontend/src/components/VAudioTrack/VAudioTrack.vue

@@ -57,7 +57,7 @@ import {
   ref,
   watch,
 } from "vue"
-import { useContext, useRoute } from "@nuxtjs/composition-api"
+import { useRoute } from "@nuxtjs/composition-api"
 
 import { useActiveAudio } from "~/composables/use-active-audio"
 import { defaultRef } from "~/composables/default-ref"
@@ -154,7 +154,6 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const i18n = useI18n()
-    const { $sentry } = useContext()
 
     const activeMediaStore = useActiveMediaStore()
     const route = useRoute()
@@ -363,34 +362,7 @@ export default defineComponent({
       if (!localAudio) {
         initLocalAudio()
       }
-
-      const playPromise = localAudio?.play()
-      // Check if the audio can be played successfully
-      if (playPromise !== undefined) {
-        playPromise.catch((err) => {
-          let message: string
-          switch (err.name) {
-            case "NotAllowedError": {
-              message = "err_unallowed"
-              break
-            }
-            case "NotSupportedError": {
-              message = "err_unsupported"
-              break
-            }
-            case "AbortError": {
-              message = "err_aborted"
-              break
-            }
-            default: {
-              message = "err_unknown"
-              $sentry.captureException(err)
-            }
-          }
-          activeMediaStore.setMessage({ message })
-          localAudio?.pause()
-        })
-      }
+      activeMediaStore.playAudio(localAudio)
     }
     const pause = () => localAudio?.pause()
 

frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue

@@ -33,7 +33,8 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from "vue"
 
-import { useAnalytics } from "~/composables/use-analytics"
+import { useContext } from "@nuxtjs/composition-api"
+
 import { useActiveAudio } from "~/composables/use-active-audio"
 import { defaultRef } from "~/composables/default-ref"
 import { useI18n } from "~/composables/use-i18n"
@@ -73,7 +74,7 @@ export default defineComponent({
     const i18n = useI18n()
     const activeMediaStore = useActiveMediaStore()
     const activeAudio = useActiveAudio()
-    const { sendCustomEvent } = useAnalytics()
+    const { $sendCustomEvent } = useContext()
 
     const ariaLabel = computed(() =>
       i18n.t("audioTrack.ariaLabel", { title: props.audio.title }).toString()
@@ -193,18 +194,20 @@ export default defineComponent({
       { immediate: true }
     )
 
-    const play = () => activeAudio.obj.value?.play()
+    const play = () => activeMediaStore.playAudio(activeAudio.obj.value)
     const pause = () => activeAudio.obj.value?.pause()
 
     /* Timekeeping */
-    const message = computed<string | undefined>(
-      () => activeMediaStore.message ?? undefined
+    const message = computed(() =>
+      activeMediaStore.message
+        ? i18n.t(`audioTrack.messages.${activeMediaStore.message}`).toString()
+        : ""
     )
 
     /* Interface with VAudioControl */
 
     const sendAudioInteractionEvent = (event: AudioInteraction) => {
-      sendCustomEvent("AUDIO_INTERACTION", {
+      $sendCustomEvent("AUDIO_INTERACTION", {
         id: props.audio.id,
         provider: props.audio.provider,
         event,

frontend/src/constants/audio.ts

@@ -49,3 +49,8 @@ export const statusVerbMap = Object.freeze({
 
 export const audioStatusVerbs = Object.values(statusVerbMap)
 export type AudioStatusVerb = (typeof audioStatusVerbs)[number]
+export const audioErrorMessages = {
+  NotAllowedError: "err_unallowed",
+  NotSupportedError: "err_unsupported",
+  AbortError: "err_aborted",
+} as const

frontend/src/stores/active-media.ts

@@ -2,6 +2,8 @@ import { defineStore } from "pinia"
 
 import type { SupportedMediaType } from "~/constants/media"
 import type { Media } from "~/types/media"
+import { audioErrorMessages } from "~/constants/audio"
+import { warn } from "~/utils/console"
 
 export type MediaStatus = "ejected" | "playing" | "paused" // 'ejected' means player is closed
 
@@ -70,5 +72,23 @@ export const useActiveMediaStore = defineStore(ACTIVE_MEDIA, {
     setMessage({ message }: { message: string | null }) {
       this.message = message
     },
+    playAudio(audio: HTMLAudioElement | undefined) {
+      const playPromise = audio?.play()
+      // Check if the audio can be played successfully
+      if (playPromise === undefined) {
+        warn("Play promise is undefined")
+        return
+      }
+      playPromise.catch((err) => {
+        const message = Object.keys(audioErrorMessages).includes(err.name)
+          ? audioErrorMessages[err.name as keyof typeof audioErrorMessages]
+          : "err_unknown"
+        if (message === "err_unknown") {
+          this.$nuxt.$sentry.captureException(err)
+        }
+        this.setMessage({ message })
+        audio?.pause()
+      })
+    },
   },
 })

frontend/test/unit/specs/components/AudioTrack/v-audio-track.spec.js

@@ -1,7 +1,6 @@
 import { fireEvent } from "@testing-library/vue"
 
 import { render } from "~~/test/unit/test-utils/render"
-import { i18n } from "~~/test/unit/test-utils/i18n"
 import { getAudioObj } from "~~/test/unit/fixtures/audio"
 
 import { useActiveMediaStore } from "~/stores/active-media"
@@ -29,9 +28,6 @@ describe("AudioTrack", () => {
   let props = null
   let configureVue = null
   let captureExceptionMock = jest.fn()
-  const $nuxt = {
-    context: { i18n, $sentry: { captureException: captureExceptionMock } },
-  }
 
   beforeEach(() => {
     props = {
@@ -47,12 +43,14 @@ describe("AudioTrack", () => {
           state: "paused",
         },
       })
+      activeMediaStore.$nuxt.$sentry = {
+        captureException: captureExceptionMock,
+      }
     }
 
     options = {
       propsData: props,
       stubs,
-      mocks: { $nuxt },
     }
   })