Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/layouts/StackedReaction/template.tsx.j2 */} import React from 'react'; import { AbsoluteFill, useCurrentFrame } from 'remotion'; interface StackedReactionProps { original_content?: React.ReactNode; reaction_content?: React.ReactNode; startFrame: number; durationInFrames: number; layout?: string; reaction_size?: number; padding?: number; gap?: number; border_width?: number; border_color?: string; border_radius?: number; } export const StackedReaction: React.FC<StackedReactionProps> = ({ original_content, reaction_content, startFrame, durationInFrames, layout = 'vertical', reaction_size = 40, padding = parseInt('[[ spacing.spacing.xl ]]'), gap = parseInt('[[ spacing.spacing.md ]]'), border_width, border_color = '[[ colors.border.light ]]', border_radius = parseInt('[[ spacing.border_radius.md ]]') }) => { const frame = useCurrentFrame(); if (frame < startFrame || frame >= startFrame + durationInFrames) { return null; } const original_size = 100 - reaction_size; const renderVertical = () => ( <> {reaction_content && ( <div style={{ width: '100%', height: `${reaction_size}%`, display: 'flex', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), }}> {reaction_content} </div> )} {original_content && ( <div style={{ width: '100%', height: `${original_size}%`, display: 'flex', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), }}> {original_content} </div> )} </> ); const renderHorizontal = () => ( <> {reaction_content && ( <div style={{ width: `${reaction_size}%`, height: '100%', display: 'flex', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), }}> {reaction_content} </div> )} {original_content && ( <div style={{ width: `${original_size}%`, height: '100%', display: 'flex', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), }}> {original_content} </div> )} </> ); const renderPiP = () => ( <> {original_content && ( <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', overflow: 'hidden', }}> {original_content} </div> )} {reaction_content && ( <div style={{ position: 'absolute', top: padding, right: padding, width: `${reaction_size}%`, aspectRatio: '16/9', display: 'flex', overflow: 'hidden', border: `${border_width || parseInt('[[ spacing.border_width.medium ]]')}px solid ${border_color}`, borderRadius: border_radius, zIndex: 10, }}> {reaction_content} </div> )} </> ); return ( <AbsoluteFill style={{ pointerEvents: 'none' }}> <div style={{ position: 'absolute', top: layout === 'pip' ? 0 : padding, left: layout === 'pip' ? 0 : padding, right: layout === 'pip' ? 0 : padding, bottom: layout === 'pip' ? 0 : padding, display: 'flex', flexDirection: layout === 'horizontal' ? 'row' : 'column', gap: layout === 'pip' ? 0 : gap, width: layout === 'pip' ? '100%' : `calc(100% - ${padding * 2}px)`, height: layout === 'pip' ? '100%' : `calc(100% - ${padding * 2}px)`, }} > {layout === 'vertical' && renderVertical()} {layout === 'horizontal' && renderHorizontal()} {layout === 'pip' && renderPiP()} </div> </AbsoluteFill> ); };