Fix live stream playback issues by improving video player initialization

Updates LivePage.tsx to use a callback ref for the video element, ensuring proper initialization of the HLS.js player and resolving potential playback errors.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/Njo8yLX

client/src/pages/LivePage.tsx

@@ -46,7 +46,15 @@ export default function LivePage() {
     updateMetaTag('og:type', 'video.other');
   }, []);
 
-  useEffect(() => {
+  // Callback ref to properly handle video element mounting
+  const videoCallbackRef = (element: HTMLVideoElement | null) => {
+    if (element) {
+      videoRef.current = element;
+      console.log('🔴 Video element mounted, initializing player...');
+      initializePlayer();
+    }
+  };
+
   const initializePlayer = async () => {
     console.log('🔴 LivePage: Starting to initialize player...');
     
@@ -220,20 +228,6 @@ export default function LivePage() {
       }
     };
 
-    // Add a small delay to ensure DOM is ready
-    const timer = setTimeout(() => {
-      initializePlayer();
-    }, 200);
-
-    return () => {
-      clearTimeout(timer);
-      if (hlsRef.current) {
-        console.log('🧹 Destroying HLS instance');
-        hlsRef.current.destroy();
-      }
-    };
-  }, []);
-
   const togglePlayPause = () => {
     if (videoRef.current) {
       if (isPlaying) {
@@ -326,7 +320,7 @@ export default function LivePage() {
                 )}
                 
                 <video
-                  ref={videoRef}
+                  ref={videoCallbackRef}
                   className="w-full h-full bg-black"
                   playsInline
                   controls