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

Improve video title and artist display on the platform

Browse Source 
Update video card component to correctly display video titles and artist/performer names, handling cases where artist information is not directly provided by extracting it from the video title.

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/pjFeepJ
This commit is contained in:
sebastjanartic 2025-09-17 07:21:48 +00:00
parent 24f27b0e87
commit 9a1fc2fc4d
1 changed files with 6 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/components/video-card.tsx
View File

@ -327,13 +327,13 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
{!showPreview && !hideOverlay && !(isMobile && isVideoPage) && (
<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">
{/* Artist in UPPERCASE - first line */}
{/* Artist/Performer in UPPERCASE - first line */}
<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'} uppercase`} style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
{video.artist ? video.artist.substring(0, 35) : (video.title.split(' - ')[0] || 'video.folx.tv').substring(0, 35)}
{(video.title.split(' - ')[0] || 'video.folx.tv').substring(0, 35)}
</h3>
{/* Song title - second line */}
<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.artist ? video.title.substring(0, 50) : (video.title.split(' - ')[1] || video.title).substring(0, 50)}
{(video.title.split(' - ')[1] || video.title).substring(0, 50)}
</p>
</div>
</div>
@ -343,16 +343,13 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
{/* Mobile info section - below video - only on video pages */}
{isMobile && isVideoPage && (
<div className="mt-3 px-1">
{/* Artist in UPPERCASE - first line */}
{/* Artist/Performer in UPPERCASE - first line */}
<h3 className="text-white font-bold text-base leading-tight mb-1 uppercase" style={{fontFamily: 'Poppins, Inter, sans-serif'}}>
{video.artist ? (video.artist.length > 30 ? video.artist.substring(0, 30) + '...' : video.artist) : (video.title.split(' - ')[0] || 'video.folx.tv')}
{(video.title.split(' - ')[0] || 'video.folx.tv').length > 30 ? (video.title.split(' - ')[0] || 'video.folx.tv').substring(0, 30) + '...' : (video.title.split(' - ')[0] || 'video.folx.tv')}
</h3>
{/* Song title - second line */}
<h4 className="text-white/85 font-medium text-sm leading-tight mb-2" style={{fontFamily: 'Inter, sans-serif'}}>
{video.artist ?
(video.title.length > 40 ? video.title.substring(0, 40) + '...' : video.title) :
(video.title.split(' - ')[1] || video.title).length > 40 ? (video.title.split(' - ')[1] || video.title).substring(0, 40) + '...' : (video.title.split(' - ')[1] || video.title)
}
{(video.title.split(' - ')[1] || video.title).length > 40 ? (video.title.split(' - ')[1] || video.title).substring(0, 40) + '...' : (video.title.split(' - ')[1] || video.title)}
</h4>
{/* Views and Date in one line */}