Enable audio playback for dashboard route clips

Author: Mahdi451

src/App.browser.test.tsx

@@ -1,5 +1,5 @@
 import { beforeAll, beforeEach, describe, expect, test } from 'vitest'
-import { configure, render, waitFor } from '@solidjs/testing-library'
+import { configure, fireEvent, render, waitFor } from '@solidjs/testing-library'
 
 import { setAccessToken, signOut } from '~/api/auth/client'
 import * as Demo from '~/api/auth/demo'
@@ -26,10 +26,14 @@ describe('Demo mode', () => {
   })
 
   test('View demo route', async () => {
-    const { findByText, findByTestId } = renderApp(`/${Demo.DONGLE_ID}/${DEMO_LOG_ID}`)
+    const { findByLabelText, findByText, findByTestId } = renderApp(`/${Demo.DONGLE_ID}/${DEMO_LOG_ID}`)
     expect(await findByText(DEMO_LOG_ID)).toBeTruthy()
     const video = (await findByTestId('route-video')) as HTMLVideoElement
     await waitFor(() => expect(video.src).toBeTruthy())
+    expect(video.muted).toBe(true)
+    await fireEvent.click(await findByLabelText('Unmute'))
+    expect(video.muted).toBe(false)
+    expect(await findByLabelText('Mute')).toBeTruthy()
   })
 })
 

src/components/RouteVideoPlayer.tsx

@@ -25,6 +25,7 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
   let controls!: HTMLDivElement
 
   const [isPlaying, setIsPlaying] = createSignal(true)
+  const [isMuted, setIsMuted] = createSignal(true)
   const [currentTime, setCurrentTime] = createSignal(0)
   const [duration, setDuration] = createSignal(0)
   const [videoLoading, setVideoLoading] = createSignal(true)
@@ -47,14 +48,28 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
   const startProgressTracking = () => {
     requestAnimationFrame(updateProgressContinuously)
   }
+  const requestPlay = () => {
+    const playResult = video.play()
+    if (playResult) {
+      void playResult.catch((error: unknown) => {
+        if (error instanceof DOMException && error.name === 'AbortError') return
+        console.debug('[RouteVideoPlayer] play interrupted', error)
+      })
+    }
+  }
 
   const togglePlayback = () => {
     if (video.paused) {
-      void video.play()
+      requestPlay()
     } else {
       video.pause()
     }
   }
+  const toggleMuted = (e: Event) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsMuted((muted) => !muted)
+  }
   const onClick = (e: Event) => {
     e.preventDefault()
     togglePlayback()
@@ -83,14 +98,16 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
   const onEnded = () => setIsPlaying(false)
   const onStalled = () => {
     if (!isPlaying()) return
-    void video.play()
+    requestPlay()
   }
 
   onMount(() => {
     if (props.selection.startTime > 0) {
       video.currentTime = props.selection.startTime
     }
 
+    video.defaultMuted = true
+    video.muted = true
     props.ref?.(video)
 
     controls.addEventListener('click', onClick)
@@ -143,9 +160,17 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
     on(routeName, () => {
       setVideoLoading(true)
       setErrorMessage('')
+      setIsMuted(true)
     }),
   )
 
+  createEffect(() => {
+    if (!video) return
+    const muted = isMuted()
+    video.defaultMuted = muted
+    video.muted = muted
+  })
+
   createEffect(() => {
     const url = streamUrl()
     const player = hls()
@@ -172,7 +197,7 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
           class="size-full object-cover"
           data-testid="route-video"
           autoplay
-          muted
+          muted={isMuted()}
           controls={false}
           playsinline
           loop
@@ -205,6 +230,9 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
           <div class="font-mono text-sm text-on-surface">
             {formatVideoTime(currentTime())} / {formatVideoTime(duration())}
           </div>
+
+          <div class="grow" />
+          <IconButton name={isMuted() ? 'volume_off' : 'volume_up'} aria-label={isMuted() ? 'Unmute' : 'Mute'} onClick={toggleMuted} />
         </div>
       </div>
     </div>

src/components/material/Icon.tsx

@@ -8,7 +8,7 @@ export const Icons = [
   'add', 'arrow_back', 'camera', 'check', 'chevron_right', 'clear', 'close', 'delete', 'description', 'directions_car', 'download', 'error',
   'file_copy', 'flag', 'info', 'keyboard_arrow_down', 'keyboard_arrow_up', 'local_fire_department', 'logout', 'menu', 'my_location',
   'open_in_new', 'payments', 'person', 'progress_activity', 'satellite_alt', 'search', 'settings', 'upload', 'videocam', 'refresh',
-  'login', 'person_off', 'autorenew', 'close_small', 'pause', 'play_arrow', 'clear_all',
+  'login', 'person_off', 'autorenew', 'close_small', 'pause', 'play_arrow', 'clear_all', 'volume_off', 'volume_up',
 ] as const
 
 export type IconName = (typeof Icons)[number]