33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { Composition } from 'remotion';
|
|
import { WebsiteVideo } from './WebsiteVideo';
|
|
import sessionData from './session.json';
|
|
import { RecordingSession } from '../types/record-mode';
|
|
|
|
const FPS = 60;
|
|
|
|
export const RemotionRoot: React.FC = () => {
|
|
// Calculate duration based on last event + padding
|
|
const durationMs = (sessionData as unknown as RecordingSession).events.reduce((max, e) => {
|
|
return Math.max(max, e.timestamp + (e.duration || 1000));
|
|
}, 0);
|
|
const durationInFrames = Math.ceil((durationMs + 2000) / 1000 * FPS);
|
|
|
|
return (
|
|
<>
|
|
<Composition
|
|
id="WebsiteVideo"
|
|
component={WebsiteVideo}
|
|
durationInFrames={durationInFrames}
|
|
fps={FPS}
|
|
width={1920}
|
|
height={1080}
|
|
defaultProps={{
|
|
session: sessionData as unknown as RecordingSession,
|
|
siteUrl: 'http://localhost:3000'
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
};
|