useSeekableRange()

useSeekableRange(): null | { startTime: number; endTime: number; }

Returns the current seekable range of the media in milliseconds.

This hook provides a reactive way to observe changes in the player's seekable range — i.e., the portion of the content that can be navigated to via seeking.

Behavior

• LIVE: Returns an object representing the seekable time window relative to the epoch, e.g. { startTime, endTime }, where both values are in milliseconds since the epoch. This range moves forward over time as the live broadcast continues.
• VOD: Returns a static range of [0, duration], representing the full content length.

Notes

• The seekable range is useful for implementing scrubbers or timelines that work across both VOD and LIVE playback modes.
• For LIVE streams with DVR functionality, startTime corresponds to the oldest available segment in the buffer, while endTime indicates the current live edge.
• May return null if the range is not yet available or the source does not support seeking.

⚠️ Must be used within a PlayerProvider or AVPlayerViewControllerProvider component.

Returns

null | { startTime: number; endTime: number; }

{{ startTime: number, endTime: number } | null} Seekable range in milliseconds, or null if unknown or not applicable.

Example

import React from 'react';
import { View, Text } from 'react-native';
import { useSeekableRange, useLive } from '@castlabs/react-native-prestoplay';

export default function SeekableInfo() {
  const isLive = useLive();
  const range = useSeekableRange();

  if (!range) return <Text>Seekable range not available</Text>;

  return (
    <View>
      {isLive ? (
        <>
          <Text>Start: {new Date(range.startTime).toLocaleTimeString()}</Text>
          <Text>End: {new Date(range.endTime).toLocaleTimeString()}</Text>
        </>
      ) : (
        <Text>VOD range: 0 → {range.endTime} ms</Text>
      )}
    </View>
  );
}