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

Add descriptions for each video alongside the video player

Browse Source 
Updated the FolxStadlPage component to display video titles, descriptions, durations, and view counts, alongside the VideoCard, using a new 3-column grid layout.

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:11:59 +00:00
parent bc8fe24e1a
commit a0fac4f731
1 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,42 +59,40 @@ export default function FolxStadlPage() {
{/* Main Content */} {/* Main Content */}
<div className="max-w-7xl mx-auto px-4 py-8"> <div className="max-w-7xl mx-auto px-4 py-8">
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6"> {/* Video List with Descriptions */}
{/* Left Side - Video List */} <div className="space-y-6">
<div className="lg:col-span-4"> {folxStadlVideos.map((video, index) => (
<div className="space-y-4"> <div key={video.id} className="bg-black/20 backdrop-blur-sm rounded-lg p-4">
{folxStadlVideos.map((video, index) => ( <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div key={video.id} className="group"> {/* Video Card */}
<div className="md:col-span-1">
<VideoCard <VideoCard
video={video} video={video}
onClick={handleVideoClick} onClick={handleVideoClick}
className="w-full hover:scale-102 transition-all duration-300 group-hover:shadow-2xl rounded-lg overflow-hidden" className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden"
/> />
</div> </div>
))}
</div> {/* Video Description */}
<div className="md:col-span-2 space-y-3">
{folxStadlVideos.length === 0 && ( <h3 className="text-xl font-bold text-white">{video.title}</h3>
<div className="text-center py-16"> <p className="text-bunny-light text-sm leading-relaxed">
<p className="text-bunny-muted text-lg">No FOLX STADL videos found</p> {video.description || "Opis ni na voljo za to oddajo."}
</div> </p>
)} <div className="flex items-center gap-4 text-xs text-bunny-muted">
</div> <span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span>
<span>{video.views} ogledi</span>
{/* Right Side - Compact Info */} </div>
<div className="lg:col-span-1"> </div>
<div className="bg-black/20 backdrop-blur-sm rounded-lg p-3 sticky top-8">
<h3 className="text-lg font-bold text-white mb-2">FOLX STADL S4</h3>
<div className="text-sm text-bunny-light space-y-2">
<p>
{folxStadlVideos.length} kompletnih oddaj iz Prime Time Studio Bad Tölz.
</p>
<p className="text-xs text-bunny-muted">
Moderatorji: Hansi Berger, Martina, Spitzbua Markus, Lucky Putz
</p>
</div> </div>
</div> </div>
</div> ))}
{folxStadlVideos.length === 0 && (
<div className="text-center py-16">
<p className="text-bunny-muted text-lg">No FOLX STADL videos found</p>
</div>
)}
</div> </div>
</div> </div>