use-shaka-player

Installation

npx shadcn add @limeplay/use-shaka-player

import React from "react"

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

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

  return null
})

Example Usage

The useShakaPlayer hook automatically initializes Shaka Player when the media element is ready. You can access the player instance from the store.

import { useMediaStore } from "@/components/limeplay/media-provider"

export function CustomControl() {
  const player = useMediaStore((state) => state.player)

  const handleCustomAction = () => {
    if (player) {
      // Use Shaka Player API directly
      player.configure({
        streaming: {
          bufferingGoal: 30,
        },
      })
    }
  }

  return <button onClick={handleCustomAction}>Configure Player</button>
}

Understanding

The use-shaka-player hook initializes and manages the Shaka Player instance. It:

• Automatically loads Shaka Player library (debug or production build based on debug store state)
• Creates a new Shaka Player instance and attaches it to the media element
• Stores the player instance in the media store for access throughout your application
• Handles cleanup when the component unmounts

This hook is required for all Shaka Player features like HLS/DASH streaming, DRM, and advanced text track management.

Debug Mode

When debug is enabled in the store, the hook loads the debug build of Shaka Player which includes additional logging and error information.

API Reference

useShakaPlayer()

Initializes Shaka Player and attaches it to the media element. This hook should be called once in your PlayerHooks component.

Returns

Returns the Shaka Player instance (may be null during initialization).

Store State

The player instance is stored in the player store and accessed via useMediaStore: