Updated HLS Player

src/components/WebRtcPlayer.astro

@@ -6,9 +6,16 @@ interface Props extends HTMLAttributes<"div"> {
     streamUrl: string;
     iceServers?: any[];
     poster?: string;
+    onEnded?: Function;
 }
 
-const { streamUrl, iceServers = [], poster, class: className } = Astro.props;
+const {
+    streamUrl,
+    iceServers = [],
+    poster,
+    class: className,
+    onEnded,
+} = Astro.props;
 
 const id = `${Math.random().toString(36).slice(2)}`;
 ---
@@ -118,7 +125,11 @@ const id = `${Math.random().toString(36).slice(2)}`;
     </div>
 </div>
 
-<script type="module" is:inline define:vars={{ id, streamUrl, iceServers }}>
+<script
+    type="module"
+    is:inline
+    define:vars={{ id, streamUrl, iceServers, onEnded }}
+>
     const videoCardEl = document.getElementById("video-card-" + id);
     const videoEl = document.getElementById("live-video-" + id);
     const overlayEl = document.getElementById("overlay-" + id);
@@ -178,6 +189,7 @@ const id = `${Math.random().toString(36).slice(2)}`;
 
                 if (["disconnected", "failed", "closed"].includes(state)) {
                     emit("disconnected", { msg: "Stream Ended" });
+                    onEnded();
                 }
             });