nexus/packages/content-renderer/src/compositions/PitchDeck.tsx

41 lines
1.2 KiB
TypeScript

import React from "react";
import { AbsoluteFill, Series } from "remotion";
import { SlideFrame } from "../components/SlideFrame";
import { TitleSlide } from "../components/TitleSlide";
export interface Slide {
title: string;
body: string;
accent: string;
}
export interface PitchDeckProps {
slides: Slide[];
companyName: string;
}
const FRAMES_PER_SLIDE = 90;
export const PitchDeck: React.FC<PitchDeckProps> & {
calculateMetadata: (opts: { props: PitchDeckProps }) => { durationInFrames: number };
} = ({ slides, companyName }) => {
return (
<AbsoluteFill style={{ backgroundColor: "#0f0f0f" }}>
<Series>
{slides.map((slide, i) => (
<Series.Sequence key={i} durationInFrames={FRAMES_PER_SLIDE}>
{i === 0 && companyName ? (
<TitleSlide companyName={companyName} subtitle={slide.title} />
) : (
<SlideFrame slide={slide} slideIndex={i} total={slides.length} />
)}
</Series.Sequence>
))}
</Series>
</AbsoluteFill>
);
};
PitchDeck.calculateMetadata = ({ props }) => ({
durationInFrames: Math.max(props.slides.length * FRAMES_PER_SLIDE, FRAMES_PER_SLIDE),
});