74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from "react";
|
|
import { Music } from "lucide-react";
|
|
import {
|
|
Drawer,
|
|
DrawerContent,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "~/components/ui/drawer";
|
|
import { Slider } from "~/components/ui/slider";
|
|
import { useMusicPlayer } from "./MusicPlayerProvider";
|
|
import PlayerControls from "./PlayerControls";
|
|
|
|
function formatTime(seconds: number) {
|
|
if (!Number.isFinite(seconds)) return "0:00";
|
|
const m = Math.floor(seconds / 60);
|
|
const s = Math.floor(seconds % 60);
|
|
return `${m}:${s.toString().padStart(2, "0")}`;
|
|
}
|
|
|
|
/**
|
|
* Global, persistent mini-player: a floating button (shown once something is
|
|
* loaded) that opens a drawer with the transport controls and a scrubber, so
|
|
* playback can be controlled from any page while it keeps running in the
|
|
* background.
|
|
*/
|
|
export default function MusicMiniPlayer() {
|
|
const { currentTrack, isPlaying, currentTime, duration, seek } = useMusicPlayer();
|
|
const [open, setOpen] = useState(false);
|
|
|
|
if (!currentTrack) return null;
|
|
|
|
return (
|
|
<Drawer open={open} onOpenChange={setOpen}>
|
|
<DrawerTrigger asChild>
|
|
<button
|
|
type="button"
|
|
aria-label="Open player"
|
|
className="fixed bottom-4 left-4 z-40 flex max-w-[60vw] items-center gap-2 rounded-full border bg-background/80 px-4 py-2 shadow-lg backdrop-blur-md transition-colors hover:bg-background"
|
|
>
|
|
<Music className={isPlaying ? "animate-pulse" : ""} />
|
|
<span className="truncate text-sm">{currentTrack.title}</span>
|
|
</button>
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>{currentTrack.title}</DrawerTitle>
|
|
</DrawerHeader>
|
|
<div className="mx-auto flex w-full max-w-md flex-col gap-4 px-4 pb-8">
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-10 text-right font-mono text-xs text-muted-foreground tabular-nums">
|
|
{formatTime(currentTime)}
|
|
</span>
|
|
<Slider
|
|
className="flex-1"
|
|
min={0}
|
|
max={duration || 1}
|
|
step={0.1}
|
|
value={[currentTime]}
|
|
onValueChange={([v]) => seek(v ?? 0)}
|
|
/>
|
|
<span className="w-10 font-mono text-xs text-muted-foreground tabular-nums">
|
|
{formatTime(duration)}
|
|
</span>
|
|
</div>
|
|
<PlayerControls />
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
}
|