use-asset
Higher-order hook combining player and playlist for managing media assets
Installation
npx shadcn add @limeplay/use-assetExample Usage
import { useAsset, Asset } from "@/hooks/limeplay/use-asset"
export function AssetLoader() {
const { loadAsset, loadPlaylist } = useAsset()
const handlePlayMovie = () => {
const asset: Asset = {
id: "movie-1",
src: "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd",
title: "Angel One",
description: "A demo movie"
}
loadAsset(asset)
}
return <button onClick={handlePlayMovie}>Play Movie</button>
}Understanding
use-asset is an opinionated hook that integrates use-player (for Shaka Player), use-playback (for media controls), and use-playlist (for queue management) into a single logical unit.
It defines an Asset interface and handles the orchestration of loading an asset into the player when the playlist advances.
It automatically handles:
- Loading: Calls Shaka Player's load method when
use-playlistrequests a new item. - Preloading: Can preload the next item in the playlist.
- Auto-Advance: Moves to the next item when playback ends.
API Reference
useAsset()
Returns
Prop
Type
Types
Asset
Prop
Type