use-player

Installation

npx shadcn add @limeplay/use-player

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

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

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

import { usePlayer } from "@/hooks/limeplay/use-player"

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

  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-player hook provides the foundation for all media playback functionality. It implements the Event & Action Bridge pattern:

• Event Bridge: usePlayerStates() listens to native media events (play, pause, ended, buffering, etc.) and synchronizes state to the React store
• Action Bridge: usePlayer() 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

usePlayerStates()

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

usePlayer()

Returns control functions for managing media playback.

Returns

Store State

The player store provides the following state accessed via useMediaStore: