sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add recommended videos and ad to the live streaming page

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-26 16:48:54 +00:00
parent 71d9d9c9a8
commit 2ade01a1b6
3 changed files with 67 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.replit
View File

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

BIN
attached_assets/image_1758905153607.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 878 KiB

86
client/src/pages/LivePage.tsx
View File

@ -469,29 +469,75 @@ 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">
<h3 className="text-white font-bold text-lg mb-4">Suggested Videos</h3>
<div className="space-y-3">
{videos.slice(0, 8).map((video: any) => (
<div key={video.id} className="group">
<VideoCard
video={video}
onClick={() => window.location.href = `/video/${video.id}`}
className="hover:bg-bunny-dark/50 transition-colors rounded-lg scale-90"
{/* Sidebar Ad */}
<div className="mb-6">
<AdSenseAd
adSlot="5629279662"
adFormat="auto"
className="w-full"
/>
</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>
{/* Ad Space inside same container */}
<div className="mt-6 pt-4 border-t border-white/10">
<AdSenseAd
adSlot="9876543210"
adFormat="vertical"
/>
</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>
{/* Bottom Sidebar Ad */}
<div className="mt-6">
<AdSenseAd
adSlot="9876543210"
adFormat="vertical"
/>
</div>
</div>
</div>