mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 09:31:20 -04:00
1085 lines
38 KiB
React
1085 lines
38 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 { AUDIO_SETTINGS_DEFAULTS } from '../settings/namespaces.js';
|
|
import SocialButton from './SocialButton.jsx';
|
|
import BatteryBar from './BatteryBar.jsx';
|
|
import { buildBatteryVisual } from '../lib/battery.js';
|
|
|
|
const RESTART_DELAY_MS = 2000;
|
|
const UNMUTE_RETRY_MS = 3000;
|
|
const AUDIO_RETRY_MS = 3000;
|
|
const BRUSH_CURRENT_THRESHOLD_MA = 40;
|
|
const DUCK_RELEASE_FADE_MS = 1000;
|
|
|
|
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-center',
|
|
hudLabelScale = 1,
|
|
fitParent = false,
|
|
overcurrentLimiter = null,
|
|
showTurnCue = false,
|
|
turnTimerText = null,
|
|
turnSeconds = null,
|
|
isActiveDriver = false,
|
|
idleSkipSeconds = null,
|
|
}) {
|
|
const { session } = useSession();
|
|
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 volumeFadeFrameRef = useRef(null);
|
|
const appliedVolumeRef = 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 hasDedicatedAudio = Boolean(audioSessionInfo?.url);
|
|
const usingSnapshot = videoMode === 'snapshot';
|
|
const sensors = telemetryFrame?.sensors;
|
|
const { value: audioSettings } = useSettingsNamespace('audio', AUDIO_SETTINGS_DEFAULTS);
|
|
const masterVolume = Number.isFinite(audioSettings?.masterVolume)
|
|
? audioSettings.masterVolume
|
|
: AUDIO_SETTINGS_DEFAULTS.masterVolume;
|
|
const roverVolume = Number.isFinite(audioSettings?.roverVolume)
|
|
? audioSettings.roverVolume
|
|
: AUDIO_SETTINGS_DEFAULTS.roverVolume;
|
|
const mainBrushDuckEnabled =
|
|
typeof audioSettings?.mainBrushDuckEnabled === 'boolean'
|
|
? audioSettings.mainBrushDuckEnabled
|
|
: typeof audioSettings?.autoLevelEnabled === 'boolean'
|
|
? audioSettings.autoLevelEnabled
|
|
: AUDIO_SETTINGS_DEFAULTS.mainBrushDuckEnabled;
|
|
const mainBrushDuckAmount = Number.isFinite(audioSettings?.mainBrushDuckAmount)
|
|
? Math.max(0, Math.min(1, audioSettings.mainBrushDuckAmount))
|
|
: AUDIO_SETTINGS_DEFAULTS.mainBrushDuckAmount;
|
|
const baseRoverGain = Math.max(0, Math.min(1, masterVolume * roverVolume));
|
|
const batteryCharge = sensors?.batteryChargeMah ?? null;
|
|
const desktopLayout = layoutFormat === 'desktop';
|
|
const mobileHud = !desktopLayout;
|
|
const effectiveHudMapPosition = mobileHud ? 'top-right' : hudMapPosition;
|
|
const [showHudMapDesktop, setShowHudMapDesktop] = useHudMapSetting();
|
|
const showHudMap = hudForceMap ? true : mobileHud ? true : showHudMapDesktop;
|
|
const batteryVisual = buildBatteryVisual({ charge: batteryCharge, config: 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 limiterCaps = overcurrentLimiter?.caps || null;
|
|
const limiterGroups = overcurrentLimiter?.overcurrent?.groups || null;
|
|
const debugAudio =
|
|
typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('debugAudio');
|
|
const debugHud =
|
|
typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('debugHud');
|
|
const limiterFill = useMemo(() => {
|
|
if (!limiterCaps) return null;
|
|
const driveCap = Number.isFinite(limiterCaps?.drive?.cap) ? limiterCaps.drive.cap : 1;
|
|
const auxCap = Number.isFinite(limiterCaps?.aux?.cap) ? limiterCaps.aux.cap : 1;
|
|
return Math.max(0, Math.min(1, 1 - Math.min(driveCap, auxCap)));
|
|
}, [limiterCaps]);
|
|
const limiterActive = Boolean(overcurrentLimiter?.isActive);
|
|
const overlayMotors = overcurrentMotors.length ? overcurrentMotors : limiterActive ? ['limiter'] : [];
|
|
const overlayFill = limiterFill ?? (overcurrentMotors.length ? 1 : 0);
|
|
const overlayVisible = Boolean(overlayMotors.length);
|
|
const mainBrushActive = Boolean(
|
|
(Number(sensors?.mainBrushCurrentMa) || 0) > BRUSH_CURRENT_THRESHOLD_MA ||
|
|
sensors?.wheelOvercurrents?.mainBrush,
|
|
);
|
|
const duckGain = mainBrushDuckEnabled && mainBrushActive ? 1 - mainBrushDuckAmount : 1;
|
|
const effectiveRoverGain = Math.max(0, Math.min(1, baseRoverGain * duckGain));
|
|
const levelIndicator =
|
|
mainBrushDuckEnabled && mainBrushActive && mainBrushDuckAmount > 0
|
|
? `Volume decreased ${Math.round(mainBrushDuckAmount * 1000) / 10}%`
|
|
: null;
|
|
const audioDebugStateRef = useRef({
|
|
hasDedicatedAudio: false,
|
|
audioUrl: null,
|
|
mainBrushDuckEnabled: false,
|
|
mainBrushDuckAmount: 0,
|
|
mainBrushActive: false,
|
|
baseRoverGain: 0,
|
|
effectiveRoverGain: 0,
|
|
});
|
|
useEffect(() => {
|
|
audioDebugStateRef.current = {
|
|
hasDedicatedAudio,
|
|
audioUrl: audioSessionInfo?.url || null,
|
|
mainBrushDuckEnabled,
|
|
mainBrushDuckAmount,
|
|
mainBrushActive,
|
|
baseRoverGain,
|
|
effectiveRoverGain,
|
|
};
|
|
}, [
|
|
hasDedicatedAudio,
|
|
audioSessionInfo?.url,
|
|
mainBrushDuckEnabled,
|
|
mainBrushDuckAmount,
|
|
mainBrushActive,
|
|
baseRoverGain,
|
|
effectiveRoverGain,
|
|
]);
|
|
const logAudio = useCallback(
|
|
(event, meta = {}) => {
|
|
if (!debugAudio) return;
|
|
const audioEl = audioRef.current;
|
|
const state = audioDebugStateRef.current;
|
|
const payload = {
|
|
event,
|
|
ts: Date.now(),
|
|
roverLabel: label || null,
|
|
hasDedicatedAudio: state.hasDedicatedAudio,
|
|
audioUrl: state.audioUrl,
|
|
mainBrushDuckEnabled: state.mainBrushDuckEnabled,
|
|
mainBrushDuckAmount: state.mainBrushDuckAmount,
|
|
mainBrushActive: state.mainBrushActive,
|
|
baseRoverGain: state.baseRoverGain,
|
|
effectiveRoverGain: state.effectiveRoverGain,
|
|
element: audioEl
|
|
? {
|
|
muted: audioEl.muted,
|
|
volume: audioEl.volume,
|
|
paused: audioEl.paused,
|
|
ended: audioEl.ended,
|
|
readyState: audioEl.readyState,
|
|
networkState: audioEl.networkState,
|
|
}
|
|
: null,
|
|
...meta,
|
|
};
|
|
try {
|
|
console.log(`[AudioDebug] ${event} ${JSON.stringify(payload)}`);
|
|
} catch {
|
|
console.log('[AudioDebug]', event, payload);
|
|
}
|
|
},
|
|
[debugAudio, label],
|
|
);
|
|
const discordUrl =
|
|
session?.socials?.find((entry) => {
|
|
const key = String(entry?.id || entry?.label || '').toLowerCase();
|
|
return key === 'discord';
|
|
})?.url ||
|
|
session?.discord?.invite ||
|
|
null;
|
|
|
|
useEffect(() => {
|
|
if (!debugHud) return;
|
|
console.log('[OvercurrentHUD]', {
|
|
overlayVisible,
|
|
overlayMotors,
|
|
overlayFill,
|
|
limiterActive,
|
|
limiterCaps,
|
|
limiterGroups,
|
|
wheelOvercurrents,
|
|
});
|
|
}, [debugHud, overlayFill, overlayMotors, overlayVisible, limiterActive, limiterCaps, limiterGroups, wheelOvercurrents]);
|
|
|
|
useEffect(() => {
|
|
logAudio('settings/update');
|
|
}, [logAudio]);
|
|
|
|
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 || hasDedicatedAudio) 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, hasDedicatedAudio],
|
|
);
|
|
|
|
useEffect(
|
|
() => () => {
|
|
clearTimeout(restartTimer.current);
|
|
clearTimeout(audioRestartTimer.current);
|
|
clearTimeout(unmuteTimer.current);
|
|
clearInterval(audioPlayInterval.current);
|
|
if (volumeFadeFrameRef.current) {
|
|
cancelAnimationFrame(volumeFadeFrameRef.current);
|
|
volumeFadeFrameRef.current = null;
|
|
}
|
|
},
|
|
[],
|
|
);
|
|
|
|
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;
|
|
logAudio('video/status', { nextStatus, info: info || null });
|
|
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,
|
|
receiveAudio: !hasDedicatedAudio,
|
|
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, hasDedicatedAudio, logAudio]);
|
|
|
|
useEffect(() => {
|
|
if (status === 'stopped' && sessionInfo?.url) {
|
|
scheduleRestart();
|
|
}
|
|
}, [status, sessionInfo?.url, scheduleRestart]);
|
|
|
|
useEffect(() => {
|
|
const audioEl = audioRef.current;
|
|
if (!audioEl || !audioSessionInfo?.url) {
|
|
logAudio('route/no-audio-url');
|
|
appliedVolumeRef.current = null;
|
|
return;
|
|
}
|
|
const targetVolume = Math.max(0, Math.min(1, effectiveRoverGain));
|
|
const currentVolume =
|
|
appliedVolumeRef.current == null
|
|
? Math.max(0, Math.min(1, audioEl.volume))
|
|
: appliedVolumeRef.current;
|
|
if (volumeFadeFrameRef.current) {
|
|
cancelAnimationFrame(volumeFadeFrameRef.current);
|
|
volumeFadeFrameRef.current = null;
|
|
}
|
|
if (targetVolume > currentVolume) {
|
|
const startedAt = performance.now();
|
|
const from = currentVolume;
|
|
const delta = targetVolume - from;
|
|
const tick = (ts) => {
|
|
const progress = Math.min(1, (ts - startedAt) / DUCK_RELEASE_FADE_MS);
|
|
const next = from + delta * progress;
|
|
audioEl.volume = next;
|
|
appliedVolumeRef.current = next;
|
|
if (progress < 1) {
|
|
volumeFadeFrameRef.current = requestAnimationFrame(tick);
|
|
} else {
|
|
volumeFadeFrameRef.current = null;
|
|
}
|
|
};
|
|
volumeFadeFrameRef.current = requestAnimationFrame(tick);
|
|
} else {
|
|
audioEl.volume = targetVolume;
|
|
appliedVolumeRef.current = targetVolume;
|
|
}
|
|
logAudio('route/direct', {
|
|
elementVolume: targetVolume,
|
|
duckEnabled: mainBrushDuckEnabled,
|
|
mainBrushActive,
|
|
duckAmount: mainBrushDuckAmount,
|
|
});
|
|
}, [
|
|
audioSessionInfo?.url,
|
|
effectiveRoverGain,
|
|
mainBrushDuckEnabled,
|
|
mainBrushActive,
|
|
mainBrushDuckAmount,
|
|
logAudio,
|
|
]);
|
|
|
|
// 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;
|
|
logAudio('audio/status', { nextStatus, info: info || null });
|
|
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 (['error', 'failed'].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,
|
|
logAudio,
|
|
]);
|
|
|
|
// 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 = async () => {
|
|
const target = audioRef.current;
|
|
if (!target) return;
|
|
target.muted = false;
|
|
if (!target.paused && !target.ended) return;
|
|
logAudio('retry/play-attempt');
|
|
target
|
|
.play()
|
|
.then(() => {
|
|
logAudio('retry/play-ok');
|
|
setAudioStatus((prev) => (prev === 'connected' ? 'playing' : prev));
|
|
setAudioDetail((prev) => (prev === 'paused' ? null : prev));
|
|
})
|
|
.catch((err) => {
|
|
logAudio('retry/play-fail', { error: err?.message });
|
|
setAudioDetail((prev) => prev || err?.message || 'autoplay blocked');
|
|
});
|
|
};
|
|
|
|
attemptPlay();
|
|
audioPlayInterval.current = setInterval(attemptPlay, AUDIO_RETRY_MS);
|
|
|
|
return () => clearInterval(audioPlayInterval.current);
|
|
}, [
|
|
audioSessionInfo?.url,
|
|
audioStatus,
|
|
logAudio,
|
|
]);
|
|
|
|
// Reflect audio element events back into status/detail so the HUD stays accurate.
|
|
useEffect(() => {
|
|
const audioEl = audioRef.current;
|
|
if (!audioEl) return undefined;
|
|
|
|
const handlePlay = () => {
|
|
logAudio('element/play');
|
|
setAudioStatus((prev) => (prev === 'error' ? prev : 'playing'));
|
|
setAudioDetail(null);
|
|
};
|
|
const handlePause = () => {
|
|
logAudio('element/pause');
|
|
setAudioStatus((prev) => {
|
|
if (['error', 'failed', 'disconnected', 'closed', 'stopped'].includes(prev)) return prev;
|
|
return 'paused';
|
|
});
|
|
setAudioDetail((prev) => prev || 'paused');
|
|
};
|
|
const handleEnded = () => {
|
|
logAudio('element/ended');
|
|
setAudioStatus((prev) => (prev === 'error' ? prev : 'stopped'));
|
|
setAudioDetail((prev) => prev || 'ended');
|
|
};
|
|
const handleError = () => {
|
|
const { error } = audioEl;
|
|
const message = error?.message || 'audio error';
|
|
logAudio('element/error', { error: message });
|
|
setAudioStatus('error');
|
|
setAudioDetail(message);
|
|
};
|
|
const handleWaiting = () => logAudio('element/waiting');
|
|
const handleCanPlay = () => logAudio('element/canplay');
|
|
const handleStalled = () => logAudio('element/stalled');
|
|
|
|
audioEl.addEventListener('play', handlePlay);
|
|
audioEl.addEventListener('pause', handlePause);
|
|
audioEl.addEventListener('ended', handleEnded);
|
|
audioEl.addEventListener('error', handleError);
|
|
audioEl.addEventListener('waiting', handleWaiting);
|
|
audioEl.addEventListener('canplay', handleCanPlay);
|
|
audioEl.addEventListener('stalled', handleStalled);
|
|
|
|
return () => {
|
|
audioEl.removeEventListener('play', handlePlay);
|
|
audioEl.removeEventListener('pause', handlePause);
|
|
audioEl.removeEventListener('ended', handleEnded);
|
|
audioEl.removeEventListener('error', handleError);
|
|
audioEl.removeEventListener('waiting', handleWaiting);
|
|
audioEl.removeEventListener('canplay', handleCanPlay);
|
|
audioEl.removeEventListener('stalled', handleStalled);
|
|
};
|
|
}, [audioSessionInfo?.url, logAudio]);
|
|
|
|
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';
|
|
const noHud = hudVariant === 'none';
|
|
|
|
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 || hasDedicatedAudio}
|
|
playsInline
|
|
autoPlay
|
|
controls={false}
|
|
className="h-full w-full object-contain"
|
|
/>
|
|
)}
|
|
<audio ref={audioRef} autoPlay hidden />
|
|
{!noHud && showTurnCue ? (
|
|
<TurnCueOverlay
|
|
mobileHud={mobileHud}
|
|
turnSeconds={turnSeconds}
|
|
isActiveDriver={isActiveDriver}
|
|
idleSkipSeconds={idleSkipSeconds}
|
|
/>
|
|
) : null}
|
|
{!noHud ? (
|
|
<HudOverlay
|
|
frame={telemetryFrame}
|
|
sensors={sensors}
|
|
label={label}
|
|
status={renderedStatus}
|
|
audioStatus={renderedAudioStatus}
|
|
levelStatus={levelIndicator}
|
|
desktopLayout={desktopLayout}
|
|
layoutFormat={layoutFormat}
|
|
variant={hudVariant}
|
|
driverLabel={driverLabel}
|
|
battery={batteryVisual}
|
|
showTopDown={showHudMap}
|
|
mobileHud={mobileHud}
|
|
mapPosition={effectiveHudMapPosition}
|
|
turnTimerText={turnTimerText}
|
|
labelScale={hudLabelScale}
|
|
/>
|
|
) : null}
|
|
{!noHud ? <HudChatInput compact={mobileHud} /> : null}
|
|
{!noHud && debugHud ? (
|
|
<div className="pointer-events-none absolute left-1 top-1 z-40 rounded bg-black/80 px-1 py-0.5 text-[0.6rem] text-lime-200">
|
|
{`OC vis:${overlayVisible ? 1 : 0} motors:${overlayMotors.length} fill:${Math.round(overlayFill * 100)}%`}
|
|
</div>
|
|
) : null}
|
|
{!noHud ? <OvercurrentOverlay motors={overlayMotors} fill={overlayFill} compact={mobileHud} /> : null}
|
|
{!noHud ? <LowBatteryOverlay battery={batteryVisual} compact={mobileHud} /> : null}
|
|
{!noHud && showVerticalBattery && batteryVisual.available ? (
|
|
<div className="pointer-events-none absolute right-1 top-1/2 flex h-[70%] -translate-y-1/2 flex-col items-center justify-center rounded bg-black/60 px-0.5 pb-1 pt-1">
|
|
<BatteryBar
|
|
visual={batteryVisual}
|
|
orientation="vertical"
|
|
variant="inline"
|
|
compact={mobileHud}
|
|
className="h-full w-4"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
{!noHud && 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-0">
|
|
<SocialButton
|
|
id="discord"
|
|
label="Join our Discord server while you wait!"
|
|
url={discordUrl}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
{!noHud && !showVerticalBattery && (
|
|
<div className="space-y-0.5">
|
|
<LightBumpBars sensors={sensors} />
|
|
<div className="panel-section space-y-0.5 text-sm">
|
|
<BatteryBar visual={batteryVisual} compact={mobileHud} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</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-0.5">
|
|
{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,
|
|
levelStatus,
|
|
desktopLayout = true,
|
|
layoutFormat = 'desktop',
|
|
variant = 'default',
|
|
driverLabel = null,
|
|
battery,
|
|
showTopDown = false,
|
|
mobileHud = false,
|
|
mapPosition = 'top-center',
|
|
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.3 : isMobile ? 0.33 : 0.7;
|
|
const mapOpacity = isMobile ? 0.6 : 0.7;
|
|
const mapStyle = {
|
|
width: mapSize,
|
|
height: mapSize,
|
|
opacity: mapOpacity,
|
|
transform: mapPosition === 'top-center' ? `translateX(-50%) scale(${mapScale})` : `scale(${mapScale})`,
|
|
transformOrigin:
|
|
mapPosition === 'bottom-left' ? 'bottom left' : mapPosition === 'top-center' ? 'top center' : 'top right',
|
|
...(mapPosition === 'bottom-left'
|
|
? { left: '0.25rem', bottom: '0.25rem' }
|
|
: mapPosition === 'top-center'
|
|
? { left: '50%', top: '0.25rem' }
|
|
: { right: '0.25rem', top: '0.25rem' }),
|
|
};
|
|
|
|
if (variant === 'none') {
|
|
return null;
|
|
}
|
|
|
|
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 || '--'],
|
|
];
|
|
const docked = Boolean(sensors?.chargingSources?.homeBase);
|
|
const chargingLabel = sensors?.chargingState?.label || '';
|
|
const charging = Boolean(chargingLabel && chargingLabel.toLowerCase() !== 'not charging');
|
|
const oiLabel = sensors?.oiMode?.label || 'Unknown';
|
|
const oiNormalized = oiLabel.toLowerCase();
|
|
const oiTone =
|
|
oiNormalized === 'full'
|
|
? 'bg-emerald-500/80 text-emerald-50'
|
|
: oiNormalized === 'safe'
|
|
? 'bg-amber-400/80 text-amber-950'
|
|
: oiNormalized === 'passive'
|
|
? 'bg-slate-700/80 text-slate-100'
|
|
: 'bg-slate-700/60 text-slate-200';
|
|
const dockTone = docked ? 'bg-emerald-500/80 text-emerald-50' : 'bg-slate-700/70 text-slate-200';
|
|
const chargingTone = charging
|
|
? 'bg-emerald-500/80 text-emerald-50'
|
|
: docked
|
|
? 'bg-amber-400/80 text-amber-950'
|
|
: 'bg-slate-700/70 text-slate-200';
|
|
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-0.5 leading-none">
|
|
<span>Status: {status}</span>
|
|
{audioStatus ? <span>Audio: {audioStatus}</span> : null}
|
|
{levelStatus ? <span className="text-cyan-300">{levelStatus}</span> : null}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`absolute ${telemetryPosClass} flex -translate-y-1/2 flex-col gap-0.5 bg-black/70 text-slate-100 ${statusTextClass} ${statusPadClass}`}
|
|
>
|
|
<div className="space-y-0.5 leading-tight">
|
|
<div className="flex flex-col gap-0.5 text-[0.75rem] font-semibold uppercase tracking-wide">
|
|
<span className={`rounded px-1.5 py-0.5 ${dockTone}`}>{docked ? 'Docked' : 'Undocked'}</span>
|
|
<span className={`rounded px-1.5 py-0.5 ${chargingTone}`}>
|
|
{charging ? 'Charging' : docked ? 'Not charging' : 'Not charging'}
|
|
</span>
|
|
<span className={`rounded px-1.5 py-0.5 ${oiTone}`}>OI: {oiLabel}</span>
|
|
</div>
|
|
{/* <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>
|
|
</div>
|
|
|
|
<div className={`absolute ${labelPosClass} left-1/2`} style={labelWrapperStyle}>
|
|
<div
|
|
className={`flex items-center gap-0.5 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>
|
|
{showTopDown ? (
|
|
<div
|
|
className="pointer-events-none absolute rounded"
|
|
style={{
|
|
...mapStyle,
|
|
}}
|
|
>
|
|
<TopDownMap sensors={sensors} size={240} overlay />
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
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-0.5 leading-none">
|
|
<span>Status: {status}</span>
|
|
{audioStatus ? <span>Audio: {audioStatus}</span> : null}
|
|
{levelStatus ? <span className="text-cyan-300">{levelStatus}</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-0.5 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',
|
|
limiter: 'Overcurrent limit',
|
|
};
|
|
|
|
function OvercurrentOverlay({ motors, fill = 0, compact = false }) {
|
|
if (!motors?.length) return null;
|
|
const safeLabels = motors.map((name) => OVERCURRENT_LABELS[name] || name);
|
|
const containerClass = compact ? 'w-[12rem] h-[3.5rem]' : 'w-[20rem] h-[7rem]';
|
|
const padClass = compact ? 'px-2 py-1' : 'px-4 py-2';
|
|
const textClass = compact ? 'text-lg' : 'text-4xl';
|
|
const subTextClass = compact ? 'text-xs' : 'text-xl';
|
|
const safeFill = Math.max(0, Math.min(1, fill));
|
|
const fillWidth = `${Math.round(safeFill * 100)}%`;
|
|
return (
|
|
<div
|
|
className={`pointer-events-none absolute flex items-center justify-center bg-red-900/50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 ${containerClass}`}
|
|
>
|
|
<div className="relative h-full w-full">
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="h-full bg-red-700/60" style={{ width: fillWidth }} />
|
|
</div>
|
|
<div className={`relative z-10 flex h-full w-full flex-col items-center justify-center text-center font-semibold text-white animate-pulse ${textClass} ${padClass}`}>
|
|
<div>OVERCURRENT</div>
|
|
<div className={`mt-0 font-medium text-white ${subTextClass}`}>{safeLabels.join(', ')}</div>
|
|
</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({ battery, compact = false }) {
|
|
if (!battery?.available) return null;
|
|
if (!battery.warnActive && !battery.urgentActive) return null;
|
|
|
|
const message = battery.urgentActive
|
|
? 'BATTERY VERY LOW, DOCK THE ROVER AND CHARGE IMMEDIATELY!!'
|
|
: 'Battery low! please dock and charge the rover soon.';
|
|
|
|
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, setTypingActive } = 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.5 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();
|
|
setTypingActive(false);
|
|
} 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) => {
|
|
const next = event.target.value;
|
|
setDraft(next);
|
|
setTypingActive(Boolean(next.trim()));
|
|
}}
|
|
onFocus={(event) => {
|
|
onInputFocus(event);
|
|
setTypingActive(Boolean(draft.trim()));
|
|
}}
|
|
onBlur={(event) => {
|
|
onInputBlur(event);
|
|
setTypingActive(false);
|
|
}}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter' && !draft.trim()) {
|
|
event.preventDefault();
|
|
blurChat();
|
|
setTypingActive(false);
|
|
}
|
|
}}
|
|
ref={(el) => registerInputRef(el, { target: 'hud' })}
|
|
placeholder={canChat ? 'Chat (TTS)' : 'Spectator'}
|
|
disabled={!canChat}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={!canChat || sending}
|
|
className={buttonClass}
|
|
>
|
|
Speak
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|