npm package: @overlap.ai/react-video-subtitles
Description: A React component for rendering animated subtitles in videos
Author: Your Name
Latest version: 2.3.8

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

## Table of Contents
- [Installation](#installation)
- [Quick Start](#quick-start)
- [Core Concepts](#core-concepts)
- [Props Reference](#props-reference)
- [Style Configuration](#style-configuration)
- [Highlighting Words](#highlighting-words)
- [Adding Custom Fonts](#adding-custom-fonts)
- [Development](#development)
- [Testing](#testing)

## Installation
To install the package, run:
```bash
npm install react-video-subtitles
```

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

```jsx
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:
```html
<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:
```bash
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:
```bash
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