65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
|
import { useEffect, useState } from "react";
|
||
|
|
import { Button, Input } from "../../../shared/ui";
|
||
|
|
import { Music2, SkipForward, Square, Volume2 } from "lucide-react";
|
||
|
|
|
||
|
|
interface MusicSubPanelProps {
|
||
|
|
volume: number;
|
||
|
|
onVolumeChange: (v: number) => void;
|
||
|
|
onQueue: (source: string) => void;
|
||
|
|
onSkip: () => void;
|
||
|
|
onStop: () => void;
|
||
|
|
loading: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function MusicSubPanel({ volume, onVolumeChange, onQueue, onSkip, onStop, loading }: MusicSubPanelProps) {
|
||
|
|
const [source, setSource] = useState("");
|
||
|
|
const safeVolume = Number.isFinite(volume) ? Math.max(0, Math.min(1, volume)) : 1;
|
||
|
|
const [draftVolume, setDraftVolume] = useState(Math.round(safeVolume * 100));
|
||
|
|
|
||
|
|
// Debounced volume — poll every 200ms instead of instant send to avoid flood
|
||
|
|
useEffect(() => {
|
||
|
|
const id = setInterval(() => {
|
||
|
|
const normalized = draftVolume / 100;
|
||
|
|
if (Math.abs(normalized - safeVolume) >= 0.001) onVolumeChange(normalized);
|
||
|
|
}, 200);
|
||
|
|
return () => clearInterval(id);
|
||
|
|
}, [draftVolume, safeVolume, onVolumeChange]);
|
||
|
|
|
||
|
|
const submit = () => { const t = source.trim(); if (!t) return; onQueue(t); setSource(""); };
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<Input
|
||
|
|
value={source}
|
||
|
|
onChange={(e) => setSource(e.target.value)}
|
||
|
|
onKeyDown={(e) => e.key === "Enter" && submit()}
|
||
|
|
placeholder="YouTube URL, Spotify track, or search terms"
|
||
|
|
/>
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<Volume2 className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||
|
|
<input
|
||
|
|
type="range"
|
||
|
|
min={0}
|
||
|
|
max={100}
|
||
|
|
step={1}
|
||
|
|
value={draftVolume}
|
||
|
|
onChange={(e) => setDraftVolume(Number(e.target.value))}
|
||
|
|
className="h-2 w-full cursor-pointer accent-primary"
|
||
|
|
/>
|
||
|
|
<span className="w-10 shrink-0 text-right text-sm tabular-nums text-muted-foreground">{draftVolume}%</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
<Button disabled={loading || !source.trim()} onClick={submit}>
|
||
|
|
<Music2 className="mr-1.5 h-4 w-4" /> Queue
|
||
|
|
</Button>
|
||
|
|
<Button variant="secondary" disabled={loading} onClick={onSkip}>
|
||
|
|
<SkipForward className="mr-1.5 h-4 w-4" /> Skip
|
||
|
|
</Button>
|
||
|
|
<Button variant="destructive" disabled={loading} onClick={onStop}>
|
||
|
|
<Square className="mr-1.5 h-4 w-4" /> Stop
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|