mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-15 17:12:59 -04:00
spectatro
This commit is contained in:
legop3
@@ -9,6 +9,7 @@
|
||||
- Preserve imports/exports and call signatures unless internal-only and non-observable.
|
||||
- Validate no runtime behavior changes (manual flow checks + targeted tests when available).
|
||||
- Make small, reviewable commits per service/component area.
|
||||
- Treat `npm run build` output files committed into this repo as intentional deployment artifacts; do not discard them as noise.
|
||||
|
||||
## Server backend
|
||||
- Convert every service into a folder-based structure.
|
||||
@@ -56,7 +57,7 @@
|
||||
## WebUI frontend
|
||||
### BIGGEST OFFENDERS
|
||||
- [x] mini summary app
|
||||
- [ ] spectator app
|
||||
- [x] spectator app
|
||||
- [ ] vip audio upload card
|
||||
- [ ] admin panel
|
||||
- [ ] drive dock action
|
||||
@@ -68,9 +69,11 @@
|
||||
|
||||
### COMPLETED COMPONENTS
|
||||
- mini summary app
|
||||
- spectator app
|
||||
|
||||
### LARGE CHANGES
|
||||
- Split `webui/src/mini/MiniSummaryApp.jsx` into folderized modules under `webui/src/mini/MiniSummaryApp/` with a compatibility entrypoint preserved.
|
||||
- Split `webui/src/spectate/SpectatorApp.jsx` into folderized modules under `webui/src/spectate/SpectatorApp/` with a compatibility entrypoint preserved.
|
||||
|
||||
## Done criteria (per item)
|
||||
- [ ] Folderized structure created.
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user