Player Hooks
Central, top-level memoized hooks for component-level state management
Installation
Add in your existing MediaPlayer component
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.