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

Improve video title display by separating artist and song

Browse Source 
Refactors the video card component to use a new utility function for parsing video titles, accurately separating artist and song information for improved display. Adds `client/src/lib/title-parser.ts`.

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/cSLTj2G
This commit is contained in:
sebastjanartic
2025-09-17 07:45:29 +00:00
parent 62b6553e7a
commit 7a545062ac
3 changed files with 44 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/video-card.tsx
+8 -5
View File
@@ -2,6 +2,7 @@ import { Play, Volume2, VolumeX } from "lucide-react";
import { type Video } from "@shared/schema";
import { useState, useRef, useEffect } from "react";
import Hls from "hls.js";
import { parseArtistTitle } from "@/lib/title-parser";
interface VideoCardProps {
video: Video;
@@ -329,12 +330,14 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
<div className="w-full">
{/* 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.title.split(' - ')[0] || 'video.folx.tv').substring(0, 35)}
{parseArtistTitle(video.title).artist.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.title.split(' - ')[1] || video.title).substring(0, 50)}
</p>
{/* Song title - second line (only show if exists) */}
{parseArtistTitle(video.title).song && (
<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)'}}>
{parseArtistTitle(video.title).song.substring(0, 50)}
</p>
)}
</div>
</div>
)}