i give up lol

oops forgot to build UI
pass 2
2026-09-15 17:12:59 -04:00 · 2026-01-17 20:35:03 -05:00 · 2026-01-17 20:29:41 -05:00 · 2026-01-17 20:28:16 -05:00 · 2026-01-17 19:32:36 -05:00
16 changed files with 673 additions and 164 deletions
@@ -13,6 +13,15 @@ media:
  #   http://<base>/<roverId>/whep
  # Example: http://192.168.0.86:8889/video
  whepBaseUrl: "http://192.168.0.86:8889/video"
  preview:
    enabled: false
    codec: "av1"
    transport: "rtsp"
    fps: 10
    width: 640
    roomBitrateKbps: 200
    roverBitrateKbps: 350
    gopSeconds: 2
 homeAssistant:
  url: "http://homeassistant.local:8123"
@@ -30,5 +30,6 @@ require('./src/services/sessionService');
 require('./src/services/batteryManager');
 require('./src/services/replaySocketService');
 require('./src/services/replaySegmentManager');
 require('./src/services/media/previewTranscoderService');
 require('./src/services/discordBotService');
 require('./src/services/httpServer');
@@ -8,7 +8,7 @@ metricsAddress: 0.0.0.0:9998
 pprof: no
 pprofAddress: 127.0.0.1:9999
-rtsp: no
+rtsp: yes
 rtmp: no
 hls: no
@@ -11,7 +11,7 @@
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
    <title>Multi Roomba Rover</title>
-    <script type="module" crossorigin src="/assets/index-BosVsfhJ.js"></script>
+    <script type="module" crossorigin src="/assets/index-B7raLs13.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-Fk2eqSbH.css">
  </head>
  <body>
