Add live streaming functionality for real-time video broadcasts

Integrates a new live streaming page with Video.js player, handling autoplay, playback events, volume changes, fullscreen, and error states. Also includes ad integration for the live stream.

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

client/src/App.tsx

@@ -9,6 +9,7 @@ import VideoPage from "@/pages/VideoPage";
 import FolxStadlPage from "@/pages/FolxStadlPage";
 import GeschichteLiedPage from "@/pages/GeschichteLiedPage";
 import GipfelstammtischPage from "@/pages/GipfelstammtischPage";
+import LivePage from "@/pages/LivePage";
 import AdminPage from "@/pages/admin";
 import PrivacyPolicy from "@/pages/PrivacyPolicy";
 import TermsOfService from "@/pages/TermsOfService";
@@ -23,6 +24,7 @@ function Router() {
       <Route path="/folx-stadl" component={FolxStadlPage} />
       <Route path="/geschichte-lied" component={GeschichteLiedPage} />
       <Route path="/gipfelstammtisch" component={GipfelstammtischPage} />
+      <Route path="/live" component={LivePage} />
       <Route path="/admin" component={AdminPage} />
       <Route path="/privacy" component={PrivacyPolicy} />
       <Route path="/terms" component={TermsOfService} />

client/src/pages/LivePage.tsx

@@ -111,40 +111,44 @@ export default function LivePage() {
           setIsLoading(false);
           
           // Auto-play live stream
-          player?.play().catch((error: any) => {
-            console.log('Live stream autoplay prevented:', error);
-          });
-        });
-
-        // Event listeners
-        player.on('play', () => {
-          console.log('🔴 Live stream started');
-          setIsPlaying(true);
-        });
-
-        player.on('pause', () => {
-          console.log('⏸️ Live stream paused');
-          setIsPlaying(false);
-        });
-
-        player.on('volumechange', () => {
           if (player) {
-            const vol = player.volume();
+            player.play().catch((error: any) => {
-            const muted = player.muted();
+              console.log('Live stream autoplay prevented:', error);
-            setVolume(vol);
+            });
-            setIsMuted(muted);
-            console.log('🔊 Live stream volume change:', { volume: vol, muted });
           }
         });
 
-        player.on('fullscreenchange', () => {
+        // Event listeners
-          setIsFullscreen(!!player?.isFullscreen());
+        if (player) {
-        });
+          player.on('play', () => {
+            console.log('🔴 Live stream started');
+            setIsPlaying(true);
+          });
 
-        player.on('error', (e: any) => {
+          player.on('pause', () => {
-          console.error('🚨 Live stream error:', e);
+            console.log('⏸️ Live stream paused');
-          setIsLoading(false);
+            setIsPlaying(false);
-        });
+          });
+
+          player.on('volumechange', () => {
+            if (player) {
+              const vol = player.volume();
+              const muted = player.muted();
+              setVolume(vol);
+              setIsMuted(muted);
+              console.log('🔊 Live stream volume change:', { volume: vol, muted });
+            }
+          });
+
+          player.on('fullscreenchange', () => {
+            setIsFullscreen(document.fullscreenElement !== null);
+          });
+
+          player.on('error', (e: any) => {
+            console.error('🚨 Live stream error:', e);
+            setIsLoading(false);
+          });
+        }
 
         playerRef.current = player;
 
@@ -316,7 +320,6 @@ export default function LivePage() {
               <AdSenseAd 
                 adSlot="9876543210"
                 adFormat="vertical" 
-                style={{ width: '100%', height: '250px' }}
               />
             </div>