low quality preview for non-drivers

webui/src/components/DriverVideoPanel.jsx

@@ -1,6 +1,8 @@
+import { useEffect, useMemo, useState } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
 import { useTelemetryFrame } from '../context/TelemetryContext.jsx';
 import { useVideoRequests } from '../hooks/useVideoRequests.js';
+import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
 import { useControlSystem } from '../controls/index.js';
 import VideoTile from './VideoTile.jsx';
 
@@ -9,19 +11,51 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
   const {
     state: { song },
   } = useControlSystem();
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (session?.mode !== 'turns') {
+      return undefined;
+    }
+    const timer = setInterval(() => setNow(Date.now()), 250);
+    return () => clearInterval(timer);
+  }, [session?.mode]);
   const roverId = session?.assignment?.roverId;
   const rosterEntry =
     roverId && session?.roster ? session.roster.find((item) => String(item.id) === String(roverId)) : null;
   const hasAudio = Boolean(rosterEntry?.media?.audioPublishUrl);
+  const turnInfo = roverId ? session?.turnQueues?.[roverId] : null;
+  const socketId = session?.socketId || null;
+  const activeDriverId = roverId ? session?.activeDrivers?.[roverId] : null;
+  const isActiveDriver = Boolean(socketId && activeDriverId === socketId);
+  const nextDriverId = useMemo(() => {
+    const queue = turnInfo?.queue || [];
+    if (!queue.length || !turnInfo?.current || queue.length <= 1) return null;
+    const idx = queue.findIndex((id) => id === turnInfo.current);
+    if (idx === -1) {
+      return queue[0] || null;
+    }
+    return queue[(idx + 1) % queue.length] || null;
+  }, [turnInfo?.queue, turnInfo?.current]);
+  const isNextDriver = Boolean(socketId && nextDriverId === socketId);
+  const deadline = turnInfo?.deadline || null;
+  const msUntilTurn = deadline ? deadline - now : null;
+  const isPreSwitchWindow =
+    session?.mode === 'turns' && isNextDriver && msUntilTurn != null && msUntilTurn <= 5000 && msUntilTurn > 0;
+  const shouldShowVideo = session?.mode !== 'turns' || isActiveDriver || isPreSwitchWindow;
   const entries = roverId
     ? [
-        { type: 'rover', id: roverId, key: roverId },
+        ...(shouldShowVideo ? [{ type: 'rover', id: roverId, key: roverId }] : []),
         ...(hasAudio ? [{ type: 'rover', id: `${roverId}-audio`, key: `${roverId}-audio` }] : []),
       ]
     : [];
   const sources = useVideoRequests(entries);
-  const info = roverId ? sources[roverId] : null;
+  const info = roverId && shouldShowVideo ? sources[roverId] : null;
   const audioInfo = roverId && hasAudio ? sources[`${roverId}-audio`] : null;
+  const snapshotFeeds = useRoverSnapshots(roverId ? [roverId] : [], {
+    enabled: Boolean(roverId),
+    version: session?.mode,
+  });
+  const snapshotFeed = roverId ? snapshotFeeds[roverId] || null : null;
   const frame = useTelemetryFrame(roverId);
   const batteryRecord =
     roverId && session?.roster
@@ -36,12 +70,15 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
       {roverId ? (
         <VideoTile
           sessionInfo={info}
+          videoMode={shouldShowVideo ? 'whep' : 'snapshot'}
+          snapshotFeed={snapshotFeed}
           audioSessionInfo={audioInfo}
           label={roverLabel}
           telemetryFrame={frame}
           batteryConfig={batteryConfig}
           layoutFormat={layoutFormat}
           songNote={song?.note}
+          qualityNotice={!shouldShowVideo ? 'Preview feed (low FPS) until your turn.' : null}
         />
       ) : (
         <div className="panel-muted content-center text-center text-sm text-slate-400 aspect-video">

webui/src/components/VideoTile.jsx

@@ -45,6 +45,9 @@ function buildBatteryVisual(charge, config) {
 export default function VideoTile({
   sessionInfo,
   audioSessionInfo,
+  videoMode = 'whep',
+  snapshotFeed = null,
+  qualityNotice = null,
   label,
   forceMute = false,
   telemetryFrame,
@@ -70,6 +73,7 @@ export default function VideoTile({
   const [restartToken, setRestartToken] = useState(0);
   const [audioRestartToken, setAudioRestartToken] = useState(0);
   const [muted, setMuted] = useState(true);
+  const usingSnapshot = videoMode === 'snapshot';
   const sensors = telemetryFrame?.sensors;
   const batteryCharge = sensors?.batteryChargeMah ?? null;
   const desktopLayout = layoutFormat === 'desktop';
@@ -162,7 +166,14 @@ export default function VideoTile({
   }, [status, attemptUnmute]);
 
   useEffect(() => {
-    if (!sessionInfo?.url || !videoRef.current) {
+    if (usingSnapshot) {
+      setStatus('snapshot');
+      setDetail(null);
+    }
+  }, [usingSnapshot]);
+
+  useEffect(() => {
+    if (usingSnapshot || !sessionInfo?.url || !videoRef.current) {
       return undefined;
     }
     let active = true;
@@ -199,7 +210,7 @@ export default function VideoTile({
       clearTimeout(resetMuteId);
       player?.stop();
     };
-  }, [sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback]);
+  }, [usingSnapshot, sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback]);
 
   useEffect(() => {
     if (status === 'stopped' && sessionInfo?.url) {
@@ -329,7 +340,14 @@ export default function VideoTile({
     };
   }, [audioSessionInfo?.url]);
 
-  const renderedStatus = !sessionInfo?.url
+  const snapshotStatus = snapshotFeed?.error
+    ? `Error: ${snapshotFeed.error}`
+    : snapshotFeed?.objectUrl
+    ? 'snapshot'
+    : snapshotFeed?.status || 'waiting';
+  const renderedStatus = usingSnapshot
+    ? snapshotStatus
+    : !sessionInfo?.url
     ? 'waiting'
     : status === 'error'
     ? `Error: ${detail || 'unknown'}`
@@ -352,14 +370,29 @@ export default function VideoTile({
       <div
         className={`relative w-full overflow-hidden bg-black ${fitParent ? 'h-full flex-1' : 'aspect-video'}`}
       >
-        <video
-          ref={videoRef}
-          muted={forceMute || muted}
-          playsInline
-          autoPlay
-          controls={false}
-          className="h-full w-full object-contain"
-        />
+        {usingSnapshot ? (
+          snapshotFeed?.objectUrl ? (
+            <img
+              src={snapshotFeed.objectUrl}
+              alt={label}
+              className="h-full w-full object-contain"
+              draggable={false}
+            />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center text-sm text-slate-300">
+              Waiting for frame…
+            </div>
+          )
+        ) : (
+          <video
+            ref={videoRef}
+            muted={forceMute || muted}
+            playsInline
+            autoPlay
+            controls={false}
+            className="h-full w-full object-contain"
+          />
+        )}
         <audio ref={audioRef} autoPlay hidden />
         <HudOverlay
           frame={telemetryFrame}
@@ -382,6 +415,11 @@ export default function VideoTile({
         {showVerticalBattery && batteryVisual.available ? (
           <BatteryBarVertical visual={batteryVisual} />
         ) : null}
+        {qualityNotice ? (
+          <div className="pointer-events-none absolute left-1 top-1 rounded bg-black/70 px-1 py-0.5 text-xs font-semibold text-amber-200">
+            {qualityNotice}
+          </div>
+        ) : null}
       </div>
       {!showVerticalBattery && (
         <div className="space-y-0.25">