mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 09:31:20 -04:00
657 lines
22 KiB
React
657 lines
22 KiB
React
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { WhepPlayer } from '../../lib/whepPlayer.js';
|
|
import { useTelemetrySelector } from '../../context/TelemetryContext.jsx';
|
|
import {
|
|
mainBrushAudioTelemetryEqual,
|
|
selectMainBrushAudioTelemetry,
|
|
} from '../../context/telemetryViews.js';
|
|
import { useSessionSelector } from '../../context/SessionContext.jsx';
|
|
import { useVideoRequests } from '../../hooks/useVideoRequests.js';
|
|
import { useRoverSnapshots } from '../../hooks/useRoverSnapshots.js';
|
|
import { useSettingsNamespace } from '../../settings/index.js';
|
|
import { AUDIO_SETTINGS_DEFAULTS, VIDEO_SETTINGS_DEFAULTS } from '../../settings/namespaces.js';
|
|
import { trackAnalyticsEventThrottled } from '../../analytics/index.js';
|
|
import {
|
|
RESTART_DELAY_MS,
|
|
UNMUTE_RETRY_MS,
|
|
AUDIO_RETRY_MS,
|
|
BRUSH_CURRENT_THRESHOLD_MA,
|
|
DUCK_RELEASE_FADE_MS,
|
|
} from './constants.js';
|
|
|
|
const VIDEO_FILTER_STYLES = {
|
|
// The empty filter keeps the browser's native video presentation untouched when the user
|
|
// wants normal color or when a rover's camera color is already useful.
|
|
none: '',
|
|
// Grayscale is the most reliable way to remove the pink cast from a no-IR-filter camera
|
|
// because it depends on luminance instead of trying to guess the original scene colors.
|
|
grayscale: 'grayscale(1) contrast(1.08)',
|
|
// Greenscale is intentionally implemented as a CSS tint over grayscale rather than canvas
|
|
// processing. That keeps latency low, works for both <video> and snapshot <img>, and avoids
|
|
// interfering with WebRTC playback.
|
|
greenscale: 'grayscale(1) sepia(1) hue-rotate(70deg) saturate(2.2) brightness(0.95) contrast(1.1)',
|
|
};
|
|
|
|
function normalizeVideoFilter(value) {
|
|
// Persisted settings may outlive code changes, so every media render validates the stored
|
|
// value before using it in a style. Unknown values fall back to full color.
|
|
return Object.prototype.hasOwnProperty.call(VIDEO_FILTER_STYLES, value)
|
|
? value
|
|
: VIDEO_SETTINGS_DEFAULTS.colorFilter;
|
|
}
|
|
|
|
function hasRoverAudioCapture(rover) {
|
|
// The browser asks for the separate "<rover>-audio" WHEP source only when
|
|
// roverd's media config says the microphone publisher is enabled and has a
|
|
// concrete publish URL. That keeps UI media setup aligned with the daemon
|
|
// config instead of probing for streams that should not exist.
|
|
return Boolean(rover?.media?.audioCapture?.enabled && rover?.media?.audioCapture?.publishUrl);
|
|
}
|
|
|
|
export default function RoverMediaPlayer({
|
|
roverId = null,
|
|
sessionInfo = null,
|
|
audioSessionInfo = null,
|
|
videoMode = null,
|
|
snapshotFeed = null,
|
|
label,
|
|
forceMute = false,
|
|
sensors,
|
|
}) {
|
|
const assignedRoverId = useSessionSelector((state) => state.session?.assignment?.roverId ?? null);
|
|
const effectiveRoverId = roverId ?? assignedRoverId;
|
|
const mode = useSessionSelector((state) => state.session?.mode || null);
|
|
const rosterEntry = useSessionSelector((state) =>
|
|
effectiveRoverId && Array.isArray(state.session?.roster)
|
|
? state.session.roster.find((item) => String(item.id) === String(effectiveRoverId)) || null
|
|
: null,
|
|
);
|
|
const hasAudio = hasRoverAudioCapture(rosterEntry);
|
|
const autoVideoEnabled = videoMode ? videoMode === 'whep' : true;
|
|
const autoAudioEnabled = hasAudio;
|
|
const autoEntries = useMemo(() => {
|
|
if (!effectiveRoverId) return [];
|
|
return [
|
|
...(autoVideoEnabled ? [{ type: 'rover', id: effectiveRoverId, key: effectiveRoverId }] : []),
|
|
...(autoAudioEnabled
|
|
? [{ type: 'rover', id: `${effectiveRoverId}-audio`, key: `${effectiveRoverId}-audio` }]
|
|
: []),
|
|
];
|
|
}, [effectiveRoverId, autoVideoEnabled, autoAudioEnabled]);
|
|
const autoSources = useVideoRequests(autoEntries, {
|
|
enabled: Boolean(effectiveRoverId && (autoVideoEnabled || autoAudioEnabled)),
|
|
version: mode,
|
|
});
|
|
const resolvedSessionInfo =
|
|
sessionInfo ?? (effectiveRoverId ? autoSources[effectiveRoverId] || null : null);
|
|
const resolvedAudioSessionInfo =
|
|
audioSessionInfo ??
|
|
(effectiveRoverId && hasAudio ? autoSources[`${effectiveRoverId}-audio`] || null : null);
|
|
const autoSnapshots = useRoverSnapshots(effectiveRoverId ? [effectiveRoverId] : [], {
|
|
enabled: Boolean(effectiveRoverId && !resolvedSessionInfo?.url),
|
|
version: mode,
|
|
});
|
|
const resolvedSnapshotFeed =
|
|
snapshotFeed ?? (effectiveRoverId ? autoSnapshots[effectiveRoverId] || null : null);
|
|
const resolvedLabel =
|
|
label || rosterEntry?.name || (effectiveRoverId ? `Rover ${effectiveRoverId}` : 'Rover');
|
|
const mainBrushTelemetry = useTelemetrySelector(
|
|
effectiveRoverId,
|
|
selectMainBrushAudioTelemetry,
|
|
mainBrushAudioTelemetryEqual,
|
|
);
|
|
const resolvedMainBrushTelemetry = sensors
|
|
? {
|
|
mainBrushCurrentMa: sensors?.mainBrushCurrentMa ?? 0,
|
|
mainBrushOvercurrent: Boolean(sensors?.wheelOvercurrents?.mainBrush),
|
|
}
|
|
: mainBrushTelemetry;
|
|
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(resolvedAudioSessionInfo?.url);
|
|
const usingSnapshot = videoMode === 'snapshot' || (!videoMode && !resolvedSessionInfo?.url);
|
|
const { value: audioSettings } = useSettingsNamespace('audio', AUDIO_SETTINGS_DEFAULTS);
|
|
const { value: videoSettings } = useSettingsNamespace('video', VIDEO_SETTINGS_DEFAULTS);
|
|
const videoFilter = normalizeVideoFilter(videoSettings?.colorFilter);
|
|
const videoFilterStyle = VIDEO_FILTER_STYLES[videoFilter];
|
|
const mediaStyle = videoFilterStyle
|
|
? {
|
|
// Apply the filter only to the camera pixels. The parent overlays remain unfiltered so
|
|
// telemetry, chat, and warning text do not lose contrast or inherit the green tint.
|
|
filter: videoFilterStyle,
|
|
}
|
|
: undefined;
|
|
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 mainBrushActive = Boolean(
|
|
(Number(resolvedMainBrushTelemetry?.mainBrushCurrentMa) || 0) > BRUSH_CURRENT_THRESHOLD_MA ||
|
|
resolvedMainBrushTelemetry?.mainBrushOvercurrent,
|
|
);
|
|
const duckGain = mainBrushDuckEnabled && mainBrushActive ? 1 - mainBrushDuckAmount : 1;
|
|
const effectiveRoverGain = Math.max(0, Math.min(1, baseRoverGain * duckGain));
|
|
|
|
const debugAudio = useMemo(() => {
|
|
if (typeof window === 'undefined') {
|
|
return false;
|
|
}
|
|
const params = new URLSearchParams(window.location.search);
|
|
return params.has('debugAudio');
|
|
}, []);
|
|
|
|
const audioDebugStateRef = useRef({
|
|
hasDedicatedAudio: false,
|
|
audioUrl: null,
|
|
mainBrushDuckEnabled: false,
|
|
mainBrushDuckAmount: 0,
|
|
mainBrushActive: false,
|
|
baseRoverGain: 0,
|
|
effectiveRoverGain: 0,
|
|
});
|
|
useEffect(() => {
|
|
audioDebugStateRef.current = {
|
|
hasDedicatedAudio,
|
|
audioUrl: resolvedAudioSessionInfo?.url || null,
|
|
mainBrushDuckEnabled,
|
|
mainBrushDuckAmount,
|
|
mainBrushActive,
|
|
baseRoverGain,
|
|
effectiveRoverGain,
|
|
};
|
|
}, [
|
|
hasDedicatedAudio,
|
|
resolvedAudioSessionInfo?.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: resolvedLabel || 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, resolvedLabel],
|
|
);
|
|
|
|
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 || !resolvedSessionInfo?.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)) {
|
|
/*
|
|
WHEP status changes can repeat during automatic restart attempts. The
|
|
throttled event keeps media reliability visible in analytics without
|
|
reporting every retry loop as a separate user action.
|
|
*/
|
|
trackAnalyticsEventThrottled(
|
|
'whep_player_error',
|
|
{
|
|
roverId: effectiveRoverId,
|
|
status: nextStatus,
|
|
detail: info || '',
|
|
},
|
|
{ key: `${effectiveRoverId || 'unknown'}:${nextStatus}:${info || ''}`, throttleMs: 60 * 1000 },
|
|
);
|
|
scheduleRestart();
|
|
}
|
|
};
|
|
|
|
player = new WhepPlayer({
|
|
url: resolvedSessionInfo.url,
|
|
token: resolvedSessionInfo.token,
|
|
video: videoRef.current,
|
|
receiveAudio: !hasDedicatedAudio,
|
|
onStatus: handleStatus,
|
|
});
|
|
|
|
player.start().catch((err) => {
|
|
if (!active) return;
|
|
setStatus('error');
|
|
setDetail(err.message);
|
|
trackAnalyticsEventThrottled(
|
|
'whep_player_error',
|
|
{
|
|
roverId: effectiveRoverId,
|
|
status: 'start_failed',
|
|
detail: err.message,
|
|
},
|
|
{ key: `${effectiveRoverId || 'unknown'}:start_failed:${err.message}`, throttleMs: 60 * 1000 },
|
|
);
|
|
scheduleRestart();
|
|
});
|
|
|
|
return () => {
|
|
active = false;
|
|
clearTimeout(resetMuteId);
|
|
player?.stop();
|
|
};
|
|
}, [
|
|
usingSnapshot,
|
|
resolvedSessionInfo?.url,
|
|
resolvedSessionInfo?.token,
|
|
restartToken,
|
|
scheduleRestart,
|
|
ensurePlayback,
|
|
hasDedicatedAudio,
|
|
logAudio,
|
|
effectiveRoverId,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (status === 'stopped' && resolvedSessionInfo?.url) {
|
|
scheduleRestart();
|
|
}
|
|
}, [status, resolvedSessionInfo?.url, scheduleRestart]);
|
|
|
|
useEffect(() => {
|
|
const audioEl = audioRef.current;
|
|
if (!audioEl || !resolvedAudioSessionInfo?.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,
|
|
});
|
|
}, [
|
|
resolvedAudioSessionInfo?.url,
|
|
effectiveRoverGain,
|
|
mainBrushDuckEnabled,
|
|
mainBrushActive,
|
|
mainBrushDuckAmount,
|
|
logAudio,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (!resolvedAudioSessionInfo?.url || !audioRef.current) {
|
|
return undefined;
|
|
}
|
|
let active = true;
|
|
let player;
|
|
const handleStatus = (nextStatus, info) => {
|
|
if (!active) return;
|
|
logAudio('audio/status', { nextStatus, info: info || null });
|
|
setAudioStatus(nextStatus);
|
|
setAudioDetail(info || null);
|
|
if (['error', 'failed'].includes(nextStatus)) {
|
|
scheduleAudioRestart();
|
|
}
|
|
};
|
|
|
|
player = new WhepPlayer({
|
|
url: resolvedAudioSessionInfo.url,
|
|
token: resolvedAudioSessionInfo.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();
|
|
};
|
|
}, [
|
|
resolvedAudioSessionInfo?.url,
|
|
resolvedAudioSessionInfo?.token,
|
|
audioRestartToken,
|
|
scheduleAudioRestart,
|
|
logAudio,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
const audioEl = audioRef.current;
|
|
if (!resolvedAudioSessionInfo?.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) =>
|
|
['error', 'failed', 'disconnected', 'closed'].includes(prev) ? prev : 'playing',
|
|
);
|
|
setAudioDetail(null);
|
|
})
|
|
.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);
|
|
}, [resolvedAudioSessionInfo?.url, audioStatus, logAudio]);
|
|
|
|
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);
|
|
};
|
|
}, [resolvedAudioSessionInfo?.url, logAudio]);
|
|
|
|
const snapshotStatus = resolvedSnapshotFeed?.error
|
|
? `Error: ${resolvedSnapshotFeed.error}`
|
|
: resolvedSnapshotFeed?.objectUrl
|
|
? 'snapshot'
|
|
: resolvedSnapshotFeed?.status || 'waiting';
|
|
const renderedStatus = usingSnapshot
|
|
? snapshotStatus
|
|
: !resolvedSessionInfo?.url
|
|
? 'waiting'
|
|
: status === 'error'
|
|
? `Error: ${detail || 'unknown'}`
|
|
: detail
|
|
? `${status} (${detail})`
|
|
: status;
|
|
const renderedAudioStatus = resolvedAudioSessionInfo?.error
|
|
? `Error: ${resolvedAudioSessionInfo.error}`
|
|
: !resolvedAudioSessionInfo?.url
|
|
? 'waiting'
|
|
: audioStatus === 'error'
|
|
? `Error: ${audioDetail || 'unknown'}`
|
|
: audioDetail
|
|
? `${audioStatus} (${audioDetail})`
|
|
: audioStatus;
|
|
const showConnectingOverlay =
|
|
!usingSnapshot &&
|
|
!resolvedSessionInfo?.error &&
|
|
status !== 'playing';
|
|
|
|
return (
|
|
<>
|
|
{usingSnapshot ? (
|
|
resolvedSnapshotFeed?.objectUrl ? (
|
|
<img
|
|
src={resolvedSnapshotFeed.objectUrl}
|
|
alt={resolvedLabel}
|
|
className="h-full w-full object-contain"
|
|
style={mediaStyle}
|
|
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"
|
|
style={mediaStyle}
|
|
/>
|
|
)}
|
|
{showConnectingOverlay ? (
|
|
<div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/45">
|
|
<div className="rounded border border-slate-500/70 bg-black/70 px-3 py-1 text-sm font-semibold text-slate-100">
|
|
Connecting to video....
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<audio ref={audioRef} autoPlay hidden />
|
|
<div className="pointer-events-none absolute left-1 top-1 z-20 font-medium text-slate-100 text-[0.65rem]">
|
|
<div className="flex flex-col gap-0.5 leading-none">
|
|
<span>Status: {renderedStatus}</span>
|
|
{renderedAudioStatus ? <span>Audio: {renderedAudioStatus}</span> : null}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|