@@ -0,0 +1,255 @@
 const { spawn } = require('child_process');
 const EventEmitter = require('events');
 const logger = require('../../globals/logger').child('previewTranscoder');
 const { loadConfig } = require('../../helpers/configLoader');
 const roverManager = require('../roverManager');
 const { getRoomCameras, roomCameraEvents } = require('../roomCameraService');
 const events = new EventEmitter();
 const config = loadConfig();
 const mediaConfig = config.media || {};
 const previewConfig = mediaConfig.preview || {};
 const ENABLED = Boolean(previewConfig.enabled);
 const PREVIEW_CODEC = String(previewConfig.codec || 'av1').toLowerCase();
 const PREVIEW_TRANSPORT = String(previewConfig.transport || 'rtsp').toLowerCase();
 const PREVIEW_FPS = Number(previewConfig.fps || 10);
 const PREVIEW_WIDTH = Number(previewConfig.width || 640);
 const ROOM_BITRATE_KBPS = Number(previewConfig.roomBitrateKbps || 200);
 const ROVER_BITRATE_KBPS = Number(previewConfig.roverBitrateKbps || 350);
 const PRESET = Number.isFinite(previewConfig.preset) ? String(previewConfig.preset) : '8';
 const GOP_SECONDS = Number(previewConfig.gopSeconds || 2);
 const FFMPEG_BIN = previewConfig.ffmpegBin || process.env.FFMPEG_BIN || 'ffmpeg';
 const recorders = new Map(); // key -> { proc, source }
 let syncTimer = null;
 function encodeStreamId(streamId) {
  return encodeURIComponent(streamId).replace(/%2F/g, '/');
 }
 function buildSrtReadUrl(streamId) {
  return `srt://127.0.0.1:9000?streamid=read:${encodeStreamId(streamId)}`;
 }
 function buildSrtPublishUrl(streamId) {
  const encoded = encodeStreamId(streamId);
  return `srt://127.0.0.1:9000?streamid=#!::r=${encoded},m=publish&latency=10&mode=caller&transtype=live&pkt_size=1316`;
 }
 function buildRtspPublishUrl(streamId) {
  return `rtsp://127.0.0.1:8554/${streamId}`;
 }
 function sanitizeCodec(codec) {
  return String(codec || '').toLowerCase().replace(/[^a-z0-9]/g, '') || 'av1';
 }
 function buildPreviewId(id, codec) {
  return `${id}-preview-${sanitizeCodec(codec)}`;
 }
 function getRoomCameraStream(camera) {
  if (camera.streamUrl) return camera.streamUrl;
  const url = String(camera.url || '');
  if (url.includes('.mjpg') || url.includes('mjpeg') || url.includes('stream')) {
    return url;
  }
  return null;
 }
 function listSources() {
  const rooms = getRoomCameras()
    .map((camera) => {
      const streamUrl = getRoomCameraStream(camera);
      if (!streamUrl) return null;
      const id = String(camera.id);
      return {
        type: 'room',
        id,
        label: camera.name || id,
        inputUrl: streamUrl,
        outputId: `room/${buildPreviewId(id, PREVIEW_CODEC)}`,
        bitrateKbps: ROOM_BITRATE_KBPS,
      };
    })
    .filter(Boolean);
  const rovers = roverManager.getRoster().map((rover) => {
    const id = String(rover.id);
    return {
      type: 'rover',
      id,
      label: rover.name || id,
      inputUrl: buildSrtReadUrl(id),
      outputId: buildPreviewId(id, PREVIEW_CODEC),
      bitrateKbps: ROVER_BITRATE_KBPS,
    };
  });
  return [...rooms, ...rovers];
 }
 function buildKey(source) {
  return `${source.type}:${source.id}:${source.outputId}`;
 }
 function buildArgs(source) {
  const gop = Math.max(1, Math.round(GOP_SECONDS * PREVIEW_FPS));
  const maxrate = Math.floor(source.bitrateKbps * 1.1);
  const bufsize = Math.max(1, source.bitrateKbps * 2);
  const codec = PREVIEW_CODEC === 'av1' ? 'libsvtav1' : 'libx264';
  const extraCodecArgs =
    codec === 'libx264'
      ? ['-tune', 'zerolatency', '-profile:v', 'baseline', '-sc_threshold', '0']
      : [];
  const outputUrl =
    PREVIEW_TRANSPORT === 'rtsp' ? buildRtspPublishUrl(source.outputId) : buildSrtPublishUrl(source.outputId);
  const outputArgs =
    PREVIEW_TRANSPORT === 'rtsp'
      ? ['-f', 'rtsp', '-rtsp_transport', 'tcp']
      : ['-f', 'mpegts'];
  return {
    outputUrl,
    args: [
      '-hide_banner',
      '-loglevel',
      'info',
    '-fflags',
    'nobuffer',
    '-flags',
    'low_delay',
    '-i',
    source.inputUrl,
    '-an',
    '-vf',
    `fps=${PREVIEW_FPS},scale=${PREVIEW_WIDTH}:-1`,
    '-c:v',
    codec,
    '-preset',
    PRESET,
    ...extraCodecArgs,
    '-g',
    String(gop),
    '-keyint_min',
    String(gop),
    '-b:v',
    `${source.bitrateKbps}k`,
    '-maxrate',
    `${maxrate}k`,
    '-bufsize',
    `${bufsize}k`,
    '-pix_fmt',
    'yuv420p',
      ...outputArgs,
      outputUrl,
    ],
  };
 }
 function spawnRecorder(source) {
  const key = buildKey(source);
  if (recorders.has(key)) return;
  const { args, outputUrl } = buildArgs(source);
  logger.info('Preview transcoder starting', {
    key,
    transport: PREVIEW_TRANSPORT,
    codec: PREVIEW_CODEC,
    inputUrl: source.inputUrl,
    outputUrl,
  });
  const proc = spawn(FFMPEG_BIN, args, { stdio: ['ignore', 'ignore', 'pipe'] });
  const stderrChunks = [];
  let stderrSize = 0;
  proc.stderr.on('data', (chunk) => {
    if (!chunk || stderrSize > 8192) return;
    stderrChunks.push(chunk);
    stderrSize += chunk.length;
  });
  recorders.set(key, { proc, source });
  proc.on('exit', (code, signal) => {
    recorders.delete(key);
    const stderrBuffer = stderrChunks.length ? Buffer.concat(stderrChunks) : null;
    if (stderrBuffer && stderrBuffer.length) {
      const preview = stderrBuffer.toString('utf8', 0, 600).trim();
      logger.warn('Preview transcoder stderr', {
        key,
        stderrBytes: stderrBuffer.length,
        stderrPreview: preview || '<non-utf8>',
      });
    } else {
      logger.warn('Preview transcoder stderr', { key, stderrBytes: 0 });
    }
    if (!ENABLED) return;
    const delay = 2000;
    logger.warn('Preview transcoder exited; restarting', { key, code, signal });
    setTimeout(() => {
      if (!recorders.has(key) && ENABLED) {
        spawnRecorder(source);
      }
    }, delay);
  });
  events.emit('spawn', { key, source });
 }
 function stopRecorder(key) {
  const entry = recorders.get(key);
  if (!entry) return;
  entry.proc.kill('SIGTERM');
  recorders.delete(key);
  events.emit('stop', { key, source: entry.source });
 }
 function syncRecorders() {
  const sources = listSources();
  const desiredKeys = new Set();
  sources.forEach((source) => {
    const key = buildKey(source);
    desiredKeys.add(key);
    if (!recorders.has(key)) {
      spawnRecorder(source);
    }
  });
  Array.from(recorders.keys()).forEach((key) => {
    if (!desiredKeys.has(key)) {
      stopRecorder(key);
    }
  });
  logger.info('Preview transcoders synced', { total: desiredKeys.size });
 }
 function start() {
  if (!ENABLED) {
    logger.info('Preview transcoders disabled');
    return;
  }
  syncRecorders();
  if (!syncTimer) {
    syncTimer = setInterval(syncRecorders, 10000);
  }
 }
 function stop() {
  if (syncTimer) {
    clearInterval(syncTimer);
    syncTimer = null;
  }
  Array.from(recorders.keys()).forEach((key) => stopRecorder(key));
 }
 roverManager.managerEvents.on('rover', () => {
  if (ENABLED) {
    syncRecorders();
  }
 });
 roomCameraEvents.on('update', () => {
  if (ENABLED) {
    syncRecorders();
  }
 });
 start();
 module.exports = {
  previewEvents: events,
  syncPreviewTranscoders: syncRecorders,
  stopPreviewTranscoders: stop,
 };
