frontend: Finish interactivity

frontend/src/components/SongRow.tsx

@@ -1,13 +1,22 @@
+import classNames from 'classnames';
 import React, { useState, useRef, useEffect } from 'react';
-import { FaPlay } from 'react-icons/fa';
+import { FaPlay, FaVolumeUp, FaVolumeOff } from 'react-icons/fa';
+import { PlaylistItem } from '../api/player';
 
-interface SongRowProps {
-  song: string;
+export enum PlayState {
+  NotPlaying, 
+  Playing,
+  Paused,
+}
+
+export interface SongRowProps {
+  song: PlaylistItem;
+  playState: PlayState;
   onDelete: () => void;
   onPlay: () => void;
 }
 
-const SongRow: React.FC<SongRowProps> = ({ song, onDelete, onPlay }) => {
+const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay }) => {
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   
@@ -28,20 +37,40 @@ const SongRow: React.FC<SongRowProps> = ({ song, onDelete, onPlay }) => {
   }, [showDeleteConfirm]);
   
   return (
-    <div className="flex flex-row w-full h-[100px] bg-black/40 px-2 py-5 items-center border-b gap-2 hover:bg-black/50 transition-colors">
+    <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),
+      "bg-black/30": playState === PlayState.NotPlaying,
+    })}>
       <div className="flex flex-row gap-2">
         <button 
-          className="text-white/40 hover:text-white transition-colors px-3 py-1 bg-white/10 rounded"
+          className="text-white/40 hover:text-white transition-colors px-3 py-1 rounded"
           onClick={onPlay}
         >
-          <FaPlay size={12} />
+          {
+            playState === PlayState.Playing ? <FaVolumeUp size={12} /> 
+            : playState === PlayState.Paused ? <FaVolumeOff size={12} /> 
+            : <FaPlay size={12} />
+          }
         </button>
       </div>
       
       <div className="flex-grow min-w-0">
-        <div className="text-white text-md truncate">
-          {song}
-        </div>
+        { 
+          song.title ? (
+            <div>
+              <div className="text-white text-md truncate text-bold">
+                {song.title}
+              </div>
+              <div className="text-white/80 text-xs truncate">
+                {song.filename}
+              </div>
+            </div>
+          ) : (
+          <div className="text-white text-md truncate text-bold">
+            {song.filename}
+          </div>
+          )
+        }
       </div>
       
       <div className="flex flex-row gap-2">