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>
  );
};