Add route selection via URL (#485)

partial version of commaai/connect#484

Author: sshane

src/components/RouteVideoPlayer.tsx

@@ -9,7 +9,7 @@ import type Hls from '~/utils/hls'
 type RouteVideoPlayerProps = {
   class?: string
   routeName: string
-  startTime: number
+  selection: { startTime: number; endTime: number | undefined }
   onProgress: (seekTime: number) => void
   ref: (el?: HTMLVideoElement) => void
 }
@@ -58,6 +58,16 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
 
   const onTimeUpdate = (e: Event) => {
     setCurrentTime((e.currentTarget as HTMLVideoElement).currentTime)
+
+    // 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 (video.paused) updateProgress()
   }
   const onLoadedMetadata = () => setDuration(video.duration)
@@ -73,8 +83,8 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
   }
 
   onMount(() => {
-    if (!Number.isNaN(props.startTime)) {
-      video.currentTime = props.startTime
+    if (props.selection.startTime > 0) {
+      video.currentTime = props.selection.startTime
     }
 
     props.ref?.(video)

src/pages/dashboard/Dashboard.tsx

@@ -104,10 +104,13 @@ const Dashboard: Component<RouteSectionProps> = () => {
   const location = useLocation()
   const urlState = createMemo(() => {
     const parts = location.pathname.split('/').slice(1).filter(Boolean)
+    const startTime = parts[2] ? Math.max(Number(parts[2]), 0) : 0
+    const endTime = parts[3] ? Math.max(Number(parts[3]), startTime + 1) : undefined
     return {
       dongleId: parts[0] as string | undefined,
       dateStr: parts[1] as string | undefined,
-      startTime: parts[2] ? Number(parts[2]) : 0,
+      startTime: startTime,
+      endTime: endTime,
     }
   })
 
@@ -146,7 +149,9 @@ const Dashboard: Component<RouteSectionProps> = () => {
                     <SettingsActivity dongleId={dongleId} />
                   </Match>
                   <Match when={urlState().dateStr} keyed>
-                    {(dateStr) => <RouteActivity dongleId={dongleId} dateStr={dateStr} startTime={urlState().startTime} />}
+                    {(dateStr) => (
+                      <RouteActivity dongleId={dongleId} dateStr={dateStr} startTime={urlState().startTime} endTime={urlState().endTime} />
+                    )}
                   </Match>
                 </Switch>
               }

src/pages/dashboard/activities/RouteActivity.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createResource, createSignal, Suspense, type VoidComponent } from 'solid-js'
+import { Show, createEffect, createResource, createSignal, Suspense, type VoidComponent } from 'solid-js'
 
 import { setRouteViewed } from '~/api/athena'
 import { getDevice } from '~/api/devices'
@@ -15,11 +15,13 @@ import RouteVideoPlayer from '~/components/RouteVideoPlayer'
 import RouteUploadButtons from '~/components/RouteUploadButtons'
 import Timeline from '~/components/Timeline'
 import { generateTimelineStatistics, getTimelineEvents } from '~/api/derived'
+import { A } from '@solidjs/router'
 
 type RouteActivityProps = {
   dongleId: string
   dateStr: string
   startTime: number
+  endTime: number | undefined
 }
 
 const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
@@ -30,6 +32,8 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
   const [route] = createResource(routeName, getRoute)
   const [startTime] = createResource(route, (route) => dayjs(route.start_time)?.format('ddd, MMM D, YYYY'))
 
+  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 [timeline] = createResource(
@@ -64,8 +68,18 @@ 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()} startTime={seekTime()} onProgress={setSeekTime} />
+          <RouteVideoPlayer ref={setVideoRef} routeName={routeName()} selection={selection()} onProgress={setSeekTime} />
           <Timeline class="mb-1" route={route()} seekTime={seekTime()} updateTime={onTimelineChange} events={events()} />
+
+          <Show when={selection().startTime || selection().endTime}>
+            <A
+              class="flex items-center justify-center text-center text-label-lg text-gray-500 mt-4"
+              href={`/${props.dongleId}/${props.dateStr}`}
+            >
+              Clear current route selection
+              <IconButton name="close_small" />
+            </A>
+          </Show>
         </div>
 
         <div class="flex flex-col gap-2">