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

Display video descriptions directly below the video player

Browse Source 
Adjusted the layout in `FolxStadlPage.tsx` to place video descriptions below the video player component, moving view count and duration information above the description.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/QQTyNAb
This commit is contained in:
sebastjanartic 2025-08-30 16:18:14 +00:00
parent b470e39bc3
commit 8b607a002b
2 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756570656562.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 643 KiB

37
client/src/pages/FolxStadlPage.tsx
View File

@ -101,27 +101,26 @@ export default function FolxStadlPage() {
<div className="space-y-6">
{currentVideos.map((video, index) => (
<div key={video.id} className="bg-black/20 backdrop-blur-sm rounded-lg p-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Video Card */}
<div className="md:col-span-1">
<VideoCard
video={video}
onClick={handleVideoClick}
className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden"
/>
</div>
{/* Video Card */}
<div className="mb-4">
<VideoCard
video={video}
onClick={handleVideoClick}
className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden"
/>
</div>
{/* Video Description */}
<div className="md:col-span-2 space-y-3">
<h3 className="text-xl font-bold text-white">{video.title}</h3>
<p className="text-bunny-light text-sm leading-relaxed">
{video.description || "Keine Beschreibung für diese Sendung verfügbar."}
</p>
<div className="flex items-center gap-4 text-xs text-bunny-muted">
<span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span>
<span>{video.views} Aufrufe</span>
</div>
{/* Video Description Below */}
<div className="space-y-3">
<h3 className="text-xl font-bold text-white">{video.title}</h3>
<div className="flex items-center gap-4 text-xs text-bunny-muted mb-2">
<span>{video.views} Aufrufe</span>
<span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span>
<span>1 day ago</span>
</div>
<p className="text-bunny-light text-sm leading-relaxed">
{video.description || "Keine Beschreibung für diese Sendung verfügbar."}
</p>
</div>
</div>
))}