jpeg roomcams first pass

webui/src/components/RoomCameraFeed.jsx

@@ -1,145 +1,25 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { WhepPlayer } from '../lib/whepPlayer.js';
+import { useMemo } from 'react';
 
-const RESTART_DELAY_MS = 2000;
-const UNMUTE_RETRY_MS = 3000;
-
-export default function RoomCameraFeed({ sessionInfo, label }) {
-  const videoRef = useRef(null);
-  const restartTimer = useRef(null);
-  const unmuteTimer = useRef(null);
-  const [status, setStatus] = useState('idle');
-  const [detail, setDetail] = useState(null);
-  const [restartToken, setRestartToken] = useState(0);
-  const [muted, setMuted] = useState(true);
-
-  const scheduleRestart = useCallback(() => {
-    clearTimeout(restartTimer.current);
-    restartTimer.current = setTimeout(() => setRestartToken(Date.now()), RESTART_DELAY_MS);
-  }, []);
-
-  const ensurePlayback = useCallback(async () => {
-    const video = videoRef.current;
-    if (!video) return;
-    try {
-      video.muted = true;
-      await video.play();
-    } catch {
-      // Autoplay might be blocked; retry later.
-    }
-  }, []);
-
-  const attemptUnmute = useCallback(
-    (delay = 0) => {
-      clearTimeout(unmuteTimer.current);
-
-      const scheduleRetry = () => {
-        clearTimeout(unmuteTimer.current);
-        unmuteTimer.current = setTimeout(() => {
-          tryPlay();
-        }, UNMUTE_RETRY_MS);
-      };
-
-      const tryPlay = async () => {
-        const video = videoRef.current;
-        if (!video) return;
-        try {
-          await ensurePlayback();
-          video.muted = false;
-          await video.play();
-          setMuted(false);
-        } catch {
-          video.muted = true;
-          setMuted(true);
-          scheduleRetry();
-        }
-      };
-
-      unmuteTimer.current = setTimeout(tryPlay, delay);
-    },
-    [ensurePlayback],
-  );
-
-  useEffect(
-    () => () => {
-      clearTimeout(restartTimer.current);
-      clearTimeout(unmuteTimer.current);
-    },
-    [],
-  );
-
-  useEffect(() => {
-    if (!sessionInfo?.url || !videoRef.current) {
-      return undefined;
-    }
-    let active = true;
-    let player;
-    const resetMuteId = setTimeout(() => setMuted(true), 0);
-    const handleStatus = (nextStatus, info) => {
-      if (!active) return;
-      setStatus(nextStatus);
-      setDetail(info || null);
-      if (nextStatus === 'playing') {
-        ensurePlayback();
-        attemptUnmute(0);
-      }
-      if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
-        scheduleRestart();
-      }
-    };
-
-    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);
-      scheduleRestart();
-    });
-
-    return () => {
-      active = false;
-      clearTimeout(resetMuteId);
-      player?.stop();
-    };
-  }, [sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback, attemptUnmute]);
-
-  useEffect(() => {
-    if (status === 'stopped' && sessionInfo?.url) {
-      scheduleRestart();
-    }
-  }, [status, sessionInfo?.url, scheduleRestart]);
-
-  const renderedStatus = sessionInfo?.error
-    ? `Error: ${sessionInfo.error}`
-    : !sessionInfo?.url
-    ? 'Waiting for stream session'
-    : status === 'error'
-    ? `Error: ${detail || 'unknown'}`
-    : detail
-    ? `${status} (${detail})`
-    : status;
+export default function RoomCameraFeed({ feed, label }) {
+  const statusText = useMemo(() => {
+    if (!feed) return 'Connecting…';
+    if (feed.error) return `Error: ${feed.error}`;
+    if (feed.status === 'playing' && feed.stale) return 'Stale frame';
+    return feed.status || 'Connecting…';
+  }, [feed]);
 
   return (
-    <div className="relative aspect-video w-full overflow-hidden rounded bg-black">
-      <video
-        ref={videoRef}
-        muted={muted}
-        playsInline
-        autoPlay
-        controls={false}
-        className="h-full w-full object-cover"
-      />
+    <div className="relative w-full overflow-hidden rounded bg-black" style={{ aspectRatio: '4 / 3' }}>
+      {feed?.objectUrl ? (
+        <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="pointer-events-none absolute left-0 top-0 bg-black/70 px-0.5 py-0.5 text-xs font-semibold text-white">
         {label}
       </div>
       <div className="pointer-events-none absolute bottom-0 left-0 m-0.5 rounded bg-black/70 px-0.5 py-0.25 text-[0.7rem] text-slate-100">
-        {renderedStatus}
+        {statusText}
       </div>
     </div>
   );

webui/src/components/RoomCameraPanel.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
-import { useVideoRequests } from '../hooks/useVideoRequests.js';
 import { useSettingsNamespace } from '../settings/index.js';
+import { useRoomCameraSnapshots } from '../hooks/useRoomCameraSnapshots.js';
 import RoomCameraFeed from './RoomCameraFeed.jsx';
 
 function EmptyState() {
@@ -31,8 +31,7 @@ export default function RoomCameraPanel({
 }) {
   const { session } = useSession();
   const cameras = session?.roomCameras || [];
-  const sourceDescriptors = cameras.map((camera) => ({ type: 'room', id: camera.id, key: `room:${camera.id}` }));
-  const videoSources = useVideoRequests(sourceDescriptors);
+  const feedMap = useRoomCameraSnapshots(cameras.map((camera) => ({ id: camera.id })));
   const { value: orientationSettings, save: saveOrientationSettings } = useSettingsNamespace('roomCameraPanels', {});
   const [orientation, setOrientation] = useState(() =>
     normalizeOrientation(
@@ -94,15 +93,14 @@ export default function RoomCameraPanel({
       )}
       <div className={containerClass}>
         {cameras.map((camera) => {
-          const key = `room:${camera.id}`;
-          const sessionInfo = videoSources[key];
+          const feed = feedMap[camera.id] || 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 sessionInfo={sessionInfo} label={camera.name || camera.id} />
+              <RoomCameraFeed feed={feed} label={camera.name || camera.id} />
             </article>
           );
         })}