udpate stuff

frontend/src/components/Player.tsx

@@ -1,7 +1,11 @@
 import { useEffect, useRef } from "react";
 import Hls from "hls.js";
 
-export default function Player() {
+interface Props {
+  live: boolean;
+}
+
+export default function Player({ live }: Props) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const hlsRef = useRef<Hls | null>(null);
 
@@ -9,12 +13,28 @@ export default function Player() {
     const video = videoRef.current;
     if (!video) return;
 
-    const src = `http://${window.location.hostname}:8888/live/stream/`;
+    // Tear down any existing instance when stream goes offline
+    if (!live) {
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+      video.removeAttribute("src");
+      video.load();
+      return;
+    }
+
+    const src = `http://${window.location.hostname}:8888/live/stream/index.m3u8`;
 
     if (Hls.isSupported()) {
       const hls = new Hls({
         enableWorker: true,
         lowLatencyMode: true,
+        liveSyncDurationCount: 3,
+        liveMaxLatencyDurationCount: 6,
+        liveBackBufferLength: 0,
+        maxBufferLength: 10,
+        maxMaxBufferLength: 30,
       });
       hlsRef.current = hls;
       hls.loadSource(src);
@@ -44,7 +64,7 @@ export default function Player() {
         hlsRef.current = null;
       }
     };
-  }, []);
+  }, [live]);
 
   return (
     <div className="player-container">