More rich metadata with NowPlaying

frontend/src/api/player.tsx

@@ -1,6 +1,6 @@
 export interface NowPlayingResponse {
   success: boolean;
-  nowPlaying: string;
+  playingItem: PlaylistItem;
   isPaused: boolean;
   volume: number;
   isIdle: boolean;
@@ -21,6 +21,10 @@ export interface PlaylistItem {
   metadata?: Metadata;
 }
 
+export const getDisplayTitle = (item: PlaylistItem): string => {
+  return item.metadata?.title || item.title || item.filename;
+}
+
 export interface MetadataUpdateEvent {
     event: 'metadata_update';
     data: {

frontend/src/components/App.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import SongTable from './SongTable';
 import NowPlaying from './NowPlaying';
 import AddSongPanel from './AddSongPanel';
-import { API, PlaylistItem } from '../api/player';
+import { API, getDisplayTitle, PlaylistItem } from '../api/player';
 
 const App: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
@@ -20,8 +20,8 @@ const App: React.FC = () => {
 
   const fetchNowPlaying = useCallback(async () => {
     const nowPlaying = await API.getNowPlaying();
-    setNowPlayingSong(nowPlaying.nowPlaying);
-    setNowPlayingFileName(nowPlaying.currentFile);
+    setNowPlayingSong(getDisplayTitle(nowPlaying.playingItem));
+    setNowPlayingFileName(nowPlaying.playingItem.filename);
     setIsPlaying(!nowPlaying.isPaused);
 
     if (!volumeSettingIsLocked) {
@@ -29,11 +29,15 @@ const App: React.FC = () => {
     }
   }, [volumeSettingIsLocked]);
 
-  const handleAddURL = (url: string) => {
+  const handleAddURL = async (url: string) => {
     const urlToAdd = url.trim();
     if (urlToAdd) {
-      API.addToPlaylist(urlToAdd);
+      await API.addToPlaylist(urlToAdd);
       fetchPlaylist();
+
+      if (!isPlaying) {
+        await API.play();
+      }
     }
   };
 

frontend/src/components/NowPlaying.tsx

@@ -23,15 +23,14 @@ interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
 
 const NowPlaying: React.FC<NowPlayingProps> = (props) => {
   return (
-    <div className={classNames(props.className, 'bg-black/50 h-[150px] p-5')}>
+    <div className={classNames(props.className, 'bg-black/50 h-fit p-5')}>
       <div className="flex flex-col w-full gap-2">
-        <div className="flex flex-row w-full h-full bg-black/50 rounded-lg p-5 items-center">
-          <div className="flex-grow min-w-0">
-            <div className="text-white text-lg font-bold truncate">{props.songName}</div>
-            <div className="text-white text-sm truncate">{props.fileName}</div>
+        <div className="flex flex-col md:flex-row w-full h-full bg-black/50 rounded-lg p-5 items-center gap-4">
+          <div className="flex-grow min-w-0 w-full md:w-auto text-white">
+            <div className="text-lg font-bold truncate text-center md:text-left">{props.songName}</div>
+            <div className="text-sm truncate text-center md:text-left">{props.fileName}</div>
           </div>
-          <div className="flex flex-row items-center gap-4">
-
+          <div className="flex flex-row items-center gap-4 justify-center md:justify-end">
             <div className="flex items-center gap-2 text-white">
               <FaVolumeUp size={20} />
               <input
@@ -42,7 +41,7 @@ const NowPlaying: React.FC<NowPlayingProps> = (props) => {
                 onMouseDown={() => props.onVolumeWillChange(props.volume)}
                 onMouseUp={() => props.onVolumeDidChange(props.volume)}
                 onChange={(e) => props.onVolumeSettingChange(Number(e.target.value))}
-                className="w-24 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full hover:[&::-webkit-slider-thumb]:bg-violet-300"
+                className="fancy-slider w-48 md:w-24 h-2"
               />
             </div>
 

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", {

frontend/src/index.css

@@ -1 +1,11 @@
 @import "tailwindcss";
+
+@layer components {
+    .fancy-slider {
+        @apply bg-gray-700 rounded-lg appearance-none cursor-pointer 
+            [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 
+            [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-white 
+            [&::-webkit-slider-thumb]:rounded-full
+            hover:[&::-webkit-slider-thumb]:bg-violet-300;
+    }
+}