initial commit
This commit is contained in:
Daniil
@@ -0,0 +1,17 @@
|
|||||||
|
node_modules
|
||||||
|
npm-debug.log
|
||||||
|
.yarn*
|
||||||
|
.pnpm-debug.log
|
||||||
|
.git
|
||||||
|
.gitignore
|
||||||
|
.DS_Store
|
||||||
|
.cache
|
||||||
|
coverage
|
||||||
|
dist
|
||||||
|
build
|
||||||
|
Dockerfile
|
||||||
|
Dockerfile.*
|
||||||
|
docker-compose.yml
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
**/*.tsbuildinfo
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
# Server Configuration
|
||||||
|
PORT=3001
|
||||||
|
HOST=0.0.0.0
|
||||||
|
|
||||||
|
# S3/MinIO Configuration
|
||||||
|
S3_ACCESS_KEY=minioadmin
|
||||||
|
S3_SECRET_KEY=minioadmin
|
||||||
|
S3_BUCKET_NAME=coffee-bucket
|
||||||
|
S3_ENDPOINT_URL=http://localhost:9000
|
||||||
|
|
||||||
|
# Redis (required for BullMQ render queue)
|
||||||
|
REDIS_URL=redis://localhost:6379
|
||||||
|
|
||||||
|
# Remotion Configuration
|
||||||
|
REMOTION_COMPOSITION_ID=CaptionedVideo
|
||||||
|
MAX_CONCURRENT_RENDERS=2
|
||||||
+11
@@ -0,0 +1,11 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.remotion
|
||||||
|
.env
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
|
tmp
|
||||||
|
*.tmp
|
||||||
|
.cache
|
||||||
|
build
|
||||||
|
out
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
# AGENTS.md — Coffee Project Remotion Service
|
||||||
|
|
||||||
|
Primary workflow guidance lives in `../AGENTS.md`.
|
||||||
|
|
||||||
|
Use `./CLAUDE.md` as the service-specific source of truth for:
|
||||||
|
|
||||||
|
- Remotion service commands
|
||||||
|
- server/composition architecture
|
||||||
|
- rendering constraints and service gotchas
|
||||||
|
|
||||||
|
OpenCode/Codex notes:
|
||||||
|
|
||||||
|
- Keep `../AGENTS.md` as the workflow and delegation source of truth.
|
||||||
|
- The previously referenced `.codex/services/remotion.md` guide does not exist. Use `CLAUDE.md` until a dedicated Codex service guide is added.
|
||||||
|
- Do not rely on `.claude/` directory contents.
|
||||||
+53
@@ -0,0 +1,53 @@
|
|||||||
|
# syntax=docker/dockerfile:1.7-labs
|
||||||
|
FROM oven/bun:1.3.10 AS base
|
||||||
|
|
||||||
|
ENV APP_HOME=/app \
|
||||||
|
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 \
|
||||||
|
REMOTION_PUPPETEER_NO_SANDBOX=1 \
|
||||||
|
NODE_ENV=production
|
||||||
|
|
||||||
|
WORKDIR ${APP_HOME}
|
||||||
|
|
||||||
|
RUN --mount=type=cache,target=/var/cache/apt,sharing=locked \
|
||||||
|
--mount=type=cache,target=/var/lib/apt,sharing=locked \
|
||||||
|
apt-get update && \
|
||||||
|
DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends \
|
||||||
|
ca-certificates \
|
||||||
|
ffmpeg \
|
||||||
|
chromium \
|
||||||
|
libglib2.0-0 \
|
||||||
|
libnss3 \
|
||||||
|
libatk1.0-0 \
|
||||||
|
libatk-bridge2.0-0 \
|
||||||
|
libdrm2 \
|
||||||
|
libxkbcommon0 \
|
||||||
|
libgbm1 \
|
||||||
|
fonts-noto-color-emoji \
|
||||||
|
curl \
|
||||||
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
|
FROM base AS deps
|
||||||
|
WORKDIR ${APP_HOME}
|
||||||
|
COPY package.json bun.lock ./
|
||||||
|
RUN NODE_ENV=development bun install --frozen-lockfile
|
||||||
|
|
||||||
|
FROM base AS runner
|
||||||
|
WORKDIR ${APP_HOME}
|
||||||
|
|
||||||
|
COPY --from=deps ${APP_HOME}/node_modules ./node_modules
|
||||||
|
COPY package.json bun.lock ./
|
||||||
|
COPY tsconfig.json remotion.config.ts ./
|
||||||
|
COPY public ./public
|
||||||
|
COPY src ./src
|
||||||
|
COPY server ./server
|
||||||
|
|
||||||
|
RUN mkdir -p out
|
||||||
|
|
||||||
|
# Reuse the existing bun:bun user (UID/GID 1000) from the base image
|
||||||
|
RUN chown -R bun:bun /app
|
||||||
|
|
||||||
|
USER bun
|
||||||
|
|
||||||
|
EXPOSE 3001
|
||||||
|
|
||||||
|
CMD ["bun", "run", "server"]
|
||||||
@@ -0,0 +1,194 @@
|
|||||||
|
# Remotion Render Service
|
||||||
|
|
||||||
|
A high-performance video rendering service built with ElysiaJS and Remotion. This service accepts S3 URLs for input videos, renders them using Remotion compositions, and returns S3 URLs for the rendered outputs.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **S3 Integration**: Direct integration with S3-compatible storage (MinIO)
|
||||||
|
- **Remotion Rendering**: Leverages Remotion for high-quality video rendering
|
||||||
|
- **ElysiaJS Server**: Fast, type-safe API with automatic validation
|
||||||
|
- **Bun Runtime**: Utilizes Bun for optimal performance
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
server/
|
||||||
|
├── server.ts # Main server entry point
|
||||||
|
├── shared/
|
||||||
|
│ └── config.ts # Global configuration
|
||||||
|
└── routers/
|
||||||
|
├── render_file/
|
||||||
|
│ ├── index.ts # Render endpoint
|
||||||
|
│ ├── service.ts # Render logic
|
||||||
|
│ ├── types.ts # Type definitions
|
||||||
|
│ └── constants.ts # Endpoint constants
|
||||||
|
└── services/
|
||||||
|
└── s3_storage/
|
||||||
|
├── index.ts # S3 service implementation
|
||||||
|
├── types.ts # Type definitions
|
||||||
|
├── utils.ts # Helper functions
|
||||||
|
└── constants.ts # Service constants
|
||||||
|
```
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
1. **Install Dependencies**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun install
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Configure Environment**
|
||||||
|
Copy `.env.example` to `.env` and fill in your configuration:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp .env.example .env
|
||||||
|
```
|
||||||
|
|
||||||
|
Required environment variables:
|
||||||
|
- `S3_ACCESS_KEY`: Your S3/MinIO access key
|
||||||
|
- `S3_SECRET_KEY`: Your S3/MinIO secret key
|
||||||
|
- `S3_BUCKET_NAME`: Target bucket name
|
||||||
|
- `S3_ENDPOINT_URL`: S3/MinIO endpoint URL
|
||||||
|
- `PORT`: Server port (default: 3001)
|
||||||
|
|
||||||
|
3. **Start the Server**
|
||||||
|
```bash
|
||||||
|
bun run server
|
||||||
|
```
|
||||||
|
|
||||||
|
## API Endpoints
|
||||||
|
|
||||||
|
### `POST /render/file`
|
||||||
|
|
||||||
|
Renders a video from an S3 input URL and returns the rendered output S3 URL.
|
||||||
|
|
||||||
|
**Request Body:**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"inputS3Url": "https://minio.example.com/bucket/input/video.mp4",
|
||||||
|
"compositionId": "Main",
|
||||||
|
"outputFormat": "mp4"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Response:**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"success": true,
|
||||||
|
"outputS3Url": "https://minio.example.com/bucket/rendered/output.mp4",
|
||||||
|
"metadata": {
|
||||||
|
"inputFile": "https://minio.example.com/bucket/input/video.mp4",
|
||||||
|
"outputFile": "https://minio.example.com/bucket/rendered/output.mp4",
|
||||||
|
"renderTime": 12500,
|
||||||
|
"fileSize": 5242880
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Error Response:**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"success": false,
|
||||||
|
"error": "Error message description"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### `GET /health`
|
||||||
|
|
||||||
|
Health check endpoint.
|
||||||
|
|
||||||
|
**Response:**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"status": "healthy",
|
||||||
|
"uptime": 123.456,
|
||||||
|
"timestamp": "2024-01-01T00:00:00.000Z"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### `GET /`
|
||||||
|
|
||||||
|
Service information endpoint.
|
||||||
|
|
||||||
|
**Response:**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"service": "Remotion Render Service",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"status": "running",
|
||||||
|
"timestamp": "2024-01-01T00:00:00.000Z"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## S3 Storage Service
|
||||||
|
|
||||||
|
The S3 storage service provides a comprehensive interface for interacting with S3-compatible storage:
|
||||||
|
|
||||||
|
- `uploadFile()`: Upload files to S3
|
||||||
|
- `downloadFile()`: Download files from S3
|
||||||
|
- `getFileUrl()`: Generate presigned URLs
|
||||||
|
- `deleteFile()`: Remove files from S3
|
||||||
|
- `checkFileExists()`: Verify file existence
|
||||||
|
- `getFileInfo()`: Retrieve file metadata
|
||||||
|
- `getLocalCopy()`: Download file to temp location
|
||||||
|
- `uploadFromLocalPath()`: Upload from local filesystem
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
### Run in Development Mode
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun run server
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type Checking
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
The service follows a modular architecture:
|
||||||
|
|
||||||
|
1. **Server Layer** (`server.ts`): Main application setup and routing
|
||||||
|
2. **Router Layer** (`routers/`): Endpoint definitions and request handling
|
||||||
|
3. **Service Layer** (`services/`): Business logic and external integrations
|
||||||
|
4. **Shared Layer** (`shared/`): Global configuration and utilities
|
||||||
|
|
||||||
|
## Integration with Django Backend
|
||||||
|
|
||||||
|
This service is designed to work alongside the Django backend in `coffee_project_backend_v2`. The Django backend can make requests to this service to render videos stored in the shared MinIO storage.
|
||||||
|
|
||||||
|
Example Django integration:
|
||||||
|
|
||||||
|
```python
|
||||||
|
import requests
|
||||||
|
|
||||||
|
response = requests.post(
|
||||||
|
'http://localhost:3001/render/file',
|
||||||
|
json={
|
||||||
|
'inputS3Url': input_url,
|
||||||
|
'compositionId': 'Main',
|
||||||
|
'outputFormat': 'mp4'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
result = response.json()
|
||||||
|
if result['success']:
|
||||||
|
rendered_url = result['outputS3Url']
|
||||||
|
```
|
||||||
|
|
||||||
|
## Technologies
|
||||||
|
|
||||||
|
- **Bun**: Fast JavaScript runtime
|
||||||
|
- **ElysiaJS**: High-performance web framework
|
||||||
|
- **Remotion**: Programmatic video rendering
|
||||||
|
- **AWS SDK**: S3 client for storage operations
|
||||||
|
- **TypeScript**: Type-safe development
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
services:
|
||||||
|
remotion:
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
target: runner
|
||||||
|
command: >
|
||||||
|
sh -lc "NODE_ENV=development bun install --frozen-lockfile && bun run server"
|
||||||
|
restart: unless-stopped
|
||||||
|
env_file: .env
|
||||||
|
environment:
|
||||||
|
# Use Docker service aliases so generated URLs contain valid hostnames.
|
||||||
|
S3_ENDPOINT_URL: http://minio:9000
|
||||||
|
REDIS_URL: redis://redis:6379/0
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "curl", "-f", "http://localhost:3001/api/health"]
|
||||||
|
interval: 10s
|
||||||
|
timeout: 5s
|
||||||
|
retries: 5
|
||||||
|
start_period: 15s
|
||||||
|
ports:
|
||||||
|
- "127.0.0.1:3001:3001"
|
||||||
|
volumes:
|
||||||
|
- .:/app:cached
|
||||||
|
- remotion_node_modules:/app/node_modules
|
||||||
|
networks:
|
||||||
|
- backend
|
||||||
|
stdin_open: true
|
||||||
|
tty: true
|
||||||
|
deploy:
|
||||||
|
resources:
|
||||||
|
limits:
|
||||||
|
memory: 4g
|
||||||
|
cpus: "2"
|
||||||
|
reservations:
|
||||||
|
memory: 1g
|
||||||
|
cpus: "0.5"
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
remotion_node_modules:
|
||||||
|
|
||||||
|
networks:
|
||||||
|
backend:
|
||||||
|
external: true
|
||||||
|
name: cofee_backend_app-net
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
import { config } from "@remotion/eslint-config-flat";
|
||||||
|
|
||||||
|
export default config;
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
{
|
||||||
|
"name": "RemotionService",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "My Remotion video",
|
||||||
|
"repository": {},
|
||||||
|
"license": "UNLICENSED",
|
||||||
|
"private": true,
|
||||||
|
"packageManager": "bun@1.3.10",
|
||||||
|
"dependencies": {
|
||||||
|
"@aws-sdk/client-s3": "^3.892.0",
|
||||||
|
"@aws-sdk/lib-storage": "^3.1009.0",
|
||||||
|
"@aws-sdk/s3-request-presigner": "^3.892.0",
|
||||||
|
"@elysiajs/openapi": "^1.4.14",
|
||||||
|
"@elysiajs/swagger": "^1.3.1",
|
||||||
|
"@remotion/bundler": "4.0.435",
|
||||||
|
"@remotion/cli": "4.0.435",
|
||||||
|
"@remotion/google-fonts": "4.0.435",
|
||||||
|
"@remotion/media": "4.0.435",
|
||||||
|
"@remotion/media-parser": "4.0.435",
|
||||||
|
"@remotion/renderer": "4.0.435",
|
||||||
|
"bullmq": "^5.71.0",
|
||||||
|
"elysia": "^1.4.27",
|
||||||
|
"lodash": "^4.17.23",
|
||||||
|
"react": "19.2.4",
|
||||||
|
"react-dom": "19.2.4",
|
||||||
|
"remotion": "4.0.435",
|
||||||
|
"uuid": "^13.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@remotion/eslint-config-flat": "4.0.435",
|
||||||
|
"@types/lodash": "^4.17.24",
|
||||||
|
"@types/node": "^25.5.0",
|
||||||
|
"@types/react": "19.2.14",
|
||||||
|
"@types/uuid": "^11.0.0",
|
||||||
|
"@types/web": "0.0.342",
|
||||||
|
"bun-types": "^1.3.10",
|
||||||
|
"eslint": "10.0.3",
|
||||||
|
"prettier": "3.8.1",
|
||||||
|
"typescript": "5.9.3"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "bunx remotion studio",
|
||||||
|
"build": "bunx remotion bundle",
|
||||||
|
"upgrade": "bunx remotion upgrade",
|
||||||
|
"render": "bunx remotion render",
|
||||||
|
"lint": "bunx eslint src && bunx tsc",
|
||||||
|
"server": "bun run server/index.ts"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
/**
|
||||||
|
* Note: When using the Node.JS APIs, the config file
|
||||||
|
* doesn't apply. Instead, pass options directly to the APIs.
|
||||||
|
*
|
||||||
|
* All configuration options: https://remotion.dev/docs/config
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Config } from "@remotion/cli/config";
|
||||||
|
import path from "path";
|
||||||
|
|
||||||
|
Config.setVideoImageFormat("jpeg");
|
||||||
|
Config.setOverwriteOutput(true);
|
||||||
|
|
||||||
|
Config.overrideWebpackConfig((currentConfiguration) => {
|
||||||
|
return {
|
||||||
|
...currentConfiguration,
|
||||||
|
resolve: {
|
||||||
|
...currentConfiguration.resolve,
|
||||||
|
alias: {
|
||||||
|
...(currentConfiguration.resolve?.alias ?? {}),
|
||||||
|
"@/public": path.join(process.cwd(), "public"),
|
||||||
|
"@": path.join(process.cwd(), "src"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
interface ServerConfig {
|
||||||
|
PORT: number;
|
||||||
|
HOST: string;
|
||||||
|
S3_ACCESS_KEY: string;
|
||||||
|
S3_SECRET_KEY: string;
|
||||||
|
S3_BUCKET_NAME: string;
|
||||||
|
S3_ENDPOINT_URL: string;
|
||||||
|
REMOTION_COMPOSITION_ID: string;
|
||||||
|
REDIS_URL: string;
|
||||||
|
MAX_CONCURRENT_RENDERS: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function requireEnv(key: string): string {
|
||||||
|
const value = Bun.env[key];
|
||||||
|
if (!value) {
|
||||||
|
throw new Error(`Missing required environment variable: ${key}`);
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const serverConfig: ServerConfig = {
|
||||||
|
PORT: Number(Bun.env.PORT) || 8001,
|
||||||
|
HOST: Bun.env.HOST || "0.0.0.0",
|
||||||
|
S3_ACCESS_KEY: requireEnv("S3_ACCESS_KEY"),
|
||||||
|
S3_SECRET_KEY: requireEnv("S3_SECRET_KEY"),
|
||||||
|
S3_BUCKET_NAME: requireEnv("S3_BUCKET_NAME"),
|
||||||
|
S3_ENDPOINT_URL: Bun.env.S3_ENDPOINT_URL || "http://localhost:9000",
|
||||||
|
REMOTION_COMPOSITION_ID: Bun.env.REMOTION_COMPOSITION_ID || "CaptionedVideo",
|
||||||
|
REDIS_URL: Bun.env.REDIS_URL || "redis://localhost:6379",
|
||||||
|
MAX_CONCURRENT_RENDERS: Number(Bun.env.MAX_CONCURRENT_RENDERS) || 2,
|
||||||
|
};
|
||||||
+153
@@ -0,0 +1,153 @@
|
|||||||
|
import Elysia, { t } from "elysia";
|
||||||
|
import { Document } from "@/srv/types/DocumentSchema";
|
||||||
|
import { CaptionStyleSchema } from "@/srv/types/CaptionStyleSchema";
|
||||||
|
import { S3Service } from "@/srv/services/s3";
|
||||||
|
import { renderCaptionedVideo } from "@/srv/services/render_video";
|
||||||
|
import {
|
||||||
|
cancelRender,
|
||||||
|
enqueueRender,
|
||||||
|
renderQueue,
|
||||||
|
startRenderWorker,
|
||||||
|
} from "@/srv/services/render_queue";
|
||||||
|
import { serverConfig } from "@/srv/config";
|
||||||
|
|
||||||
|
// Start the BullMQ worker
|
||||||
|
const worker = startRenderWorker();
|
||||||
|
console.log(
|
||||||
|
`Render worker started (concurrency: ${serverConfig.MAX_CONCURRENT_RENDERS})`,
|
||||||
|
);
|
||||||
|
|
||||||
|
const app = new Elysia({ prefix: "/api" });
|
||||||
|
|
||||||
|
app.post(
|
||||||
|
"/render",
|
||||||
|
async ({ body, set }) => {
|
||||||
|
const renderId = body.renderId || crypto.randomUUID();
|
||||||
|
|
||||||
|
// If callbackUrl is provided, enqueue async render
|
||||||
|
if (body.callbackUrl) {
|
||||||
|
await enqueueRender({
|
||||||
|
renderId,
|
||||||
|
folder: body.folder,
|
||||||
|
videoSrc: body.videoSrc,
|
||||||
|
transcription: body.transcription,
|
||||||
|
styleConfig: body.styleConfig,
|
||||||
|
callbackUrl: body.callbackUrl,
|
||||||
|
});
|
||||||
|
|
||||||
|
set.status = 202;
|
||||||
|
return { renderId, status: "queued" };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sync fallback (no callbackUrl) — render immediately and return result
|
||||||
|
const s3Service = new S3Service("captioned", body.folder);
|
||||||
|
const filename = s3Service.getFileName(body.videoSrc);
|
||||||
|
const videoUrl = await s3Service.getFileURL(body.videoSrc);
|
||||||
|
|
||||||
|
const res = await renderCaptionedVideo(
|
||||||
|
body.transcription,
|
||||||
|
videoUrl,
|
||||||
|
filename,
|
||||||
|
body.styleConfig,
|
||||||
|
);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const s3OutPath = await s3Service.uploadFile(res.output, filename);
|
||||||
|
return { output: s3OutPath };
|
||||||
|
} finally {
|
||||||
|
await Bun.file(res.output)
|
||||||
|
.delete()
|
||||||
|
.catch(() => {});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
body: t.Object({
|
||||||
|
folder: t.Optional(t.String()),
|
||||||
|
renderId: t.Optional(t.String()),
|
||||||
|
videoSrc: t.String(),
|
||||||
|
transcription: Document,
|
||||||
|
styleConfig: t.Optional(CaptionStyleSchema),
|
||||||
|
callbackUrl: t.Optional(t.String()),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
app.get(
|
||||||
|
"/render/:renderId",
|
||||||
|
async ({ params }) => {
|
||||||
|
const job = await renderQueue.getJob(params.renderId);
|
||||||
|
if (!job) {
|
||||||
|
return { status: "not_found", renderId: params.renderId };
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = await job.getState();
|
||||||
|
const progress = typeof job.progress === "number" ? job.progress : 0;
|
||||||
|
|
||||||
|
if (state === "completed") {
|
||||||
|
return {
|
||||||
|
status: "done",
|
||||||
|
renderId: params.renderId,
|
||||||
|
progress_pct: 100,
|
||||||
|
output_path: job.returnvalue?.outputPath,
|
||||||
|
callback_delivered: job.returnvalue?.callbackDelivered ?? false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state === "failed") {
|
||||||
|
return {
|
||||||
|
status: "failed",
|
||||||
|
renderId: params.renderId,
|
||||||
|
error: job.failedReason,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
status: state, // "waiting", "active", "delayed"
|
||||||
|
renderId: params.renderId,
|
||||||
|
progress_pct: progress,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
{
|
||||||
|
params: t.Object({
|
||||||
|
renderId: t.String(),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
app.delete(
|
||||||
|
"/render/:renderId",
|
||||||
|
async ({ params, set }) => {
|
||||||
|
const result = await cancelRender(params.renderId);
|
||||||
|
|
||||||
|
if (result.status === "not_found") {
|
||||||
|
set.status = 404;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
params: t.Object({
|
||||||
|
renderId: t.String(),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
app.get("/render", async () => "Hello");
|
||||||
|
|
||||||
|
app.get("/health", async () => {
|
||||||
|
return { status: "ok" };
|
||||||
|
});
|
||||||
|
|
||||||
|
app.listen(serverConfig.PORT, () => {
|
||||||
|
console.log(
|
||||||
|
`Remotion service listening on ${serverConfig.HOST}:${serverConfig.PORT}`,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Graceful shutdown
|
||||||
|
process.on("SIGTERM", async () => {
|
||||||
|
console.log("Shutting down render worker...");
|
||||||
|
await worker.close();
|
||||||
|
process.exit(0);
|
||||||
|
});
|
||||||
@@ -0,0 +1,355 @@
|
|||||||
|
import { Queue, Worker, type Job } from "bullmq";
|
||||||
|
import { serverConfig } from "@/srv/config";
|
||||||
|
import {
|
||||||
|
S3Service,
|
||||||
|
type UploadProgress,
|
||||||
|
} from "@/srv/services/s3";
|
||||||
|
import {
|
||||||
|
RENDER_CANCELLED_ERROR_MESSAGE,
|
||||||
|
renderCaptionedVideo,
|
||||||
|
type RenderProgress,
|
||||||
|
} from "@/srv/services/render_video";
|
||||||
|
import { sendWebhook } from "@/srv/services/webhook";
|
||||||
|
import type { DocumentInterface } from "@/srv/types/DocumentSchema";
|
||||||
|
import type { CaptionStyleConfigType } from "@/srv/types/CaptionStyleSchema";
|
||||||
|
|
||||||
|
const QUEUE_NAME = "caption-renders";
|
||||||
|
const PROGRESS_THROTTLE_MS = 3_000;
|
||||||
|
const UPLOAD_PROGRESS_THROTTLE_MS = 1_500;
|
||||||
|
const RENDER_PROGRESS_MIN_PCT = 5;
|
||||||
|
const RENDER_PROGRESS_MAX_PCT = 95;
|
||||||
|
const UPLOAD_PROGRESS_START_PCT = 95;
|
||||||
|
const UPLOAD_PROGRESS_END_PCT = 99;
|
||||||
|
const KILOBYTE = 1024;
|
||||||
|
const MEGABYTE = 1024 * KILOBYTE;
|
||||||
|
const RENDER_CANCELLATION_KEY_PREFIX = "caption-render-cancel:";
|
||||||
|
const RENDER_CANCELLATION_TTL_SECONDS = 60 * 60;
|
||||||
|
const RENDER_CANCELLATION_POLL_MS = 1_000;
|
||||||
|
|
||||||
|
export type RenderJobData = {
|
||||||
|
renderId: string;
|
||||||
|
folder?: string;
|
||||||
|
videoSrc: string;
|
||||||
|
transcription: DocumentInterface;
|
||||||
|
styleConfig?: CaptionStyleConfigType;
|
||||||
|
callbackUrl?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type RenderJobResult = {
|
||||||
|
outputPath: string;
|
||||||
|
callbackDelivered: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type CancelRenderResult = {
|
||||||
|
renderId: string;
|
||||||
|
status:
|
||||||
|
| "cancelled"
|
||||||
|
| "cancellation_requested"
|
||||||
|
| "completed"
|
||||||
|
| "failed"
|
||||||
|
| "not_found";
|
||||||
|
};
|
||||||
|
|
||||||
|
function formatBytes(bytes: number): string {
|
||||||
|
if (bytes >= MEGABYTE) {
|
||||||
|
return `${(bytes / MEGABYTE).toFixed(1)} MB`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bytes >= KILOBYTE) {
|
||||||
|
return `${(bytes / KILOBYTE).toFixed(1)} KB`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${bytes} B`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRenderCancellationKey(renderId: string): string {
|
||||||
|
return `${RENDER_CANCELLATION_KEY_PREFIX}${renderId}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function requestRenderCancellation(renderId: string): Promise<void> {
|
||||||
|
const client = await renderQueue.client;
|
||||||
|
await client.set(
|
||||||
|
getRenderCancellationKey(renderId),
|
||||||
|
"1",
|
||||||
|
"EX",
|
||||||
|
RENDER_CANCELLATION_TTL_SECONDS,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function isRenderCancellationRequested(renderId: string): Promise<boolean> {
|
||||||
|
const client = await renderQueue.client;
|
||||||
|
const value = await client.get(getRenderCancellationKey(renderId));
|
||||||
|
return value === "1";
|
||||||
|
}
|
||||||
|
|
||||||
|
async function clearRenderCancellation(renderId: string): Promise<void> {
|
||||||
|
const client = await renderQueue.client;
|
||||||
|
await client.del(getRenderCancellationKey(renderId));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Queue (enqueue side)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
const redisConnection = { url: serverConfig.REDIS_URL };
|
||||||
|
|
||||||
|
export const renderQueue = new Queue<RenderJobData, RenderJobResult>(
|
||||||
|
QUEUE_NAME,
|
||||||
|
{ connection: redisConnection },
|
||||||
|
);
|
||||||
|
|
||||||
|
export async function enqueueRender(data: RenderJobData): Promise<string> {
|
||||||
|
const job = await renderQueue.add("render", data, {
|
||||||
|
jobId: data.renderId,
|
||||||
|
attempts: 2,
|
||||||
|
backoff: { type: "exponential", delay: 5_000 },
|
||||||
|
removeOnComplete: { age: 3600 },
|
||||||
|
removeOnFail: { age: 7200 },
|
||||||
|
});
|
||||||
|
return job.id!;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function cancelRender(renderId: string): Promise<CancelRenderResult> {
|
||||||
|
const job = await renderQueue.getJob(renderId);
|
||||||
|
if (!job) {
|
||||||
|
return { renderId, status: "not_found" };
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = await job.getState();
|
||||||
|
if (state === "completed") {
|
||||||
|
await clearRenderCancellation(renderId);
|
||||||
|
return { renderId, status: "completed" };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state === "failed") {
|
||||||
|
await clearRenderCancellation(renderId);
|
||||||
|
return { renderId, status: "failed" };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state === "active") {
|
||||||
|
await requestRenderCancellation(renderId);
|
||||||
|
return { renderId, status: "cancellation_requested" };
|
||||||
|
}
|
||||||
|
|
||||||
|
await clearRenderCancellation(renderId);
|
||||||
|
await job.remove();
|
||||||
|
return { renderId, status: "cancelled" };
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Worker (processing side)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
async function processRenderJob(job: Job<RenderJobData, RenderJobResult>) {
|
||||||
|
const { folder, videoSrc, transcription, styleConfig, callbackUrl } =
|
||||||
|
job.data;
|
||||||
|
const logPrefix = `[render-job:${job.id}]`;
|
||||||
|
const renderId = String(job.id);
|
||||||
|
|
||||||
|
const s3Service = new S3Service("captioned", folder);
|
||||||
|
const filename = s3Service.getFileName(videoSrc);
|
||||||
|
const videoUrl = await s3Service.getFileURL(videoSrc);
|
||||||
|
const uploadAbortController = new AbortController();
|
||||||
|
let cancellationPollTimer: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
|
console.log(`${logPrefix} Starting job for ${videoSrc}`);
|
||||||
|
|
||||||
|
const ensureNotCancelled = async () => {
|
||||||
|
if (await isRenderCancellationRequested(renderId)) {
|
||||||
|
throw new Error(RENDER_CANCELLED_ERROR_MESSAGE);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
await ensureNotCancelled();
|
||||||
|
|
||||||
|
cancellationPollTimer = setInterval(() => {
|
||||||
|
void isRenderCancellationRequested(renderId).then((cancelRequested) => {
|
||||||
|
if (!cancelRequested) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
uploadAbortController.abort(RENDER_CANCELLED_ERROR_MESSAGE);
|
||||||
|
});
|
||||||
|
}, RENDER_CANCELLATION_POLL_MS);
|
||||||
|
|
||||||
|
// Send RUNNING webhook
|
||||||
|
if (callbackUrl) {
|
||||||
|
const delivered = await sendWebhook(callbackUrl, {
|
||||||
|
status: "RUNNING",
|
||||||
|
progress_pct: RENDER_PROGRESS_MIN_PCT,
|
||||||
|
current_message: "Рендер субтитров",
|
||||||
|
started_at: new Date().toISOString(),
|
||||||
|
});
|
||||||
|
console.log(`${logPrefix} Start webhook delivered: ${delivered}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
await job.updateProgress(RENDER_PROGRESS_MIN_PCT);
|
||||||
|
|
||||||
|
let lastProgressSend = 0;
|
||||||
|
let lastUploadProgressSend = 0;
|
||||||
|
let lastUploadPct = UPLOAD_PROGRESS_START_PCT;
|
||||||
|
|
||||||
|
const pushRunningProgress = (progressPct: number, currentMessage: string) => {
|
||||||
|
if (callbackUrl) {
|
||||||
|
void sendWebhook(callbackUrl, {
|
||||||
|
status: "RUNNING",
|
||||||
|
progress_pct: progressPct,
|
||||||
|
current_message: currentMessage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
void job.updateProgress(progressPct).catch((error) => {
|
||||||
|
console.error(`${logPrefix} Failed to update BullMQ progress:`, error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onProgress = (progress: RenderProgress) => {
|
||||||
|
if (progress.totalFrames <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const now = Date.now();
|
||||||
|
if (now - lastProgressSend >= PROGRESS_THROTTLE_MS) {
|
||||||
|
lastProgressSend = now;
|
||||||
|
const pct = Math.min(
|
||||||
|
Math.round(
|
||||||
|
(progress.renderedFrames / progress.totalFrames) *
|
||||||
|
(RENDER_PROGRESS_MAX_PCT - RENDER_PROGRESS_MIN_PCT),
|
||||||
|
) + RENDER_PROGRESS_MIN_PCT,
|
||||||
|
RENDER_PROGRESS_MAX_PCT,
|
||||||
|
);
|
||||||
|
pushRunningProgress(
|
||||||
|
pct,
|
||||||
|
`Рендер субтитров: ${progress.renderedFrames}/${progress.totalFrames}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onUploadProgress = (progress: UploadProgress) => {
|
||||||
|
const now = Date.now();
|
||||||
|
const uploadPct = Math.min(
|
||||||
|
UPLOAD_PROGRESS_START_PCT +
|
||||||
|
Math.round(
|
||||||
|
progress.percent *
|
||||||
|
(UPLOAD_PROGRESS_END_PCT - UPLOAD_PROGRESS_START_PCT),
|
||||||
|
),
|
||||||
|
UPLOAD_PROGRESS_END_PCT,
|
||||||
|
);
|
||||||
|
const shouldSend =
|
||||||
|
uploadPct > lastUploadPct ||
|
||||||
|
now - lastUploadProgressSend >= UPLOAD_PROGRESS_THROTTLE_MS;
|
||||||
|
|
||||||
|
if (!shouldSend) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastUploadProgressSend = now;
|
||||||
|
lastUploadPct = uploadPct;
|
||||||
|
|
||||||
|
pushRunningProgress(
|
||||||
|
uploadPct,
|
||||||
|
`Загрузка видео: ${Math.round(progress.percent * 100)}% (${formatBytes(progress.uploadedBytes)} / ${formatBytes(progress.totalBytes)})`,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
let outputLocalPath: string | undefined;
|
||||||
|
try {
|
||||||
|
const result = await renderCaptionedVideo(
|
||||||
|
transcription,
|
||||||
|
videoUrl,
|
||||||
|
filename,
|
||||||
|
styleConfig,
|
||||||
|
onProgress,
|
||||||
|
() => isRenderCancellationRequested(renderId),
|
||||||
|
);
|
||||||
|
outputLocalPath = result.output;
|
||||||
|
console.log(`${logPrefix} Render finished, starting upload`);
|
||||||
|
|
||||||
|
await ensureNotCancelled();
|
||||||
|
|
||||||
|
pushRunningProgress(
|
||||||
|
UPLOAD_PROGRESS_START_PCT,
|
||||||
|
"Рендер завершён, начинаем загрузку видео",
|
||||||
|
);
|
||||||
|
|
||||||
|
const s3OutPath = await s3Service.uploadFile(
|
||||||
|
result.output,
|
||||||
|
filename,
|
||||||
|
onUploadProgress,
|
||||||
|
uploadAbortController.signal,
|
||||||
|
);
|
||||||
|
console.log(`${logPrefix} Upload completed: ${s3OutPath}`);
|
||||||
|
|
||||||
|
pushRunningProgress(
|
||||||
|
UPLOAD_PROGRESS_END_PCT,
|
||||||
|
"Загрузка завершена, публикуем результат",
|
||||||
|
);
|
||||||
|
|
||||||
|
// Send DONE webhook
|
||||||
|
let callbackDelivered = false;
|
||||||
|
if (callbackUrl) {
|
||||||
|
callbackDelivered = await sendWebhook(callbackUrl, {
|
||||||
|
status: "DONE",
|
||||||
|
progress_pct: 100,
|
||||||
|
current_message: "Готово",
|
||||||
|
output_data: { output_path: s3OutPath },
|
||||||
|
finished_at: new Date().toISOString(),
|
||||||
|
});
|
||||||
|
console.log(`${logPrefix} Done webhook delivered: ${callbackDelivered}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { outputPath: s3OutPath, callbackDelivered };
|
||||||
|
} catch (err) {
|
||||||
|
if (
|
||||||
|
err instanceof Error &&
|
||||||
|
err.message === RENDER_CANCELLED_ERROR_MESSAGE
|
||||||
|
) {
|
||||||
|
console.log(`${logPrefix} Cancellation requested`);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.error(`${logPrefix} Job failed:`, err);
|
||||||
|
// Send FAILED webhook
|
||||||
|
if (callbackUrl) {
|
||||||
|
await sendWebhook(callbackUrl, {
|
||||||
|
status: "FAILED",
|
||||||
|
progress_pct: 0,
|
||||||
|
current_message: "Ошибка рендера",
|
||||||
|
error_message: err instanceof Error ? err.message : String(err),
|
||||||
|
finished_at: new Date().toISOString(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
throw err;
|
||||||
|
} finally {
|
||||||
|
if (cancellationPollTimer) {
|
||||||
|
clearInterval(cancellationPollTimer);
|
||||||
|
}
|
||||||
|
await clearRenderCancellation(renderId);
|
||||||
|
|
||||||
|
if (outputLocalPath) {
|
||||||
|
await Bun.file(outputLocalPath).delete().catch(() => {});
|
||||||
|
console.log(`${logPrefix} Cleaned up local output ${outputLocalPath}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function startRenderWorker(): Worker<RenderJobData, RenderJobResult> {
|
||||||
|
const worker = new Worker<RenderJobData, RenderJobResult>(
|
||||||
|
QUEUE_NAME,
|
||||||
|
processRenderJob,
|
||||||
|
{
|
||||||
|
connection: redisConnection,
|
||||||
|
concurrency: serverConfig.MAX_CONCURRENT_RENDERS,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
worker.on("failed", (job, err) => {
|
||||||
|
console.error(`Render job ${job?.id} failed:`, err.message);
|
||||||
|
});
|
||||||
|
|
||||||
|
worker.on("completed", (job) => {
|
||||||
|
console.log(`Render job ${job.id} completed`);
|
||||||
|
});
|
||||||
|
|
||||||
|
return worker;
|
||||||
|
}
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
import type { DocumentInterface } from "@/srv/types/DocumentSchema";
|
||||||
|
import type { CaptionStyleConfigType } from "@/srv/types/CaptionStyleSchema";
|
||||||
|
import { serverConfig } from "@/srv/config";
|
||||||
|
import { statSync } from "node:fs";
|
||||||
|
|
||||||
|
const OUTPUT_DIR = "out";
|
||||||
|
const KILOBYTE = 1024;
|
||||||
|
const MEGABYTE = 1024 * KILOBYTE;
|
||||||
|
const MAX_CAPTURED_STREAM_OUTPUT_CHARS = 20_000;
|
||||||
|
const RENDER_CANCELLATION_POLL_MS = 1_000;
|
||||||
|
|
||||||
|
export const RENDER_CANCELLED_ERROR_MESSAGE = "Render cancelled";
|
||||||
|
|
||||||
|
export type RenderResult = {
|
||||||
|
output: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type RenderProgress = {
|
||||||
|
renderedFrames: number;
|
||||||
|
totalFrames: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
function formatBytes(bytes: number): string {
|
||||||
|
if (bytes >= MEGABYTE) {
|
||||||
|
return `${(bytes / MEGABYTE).toFixed(1)} MB`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bytes >= KILOBYTE) {
|
||||||
|
return `${(bytes / KILOBYTE).toFixed(1)} KB`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${bytes} B`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDuration(durationMs: number): string {
|
||||||
|
return `${(durationMs / 1000).toFixed(1)}s`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function appendCapturedOutput(current: string, nextLine: string): string {
|
||||||
|
const combined = current
|
||||||
|
? `${current}\n${nextLine}`
|
||||||
|
: nextLine;
|
||||||
|
|
||||||
|
if (combined.length <= MAX_CAPTURED_STREAM_OUTPUT_CHARS) {
|
||||||
|
return combined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return combined.slice(-MAX_CAPTURED_STREAM_OUTPUT_CHARS);
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseRenderProgressFromLine(
|
||||||
|
line: string,
|
||||||
|
onProgress?: (progress: RenderProgress) => void,
|
||||||
|
): void {
|
||||||
|
if (!onProgress) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const frameMatch = line.match(
|
||||||
|
/(?:Rendered?\s+frame|Rendered|Encoded)\s+(\d+)\s*\/\s*(\d+)/i,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!frameMatch) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
onProgress({
|
||||||
|
renderedFrames: parseInt(frameMatch[1], 10),
|
||||||
|
totalFrames: parseInt(frameMatch[2], 10),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function consumeProcessStream(
|
||||||
|
stream: ReadableStream<Uint8Array> | null | undefined,
|
||||||
|
label: "stdout" | "stderr",
|
||||||
|
onLine?: (line: string) => void,
|
||||||
|
): Promise<string> {
|
||||||
|
if (!stream) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
const reader = stream.getReader();
|
||||||
|
const decoder = new TextDecoder();
|
||||||
|
let buffer = "";
|
||||||
|
let captured = "";
|
||||||
|
|
||||||
|
try {
|
||||||
|
while (true) {
|
||||||
|
const { done, value } = await reader.read();
|
||||||
|
if (done) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
buffer += decoder.decode(value, { stream: true });
|
||||||
|
const lines = buffer.split("\n");
|
||||||
|
buffer = lines.pop() || "";
|
||||||
|
|
||||||
|
for (const line of lines) {
|
||||||
|
const normalizedLine = line.trimEnd();
|
||||||
|
if (!normalizedLine) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
captured = appendCapturedOutput(captured, normalizedLine);
|
||||||
|
console.log(`[render:${label}] ${normalizedLine}`);
|
||||||
|
onLine?.(normalizedLine);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const tail = buffer.trim();
|
||||||
|
if (tail) {
|
||||||
|
captured = appendCapturedOutput(captured, tail);
|
||||||
|
console.log(`[render:${label}] ${tail}`);
|
||||||
|
onLine?.(tail);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(
|
||||||
|
`[render:${label}] Stream reader closed unexpectedly: ${error instanceof Error ? error.message : String(error)}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return captured;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function renderCaptionedVideo(
|
||||||
|
transcription: DocumentInterface,
|
||||||
|
videoSrc: string,
|
||||||
|
filename: string,
|
||||||
|
styleConfig?: CaptionStyleConfigType,
|
||||||
|
onProgress?: (progress: RenderProgress) => void,
|
||||||
|
shouldCancel?: () => boolean | Promise<boolean>,
|
||||||
|
): Promise<RenderResult> {
|
||||||
|
const uniqueFilename = `${crypto.randomUUID()}-${filename}`;
|
||||||
|
const outputPath = `${OUTPUT_DIR}/${uniqueFilename}`;
|
||||||
|
const propsPath = `${OUTPUT_DIR}/${crypto.randomUUID()}.json`;
|
||||||
|
|
||||||
|
const props: Record<string, unknown> = {
|
||||||
|
videoSrc,
|
||||||
|
transcription,
|
||||||
|
fps: 30,
|
||||||
|
};
|
||||||
|
if (styleConfig) {
|
||||||
|
props.styleConfig = styleConfig;
|
||||||
|
}
|
||||||
|
|
||||||
|
await Bun.write(propsPath, JSON.stringify(props));
|
||||||
|
|
||||||
|
try {
|
||||||
|
const renderStartedAt = Date.now();
|
||||||
|
const args = [
|
||||||
|
"render",
|
||||||
|
"src/index.ts",
|
||||||
|
serverConfig.REMOTION_COMPOSITION_ID,
|
||||||
|
outputPath,
|
||||||
|
"--props",
|
||||||
|
propsPath,
|
||||||
|
];
|
||||||
|
|
||||||
|
const cmd = ["./node_modules/.bin/remotion", ...args];
|
||||||
|
console.log(`[render] Starting: ${cmd.join(" ")}`);
|
||||||
|
console.log(`[render] Source video: ${videoSrc}`);
|
||||||
|
console.log(`[render] Output: ${outputPath}, Props: ${propsPath}`);
|
||||||
|
|
||||||
|
const proc = Bun.spawn(cmd, {
|
||||||
|
stdout: "pipe",
|
||||||
|
stderr: "pipe",
|
||||||
|
});
|
||||||
|
let renderCancelled = false;
|
||||||
|
|
||||||
|
const stopRenderIfCancelled = async () => {
|
||||||
|
if (!shouldCancel || renderCancelled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancellationRequested = await shouldCancel();
|
||||||
|
if (!cancellationRequested) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCancelled = true;
|
||||||
|
proc.kill();
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancellationTimer = shouldCancel
|
||||||
|
? setInterval(() => {
|
||||||
|
void stopRenderIfCancelled();
|
||||||
|
}, RENDER_CANCELLATION_POLL_MS)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const handleProcessLine = (line: string) => {
|
||||||
|
parseRenderProgressFromLine(line, onProgress);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stdoutPromise = consumeProcessStream(
|
||||||
|
proc.stdout,
|
||||||
|
"stdout",
|
||||||
|
handleProcessLine,
|
||||||
|
);
|
||||||
|
const stderrPromise = consumeProcessStream(
|
||||||
|
proc.stderr,
|
||||||
|
"stderr",
|
||||||
|
handleProcessLine,
|
||||||
|
);
|
||||||
|
|
||||||
|
const exitCode = await proc.exited;
|
||||||
|
if (cancellationTimer) {
|
||||||
|
clearInterval(cancellationTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [capturedStdout, capturedStderr] = await Promise.all([
|
||||||
|
stdoutPromise,
|
||||||
|
stderrPromise,
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (renderCancelled) {
|
||||||
|
throw new Error(RENDER_CANCELLED_ERROR_MESSAGE);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (exitCode !== 0) {
|
||||||
|
console.error(
|
||||||
|
`[render] Failed after ${formatDuration(Date.now() - renderStartedAt)} (exit ${exitCode})`,
|
||||||
|
);
|
||||||
|
if (capturedStdout) {
|
||||||
|
console.error(`[render] Last stdout:\n${capturedStdout}`);
|
||||||
|
}
|
||||||
|
if (capturedStderr) {
|
||||||
|
console.error(`[render] Last stderr:\n${capturedStderr}`);
|
||||||
|
}
|
||||||
|
throw new Error(
|
||||||
|
`Render process exited with code ${exitCode}: ${(capturedStderr || capturedStdout).slice(0, 2000)}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const outputSize = statSync(outputPath).size;
|
||||||
|
console.log(
|
||||||
|
`[render] Completed in ${formatDuration(Date.now() - renderStartedAt)} (${formatBytes(outputSize)})`,
|
||||||
|
);
|
||||||
|
|
||||||
|
return { output: outputPath };
|
||||||
|
} finally {
|
||||||
|
await Bun.file(propsPath).delete().catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,152 @@
|
|||||||
|
import { serverConfig } from "@/srv/config";
|
||||||
|
import {
|
||||||
|
GetObjectCommand,
|
||||||
|
S3Client,
|
||||||
|
} from "@aws-sdk/client-s3";
|
||||||
|
import { Upload } from "@aws-sdk/lib-storage";
|
||||||
|
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
|
||||||
|
import { createReadStream, statSync } from "node:fs";
|
||||||
|
import path from "path";
|
||||||
|
|
||||||
|
const PRESIGN_EXPIRY_SECONDS = 3600 * 24;
|
||||||
|
const S3_REGION = "us-east-1";
|
||||||
|
const KILOBYTE = 1024;
|
||||||
|
const MEGABYTE = 1024 * KILOBYTE;
|
||||||
|
const UPLOAD_LOG_INTERVAL_BYTES = 25 * MEGABYTE;
|
||||||
|
const MULTIPART_PART_SIZE = 5 * MEGABYTE;
|
||||||
|
|
||||||
|
export type UploadProgress = {
|
||||||
|
uploadedBytes: number;
|
||||||
|
totalBytes: number;
|
||||||
|
percent: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
function formatBytes(bytes: number): string {
|
||||||
|
if (bytes >= MEGABYTE) {
|
||||||
|
return `${(bytes / MEGABYTE).toFixed(1)} MB`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bytes >= KILOBYTE) {
|
||||||
|
return `${(bytes / KILOBYTE).toFixed(1)} KB`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${bytes} B`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class S3Service {
|
||||||
|
private client: S3Client;
|
||||||
|
private folder: string;
|
||||||
|
private folderToStore: string;
|
||||||
|
|
||||||
|
constructor(folderToStore: string, folder?: string) {
|
||||||
|
this.folderToStore = folderToStore;
|
||||||
|
this.folder = folder || "";
|
||||||
|
this.client = new S3Client({
|
||||||
|
credentials: {
|
||||||
|
accessKeyId: serverConfig.S3_ACCESS_KEY,
|
||||||
|
secretAccessKey: serverConfig.S3_SECRET_KEY,
|
||||||
|
},
|
||||||
|
endpoint: serverConfig.S3_ENDPOINT_URL,
|
||||||
|
forcePathStyle: true,
|
||||||
|
region: S3_REGION,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async getFileURL(s3Path: string): Promise<string> {
|
||||||
|
return getSignedUrl(
|
||||||
|
this.client,
|
||||||
|
new GetObjectCommand({
|
||||||
|
Bucket: serverConfig.S3_BUCKET_NAME,
|
||||||
|
Key: s3Path,
|
||||||
|
}),
|
||||||
|
{ expiresIn: PRESIGN_EXPIRY_SECONDS },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getFileName(s3Path: string): string {
|
||||||
|
return path.basename(s3Path);
|
||||||
|
}
|
||||||
|
|
||||||
|
async uploadFile(
|
||||||
|
localFilePath: string,
|
||||||
|
key: string,
|
||||||
|
onProgress?: (progress: UploadProgress) => void,
|
||||||
|
abortSignal?: AbortSignal,
|
||||||
|
): Promise<string> {
|
||||||
|
const s3Path = path.join(this.folder, this.folderToStore, key);
|
||||||
|
const totalBytes = statSync(localFilePath).size;
|
||||||
|
let lastLoggedBytes = 0;
|
||||||
|
let lastLoggedPercent = -1;
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
`[s3] Upload starting: ${localFilePath} -> s3://${serverConfig.S3_BUCKET_NAME}/${s3Path} (${formatBytes(totalBytes)})`,
|
||||||
|
);
|
||||||
|
|
||||||
|
const fileStream = createReadStream(localFilePath);
|
||||||
|
|
||||||
|
const upload = new Upload({
|
||||||
|
client: this.client,
|
||||||
|
params: {
|
||||||
|
Body: fileStream,
|
||||||
|
Bucket: serverConfig.S3_BUCKET_NAME,
|
||||||
|
Key: s3Path,
|
||||||
|
},
|
||||||
|
partSize: MULTIPART_PART_SIZE,
|
||||||
|
});
|
||||||
|
|
||||||
|
const onAbort = () => upload.abort();
|
||||||
|
if (abortSignal) {
|
||||||
|
if (abortSignal.aborted) {
|
||||||
|
upload.abort();
|
||||||
|
} else {
|
||||||
|
abortSignal.addEventListener("abort", onAbort, { once: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
upload.on("httpUploadProgress", (progress) => {
|
||||||
|
const uploadedBytes = progress.loaded ?? 0;
|
||||||
|
const percent = totalBytes > 0 ? uploadedBytes / totalBytes : 1;
|
||||||
|
const percentValue = Math.floor(percent * 100);
|
||||||
|
|
||||||
|
onProgress?.({
|
||||||
|
uploadedBytes,
|
||||||
|
totalBytes,
|
||||||
|
percent: Math.min(percent, 1),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (
|
||||||
|
uploadedBytes === totalBytes ||
|
||||||
|
uploadedBytes - lastLoggedBytes >= UPLOAD_LOG_INTERVAL_BYTES ||
|
||||||
|
percentValue >= lastLoggedPercent + 10
|
||||||
|
) {
|
||||||
|
lastLoggedBytes = uploadedBytes;
|
||||||
|
lastLoggedPercent = percentValue;
|
||||||
|
console.log(
|
||||||
|
`[s3] Upload progress: ${Math.min(percentValue, 100)}% (${formatBytes(uploadedBytes)} / ${formatBytes(totalBytes)})`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
await upload.done();
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
`[s3] Upload failed after ${formatBytes(lastLoggedBytes)} sent:`,
|
||||||
|
error,
|
||||||
|
);
|
||||||
|
throw error;
|
||||||
|
} finally {
|
||||||
|
abortSignal?.removeEventListener("abort", onAbort);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (totalBytes === 0) {
|
||||||
|
onProgress?.({ uploadedBytes: 0, totalBytes: 0, percent: 1 });
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
`[s3] Upload completed: s3://${serverConfig.S3_BUCKET_NAME}/${s3Path}`,
|
||||||
|
);
|
||||||
|
|
||||||
|
return s3Path;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
type WebhookPayload = {
|
||||||
|
status: "RUNNING" | "DONE" | "FAILED";
|
||||||
|
progress_pct: number;
|
||||||
|
current_message: string;
|
||||||
|
output_data?: { output_path: string };
|
||||||
|
error_message?: string;
|
||||||
|
started_at?: string;
|
||||||
|
finished_at?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const WEBHOOK_TIMEOUT_MS = 10_000;
|
||||||
|
|
||||||
|
export async function sendWebhook(
|
||||||
|
callbackUrl: string,
|
||||||
|
payload: WebhookPayload,
|
||||||
|
): Promise<boolean> {
|
||||||
|
try {
|
||||||
|
const resp = await fetch(callbackUrl, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
signal: AbortSignal.timeout(WEBHOOK_TIMEOUT_MS),
|
||||||
|
});
|
||||||
|
if (!resp.ok) {
|
||||||
|
const responseBody = await resp.text().catch(() => "");
|
||||||
|
console.error(
|
||||||
|
`Webhook POST to ${callbackUrl} returned ${resp.status}: ${resp.statusText}${responseBody ? `\n${responseBody.slice(0, 1000)}` : ""}`,
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Webhook POST to ${callbackUrl} failed:`, err);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
import { t, Static } from "elysia";
|
||||||
|
|
||||||
|
export const CaptionTextStyle = t.Object({
|
||||||
|
font_family: t.String({ default: "Lobster" }),
|
||||||
|
font_size: t.Number({ default: 40 }),
|
||||||
|
font_weight: t.Number({ default: 400 }),
|
||||||
|
text_color: t.String({ default: "#FFFFFF" }),
|
||||||
|
highlight_color: t.String({ default: "#FFCC00" }),
|
||||||
|
text_shadow: t.Union([t.String(), t.Null()], {
|
||||||
|
default: "2px 2px 4px rgba(0,0,0,0.5)",
|
||||||
|
}),
|
||||||
|
text_stroke_width: t.Number({ default: 0 }),
|
||||||
|
text_stroke_color: t.String({ default: "#000000" }),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const CaptionLayoutStyle = t.Object({
|
||||||
|
vertical_position: t.Union(
|
||||||
|
[t.Literal("top"), t.Literal("center"), t.Literal("bottom")],
|
||||||
|
{ default: "bottom" },
|
||||||
|
),
|
||||||
|
horizontal_alignment: t.Union(
|
||||||
|
[t.Literal("left"), t.Literal("center"), t.Literal("right")],
|
||||||
|
{ default: "center" },
|
||||||
|
),
|
||||||
|
padding_px: t.Number({ default: 20 }),
|
||||||
|
max_width_pct: t.Number({ default: 90 }),
|
||||||
|
lines_per_screen: t.Number({ default: 2 }),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const CaptionAnimationStyle = t.Object({
|
||||||
|
highlight_style: t.Union(
|
||||||
|
[
|
||||||
|
t.Literal("color"),
|
||||||
|
t.Literal("scale"),
|
||||||
|
t.Literal("underline"),
|
||||||
|
t.Literal("color_scale"),
|
||||||
|
],
|
||||||
|
{ default: "color" },
|
||||||
|
),
|
||||||
|
highlight_scale: t.Number({ default: 1.1 }),
|
||||||
|
segment_transition: t.Union(
|
||||||
|
[t.Literal("fade"), t.Literal("slide"), t.Literal("none")],
|
||||||
|
{ default: "fade" },
|
||||||
|
),
|
||||||
|
fade_duration_frames: t.Number({ default: 3 }),
|
||||||
|
animation_speed: t.Number({ default: 1.0 }),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const CaptionBackgroundStyle = t.Object({
|
||||||
|
bg_color: t.String({ default: "rgba(0,0,0,0.6)" }),
|
||||||
|
bg_blur_px: t.Number({ default: 0 }),
|
||||||
|
bg_glow_color: t.Union([t.String(), t.Null()], { default: null }),
|
||||||
|
bg_border_radius_px: t.Number({ default: 15 }),
|
||||||
|
bg_padding_px: t.Number({ default: 20 }),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const CaptionStyleSchema = t.Object({
|
||||||
|
text: CaptionTextStyle,
|
||||||
|
layout: CaptionLayoutStyle,
|
||||||
|
animation: CaptionAnimationStyle,
|
||||||
|
background: CaptionBackgroundStyle,
|
||||||
|
});
|
||||||
|
|
||||||
|
export type CaptionTextStyleType = Static<typeof CaptionTextStyle>;
|
||||||
|
export type CaptionLayoutStyleType = Static<typeof CaptionLayoutStyle>;
|
||||||
|
export type CaptionAnimationStyleType = Static<typeof CaptionAnimationStyle>;
|
||||||
|
export type CaptionBackgroundStyleType = Static<typeof CaptionBackgroundStyle>;
|
||||||
|
export type CaptionStyleConfigType = Static<typeof CaptionStyleSchema>;
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import { t, Static } from "elysia";
|
||||||
|
|
||||||
|
// 1. Leaf Nodes (Building blocks)
|
||||||
|
export const Tag = t.Object({
|
||||||
|
name: t.String(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const TimeRange = t.Object({
|
||||||
|
start: t.Number(),
|
||||||
|
end: t.Number(),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Word Node
|
||||||
|
export const WordNode = t.Object({
|
||||||
|
text: t.String(),
|
||||||
|
semantic_tags: t.Array(Tag),
|
||||||
|
structure_tags: t.Array(Tag),
|
||||||
|
time: TimeRange,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Line Node (Contains Words)
|
||||||
|
export const LineNode = t.Object({
|
||||||
|
text: t.String(),
|
||||||
|
semantic_tags: t.Array(Tag),
|
||||||
|
structure_tags: t.Array(Tag),
|
||||||
|
time: TimeRange,
|
||||||
|
words: t.Array(WordNode),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 4. Segment Node (Contains Lines)
|
||||||
|
export const SegmentNode = t.Object({
|
||||||
|
text: t.String(),
|
||||||
|
semantic_tags: t.Array(Tag),
|
||||||
|
structure_tags: t.Array(Tag),
|
||||||
|
time: TimeRange,
|
||||||
|
lines: t.Array(LineNode),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 5. Root Document
|
||||||
|
export const Document = t.Object({
|
||||||
|
segments: t.Array(SegmentNode),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type TagInterface = Static<typeof Tag>;
|
||||||
|
export type TimeRangeInterface = Static<typeof TimeRange>;
|
||||||
|
export type WordNodeInterface = Static<typeof WordNode>;
|
||||||
|
export type LineNodeInterface = Static<typeof LineNode>;
|
||||||
|
export type SegmentNodeInterface = Static<typeof SegmentNode>;
|
||||||
|
export type DocumentInterface = Static<typeof Document>;
|
||||||
@@ -0,0 +1,301 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { interpolate } from "remotion";
|
||||||
|
import { loadFont } from "@remotion/google-fonts/Lobster";
|
||||||
|
import {
|
||||||
|
LineWithFrames,
|
||||||
|
SegmentWithFrames,
|
||||||
|
WordWithFrames,
|
||||||
|
} from "@/types/transcription";
|
||||||
|
import { CaptionStyleConfig } from "@/types/caption_style";
|
||||||
|
import { useTheme } from "@/hooks/useTheme";
|
||||||
|
|
||||||
|
loadFont();
|
||||||
|
|
||||||
|
const MIN_INTERPOLATE_SPAN = 0.001;
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// CSS theme mode (backward compat — no styleConfig)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
const CssWord = ({ text, isCurrent }: { text: string; isCurrent: boolean }) => (
|
||||||
|
<span className={isCurrent ? "word current-word" : "word"}>{text} </span>
|
||||||
|
);
|
||||||
|
|
||||||
|
const CssLine = ({
|
||||||
|
line,
|
||||||
|
currentWord,
|
||||||
|
}: {
|
||||||
|
line: LineWithFrames;
|
||||||
|
currentWord: WordWithFrames | null;
|
||||||
|
}) => {
|
||||||
|
if (!line.words.length) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="line">
|
||||||
|
{line.words.map((word, index) => {
|
||||||
|
const isCurrent = currentWord
|
||||||
|
? word.text === currentWord.text &&
|
||||||
|
word.time.start === currentWord.time.start
|
||||||
|
: false;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CssWord
|
||||||
|
key={`${index}-${word.text}`}
|
||||||
|
text={word.text}
|
||||||
|
isCurrent={isCurrent}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Inline style mode (with styleConfig)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
const StyledWord = ({
|
||||||
|
text,
|
||||||
|
isCurrent,
|
||||||
|
currentFrame,
|
||||||
|
wordFrameTime,
|
||||||
|
style,
|
||||||
|
}: {
|
||||||
|
text: string;
|
||||||
|
isCurrent: boolean;
|
||||||
|
currentFrame: number;
|
||||||
|
wordFrameTime: { start: number; end: number };
|
||||||
|
style: CaptionStyleConfig;
|
||||||
|
}) => {
|
||||||
|
const { text: textStyle, animation } = style;
|
||||||
|
|
||||||
|
const baseStyle: React.CSSProperties = {
|
||||||
|
fontFamily: `"${textStyle.font_family}", sans-serif`,
|
||||||
|
fontSize: textStyle.font_size,
|
||||||
|
fontWeight: textStyle.font_weight,
|
||||||
|
color: textStyle.text_color,
|
||||||
|
textShadow: textStyle.text_shadow || undefined,
|
||||||
|
display: "inline-block",
|
||||||
|
transition: "none",
|
||||||
|
};
|
||||||
|
|
||||||
|
if (textStyle.text_stroke_width > 0) {
|
||||||
|
baseStyle.WebkitTextStroke = `${textStyle.text_stroke_width}px ${textStyle.text_stroke_color}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isCurrent) {
|
||||||
|
baseStyle.color = textStyle.highlight_color;
|
||||||
|
|
||||||
|
// Highlight shadow for neon-like glow
|
||||||
|
if (textStyle.highlight_color !== textStyle.text_color && textStyle.text_shadow) {
|
||||||
|
const glowShadow = textStyle.text_shadow
|
||||||
|
.replace(/#[0-9a-fA-F]{3,8}/g, textStyle.highlight_color)
|
||||||
|
.replace(/rgba?\([^)]+\)/g, textStyle.highlight_color);
|
||||||
|
baseStyle.textShadow = glowShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
const needsScale =
|
||||||
|
animation.highlight_style === "scale" ||
|
||||||
|
animation.highlight_style === "color_scale";
|
||||||
|
|
||||||
|
if (needsScale) {
|
||||||
|
const wordDuration = wordFrameTime.end - wordFrameTime.start;
|
||||||
|
const scale =
|
||||||
|
wordDuration > MIN_INTERPOLATE_SPAN * 2
|
||||||
|
? interpolate(
|
||||||
|
currentFrame,
|
||||||
|
[
|
||||||
|
wordFrameTime.start,
|
||||||
|
wordFrameTime.start + wordDuration / 2,
|
||||||
|
wordFrameTime.end,
|
||||||
|
],
|
||||||
|
[1, animation.highlight_scale, 1],
|
||||||
|
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" },
|
||||||
|
)
|
||||||
|
: animation.highlight_scale;
|
||||||
|
baseStyle.transform = `scale(${scale})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (animation.highlight_style === "underline") {
|
||||||
|
const wordDuration = wordFrameTime.end - wordFrameTime.start;
|
||||||
|
const progress =
|
||||||
|
wordDuration > MIN_INTERPOLATE_SPAN
|
||||||
|
? interpolate(
|
||||||
|
currentFrame,
|
||||||
|
[wordFrameTime.start, wordFrameTime.end],
|
||||||
|
[0, 1],
|
||||||
|
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" },
|
||||||
|
)
|
||||||
|
: 1;
|
||||||
|
baseStyle.borderBottom = `2px solid ${textStyle.highlight_color}`;
|
||||||
|
baseStyle.borderImage = `linear-gradient(to right, ${textStyle.highlight_color} ${progress * 100}%, transparent ${progress * 100}%) 1`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return <span style={baseStyle}>{text} </span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const StyledLine = ({
|
||||||
|
line,
|
||||||
|
currentWord,
|
||||||
|
currentFrame,
|
||||||
|
style,
|
||||||
|
}: {
|
||||||
|
line: LineWithFrames;
|
||||||
|
currentWord: WordWithFrames | null;
|
||||||
|
currentFrame: number;
|
||||||
|
style: CaptionStyleConfig;
|
||||||
|
}) => {
|
||||||
|
if (!line.words.length) return null;
|
||||||
|
|
||||||
|
const lineStyle: React.CSSProperties = {
|
||||||
|
display: "flex",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
justifyContent: "center",
|
||||||
|
gap: 10,
|
||||||
|
marginBottom: 10,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={lineStyle}>
|
||||||
|
{line.words.map((word, index) => {
|
||||||
|
const isCurrent = currentWord
|
||||||
|
? word.text === currentWord.text &&
|
||||||
|
word.time.start === currentWord.time.start
|
||||||
|
: false;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledWord
|
||||||
|
key={`${index}-${word.text}`}
|
||||||
|
text={word.text}
|
||||||
|
isCurrent={isCurrent}
|
||||||
|
currentFrame={currentFrame}
|
||||||
|
wordFrameTime={word.frameTime}
|
||||||
|
style={style}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Main Captions export (dual mode)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export const Captions = ({
|
||||||
|
currentFrame,
|
||||||
|
currentWord,
|
||||||
|
currentSegment,
|
||||||
|
styleConfig,
|
||||||
|
theme = "neon",
|
||||||
|
}: {
|
||||||
|
currentFrame: number;
|
||||||
|
currentWord: WordWithFrames | null;
|
||||||
|
currentSegment: SegmentWithFrames | null;
|
||||||
|
styleConfig?: CaptionStyleConfig;
|
||||||
|
theme?: string;
|
||||||
|
}) => {
|
||||||
|
// CSS theme mode: load theme CSS, render with class names
|
||||||
|
const isStyleLoaded = useTheme(styleConfig ? "__skip__" : theme);
|
||||||
|
|
||||||
|
if (!styleConfig && !isStyleLoaded) return null;
|
||||||
|
|
||||||
|
const hasContent =
|
||||||
|
currentSegment &&
|
||||||
|
currentSegment.lines.some((line) => line.words.length > 0);
|
||||||
|
|
||||||
|
if (!hasContent || !currentSegment) return null;
|
||||||
|
|
||||||
|
const { start, end } = currentSegment.frameTime;
|
||||||
|
const fadeDuration = styleConfig
|
||||||
|
? styleConfig.animation.fade_duration_frames
|
||||||
|
: 3;
|
||||||
|
const segmentDuration = end - start;
|
||||||
|
const hasShortSegment = segmentDuration <= MIN_INTERPOLATE_SPAN * 2;
|
||||||
|
const middleFrame = start + segmentDuration / 2;
|
||||||
|
const fadeIn = Math.min(start + fadeDuration, end);
|
||||||
|
const fadeOut = Math.max(end - fadeDuration, start);
|
||||||
|
const hasFadePlateau = fadeOut - fadeIn > MIN_INTERPOLATE_SPAN;
|
||||||
|
|
||||||
|
// Segment transition
|
||||||
|
let opacity = 1;
|
||||||
|
let translateY = 0;
|
||||||
|
|
||||||
|
const transition = styleConfig?.animation.segment_transition ?? "fade";
|
||||||
|
|
||||||
|
if ((transition === "fade" || transition === "slide") && !hasShortSegment) {
|
||||||
|
opacity = interpolate(
|
||||||
|
currentFrame,
|
||||||
|
hasFadePlateau
|
||||||
|
? [start, fadeIn, fadeOut, end]
|
||||||
|
: [start, middleFrame, end],
|
||||||
|
hasFadePlateau ? [0, 1, 1, 0] : [0, 1, 0],
|
||||||
|
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transition === "slide" && !hasShortSegment) {
|
||||||
|
translateY = interpolate(
|
||||||
|
currentFrame,
|
||||||
|
hasFadePlateau
|
||||||
|
? [start, fadeIn, fadeOut, end]
|
||||||
|
: [start, middleFrame, end],
|
||||||
|
hasFadePlateau ? [20, 0, 0, -20] : [20, 0, -20],
|
||||||
|
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inline style mode
|
||||||
|
if (styleConfig) {
|
||||||
|
const { background } = styleConfig;
|
||||||
|
|
||||||
|
const segmentStyle: React.CSSProperties = {
|
||||||
|
opacity,
|
||||||
|
transform: translateY !== 0 ? `translateY(${translateY}px)` : undefined,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
textAlign: "center",
|
||||||
|
width: "100%",
|
||||||
|
padding: background.bg_padding_px,
|
||||||
|
background: background.bg_color,
|
||||||
|
borderRadius: background.bg_border_radius_px,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (background.bg_blur_px > 0) {
|
||||||
|
segmentStyle.backdropFilter = `blur(${background.bg_blur_px}px)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (background.bg_glow_color) {
|
||||||
|
segmentStyle.boxShadow = `0 0 20px ${background.bg_glow_color}, 0 0 40px ${background.bg_glow_color}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={segmentStyle}>
|
||||||
|
{currentSegment.lines.map((line, index) => (
|
||||||
|
<StyledLine
|
||||||
|
key={`${index}-${line.text}`}
|
||||||
|
line={line}
|
||||||
|
currentWord={currentWord}
|
||||||
|
currentFrame={currentFrame}
|
||||||
|
style={styleConfig}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// CSS theme mode
|
||||||
|
return (
|
||||||
|
<div className="segment" style={{ opacity }}>
|
||||||
|
{currentSegment.lines.map((line, index) => (
|
||||||
|
<CssLine
|
||||||
|
key={`${index}-${line.text}`}
|
||||||
|
line={line}
|
||||||
|
currentWord={currentWord}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { AbsoluteFill, useCurrentFrame } from "remotion";
|
||||||
|
import { useCaptions } from "@/hooks/useCaptions";
|
||||||
|
import { Captions } from "./Captions";
|
||||||
|
import { Video } from "@remotion/media";
|
||||||
|
import { CompositionProps } from "@/types/captions_composition";
|
||||||
|
|
||||||
|
const VERTICAL_ALIGN_MAP = {
|
||||||
|
top: "flex-start",
|
||||||
|
center: "center",
|
||||||
|
bottom: "flex-end",
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const CaptionsComposition: React.FC<CompositionProps> = ({
|
||||||
|
videoSrc,
|
||||||
|
transcription,
|
||||||
|
fps,
|
||||||
|
styleConfig,
|
||||||
|
}) => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const { currentWord, currentSegment } = useCaptions(
|
||||||
|
fps,
|
||||||
|
frame,
|
||||||
|
transcription,
|
||||||
|
);
|
||||||
|
|
||||||
|
const alignItems = styleConfig
|
||||||
|
? VERTICAL_ALIGN_MAP[styleConfig.layout.vertical_position]
|
||||||
|
: "center";
|
||||||
|
|
||||||
|
const padding = styleConfig ? styleConfig.layout.padding_px : undefined;
|
||||||
|
const maxWidth = styleConfig ? `${styleConfig.layout.max_width_pct}%` : undefined;
|
||||||
|
const justifyContent = styleConfig
|
||||||
|
? styleConfig.layout.horizontal_alignment
|
||||||
|
: "center";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill>
|
||||||
|
<AbsoluteFill>
|
||||||
|
<Video src={videoSrc} />
|
||||||
|
</AbsoluteFill>
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent,
|
||||||
|
alignItems,
|
||||||
|
padding,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ maxWidth, width: "100%" }}>
|
||||||
|
<Captions
|
||||||
|
currentFrame={frame}
|
||||||
|
currentWord={currentWord}
|
||||||
|
currentSegment={currentSegment}
|
||||||
|
styleConfig={styleConfig}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AbsoluteFill>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Composition } from "remotion";
|
||||||
|
import { CaptionsComposition } from "@/components/Composition";
|
||||||
|
import { getVideoMeta } from "@/hooks/useVideoMeta";
|
||||||
|
|
||||||
|
export const RemotionRoot: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Composition
|
||||||
|
id="CaptionedVideo"
|
||||||
|
component={CaptionsComposition}
|
||||||
|
defaultProps={{
|
||||||
|
videoSrc: "video.mp4",
|
||||||
|
transcription: { segments: [] },
|
||||||
|
fps: 30,
|
||||||
|
styleConfig: undefined,
|
||||||
|
}}
|
||||||
|
calculateMetadata={getVideoMeta}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
import { useMemo } from "react";
|
||||||
|
import { find, flatMap } from "lodash";
|
||||||
|
import {
|
||||||
|
LineNode,
|
||||||
|
SegmentNode,
|
||||||
|
SegmentWithFrames,
|
||||||
|
Transcription,
|
||||||
|
TranscriptionFramed,
|
||||||
|
WordNode,
|
||||||
|
WordWithFrames,
|
||||||
|
} from "@/types/transcription";
|
||||||
|
|
||||||
|
export const useCaptions = (
|
||||||
|
fps: number,
|
||||||
|
currentFrame: number,
|
||||||
|
transcription: Transcription | null,
|
||||||
|
) => {
|
||||||
|
const transcriptionWithFrames: TranscriptionFramed = useMemo(() => {
|
||||||
|
const addFrameTime = (node: SegmentNode | LineNode | WordNode) => {
|
||||||
|
const { start, end } = node.time;
|
||||||
|
return {
|
||||||
|
...node,
|
||||||
|
frameTime: { start: start * fps, end: end * fps },
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const segments =
|
||||||
|
transcription?.segments.map((segment) => ({
|
||||||
|
...addFrameTime(segment),
|
||||||
|
lines: segment.lines.map((line) => ({
|
||||||
|
...addFrameTime(line),
|
||||||
|
words: line.words.map((word) => addFrameTime(word)),
|
||||||
|
})),
|
||||||
|
})) || [];
|
||||||
|
|
||||||
|
return { segments };
|
||||||
|
}, [fps, transcription]);
|
||||||
|
|
||||||
|
const { currentSegment, currentWord } = useMemo(() => {
|
||||||
|
const isCurrentFrame = (node: SegmentWithFrames | WordWithFrames) => {
|
||||||
|
if (!node.frameTime) return false;
|
||||||
|
|
||||||
|
const { start, end } = node.frameTime;
|
||||||
|
return currentFrame >= start && currentFrame < end;
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentSegment =
|
||||||
|
find(transcriptionWithFrames?.segments, isCurrentFrame) ?? null;
|
||||||
|
|
||||||
|
const currentWord =
|
||||||
|
find(
|
||||||
|
flatMap(currentSegment?.lines, (line) => line.words),
|
||||||
|
isCurrentFrame,
|
||||||
|
) ?? null;
|
||||||
|
|
||||||
|
return { currentSegment, currentWord };
|
||||||
|
}, [currentFrame, transcriptionWithFrames]);
|
||||||
|
|
||||||
|
return { currentSegment, currentWord };
|
||||||
|
};
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { continueRender, delayRender } from "remotion";
|
||||||
|
|
||||||
|
export const useTheme = (theme: string) => {
|
||||||
|
const [isStyleLoaded, setIsStyleLoaded] = useState(theme === "__skip__");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// When using inline styles (styleConfig), skip CSS theme loading entirely
|
||||||
|
if (theme === "__skip__") {
|
||||||
|
setIsStyleLoaded(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const handle = delayRender(`Loading theme: ${theme}`);
|
||||||
|
|
||||||
|
import(`@/themes/${theme}.css`)
|
||||||
|
.then(() => {
|
||||||
|
setIsStyleLoaded(true);
|
||||||
|
continueRender(handle);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(`Failed to load theme: ${theme}`, err);
|
||||||
|
setIsStyleLoaded(true);
|
||||||
|
continueRender(handle);
|
||||||
|
});
|
||||||
|
}, [theme]);
|
||||||
|
|
||||||
|
return isStyleLoaded;
|
||||||
|
};
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import { CompositionProps } from "@/types/captions_composition";
|
||||||
|
import { parseMedia } from "@remotion/media-parser";
|
||||||
|
import { CalculateMetadataFunction } from "remotion";
|
||||||
|
|
||||||
|
const DEFAULT_FPS = 30;
|
||||||
|
const MIN_DURATION_FRAMES = 1;
|
||||||
|
|
||||||
|
export const getVideoMeta: CalculateMetadataFunction<
|
||||||
|
CompositionProps
|
||||||
|
> = async ({ props: { videoSrc } }) => {
|
||||||
|
const meta = await parseMedia({
|
||||||
|
src: videoSrc,
|
||||||
|
fields: {
|
||||||
|
slowDurationInSeconds: true,
|
||||||
|
dimensions: true,
|
||||||
|
fps: true,
|
||||||
|
},
|
||||||
|
acknowledgeRemotionLicense: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (meta.dimensions === null) {
|
||||||
|
throw new Error("File is not a valid video.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const fps = meta.fps ?? DEFAULT_FPS;
|
||||||
|
const durationInSeconds = meta.slowDurationInSeconds ?? 0;
|
||||||
|
const durationInFrames = Math.max(
|
||||||
|
Math.ceil(durationInSeconds * fps),
|
||||||
|
MIN_DURATION_FRAMES,
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
durationInFrames,
|
||||||
|
width: meta.dimensions.width,
|
||||||
|
height: meta.dimensions.height,
|
||||||
|
fps,
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
import { registerRoot } from "remotion";
|
||||||
|
import { RemotionRoot } from "@/components/Root";
|
||||||
|
|
||||||
|
registerRoot(RemotionRoot);
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
.segment {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.word {
|
||||||
|
font-family: "Lobster", sans-serif;
|
||||||
|
font-size: 40px;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-word {
|
||||||
|
color: #ffcc00;
|
||||||
|
transform: scale(1.1);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
.segment {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.word {
|
||||||
|
font-family: "Courier New", monospace;
|
||||||
|
font-size: 45px;
|
||||||
|
color: #0ff;
|
||||||
|
text-shadow:
|
||||||
|
0 0 5px #0ff,
|
||||||
|
0 0 10px #0ff,
|
||||||
|
0 0 20px #0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-word {
|
||||||
|
color: #f0f;
|
||||||
|
text-shadow:
|
||||||
|
0 0 5px #f0f,
|
||||||
|
0 0 10px #f0f,
|
||||||
|
0 0 20px #f0f;
|
||||||
|
transform: scale(1.2) rotate(-2deg);
|
||||||
|
}
|
||||||
Vendored
+41
@@ -0,0 +1,41 @@
|
|||||||
|
export type CaptionTextStyle = {
|
||||||
|
font_family: string;
|
||||||
|
font_size: number;
|
||||||
|
font_weight: number;
|
||||||
|
text_color: string;
|
||||||
|
highlight_color: string;
|
||||||
|
text_shadow: string | null;
|
||||||
|
text_stroke_width: number;
|
||||||
|
text_stroke_color: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type CaptionLayoutStyle = {
|
||||||
|
vertical_position: "top" | "center" | "bottom";
|
||||||
|
horizontal_alignment: "left" | "center" | "right";
|
||||||
|
padding_px: number;
|
||||||
|
max_width_pct: number;
|
||||||
|
lines_per_screen: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type CaptionAnimationStyle = {
|
||||||
|
highlight_style: "color" | "scale" | "underline" | "color_scale";
|
||||||
|
highlight_scale: number;
|
||||||
|
segment_transition: "fade" | "slide" | "none";
|
||||||
|
fade_duration_frames: number;
|
||||||
|
animation_speed: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type CaptionBackgroundStyle = {
|
||||||
|
bg_color: string;
|
||||||
|
bg_blur_px: number;
|
||||||
|
bg_glow_color: string | null;
|
||||||
|
bg_border_radius_px: number;
|
||||||
|
bg_padding_px: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type CaptionStyleConfig = {
|
||||||
|
text: CaptionTextStyle;
|
||||||
|
layout: CaptionLayoutStyle;
|
||||||
|
animation: CaptionAnimationStyle;
|
||||||
|
background: CaptionBackgroundStyle;
|
||||||
|
};
|
||||||
Vendored
+9
@@ -0,0 +1,9 @@
|
|||||||
|
import { Transcription } from "./transcription";
|
||||||
|
import { CaptionStyleConfig } from "./caption_style";
|
||||||
|
|
||||||
|
export type CompositionProps = {
|
||||||
|
videoSrc: string;
|
||||||
|
transcription: Transcription;
|
||||||
|
fps: number;
|
||||||
|
styleConfig?: CaptionStyleConfig;
|
||||||
|
};
|
||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
declare module "*.css";
|
||||||
Vendored
+58
@@ -0,0 +1,58 @@
|
|||||||
|
export type TimeRange = {
|
||||||
|
start: number;
|
||||||
|
end: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type StructureTag = {
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type WordNode = {
|
||||||
|
text: string;
|
||||||
|
semantic_tags: string[];
|
||||||
|
structure_tags: StructureTag[];
|
||||||
|
time: TimeRange;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LineNode = {
|
||||||
|
text: string;
|
||||||
|
semantic_tags: string[];
|
||||||
|
structure_tags: StructureTag[];
|
||||||
|
time: TimeRange;
|
||||||
|
words: WordNode[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type SegmentNode = {
|
||||||
|
text: string;
|
||||||
|
semantic_tags: string[];
|
||||||
|
structure_tags: StructureTag[];
|
||||||
|
time: TimeRange;
|
||||||
|
lines: LineNode[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Transcription = {
|
||||||
|
segments: SegmentNode[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type FrameTime = {
|
||||||
|
start: number;
|
||||||
|
end: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type WordWithFrames = WordNode & {
|
||||||
|
frameTime: TimeRange;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LineWithFrames = Omit<LineNode, "words"> & {
|
||||||
|
frameTime: TimeRange;
|
||||||
|
words: WordWithFrames[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type SegmentWithFrames = Omit<SegmentNode, "lines"> & {
|
||||||
|
frameTime: TimeRange;
|
||||||
|
lines: LineWithFrames[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type TranscriptionFramed = {
|
||||||
|
segments: SegmentWithFrames[];
|
||||||
|
};
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"module": "commonjs",
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"lib": ["ES2022"],
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"types": ["bun-types"],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"],
|
||||||
|
"@/public/*": ["./public/*"],
|
||||||
|
"@/srv/*": ["./server/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"exclude": ["remotion.config.ts"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user