Fetch metadata when something is added to the playlist.

frontend/src/api/player.tsx

@@ -7,11 +7,26 @@ export interface NowPlayingResponse {
   currentFile: string;
 }
 
+export interface Metadata {
+  title?: string;
+  description?: string;
+  siteName?: string;
+}
+
 export interface PlaylistItem {
   filename: string;
   title: string | null;
   id: number;
   playing: boolean | null;
+  metadata?: Metadata;
+}
+
+export interface MetadataUpdateEvent {
+    event: 'metadata_update';
+    data: {
+        url: string;
+        metadata: Metadata;
+    };
 }
 
 export const API = {

frontend/src/components/App.tsx

@@ -87,6 +87,7 @@ const App: React.FC = () => {
       case 'user_modify':
       case 'end-file':
       case 'playback-restart':
+      case 'metadata_update':
         fetchPlaylist();
         fetchNowPlaying();
         break;

frontend/src/components/SongRow.tsx

@@ -36,6 +36,8 @@ const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay })
     };
   }, [showDeleteConfirm]);
   
+  const displayTitle = song.metadata?.title || song.title || song.filename;
+  
   return (
     <div className={classNames("flex flex-row w-full h-[100px] px-2 py-5 items-center border-b gap-2 transition-colors", {
       "bg-black/10": (playState === PlayState.Playing || playState === PlayState.Paused),
@@ -56,10 +58,10 @@ const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay })
       
       <div className="flex-grow min-w-0">
         { 
-          song.title ? (
+          displayTitle ? (
             <div>
               <div className="text-white text-md truncate text-bold">
-                {song.title}
+                {displayTitle}
               </div>
               <div className="text-white/80 text-xs truncate">
                 {song.filename}