Captions
Text track container and toggle control for captions/subtitles.
Installation
npx shadcn add @limeplay/captionsRequires captionsFeature registered in your
createMediaKit.
Usage
CaptionsContainer
Place the container in your player layout. It registers itself with Shaka Player and renders text tracks as an overlay.
import { CaptionsContainer } from "@/components/limeplay/captions"
;<Layout.PlayerContainer>
<Media as="video" />
<Layout.ControlsContainer>
<CaptionsContainer />
{/* Controls */}
</Layout.ControlsContainer>
</Layout.PlayerContainer>Custom styling and font scale:
<CaptionsContainer className="px-4 pb-4" fontScale={1.2} />CaptionsControl
Toggle button for caption visibility. Auto-disables when no text tracks are available.
import { ClosedCaptioningIcon } from "@phosphor-icons/react"
import { Button } from "@/components/ui/button"
import { useCaptionsStore } from "@/hooks/limeplay/use-captions"
import { CaptionsControl } from "@/components/limeplay/captions"
export function CaptionsButton() {
const visible = useCaptionsStore((s) => s.visible)
return (
<Button size="icon" variant="ghost" asChild>
<CaptionsControl>
<ClosedCaptioningIcon weight={visible ? "fill" : "regular"} size={18} />
</CaptionsControl>
</Button>
)
}API Reference
CaptionsContainer
Prop
Type
CaptionsControl
Prop
Type