Limeplay - Open Source Video Player UI ComponentsLimeplay

use-captions

Feature for managing captions and text tracks via Shaka Player.

Installation

npx shadcn add @limeplay/use-captions

Register the feature:

lib/media.ts
"use client"

import { captionsFeature } from "@/hooks/limeplay/use-captions"

createMediaKit({
  features: [..., captionsFeature()] as const,
})

Store

Access via useCaptionsStore(selector):

import { useCaptionsStore } from "@/hooks/limeplay/use-captions"

const visible = useCaptionsStore((s) => s.visible)
const tracks = useCaptionsStore((s) => s.tracks)
const activeTrack = useCaptionsStore((s) => s.activeTrack)

State

FieldTypeDescription
visiblebooleanWhether captions are visible
activeTrackshaka.extern.TextTrack | nullCurrently active text track
tracksshaka.extern.TextTrack[]Available text tracks
containerElementHTMLDivElement | nullCaptions render container

Actions

MethodDescription
toggleVisibility()Toggle caption visibility
setContainerElement(el)Set the captions container DOM element

The feature auto-detects text tracks from the Shaka Player instance and selects a default based on the device language.

On this page