Seek Control
Controls for seeking forward or backward in media playback
Installation
npx shadcn add @limeplay/seek-controlsReady to Use
The SeekControl component uses the useSeek hook internally, which only requires the MediaProvider context. No additional store setup is needed as seeking is a direct action on the media element.
Example Usage
- Design seek controls with icons and offset values.
"use client"
import {
CaretCircleDoubleLeftIcon,
CaretCircleDoubleRightIcon,
} from "@phosphor-icons/react"
import { Button } from "@/components/ui/button"
import { SeekControl } from "@/components/limeplay/seek-controls"
export function SeekGroupControl() {
return (
<div className="flex items-center gap-2">
<SeekControl offset={-10} asChild>
<Button variant="ghost" size="icon">
<CaretCircleDoubleLeftIcon />
</Button>
</SeekControl>
<SeekControl offset={10} asChild>
<Button variant="ghost" size="icon">
<CaretCircleDoubleRightIcon />
</Button>
</SeekControl>
</div>
)
}- Use the component in your player.
<SeekGroupControl />Understanding
The SeekControl component provides seek functionality for the media player.