@@ -46,7 +46,11 @@ function extractStreamInfo(path) {
  const remaining = segments.slice(start, end);
  if (remaining.length === 1) {
    const rawId = remaining[0] || '';
-    const baseId = rawId.endsWith('-audio') ? rawId.slice(0, -6) : rawId;
+    let baseId = rawId.endsWith('-audio') ? rawId.slice(0, -6) : rawId;
    const previewMatch = baseId.match(/^(.*)-preview-[a-z0-9]+$/);
    if (previewMatch) {
      baseId = previewMatch[1];
    }
    return { type: 'rover', id: rawId, baseId };
  }
  if (remaining.length === 2 && remaining[0] === 'room') {
@@ -4,6 +4,7 @@ const { getMode, MODES } = require('./modeManager');
 const { isAdmin, isLockdownAdmin, getRole } = require('./roleService');
 const videoSessions = require('./videoSessions');
 const roverManager = require('./roverManager');
 const { getRoomCamera } = require('./roomCameraService');
 const { loadConfig } = require('../helpers/configLoader');
 const config = loadConfig();
@@ -36,6 +37,17 @@ function buildWhepUrlForSource(source) {
  return `${cleanBase}/${segments.join('/')}/whep`;
 }
 function sanitizeCodec(codec) {
  return String(codec || '')
    .toLowerCase()
    .replace(/[^a-z0-9]/g, '');
 }
 function buildPreviewId(id, codec) {
  const cleanCodec = sanitizeCodec(codec) || 'av1';
  return `${id}-preview-${cleanCodec}`;
 }
 function passesMode(socket) {
  const mode = getMode();
  if (mode === MODES.LOCKDOWN) {
@@ -65,14 +77,21 @@ function canViewRoomCamera(socket) {
 function normalizeRequest(payload = {}) {
  if (!payload) return null;
  const preview = Boolean(payload.preview || payload.mode === 'preview');
  const codec = payload.codec ? String(payload.codec) : null;
  if (payload.type && payload.id) {
-    return { type: payload.type, id: String(payload.id) };
+    return {
      type: payload.type,
      id: String(payload.id),
      preview,
      codec,
    };
  }
  if (payload.roverId) {
-    return { type: 'rover', id: String(payload.roverId) };
+    return { type: 'rover', id: String(payload.roverId), preview, codec };
  }
  if (payload.roomCameraId) {
-    return { type: 'room', id: String(payload.roomCameraId) };
+    return { type: 'room', id: String(payload.roomCameraId), preview, codec };
  }
  return null;
 }
@@ -93,16 +112,30 @@ io.on('connection', (socket) => {
          throw new Error('Not authorized for video');
        }
      } else if (target.type === 'room') {
        if (!target.preview) {
          throw new Error('Room cameras now use the snapshot feed');
        }
        if (!getRoomCamera(target.id)) {
          throw new Error('Room camera not found');
        }
      } else {
        throw new Error('Unsupported video source');
      }
-      const url = buildWhepUrlForSource(target);
+      const requestId = target.preview ? buildPreviewId(target.id, target.codec) : target.id;
      const requestTarget = { ...target, id: requestId };
      const url = buildWhepUrlForSource(requestTarget);
      if (!url) {
        throw new Error('Server video base URL missing');
      }
-      const sessionId = videoSessions.createSession(socket, target);
+      const sessionId = videoSessions.createSession(socket, requestTarget);
-      cb({ url, token: sessionId, type: target.type, id: target.id });
+      cb({
        url,
        token: sessionId,
        type: requestTarget.type,
        id: requestTarget.id,
        preview: Boolean(target.preview),
        codec: target.codec || null,
      });
    } catch (err) {
      logger.warn('video request failed: %s', err.message);
      cb({ error: err.message });
@@ -5,6 +5,7 @@ import { useVideoRequests } from '../hooks/useVideoRequests.js';
 import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
 import { useControlSystem } from '../controls/index.js';
 import VideoTile from './VideoTile.jsx';
 import { supportsAv1WebRtc } from '../lib/mediaSupport.js';
 export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
  const { session } = useSession();
@@ -69,6 +70,20 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
  const sources = useVideoRequests(entries);
  const info = roverId && shouldShowVideo ? sources[roverId] : null;
  const audioInfo = roverId && hasAudio ? sources[`${roverId}-audio`] : null;
  const av1Supported = supportsAv1WebRtc();
  const previewEntries = roverId
    ? [
        {
          type: 'rover',
          id: roverId,
          key: `rover:${roverId}:preview:av1`,
          preview: true,
          codec: 'av1',
        },
      ]
    : [];
  const previewSources = useVideoRequests(previewEntries, { enabled: Boolean(roverId) && av1Supported });
  const previewSession = roverId ? previewSources[`rover:${roverId}:preview:av1`] || null : null;
  const snapshotFeeds = useRoverSnapshots(roverId ? [roverId] : [], {
    enabled: Boolean(roverId),
    version: session?.mode,
@@ -114,8 +129,8 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
    <section className="panel">
      {roverId ? (
        <VideoTile
-          sessionInfo={info}
+          sessionInfo={shouldShowVideo ? info : previewSession?.url ? previewSession : null}
-          videoMode={shouldShowVideo ? 'whep' : 'snapshot'}
+          videoMode={shouldShowVideo ? 'whep' : previewSession?.url ? 'whep' : 'snapshot'}
          snapshotFeed={snapshotFeed}
          audioSessionInfo={audioInfo}
          label={roverLabel}
@@ -123,7 +138,13 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
          batteryConfig={batteryConfig}
          layoutFormat={layoutFormat}
          songNote={song?.note}
-          qualityNotice={!shouldShowVideo ? 'Preview feed (low FPS) until your turn.' : null}
+          qualityNotice={
            !shouldShowVideo
              ? previewSession?.url
                ? 'Preview feed (AV1) until your turn.'
                : 'Preview feed (snapshots) until your turn.'
              : null
          }
          showTurnCue={turnCueVisible}
          turnTimerText={turnTimerText}
          turnSeconds={turnSeconds}
@@ -1,7 +1,74 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { WhepPlayer } from '../lib/whepPlayer.js';
-export default function RoomCameraFeed({ feed, label }) {
+function RoomCameraVideo({ sessionInfo, label, onStatus }) {
  const videoRef = useRef(null);
  const [status, setStatus] = useState('idle');
  const [detail, setDetail] = useState(null);
  useEffect(() => {
    if (!sessionInfo?.url || !videoRef.current) return undefined;
    let active = true;
    let player;
    const handleStatus = (nextStatus, info) => {
      if (!active) return;
      setStatus(nextStatus);
      setDetail(info || null);
      if (typeof onStatus === 'function') {
        onStatus(nextStatus);
      }
    };
    player = new WhepPlayer({
      url: sessionInfo.url,
      token: sessionInfo.token,
      video: videoRef.current,
      onStatus: handleStatus,
    });
    player.start().catch((err) => {
      if (!active) return;
      setStatus('error');
      setDetail(err.message);
      if (typeof onStatus === 'function') {
        onStatus('error');
      }
    });
    return () => {
      active = false;
      player?.stop();
    };
  }, [sessionInfo?.url, sessionInfo?.token, onStatus]);
  return (
    <div className="relative h-full w-full">
      <video
        ref={videoRef}
        className="h-full w-full object-cover"
        muted
        playsInline
        autoPlay
        controls={false}
        aria-label={label}
      />
      {status !== 'playing' && (
        <div className="absolute inset-0 flex items-center justify-center text-sm text-slate-300">
          {detail ? `Video error: ${detail}` : 'Connecting video…'}
        </div>
      )}
    </div>
  );
 }
 export default function RoomCameraFeed({ feed, label, videoSession = null, preferVideo = false }) {
  const [blink, setBlink] = useState(false);
  const [videoFailed, setVideoFailed] = useState(false);
  useEffect(() => {
    setVideoFailed(false);
  }, [videoSession?.url, videoSession?.token]);
  useEffect(() => {
    if (!feed) return;
@@ -15,12 +82,27 @@ export default function RoomCameraFeed({ feed, label }) {
    return feed.status || 'Connecting…';
  }, [feed]);
  const showVideo = Boolean(preferVideo && videoSession?.url && !videoFailed);
  const showSnapshot = Boolean(!showVideo && feed?.objectUrl);
  return (
    <div className="relative w-full overflow-hidden rounded bg-black" style={{ aspectRatio: '4 / 3' }}>
-      {feed?.objectUrl ? (
+      {showVideo ? (
        <RoomCameraVideo
          sessionInfo={videoSession}
          label={label}
          onStatus={(nextStatus) => {
            if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
              setVideoFailed(true);
            }
          }}
        />
      ) : showSnapshot ? (
        <img src={feed.objectUrl} alt={label} className="h-full w-full object-cover" />
      ) : (
-        <div className="flex h-full w-full items-center justify-center text-sm text-slate-300">Waiting for frame…</div>
+        <div className="flex h-full w-full items-center justify-center text-sm text-slate-300">
          {preferVideo ? 'Waiting for video…' : 'Waiting for frame…'}
        </div>
      )}
      <div className="pointer-events-none absolute left-0 top-0 bg-black/70 px-0.5 py-0.5 text-xs font-semibold text-white">
        {label}
@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
 import { useSettingsNamespace } from '../settings/index.js';
 import { useRoomCameraSnapshots } from '../hooks/useRoomCameraSnapshots.js';
 import { useVideoRequests } from '../hooks/useVideoRequests.js';
 import { supportsAv1WebRtc } from '../lib/mediaSupport.js';
 import RoomCameraFeed from './RoomCameraFeed.jsx';
 function EmptyState() {
@@ -32,6 +34,15 @@ export default function RoomCameraPanel({
  const { session } = useSession();
  const cameras = session?.roomCameras || [];
  const feedMap = useRoomCameraSnapshots(cameras.map((camera) => ({ id: camera.id })));
  const av1Supported = supportsAv1WebRtc();
  const previewEntries = cameras.map((camera) => ({
    type: 'room',
    id: camera.id,
    key: `room:${camera.id}:preview:av1`,
    preview: true,
    codec: 'av1',
  }));
  const previewSources = useVideoRequests(previewEntries, { enabled: av1Supported });
  const { value: orientationSettings, save: saveOrientationSettings } = useSettingsNamespace('roomCameraPanels', {});
  const [orientation, setOrientation] = useState(() =>
    normalizeOrientation(
@@ -96,13 +107,19 @@ export default function RoomCameraPanel({
      <div className={containerClass}>
        {cameras.map((camera) => {
          const feed = feedMap[camera.id] || null;
          const previewSession = previewSources[`room:${camera.id}:preview:av1`] || null;
          return (
            <article key={camera.id} className="w-full space-y-0.5 rounded bg-zinc-950 p-0.5 shadow-inner shadow-black/40">
              {/* <header className="space-y-0.5">
                <p className="text-lg font-semibold text-white">{camera.name || camera.id}</p>
                {camera.description && <p className="text-xs text-slate-500">{camera.description}</p>}
              </header> */}
-              <RoomCameraFeed feed={feed} label={camera.name || camera.id} />
+              <RoomCameraFeed
                feed={feed}
                label={camera.name || camera.id}
                videoSession={previewSession}
                preferVideo={Boolean(previewSession?.url)}
              />
            </article>
          );
        })}
@@ -11,23 +11,42 @@ function normalizeEntry(entry) {
  if (typeof entry === 'object') {
    if (entry.type && entry.id) {
      const id = String(entry.id);
      const preview = Boolean(entry.preview);
      const codec = entry.codec ? String(entry.codec) : null;
      let key = entry.key;
      if (!key) {
        key = entry.type === 'room' ? `room:${id}` : id;
        if (preview) {
          key = `${key}:preview${codec ? `:${codec}` : ''}`;
        }
      }
      return {
        type: entry.type,
        id,
        key,
        preview,
        codec,
      };
    }
    if (entry.roverId) {
      const id = String(entry.roverId);
-      return { type: 'rover', id, key: entry.key || id };
+      return {
        type: 'rover',
        id,
        key: entry.key || id,
        preview: Boolean(entry.preview),
        codec: entry.codec ? String(entry.codec) : null,
      };
    }
    if (entry.roomCameraId) {
      const id = String(entry.roomCameraId);
-      return { type: 'room', id, key: entry.key || `room:${id}` };
+      return {
        type: 'room',
        id,
        key: entry.key || `room:${id}`,
        preview: Boolean(entry.preview),
        codec: entry.codec ? String(entry.codec) : null,
      };
    }
  }
  return null;
@@ -86,6 +105,12 @@ export function useVideoRequests(sourceList = [], options = {}) {
    function requestEntry(entry) {
      const payload = entry.type === 'room' ? { roomCameraId: entry.id } : { roverId: entry.id };
      if (entry.preview) {
        payload.preview = true;
        if (entry.codec) {
          payload.codec = entry.codec;
        }
      }
      socket.emit('video:request', payload, (resp = {}) => {
        if (cancelled) return;
        setSources((prev) => ({ ...prev, [entry.key]: resp }));
@@ -0,0 +1,28 @@
 let cachedAv1Support = null;
 function hasAv1CodecCapability() {
  if (typeof RTCRtpReceiver !== 'undefined' && RTCRtpReceiver.getCapabilities) {
    const caps = RTCRtpReceiver.getCapabilities('video');
    const codecs = caps?.codecs || [];
    return codecs.some((codec) => {
      const mime = (codec?.mimeType || '').toLowerCase();
      return mime === 'video/av1' || mime === 'video/av01' || mime === 'video/av1x';
    });
  }
  if (typeof document !== 'undefined') {
    const video = document.createElement('video');
    if (typeof video.canPlayType === 'function') {
      const result = video.canPlayType('video/mp4; codecs="av01.0.05M.08"');
      return result === 'probably' || result === 'maybe';
    }
  }
  return false;
 }
 export function supportsAv1WebRtc() {
  if (cachedAv1Support != null) {
    return cachedAv1Support;
  }
  cachedAv1Support = hasAv1CodecCapability();
  return cachedAv1Support;
 }
@@ -10,6 +10,8 @@ import VideoTile from '../components/VideoTile.jsx';
 import ChatPanel from '../components/ChatPanel.jsx';
 import AlertFeed from '../components/AlertFeed.jsx';
 import useDefaultNickname from '../hooks/useDefaultNickname.js';
 import RoomCameraFeed from '../components/RoomCameraFeed.jsx';
 import { supportsAv1WebRtc } from '../lib/mediaSupport.js';
 const ROTATE_MS = 20000;
@@ -40,6 +42,23 @@ function MiniSummaryContent() {
    roster.map((rover) => rover.id),
    { enabled: !inLockdown, version: session?.mode },
  );
  const av1Supported = supportsAv1WebRtc();
  const previewEntries = roster.map((rover) => ({
    type: 'rover',
    id: rover.id,
    key: `rover:${rover.id}:preview:av1`,
    preview: true,
    codec: 'av1',
  }));
  const roomPreviewEntries = roomCameras.map((camera) => ({
    type: 'room',
    id: camera.id,
    key: `room:${camera.id}:preview:av1`,
    preview: true,
    codec: 'av1',
  }));
  const previewSources = useVideoRequests(previewEntries, { enabled: !inLockdown && av1Supported });
  const roomPreviewSources = useVideoRequests(roomPreviewEntries, { enabled: !inLockdown && av1Supported });
  const audioEntries = useMemo(
    () =>
      roster.flatMap((rover) => {
@@ -91,10 +110,18 @@ function MiniSummaryContent() {
  const activeCamera = activeEntry?.type === 'room' ? activeEntry.camera : null;
  const activeSnapshot = activeRover ? snapshotFeeds[activeRover.id] || null : null;
  const activePreview =
    activeRover && previewSources[`rover:${activeRover.id}:preview:av1`]
      ? previewSources[`rover:${activeRover.id}:preview:av1`]
      : null;
  const activeAudio = activeRover ? audioSources[`${activeRover.id}-audio`] || null : null;
  const activeFrame = activeRover ? frames[activeRover.id] || null : null;
  const driverLabel = activeRover ? formatDriverLabel({ roverId: activeRover.id, session }) : null;
  const activeFeed = activeCamera ? feeds[activeCamera.id] || null : null;
  const activeRoomPreview =
    activeCamera && roomPreviewSources[`room:${activeCamera.id}:preview:av1`]
      ? roomPreviewSources[`room:${activeCamera.id}:preview:av1`]
      : null;
  if (inLockdown) {
    return (
@@ -118,8 +145,8 @@ function MiniSummaryContent() {
        ) : activeRover ? (
          <FitViewportFrame>
            <VideoTile
-              sessionInfo={null}
+              sessionInfo={activePreview?.url ? activePreview : null}
-              videoMode="snapshot"
+              videoMode={activePreview?.url ? 'whep' : 'snapshot'}
              snapshotFeed={activeSnapshot}
              audioSessionInfo={activeAudio}
              label={activeRover.name || activeRover.id}
@@ -135,7 +162,12 @@ function MiniSummaryContent() {
          </FitViewportFrame>
        ) : activeCamera ? (
          <FitViewportFrame>
-            <RoomCameraFrame camera={activeCamera} feed={activeFeed} />
+            <RoomCameraFrame
              camera={activeCamera}
              feed={activeFeed}
              videoSession={activeRoomPreview}
              preferVideo={Boolean(activeRoomPreview?.url)}
            />
          </FitViewportFrame>
        ) : (
          <div className="flex h-full w-full items-center justify-center text-sm text-slate-500">
@@ -158,26 +190,15 @@ export default function MiniSummaryApp() {
  );
 }
-function RoomCameraFrame({ camera, feed }) {
+function RoomCameraFrame({ camera, feed, videoSession, preferVideo }) {
  const hasImage = feed?.objectUrl;
  const connecting = feed && feed.status === 'connecting';
  return (
    <div className="relative h-full w-full bg-zinc-950">
-      {hasImage ? (
+      <RoomCameraFeed
-        <img
+        feed={feed}
-          src={feed.objectUrl}
+        label={camera.name || camera.id}
-          alt={camera.name || camera.id}
+        videoSession={videoSession}
-          className="h-full w-full object-cover"
+        preferVideo={preferVideo}
          draggable={false}
      />
      ) : (
        <div className="flex h-full w-full items-center justify-center text-sm text-slate-500">
          {connecting ? `Connecting to ${camera.name || camera.id}…` : 'No frame yet'}
        </div>
      )}
      <div className="absolute left-1 top-1 rounded bg-black/60 px-1 py-0.25 text-xs text-slate-200">
        {camera.name || camera.id}
      </div>
    </div>
  );
 }
@@ -13,6 +13,7 @@ import RoverRoster from '../components/RoverRoster.jsx';
 import AlertFeed from '../components/AlertFeed.jsx';
 import useDefaultNickname from '../hooks/useDefaultNickname.js';
 import CommunityGoalBanner from '../components/CommunityGoalBanner.jsx';
 import { supportsAv1WebRtc } from '../lib/mediaSupport.js';
 function formatDriverLabel({ roverId, session }) {
  const activeDriverId = session?.activeDrivers?.[roverId] || null;
@@ -25,14 +26,15 @@ function formatDriverLabel({ roverId, session }) {
  return driverText;
 }
-function RoverSpectatorCard({ rover, frame, snapshotFeed, audioInfo, session }) {
+function RoverSpectatorCard({ rover, frame, snapshotFeed, previewSession, audioInfo, session }) {
  const driverLabel = formatDriverLabel({ roverId: rover.id, session });
  const hasPreview = Boolean(previewSession?.url);
  return (
    <article className="min-h-[16rem] rounded bg-zinc-900 p-0.5 sm:min-h-[18rem]">
      <div className="min-h-0 overflow-hidden rounded bg-black/20">
        <VideoTile
-          sessionInfo={null}
+          sessionInfo={hasPreview ? previewSession : null}
-          videoMode="snapshot"
+          videoMode={hasPreview ? 'whep' : 'snapshot'}
          snapshotFeed={snapshotFeed}
          audioSessionInfo={audioInfo}
          label={rover.name}
@@ -48,7 +50,7 @@ function RoverSpectatorCard({ rover, frame, snapshotFeed, audioInfo, session })
  );
 }
-function RoverRow({ roster, frames, snapshotFeeds, audioSources, session }) {
+function RoverRow({ roster, frames, snapshotFeeds, previewSources, audioSources, session }) {
  if (roster.length === 0) {
    return <p className="col-span-full text-slate-400">No rovers registered.</p>;
  }
@@ -60,6 +62,7 @@ function RoverRow({ roster, frames, snapshotFeeds, audioSources, session }) {
          rover={rover}
          frame={frames[rover.id]}
          snapshotFeed={snapshotFeeds[rover.id]}
          previewSession={previewSources[`rover:${rover.id}:preview:av1`] || null}
          audioInfo={audioSources[`${rover.id}-audio`]}
          session={session}
          showHudMap
@@ -104,6 +107,15 @@ function SpectatorContent() {
    roster.map((rover) => rover.id),
    { enabled: !inLockdown, version: session?.mode },
  );
  const av1Supported = supportsAv1WebRtc();
  const previewEntries = roster.map((rover) => ({
    type: 'rover',
    id: rover.id,
    key: `rover:${rover.id}:preview:av1`,
    preview: true,
    codec: 'av1',
  }));
  const previewSources = useVideoRequests(previewEntries, { enabled: !inLockdown && av1Supported, version: session?.mode });
  const audioEntries = roster.flatMap((rover) =>
    rover.media?.audioPublishUrl
      ? [{ type: 'rover', id: `${rover.id}-audio`, key: `${rover.id}-audio` }]
@@ -130,6 +142,7 @@ function SpectatorContent() {
            roster={roster}
            frames={frames}
            snapshotFeeds={snapshotFeeds}
            previewSources={previewSources}
            audioSources={audioSources}
            session={session}
          />
Author	SHA1	Message	Date
legop3	3a8bb8a0cf	i give up lol	2026-01-17 20:35:03 -05:00
legop3	87936510b2	oops forgot to build UI	2026-01-17 20:29:41 -05:00
legop3	66b8c839b7	pass 2	2026-01-17 20:28:16 -05:00
legop3	7041a3c6df	pass 1	2026-01-17 19:32:36 -05:00