104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
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;
|