Playback Control
Play/pause toggle button for media playback.
Installation
npx shadcn add @limeplay/playback-controlRequires playbackFeature registered in your
createMediaKit.
Usage
import { PauseIcon, PlayIcon } from "@phosphor-icons/react"
import { Button } from "@/components/ui/button"
import { usePlaybackStore } from "@/hooks/limeplay/use-playback"
import { PlaybackControl } from "@/components/limeplay/playback-control"
export function PlaybackButton() {
const status = usePlaybackStore((s) => s.status)
return (
<PlaybackControl asChild>
<Button variant="ghost" size="icon">
{status === "playing" ? (
<PauseIcon weight="fill" size={18} />
) : (
<PlayIcon weight="fill" size={18} />
)}
</Button>
</PlaybackControl>
)
}The PlaybackControl component calls togglePaused() on click. Use the status field from the playback store to render the appropriate icon.
Supports asChild for custom button rendering via Radix Slot.