zgaetano/deltacast-sdi-recorder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: redesign VideoPreview with dark broadcast monitor frame

Browse source
This commit is contained in:
Zac Gaetano 2026-04-14 09:45:16 -04:00
parent 4835f7c4b6
commit 5274ca5460
1 changed files with 50 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
frontend/src/components/VideoPreview.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import Hls from 'hls.js'; import Hls from 'hls.js';
interface VideoPreviewProps { interface VideoPreviewProps {
@ -8,60 +8,82 @@ interface VideoPreviewProps {
export function VideoPreview({ portIndex }: VideoPreviewProps) { export function VideoPreview({ portIndex }: VideoPreviewProps) {
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const hlsRef = useRef<Hls | null>(null); const hlsRef = useRef<Hls | null>(null);
const [hasSignal, setHasSignal] = useState(false);
useEffect(() => { useEffect(() => {
const src = `/hls/port_${portIndex}.m3u8`; const src = `/hls/port_${portIndex}.m3u8`;
setHasSignal(false);
if (!videoRef.current) { if (!videoRef.current) return;
return;
}
if (Hls.isSupported()) { if (Hls.isSupported()) {
const hls = new Hls({ const hls = new Hls({ enableWorker: true, lowLatencyMode: true });
enableWorker: true,
lowLatencyMode: true,
});
hlsRef.current = hls; hlsRef.current = hls;
hls.loadSource(src); hls.loadSource(src);
hls.attachMedia(videoRef.current); hls.attachMedia(videoRef.current);
hls.on(Hls.Events.MANIFEST_PARSED, () => { hls.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.current?.play().catch((err) => { setHasSignal(true);
console.error('Failed to autoplay video:', err); videoRef.current?.play().catch(console.error);
});
}); });
hls.on(Hls.Events.ERROR, (_event, data) => {
hls.on(Hls.Events.ERROR, (event, data) => { if (data.fatal) setHasSignal(false);
console.error('HLS.js error:', data);
}); });
} else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) { } else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
// Safari native HLS support
videoRef.current.src = src; videoRef.current.src = src;
videoRef.current.play().catch((err) => { videoRef.current.addEventListener('canplay', () => setHasSignal(true), { once: true });
console.error('Failed to autoplay video:', err); videoRef.current.play().catch(console.error);
});
} else {
console.error('HLS streaming is not supported in this browser');
} }
return () => { return () => {
if (hlsRef.current) { hlsRef.current?.destroy();
hlsRef.current.destroy(); hlsRef.current = null;
hlsRef.current = null;
}
}; };
}, [portIndex]); }, [portIndex]);
return ( return (
<div className="bg-black rounded-lg overflow-hidden aspect-video"> <div style={{ background: '#000', borderRadius: 2, overflow: 'hidden', position: 'relative', aspectRatio: '16/9' }}>
<video <video
ref={videoRef} ref={videoRef}
className="w-full h-full" style={{ width: '100%', height: '100%', objectFit: 'cover', display: hasSignal ? 'block' : 'none' }}
controls controls
muted muted
playsInline playsInline
/> />
{!hasSignal && (
<div style={{
position: 'absolute', inset: 0,
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
background: 'linear-gradient(135deg, #090d15 0%, #0e1525 100%)',
}}>
{/* Grid pattern */}
<div style={{
position: 'absolute', inset: 0,
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={{
fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)',
letterSpacing: '0.15em', textTransform: 'uppercase', zIndex: 1,
}}>
Port {portIndex} — No HLS Feed
</span>
</div>
)}
{/* HLS badge */}
<div style={{
position: 'absolute', top: 10, right: 10,
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',
borderRadius: 2,
}}>
HLS ∙ ~5s
</div>
</div> </div>
); );
} }