use-player

Installation

npx shadcn add @limeplay/use-player

lib/media.ts

"use client"

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

createMediaKit({
  features: [..., playerFeature()] as const,
})

Store

Access via usePlayerStore(selector):

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

const player = usePlayerStore((s) => s.instance)
const containerRef = usePlayerStore((s) => s.containerRef)

State

Field	Type	Description
`instance`	`shaka.Player \| null`	Shaka Player instance
`containerRef`	`HTMLDivElement \| null`	Player container element
`preloadManagers`	`Map<string, PreloadManager>`	Active preload managers

usePlayer Hook

The usePlayer hook provides methods to load and preload assets:

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

const { load, preload, player } = usePlayer({
  onLoad: async (asset, player, media) => {
    await player.load(asset.src)
  },
  onError: (error, asset) => {
    console.error("Load failed:", error)
  },
})

Options

Prop

Type

Returns

Method	Description
`load(asset, startTime?)`	Load an asset into Shaka Player
`preload(asset)`	Preload an asset for instant playback
`cancelPreload(assetId)`	Cancel a pending preload
`isPreloaded(assetId)`	Check if an asset is preloaded
`player`	Current Shaka Player instance

Events

Event	Payload	When
`playerready`	`{ player }`	Shaka Player initialized
`playererror`	`{ error }`	Player-level error
`playbackerror`	`Error`	Playback error
`bufferingchange`	`{ isBuffering }`	Buffering state changes

Debug Mode

When debug: true is passed to mediaFeature({ debug: true }), the debug build of Shaka Player is loaded for development diagnostics.

On this page