use-playback

Installation

npx shadcn add @limeplay/use-playback

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
})

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

Use the usePlayback() hook to control playback in your components.

import { usePlayback } from "@/hooks/limeplay/use-playback"

export function PlaybackControlButton() {
  const { play, pause, togglePaused, restart } = usePlayback()

  return (
    <div>
      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
      <button onClick={togglePaused}>Toggle</button>
      <button onClick={restart}>Restart</button>
    </div>
  )
}

Understanding

The use-playback hook provides the foundation for all media playback functionality. It implements the Event & Action Bridge pattern:

• Event Bridge: usePlaybackStates() listens to native media events (play, pause, ended, buffering, etc.) and synchronizes state to the React store
• Action Bridge: usePlayback() provides control functions (play(), pause(), togglePaused(), etc.) that manipulate the native media element

This hook is required for all other hooks and components as it provides the core media state management.

Media Status States

The hook tracks the following media status values:

API Reference

usePlaybackStates()

Sets up event listeners for all media playback events. This hook should be called once in your PlayerHooks component. It automatically syncs the following state:

• paused, ended, loop - Playback state
• status - Current media status
• readyState - Media ready state (0-4)
• canPlay, canPlayThrough - Playback readiness
• error, networkState - Error and network information

usePlayback()

Returns control functions for managing media playback.

Returns

Store State

The playback store provides the following state accessed via useMediaStore: