Fixes

scripts/img2pdf.js

@@ -28,13 +28,30 @@ for (const file of files) {
 		file.endsWith('.jpeg')
 	) {
 		const imgPath = path.join(inputFolder, file);
-		const {width, height} = doc.openImage(imgPath);
+		const img = doc.openImage(imgPath);
 
-		// Add a new page with the same dimensions as the image
-		doc.addPage({size: [width, height], margin: 0});
+		// Add a new page with size 8.5 x 11 inches (612 x 792 points)
+		doc.addPage({size: [612, 792], margin: 0});
 
-		// Add the image without margins or padding, covering the full page
-		doc.image(imgPath, 0, 0, {width, height});
+		// Scale and center the image on the page
+		const pageWidth = 612;
+		const pageHeight = 792;
+		const imgWidth = img.width;
+		const imgHeight = img.height;
+
+		// Calculate scaling to fit the image within the page, preserving aspect ratio
+		const scaleFactor = Math.min(pageWidth / imgWidth, pageHeight / imgHeight);
+
+		// Calculate new image dimensions
+		const scaledWidth = imgWidth * scaleFactor;
+		const scaledHeight = imgHeight * scaleFactor;
+
+		// Calculate coordinates to center the image
+		const x = (pageWidth - scaledWidth) / 2;
+		const y = (pageHeight - scaledHeight) / 2;
+
+		// Add the image to the page, scaled to fit
+		doc.image(imgPath, x, y, {width: scaledWidth, height: scaledHeight});
 	}
 }
 

src/paperdrive/PaperDriveComposition.tsx

@@ -1,6 +1,6 @@
 import { Series } from "remotion";
 import { OriginalManuscript } from 'common-utils';
