Add pages

src/Compositions.tsx

@@ -57,7 +57,7 @@ export const Compositions: React.FC = () => {
         Script.transcript
             .sort((t, u) => t.index - u.index)
             .filter(item => item.audioCaptionFile != undefined)
-            // .slice(0, 2)
+            .slice(0, 2)
             .map((section) => {
                 var { text, duration: durationMilis, offset, imageAbsPaths, audioFullPath, title, pointers } = section
                 if (!durationMilis) {

src/paperdrive/PaperDriveComposition.tsx

@@ -1,25 +1,12 @@
-import { AbsoluteFill, Audio, Easing, Img, interpolate, staticFile, useCurrentFrame } from 'remotion';
-import React from 'react'
-import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
 import { Series } from "remotion";
-import { IGScene } from '../ig-reel/IGSimpleScene';
-import { OriginalManuscript, Transcript } from 'common-utils';
-import TransitionSeries from 'remotion-transition-series';
-import { VideoSplash } from '../anims/VideoSplash';
-import Transitions from '../../public/assets/transitions.json'
-import { RenderUtils } from '../RenderUtils';
-import GeneralSubtitles from '../subtitles/general_Subtitles';
+import { OriginalManuscript } from 'common-utils';
 import { PaperDrivePage } from './PaperDrivePage';
 import { PaperDriveIndex } from './PaperDriveIndex';
 
 export const PaperDriveComposition = (props: OriginalManuscript) => {
-  const { fontFamily } = loadFont();
-  let { meta, bgMusic, bgMusicDuration } = props
-  let transcripts: Transcript[] = props.transcript
+  let { meta } = props
   let fps = meta.fps
-  let frame = useCurrentFrame()
   return (
-
     <Series>
       <Series.Sequence durationInFrames={props.transcript[0].durationInSeconds * fps}>
         <PaperDriveIndex transcript={props.transcript[0]} />
@@ -33,8 +20,6 @@ export const PaperDriveComposition = (props: OriginalManuscript) => {
           )
         })
       }
-
     </Series>
-
   );
 };

src/paperdrive/PaperDrivePage.tsx

@@ -48,7 +48,7 @@ export type PaperDrivePageExtras = {
 export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
   const extras = transcript.extras as PaperDrivePageExtras
   const qrImageBlend = extras?.qr?.logo
-  const defaultQrSize = 300
+  const defaultQrSize = RenderUtils.convertVHToPixels(extras?.marginTop ?? '10vh')
   const logo = qrImageBlend ? staticFile(RenderUtils.getFileName(qrImageBlend)!) : undefined
   const watermark = transcript.imageAbsPaths?.[0]
   let watermarkPath = undefined
@@ -100,6 +100,7 @@ export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
 
       <QRCode
         style={extras?.qr?.position ?? {
+          zIndex: 1000,
           position: 'absolute',
           top: 0,
           right: 0