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
npx shadcn add @limeplay/timeline-labelsAdd Event & Action Bridge
Import the useTimelineStates hook in your existing PlayerHooks component.
import React from "react"
import { usePlaybackStates } from "@/hooks/limeplay/use-playback"
import { usePlayerStates } from "@/hooks/limeplay/use-player"
import { useTimelineStates } from "@/hooks/limeplay/use-timeline"
export const PlayerHooks = React.memo(() => {
usePlayerStates()
usePlaybackStates()
useTimelineStates()
return null
})Add the Store States
import { createPlaybackStore, PlaybackStore } from "@/hooks/limeplay/use-playback"
import { createPlayerStore, PlayerStore } from "@/hooks/limeplay/use-player"
import {
createTimelineStore,
TimelineStore,
} from "@/hooks/limeplay/use-timeline"
export type TypeMediaStore = PlaybackStore &
PlayerStore &
TimelineStore &
{}
export function createMediaStore(initProps?: Partial<CreateMediaStoreProps>) {
const mediaStore = create<TypeMediaStore>()((...etc) => ({
...createPlaybackStore(...etc),
...createPlayerStore(...etc),
...createTimelineStore(...etc),
...initProps,
}))
return mediaStore
}Example Usage
- Compose the labels
"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { useMediaStore } from "@/components/limeplay/media-provider"
import {
Duration,
Elapsed,
HoverTime,
LiveLatency,
Remaining,
} from "@/components/limeplay/timeline-labels"
export function TimelineSliderControl() {
const [showRemaining, setShowRemaining] = useState(false)
const isLive = useMediaStore((state) => state.isLive)
return (
<div className="my-auto flex grow items-center gap-3 select-none">
{!isLive && <Elapsed className="text-xs font-medium" />}
{!isLive && (
<Button
variant="ghost"
size="sm"
onClick={() => {
setShowRemaining(!showRemaining)
}}
aria-label={
showRemaining ? "Show total duration" : "Show remaining time"
}
aria-pressed={showRemaining}
>
{showRemaining ? (
<Remaining className="text-xs font-medium" />
) : (
<Duration className="text-xs font-medium" />
)}
</Button>
)}
</div>
)
}Understanding
Timeline Labels components use the useTimeline() hook to access timeline state from the media store.