Fixes to paperdrive template

src/paperdrive/PaperDriveHorizontalCoverComposition.tsx

@@ -59,6 +59,8 @@ export function PaperDriveFrontCover({ transcript, style }: { transcript: Transc
     return (
         <div style={{
             backgroundColor: extras?.backgroundColor ?? "black",
+            backgroundSize: extras?.backgroundImage ? `100% 100%` : undefined,
+            backgroundImage: extras?.backgroundImage ? `url(${staticFile(RenderUtils.getFileName(extras?.backgroundImage!)!)})` : undefined,
             ...style
         }}>
             <div style={{
@@ -87,7 +89,7 @@ export function PaperDriveFrontCover({ transcript, style }: { transcript: Transc
                         </h1>
                     }
                     {
-                        extras?.header?.graphic && (
+                        extras?.header?.graphic?.source && (
                             <Img
                                 src={staticFile(RenderUtils.getFileName(extras?.header?.graphic?.source)!)}
                                 style={{
@@ -96,19 +98,21 @@ export function PaperDriveFrontCover({ transcript, style }: { transcript: Transc
                         )
                     }
                 </div>
-                <center>
+                <center style={{
+                    marginLeft: -50
+                }}>
 
                     <QRCode
                         style={extras?.qr?.position ?? {
                             zIndex: 1000,
                             position: 'absolute',
                             top: 50,
-                            left: 50
+                            left: 40
                         }}
                         bgColor={extras?.qr?.backgroundColor ?? 'transparent'}
                         fgColor={extras?.qr?.color ?? 'black'}
                         size={qrSize ?? defaultQrSize}
-                        value={extras?.url}
+                        value={extras?.qr?.url}
                         qrStyle={extras?.qr?.qrStyle ?? 'squares'}
                         logoImage={logo}
                         logoWidth={qrSize ?? defaultQrSize}

src/paperdrive/PaperDrivePage.tsx

@@ -70,7 +70,7 @@ export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
         }}
         fgColor={extras?.qr?.color ?? 'black'}
         size={qrSize ?? defaultQrSize}
-        value={extras?.url}
+        value={extras?.qr?.url}
         qrStyle={extras?.qr?.qrStyle ?? 'squares'}
         logoImage={logo}
         logoWidth={qrSize ?? defaultQrSize}

src/paperdrive/types/index.ts

@@ -1,15 +1,16 @@
 import { CSSProperties } from "react";
 
 export type PaperDrivePageExtras = {
-  backgroundColor: string;
+  backgroundColor?: string;
+  backgroundImage?: string;
   marginBottom: string;
-  url: string,
   leftMarginLineColor?: string,
   lineColor?: string,
   marginLeft: string // "10%"
   marginTop: string // "10%"
   template?: "page" | "index" | "front-cover" | "back-cover"
   qr?: { // only for "page"
+    url: string,
     logoOpacity?: number;
     logo?: string;
     color?: string | undefined;

src/youtube/MediaBackground.tsx

@@ -10,8 +10,16 @@ import {
 import { getVideoMetadata } from "@remotion/media-utils";
 
 import { useTranslate } from "../anims/useTranslate";
-
-export const MediaBackground: React.FC = (props) => {
+export type MediaBackgroundProps = {
+    children?: React.ReactNode;
+    duration: number;
+    direction?: 'left' | 'right';
+    bgImagePaths?: { path: string }[];
+    emphasisOnImage?: boolean;
+    opacity?: number;
+    muted?: boolean;
+};
+export const MediaBackground = (props: MediaBackgroundProps) => {
 
     let { children, duration, direction, bgImagePaths, emphasisOnImage, opacity, muted = true } = props