New WebRTC Component Changes

src/components/WebRtcPlayer.astro

@@ -6,18 +6,11 @@ interface Props extends HTMLAttributes<"div"> {
     streamUrl: string;
     iceServers?: any[];
     poster?: string;
-    checkStreamFn?: string;
-    retryInterval?: number;
 }
 
-const {
+const { streamUrl, iceServers = [], poster, class: className } = Astro.props;
-    streamUrl,
+
-    iceServers = [],
+const id = `${Math.random().toString(36).slice(2)}`;
-    poster,
-    class: className,
-    checkStreamFn,
-    retryInterval = 5000,
-} = Astro.props;
 ---
 
 <style>
@@ -99,38 +92,36 @@ const {
     }
 </style>
 
-<div
+<div id={"video-card-" + id} class={cn("video-card", className)}>
-    class={cn("video-card", className)}
-    data-checkStreamFn={checkStreamFn ?? ""}
-    data-retryInterval={retryInterval}
->
     <div class="video-wrap">
         <video
-            id="live-video"
+            id={"live-video-" + id}
             autoplay
             playsinline
             muted
-            poster={poster}
+            poster={poster}></video>
-            data-stream={streamUrl}></video>
         <div class="live-badge">LIVE</div>
-        <div id="overlay" class="overlay"></div>
+        <div id={"overlay-" + id} class="overlay"></div>
 
         <div class="controls">
-            <button id="volume-btn" class="btn" aria-label="Mute/Unmute"
+            <button id={"volume-btn-" + id} class="btn" aria-label="Mute/Unmute"
                 >🔇</button
             >
-            <button id="fullscreen-btn" class="btn" aria-label="Fullscreen"
+            <button
-                >⤢</button
+                id={"fullscreen-btn-" + id}
+                class="btn"
+                aria-label="Fullscreen">⤢</button
             >
         </div>
     </div>
 </div>
 
-<script type="module" is:inline define:vars={{ streamUrl, iceServers }}>
+<script type="module" is:inline define:vars={{ id, streamUrl, iceServers }}>
-    const videoEl = document.getElementById("live-video");
+    const videoCardEl = document.getElementById("video-card-" + id);
-    const overlayEl = document.getElementById("overlay");
+    const videoEl = document.getElementById("live-video-" + id);
-    const volumeBtn = document.getElementById("volume-btn");
+    const overlayEl = document.getElementById("overlay-" + id);
-    const fullscreenBtn = document.getElementById("fullscreen-btn");
+    const volumeBtn = document.getElementById("volume-btn-" + id);
+    const fullscreenBtn = document.getElementById("fullscreen-btn-" + id);
 
     function createWhepPlayer(whepUrl, videoEl, opts = {}) {
         const { iceServers = [], onEvent } = opts;
@@ -308,9 +299,8 @@ const {
     });
 
     fullscreenBtn.addEventListener("click", async () => {
-        const videoCard = document.querySelector(".video-card");
         if (!document.fullscreenElement) {
-            await videoCard.requestFullscreen();
+            await videoCardEl.requestFullscreen();
         } else {
             await document.exitFullscreen();
         }