src/paperdrive/PaperDriveComposition.tsx

import { Series } from "remotion";
import { OriginalManuscript } from 'common-utils';
import { PaperDrivePage } from './PaperDrivePage';
import { PaperDriveIndex } from './PaperDriveIndex';
import { PaperDrivePageExtras } from "./types";

export const PaperDriveComposition = (props: OriginalManuscript) => {
  let { meta } = props
  let fps = meta.fps
  return (
    <Series>
      {
        props.transcript
          .filter(transcript => ['index', 'page'].includes(transcript.extras?.template))
          .map(transcript => {
            const extras = transcript.extras as PaperDrivePageExtras
            let page = undefined
            if (extras.template == 'index') {
              page = <PaperDriveIndex transcript={transcript} />
            }
            else if (extras.template == 'page') {
              page = <PaperDrivePage transcript={transcript} />
            }
            if (page == undefined) {
              return undefined
            }
            return (
              <Series.Sequence durationInFrames={transcript.durationInSeconds * fps}>
                {page}
              </Series.Sequence>
            )
          })
      }
    </Series>
  );
};