Player Hooks

Installation

import { PlayerHooks } from "@/components/limeplay/player-hooks"

// ... other imports

export function MediaPlayer() {
  return (
    <MediaProvider>
      <PlayerHooks />
      <Suspense>
        <Layout.RootContainer height={720} width={1280}>
          <Layout.PlayerContainer>
            <MediaElement />
            <Layout.ControlsContainer>
              <BottomControls />
            </Layout.ControlsContainer>
          </Layout.PlayerContainer>
        </Layout.RootContainer>
      </Suspense>
    </MediaProvider>
  )
}

Understanding

This library uses Shaka Player as the default playback engine. Hooks like useShakaPlayer (engine setup) and usePlayerStates (media state) are singletons. Rendering them via the <PlayerHooks /> component prevents re-initializing these hooks on every render. While you could co-locate such hooks alongside each molecule/component, centralizing them keeps behavior predictable and avoids redundant work.

You can add as many hooks as you need inside the <PlayerHooks /> component.

Components

PlayerHooks

A memoized component that centralizes all state management hooks. This component should be placed once at the top level of your player, inside <MediaProvider />.

Basic Usage

import React from "react"

import { usePlayerStates } from "@/hooks/limeplay/use-player"
import { useShakaPlayer } from "@/hooks/limeplay/use-shaka-player"
import { useVolumeStates } from "@/hooks/limeplay/use-volume"
import { useTimelineStates } from "@/hooks/limeplay/use-timeline"

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

  return null
})