41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { Pause, Play, Shuffle, SkipBack, SkipForward } from "lucide-react";
|
|
import { Button } from "~/components/ui/button";
|
|
import { useMusicPlayer } from "./MusicPlayerProvider";
|
|
|
|
export default function PlayerControls() {
|
|
const { isPlaying, shuffle, togglePlayCurrent, next, previous, toggleShuffle } =
|
|
useMusicPlayer();
|
|
|
|
return (
|
|
<div className="flex items-center justify-center gap-1">
|
|
<Button type="button" size="icon" variant="ghost" aria-label="Previous track" onClick={previous}>
|
|
<SkipBack />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="icon-lg"
|
|
variant="secondary"
|
|
aria-label={isPlaying ? "Pause" : "Play"}
|
|
onClick={togglePlayCurrent}
|
|
>
|
|
{isPlaying ? <Pause /> : <Play />}
|
|
</Button>
|
|
<Button type="button" size="icon" variant="ghost" aria-label="Skip to next track" onClick={next}>
|
|
<SkipForward />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="icon"
|
|
variant={shuffle ? "secondary" : "ghost"}
|
|
aria-label={shuffle ? "Shuffle on" : "Shuffle off"}
|
|
aria-pressed={shuffle}
|
|
onClick={toggleShuffle}
|
|
>
|
|
<Shuffle />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|