React-native-video-frame-seekbar NPM

react-native-video-frame-seekbar

A React Native component that allows users to seek through video frames and select a range directly on the seekbar. This library is designed to enhance video playback experience by providing a visual frame timeline and selection capability.

Features

Frame Seeking: Navigate through video by viewing frames on the seekbar.
Range Selection: Select a specific range within the video directly from the seekbar.

Installation

npm install react-native-video-frame-seekbar
# or
yarn add react-native-video-frame-seekbar

Usage

To use this component, you need to provide frame images separately. The library does not include frame extraction functionality, but you can use ffmpeg-kit-react-native for extracting frames.

Example

import React, { useCallback } from 'react';
import { Button, SafeAreaView } from 'react-native';
import VideoFrameSeekbar from 'react-native-video-frame-seekbar';

// Your app component
function App() {
    // Component logic here...
    return (
        <SafeAreaView>
            {/* Video and VideoFrameSeekbar components */}
        </SafeAreaView>
    );
}

Props

The component accepts the following props:

Prop	Type	Description
`totalDuration`	`number`	Total duration of the video in milliseconds.
`currentTimeProvider`	`() => Promise<number>`	Function to provide the current time of the video.
`frameProvider`	`(milliseconds: number) => string \\| null`	Function to provide the frame image source for a given time.
`size`	`number?`	Optional. Size of the seekbar.
`onStartDrag`	`() => void`	Optional. Callback when dragging starts.
`onDrag`	`(position: number) => void`	Optional. Callback during dragging.
`onEndDrag`	`(position: number) => void`	Optional. Callback when dragging ends.
`select`	`Select \\| null`	Optional. Object for range selection.
`thumbsDragStart`	`() => void`	Optional. Callback when thumb dragging starts.
`thumbsDrag`	`(position: number) => void`	Optional. Callback during thumb dragging.
`thumbsDragEnd`	`({start: number; end: number}, target: 'START' \\| 'END') => void`	Optional. Callback when thumb dragging ends.

Note: It's recommended to use useCallback for the callback props to avoid unnecessary re-renders.

Demo

Action	Demo
Seeking
Range Selection

License

This project is licensed under the MIT License - see the LICENSE file for details.

react native video frame seekbar thumbnail preview navigation

0.0.2

3 months ago

0.0.1

3 months ago