@overlap.ai/react-video-subtitles

React Video Subtitles

A powerful and flexible React component for rendering customizable video subtitles with advanced styling and animation capabilities.

Table of Contents

• Installation
• Quick Start
• Core Concepts
• Props Reference
• Style Configuration
• Highlighting Words
• Adding Custom Fonts
• Development
• Testing

Installation

To install the package, run:

npm install react-video-subtitles

Quick Start

To get started, import the Subtitles component into your React application and provide the necessary props.

import { Subtitles } from 'react-video-subtitles';

Core Concepts

The main components of the subtitle system include:

• Phrase Interface: Represents a single subtitle phrase with timing and text.
• StyleConfig Interface: Defines how subtitles are styled and displayed.
• Subtitles Component: The main component that renders the subtitles based on the provided props.

Props Reference

SubtitlesProps

The SubtitlesProps interface defines the props that can be passed to the Subtitles component:

• phrases: Phrase[] - An array of subtitle phrases to display.
• maxCharsPerLine: number (optional) - Maximum characters allowed per line of subtitle text.
• styleConfig: StyleConfig - Configuration object for styling the subtitles.
• x: number - The x-coordinate for positioning the subtitles.
• y: number - The y-coordinate for positioning the subtitles.
• currentFrame: number - The current frame of the video.
• currentTime: number - The current time of the video in seconds.
• fps: number - Frames per second of the video.
• startTime: number (optional) - The start time for displaying subtitles.
• endTime: number (optional) - The end time for displaying subtitles.
• highlightWords: string[] (optional) - An array of words to highlight in the subtitles.
• highlightWordsColor: string (optional) - The color used for highlighting words.
• width: number - The width of the subtitle container.
• height: number - The height of the subtitle container.
• devMode: boolean (optional) - Enables development mode features.

Phrase Interface

The Phrase interface defines the structure of a subtitle phrase:

• start: number - The start time of the phrase in seconds.
• end: number - The end time of the phrase in seconds.
• text: string - The text of the subtitle.
• words: any[] (optional) - An array of words in the phrase for additional processing.
• startFrame: number (optional) - The frame at which the phrase starts.
• durationInFrames: number (optional) - The duration of the phrase in frames.
• subType: string (optional) - The subtype of the subtitle (if applicable).

Style Configuration

To add a new subtitle format, you need to modify the StyleConfig interface. The Firebase collection for storing subtitle styles is called company-subtitles.

Highlighting Words

To highlight a word in the subtitles, wrap the word in HTML tags like this:

<h>word</h>

Adding Custom Fonts

To add custom fonts, modify the fontLoader.js file. This file contains the logic for loading fonts based on the specified font family.

Development

To test out the subtitles, run:

npm run start

This command opens a test suite where you can see every subtitle format in Firebase, preview them, and check if any changes you made break anything or if you need to add fonts.

Testing

To see if your package builds correctly, run:

npm run test-build

This command will build the package and run the test suite in the test-subtitles folder, as opposed to the start command which runs it in the dev server