1import { AbsoluteFill, Series, useVideoConfig } from "remotion";
2import { ProgressBar } from "./ProgressBar";
3import { CodeTransition } from "./CodeTransition";
4import { HighlightedCode } from "codehike/code";
5import { ThemeColors, ThemeProvider } from "./calculate-metadata/theme";
6import { useMemo } from "react";
7import { RefreshOnCodeChange } from "./ReloadOnCodeChange";
8import { verticalPadding } from "./font";
9
10export type Props = {
11  steps: HighlightedCode[] | null;
12  themeColors: ThemeColors | null;
13  codeWidth: number | null;
14};
15
16export const Main: React.FC<Props> = ({ steps, themeColors, codeWidth }) => {
17  if (!steps) {
18    throw new Error("Steps are not defined");
19  }
20
21  const { durationInFrames } = useVideoConfig();
22  const stepDuration = durationInFrames / steps.length;
23  const transitionDuration = 30;
24
25  if (!themeColors) {
26    throw new Error("Theme colors are not defined");
27  }
28
29  const outerStyle: React.CSSProperties = useMemo(() => {
30    return {
31      backgroundColor: themeColors.background,
32    };
33  }, [themeColors]);
34
35  const style: React.CSSProperties = useMemo(() => {
36    return {
37      padding: `${verticalPadding}px 0px`,
38    };
39  }, []);
40
41  return (
42    <ThemeProvider themeColors={themeColors}>
43      <AbsoluteFill style={outerStyle}>
44        <AbsoluteFill
45          style={{
46            width: codeWidth || "100%",
47            margin: "auto",
48          }}
49        >
50          <ProgressBar steps={steps} />
51          <AbsoluteFill style={style}>
52            <Series>
53              {steps.map((step, index) => (
54                <Series.Sequence
55                  key={index}
56                  layout="none"
57                  durationInFrames={stepDuration}
58                  name={step.meta}
59                >
60                  <CodeTransition
61                    oldCode={steps[index - 1]}
62                    newCode={step}
63                    durationInFrames={transitionDuration}
64                  />
65                </Series.Sequence>
66              ))}
67            </Series>
68          </AbsoluteFill>
69        </AbsoluteFill>
70      </AbsoluteFill>
71      <RefreshOnCodeChange />
72    </ThemeProvider>
73  );
74};
75