Timeline Control
Slider control to control the media timeline. Composed with timeline state control
Installation
Install the component
npx shadcn add @limeplay/timeline-controlAdd Event & Action Bridge
Import the useTimelineStates hook in your existing PlayerHooks component.
import React from "react"
import { useShakaPlayer } from "@/hooks/limeplay/use-shaka-player"
import { useTimelineStates } from "@/hooks/limeplay/use-timeline"
export const PlayerHooks = React.memo(() => {
useShakaPlayer()
useTimelineStates()
return null
})Add the Store States
import {
createPlayerStore,
PlayerStore,
} from "@/hooks/limeplay/use-player"
import {
createTimelineStore,
TimelineStore,
} from "@/hooks/limeplay/use-timeline"
export type TypeMediaStore = PlayerStore &
TimelineStore & {}
export function createMediaStore(initProps?: Partial<CreateMediaStoreProps>) {
const mediaStore = create<TypeMediaStore>()((...etc) => ({
...createPlayerStore(...etc),
...createTimelineStore(...etc),
...initProps,
}))
return mediaStore
}Usage
- Compose the timeline slider and handle states
import { useMediaStore } from "@/components/limeplay/media-provider"
import * as TimelineSlider from "@/components/limeplay/timeline-control"
import { Duration, HoverTime } from "@/components/limeplay/timeline-labels"
export function TimelineSliderControl() {
return (
<div className="relative w-full grow">
<TimelineSlider.Root className="focus-area -focus-area-x-2 -focus-area-y-14">
<TimelineSlider.Track className="overflow-hidden">
<TimelineSlider.Progress />
<TimelineSlider.Buffered variant="combined" />
</TimelineSlider.Track>
{/* Thumb to Seek */}
<TimelineSlider.Thumb
showWithHover
className={"absolute h-8 w-px rounded-full bg-lp-accent/60"}
/>
{/* Custom Thumb */}
<TimelineSlider.Thumb
showWithHover
className={"top-auto! bottom-[calc(100%+16px)] flex h-auto w-fit bg-transparent text-xs font-medium"}
>
<HoverTime />
<Duration className="text-lp-accent/60" />
</TimelineSlider.Thumb>
</TimelineSlider.Root>
</div>
)
}- Place the slider inside the
BottomControlscomponent.
<Layout.ControlsContainer>
<BottomControls>
<TimelineSliderControl />
</BottomControls>
</Layout.ControlsContainer>