remotion/Root.tsx

/**
 * Remotion Root - Entry point for Render Server
 * 
 * Uses SSRComposition from the copied player folder.
 */

import React from "react";
import { Composition } from "remotion";
import { SSRComposition } from "../src/player/ssr-composition";

// Default design types
interface IDesign {
    id?: string;
    size?: { width: number; height: number };
    fps?: number;
    trackItemIds?: string[];
    trackItemsMap?: Record<string, unknown>;
    tracks?: unknown[];
    transitionIds?: string[];
    transitionsMap?: Record<string, unknown>;
    duration?: number;
    background?: string | { value: string };
}

interface ITrackItem {
    display?: { from: number; to: number };
}

// Default empty design
const defaultDesign: IDesign = {
    id: "default",
    size: { width: 1920, height: 1080 },
    fps: 30,
    trackItemIds: [],
    trackItemsMap: {},
    tracks: [],
    transitionIds: [],
    transitionsMap: {},
    duration: 5000,
};

// Calculate actual duration from track items
const calculateDesignDuration = (design: IDesign): number => {
    const trackItems = Object.values(design.trackItemsMap || {}) as ITrackItem[];

    if (trackItems.length === 0) {
        return design.duration || 5000;
    }

    const maxEndTime = Math.max(
        ...trackItems.map(item => item.display?.to || 0)
    );

    return maxEndTime || design.duration || 5000;
};

export const RemotionRoot: React.FC = () => {
    return (
        <>
            <Composition
                id="VEditor"
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                component={SSRComposition as React.ComponentType<any>}
                durationInFrames={150}
                fps={30}
                width={1920}
                height={1080}
                defaultProps={{
                    design: defaultDesign,
                }}
                calculateMetadata={async ({ props }) => {
                    const design = (props as { design: IDesign }).design;
                    const fps = design.fps || 30;

                    const durationMs = calculateDesignDuration(design);
                    const durationInFrames = Math.max(1, Math.ceil((durationMs / 1000) * fps));

                    console.log('[Remotion] Metadata:', {
                        durationMs,
                        durationInFrames,
                        fps,
                        width: design.size?.width || 1920,
                        height: design.size?.height || 1080,
                    });

                    return {
                        durationInFrames,
                        fps,
                        width: design.size?.width || 1920,
                        height: design.size?.height || 1080,
                    };
                }}
            />
        </>
    );
};