feat: add manual preview start button and HLS polling

frontend/src/components/VideoPreview.tsx

@@ -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;
 
-    if (Hls.isSupported()) {
+    let destroyed = false;
-      const hls = new Hls({ enableWorker: true, lowLatencyMode: true });
+
-      hlsRef.current = hls;
+    const tryLoad = () => {
-      hls.loadSource(src);
+      if (destroyed || !videoRef.current) return;
-      hls.attachMedia(videoRef.current);
+
-      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      if (Hls.isSupported()) {
-        setHasSignal(true);
+        const hls = new Hls({
-        videoRef.current?.play().catch(console.error);
+          enableWorker: true,
-      });
+          lowLatencyMode: true,
-      hls.on(Hls.Events.ERROR, (_event, data) => {
+          // Retry aggressively — the m3u8 may not exist yet
-        if (data.fatal) setHasSignal(false);
+          manifestLoadingMaxRetry: 20,
-      });
+          manifestLoadingRetryDelay: 2000,
-    } else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
+        });
-      videoRef.current.src = src;
+        hlsRef.current = hls;
-      videoRef.current.addEventListener('canplay', () => setHasSignal(true), { once: true });
+        hls.loadSource(src);
-      videoRef.current.play().catch(console.error);
+        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]);
+  }, [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, (_e, d) => { if (d.fatal) setHasSignal(false); });
+        }
+      }, 3000);
+    } catch (e: any) {
+      setStartError(e.message ?? 'Failed to start preview');
+    } finally {
+      setStarting(false);
+    }
+  };
 
   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)',
+        border: `1px solid ${hasSignal ? 'rgba(0,230,118,0.4)' : 'rgba(26,58,255,0.4)'}`,
-        color: '#7aa4ff',
+        color: hasSignal ? 'var(--green-safe)' : '#7aa4ff',
         borderRadius: 2,
       }}>
-        HLS ∙ ~5s
+        {hasSignal ? 'LIVE ∙ HLS' : 'HLS ∙ ~5s'}
       </div>
     </div>
   );