Improve video title and description display for better user experience

Update the video card and video page components to correctly parse and display video titles and descriptions, splitting titles at ' - ' and handling missing descriptions gracefully.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/OdlP8Wj
This commit is contained in:
sebastjanartic 2025-09-03 09:15:40 +00:00
parent ce61c60e42
commit e9478bc7a4
2 changed files with 11 additions and 4 deletions

View File

@ -295,8 +295,11 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10 flex items-end p-4 group-hover:from-black/95 transition-all duration-300">
<div className="w-full">
<h3 className={`text-white font-extrabold leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300 mb-1 ${isMobile ? 'text-2xl' : 'text-xl'}`} style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
{video.title}
{video.title.split(' - ')[0] || 'go4.video'}
</h3>
<p className={`text-white/85 font-medium drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300 ${isMobile ? 'text-base' : 'text-sm'}`} style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
{video.title.split(' - ')[1] || video.title}
</p>
</div>
</div>
)}
@ -317,11 +320,11 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
</div>
{/* Description with expand/collapse */}
{video.description && (
{(video.title.split(' - ')[1] || video.description) && (
<div className="text-white/70 text-sm">
<div className="flex items-end">
<p className={`flex-1 ${showMoreInfo ? '' : 'line-clamp-1'}`}>
{video.description || ''}
{video.title.split(' - ')[1] || video.description || ''}
</p>
{!showMoreInfo && (
<button

View File

@ -244,7 +244,11 @@ export default function GeschichteLiedPage() {
{/* Video Description */}
<div className="md:col-span-2 space-y-3">
<h3 className="text-xl font-bold text-white">{video.title}</h3>
<h3 className="text-xl font-bold text-white">
{video.title.includes(' - ')
? video.title.split(' - ')[1] || video.title
: video.title}
</h3>
<p className="text-bunny-light text-sm leading-relaxed">
{video.description || "Keine Beschreibung für diese Sendung verfügbar."}
</p>