Playback Control

Installation

Install the component

npx shadcn add @limeplay/playback-control

Add Event & Action Bridge

Import the useMediaStates hook in your existing PlayerHooks component.

components/limeplay/player-hooks.tsx

"use client"

import React from "react"

import { usePlayerStates } from "@/hooks/limeplay/use-player"
import { useShakaPlayer } from "@/hooks/limeplay/use-shaka-player"

export const PlayerHooks = React.memo(() => {
  useShakaPlayer()
  usePlayerStates() 

  return null
})

Add the Store States

lib/create-media-store.ts

import { createPlayerStore, PlayerStore } from "@/hooks/limeplay/use-player"


export type TypeMediaStore = PlayerStore & {} 

export function createMediaStore(initProps?: Partial<CreateMediaStoreProps>) {
  const mediaStore = create<TypeMediaStore>()((...etc) => ({
    ...createPlayerStore(...etc),
    ...initProps,
  }))
  return mediaStore
}

Example Usage

Design the playback button with icons and states.

components/player/playback-control-button.tsx

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.

components/player/bottom-controls.tsx

<PlaybackControlButton />

The PlaybackControl component uses the usePlayer() hook to control playback state. You can use the status field from media store to get the current status of the media. List of possible values are:

Status	Description
`playing`	The media is playing
`paused`	The media is paused
`ended`	The media has reached the end
`buffering`	The media is buffering
`error`	The media has encountered an error
`init`	The media is initializing or has readyState 0
`stopped`	The media has been stopped

The PlaybackControl component automatically handles all these states and shows appropriate behavior (e.g., "Replay" for ended state).

Components