spectatro

2026-09-16 01:21:20 -04:00 · 2026-04-28 14:17:36 -04:00
parent 13e9ebc909
commit 1d6bc24067
10 changed files with 254 additions and 231 deletions
@@ -1,231 +1,3 @@
-import { useEffect, useState } from 'react';
-import { useSession } from '../context/SessionContext.jsx';
-import { useSpectatorMode } from '../hooks/useSpectatorMode.js';
-import { useTelemetryFrames } from '../context/TelemetryContext.jsx';
-import { useVideoRequests } from '../hooks/useVideoRequests.js';
-import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
-import VideoTile from '../components/VideoTile.jsx';
-import RoomCameraPanel from '../components/RoomCameraPanel.jsx';
-import ChatPanel from '../components/ChatPanel.jsx';
-import LogPanel from '../components/LogPanel.jsx';
-import AlertFeed from '../components/AlertFeed.jsx';
-import useDefaultNickname from '../hooks/useDefaultNickname.js';
-import CommunityGoalBanner from '../components/CommunityGoalBanner.jsx';
-import RoverQueuesPanel from '../components/RoverQueuesPanel.jsx';
-import RawUserPilePanel from '../components/RawUserPilePanel.jsx';
-import ButtonBoxPanel from '../components/ButtonBoxPanel.jsx';
-import RewardRunOverlay from '../components/RewardRunOverlay.jsx';
+import SpectatorAppRoot from './SpectatorApp/SpectatorAppRoot.jsx';

