make the spectator videos a little bigger

This commit is contained in:
legop3
2025-11-24 04:21:11 -05:00
parent 0e14445685
commit 126d8fbab9
6 changed files with 20 additions and 8 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -11,8 +11,8 @@
<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-C8Xb7rzW.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-rQdoy40l.css">
<script type="module" crossorigin src="/assets/index-DTymo3jY.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D-GAautK.css">
</head>
<body>
<div id="root"></div>
+8 -1
View File
@@ -4,7 +4,14 @@ import { WhepPlayer } from '../lib/whepPlayer.js';
const RESTART_DELAY_MS = 2000;
const UNMUTE_RETRY_MS = 3000;
export default function VideoTile({ sessionInfo, label, forceMute = false, telemetryFrame, batteryConfig, layoutFormat = 'desktop' }) {
export default function VideoTile({
sessionInfo,
label,
forceMute = false,
telemetryFrame,
batteryConfig,
layoutFormat = 'desktop',
}) {
const videoRef = useRef(null);
const restartTimer = useRef(null);
const unmuteTimer = useRef(null);
+8 -3
View File
@@ -55,12 +55,17 @@ function CurrentDriverBadge({ roverId, session }) {
function RoverSpectatorCard({ rover, frame, videoInfo, session }) {
return (
<article className="space-y-0.5 bg-zinc-900 p-0.5">
<article className="space-y-1 bg-zinc-900 p-0.5">
<header className="flex flex-col gap-0.25">
<h3 className="text-2xl font-semibold text-white leading-tight">{rover.name}</h3>
<CurrentDriverBadge roverId={rover.id} session={session} />
</header>
<VideoTile sessionInfo={videoInfo} label={rover.name} telemetryFrame={frame} batteryConfig={rover.battery} />
<VideoTile
sessionInfo={videoInfo}
label={rover.name}
telemetryFrame={frame}
batteryConfig={rover.battery}
/>
<TelemetrySummary frame={frame} />
</article>
);
@@ -71,7 +76,7 @@ function RoverRow({ roster, frames, videoSources, session }) {
return <p className="col-span-full text-slate-400">No rovers registered.</p>;
}
return (
<section className="grid grid-cols-1 gap-0.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<section className="grid grid-cols-1 gap-0.5 sm:grid-cols-2 lg:grid-cols-3">
{roster.map((rover) => (
<RoverSpectatorCard
key={rover.id}