spectation

webui/src/hooks/useSensorFeed.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { useSocket } from '../context/SocketContext.jsx';
+
+export function useSensorFeed() {
+  const socket = useSocket();
+  const [frames, setFrames] = useState({});
+
+  useEffect(() => {
+    function handleFrame({ roverId, sensors = {}, frame = {} }) {
+      if (!roverId) return;
+      setFrames((prev) => ({
+        ...prev,
+        [roverId]: {
+          roverId,
+          sensors,
+          raw: frame?.data || null,
+          receivedAt: Date.now(),
+        },
+      }));
+    }
+
+    socket.on('sensorFrame', handleFrame);
+    return () => {
+      socket.off('sensorFrame', handleFrame);
+    };
+  }, [socket]);
+
+  return frames;
+}

webui/src/hooks/useSpectatorMode.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { useSession } from '../context/SessionContext.jsx';
+
+export function useSpectatorMode() {
+  const { session, setRole, subscribeAll } = useSession();
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function ensureSpectator() {
+      try {
+        if (session?.role !== 'spectator') {
+          await setRole('spectator');
+        }
+        await subscribeAll();
+        if (!cancelled) {
+          setReady(true);
+        }
+      } catch (err) {
+        console.error('Failed to enter spectator mode', err);
+      }
+    }
+    ensureSpectator();
+    return () => {
+      cancelled = true;
+    };
+  }, [session?.role, setRole, subscribeAll]);
+
+  return ready;
+}

webui/src/hooks/useVideoRequests.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { useSocket } from '../context/SocketContext.jsx';
+
+export function useVideoRequests(roverIds = []) {
+  const socket = useSocket();
+  const [sources, setSources] = useState({});
+
+  useEffect(() => {
+    const ids = Array.from(new Set(roverIds.filter(Boolean)));
+    if (!ids.length) return;
+    let cancelled = false;
+
+    ids.forEach((roverId) => {
+      socket.emit('video:request', { roverId }, (resp = {}) => {
+        if (cancelled) return;
+        setSources((prev) => ({
+          ...prev,
+          [roverId]: resp,
+        }));
+      });
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [socket, roverIds.join('|')]);
+
+  return sources;
+}