use-player

Installation

npx shadcn add @limeplay/use-player

import React from "react"

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

export const PlayerHooks = React.memo(() => {
  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

The usePlayer hook provides methods to load and preload assets.

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

export function LoadButton() {
  const { load, preload } = usePlayer({
    onError: (error, asset) => console.error("Error loading asset", asset, error),
    onLoad: async (asset, player, media) => {
        // Custom load logic if needed, or just:
        await player.load(asset.src)
    }
  })

  const handleLoad = () => {
    load({ id: "1", src: "https://..." })
  }

  return <button onClick={handleLoad}>Load Asset</button>
}

Understanding

The use-player hook (formerly use-shaka-player) handles the Shaka Player instance and asset loading lifecycle.

• Initialization: usePlayerStates automatically loads the Shaka Player library and attaches it to the media element.
• Loading: usePlayer provides a load function that uses a custom onLoad callback to handle asset loading.
• Preloading: Supports preloading assets for instant playback.
• Events: Synced with Zustand store (onPlayerReady, onBufferingChange, onError).

Debug Mode

When debug is enabled in the store, the hook loads the debug build of Shaka Player.

API Reference

usePlayerStates()

Initializes Shaka Player and attaches it to the media element. Also syncs player events like buffering to the store.

usePlayer(options)

Returns methods to interact with the player.

Options

Returns

Store State

The player instance and events are stored in the media store: