From 664c4a7875783896a0c7fd420aa885e8a827a69e Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 26 Sep 2025 15:33:12 +0000
Subject: [PATCH] Improve live stream playback by initializing the video player
 automatically

Refactor LivePage component to use useEffect for player initialization and cleanup, and update video element attributes for autoplay, muted, and cross-origin.

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/FiYsh04
---
 .replit                       |  4 ++++
 client/src/pages/LivePage.tsx | 32 +++++++++++++++++---------------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/.replit b/.replit
index cd990cf..3f9dff8 100644
--- a/.replit
+++ b/.replit
@@ -23,6 +23,10 @@ externalPort = 3001
 localPort = 35637
 externalPort = 3000
 
+[[ports]]
+localPort = 41879
+externalPort = 3002
+
 [env]
 PORT = "5000"
 
diff --git a/client/src/pages/LivePage.tsx b/client/src/pages/LivePage.tsx
index f27aab1..577992f 100644
--- a/client/src/pages/LivePage.tsx
+++ b/client/src/pages/LivePage.tsx
@@ -48,6 +48,19 @@ export default function LivePage() {
     updateMetaTag('og:type', 'video.other');
   }, []);
 
+  // Initialize player immediately on mount
+  useEffect(() => {
+    initializePlayer();
+    return () => {
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+      }
+      if (videoRef.current) {
+        videoRef.current.src = '';
+      }
+    };
+  }, []);
+
   // Callback ref to properly handle video element mounting
   const videoCallbackRef = (element: HTMLVideoElement | null) => {
     if (element && element !== videoRef.current) {
@@ -257,19 +270,6 @@ export default function LivePage() {
     }
   };
 
-  if (isLoading) {
-    return (
-      <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
-        <div className="text-center">
-          <div className="w-16 h-16 bg-red-600 rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
-            <Radio className="w-8 h-8 text-white" />
-          </div>
-          <h3 className="text-white text-xl font-bold mb-2">video.folx.tv</h3>
-          <p className="text-bunny-light">Connecting to live stream...</p>
-        </div>
-      </div>
-    );
-  }
 
   return (
     <div className="min-h-screen bg-bunny-dark">
@@ -322,11 +322,13 @@ export default function LivePage() {
                 )}
                 
                 <video
-                  ref={videoCallbackRef}
+                  ref={videoRef}
                   className="w-full h-full bg-black"
                   playsInline
+                  autoPlay
+                  muted
                   controls
-                  muted={false}
+                  crossOrigin="anonymous"
                 />
                 
                 {/* Live Overlay */}