Polish route playback and upload feedback

Author: Mahdi451

src/App.browser.test.tsx

@@ -1,13 +1,24 @@
 import { beforeAll, beforeEach, describe, expect, test } from 'vitest'
 import { configure, fireEvent, render, waitFor } from '@solidjs/testing-library'
+import { QueryClientProvider } from '@tanstack/solid-query'
+import type { ParentComponent } from 'solid-js'
 
 import { setAccessToken, signOut } from '~/api/auth/client'
+import { getAppQueryClient } from '~/api/query-client'
 import * as Demo from '~/api/auth/demo'
 import { AppLayout, Routes } from './App'
 
 const DEMO_LOG_ID = '000000dd--455f14369d'
 
-const renderApp = (location: string) => render(() => <Routes />, { location, wrapper: AppLayout })
+const renderApp = (location: string) => {
+  const queryClient = getAppQueryClient()
+  const Wrapper: ParentComponent = (props) => (
+    <QueryClientProvider client={queryClient}>
+      <AppLayout>{props.children}</AppLayout>
+    </QueryClientProvider>
+  )
+  return render(() => <Routes />, { location, wrapper: Wrapper })
+}
 
 beforeAll(() => configure({ asyncUtilTimeout: 3000 }))
 beforeEach(() => signOut())
