Add suggested videos to the live stream page sidebar

Integrates a new API call to fetch suggested videos and displays them in a dedicated section on the right sidebar of the LivePage, replacing previously present informational content.

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/E8iWmgC

.replit

@@ -15,6 +15,10 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 33305
+externalPort = 3002
+
 [[ports]]
 localPort = 34033
 externalPort = 3001

client/src/pages/LivePage.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect, useRef } from 'react';
 import { ChevronLeft, Maximize, Volume2, VolumeX, Radio } from 'lucide-react';
 import { Link } from 'wouter';
 import { Button } from '@/components/ui/button';
+import { useQuery } from '@tanstack/react-query';
+import VideoCard from '@/components/video-card';
 import AdSenseAd from '@/components/adsense-ad';
 
 declare global {
@@ -22,6 +24,14 @@ export default function LivePage() {
   // HLS stream URL
   const streamUrl = 'https://cdne.folxplay.tv/fxt/streams/ch-4/master.m3u8';
 
+  // Fetch suggested videos
+  const { data: videosData } = useQuery({
+    queryKey: ['/api/videos'],
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+  
+  const videos = videosData?.videos || [];
+
   useEffect(() => {
     // Set page meta tags
     document.title = 'LIVE Stream | video.folx.tv';
@@ -395,8 +405,26 @@ export default function LivePage() {
             </div>
           </div>
 
-          {/* Sidebar */}
+          {/* Sidebar - Suggested Videos */}
           <div className="lg:col-span-1 space-y-6">
+            <div className="bg-bunny-darker rounded-lg p-4">
+              <h3 className="text-white font-bold text-lg mb-4">Predlagani videi</h3>
+              <div className="space-y-4">
+                {videos.slice(0, 8).map((video: any) => (
+                  <div key={video.id} className="group">
+                    <VideoCard 
+                      video={video}
+                      isCompact={true}
+                      showTitle={true}
+                      showViews={true}
+                      showDate={true}
+                      className="hover:bg-bunny-dark/50 transition-colors rounded-lg"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+
             {/* Ad Space */}
             <div className="bg-bunny-darker rounded-lg p-4">
               <AdSenseAd 
@@ -404,52 +432,6 @@ export default function LivePage() {
                 adFormat="vertical" 
               />
             </div>
-
-            {/* Live Chat or Additional Content */}
-            <div className="bg-bunny-darker rounded-lg p-6 space-y-4">
-              <h3 className="text-white font-bold text-lg flex items-center space-x-2">
-                <Radio className="w-5 h-5 text-red-500" />
-                <span>Live Info</span>
-              </h3>
-              
-              <div className="space-y-3 text-sm text-bunny-light">
-                <div className="flex justify-between">
-                  <span>Status:</span>
-                  <span className="text-red-500 font-semibold">● LIVE</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>Quality:</span>
-                  <span>Auto (HD)</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>Channel:</span>
-                  <span>CH-4</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>Format:</span>
-                  <span>HLS</span>
-                </div>
-              </div>
-            </div>
-
-            {/* Navigation Links */}
-            <div className="bg-bunny-darker rounded-lg p-6 space-y-4">
-              <h3 className="text-white font-bold text-lg">Explore</h3>
-              <div className="space-y-2">
-                <Link href="/" className="block text-bunny-light hover:text-white transition-colors">
-                  ← Back to Home
-                </Link>
-                <Link href="/folx-stadl" className="block text-bunny-light hover:text-white transition-colors">
-                  FOLX STADL Episodes
-                </Link>
-                <Link href="/geschichte-lied" className="block text-bunny-light hover:text-white transition-colors">
-                  Geschichte des Liedes
-                </Link>
-                <Link href="/gipfelstammtisch" className="block text-bunny-light hover:text-white transition-colors">
-                  Gipfelstammtisch
-                </Link>
-              </div>
-            </div>
           </div>
         </div>
       </div>