QueueCube/frontend/src/components/SongRow.tsx

import classNames from 'classnames';
import React, { useState, useRef, useEffect, ReactNode } from 'react';
import { FaPlay, FaVolumeUp, FaVolumeOff } from 'react-icons/fa';
import { getDisplayTitle, PlaylistItem } from '../api/player';

export enum PlayState {
  NotPlaying, 
  Playing,
  Paused,
}

export interface SongRowProps {
  song: PlaylistItem;
  auxControl?: ReactNode;
  playState: PlayState;
  onDelete: () => void;
  onPlay: () => void;
}

const SongRow: React.FC<SongRowProps> = ({ song, auxControl, playState, onDelete, onPlay }) => {
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const buttonRef = useRef<HTMLButtonElement>(null);
  
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
        setShowDeleteConfirm(false);
      }
    };
    
    if (showDeleteConfirm) {
      document.addEventListener('click', handleClickOutside);
    }
    
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, [showDeleteConfirm]);
  
  const displayTitle = getDisplayTitle(song);
  
  return (
    <div className={classNames(
      "flex flex-row w-full h-20 px-2 py-2 items-center border-b gap-2 transition-colors shrink-0", {
      "qc-highlighted": (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 rounded"
          onClick={onPlay}
        >
          {
            playState === PlayState.Playing ? <FaVolumeUp size={12} /> 
            : playState === PlayState.Paused ? <FaVolumeOff size={12} /> 
            : <FaPlay size={12} />
          }
        </button>
      </div>
      
      <div className="flex-grow min-w-0">
        { 
          displayTitle ? (
            <div>
              <div className="text-white text-md truncate text-bold">
                {displayTitle}
              </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">
        {auxControl}

        <button
          ref={buttonRef}
          className="text-red-100 px-3 py-1 bg-red-500/40 rounded"
          onClick={(e) => {
            e.stopPropagation();
            if (showDeleteConfirm) {
              setShowDeleteConfirm(false);
              onDelete();
            } else {
              setShowDeleteConfirm(true);
            }
          }}
        >
          {showDeleteConfirm ? 'Delete' : '×'}
        </button>
      </div>
    </div>
  );
};

export default SongRow;