background playback

src/app/music/_components/PlayerControls.tsx

@@ -0,0 +1,40 @@
+'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>
+	);
+}