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

@@ -23,6 +23,10 @@ externalPort = 3001
 localPort = 35637
 externalPort = 3000
 
+[[ports]]
+localPort = 41879
+externalPort = 3002
+
 [env]
 PORT = "5000"
 

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 */}