Limeplay - Open Source Video Player UI ComponentsLimeplay

use-seek

Hook for seeking forward or backward in media playback

Installation

npx shadcn add @limeplay/use-seek

Example Usage

Use the useSeek() hook to control seeking in your components.

components/player/seek-buttons.tsx
import { useSeek } from "@/hooks/limeplay/use-seek"

export function SeekButtons() {
  const { seek } = useSeek()

  return (
    <div>
      <button onClick={() => seek(-10)}>Back 10s</button>
      <button onClick={() => seek(10)}>Forward 10s</button>
      <button onClick={() => seek(-30)}>Back 30s</button>
      <button onClick={() => seek(30)}>Forward 30s</button>
    </div>
  )
}

Understanding

The use-seek hook provides direct seeking functionality following a simplified Action Bridge pattern:

  • Action Only: seek(offset) directly modifies currentTime on the native media element
  • No Event Bridge: Unlike volume or playback hooks, seeking doesn't require state synchronization since timeline state is tracked separately by useTimelineStates()

The hook automatically:

  • Clamps seek positions to valid ranges (0 to media duration)
  • Resets the idle state to keep player controls visible after seeking
  • Handles edge cases like undefined duration gracefully

API Reference

useSeek()

Returns control functions for seeking within the media.

Returns

Prop

Type

On this page