From e59c6f7b3bbce0dbf40b13446754ba4228cce22e Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 26 Sep 2025 06:40:15 +0000
Subject: [PATCH] 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 | 52 ++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 29 deletions(-)

diff --git a/client/src/pages/LivePage.tsx b/client/src/pages/LivePage.tsx
index 46b4d6f..e9ed8cf 100644
--- a/client/src/pages/LivePage.tsx
+++ b/client/src/pages/LivePage.tsx
@@ -46,22 +46,30 @@ export default function LivePage() {
     updateMetaTag('og:type', 'video.other');
   }, []);
 
-  useEffect(() => {
-    const initializePlayer = async () => {
-      console.log('🔴 LivePage: Starting to initialize player...');
-      
-      if (!videoRef.current) {
-        console.error('🚨 Video ref not available!');
-        return;
-      }
+  // 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();
+    }
+  };
 
-      console.log('🔴 Video element found, continuing...');
+  const initializePlayer = async () => {
+    console.log('🔴 LivePage: Starting to initialize player...');
+    
+    if (!videoRef.current) {
+      console.error('🚨 Video ref not available!');
+      return;
+    }
 
-      try {
-        // Load HLS.js if not already loaded
-        console.log('🔴 Checking if HLS.js is loaded...');
-        if (!window.Hls) {
-          console.log('🔴 Loading HLS.js script...');
+    console.log('🔴 Video element found, continuing...');
+
+    try {
+      // Load HLS.js if not already loaded
+      console.log('🔴 Checking if HLS.js is loaded...');
+      if (!window.Hls) {
+        console.log('🔴 Loading HLS.js script...');
           const script = document.createElement('script');
           script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.8';
           script.async = true;
@@ -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