Components
Timeline Labels
Timeline Labels provide semantic time display components for media players. These components automatically format time based on duration and provide proper accessibility attributes.
Installation
- Install the
timeline-labelscomponent:
npx shadcn add https://limeplay.winoffrg.dev/r/styles/default/timeline-labels.json- Add Event & Action Bridge
Import the useMediaStates hook in your existing PlayerHooks component. This hook setups the required events and action bridge for the playback state control to work.
import React from "react"
import { useShakaPlayer } from "@/registry/default/hooks/use-shaka-player"
import { useTimelineStates } from "@/registry/default/hooks/use-timeline"
export const PlayerHooks = React.memo(() => {
useShakaPlayer()
useTimelineStates()
return null
})- Add the Store States
import {
createPlayerRootStore,
PlayerRootStore,
} from "@/registry/default/hooks/use-player-root-store"
import {
createTimelineStore,
TimelineStore,
} from "@/registry/default/hooks/use-timeline"
export type TypeMediaStore = PlayerRootStore &
TimelineStore & {}
export function createMediaStore(initProps?: Partial<CreateMediaStoreProps>) {
const mediaStore = create<TypeMediaStore>()((...etc) => ({
...createPlayerRootStore(...etc),
...createTimelineStore(...etc),
...initProps,
}))
return mediaStore
}Components
<Elapsed />component shows current playback time<Remaining />component shows remaining time (with minus sign)<Duration />component shows total media duration<HoverTime />component shows time at hover position on timeline