buzzert/QueueCube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: Finish interactivity

Browse Source
This commit is contained in:
James Magahern
2025-02-15 16:28:47 -08:00
parent 9c4981b9cb
commit 79f53bbffe
9 changed files with 247 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/NowPlaying.tsx
View File

@@ -7,27 +7,27 @@ interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
fileName: string;
isPlaying: boolean;
onPlayPause: () => void;
onStepForward: () => void;
onStepBackward: () => void;
onSkip: () => void;
onPrevious: () => void;
}
const NowPlaying: React.FC<NowPlayingProps> = (props) => {
return (
<div className={classNames(props.className, 'bg-violet-100/50 h-[150px] p-5')}>
<div className={classNames(props.className, 'bg-black/50 h-[150px] 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">
<div className="text-white text-lg font-bold">{props.songName}</div>
<div className="text-white text-sm">{props.fileName}</div>
<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>
<div className="flex flex-row gap-4">
<button className="text-white hover:text-violet-300 transition-colors" onClick={props.onStepBackward}>
<button className="text-white hover:text-violet-300 transition-colors" onClick={props.onPrevious}>
<FaStepBackward size={24} />
</button>
<button className="text-white hover:text-violet-300 transition-colors" onClick={props.onPlayPause}>
{props.isPlaying ? <FaPause size={24} /> : <FaPlay size={24} />}
</button>
<button className="text-white hover:text-violet-300 transition-colors" onClick={props.onStepForward}>
<button className="text-white hover:text-violet-300 transition-colors" onClick={props.onSkip}>
<FaStepForward size={24} />
</button>
</div>