awa

webui/src/spectate/SpectatorApp/components/RoverRow.jsx

@@ -3,25 +3,14 @@
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
 import RoverSpectatorCard from './RoverSpectatorCard.jsx';
 
-export default function RoverRow({ roster, frames, videoSources, snapshotFeeds, audioSources, session, canSpectateVideo }) {
+export default function RoverRow({ roster }) {
   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"
-        />
+        <RoverSpectatorCard key={rover.id} rover={rover} />
       ))}
     </section>
   );

webui/src/spectate/SpectatorApp/components/RoverSpectatorCard.jsx

@@ -1,28 +1,15 @@
 // Rover Spectator Card
 // Purpose: Defines the Rover Spectator Card module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
-import VideoTile from '../../../components/VideoTile/index.jsx';
-import { formatDriverLabel } from '../utils.js';
+import SpectateVideo from '../../../components/SpectateVideo/index.jsx';
 
-export default function RoverSpectatorCard({ rover, frame, sessionInfo, videoMode, snapshotFeed, audioInfo, session }) {
-  const driverLabel = formatDriverLabel({ roverId: rover.id, session });
+export default function RoverSpectatorCard({ rover }) {
   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}
+        <SpectateVideo
+          roverId={rover.id}
           label={rover.name}
-          roverDescription={rover.description}
-          roverColor={rover.color || null}
-          telemetryFrame={frame}
-          batteryConfig={rover.battery}
-          hudVariant="spectator"
-          driverLabel={driverLabel}
-          hudForceMap
-          hudMapPosition="top-center"
         />
       </div>
     </article>