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

76
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';
interface VideoPreviewProps {
@ -8,60 +8,82 @@ interface VideoPreviewProps {
export function VideoPreview({ portIndex }: VideoPreviewProps) {
const videoRef = useRef<HTMLVideoElement>(null);
const hlsRef = useRef<Hls | null>(null);
const [hasSignal, setHasSignal] = useState(false);
useEffect(() => {
const src = `/hls/port_${portIndex}.m3u8`;
setHasSignal(false);
if (!videoRef.current) {
return;
}
if (!videoRef.current) return;
if (Hls.isSupported()) {
const hls = new Hls({
enableWorker: true,
lowLatencyMode: true,
});
const hls = new Hls({ enableWorker: true, lowLatencyMode: true });
hlsRef.current = hls;
hls.loadSource(src);
hls.attachMedia(videoRef.current);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.current?.play().catch((err) => {
console.error('Failed to autoplay video:', err);
setHasSignal(true);
videoRef.current?.play().catch(console.error);
});
});
hls.on(Hls.Events.ERROR, (event, data) => {
console.error('HLS.js error:', data);
hls.on(Hls.Events.ERROR, (_event, data) => {
if (data.fatal) setHasSignal(false);
});
} else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
// Safari native HLS support
videoRef.current.src = src;
videoRef.current.play().catch((err) => {
console.error('Failed to autoplay video:', err);
});
} else {
console.error('HLS streaming is not supported in this browser');
videoRef.current.addEventListener('canplay', () => setHasSignal(true), { once: true });
videoRef.current.play().catch(console.error);
}
return () => {
if (hlsRef.current) {
hlsRef.current.destroy();
hlsRef.current?.destroy();
hlsRef.current = null;
}
};
}, [portIndex]);
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
ref={videoRef}
className="w-full h-full"
style={{ width: '100%', height: '100%', objectFit: 'cover', display: hasSignal ? 'block' : 'none' }}
controls
muted
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>
);
}