mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 01:21:20 -04:00
855 lines
29 KiB
React
855 lines
29 KiB
React
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { WhepPlayer } from '../lib/whepPlayer.js';
|
|
import TopDownMap from './TopDownMap.jsx';
|
|
import { useHudMapSetting } from '../hooks/useHudMapSetting.js';
|
|
import { useChat } from '../context/ChatContext.jsx';
|
|
import { useSession } from '../context/SessionContext.jsx';
|
|
import { useSettingsNamespace } from '../settings/index.js';
|
|
import DiscordInviteButton from './DiscordInviteButton.jsx';
|
|
|
|
const RESTART_DELAY_MS = 2000;
|
|
const UNMUTE_RETRY_MS = 3000;
|
|
const AUDIO_RETRY_MS = 3000;
|
|
|
|
function buildBatteryVisual(charge, config) {
|
|
const full = config?.Full;
|
|
const warn = config?.Warn;
|
|
const urgent = config?.Urgent ?? null;
|
|
if (charge == null || full == null || warn == null) {
|
|
return { available: false };
|
|
}
|
|
|
|
const span = full - warn;
|
|
if (span <= 0) return { available: false };
|
|
const normalized = (charge - warn) / span;
|
|
const percent = Math.min(1, Math.max(0, normalized));
|
|
const percentDisplay = Math.round(percent * 100);
|
|
const depleted = normalized <= 0;
|
|
const warnTriggered = urgent != null && charge <= urgent;
|
|
const barClass = depleted ? 'bg-red-500 animate-pulse' : warnTriggered ? 'bg-amber-400' : 'bg-emerald-500';
|
|
|
|
return {
|
|
available: true,
|
|
percentDisplay,
|
|
depleted,
|
|
warnTriggered,
|
|
barClass,
|
|
};
|
|
}
|
|
|
|
export default function VideoTile({
|
|
sessionInfo,
|
|
audioSessionInfo,
|
|
videoMode = 'whep',
|
|
snapshotFeed = null,
|
|
qualityNotice = null,
|
|
label,
|
|
forceMute = false,
|
|
telemetryFrame,
|
|
batteryConfig,
|
|
layoutFormat = 'desktop',
|
|
hudVariant = 'default',
|
|
driverLabel = null,
|
|
hudForceMap = false,
|
|
hudMapPosition = 'top-right',
|
|
hudLabelScale = 1,
|
|
fitParent = false,
|
|
showTurnCue = false,
|
|
turnTimerText = null,
|
|
turnSeconds = null,
|
|
isActiveDriver = false,
|
|
idleSkipSeconds = null,
|
|
}) {
|
|
const videoRef = useRef(null);
|
|
const audioRef = useRef(null);
|
|
const restartTimer = useRef(null);
|
|
const audioRestartTimer = useRef(null);
|
|
const audioPlayInterval = useRef(null);
|
|
const unmuteTimer = useRef(null);
|
|
const [status, setStatus] = useState('idle');
|
|
const [detail, setDetail] = useState(null);
|
|
const [audioStatus, setAudioStatus] = useState('idle');
|
|
const [audioDetail, setAudioDetail] = useState(null);
|
|
const [restartToken, setRestartToken] = useState(0);
|
|
const [audioRestartToken, setAudioRestartToken] = useState(0);
|
|
const [muted, setMuted] = useState(true);
|
|
const usingSnapshot = videoMode === 'snapshot';
|
|
const sensors = telemetryFrame?.sensors;
|
|
const batteryCharge = sensors?.batteryChargeMah ?? null;
|
|
const desktopLayout = layoutFormat === 'desktop';
|
|
const mobileHud = !desktopLayout;
|
|
const [showHudMapDesktop, setShowHudMapDesktop] = useHudMapSetting();
|
|
const showHudMap = hudForceMap ? true : mobileHud ? true : showHudMapDesktop;
|
|
const batteryVisual = buildBatteryVisual(batteryCharge, batteryConfig);
|
|
// console.log('[BatteryBarDebug]', {
|
|
// frameSensors: sensors,
|
|
// batteryCharge,
|
|
// batteryCapacity,
|
|
// config: batteryConfig,
|
|
// });
|
|
const wheelOvercurrents = sensors?.wheelOvercurrents || null;
|
|
const overcurrentMotors =
|
|
wheelOvercurrents == null
|
|
? []
|
|
: Object.entries(wheelOvercurrents)
|
|
.filter(([, active]) => Boolean(active))
|
|
.map(([key]) => key);
|
|
|
|
const scheduleRestart = useCallback(() => {
|
|
clearTimeout(restartTimer.current);
|
|
restartTimer.current = setTimeout(() => setRestartToken(Date.now()), RESTART_DELAY_MS);
|
|
}, []);
|
|
const scheduleAudioRestart = useCallback(() => {
|
|
clearTimeout(audioRestartTimer.current);
|
|
audioRestartTimer.current = setTimeout(() => setAudioRestartToken(Date.now()), RESTART_DELAY_MS);
|
|
}, []);
|
|
|
|
const ensurePlayback = useCallback(async () => {
|
|
const video = videoRef.current;
|
|
if (!video) return;
|
|
try {
|
|
video.muted = true;
|
|
await video.play();
|
|
} catch {
|
|
// Autoplay might still be blocked; retry logic elsewhere will handle it.
|
|
}
|
|
}, []);
|
|
|
|
const attemptUnmute = useCallback(
|
|
(delay = 0) => {
|
|
if (forceMute) return;
|
|
clearTimeout(unmuteTimer.current);
|
|
|
|
const scheduleRetry = () => {
|
|
clearTimeout(unmuteTimer.current);
|
|
unmuteTimer.current = setTimeout(() => {
|
|
if (!forceMute) {
|
|
tryPlay();
|
|
}
|
|
}, UNMUTE_RETRY_MS);
|
|
};
|
|
|
|
const tryPlay = async () => {
|
|
const video = videoRef.current;
|
|
if (!video) return;
|
|
try {
|
|
await ensurePlayback();
|
|
video.muted = false;
|
|
await video.play();
|
|
setMuted(false);
|
|
} catch {
|
|
video.muted = true;
|
|
setMuted(true);
|
|
scheduleRetry();
|
|
}
|
|
};
|
|
|
|
unmuteTimer.current = setTimeout(tryPlay, delay);
|
|
},
|
|
[ensurePlayback, forceMute],
|
|
);
|
|
|
|
useEffect(
|
|
() => () => {
|
|
clearTimeout(restartTimer.current);
|
|
clearTimeout(audioRestartTimer.current);
|
|
clearTimeout(unmuteTimer.current);
|
|
clearInterval(audioPlayInterval.current);
|
|
},
|
|
[],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (status === 'playing') {
|
|
attemptUnmute(0);
|
|
}
|
|
}, [status, attemptUnmute]);
|
|
|
|
useEffect(() => {
|
|
if (usingSnapshot) {
|
|
setStatus('snapshot');
|
|
setDetail(null);
|
|
}
|
|
}, [usingSnapshot]);
|
|
|
|
useEffect(() => {
|
|
if (usingSnapshot || !sessionInfo?.url || !videoRef.current) {
|
|
return undefined;
|
|
}
|
|
let active = true;
|
|
let player;
|
|
const resetMuteId = setTimeout(() => setMuted(true), 0);
|
|
const handleStatus = (nextStatus, info) => {
|
|
if (!active) return;
|
|
setStatus(nextStatus);
|
|
setDetail(info || null);
|
|
if (nextStatus === 'playing') {
|
|
ensurePlayback();
|
|
}
|
|
if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
|
|
scheduleRestart();
|
|
}
|
|
};
|
|
|
|
player = new WhepPlayer({
|
|
url: sessionInfo.url,
|
|
token: sessionInfo.token,
|
|
video: videoRef.current,
|
|
onStatus: handleStatus,
|
|
});
|
|
|
|
player.start().catch((err) => {
|
|
if (!active) return;
|
|
setStatus('error');
|
|
setDetail(err.message);
|
|
scheduleRestart();
|
|
});
|
|
|
|
return () => {
|
|
active = false;
|
|
clearTimeout(resetMuteId);
|
|
player?.stop();
|
|
};
|
|
}, [usingSnapshot, sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback]);
|
|
|
|
useEffect(() => {
|
|
if (status === 'stopped' && sessionInfo?.url) {
|
|
scheduleRestart();
|
|
}
|
|
}, [status, sessionInfo?.url, scheduleRestart]);
|
|
|
|
// Audio-only WHEP (no pausing/muting; keeps trying to play)
|
|
useEffect(() => {
|
|
if (!audioSessionInfo?.url || !audioRef.current) {
|
|
return undefined;
|
|
}
|
|
let active = true;
|
|
let player;
|
|
const handleStatus = (nextStatus, info) => {
|
|
if (!active) return;
|
|
setAudioDetail(info || (nextStatus === 'connected' ? 'connected' : null));
|
|
setAudioStatus((prev) => {
|
|
if (nextStatus === 'connected' && (prev === 'playing' || prev === 'connecting')) {
|
|
return prev;
|
|
}
|
|
if (nextStatus === 'new') {
|
|
return prev;
|
|
}
|
|
return nextStatus;
|
|
});
|
|
if (nextStatus === 'playing') {
|
|
audioRef.current?.play().catch(() => {});
|
|
}
|
|
if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
|
|
scheduleAudioRestart();
|
|
}
|
|
};
|
|
|
|
player = new WhepPlayer({
|
|
url: audioSessionInfo.url,
|
|
token: audioSessionInfo.token,
|
|
video: audioRef.current,
|
|
audioOnly: true,
|
|
onStatus: handleStatus,
|
|
});
|
|
|
|
player.start().catch((err) => {
|
|
if (!active) return;
|
|
setAudioStatus('error');
|
|
setAudioDetail(err.message);
|
|
scheduleAudioRestart();
|
|
});
|
|
|
|
return () => {
|
|
active = false;
|
|
player?.stop();
|
|
};
|
|
}, [audioSessionInfo?.url, audioSessionInfo?.token, audioRestartToken, scheduleAudioRestart]);
|
|
|
|
// Keep nudging the audio element to play in case autoplay was blocked.
|
|
useEffect(() => {
|
|
const audioEl = audioRef.current;
|
|
if (!audioSessionInfo?.url || !audioEl) {
|
|
clearInterval(audioPlayInterval.current);
|
|
return undefined;
|
|
}
|
|
const shouldAttempt = ['connecting', 'connected', 'playing', 'paused'].includes(audioStatus);
|
|
if (!shouldAttempt) {
|
|
clearInterval(audioPlayInterval.current);
|
|
return undefined;
|
|
}
|
|
|
|
const attemptPlay = () => {
|
|
const target = audioRef.current;
|
|
if (!target) return;
|
|
if (!target.paused && !target.ended) return;
|
|
target
|
|
.play()
|
|
.then(() => {
|
|
setAudioStatus((prev) => (prev === 'connected' ? 'playing' : prev));
|
|
setAudioDetail((prev) => (prev === 'paused' ? null : prev));
|
|
})
|
|
.catch((err) => {
|
|
setAudioDetail((prev) => prev || err?.message || 'autoplay blocked');
|
|
});
|
|
};
|
|
|
|
attemptPlay();
|
|
audioPlayInterval.current = setInterval(attemptPlay, AUDIO_RETRY_MS);
|
|
|
|
return () => clearInterval(audioPlayInterval.current);
|
|
}, [audioSessionInfo?.url, audioStatus]);
|
|
|
|
// Reflect audio element events back into status/detail so the HUD stays accurate.
|
|
useEffect(() => {
|
|
const audioEl = audioRef.current;
|
|
if (!audioEl) return undefined;
|
|
|
|
const handlePlay = () => {
|
|
setAudioStatus((prev) => (prev === 'error' ? prev : 'playing'));
|
|
setAudioDetail(null);
|
|
};
|
|
const handlePause = () => {
|
|
setAudioStatus((prev) => {
|
|
if (['error', 'failed', 'disconnected', 'closed', 'stopped'].includes(prev)) return prev;
|
|
return 'paused';
|
|
});
|
|
setAudioDetail((prev) => prev || 'paused');
|
|
};
|
|
const handleEnded = () => {
|
|
setAudioStatus((prev) => (prev === 'error' ? prev : 'stopped'));
|
|
setAudioDetail((prev) => prev || 'ended');
|
|
};
|
|
const handleError = () => {
|
|
const { error } = audioEl;
|
|
const message = error?.message || 'audio error';
|
|
setAudioStatus('error');
|
|
setAudioDetail(message);
|
|
};
|
|
|
|
audioEl.addEventListener('play', handlePlay);
|
|
audioEl.addEventListener('pause', handlePause);
|
|
audioEl.addEventListener('ended', handleEnded);
|
|
audioEl.addEventListener('error', handleError);
|
|
|
|
return () => {
|
|
audioEl.removeEventListener('play', handlePlay);
|
|
audioEl.removeEventListener('pause', handlePause);
|
|
audioEl.removeEventListener('ended', handleEnded);
|
|
audioEl.removeEventListener('error', handleError);
|
|
};
|
|
}, [audioSessionInfo?.url]);
|
|
|
|
const snapshotStatus = snapshotFeed?.error
|
|
? `Error: ${snapshotFeed.error}`
|
|
: snapshotFeed?.objectUrl
|
|
? 'snapshot'
|
|
: snapshotFeed?.status || 'waiting';
|
|
const renderedStatus = usingSnapshot
|
|
? snapshotStatus
|
|
: !sessionInfo?.url
|
|
? 'waiting'
|
|
: status === 'error'
|
|
? `Error: ${detail || 'unknown'}`
|
|
: detail
|
|
? `${status} (${detail})`
|
|
: status;
|
|
const renderedAudioStatus = audioSessionInfo?.error
|
|
? `Error: ${audioSessionInfo.error}`
|
|
: !audioSessionInfo?.url
|
|
? null
|
|
: audioStatus === 'error'
|
|
? `Error: ${audioDetail || 'unknown'}`
|
|
: audioDetail
|
|
? `${audioStatus} (${audioDetail})`
|
|
: audioStatus;
|
|
const showVerticalBattery = hudVariant === 'spectator';
|
|
|
|
return (
|
|
<div className={`flex flex-col gap-0.5 ${fitParent ? 'h-full' : ''}`}>
|
|
<div
|
|
className={`relative w-full overflow-hidden bg-black ${fitParent ? 'h-full flex-1' : 'aspect-[4/3]'}`}
|
|
>
|
|
{usingSnapshot ? (
|
|
snapshotFeed?.objectUrl ? (
|
|
<img
|
|
src={snapshotFeed.objectUrl}
|
|
alt={label}
|
|
className="h-full w-full object-contain"
|
|
draggable={false}
|
|
/>
|
|
) : (
|
|
<div className="flex h-full w-full items-center justify-center text-sm text-slate-300">
|
|
Waiting for frame…
|
|
</div>
|
|
)
|
|
) : (
|
|
<video
|
|
ref={videoRef}
|
|
muted={forceMute || muted}
|
|
playsInline
|
|
autoPlay
|
|
controls={false}
|
|
className="h-full w-full object-contain"
|
|
/>
|
|
)}
|
|
<audio ref={audioRef} autoPlay hidden />
|
|
{showTurnCue ? (
|
|
<TurnCueOverlay
|
|
mobileHud={mobileHud}
|
|
turnSeconds={turnSeconds}
|
|
isActiveDriver={isActiveDriver}
|
|
idleSkipSeconds={idleSkipSeconds}
|
|
/>
|
|
) : null}
|
|
<HudOverlay
|
|
frame={telemetryFrame}
|
|
sensors={sensors}
|
|
label={label}
|
|
status={renderedStatus}
|
|
audioStatus={renderedAudioStatus}
|
|
desktopLayout={desktopLayout}
|
|
layoutFormat={layoutFormat}
|
|
variant={hudVariant}
|
|
driverLabel={driverLabel}
|
|
battery={batteryVisual}
|
|
showTopDown={showHudMap}
|
|
mobileHud={mobileHud}
|
|
mapPosition={hudMapPosition}
|
|
turnTimerText={turnTimerText}
|
|
labelScale={hudLabelScale}
|
|
/>
|
|
<HudChatInput compact={mobileHud} />
|
|
<OvercurrentOverlay motors={overcurrentMotors} compact={mobileHud} />
|
|
<LowBatteryOverlay charge={batteryCharge} config={batteryConfig} compact={mobileHud} />
|
|
{showVerticalBattery && batteryVisual.available ? (
|
|
<BatteryBarVertical visual={batteryVisual} />
|
|
) : null}
|
|
{qualityNotice ? (
|
|
<div className="pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2">
|
|
<div
|
|
className={`mx-auto w-fit rounded border border-amber-300/80 bg-black/75 text-amber-200 ${
|
|
mobileHud ? 'px-2 py-1 text-[0.6rem]' : 'px-3 py-1.5 text-sm'
|
|
}`}
|
|
>
|
|
<div className="text-center">{qualityNotice}</div>
|
|
<div className="pointer-events-auto mt-1">
|
|
<DiscordInviteButton text={'Join Discord server while you wait!'} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
{!showVerticalBattery && (
|
|
<div className="space-y-0.25">
|
|
<LightBumpBars sensors={sensors} />
|
|
<BatteryBar visual={batteryVisual} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BatteryBar({ visual }) {
|
|
if (!visual?.available) {
|
|
return (
|
|
<div className="panel-section space-y-0.5 text-sm">
|
|
<p className="text-xs text-slate-500">Battery telemetry unavailable</p>
|
|
</div>
|
|
);
|
|
}
|
|
const percentText = `${visual.percentDisplay}%`;
|
|
const barClass = visual.barClass;
|
|
return (
|
|
<div className="panel-section space-y-0.5 text-sm">
|
|
<div className="relative h-4 w-full bg-zinc-900 flex">
|
|
<div className={`h-full transition-[width] ${barClass}`} style={{ width: `${visual.percentDisplay}%` }}>
|
|
<span className="inset-0 flex items-center justify-center text-xs font-semibold text-black/80">
|
|
Battery {percentText}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BatteryBarVertical({ visual }) {
|
|
if (!visual?.available) return null;
|
|
const percentText = `${visual.percentDisplay}%`;
|
|
return (
|
|
<div className="pointer-events-none absolute right-1 top-1/2 flex h-[70%] -translate-y-1/2 flex-col items-center justify-end rounded bg-black/60 px-0.5 pb-1 pt-1">
|
|
<div className="flex h-full w-4 items-end overflow-hidden rounded bg-zinc-900">
|
|
<div
|
|
className={`${visual.barClass} w-full transition-[height]`}
|
|
style={{ height: `${visual.percentDisplay}%` }}
|
|
/>
|
|
</div>
|
|
<span className="mt-0.5 text-[0.65rem] font-semibold text-slate-100">{percentText}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function LightBumpBars({ sensors }) {
|
|
const values = [
|
|
sensors?.lightBumpLeftSignal,
|
|
sensors?.lightBumpFrontLeftSignal,
|
|
sensors?.lightBumpCenterLeftSignal,
|
|
sensors?.lightBumpCenterRightSignal,
|
|
sensors?.lightBumpFrontRightSignal,
|
|
sensors?.lightBumpRightSignal,
|
|
];
|
|
const max = values.filter((v) => v != null).reduce((acc, v) => Math.max(acc, v), 1200);
|
|
const eased = (v) => Math.pow(Math.max(0, Math.min(1, (v ?? 0) / max)), 0.35);
|
|
const hueFor = (v) => {
|
|
if (v == null || v <= 0) return 'hsl(200 60% 18%)';
|
|
const h = (200 + eased(v) * 360) % 360;
|
|
return `hsl(${h} 100% 60%)`;
|
|
};
|
|
const segments = 6;
|
|
const gap = 2;
|
|
const barHeight = 12;
|
|
|
|
return (
|
|
<div className="flex w-full items-center justify-center gap-1">
|
|
{values.map((v, idx) => {
|
|
const t = eased(v);
|
|
const dir = idx < segments / 2 ? -1 : 1; // left bars fill left, right bars fill right
|
|
const fill = `${t * 100}%`;
|
|
const color = hueFor(v);
|
|
return (
|
|
<div key={idx} className="relative flex-1 min-w-[0]" style={{ height: `${barHeight}px` }}>
|
|
<div className="h-full w-full overflow-hidden bg-slate-800" style={{ borderRadius: 0 }}>
|
|
<div
|
|
className="h-full"
|
|
style={{
|
|
width: fill,
|
|
background: color,
|
|
float: dir === -1 ? 'right' : 'left',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HudOverlay({
|
|
frame,
|
|
sensors,
|
|
label,
|
|
status,
|
|
audioStatus,
|
|
desktopLayout = true,
|
|
layoutFormat = 'desktop',
|
|
variant = 'default',
|
|
driverLabel = null,
|
|
battery,
|
|
showTopDown = false,
|
|
mobileHud = false,
|
|
mapPosition = 'top-right',
|
|
turnTimerText = null,
|
|
labelScale = 1,
|
|
}) {
|
|
const bumps = sensors?.bumpsAndWheelDrops || {};
|
|
const [now, setNow] = useState(() => Date.now());
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => setNow(Date.now()), 150);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const pulse = frame?.receivedAt ? now - frame.receivedAt < 200 : false;
|
|
const isMobile = mobileHud;
|
|
const portraitMobile = layoutFormat === 'mobile-portrait';
|
|
const statusTextClass = isMobile ? 'text-[0.45rem]' : 'text-[0.65rem]';
|
|
const statusPadClass = isMobile ? 'px-0.25 py-0.25' : 'px-1 py-0.5';
|
|
const labelPadClass = isMobile ? 'px-0.25 py-0.25' : 'px-0.5 py-0.5';
|
|
const labelTextClass = isMobile ? 'text-[0.55rem]' : 'text-[0.8rem]';
|
|
const statusPosClass = isMobile ? 'left-0.5 top-0.5' : 'left-1 top-1';
|
|
const timerTextClass = isMobile ? 'text-[0.5rem]' : 'text-[0.7rem]';
|
|
const timerPadClass = isMobile ? 'px-0.5 py-0.25' : 'px-1 py-0.5';
|
|
const telemetryPosClass = isMobile ? 'left-0.5 top-1/2' : 'left-1 top-1/2';
|
|
const labelPosClass = isMobile ? 'bottom-0.5' : 'bottom-0.5';
|
|
const labelWrapperStyle = {
|
|
transform: `translateX(-50%) scale(${labelScale})`,
|
|
transformOrigin: 'center bottom',
|
|
};
|
|
const mapSize = '240px';
|
|
const mapScale = portraitMobile ? 0.36 : isMobile ? 0.45 : 0.7;
|
|
const mapOpacity = isMobile ? 0.85 : 0.7;
|
|
const mapStyle = {
|
|
width: mapSize,
|
|
height: mapSize,
|
|
opacity: mapOpacity,
|
|
transform: `scale(${mapScale})`,
|
|
transformOrigin: mapPosition === 'bottom-left' ? 'bottom left' : 'top right',
|
|
...(mapPosition === 'bottom-left'
|
|
? { left: '0.25rem', bottom: '0.25rem' }
|
|
: { right: '0.25rem', top: '0.25rem' }),
|
|
};
|
|
|
|
if (variant === 'spectator') {
|
|
const telemetryEntries = [
|
|
['Voltage', sensors?.voltageMv != null ? `${(sensors.voltageMv / 1000).toFixed(2)} V` : '--'],
|
|
['Current', sensors?.currentMa != null ? `${sensors.currentMa} mA` : '--'],
|
|
['Charge', sensors?.batteryChargeMah != null ? `${sensors.batteryChargeMah}` : '--'],
|
|
['OI', sensors?.oiMode?.label || '--'],
|
|
];
|
|
return (
|
|
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
|
<div className={`absolute ${statusPosClass} font-medium text-slate-100 ${statusTextClass}`}>
|
|
<div className="flex flex-col gap-[1px] leading-none">
|
|
<span>Status: {status}</span>
|
|
{audioStatus ? <span>Audio: {audioStatus}</span> : null}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`absolute ${telemetryPosClass} flex -translate-y-1/2 flex-col gap-0.35 bg-black/70 text-slate-100 ${statusTextClass} ${statusPadClass}`}
|
|
>
|
|
<div className="space-y-0.1 leading-tight">
|
|
<span className={`${isMobile ? 'text-[0.45rem]' : 'text-[0.6rem]'} uppercase tracking-wide text-slate-400`}>
|
|
Telemetry
|
|
</span>
|
|
{telemetryEntries.map(([labelText, value]) => (
|
|
<span key={labelText} className="flex items-center justify-between gap-0.5">
|
|
<span className="text-slate-400">{labelText}</span>
|
|
<span className="font-semibold text-white">{value}</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
{showTopDown ? (
|
|
<div className="flex items-center justify-center pt-0.25">
|
|
<div
|
|
className="pointer-events-none rounded"
|
|
style={{
|
|
width: isMobile ? '110px' : '130px',
|
|
height: isMobile ? '110px' : '130px',
|
|
opacity: isMobile ? 0.85 : 0.9,
|
|
transform: isMobile ? 'scale(0.7)' : 'scale(0.85)',
|
|
transformOrigin: 'top left',
|
|
}}
|
|
>
|
|
<TopDownMap sensors={sensors} size={isMobile ? 160 : 160} overlay />
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className={`absolute ${labelPosClass} left-1/2`} style={labelWrapperStyle}>
|
|
<div
|
|
className={`flex items-center gap-1 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}
|
|
>
|
|
<span className="font-semibold text-white">{label || 'Unnamed Rover'}</span>
|
|
{driverLabel ? <span className="text-slate-300">• {driverLabel}</span> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
|
<div className={`absolute ${statusPosClass} font-medium text-slate-100 ${statusTextClass}`}>
|
|
<div className="flex flex-col gap-[1px] leading-none">
|
|
<span>Status: {status}</span>
|
|
{audioStatus ? <span>Audio: {audioStatus}</span> : null}
|
|
</div>
|
|
</div>
|
|
{turnTimerText ? (
|
|
<div
|
|
className={`absolute left-1/2 top-0.5 -translate-x-1/2 rounded bg-black/70 text-slate-100 ${timerPadClass} ${timerTextClass}`}
|
|
>
|
|
{turnTimerText}
|
|
</div>
|
|
) : null}
|
|
<div className={`absolute ${labelPosClass} left-1/2`} style={labelWrapperStyle}>
|
|
<div className={`flex gap-0.5 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}>
|
|
<span>Rover: "{label || 'Unnamed Rover'}"</span>
|
|
{/* <span>{pulse ? 'Sensors active' : 'No recent sensors'}</span> */}
|
|
</div>
|
|
</div>
|
|
|
|
{showTopDown && variant !== 'spectator' ? (
|
|
<div
|
|
className="pointer-events-none absolute rounded"
|
|
style={{
|
|
...mapStyle,
|
|
// padding: '0.1rem',
|
|
// background: 'rgba(0,0,0,0.6)',
|
|
}}
|
|
>
|
|
<TopDownMap sensors={sensors} size={240} overlay />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TurnCueOverlay({
|
|
mobileHud = false,
|
|
turnSeconds = null,
|
|
isActiveDriver = false,
|
|
idleSkipSeconds = null,
|
|
}) {
|
|
const titleClass = mobileHud ? 'text-3xl' : 'text-5xl';
|
|
const subClass = mobileHud ? 'text-xs' : 'text-sm';
|
|
const timerClass = mobileHud ? 'text-[0.55rem]' : 'text-[0.75rem]';
|
|
const padClass = mobileHud ? 'px-4 py-3' : 'px-6 py-4';
|
|
const showCountdown = isActiveDriver && typeof idleSkipSeconds === 'number';
|
|
return (
|
|
<div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-black/55">
|
|
<div className={`flex flex-col items-center gap-1 rounded border border-amber-300/80 bg-black/70 ${padClass}`}>
|
|
<div className={`font-semibold text-amber-200 ${titleClass}`}>IT IS YOUR TURN!</div>
|
|
<div className={`text-amber-200/80 ${subClass}`}>Start driving!</div>
|
|
{showCountdown ? (
|
|
<div className={`text-red-100/90 ${timerClass}`}>
|
|
Idle skip in {idleSkipSeconds}s
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const OVERCURRENT_LABELS = {
|
|
leftWheel: 'Left wheel',
|
|
rightWheel: 'Right wheel',
|
|
mainBrush: 'Main brush',
|
|
sideBrush: 'Side brush',
|
|
};
|
|
|
|
function OvercurrentOverlay({ motors, compact = false }) {
|
|
if (!motors?.length) return null;
|
|
const labels = motors.map((name) => OVERCURRENT_LABELS[name] || name);
|
|
const containerClass = compact ? 'p-2' : 'p-4';
|
|
const textClass = compact ? 'text-lg' : 'text-4xl';
|
|
const subTextClass = compact ? 'text-xs' : 'text-xl';
|
|
return (
|
|
<div
|
|
className={`pointer-events-none absolute flex items-center justify-center bg-red-900/60 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 ${containerClass}`}
|
|
>
|
|
<div className={`text-center font-semibold text-white animate-pulse ${textClass}`}>
|
|
<div>OVERCURRENT</div>
|
|
<div className={`mt-0.5 font-medium text-white ${subTextClass}`}>{labels.join(', ')}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// low battery overlay, change text based on warn / urgent. use percentage calculated same as BatteryBar. change text based on warn or urgent.
|
|
function LowBatteryOverlay({ charge, config, compact = false }) {
|
|
if (charge == null || config == null) return null;
|
|
const full = config.Full;
|
|
const warn = config.Warn;
|
|
const urgent = config.Urgent ?? null;
|
|
const span = full - warn;
|
|
if (span <= 0) return null;
|
|
const normalized = (charge - warn) / span;
|
|
const percent = Math.min(1, Math.max(0, normalized));
|
|
const depleted = normalized <= 0;
|
|
const warnTriggered = urgent != null && charge <= urgent;
|
|
if (!warnTriggered && !depleted) return null;
|
|
|
|
const message = depleted ? 'Battery low! please dock and charge the rover soon.' : 'BATTERY VERY LOW, PLEASE DOCK THE ROVER AND CHARGE IMMEDIATELY!!';
|
|
|
|
const containerClass = compact ? 'p-2 top-6' : 'p-4 top-10';
|
|
const textClass = compact ? 'text-sm' : 'text-2xl';
|
|
|
|
return (
|
|
<div
|
|
className={`pointer-events-none absolute flex items-center justify-center bg-amber-900/60 left-1/2 -translate-x-1/2 ${containerClass}`}
|
|
>
|
|
<div className={`text-center font-semibold text-white animate-pulse ${textClass}`}>
|
|
<div>{message}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HudChatInput({ compact = false }) {
|
|
const { session } = useSession();
|
|
const { sendMessage, onInputFocus, onInputBlur, blurChat, registerInputRef } = useChat();
|
|
const { value: ttsSettings } = useSettingsNamespace('tts', { engine: 'flite', voice: 'rms', pitch: 50 });
|
|
const [draft, setDraft] = useState('');
|
|
const [sending, setSending] = useState(false);
|
|
const canChat = session?.role !== 'spectator';
|
|
const hideHudChat = session?.role === 'spectator';
|
|
const currentRoverId = session?.assignment?.roverId || null;
|
|
const rover = useMemo(
|
|
() => session?.roster?.find((entry) => String(entry.id) === String(currentRoverId)) || null,
|
|
[currentRoverId, session?.roster],
|
|
);
|
|
const ttsSupported = Boolean(rover?.audio?.ttsEnabled);
|
|
const ttsPayload = useMemo(() => {
|
|
if (!ttsSupported) return null;
|
|
const engine = ttsSettings?.engine === 'espeak' ? 'espeak' : 'flite';
|
|
if (engine === 'espeak') {
|
|
let pitch = Number.isFinite(ttsSettings?.pitch) ? Math.round(ttsSettings.pitch) : undefined;
|
|
if (typeof pitch === 'number') {
|
|
pitch = Math.max(0, Math.min(99, pitch));
|
|
}
|
|
return { speak: true, engine, pitch };
|
|
}
|
|
const voice = typeof ttsSettings?.voice === 'string' ? ttsSettings.voice : undefined;
|
|
return { speak: true, engine, voice };
|
|
}, [ttsSettings?.engine, ttsSettings?.pitch, ttsSettings?.voice, ttsSupported]);
|
|
const containerClass = compact
|
|
? 'pointer-events-auto absolute bottom-0.5 right-0.5 flex w-[9rem] max-w-[70vw] items-center gap-0.25 rounded bg-black/70 px-0.4 py-0.2'
|
|
: 'pointer-events-auto absolute bottom-1 right-1 flex w-[12rem] max-w-[70vw] items-center gap-0.5 rounded bg-black/70 px-0.5 py-0.25';
|
|
const inputClass = compact
|
|
? 'min-w-0 flex-1 bg-transparent text-[0.55rem] text-slate-100 placeholder:text-slate-400 focus:outline-none'
|
|
: 'min-w-0 flex-1 bg-transparent text-[0.7rem] text-slate-100 placeholder:text-slate-400 focus:outline-none';
|
|
const buttonClass = compact
|
|
? 'rounded bg-cyan-500/80 px-0.35 py-0.2 text-[0.55rem] font-semibold text-black disabled:opacity-50'
|
|
: 'rounded bg-cyan-500/80 px-0.5 py-0.25 text-[0.7rem] font-semibold text-black disabled:opacity-50';
|
|
|
|
async function handleSend(event) {
|
|
event.preventDefault();
|
|
if (!canChat) return;
|
|
const clean = draft.trim();
|
|
if (!clean) return;
|
|
setSending(true);
|
|
try {
|
|
await sendMessage(clean, ttsPayload);
|
|
setDraft('');
|
|
blurChat();
|
|
} catch (err) {
|
|
alert(err.message);
|
|
} finally {
|
|
setSending(false);
|
|
}
|
|
}
|
|
|
|
if (hideHudChat) return null;
|
|
|
|
return (
|
|
<form onSubmit={handleSend} className={containerClass}>
|
|
<input
|
|
className={inputClass}
|
|
value={draft}
|
|
onChange={(event) => setDraft(event.target.value)}
|
|
onFocus={onInputFocus}
|
|
onBlur={onInputBlur}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter' && !draft.trim()) {
|
|
event.preventDefault();
|
|
blurChat();
|
|
}
|
|
}}
|
|
ref={(el) => registerInputRef(el, { target: 'hud' })}
|
|
placeholder={canChat ? 'Chat (TTS)' : 'Spectator'}
|
|
disabled={!canChat}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={!canChat || sending}
|
|
className={buttonClass}
|
|
>
|
|
Speak
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|