More rich metadata with NowPlaying

frontend/src/components/SongRow.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { useState, useRef, useEffect } from 'react';
 import { FaPlay, FaVolumeUp, FaVolumeOff } from 'react-icons/fa';
-import { PlaylistItem } from '../api/player';
+import { getDisplayTitle, PlaylistItem } from '../api/player';
 
 export enum PlayState {
   NotPlaying, 
@@ -36,7 +36,7 @@ const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay })
     };
   }, [showDeleteConfirm]);
   
-  const displayTitle = song.metadata?.title || song.title || song.filename;
+  const displayTitle = getDisplayTitle(song);
   
   return (
     <div className={classNames("flex flex-row w-full h-[100px] px-2 py-5 items-center border-b gap-2 transition-colors", {