89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
|
import { Play, Pause, SkipBack, SkipForward, Shuffle, Repeat } from 'lucide-react';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
|
||
|
|
export interface PlayerControlsProps {
|
||
|
|
isPlaying: boolean;
|
||
|
|
onPlayPause: () => void;
|
||
|
|
onNext: () => void;
|
||
|
|
onPrevious: () => void;
|
||
|
|
onShuffle: () => void;
|
||
|
|
onRepeat: () => void;
|
||
|
|
shuffle: boolean;
|
||
|
|
repeat: 'off' | 'track' | 'playlist';
|
||
|
|
isExpanded?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PlayerControls({
|
||
|
|
isPlaying,
|
||
|
|
onPlayPause,
|
||
|
|
onNext,
|
||
|
|
onPrevious,
|
||
|
|
onShuffle,
|
||
|
|
onRepeat,
|
||
|
|
shuffle,
|
||
|
|
repeat,
|
||
|
|
isExpanded = false
|
||
|
|
}: PlayerControlsProps) {
|
||
|
|
return (
|
||
|
|
<div className={cn("flex items-center gap-4 md:gap-6", isExpanded && "gap-8")}>
|
||
|
|
<button
|
||
|
|
onClick={onShuffle}
|
||
|
|
className={cn(
|
||
|
|
"p-2 rounded-full transition-all duration-300",
|
||
|
|
shuffle
|
||
|
|
? "text-primary bg-primary/10 shadow-[0_0_10px_rgba(var(--cyan-500),0.3)]"
|
||
|
|
: "text-muted-foreground hover:text-white hover:bg-white/5"
|
||
|
|
)}
|
||
|
|
title="Shuffle"
|
||
|
|
>
|
||
|
|
<Shuffle className={cn("w-4 h-4", isExpanded && "w-5 h-5")} />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={onPrevious}
|
||
|
|
className="text-white hover:text-primary transition-colors p-2 active:scale-95 hover:bg-white/5 rounded-full"
|
||
|
|
>
|
||
|
|
<SkipBack className={cn("w-5 h-5 fill-current", isExpanded && "w-6 h-6")} />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={onPlayPause}
|
||
|
|
className={cn(
|
||
|
|
"rounded-full bg-primary text-black flex items-center justify-center hover:scale-105 active:scale-95 transition-all shadow-[0_0_20px_rgba(var(--cyan-500),0.5)] hover:shadow-[0_0_30px_rgba(var(--cyan-500),0.8)]",
|
||
|
|
isExpanded ? "w-16 h-16" : "w-12 h-12"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{isPlaying ? (
|
||
|
|
<Pause className={cn("fill-current", isExpanded ? "w-8 h-8" : "w-6 h-6")} />
|
||
|
|
) : (
|
||
|
|
<Play className={cn("fill-current ml-1", isExpanded ? "w-8 h-8" : "w-6 h-6")} />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={onNext}
|
||
|
|
className="text-white hover:text-primary transition-colors p-2 active:scale-95 hover:bg-white/5 rounded-full"
|
||
|
|
>
|
||
|
|
<SkipForward className={cn("w-5 h-5 fill-current", isExpanded && "w-6 h-6")} />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={onRepeat}
|
||
|
|
className={cn(
|
||
|
|
"p-2 rounded-full transition-all duration-300 relative",
|
||
|
|
repeat !== 'off'
|
||
|
|
? "text-primary bg-primary/10 shadow-[0_0_10px_rgba(var(--cyan-500),0.3)]"
|
||
|
|
: "text-muted-foreground hover:text-white hover:bg-white/5"
|
||
|
|
)}
|
||
|
|
title="Repeat"
|
||
|
|
>
|
||
|
|
<Repeat className={cn("w-4 h-4", isExpanded && "w-5 h-5")} />
|
||
|
|
{repeat === 'track' && (
|
||
|
|
<span className="absolute -top-1 -right-1 text-[8px] font-bold bg-primary text-black px-1 rounded-full">1</span>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|