import React from 'react';
import { Composition } from 'remotion';
import { VidnitiveCommercial } from './Scenes/VidnitiveCommercial';
import { UniversalCommercial } from './templates/UniversalCommercial';
import { DirectorConfig, DirectorConfigSchema } from './types/DirectorConfig';
import defaultConfig from '../mock_config.json';
export const RemotionRoot: React.FC = () => {
// Validate props at runtime to prevent crashes
const calculateMetadata = async ({ props }: { props: unknown }) => {
try {
// If props are empty (CLI didn't pass anything), use default
const configToValidate = Object.keys(props as object).length === 0 ? defaultConfig : props;
const parsed = DirectorConfigSchema.parse(configToValidate);
// Calculate Dynamic Duration
// Hook(150) + Solution(150) + Features(180 * N) + CTA(150)
const featureCount = parsed.script.features.length;
const calculatedDuration = 150 + 150 + (featureCount * 180) + 150;
return {
durationInFrames: parsed.durationInFrames || calculatedDuration,
props: parsed
};
} catch (e) {
console.error("❌ Invalid DirectorConfig:", e);
throw new Error("Invalid Configuration provided. Check inputs.");
}
};
return (
<>
<Composition
id="Commercial"
component={VidnitiveCommercial}
durationInFrames={600} // 10 seconds
fps={60}
width={1920}
height={1080}
/>
<Composition
id="AutoDirector"
component={UniversalCommercial}
durationInFrames={900}
fps={60}
width={1920}
height={1080}
defaultProps={defaultConfig as DirectorConfig}
calculateMetadata={calculateMetadata} // Enables dynamic duration and validation
/>
</>
);
};