-import { PaperDrivePage } from './PaperDrivePage';
+import { PaperDrivePage, PaperDrivePageExtras } from './PaperDrivePage';
 import { PaperDriveIndex } from './PaperDriveIndex';
 
 export const PaperDriveComposition = (props: OriginalManuscript) => {
@@ -8,17 +8,27 @@ export const PaperDriveComposition = (props: OriginalManuscript) => {
   let fps = meta.fps
   return (
     <Series>
-      <Series.Sequence durationInFrames={props.transcript[0].durationInSeconds * fps}>
-        <PaperDriveIndex transcript={props.transcript[0]} />
-      </Series.Sequence>
       {
-        props.transcript.slice(1).map(transcript => {
-          return (
-            <Series.Sequence durationInFrames={transcript.durationInSeconds * fps}>
-              <PaperDrivePage transcript={transcript} />
-            </Series.Sequence>
-          )
-        })
+        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>
   );

src/paperdrive/PaperDriveHorizontalCoverComposition.tsx

@@ -1,27 +1,122 @@
 import { AbsoluteFill, Img, staticFile } from 'remotion';
 import React from 'react'
-import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
 import { PaperDrivePoster } from './types';
+import { loadFont } from '@remotion/google-fonts/Lato';
 
-function adjustFontSize(text: string, fullFont?: number): number {
-    if (!fullFont) {
-        fullFont = 160
-    }
-    const wordCount = text.split(' ').length;
-    return fullFont - (wordCount * (wordCount > 5 ? 4.5 : 1));
-}
-
-function splitSentence(sentence: string): [string, string] {
-    const words = sentence.trim().split(' ');
-    const lastWord = words[words.length - 1];
-    const lastWordIndex = sentence.lastIndexOf(lastWord);
-    const firstPart = sentence.slice(0, lastWordIndex).trim();
-    const secondPart = sentence.slice(lastWordIndex).trim();
-    return [firstPart, secondPart];
-}
 
 export const PaperDriveHorizontalCoverComposition: React.FC<PaperDrivePoster> = (props: PaperDrivePoster) => {
-    const { fontFamily } = loadFont();
+    const data = [
+        {
+            "title": "ClassPad",
+            "text": "By Paper Drive",
+            "index": 0,
+            "status": true,
+            "durationInSeconds": 1,
+            "extras": {
+                "url": "https://app.mypaperdrive.com/notebooks/landing",
+                "marginLeft": "5vh",
+                "marginTop": "5vh",
+                "marginBottom": "5vh",
+                "leftMarginLineColor": "#e0e0e0",
+                "lineColor": "#bdbdbd",
+                "backgroundColor": "white",
+                "qr": {
+                    "qrStyle": "dots",
+                    "color": "#1a1a1c",
+                    "logo": "./logo-transparent-grey.png",
+                    "logoOpacity": 0.1,
+                    "size": "7vh",
+                    "position": {
+                        "zIndex": 1000,
+                        "borderWidth": 2,
+                        "borderColor": "lightgray",
+                        "borderRadius": 10,
+                        "backgroundColor": "#fff",
+                        "padding": 0.1,
+                        "margin": 5,
+                        "position": "absolute",
+                        "top": 0,
+                        "right": 0
+                    }
+                },
+                "header": {
+                    "fontFamily": "Lato, sans-serif",
+                    "color": "lightgray",
+                    "text_title": "Topic&nbsp;:",
+                    "text_date": "Date&nbsp;&nbsp;:",
+                    "text_page": "Page No. 1",
+                    "underline_style": {
+                        "textDecoration": "underline",
+                        "borderBottom": "1px dotted black"
+                    }
+                },
+                "footer": {
+                    "text": "Scan the QR to view or attach photos, videos and other files on this page or Visit mypaperdrive.com/p/1",
+                    "text_style": {
+                        "fontSize": "1.1rem",
+                        "fontFamily": "Lato, sans-serif",
+                        "color": "lightgray"
+                    }
+                }
+            }
+        },
+        {
+            "text": "Scan me",
+            "index": 0,
+            "status": true,
+            "title": "Page 0",
+            "extras": {
+                "url": "https://app.mypaperdrive.com/notebooks/page?page=0",
+                "marginLeft": "5vh",
+                "marginTop": "5vh",
+                "marginBottom": "5vh",
+                "leftMarginLineColor": "#e0e0e0",
+                "lineColor": "#bdbdbd",
+                "backgroundColor": "white",
+                "qr": {
+                    "qrStyle": "dots",
+                    "color": "#1a1a1c",
+                    "logo": "./logo-transparent-grey.png",
+                    "logoOpacity": 0.1,
+                    "size": "7vh",
+                    "position": {
+                        "zIndex": 1000,
+                        "borderWidth": 2,
+                        "borderColor": "lightgray",
+                        "borderRadius": 10,
+                        "backgroundColor": "#fff",
+                        "padding": 0.1,
+                        "margin": 5,
+                        "position": "absolute",
+                        "top": 0,
+                        "right": 0
+                    }
+                },
+                "header": {
+                    "fontFamily": "Lato, sans-serif",
+                    "color": "lightgray",
+                    "text_title": "Topic&nbsp;:",
+                    "text_date": "Date&nbsp;&nbsp;:",
+                    "text_page": "Page No. 0",
+                    "underline_style": {
+                        "textDecoration": "underline",
+                        "borderBottom": "1px dotted black"
+                    }
+                },
+                "footer": {
+                    "text": "Scan the QR to view or attach photos, videos and other files on this page or Visit mypaperdrive.com/p/0",
+                    "text_style": {
+                        "fontSize": "1.1rem",
+                        "fontFamily": "Lato, sans-serif",
+                        "color": "lightgray"
+                    }
+                }
+            },
+            "imageAbsPaths": [],
+            "durationInSeconds": 1
+        }
+    ]
+    loadFont();
 
     return (
         <AbsoluteFill>

src/paperdrive/PaperDriveIndex.css

@@ -1,11 +1,8 @@
-table,
-th,
-td {
-  border: 1px solid black;
-}
+ .border {
+   border: 1px solid black;
+ }
 
-th,
-td {
-  padding: 8px;
-  text-align: center;
-}
+ .center-padded {
+   padding: 8px;
+   text-align: center;
+ }

src/paperdrive/PaperDriveIndex.tsx

@@ -1,8 +1,6 @@
 import { Transcript } from "common-utils"
-import React, { CSSProperties, } from "react"
-import { AbsoluteFill, Img, staticFile } from "remotion"
-import { QRCode } from 'react-qrcode-logo';
-import { RenderUtils } from '../RenderUtils';
+import { CSSProperties, } from "react"
+import { AbsoluteFill } from "remotion"
 import { loadFont as loadLato } from "@remotion/google-fonts/Lato";
 import { loadFont as loadPoppins } from "@remotion/google-fonts/Poppins";
 import { PaperDrivePageExtras } from "./PaperDrivePage";
@@ -34,7 +32,7 @@ export function PaperDriveIndex({ transcript }: { transcript: Transcript }) {
         padding: '5%',
         width: '100%'
       }}>
-        <table style={{
+        <table className="border" style={{
           fontFamily: extras?.header?.fontFamily,
           width: '100%',
           borderRadius: '10px',
@@ -46,7 +44,7 @@ export function PaperDriveIndex({ transcript }: { transcript: Transcript }) {
 
               {
                 extras?.index?.columns?.map(col => {
-                  return <th dangerouslySetInnerHTML={{ __html: col.text }} style={{
+                  return <th className="border center-padded" dangerouslySetInnerHTML={{ __html: col.text }} style={{
                     fontFamily: extras?.header?.fontFamily,
                     width: col.width,
                     ...tableHeadStyles
@@ -60,7 +58,7 @@ export function PaperDriveIndex({ transcript }: { transcript: Transcript }) {
               <tr key={row.id}>
                 {
                   extras?.index?.columns?.map(col => {
-                    return <td style={{
+                    return <td className="border center-padded" style={{
                       padding: '20px',
                       ...tableHeadStyles
                     }} ></td>

src/paperdrive/PaperDrivePage.tsx

@@ -14,6 +14,7 @@ export type PaperDrivePageExtras = {
   lineColor?: string,
   marginLeft: string // "10%"
   marginTop: string // "10%"
+  template?: "page" | "index" | "one-cover" | "two-cover"
   qr?: {
     logoOpacity?: number;
     logo?: string;
@@ -35,10 +36,12 @@ export type PaperDrivePageExtras = {
     text_title?: string // Title
     text_date?: string // Date
     text_page?: string // Page
+    position?: CSSProperties
   },
   footer?: {
     text?: string // Lorem ipsum dolor
-    text_style?: CSSProperties
+    text_style?: CSSProperties,
+    position?: CSSProperties
   },
   index?: {
     pageCount: number,
@@ -121,52 +124,82 @@ export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
         left: extras?.marginLeft ?? '10%',
         paddingLeft: 20,
         height: extras?.marginTop,
+        ...extras.header?.position
       }}>
         <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)
+          justifyContent: 'space-evenly',
+          alignItems: 'flex-start',
+          flexDirection: 'column'
         }}>
-          {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',
+          <table>
+            <thead>
+              <tr>
+                <th></th>
+                <th></th>
+              </tr>
+              {extras?.header?.text_title && (
+                <tr>
+                  <td style={{
+                    textAlign: 'left'
+                  }}>
+                    <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_title }} />
+                  </td>
+                  <td style={{
+                    textAlign: 'left',
+                  }}>
+                    <span style={{
+                      textDecoration: 'underline',
+                      marginLeft: '1rem',
+                      display: 'inline-block',
+                      width: '40vw',
+                      borderBottom: '1px dotted black',
+                      ...extras?.header?.underline_style
+                    }}>
+                    </span>
+                  </td>
+                </tr>
+
+              )}
+              {
+                extras?.header?.text_date &&
+                <tr>
+                  <td >
+                    <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_date }} />
+                  </td>
+                  <td style={{
+                    textAlign: 'left',
+                  }}>
+                    <span style={{
+                      textDecoration: 'underline',
+                      marginLeft: '1rem',
+                      display: 'inline-block',
+                      borderBottom: '1px dotted black',
+                      ...extras?.header?.underline_style,
+                      width: '10vw',
+
+                    }}>
+                    </span>
+                  </td>
+                </tr>
+              }
+
+              {
+                extras?.header?.text_page &&
+                <tr>
+                  <td>
+                    <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_page }} />
+                  </td>
+                </tr>
+
+              }
+            </thead>
+          </table>
+
 
-              }}>
-              </span>
-            </div>
-          }
-          {
-            extras?.header?.text_page &&
-            <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_page }} />
-          }
 
         </div>
       </div>
@@ -185,13 +218,15 @@ export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
         height: extras?.marginBottom ?? '10vh',
         position: 'absolute',
         left: 0,
-        bottom: 0
+        bottom: 0,
+        ...extras.footer?.position
       }}>
         <div style={{
           height: '100%',
           display: 'flex',
           justifyContent: 'center',
-          alignItems: 'center'
+          alignItems: 'center',
+          paddingBottom: 10,
         }}>
           {
             extras?.footer?.text && (