Improve video title display by separating artist and song

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

.replit

@@ -15,6 +15,10 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 45029
+externalPort = 3000
+
 [env]
 PORT = "5000"
 

client/src/components/video-card.tsx

@@ -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 */}
+              {/* Song title - second line (only show if exists) */}
-              <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 && (
-                {(video.title.split(' - ')[1] || video.title).substring(0, 50)}
+                <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)'}}>
-              </p>
+                  {parseArtistTitle(video.title).song.substring(0, 50)}
+                </p>
+              )}
             </div>
           </div>
         )}

client/src/lib/title-parser.ts

@@ -0,0 +1,32 @@
+/**
+ * Utility to parse video titles into artist and song parts
+ * Handles various dash characters: hyphen (-), en dash (–), em dash (—)
+ */
+
+export interface ParsedTitle {
+  artist: string;
+  song: string;
+}
+
+export function parseArtistTitle(title: string): ParsedTitle {
+  // Match various dash types with optional spaces
+  const dashRegex = /\s*[-–—]\s*/;
+  const parts = title.split(dashRegex);
+  
+  if (parts.length >= 2) {
+    // Found a delimiter - split into artist and song
+    const artist = parts[0].trim();
+    const song = parts.slice(1).join(' - ').trim(); // Rejoin if multiple dashes
+    
+    return {
+      artist: artist || 'video.folx.tv',
+      song: song || title
+    };
+  }
+  
+  // No delimiter found - use full title as artist, empty song
+  return {
+    artist: title || 'video.folx.tv',
+    song: ''
+  };
+}