feat: add manual preview start button and HLS polling
This commit is contained in:
parent
7e51da50c8
commit
2e62f5822c
1 changed files with 102 additions and 23 deletions
|
|
@ -9,36 +9,93 @@ export function VideoPreview({ portIndex }: VideoPreviewProps) {
|
|||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const hlsRef = useRef<Hls | null>(null);
|
||||
const [hasSignal, setHasSignal] = useState(false);
|
||||
const [starting, setStarting] = useState(false);
|
||||
const [startError, setStartError] = useState<string | null>(null);
|
||||
|
||||
const src = `/hls/port_${portIndex}.m3u8`;
|
||||
|
||||
useEffect(() => {
|
||||
const src = `/hls/port_${portIndex}.m3u8`;
|
||||
setHasSignal(false);
|
||||
setStartError(null);
|
||||
|
||||
if (!videoRef.current) return;
|
||||
|
||||
let destroyed = false;
|
||||
|
||||
const tryLoad = () => {
|
||||
if (destroyed || !videoRef.current) return;
|
||||
|
||||
if (Hls.isSupported()) {
|
||||
const hls = new Hls({ enableWorker: true, lowLatencyMode: true });
|
||||
const hls = new Hls({
|
||||
enableWorker: true,
|
||||
lowLatencyMode: true,
|
||||
// Retry aggressively — the m3u8 may not exist yet
|
||||
manifestLoadingMaxRetry: 20,
|
||||
manifestLoadingRetryDelay: 2000,
|
||||
});
|
||||
hlsRef.current = hls;
|
||||
hls.loadSource(src);
|
||||
hls.attachMedia(videoRef.current);
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
if (!destroyed) {
|
||||
setHasSignal(true);
|
||||
videoRef.current?.play().catch(console.error);
|
||||
}
|
||||
});
|
||||
hls.on(Hls.Events.ERROR, (_event, data) => {
|
||||
if (data.fatal && !destroyed) {
|
||||
setHasSignal(false);
|
||||
}
|
||||
});
|
||||
} else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
videoRef.current.src = src;
|
||||
videoRef.current.addEventListener('canplay', () => {
|
||||
if (!destroyed) setHasSignal(true);
|
||||
}, { once: true });
|
||||
videoRef.current.play().catch(console.error);
|
||||
}
|
||||
};
|
||||
|
||||
tryLoad();
|
||||
|
||||
return () => {
|
||||
destroyed = true;
|
||||
hlsRef.current?.destroy();
|
||||
hlsRef.current = null;
|
||||
};
|
||||
}, [portIndex, src]);
|
||||
|
||||
const handleStartPreview = async () => {
|
||||
setStarting(true);
|
||||
setStartError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/ports/${portIndex}/preview/start`, { method: 'POST' });
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => ({}));
|
||||
throw new Error(body.detail ?? res.statusText);
|
||||
}
|
||||
// Destroy and reload HLS after a short delay for the m3u8 to appear
|
||||
setTimeout(() => {
|
||||
hlsRef.current?.destroy();
|
||||
hlsRef.current = null;
|
||||
if (videoRef.current && Hls.isSupported()) {
|
||||
const hls = new Hls({ enableWorker: true, lowLatencyMode: true });
|
||||
hlsRef.current = hls;
|
||||
hls.loadSource(`/hls/port_${portIndex}.m3u8`);
|
||||
hls.attachMedia(videoRef.current);
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
setHasSignal(true);
|
||||
videoRef.current?.play().catch(console.error);
|
||||
});
|
||||
hls.on(Hls.Events.ERROR, (_event, data) => {
|
||||
if (data.fatal) setHasSignal(false);
|
||||
});
|
||||
} else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
videoRef.current.src = src;
|
||||
videoRef.current.addEventListener('canplay', () => setHasSignal(true), { once: true });
|
||||
videoRef.current.play().catch(console.error);
|
||||
hls.on(Hls.Events.ERROR, (_e, d) => { if (d.fatal) setHasSignal(false); });
|
||||
}
|
||||
}, 3000);
|
||||
} catch (e: any) {
|
||||
setStartError(e.message ?? 'Failed to start preview');
|
||||
} finally {
|
||||
setStarting(false);
|
||||
}
|
||||
|
||||
return () => {
|
||||
hlsRef.current?.destroy();
|
||||
hlsRef.current = null;
|
||||
};
|
||||
}, [portIndex]);
|
||||
|
||||
return (
|
||||
<div style={{ background: '#000', borderRadius: 2, overflow: 'hidden', position: 'relative', aspectRatio: '16/9' }}>
|
||||
|
|
@ -55,6 +112,7 @@ export function VideoPreview({ portIndex }: VideoPreviewProps) {
|
|||
position: 'absolute', inset: 0,
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
|
||||
background: 'linear-gradient(135deg, #090d15 0%, #0e1525 100%)',
|
||||
gap: 14,
|
||||
}}>
|
||||
{/* Grid pattern */}
|
||||
<div style={{
|
||||
|
|
@ -62,13 +120,34 @@ export function VideoPreview({ portIndex }: VideoPreviewProps) {
|
|||
backgroundImage: 'linear-gradient(rgba(26,58,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(26,58,255,0.04) 1px, transparent 1px)',
|
||||
backgroundSize: '32px 32px',
|
||||
}} />
|
||||
<span style={{ fontSize: 40, color: 'var(--text-muted)', zIndex: 1, marginBottom: 10 }}>▶</span>
|
||||
<span style={{ fontSize: 36, color: 'var(--text-muted)', zIndex: 1 }}>▶</span>
|
||||
<span style={{
|
||||
fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)',
|
||||
letterSpacing: '0.15em', textTransform: 'uppercase', zIndex: 1,
|
||||
}}>
|
||||
Port {portIndex} — No HLS Feed
|
||||
</span>
|
||||
<button
|
||||
onClick={handleStartPreview}
|
||||
disabled={starting}
|
||||
style={{
|
||||
zIndex: 1,
|
||||
background: starting ? 'rgba(0,230,118,0.08)' : 'rgba(26,58,255,0.15)',
|
||||
border: `1px solid ${starting ? 'rgba(0,230,118,0.3)' : 'rgba(26,58,255,0.4)'}`,
|
||||
color: starting ? 'var(--green-safe)' : '#7aa4ff',
|
||||
fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 700,
|
||||
letterSpacing: '0.15em', textTransform: 'uppercase',
|
||||
padding: '8px 18px', borderRadius: 3, cursor: starting ? 'default' : 'pointer',
|
||||
transition: 'all 0.15s',
|
||||
}}
|
||||
>
|
||||
{starting ? 'Starting…' : '▶ Start Preview'}
|
||||
</button>
|
||||
{startError && (
|
||||
<span style={{ zIndex: 1, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--rec-red)' }}>
|
||||
{startError}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -78,11 +157,11 @@ export function VideoPreview({ portIndex }: VideoPreviewProps) {
|
|||
fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.15em',
|
||||
padding: '3px 8px',
|
||||
background: 'rgba(0,0,0,0.7)',
|
||||
border: '1px solid rgba(26,58,255,0.4)',
|
||||
color: '#7aa4ff',
|
||||
border: `1px solid ${hasSignal ? 'rgba(0,230,118,0.4)' : 'rgba(26,58,255,0.4)'}`,
|
||||
color: hasSignal ? 'var(--green-safe)' : '#7aa4ff',
|
||||
borderRadius: 2,
|
||||
}}>
|
||||
HLS ∙ ~5s
|
||||
{hasSignal ? 'LIVE ∙ HLS' : 'HLS ∙ ~5s'}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue