ugcinc 3.84.6 → 3.85.1

package/dist/render/components/CaptionOverlay.js

@@ -0,0 +1,210 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptionOverlay = CaptionOverlay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * CaptionOverlay Component
+ *
+ * Renders TikTok-style animated captions over video content.
+ * Features:
+ * - Word-by-word highlighting based on current playback time
+ * - Proper text wrapping within configurable maxWidth bounds
+ * - Vertical positioning (top/center/bottom) with offset
+ * - Optional background with opacity and border radius
+ * - Optional bounce animation on active word
+ *
+ * This component is designed for use in both:
+ * - Remotion compositions (server-side rendering)
+ * - Client-side preview (with previewTimeMs override)
+ */
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+/**
+ * Group words into pages based on wordsPerPage
+ *
+ * Each page contains up to wordsPerPage words and spans
+ * from the first word's start time to the last word's end time.
+ */
+function createPages(words, wordsPerPage) {
+    const pages = [];
+    for (let i = 0; i < words.length; i += wordsPerPage) {
+        const pageWords = words.slice(i, i + wordsPerPage);
+        const firstWord = pageWords[0];
+        const lastWord = pageWords[pageWords.length - 1];
+        if (firstWord && lastWord) {
+            pages.push({
+                words: pageWords,
+                startMs: firstWord.startMs,
+                endMs: lastWord.endMs,
+            });
+        }
+    }
+    return pages;
+}
+/**
+ * Convert hex color to rgba with opacity
+ */
+function hexToRgba(hex, opacity) {
+    const cleanHex = hex.replace('#', '');
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+/**
+ * CaptionOverlay renders animated captions synchronized with video playback
+ */
+function CaptionOverlay({ captions, style, previewTimeMs }) {
+    const frame = (0, remotion_1.useCurrentFrame)();
+    const { fps, width, height } = (0, remotion_1.useVideoConfig)();
+    // Calculate current time in milliseconds
+    // Use previewTimeMs if provided (for client preview), otherwise derive from frame
+    const currentMs = previewTimeMs ?? (frame / fps) * 1000;
+    // Create pages from words based on wordsPerPage setting
+    const pages = (0, react_1.useMemo)(() => createPages(captions, style.wordsPerPage), [captions, style.wordsPerPage]);
+    // Find the page that should be displayed at the current time
+    const currentPage = pages.find(page => currentMs >= page.startMs && currentMs <= page.endMs);
+    // Don't render anything if no page is active
+    if (!currentPage)
+        return null;
+    // Calculate max width in pixels from percentage
+    const maxWidthPx = (style.maxWidth / 100) * width;
+    const horizontalMargin = (width - maxWidthPx) / 2;
+    console.log(`[CaptionOverlay] style.maxWidth: ${style.maxWidth}%, video width: ${width}px, calculated maxWidthPx: ${maxWidthPx}px`);
+    // Scale values based on video height (designed for 1920p)
+    const scaleFactor = height / 1920;
+    const scaledFontSize = style.fontSize * scaleFactor;
+    const scaledStrokeWidth = style.strokeWidth * scaleFactor;
+    const scaledYOffset = style.yOffset * scaleFactor;
+    const scaledBorderRadius = (style.backgroundBorderRadius ?? 0) * scaleFactor;
+    // Build position styles based on vertical position setting
+    // Uses left/right margins instead of transform for accurate edge alignment
+    const getPositionStyles = () => {
+        const base = {
+            position: 'absolute',
+            left: horizontalMargin,
+            right: horizontalMargin,
+        };
+        switch (style.position) {
+            case 'top':
+                return {
+                    ...base,
+                    top: scaledYOffset,
+                };
+            case 'center':
+                return {
+                    ...base,
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                };
+            case 'bottom':
+            default:
+                return {
+                    ...base,
+                    bottom: scaledYOffset,
+                };
+        }
+    };
+    // Container styles
+    const containerStyles = {
+        ...getPositionStyles(),
+        textAlign: 'center',
+        // Add padding if background is enabled
+        padding: style.backgroundColor
+            ? `${scaledFontSize * 0.3}px ${scaledFontSize * 0.5}px`
+            : 0,
+        // Background styling
+        backgroundColor: style.backgroundColor
+            ? hexToRgba(style.backgroundColor, style.backgroundOpacity ?? 0.7)
+            : 'transparent',
+        borderRadius: scaledBorderRadius,
+    };
+    // Convert font weight to numeric value
+    const numericFontWeight = style.fontWeight === 'black' ? 900 : style.fontWeight === 'bold' ? 700 : 400;
+    // Build text stroke shadow
+    const buildStrokeShadow = () => {
+        if (scaledStrokeWidth <= 0)
+            return 'none';
+        const sw = scaledStrokeWidth;
+        const sc = style.strokeColor;
+        // Create a multi-layer shadow for stroke effect
+        return `
+      -${sw}px -${sw}px 0 ${sc},
+      ${sw}px -${sw}px 0 ${sc},
+      -${sw}px ${sw}px 0 ${sc},
+      ${sw}px ${sw}px 0 ${sc},
+      0 -${sw}px 0 ${sc},
+      0 ${sw}px 0 ${sc},
+      -${sw}px 0 0 ${sc},
+      ${sw}px 0 0 ${sc}
+    `;
+    };
+    // Text container styles
+    const textContainerStyles = {
+        fontFamily: `"${style.fontName}", sans-serif`,
+        fontSize: scaledFontSize,
+        fontWeight: numericFontWeight,
+        lineHeight: 1.2,
+        wordBreak: 'break-word',
+        textShadow: buildStrokeShadow(),
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyles, children: (0, jsx_runtime_1.jsx)("div", { style: textContainerStyles, children: currentPage.words.map((word, index) => {
+                // Determine if this word is currently being spoken
+                const isActive = currentMs >= word.startMs && currentMs <= word.endMs;
+                // Select color based on active state
+                const color = isActive ? style.highlightColor : style.fontColor;
+                // Calculate animation scale for active word
+                let scale = 1;
+                if (style.enableAnimation && isActive) {
+                    const wordDuration = word.endMs - word.startMs;
+                    if (wordDuration > 0) {
+                        const progress = (currentMs - word.startMs) / wordDuration;
+                        // Bounce effect: scale up quickly then settle back
+                        scale = (0, remotion_1.interpolate)(progress, [0, 0.15, 0.3, 1], [1, 1.15, 1.05, 1], {
+                            extrapolateLeft: 'clamp',
+                            extrapolateRight: 'clamp',
+                        });
+                    }
+                }
+                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                color,
+                                display: 'inline-block',
+                                transform: `scale(${scale})`,
+                                transformOrigin: 'center center',
+                            }, children: word.word }), index < currentPage.words.length - 1 && ' '] }, `${word.word}-${word.startMs}-${index}`));
+            }) }) }));
+}
+exports.default = CaptionOverlay;

package/dist/render/components/ImageElement.d.ts

@@ -0,0 +1,26 @@
+/**
+ * ImageElement Component
+ *
+ * Renders an image segment with fit modes, opacity, rotation, border radius, and fade-in.
+ * Uses CSS object-fit for consistent behavior between client and server.
+ */
+import type { ImageSegment } from '../types';
+export interface ImageElementProps {
+    segment: ImageSegment;
+    /** The source URL of the image */
+    src: string;
+    /** Start frame of this segment in the composition (needed for fade-in) */
+    startFrame?: number;
+    /** Optional scale for high-DPI rendering */
+    scale?: number;
+}
+/**
+ * ImageElement renders images with:
+ * - Fit modes (cover, contain, fill)
+ * - Opacity
+ * - Rotation
+ * - Border radius (uniform or per-corner)
+ * - Fade-in effect
+ */
+export declare function ImageElement({ segment, src, startFrame, scale }: ImageElementProps): import("react/jsx-runtime").JSX.Element;
+export default ImageElement;

package/dist/render/components/ImageElement.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageElement = ImageElement;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ImageElement Component
+ *
+ * Renders an image segment with fit modes, opacity, rotation, border radius, and fade-in.
+ * Uses CSS object-fit for consistent behavior between client and server.
+ */
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const defaults_1 = require("../utils/defaults");
+const text_1 = require("../utils/text");
+/**
+ * Map FitMode to CSS object-fit
+ */
+function fitModeToCss(fit) {
+    return fit;
+}
+/**
+ * ImageElement renders images with:
+ * - Fit modes (cover, contain, fill)
+ * - Opacity
+ * - Rotation
+ * - Border radius (uniform or per-corner)
+ * - Fade-in effect
+ */
+function ImageElement({ segment, src, startFrame = 0, scale = 1 }) {
+    const frame = (0, remotion_1.useCurrentFrame)();
+    const { fps } = (0, remotion_1.useVideoConfig)();
+    // Apply defaults
+    const fit = segment.fit ?? defaults_1.IMAGE_DEFAULTS.fit;
+    const opacity = (segment.opacity ?? defaults_1.VISUAL_DEFAULTS.opacity) / 100;
+    const rotation = segment.rotation ?? 0;
+    const borderRadius = segment.borderRadius;
+    const fadeIn = segment.fadeIn ?? 0;
+    // Position and size
+    const x = segment.xOffset * scale;
+    const y = segment.yOffset * scale;
+    const width = segment.width * scale;
+    const height = segment.height * scale;
+    // Calculate fade-in opacity
+    const fadeOpacity = (0, react_1.useMemo)(() => {
+        if (fadeIn <= 0)
+            return 1;
+        const framesFromStart = frame - startFrame;
+        const fadeInFrames = (fadeIn / 1000) * fps;
+        if (framesFromStart >= fadeInFrames)
+            return 1;
+        if (framesFromStart <= 0)
+            return 0;
+        return framesFromStart / fadeInFrames;
+    }, [frame, startFrame, fadeIn, fps]);
+    // Calculate border radius CSS
+    const borderRadiusStyle = (0, react_1.useMemo)(() => {
+        if (!borderRadius)
+            return undefined;
+        if (typeof borderRadius === 'number') {
+            return `${borderRadius * scale}px`;
+        }
+        const radii = (0, text_1.getBorderRadii)(borderRadius);
+        if (!radii || radii.length < 4)
+            return undefined;
+        return `${radii[0] * scale}px ${radii[1] * scale}px ${radii[2] * scale}px ${radii[3] * scale}px`;
+    }, [borderRadius, scale]);
+    // Container style
+    const containerStyle = (0, react_1.useMemo)(() => ({
+        position: 'absolute',
+        left: x,
+        top: y,
+        width,
+        height,
+        transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+        transformOrigin: 'center center',
+        overflow: 'hidden',
+        borderRadius: borderRadiusStyle,
+        opacity: opacity * fadeOpacity,
+    }), [x, y, width, height, rotation, borderRadiusStyle, opacity, fadeOpacity]);
+    // Image style
+    const imageStyle = (0, react_1.useMemo)(() => ({
+        width: '100%',
+        height: '100%',
+        objectFit: fitModeToCss(fit),
+    }), [fit]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: src, style: imageStyle }) }));
+}
+exports.default = ImageElement;

package/dist/render/components/TextElement.d.ts

@@ -0,0 +1,30 @@
+/**
+ * TextElement Component
+ *
+ * Renders a text segment using HTML/CSS for pixel-perfect consistency
+ * between client preview and server render.
+ */
+import type { TextSegment } from '../types';
+export interface TextElementProps {
+    segment: TextSegment;
+    /** Optional scale for high-DPI rendering */
+    scale?: number;
+}
+/**
+ * TextElement renders text with full styling support including:
+ * - Font family, size, weight, color
+ * - Letter spacing, line height
+ * - Horizontal and vertical alignment
+ * - Text stroke/outline
+ * - Background with opacity and border radius
+ * - Padding (uniform and individual)
+ * - Auto-width with box alignment
+ * - Rotation
+ *
+ * When autoWidth is enabled:
+ * - Text wraps at maxWidth (the element's width)
+ * - Background shrinks to the widest line
+ * - boxAlign positions the box within the maxWidth container
+ */
+export declare function TextElement({ segment, scale }: TextElementProps): import("react/jsx-runtime").JSX.Element;
+export default TextElement;