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

Improve video title and description display for better user experience

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/video-card.tsx
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="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"> <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)'}}> <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> </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>
</div> </div>
)} )}
@ -317,11 +320,11 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
</div> </div>
{/* Description with expand/collapse */} {/* Description with expand/collapse */}
{video.description && ( {(video.title.split(' - ')[1] || video.description) && (
<div className="text-white/70 text-sm"> <div className="text-white/70 text-sm">
<div className="flex items-end"> <div className="flex items-end">
<p className={`flex-1 ${showMoreInfo ? '' : 'line-clamp-1'}`}> <p className={`flex-1 ${showMoreInfo ? '' : 'line-clamp-1'}`}>
{video.description || ''} {video.title.split(' - ')[1] || video.description || ''}
</p> </p>
{!showMoreInfo && ( {!showMoreInfo && (
<button <button

6
client/src/pages/GeschichteLiedPage.tsx
View File

@ -244,7 +244,11 @@ export default function GeschichteLiedPage() {
{/* Video Description */} {/* Video Description */}
<div className="md:col-span-2 space-y-3"> <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"> <p className="text-bunny-light text-sm leading-relaxed">
{video.description || "Keine Beschreibung für diese Sendung verfügbar."} {video.description || "Keine Beschreibung für diese Sendung verfügbar."}
</p> </p>