Limeplay - Open Source Video Player UI ComponentsLimeplay

use-asset

Higher-order feature combining player and playlist for managing media assets.

Installation

npx shadcn add @limeplay/use-asset

Register the feature (requires playerFeature, playlistFeature, and playbackFeature):

lib/media.ts
"use client"

import { assetFeature } from "@/hooks/limeplay/use-asset"

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

useAsset Hook

import { useAsset, type Asset } from "@/hooks/limeplay/use-asset"

const { loadAsset, loadPlaylist, next, previous, hasNext, currentItem } =
  useAsset({
    onAssetLoaded: (asset) => console.log("Loaded:", asset.title),
    onLoadError: (asset, error, ctx) => {
      console.error("Failed:", asset.title, error)
      return "skip" // or "retry" or "stop"
    },
  })

// Load a single asset
loadAsset({
  id: "movie-1",
  src: "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd",
  title: "Angel One",
})

// Load a playlist
loadPlaylist([asset1, asset2, asset3])

Asset Interface

FieldTypeRequiredDescription
idstringYesUnique identifier
srcstringYesMedia source URL
titlestringNoDisplay title
descriptionstringNoDescription
posterstringNoPoster image URL
configshaka.extern.PlayerConfigurationNoPer-asset Shaka config

Options

Prop

Type

Returns

Prop

Type

useAsset orchestrates usePlayer and usePlaylist — it automatically loads assets when the playlist advances, handles preloading, auto-advances on playback end, and provides error recovery.

On this page