@overlap.ai/react-video-subtitles 1.0.2

package/dist/test/TestComponent.d.ts

@@ -0,0 +1 @@
+export declare const TestComponent: () => import("react/jsx-runtime").JSX.Element;

package/dist/test/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/utils/loadSubtitlePresets.d.ts

@@ -0,0 +1 @@
+export declare const loadSubtitlePresets: () => Promise<any[]>;

package/dist/types/components.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleConfig } from './subtitles';
+export interface SubtitleTextProps {
+    text: string;
+    style: StyleConfig;
+    frame: number;
+    startFrame: number;
+    words?: Array<{
+        word: string;
+        start: number;
+        end: number;
+    }>;
+    fps: number;
+    animationStyle?: string;
+    randomColors?: StyleConfig['randomColors'];
+    highlightWords?: string[];
+    highlightWordsColor?: string;
+}
+export type SubtitleComponent = React.ComponentType<SubtitleTextProps> | React.MemoExoticComponent<React.ComponentType<SubtitleTextProps>>;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export type { StyleConfig, SubtitlesProps, Phrase } from './subtitles';
+export type { SubtitleComponent, SubtitleTextProps } from './components';

package/dist/types/subtitles.d.ts

@@ -0,0 +1,83 @@
+export interface Phrase {
+    start: number;
+    end: number;
+    text: string;
+    words?: any[];
+    startFrame?: number;
+    durationInFrames?: number;
+    subType?: string;
+}
+export interface StyleConfig {
+    name: string;
+    captionPosition: "bottom" | "middle";
+    amplifiedColor: string;
+    amplifiedOpacity?: string;
+    amplifySpokenWords: boolean;
+    fontFamily: string;
+    fontWeight: string;
+    fontColor: string;
+    fontSize: string;
+    textCase: string;
+    outlineColor: string;
+    outlineWidth: string;
+    outlineStyle?: string;
+    shadowColor: string;
+    shadowBlur: string;
+    shadowOffsetX: string;
+    shadowOffsetY: string;
+    shadowEnabled?: boolean;
+    shadowIntensity?: number;
+    backgroundColor?: string;
+    backgroundOpacity?: string | number;
+    backgroundPadding?: string | number;
+    backgroundPaddingX?: string | number;
+    backgroundPaddingY?: string | number;
+    backgroundBorderRadius?: string | number;
+    backgroundFillStyle?: "wrap" | "none";
+    textSpacing?: string | number;
+    animationStyle?: string;
+    isItalic?: boolean;
+    shinyWordHighlight?: boolean;
+    shinySegmentHighlight?: boolean;
+    verticalStretch?: string | number;
+    opacity?: string | number;
+    textHighlightPersists?: boolean;
+    currentWordBlock?: boolean;
+    currentWordBlockBorderRadius?: string | number;
+    currentWordBlockBackgroundColor?: string;
+    currentWordBlockOpacity?: string | number;
+    currentWordBlockPadding?: string | number;
+    amplifyOpacityTransitionDuration?: string;
+    randomColors?: {
+        enabled?: boolean | string;
+        colors?: Array<{
+            type: string;
+            color: string;
+        }>;
+        avoidFillers?: boolean;
+        pctApplied?: number;
+        randomWordCountRange?: [number, number];
+    };
+    amplifiedColors?: Array<{
+        type: string;
+        colors: string[];
+        angle?: number;
+    }>;
+}
+export interface SubtitlesProps {
+    phrases: Phrase[];
+    maxCharsPerLine?: number;
+    styleConfig: StyleConfig;
+    x: number;
+    y: number;
+    currentFrame: number;
+    currentTime: number;
+    fps: number;
+    startTime?: number;
+    endTime?: number;
+    highlightWords?: string[];
+    highlightWordsColor?: string;
+    width: number;
+    height: number;
+    devMode?: boolean;
+}

package/dist/utils/findPhrasesInRange.d.ts

@@ -0,0 +1,2 @@
+import { Phrase } from '../types/subtitles';
+export declare const findPhrasesInRange: (time: number, phrases: Phrase[]) => Phrase[];

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@overlap.ai/react-video-subtitles",
+  "version": "1.0.2",
+  "description": "A React component for rendering animated subtitles in videos",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "dist/styles",
+    "dist/fonts"
+  ],
+  "scripts": {
+    "build": "npx rollup -c",
+    "typecheck": "tsc --noEmit",
+    "test-build": "rm -rf react-video-subtitles-1.0.0.tgz && rm -rf dist && npm run build && npm pack && cd test-subtitles && npm uninstall react-video-subtitles && rm -rf node_modules && npm install && npm install ../react-video-subtitles-1.0.0.tgz && npm start",
+    "dev": "vite",
+    "test:build": "cd test-subtitles && npm start",
+    "test:both": "concurrently \"npm run dev\" \"npm run test:build\""
+  },
+  "peerDependencies": {
+    "framer-motion": ">=4.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@fontsource/inter": "^5.1.1",
+    "@remotion/player": "^3.3.103",
+    "react-router-dom": "^7.1.5",
+    "remotion": "^3.3.103"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.22.0",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@rollup/plugin-url": "^8.0.2",
+    "@types/jest": "^27.0.0",
+    "@types/node": "^22.13.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^8.0.0",
+    "firebase": "^10.14.1",
+    "postcss": "^8.4.0",
+    "rollup": "^3.0.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-url": "^3.0.1",
+    "tslib": "^2.3.0",
+    "typescript": "^4.9.0",
+    "vite": "^4.5.9"
+  },
+  "resolutions": {
+    "@types/react": "^18.0.0"
+  },
+  "keywords": [
+    "react",
+    "subtitles",
+    "video",
+    "animation",
+    "captions"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./fonts.css": "./dist/fonts.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ]
+}