@overlap.ai/react-video-subtitles 1.0.2

package/README.md

@@ -0,0 +1,94 @@
+# 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
+

package/dist/components/SubtitleText.d.ts

@@ -0,0 +1,2 @@
+export const SubtitleText: React.NamedExoticComponent<object>;
+import React from "react";

package/dist/components/Subtitles.d.ts

@@ -0,0 +1,2 @@
+import { SubtitlesProps } from '../types/subtitles.js';
+export declare const Subtitles: (props: SubtitlesProps) => import("react/jsx-runtime").JSX.Element;

package/dist/hooks/fontLoader.d.ts

@@ -0,0 +1 @@
+export function loadDocumentFonts(fontFamily: any): Promise<void>;

package/dist/hooks/useAdjustedPhrases.d.ts

@@ -0,0 +1,10 @@
+export function useAdjustedPhrases(subtitlesData: any, maxCharsPerLine: any, fps: any, segmentData?: any[]): {
+    startFrame: number;
+    endFrame: number;
+    durationInFrames: number;
+    text: string;
+    words: any[];
+    start: any;
+    end: any;
+    segmentIndex: number;
+}[];

package/dist/hooks/useAdjustedPosition.d.ts

@@ -0,0 +1,4 @@
+export function useAdjustedPosition(y: any, faceData: any): {
+    currentFaceEvent: any;
+    adjustedY: any;
+};

package/dist/hooks/useStyleConfig.d.ts

@@ -0,0 +1,2 @@
+import { StyleConfig } from '../types/subtitles';
+export declare const useStyleConfig: (subtitleStyle: string, baseStyle: StyleConfig, textStyle: StyleConfig) => StyleConfig;

package/dist/hooks/useTextStyle.d.ts

@@ -0,0 +1,41 @@
+export function useTextStyle(preset: any, x: any, adjustedY: any, videoWidth: any): {
+    position: string;
+    left: string;
+    top: string;
+    transform: string;
+    fontFamily: any;
+    fontSize: string;
+    fontWeight: any;
+    color: any;
+    amplifiedColor: any;
+    amplifiedColors: any;
+    amplifySpokenWords: any;
+    textTransform: any;
+    fontStyle: string;
+    textAlign: string;
+    letterSpacing: string;
+    backgroundColor: any;
+    backgroundPadding: string;
+    backgroundBorderRadius: any;
+    verticalStretch: any;
+    transformOrigin: string;
+    width: string;
+    maxWidth: string;
+    whiteSpace: string;
+    overflow: string;
+    outlineColor: any;
+    outlineWidth: any;
+    filter: string;
+    display: string;
+    textHighlightPersists: any;
+    amplifiedOpacity: any;
+    unAmplifiedOpacity: any;
+    currentWordBlock: any;
+    currentWordBlockBackgroundColor: any;
+    currentWordBlockOpacity: any;
+    currentWordBlockPadding: any;
+    currentWordBlockBorderRadius: any;
+    amplifyOpacityTransitionDuration: any;
+    textShadow: string;
+    shadowIntensity: any;
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import { Subtitles } from './components/Subtitles';
+import { SubtitleText } from './components/SubtitleText';
+import { useStyleConfig } from './hooks/useStyleConfig';
+import { useAdjustedPosition } from './hooks/useAdjustedPosition';
+import { useAdjustedPhrases } from './hooks/useAdjustedPhrases';
+import { useTextStyle } from './hooks/useTextStyle';
+import subtitlePresets from './constants/subtitle-presets.json';
+import type { StyleConfig, SubtitlesProps, Phrase, SubtitleComponent, SubtitleTextProps } from './types';
+export { Subtitles, SubtitleText, useStyleConfig, useAdjustedPosition, useAdjustedPhrases, useTextStyle, subtitlePresets, };
+export type { StyleConfig, SubtitlesProps, Phrase, SubtitleComponent, SubtitleTextProps, };