Seek Control

Installation

npx shadcn add @limeplay/seek-control

Example Usage

1. 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>
  )
}

2. Use the component in your player.

<SeekGroupControl />

Understanding

The SeekControl component provides seek functionality for the media player. Unlike volume or playback controls, seeking is a purely action-based operation:

• Action Bridge: Uses useSeek() hook to access seek(offset) which directly modifies currentTime on the native media element
• No Event Bridge: No state synchronization is needed since currentTime is already tracked by the timeline hooks

The component automatically handles edge cases like clamping seek positions to valid ranges (0 to duration) and resets the idle state to keep controls visible after seeking.

Components

SeekControl

The main component for seeking forward or backward. It supports the Slot pattern (asChild prop) for composition and includes automatic ARIA labels based on the offset value.

API Reference