Create paper drive page template

src/RenderUtils.ts

@@ -19,6 +19,14 @@ function levenshteinDistance(str1: string, str2: string) {
 }
 export class RenderUtils {
 
+  public static convertVHToPixels(vh: string) {
+    return Math.round(window.innerHeight * (parseInt(vh.replace("vh", "")) / 100));
+  }
+
+  public static convertVWToPixels(vw: string) {
+    return Math.round(window.innerWidth * (parseInt(vw.replace("vw", "")) / 100));
+  }
+
   public static splitWordsIntoGroups(words: any) {
     const groups = [];
     let currentGroup = [];

src/paperdrive/PaperDrivePage.tsx

@@ -1,19 +1,24 @@
 import { Transcript } from "common-utils"
-import React from "react"
-import { AbsoluteFill, staticFile } from "remotion"
+import React, { CSSProperties } from "react"
+import { AbsoluteFill, Img, staticFile } from "remotion"
 import { QRCode } from 'react-qrcode-logo';
 import { RenderUtils } from '../RenderUtils';
+import { loadFont as loadLato } from "@remotion/google-fonts/Lato";
+import { loadFont as loadPoppins } from "@remotion/google-fonts/Poppins";
 
 export type PaperDrivePageExtras = {
+  backgroundColor: string;
   marginBottom: string;
   url: string,
   leftMarginLineColor?: string,
   lineColor?: string,
+  marginLeft: string // "10%"
+  marginTop: string // "10%"
   qr?: {
     logoOpacity?: number;
-    showLogo?: any;
+    logo?: string;
     color?: string | undefined;
-    size?: number //200
+    size?: string //200 10vh 10vw
     qrStyle?: "squares" | "dots" | "fluid"
     position?: {
       position: "static" | "relative" | "absolute" | "sticky" | "fixed" // "right"
@@ -23,56 +28,178 @@ export type PaperDrivePageExtras = {
       right?: number // 0
     }
   },
-  marginLeft: string // "10%"
-  marginTop: string // "10%"
+  header?: {
+    underline_style?: CSSProperties
+    fontFamily?: string // Lato, sans-serif
+    color?: string // black
+    text_title?: string // Title
+    text_date?: string // Date
+    text_page?: string // Page
+  },
+  footer: {
+    text?: string // Lorem ipsum dolor
+    text_style?: CSSProperties
+  }
+
 }
 export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
   const extras = transcript.extras as PaperDrivePageExtras
-  const qrImageBlend = transcript.imageAbsPaths?.[0]?.path
+  const qrImageBlend = extras?.qr?.logo
   const defaultQrSize = 300
   const logo = qrImageBlend ? staticFile(RenderUtils.getFileName(qrImageBlend)!) : undefined
+  const watermark = transcript.imageAbsPaths?.[0]
+  let watermarkPath = undefined
+  if (watermark) {
+    watermarkPath = staticFile(RenderUtils.getFileName(watermark.path)!)
+  }
+  loadLato();
+  loadPoppins();
+
+  let qrSize = defaultQrSize
+  if (extras.qr?.size?.includes("vh")) {
+    qrSize = RenderUtils.convertVHToPixels(extras.qr?.size)
+  } else if (extras.qr?.size?.includes("vw")) {
+    qrSize = RenderUtils.convertVWToPixels(extras.qr?.size)
+  } else if (extras.qr?.size) {
+    qrSize = parseInt(extras.qr?.size)
+  }
+
+
   return (
     <AbsoluteFill style={{
-      background: 'white',
-      paddingTop: extras.marginTop ?? '10%',
-      paddingBottom: extras.marginBottom ?? '5%',
+      zIndex: -11,
+      background: extras?.backgroundColor ?? 'white',
+      paddingTop: extras.marginTop ?? '10vh',
+      paddingBottom: extras.marginBottom ?? '10vh',
     }}>
+      {
+        watermarkPath &&
+        <Img src={watermarkPath}
+          style={{
+            zIndex: -10,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover'
+          }} />
+      }
       <AbsoluteFill style={{
-        background: 'white',
+        zIndex: 10,
         position: 'relative',
-        padding: '20px', // Add padding for some spacing
-        backgroundImage: `linear-gradient(to bottom, transparent 94%, ${extras.lineColor ?? 'lightgray'} 94%)`, // Horizontal lines
-        backgroundSize: '100% 30px' // Distance between lines
+        padding: '20px',
+        backgroundImage: `linear-gradient(to bottom, transparent 94%, ${extras.lineColor ?? 'lightgray'} 94%)`,
+        backgroundSize: '100% 30px'
       }}>
       </AbsoluteFill>
 
-      <div style={extras.qr?.position ?? {
+      <QRCode
+        style={extras.qr?.position ?? {
+          position: 'absolute',
+          top: 0,
+          right: 0
+        }}
+        fgColor={extras.qr?.color ?? 'black'}
+        size={qrSize ?? defaultQrSize}
+        value={extras.url}
+        qrStyle={extras.qr?.qrStyle ?? 'squares'}
+        logoImage={logo}
+        logoWidth={qrSize ?? defaultQrSize}
+        logoHeight={qrSize ?? defaultQrSize}
+        logoOpacity={extras.qr?.logoOpacity ?? 0.1}
+        removeQrCodeBehindLogo={false}
+      />
+      <div style={{
         position: 'absolute',
-        top: 0,
-        right: 0
+        top: '0',
+        left: extras.marginLeft ?? '10%',
+        paddingLeft: 20,
+        height: extras.marginTop,
       }}>
-        <QRCode
-          fgColor={extras.qr?.color ?? 'black'}
-          size={extras.qr?.size ?? defaultQrSize}
-          value={extras.url}
-          qrStyle={extras.qr?.qrStyle ?? 'squares'}
-          logoImage={extras.qr?.showLogo ? logo : undefined}
-          logoWidth={extras.qr?.size ?? defaultQrSize}
-          logoHeight={extras.qr?.size ?? defaultQrSize}
-          logoOpacity={extras.qr?.logoOpacity ?? 0.1}
-          removeQrCodeBehindLogo={false}
-        />
-      </div>
+        <div style={{
+          padding: 20,
+          flex: 1,
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'space-evenly',  // Even vertical spacing
+          alignItems: 'flex-start',        // Align items to the left (start of flex container)
+          flexDirection: 'column'          // Stack items in a column (Y-axis)
+        }}>
+          {extras?.header?.text_title && <h2 style={{
+            display: 'inline-block'
+          }}>
+            <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_title }} />
+            <span style={{
+              textDecoration: 'underline',
+              marginLeft: '1rem',
+              display: 'inline-block',
+              width: '40vw',
+              borderBottom: '1px dotted black',
+              ...extras?.header?.underline_style
+            }}>
+            </span>
+          </h2>}
+          {
+            extras?.header?.text_date &&
+            <div style={{
+              display: 'inline-block'
+            }}>
+              <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_date }} />
+              <span style={{
+                textDecoration: 'underline',
+                marginLeft: '1rem',
+                display: 'inline-block',
+                borderBottom: '1px dotted black',
+                ...extras?.header?.underline_style,
+                width: '10vw',
+
+              }}>
+              </span>
+            </div>
+          }
+          {
+            extras?.header?.text_page &&
+            <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_page }} />
+          }
 
+        </div>
+      </div>
       <div style={{
         position: 'absolute',
-        left: extras.marginLeft,
+        left: extras.marginLeft ?? '10%',
         top: '0',
         height: '100%',
         width: '2px',
         backgroundColor: extras.leftMarginLineColor ?? 'lightgray',
       }}>
       </div>
+
+      <div style={{
+        width: '100%',
+        height: extras.marginBottom ?? '10vh',
+        position: 'absolute',
+        left: 0,
+        bottom: 0
+      }}>
+        <div style={{
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }}>
+          {
+            extras?.footer?.text && (
+              <span style={{
+                fontFamily: extras.header?.fontFamily ?? 'Lato, sans-serif',
+                ...extras?.footer?.text_style
+              }} dangerouslySetInnerHTML={{ __html: extras?.footer?.text }} />
+            )
+          }
+        </div>
+      </div>
+
     </AbsoluteFill>
   )
 }