use-timeline
Feature for managing playback position, seeking, and buffered ranges.
Installation
npx shadcn add @limeplay/use-timelineRegister the feature:
"use client"
import { timelineFeature } from "@/hooks/limeplay/use-timeline"
createMediaKit({
features: [..., timelineFeature()] as const,
})Store
Access via useTimelineStore(selector):
import { useTimelineStore } from "@/hooks/limeplay/use-timeline"
const currentTime = useTimelineStore((s) => s.currentTime)
const duration = useTimelineStore((s) => s.duration)
const progress = useTimelineStore((s) => s.progress)
const seek = useTimelineStore((s) => s.seek)State
| Field | Type | Description |
|---|---|---|
currentTime | number | Current playback time (seconds) |
duration | number | Total duration (seconds) |
progress | number | Playback progress (0–1) |
hoveringTime | number | Time at hover position (seconds) |
isHovering | boolean | Whether user is hovering the timeline |
isLive | boolean | Whether stream is live |
liveLatency | number | null | Seconds behind live edge |
buffered | BufferedRange[] | Array of buffered time ranges |
Actions
| Method | Description |
|---|---|
seek(time) | Seek to specific time |
setHoveringTime(time) | Set the hover preview time |
setIsHovering(isHovering) | Set hover state |
processBufferedRanges(ranges, variant?) | Process ranges for UI rendering |
Buffered Range Variants
processBufferedRanges supports three display modes:
"default"— Raw buffered ranges as-is"combined"— Merged into a single range"from-zero"— Extends first range start to zero
Live Stream Support
For live streams, the timeline uses Shaka Player's seekRange() for proper DVR seeking. Progress is calculated relative to the seek window, and liveLatency tracks how far behind the live edge.
Events
| Event | Payload | When |
|---|---|---|
timeupdate | { currentTime, duration, progress } | Position updates (polled) |
durationchange | { duration } | Duration changes |
seek | { from, to } | User seeks |
API Reference
Prop
Type