Add recommended videos and ad to the live streaming page

Integrate an AdSense ad and update the recommended videos section on the LivePage component, mirroring changes from the video page.

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

.replit

@@ -24,7 +24,7 @@ localPort = 35637
 externalPort = 3000
 
 [[ports]]
-localPort = 45701
+localPort = 38759
 externalPort = 3002
 
 [env]

client/src/pages/LivePage.tsx

@@ -469,24 +469,71 @@ export default function LivePage() {
             </div>
           </div>
 
-          {/* Sidebar - Suggested Videos */}
+          {/* Sidebar - Empfohlene Videos */}
           <div className="lg:col-span-1 space-y-6">
-            <div className="bg-bunny-darker rounded-lg p-4">
+            {/* Sidebar Ad */}
-              <h3 className="text-white font-bold text-lg mb-4">Suggested Videos</h3>
+            <div className="mb-6">
-              <div className="space-y-3">
+              <AdSenseAd 
-                {videos.slice(0, 8).map((video: any) => (
+                adSlot="5629279662"
-                  <div key={video.id} className="group">
+                adFormat="auto"
-                    <VideoCard 
+                className="w-full"
-                      video={video}
-                      onClick={() => window.location.href = `/video/${video.id}`}
-                      className="hover:bg-bunny-dark/50 transition-colors rounded-lg scale-90"
               />
             </div>
+            
+            <h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2>
+            
+            <div className="space-y-2">
+              {videos.slice(0, 10).map((video: any) => (
+                <div
+                  key={video.id}
+                  onClick={() => {
+                    const shortId = video.id.replace(/-/g, '').substring(0, 8);
+                    window.location.href = `/video/${shortId}`;
+                  }}
+                  className="flex gap-3 p-2 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors"
+                >
+                  <div className="relative w-24 h-16 bg-gray-700 rounded overflow-hidden flex-shrink-0">
+                    <img
+                      src={video.thumbnailUrl}
+                      alt={video.title}
+                      className="w-full h-full object-cover"
+                      onError={(e) => {
+                        const target = e.target as HTMLImageElement;
+                        target.style.display = 'none';
+                        if (target.parentElement && !target.parentElement.querySelector('.thumbnail-placeholder')) {
+                          target.parentElement.style.background = 'linear-gradient(135deg, #1f2937, #374151)';
+                          const placeholder = document.createElement('div');
+                          placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-xs';
+                          placeholder.innerHTML = '<div>🎬</div>';
+                          target.parentElement.appendChild(placeholder);
+                        }
+                      }}
+                    />
+                    <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">
+                      {video.duration ? Math.floor(video.duration / 60) + ':' + String(video.duration % 60).padStart(2, '0') : '0:00'}
+                    </div>
+                  </div>
+                  
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-sm font-medium text-bunny-light mb-1 line-clamp-2"
+                        style={{
+                          display: '-webkit-box',
+                          WebkitLineClamp: 2,
+                          WebkitBoxOrient: 'vertical',
+                          overflow: 'hidden'
+                        }}>
+                      {video.title}
+                    </h3>
+                    <div className="text-xs text-bunny-muted">
+                      <div>{video.views ? (video.views >= 1000 ? Math.floor(video.views / 1000) + 'K' : video.views) : '0'} views • {video.createdAt ? new Date(video.createdAt).toLocaleDateString('de-DE') : 'Unknown date'}</div>
+                    </div>
+                  </div>
+                </div>
               ))}
             </div>
             
-              {/* Ad Space inside same container */}
+            {/* Bottom Sidebar Ad */}
-              <div className="mt-6 pt-4 border-t border-white/10">
+            <div className="mt-6">
               <AdSenseAd 
                 adSlot="9876543210"
                 adFormat="vertical" 
@@ -496,6 +543,5 @@ export default function LivePage() {
         </div>
       </div>
     </div>
-    </div>
   );
 }