@@ -31,6 +42,8 @@ describe('Demo mode', () => {
     const video = (await findByTestId('route-video')) as HTMLVideoElement
     await waitFor(() => expect(video.src).toBeTruthy())
     expect(video.muted).toBe(true)
+    expect(await findByLabelText('Skip back 10 seconds')).toBeTruthy()
+    expect(await findByLabelText('Skip forward 10 seconds')).toBeTruthy()
     await fireEvent.click(await findByLabelText('Unmute'))
     expect(video.muted).toBe(false)
     expect(await findByLabelText('Mute')).toBeTruthy()

src/components/RouteUploadButtons.tsx

@@ -40,14 +40,19 @@ const UploadButton: VoidComponent<UploadButtonProps> = (props) => {
     success: 'check',
     error: 'error',
   }
+  const color = () => {
+    if (state() === 'success') return 'secondary'
+    if (state() === 'error') return 'error'
+    return 'primary'
+  }
 
   return (
     <Button
       onClick={() => handleUpload()}
       class="px-2 md:px-3"
       disabled={disabled()}
       leading={<Icon class={clsx(state() === 'loading' && 'animate-spin')} name={stateToIcon[state()]} size="20" />}
-      color="primary"
+      color={color()}
     >
       <span class="flex items-center gap-1 font-mono">{props.text}</span>
     </Button>
@@ -66,6 +71,12 @@ const RouteUploadButtons: VoidComponent<RouteUploadButtonsProps> = (props) => {
     route: 'idle',
   })
   const [abortController, setAbortController] = createSignal(new AbortController())
+  const statusMessage = () => {
+    if (Object.values(uploadStore).includes('loading')) return 'Submitting upload request...'
+    if (Object.values(uploadStore).includes('error')) return 'Some uploads failed to start. Try again.'
+    if (Object.values(uploadStore).includes('success')) return 'Upload request accepted. Track progress in the device upload status.'
+    return 'Choose which files to request from this route.'
+  }
 
   createEffect(
     on(
@@ -115,6 +126,7 @@ const RouteUploadButtons: VoidComponent<RouteUploadButtonsProps> = (props) => {
         <UploadButton text="Logs" icon="description" state={uploadStore.logs} onClick={() => handleUpload('logs')} />
         <UploadButton text="All" icon="upload" state={uploadStore.route} onClick={() => handleUpload('route')} />
       </div>
+      <p class="mt-3 text-sm text-on-surface-variant">{statusMessage()}</p>
     </div>
   )
 }

src/components/RouteVideoPlayer.tsx

@@ -30,6 +30,20 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
   const [duration, setDuration] = createSignal(0)
   const [videoLoading, setVideoLoading] = createSignal(true)
   const [errorMessage, setErrorMessage] = createSignal<string>('')
+  const selectionEndTime = () => props.selection.endTime ?? duration()
+
+  const clampTime = (nextTime: number) => {
+    const startTime = props.selection.startTime
+    const endTime = selectionEndTime()
+    return Math.max(startTime, Math.min(nextTime, endTime))
+  }
+
+  const seekTo = (nextTime: number) => {
+    const clampedTime = clampTime(nextTime)
+    video.currentTime = clampedTime
+    setCurrentTime(clampedTime)
+    props.onProgress?.(clampedTime)
+  }
 
   const onLoadedData = () => {
     setVideoLoading(false)
@@ -65,6 +79,11 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
       video.pause()
     }
   }
+  const skipBy = (seconds: number) => (e: Event) => {
+    e.preventDefault()
+    e.stopPropagation()
+    seekTo(video.currentTime + seconds)
+  }
   const toggleMuted = (e: Event) => {
     e.preventDefault()
     e.stopPropagation()
@@ -76,18 +95,17 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
   }
 
   const onTimeUpdate = (e: Event) => {
-    setCurrentTime((e.currentTarget as HTMLVideoElement).currentTime)
+    const nextCurrentTime = (e.currentTarget as HTMLVideoElement).currentTime
+    setCurrentTime(nextCurrentTime)
 
     // If there is a selection, loop within it
-    if (currentTime() < props.selection.startTime) {
-      video.currentTime = props.selection.startTime
-    } else if (props.selection.endTime !== undefined) {
-      if (currentTime() > props.selection.endTime) {
-        video.currentTime = props.selection.startTime
-      }
+    if (nextCurrentTime < props.selection.startTime) {
+      seekTo(props.selection.startTime)
+    } else if (props.selection.endTime !== undefined && nextCurrentTime > props.selection.endTime) {
+      seekTo(props.selection.startTime)
+    } else if (video.paused) {
+      updateProgress()
     }
-
-    if (video.paused) updateProgress()
   }
   const onLoadedMetadata = () => setDuration(Math.ceil(video.duration))
   const onPlay = () => {
@@ -103,7 +121,7 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
 
   onMount(() => {
     if (props.selection.startTime > 0) {
-      video.currentTime = props.selection.startTime
+      seekTo(props.selection.startTime)
     }
 
     video.defaultMuted = true
@@ -225,7 +243,9 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
 
         {/* Controls container */}
         <div class="relative flex w-full items-center gap-3 pb-3 px-2">
-          <IconButton name={isPlaying() ? 'pause' : 'play_arrow'} filled />
+          <IconButton name="replay_10" aria-label="Skip back 10 seconds" onClick={skipBy(-10)} />
+          <IconButton aria-label={isPlaying() ? 'Pause' : 'Play'} name={isPlaying() ? 'pause' : 'play_arrow'} filled />
+          <IconButton name="forward_10" aria-label="Skip forward 10 seconds" onClick={skipBy(10)} />
 
           <div class="font-mono text-sm text-on-surface">
             {formatVideoTime(currentTime())} / {formatVideoTime(duration())}

src/components/Timeline.tsx

@@ -106,9 +106,11 @@ const Timeline: VoidComponent<TimelineProps> = (props) => {
 
   onMount(() => {
     const updateMarker = (clientX: number) => {
+      if (!props.route || duration() === 0) return
       const rect = ref.getBoundingClientRect()
-      const x = Math.min(Math.max(clientX - rect.left, 0), rect.width - MARKER_WIDTH)
-      const fraction = x / rect.width
+      const availableWidth = Math.max(rect.width - MARKER_WIDTH, 1)
+      const x = Math.min(Math.max(clientX - rect.left, 0), availableWidth)
+      const fraction = x / availableWidth
       // Update marker immediately without waiting for video
       setMarkerOffsetPct(fraction * 100)
       props.updateTime(duration() * fraction)

src/components/UploadQueue.tsx

@@ -29,7 +29,7 @@ export const queries = {
   },
 }
 
-const mapOfflineQueueItems = (data: AthenaOfflineQueueResponse): UploadQueueItem[] =>
+export const mapOfflineQueueItems = (data: AthenaOfflineQueueResponse): UploadQueueItem[] =>
   data
     .filter((item) => item.method === 'uploadFilesToUrls')
     .flatMap((item) =>
@@ -122,6 +122,13 @@ const UploadQueue: VoidComponent<{ dongleId: string }> = (props) => {
           Cancel all
         </Button>
       </div>
+      <Show when={items.length > 0}>
+        <div class="px-4 text-xs text-on-surface-variant">
+          {onlineQueue.isSuccess
+            ? 'Uploads are active or waiting on the device.'
+            : 'Uploads are queued and will continue when the device is reachable.'}
+        </div>
+      </Show>
       <div class="relative h-[calc(4*3rem)] sm:h-[calc(6*3rem)] flex justify-center items-center text-on-surface-variant">
         <Switch
           fallback={

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', 'volume_off', 'volume_up',
+  'login', 'person_off', 'autorenew', 'close_small', 'pause', 'play_arrow', 'clear_all', 'volume_off', 'volume_up', 'replay_10', 'forward_10',
 ] as const
 
 export type IconName = (typeof Icons)[number]

src/pages/dashboard/activities/DeviceActivity.tsx

@@ -1,31 +1,40 @@
-import { createResource, createSignal, For, Show, Suspense, type VoidComponent } from 'solid-js'
+import { createEffect, createResource, createSignal, For, Show, Suspense, type VoidComponent } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import clsx from 'clsx'
-
 import { takeSnapshot } from '~/api/athena'
-import { getDevice, SHARED_DEVICE } from '~/api/devices'
+import { getAthenaOfflineQueue, getDevice, SHARED_DEVICE } from '~/api/devices'
+import { getUploadQueue } from '~/api/file'
 import { DrawerToggleButton, useDrawerContext } from '~/components/material/Drawer'
 import Icon from '~/components/material/Icon'
 import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
 import DeviceLocation from '~/components/DeviceLocation'
 import DeviceStatistics from '~/components/DeviceStatistics'
-import UploadQueue from '~/components/UploadQueue'
+import UploadQueue, { mapOfflineQueueItems } from '~/components/UploadQueue'
 import { dayjs } from '~/utils/format'
 import { getDeviceName } from '~/utils/device'
-
 import RouteList from '../components/RouteList'
-
 type DeviceActivityProps = {
   dongleId: string
 }
-
 const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
-  // TODO: device should be passed in from DeviceList
+  const getOnlineUploadSummary = async (dongleId: string) => {
+    try {
+      return await getUploadQueue(dongleId)
+    } catch {
+      return { result: [] }
+    }
+  }
+
+  const getOfflineUploadSummary = async (dongleId: string) => {
+    try {
+      return await getAthenaOfflineQueue(dongleId)
+    } catch {
+      return []
+    }
+  }
   const [device] = createResource(() => props.dongleId, getDevice)
-  // Resource as source of another resource blocks component initialization
   const deviceName = () => (device.latest ? getDeviceName(device.latest) : '')
-  // TODO: remove this. if we're listing the routes for a device you should always be a user, this is for viewing public routes which are being removed
   const isDeviceUser = () => (device.loading ? true : device.latest?.is_owner || device.latest?.alias !== SHARED_DEVICE)
   const [queueVisible, setQueueVisible] = createSignal(false)
   const [snapshot, setSnapshot] = createStore<{
@@ -37,7 +46,6 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
     fetching: false,
     images: [],
   })
-
   const onClickSnapshot = async () => {
     setSnapshot({ error: null, fetching: true })
     try {
@@ -58,7 +66,6 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
       setSnapshot('fetching', false)
     }
   }
-
   const downloadSnapshot = (image: string, index: number) => {
     const link = document.createElement('a')
     link.href = `data:image/jpeg;base64,${image}`
@@ -67,23 +74,35 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
     link.click()
     document.body.removeChild(link)
   }
-
-  const clearImage = (index: number) => {
-    const newImages = snapshot.images.filter((_, i) => i !== index)
-    setSnapshot('images', newImages)
-  }
-
+  const clearImage = (index: number) =>
+    setSnapshot(
+      'images',
+      snapshot.images.filter((_, i) => i !== index),
+    )
   const clearError = () => setSnapshot('error', null)
-
   const { modal } = useDrawerContext()
+  const [onlineQueue] = createResource(() => props.dongleId, getOnlineUploadSummary)
+  const [offlineQueue] = createResource(() => props.dongleId, getOfflineUploadSummary)
   const onlineStatus = () => (device.latest?.is_online ? 'Online now' : 'Offline')
-  const lastSeen = () => {
-    const lastPing = device.latest?.last_athena_ping
-    if (!lastPing) return 'Last seen unavailable'
-    return `Last seen ${dayjs.unix(lastPing).format('MMM D, h:mm A')}`
-  }
+  const lastSeen = () =>
+    device.latest?.last_athena_ping
+      ? `Last seen ${dayjs.unix(device.latest.last_athena_ping).format('MMM D, h:mm A')}`
+      : 'Last seen unavailable'
   const versionLabel = () => device.latest?.openpilot_version || 'Version unavailable'
-
+  const uploadSummary = () => {
+    const onlineItems = onlineQueue.latest?.result ?? []
+    const offlineItems = offlineQueue.latest ? mapOfflineQueueItems(offlineQueue.latest) : []
+    const queuedCount = onlineItems.length + offlineItems.length
+    if (queuedCount === 0) return { count: 0, label: 'No pending uploads' }
+    if (onlineItems.some((item) => item.progress > 0 && item.progress < 1)) {
+      return { count: queuedCount, label: `${queuedCount} upload${queuedCount === 1 ? '' : 's'} in progress` }
+    }
+    if (offlineItems.length > 0 && onlineItems.length === 0) {
+      return { count: queuedCount, label: `${queuedCount} queued until the device reconnects` }
+    }
+    return { count: queuedCount, label: `${queuedCount} upload${queuedCount === 1 ? '' : 's'} queued` }
+  }
+  createEffect(() => uploadSummary().count > 0 && setQueueVisible(true))
   return (
     <>
       <TopAppBar
@@ -133,6 +152,7 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
               onClick={() => setQueueVisible(!queueVisible())}
             >
               <p>{queueVisible() ? 'Hide upload status' : 'Show upload status'}</p>
+              <span class="rounded-full bg-surface-container-high px-2 py-1 text-xs text-on-surface-variant">{uploadSummary().label}</span>
               <Icon class="text-zinc-500" name={queueVisible() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} />
             </button>
           </Show>

src/pages/dashboard/activities/RouteActivity.tsx

@@ -36,9 +36,14 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
   const selection = () => ({ startTime: props.startTime, endTime: props.endTime })
 
   // FIXME: generateTimelineStatistics is given different versions of TimelineEvents multiple times, leading to stuttering engaged % on switch
-  const [events] = createResource(route, getTimelineEvents, { initialValue: [] })
-  const [statistics] = createResource(
-    () => [route(), events()] as const,
+  const [events, { mutate: setEvents }] = createResource(route, getTimelineEvents)
+  const [statistics, { mutate: setStatistics }] = createResource(
+    () => {
+      const currentRoute = route()
+      const routeEvents = events()
+      if (!currentRoute || !routeEvents || events.loading) return undefined
+      return [currentRoute, routeEvents] as const
+    },
     ([r, e]) => generateRouteStatistics(r, e),
   )
 
@@ -50,6 +55,8 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
   createEffect(() => {
     routeName() // track changes
     setSeekTime(props.startTime)
+    setEvents(undefined)
+    setStatistics(undefined)
     onTimelineChange(props.startTime)
   })
 
@@ -69,7 +76,7 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
       <div class="flex flex-col gap-6 px-4 pb-4">
         <div class="flex flex-col">
           <RouteVideoPlayer ref={setVideoRef} routeName={routeName()} selection={selection()} onProgress={setSeekTime} />
-          <Timeline class="mb-1" route={route()} seekTime={seekTime()} updateTime={onTimelineChange} events={events()} />
+          <Timeline class="mb-1" route={route()} seekTime={seekTime()} updateTime={onTimelineChange} events={events() ?? []} />
 
           <Show when={selection().startTime || selection().endTime}>
             <A