Playback Control
Controls the play/pause state of the Media.
Installation
npx shadcn add @limeplay/playback-controlAdd Event & Action Bridge
Import the useMediaStates hook in your existing PlayerHooks component.
"use client"
import React from "react"
import { usePlaybackStates } from "@/hooks/limeplay/use-playback"
import { usePlayerStates } from "@/hooks/limeplay/use-player"
export const PlayerHooks = React.memo(() => {
usePlayerStates()
usePlaybackStates()
return null
})Add the Store States
import { createPlaybackStore, PlaybackStore } from "@/hooks/limeplay/use-playback"
export type TypeMediaStore = PlaybackStore &
{}
export function createMediaStore(initProps?: Partial<CreateMediaStoreProps>) {
const mediaStore = create<TypeMediaStore>()((...etc) => ({
...createPlaybackStore(...etc),
...initProps,
}))
return mediaStore
}Example Usage
- Design the playback button with icons and states.
import { PauseIcon, PlayIcon } from "@phosphor-icons/react"
import { Button } from "@/components/ui/button"
import { useMediaStore } from "@/components/limeplay/media-provider"
import { PlaybackControl } from "@/components/limeplay/playback-control"
export function PlaybackControlButton() {
const status = useMediaStore((state) => state.status)
return (
<PlaybackControl asChild>
<Button variant="ghost" size="icon">
{status === "playing" ? (
<PauseIcon weight="fill" size={18} />
) : (
<PlayIcon weight="fill" size={18} />
)}
</Button>
</PlaybackControl>
)
}- Use the component in your player.
<PlaybackControlButton />Understanding
The PlaybackControl component uses the usePlayback() hook to control playback state. You can use the status field from media store to get the current status of the media.