FEAT: Integrated the live stream video

frontend/src/components/Video/VideoPlayer.tsx

@@ -1,61 +1,64 @@
 import React, { useEffect, useRef } from "react";
+import { useParams } from "react-router-dom";
 import videojs from "video.js";
-import type Player from "video.js/dist/types/player";
 import "video.js/dist/video-js.css";
 
-interface VideoPlayerProps {
-  streamId: number;
-}
-
-const VideoPlayer: React.FC<VideoPlayerProps> = ({ streamId }) => {
+const VideoPlayer: React.FC = () => {
+  const { streamerName } = useParams<{ streamerName: string }>(); // Get streamerName from URL
   const videoRef = useRef<HTMLDivElement>(null);
-  const playerRef = useRef<Player | null>(null);
+  const playerRef = useRef<videojs.Player | null>(null);
 
   useEffect(() => {
-    // Makes sure Video.js player is only initialized once
-    if (!playerRef.current && videoRef.current) {
+    if (!videoRef.current || !streamerName) return;
+
+    const streamUrl = `http://localhost:8080/stream/${streamerName}/index.m3u8`; // Updated URL with streamerName
+
+    if (!playerRef.current) {
       const videoElement = document.createElement("video");
-      videoElement.classList.add(
-        "video-js",
-        "vjs-big-play-centered",
-        "w-full",
-        "h-full",
-      );
+      videoElement.classList.add("video-js", "vjs-big-play-centered", "w-full", "h-full");
+      videoElement.setAttribute("playsinline", "true");
       videoRef.current.appendChild(videoElement);
 
       playerRef.current = videojs(videoElement, {
         controls: true,
+        autoplay: true,
+        muted: true,
         fluid: true,
         responsive: true,
-        // autoplay: true,
-        loop: true,
-        aspectRatio: "16:9",
+        liveui: true,
         sources: [
           {
-            src: `/images/sample_game_video.mp4`,
-            // type: "application/x-mpegURL",
-            type: "video/mp4",
+            src: streamUrl,
+            type: "application/x-mpegURL",
           },
         ],
       });
+
+      // Handle stream errors & retry
+      playerRef.current.on("error", () => {
+        console.error(`Stream failed to load: ${streamUrl}`);
+        setTimeout(() => {
+          console.log("Retrying stream...");
+          playerRef.current?.src({ src: streamUrl, type: "application/x-mpegURL" });
+          playerRef.current?.play();
+        }, 5000);
+      });
+    } else {
+      playerRef.current.src({ src: streamUrl, type: "application/x-mpegURL" });
+      playerRef.current.play();
     }
 
-    // Dispose the Video.js player when the component unmounts
     return () => {
       if (playerRef.current) {
         playerRef.current.dispose();
         playerRef.current = null;
       }
     };
-  }, [streamId]);
+  }, [streamerName]);
 
   return (
-    <div
-      id="video-container"
-      className="min-w-[65vw] w-full h-full flex justify-center items-center bg-gray-900 rounded-lg"
-      style={{ gridArea: "1 / 1 / 2 / 2" }}
-    >
-      <div ref={videoRef} id="video-player" className="w-full max-w-[80vw] self-center" />
+    <div className="min-w-[65vw] w-full h-full flex justify-center items-center bg-gray-900 rounded-lg">
+      <div ref={videoRef} className="w-full max-w-[80vw] self-center" />
     </div>
   );
 };