mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-15 17:12:59 -04:00
make the spectator videos a little bigger
This commit is contained in:
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
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user