-function usePortraitLayout() {
-  const [isPortrait, setIsPortrait] = useState(() => {
-    if (typeof window === 'undefined') return false;
-    return window.matchMedia('(max-aspect-ratio: 4/3)').matches;
-  });
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return undefined;
-    const media = window.matchMedia('(max-aspect-ratio: 4/3)');
-    const handleChange = (event) => setIsPortrait(event.matches);
-    if (media.addEventListener) {
-      media.addEventListener('change', handleChange);
-    } else {
-      media.addListener(handleChange);
-    }
-    return () => {
-      if (media.removeEventListener) {
-        media.removeEventListener('change', handleChange);
-      } else {
-        media.removeListener(handleChange);
-      }
-    };
-  }, []);
-
-  return isPortrait;
-}
-
-function formatDriverLabel({ roverId, session }) {
-  const activeDriverId = session?.activeDrivers?.[roverId] || null;
-  const user = (session?.users || []).find((entry) => entry.socketId === activeDriverId);
-  const label = user?.nickname || (activeDriverId ? activeDriverId.slice(0, 6) : 'No driver');
-  const mode = session?.mode;
-  const turnInfo = session?.turnQueues?.[roverId];
-  const driverText = mode === 'turns' && turnInfo?.current ? `${label} (turns)` : label;
-
-  return driverText;
-}
-
-function RoverSpectatorCard({ rover, frame, sessionInfo, videoMode, snapshotFeed, audioInfo, session }) {
-  const driverLabel = formatDriverLabel({ roverId: rover.id, session });
-  return (
-    <article className="min-h-[16rem] rounded bg-zinc-900 p-0 sm:min-h-[18rem]">
-      <div className="min-h-0 overflow-hidden rounded bg-black/20">
-        <VideoTile
-          sessionInfo={sessionInfo}
-          videoMode={videoMode}
-          snapshotFeed={snapshotFeed}
-          audioSessionInfo={audioInfo}
-          label={rover.name}
-          roverColor={rover.color || null}
-          telemetryFrame={frame}
-          batteryConfig={rover.battery}
-          hudVariant="spectator"
-          driverLabel={driverLabel}
-          hudForceMap
-          hudMapPosition="top-center"
-        />
-      </div>
-    </article>
-  );
-}
-
-function RoverRow({ roster, frames, videoSources, snapshotFeeds, audioSources, session, canSpectateVideo }) {
-  if (roster.length === 0) {
-    return <p className="col-span-full text-slate-400">No rovers registered.</p>;
-  }
-  return (
-    <section className="grid grid-cols-1 gap-0.5 md:grid-cols-2">
-      {roster.map((rover) => (
-        <RoverSpectatorCard
-          key={rover.id}
-          rover={rover}
-          frame={frames[rover.id]}
-          sessionInfo={canSpectateVideo ? videoSources[rover.id] || null : null}
-          videoMode={canSpectateVideo ? 'whep' : 'snapshot'}
-          snapshotFeed={canSpectateVideo ? null : snapshotFeeds[rover.id]}
-          audioInfo={audioSources[`${rover.id}-audio`]}
-          session={session}
-          showHudMap
-          hudMapPosition="bottom-left"
-        />
-      ))}
-    </section>
-  );
-}
-
-function SecondaryRow() {
-  return (
-    <section className="min-h-0">
-      <div className="surface min-h-[14rem] overflow-hidden">
-        <RoomCameraPanel
-          defaultOrientation="horizontal"
-          hideLayoutToggle
-          hideHeader
-          panelId="spectator-secondary"
-        />
-      </div>
-    </section>
-  );
-}
-
-function LogsRow({ className = '' }) {
-  return (
-    <div className={`panel ${className}`}>
-      <LogPanel />
-    </div>
-  );
-}
-
-function SpectatorContent() {
-  const { session } = useSession();
-  const inLockdown = session?.mode === 'lockdown';
-  const canSpectateVideo = Boolean(session?.isLocalNetwork);
-  useDefaultNickname();
-  useSpectatorMode();
-  const isPortraitLayout = usePortraitLayout();
-  const frames = useTelemetryFrames();
-  const roster = session?.roster ?? [];
-  const snapshotFeeds = useRoverSnapshots(
-    roster.map((rover) => rover.id),
-    { enabled: !inLockdown && !canSpectateVideo, version: session?.mode },
-  );
-  const videoEntries = canSpectateVideo
-    ? roster.map((rover) => ({ type: 'rover', id: rover.id, key: rover.id }))
-    : [];
-  const videoSources = useVideoRequests(videoEntries, { enabled: !inLockdown && canSpectateVideo, version: session?.mode });
-  const audioEntries = roster.flatMap((rover) =>
-    rover.media?.audioPublishUrl
-      ? [{ type: 'rover', id: `${rover.id}-audio`, key: `${rover.id}-audio` }]
-      : [],
-  );
-  const audioSources = useVideoRequests(audioEntries, { enabled: !inLockdown, version: session?.mode });
-
-  if (inLockdown) {
-    return (
-      <div className="flex min-h-screen items-center justify-center bg-black text-slate-200">
-        <div className="surface max-w-md space-y-0.5 p-1 text-center text-sm">
-          <p className="text-lg font-semibold text-white">Spectate disabled during lockdown.</p>
-          <p className="text-slate-300">Please wait until the server leaves lockdown to view streams.</p>
-        </div>
-      </div>
-    );
-  }
-
-  const mainClass = isPortraitLayout
-    ? 'flex min-h-screen flex-col bg-black text-slate-100 md:h-screen md:overflow-hidden'
-    : 'grid min-h-screen grid-cols-1 gap-0.5 bg-black text-slate-100 md:h-full md:min-h-0 md:grid-cols-[minmax(0,1fr)_18rem] lg:grid-cols-[minmax(0,1fr)_20rem]';
-  const contentClass = isPortraitLayout
-    ? 'order-2 flex min-h-0 min-w-0 flex-1 flex-col gap-0.5 overflow-y-auto'
-    : 'order-1 flex min-h-0 min-w-0 flex-col gap-0.5 md:overflow-y-auto';
-  const sidebarClass = isPortraitLayout
-    ? 'order-1 grid w-full min-h-0 items-stretch gap-0.5 border-b border-slate-800/60 bg-slate-950/90 p-0.5 grid-cols-[minmax(0,1fr)_minmax(0,0.7fr)_minmax(0,1.9fr)_minmax(0,0.7fr)]'
-    : 'order-2 flex min-h-0 min-w-0 flex-col gap-0.5 border-l border-slate-800/60 bg-slate-950/90 md:h-full md:overflow-y-auto';
-  const topBarItemClass = isPortraitLayout ? '' : '';
-  const portraitItemHeight = isPortraitLayout ? 'h-64' : '';
-
-  return (
-    <div className="min-h-screen bg-black text-slate-100 md:h-screen md:overflow-hidden">
-      <main className={mainClass}>
-        <section className={sidebarClass}>
-          {isPortraitLayout ? (
-            <div className={`${topBarItemClass} ${portraitItemHeight} flex flex-col gap-0.5`}>
-              <CommunityGoalBanner layout="desktop" dismissable={false} className="text-sm" />
-              <ButtonBoxPanel />
-              <div className="min-h-0 flex-1">
-                <RawUserPilePanel hideNicknameForm hideHeader compact fillHeight className="h-full" />
-              </div>
-            </div>
-          ) : (
-            <div className={topBarItemClass}>
-              <CommunityGoalBanner layout="desktop" dismissable={false} className="text-sm" />
-              <ButtonBoxPanel />
-            </div>
-          )}
-          <div className={`${topBarItemClass} ${isPortraitLayout ? `${portraitItemHeight} overflow-y-auto` : ''}`}>
-            <div className="panel h-full">
-              <RoverQueuesPanel title="Rovers" />
-            </div>
-          </div>
-          {!isPortraitLayout ? (
-            <div className={`${topBarItemClass} flex-1 min-h-0`}>
-              <RawUserPilePanel hideNicknameForm hideHeader compact fillHeight className="h-full" />
-            </div>
-          ) : null}
-          <div className={`${topBarItemClass} ${isPortraitLayout ? portraitItemHeight : 'flex-[1.1] min-h-0'}`}>
-            <ChatPanel allowSpectatorInput hideSpectatorNotice fillHeight />
-          </div>
-          <div className={`${topBarItemClass} ${isPortraitLayout ? portraitItemHeight : ''}`}>
-            <LogsRow className={`${isPortraitLayout ? 'h-full' : 'h-40'} overflow-hidden`} />
-          </div>
-        </section>
-        <section className={contentClass}>
-          <RoverRow
-            roster={roster}
-            frames={frames}
-            videoSources={videoSources}
-            snapshotFeeds={snapshotFeeds}
-            audioSources={audioSources}
-            session={session}
-            canSpectateVideo={canSpectateVideo}
-          />
-          <SecondaryRow />
-        </section>
-      </main>
-      <AlertFeed />
-      <RewardRunOverlay />
-    </div>
-  );
-}
-
-export default function SpectatorApp() {
-  return <SpectatorContent />;
-}
+export default SpectatorAppRoot;
@@ -0,0 +1,6 @@
+// Spectator app compatibility root.
+import SpectatorContent from './SpectatorContent.jsx';
+
+export default function SpectatorAppRoot() {
+  return <SpectatorContent />;
+}
@@ -0,0 +1,122 @@
+// Main spectator screen layout and feed wiring.
+import { useSession } from '../../context/SessionContext.jsx';
+import { useTelemetryFrames } from '../../context/TelemetryContext.jsx';
+import { useVideoRequests } from '../../hooks/useVideoRequests.js';
+import { useRoverSnapshots } from '../../hooks/useRoverSnapshots.js';
+import { useSpectatorMode } from '../../hooks/useSpectatorMode.js';
+import useDefaultNickname from '../../hooks/useDefaultNickname.js';
+import ChatPanel from '../../components/ChatPanel.jsx';
+import AlertFeed from '../../components/AlertFeed.jsx';
+import CommunityGoalBanner from '../../components/CommunityGoalBanner.jsx';
+import RoverQueuesPanel from '../../components/RoverQueuesPanel.jsx';
+import RawUserPilePanel from '../../components/RawUserPilePanel.jsx';
+import ButtonBoxPanel from '../../components/ButtonBoxPanel.jsx';
+import RewardRunOverlay from '../../components/RewardRunOverlay.jsx';
+import usePortraitLayout from './hooks/usePortraitLayout.js';
+import RoverRow from './components/RoverRow.jsx';
+import SecondaryRow from './components/SecondaryRow.jsx';
+import LogsRow from './components/LogsRow.jsx';
+
+export default function SpectatorContent() {
+  const { session } = useSession();
+  const inLockdown = session?.mode === 'lockdown';
+  const canSpectateVideo = Boolean(session?.isLocalNetwork);
+  useDefaultNickname();
+  useSpectatorMode();
+  const isPortraitLayout = usePortraitLayout();
+  const frames = useTelemetryFrames();
+  const roster = session?.roster ?? [];
+  const snapshotFeeds = useRoverSnapshots(
+    roster.map((rover) => rover.id),
+    { enabled: !inLockdown && !canSpectateVideo, version: session?.mode },
+  );
+  const videoEntries = canSpectateVideo
+    ? roster.map((rover) => ({ type: 'rover', id: rover.id, key: rover.id }))
+    : [];
+  const videoSources = useVideoRequests(videoEntries, {
+    enabled: !inLockdown && canSpectateVideo,
+    version: session?.mode,
+  });
+  const audioEntries = roster.flatMap((rover) =>
+    rover.media?.audioPublishUrl
+      ? [{ type: 'rover', id: `${rover.id}-audio`, key: `${rover.id}-audio` }]
+      : [],
+  );
+  const audioSources = useVideoRequests(audioEntries, { enabled: !inLockdown, version: session?.mode });
+
+  if (inLockdown) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-black text-slate-200">
+        <div className="surface max-w-md space-y-0.5 p-1 text-center text-sm">
+          <p className="text-lg font-semibold text-white">Spectate disabled during lockdown.</p>
+          <p className="text-slate-300">Please wait until the server leaves lockdown to view streams.</p>
+        </div>
+      </div>
+    );
+  }
+
+  const mainClass = isPortraitLayout
+    ? 'flex min-h-screen flex-col bg-black text-slate-100 md:h-screen md:overflow-hidden'
+    : 'grid min-h-screen grid-cols-1 gap-0.5 bg-black text-slate-100 md:h-full md:min-h-0 md:grid-cols-[minmax(0,1fr)_18rem] lg:grid-cols-[minmax(0,1fr)_20rem]';
+  const contentClass = isPortraitLayout
+    ? 'order-2 flex min-h-0 min-w-0 flex-1 flex-col gap-0.5 overflow-y-auto'
+    : 'order-1 flex min-h-0 min-w-0 flex-col gap-0.5 md:overflow-y-auto';
+  const sidebarClass = isPortraitLayout
+    ? 'order-1 grid w-full min-h-0 items-stretch gap-0.5 border-b border-slate-800/60 bg-slate-950/90 p-0.5 grid-cols-[minmax(0,1fr)_minmax(0,0.7fr)_minmax(0,1.9fr)_minmax(0,0.7fr)]'
+    : 'order-2 flex min-h-0 min-w-0 flex-col gap-0.5 border-l border-slate-800/60 bg-slate-950/90 md:h-full md:overflow-y-auto';
+  const topBarItemClass = isPortraitLayout ? '' : '';
+  const portraitItemHeight = isPortraitLayout ? 'h-64' : '';
+
+  return (
+    <div className="min-h-screen bg-black text-slate-100 md:h-screen md:overflow-hidden">
+      <main className={mainClass}>
+        <section className={sidebarClass}>
+          {isPortraitLayout ? (
+            <div className={`${topBarItemClass} ${portraitItemHeight} flex flex-col gap-0.5`}>
+              <CommunityGoalBanner layout="desktop" dismissable={false} className="text-sm" />
+              <ButtonBoxPanel />
+              <div className="min-h-0 flex-1">
+                <RawUserPilePanel hideNicknameForm hideHeader compact fillHeight className="h-full" />
+              </div>
+            </div>
+          ) : (
+            <div className={topBarItemClass}>
+              <CommunityGoalBanner layout="desktop" dismissable={false} className="text-sm" />
+              <ButtonBoxPanel />
+            </div>
+          )}
+          <div className={`${topBarItemClass} ${isPortraitLayout ? `${portraitItemHeight} overflow-y-auto` : ''}`}>
+            <div className="panel h-full">
+              <RoverQueuesPanel title="Rovers" />
+            </div>
+          </div>
+          {!isPortraitLayout ? (
+            <div className={`${topBarItemClass} flex-1 min-h-0`}>
+              <RawUserPilePanel hideNicknameForm hideHeader compact fillHeight className="h-full" />
+            </div>
+          ) : null}
+          <div className={`${topBarItemClass} ${isPortraitLayout ? portraitItemHeight : 'flex-[1.1] min-h-0'}`}>
+            <ChatPanel allowSpectatorInput hideSpectatorNotice fillHeight />
+          </div>
+          <div className={`${topBarItemClass} ${isPortraitLayout ? portraitItemHeight : ''}`}>
+            <LogsRow className={`${isPortraitLayout ? 'h-full' : 'h-40'} overflow-hidden`} />
+          </div>
+        </section>
+        <section className={contentClass}>
+          <RoverRow
+            roster={roster}
+            frames={frames}
+            videoSources={videoSources}
+            snapshotFeeds={snapshotFeeds}
+            audioSources={audioSources}
+            session={session}
+            canSpectateVideo={canSpectateVideo}
+          />
+          <SecondaryRow />
+        </section>
+      </main>
+      <AlertFeed />
+      <RewardRunOverlay />
+    </div>
+  );
+}
@@ -0,0 +1,10 @@
+// Log panel wrapper row for spectator layout.
+import LogPanel from '../../../components/LogPanel.jsx';
+
+export default function LogsRow({ className = '' }) {
+  return (
+    <div className={`panel ${className}`}>
+      <LogPanel />
+    </div>
+  );
+}
@@ -0,0 +1,26 @@
+// Rover grid row for spectator view.
+import RoverSpectatorCard from './RoverSpectatorCard.jsx';
+
+export default function RoverRow({ roster, frames, videoSources, snapshotFeeds, audioSources, session, canSpectateVideo }) {
+  if (roster.length === 0) {
+    return <p className="col-span-full text-slate-400">No rovers registered.</p>;
+  }
+  return (
+    <section className="grid grid-cols-1 gap-0.5 md:grid-cols-2">
+      {roster.map((rover) => (
+        <RoverSpectatorCard
+          key={rover.id}
+          rover={rover}
+          frame={frames[rover.id]}
+          sessionInfo={canSpectateVideo ? videoSources[rover.id] || null : null}
+          videoMode={canSpectateVideo ? 'whep' : 'snapshot'}
+          snapshotFeed={canSpectateVideo ? null : snapshotFeeds[rover.id]}
+          audioInfo={audioSources[`${rover.id}-audio`]}
+          session={session}
+          showHudMap
+          hudMapPosition="bottom-left"
+        />
+      ))}
+    </section>
+  );
+}
@@ -0,0 +1,27 @@
+// Single rover spectator card containing live/snapshot tile and HUD.
+import VideoTile from '../../../components/VideoTile.jsx';
+import { formatDriverLabel } from '../utils.js';
+
+export default function RoverSpectatorCard({ rover, frame, sessionInfo, videoMode, snapshotFeed, audioInfo, session }) {
+  const driverLabel = formatDriverLabel({ roverId: rover.id, session });
+  return (
+    <article className="min-h-[16rem] rounded bg-zinc-900 p-0 sm:min-h-[18rem]">
+      <div className="min-h-0 overflow-hidden rounded bg-black/20">
+        <VideoTile
+          sessionInfo={sessionInfo}
+          videoMode={videoMode}
+          snapshotFeed={snapshotFeed}
+          audioSessionInfo={audioInfo}
+          label={rover.name}
+          roverColor={rover.color || null}
+          telemetryFrame={frame}
+          batteryConfig={rover.battery}
+          hudVariant="spectator"
+          driverLabel={driverLabel}
+          hudForceMap
+          hudMapPosition="top-center"
+        />
+      </div>
+    </article>
+  );
+}
@@ -0,0 +1,17 @@
+// Secondary panel row showing room cameras.
+import RoomCameraPanel from '../../../components/RoomCameraPanel.jsx';
+
+export default function SecondaryRow() {
+  return (
+    <section className="min-h-0">
+      <div className="surface min-h-[14rem] overflow-hidden">
+        <RoomCameraPanel
+          defaultOrientation="horizontal"
+          hideLayoutToggle
+          hideHeader
+          panelId="spectator-secondary"
+        />
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,29 @@
+// Detect portrait-oriented viewport layout mode for spectator UI.
+import { useEffect, useState } from 'react';
+
+export default function usePortraitLayout() {
+  const [isPortrait, setIsPortrait] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(max-aspect-ratio: 4/3)').matches;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const media = window.matchMedia('(max-aspect-ratio: 4/3)');
+    const handleChange = (event) => setIsPortrait(event.matches);
+    if (media.addEventListener) {
+      media.addEventListener('change', handleChange);
+    } else {
+      media.addListener(handleChange);
+    }
+    return () => {
+      if (media.removeEventListener) {
+        media.removeEventListener('change', handleChange);
+      } else {
+        media.removeListener(handleChange);
+      }
+    };
+  }, []);
+
+  return isPortrait;
+}
@@ -0,0 +1,11 @@
+// Spectator app display formatting helpers.
+export function formatDriverLabel({ roverId, session }) {
+  const activeDriverId = session?.activeDrivers?.[roverId] || null;
+  const user = (session?.users || []).find((entry) => entry.socketId === activeDriverId);
+  const label = user?.nickname || (activeDriverId ? activeDriverId.slice(0, 6) : 'No driver');
+  const mode = session?.mode;
+  const turnInfo = session?.turnQueues?.[roverId];
+  const driverText = mode === 'turns' && turnInfo?.current ? `${label} (turns)` : label;
+
+  return driverText;
+}