Added CoverPages

src/Compositions.tsx

@@ -216,8 +216,8 @@ export const Compositions: React.FC = () => {
                 component={PaperDriveHorizontalCoverComposition}
                 durationInFrames={duration}
                 fps={fps}
-                width={Script.meta?.resolution?.width || 1920}
-                height={Script.meta?.resolution?.height || 1080}
+                height={Script.meta?.resolution?.width || 1920}
+                width={Script.meta?.resolution?.height || 1080}
                 defaultProps={Object.assign(Script, {
                     bgMusic: RenderUtils.getFileName(Script.bgMusic, "mp3"),
                     contents: contents,

src/paperdrive/PaperDriveComposition.tsx

@@ -1,7 +1,8 @@
 import { Series } from "remotion";
 import { OriginalManuscript } from 'common-utils';
-import { PaperDrivePage, PaperDrivePageExtras } from './PaperDrivePage';
+import { PaperDrivePage } from './PaperDrivePage';
 import { PaperDriveIndex } from './PaperDriveIndex';
+import { PaperDrivePageExtras } from "./types";
 
 export const PaperDriveComposition = (props: OriginalManuscript) => {
   let { meta } = props

src/paperdrive/PaperDriveHorizontalCoverComposition.tsx

@@ -1,127 +1,190 @@
 import { AbsoluteFill, Img, staticFile } from 'remotion';
-import React from 'react'
-import { PaperDrivePoster } from './types';
-import { loadFont } from '@remotion/google-fonts/Lato';
-
-
-export const PaperDriveHorizontalCoverComposition: React.FC<PaperDrivePoster> = (props: PaperDrivePoster) => {
-    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"
+import React, { CSSProperties } from 'react'
+import { PaperDrivePageExtras } from './types';
+import { loadFont as loadMontserrat } from '@remotion/google-fonts/Montserrat';
+import { OriginalManuscript, Transcript } from 'common-utils';
+import { RenderUtils } from '../RenderUtils';
+import { QRCode } from 'react-qrcode-logo';
+
+
+export const PaperDriveHorizontalCoverComposition = (props: OriginalManuscript) => {
+    const data = props.transcript
+        .filter(v => ["front-cover", "back-cover"].includes(v.extras?.template))
+
+    const frontData = data[0]
+    const backData = data[1]
+
+    return (
+        <AbsoluteFill style={{
+            padding: 0,
+            margin: 0,
+            display: 'flex',
+            width: '100%',
+            height: '100%',
+            flexDirection: 'row',
+        }}>
+            {frontData && <PaperDriveBackCover transcript={backData} style={{
+                width: '50%',
+                height: '100%',
+                paddingRight: 50,
+            }} />}
+            {backData && <PaperDriveFrontCover transcript={frontData} style={{
+                width: '50%',
+                height: '100%',
+                paddingLeft: 50,
+            }} />}
+        </AbsoluteFill>
+    );
+};
+
+
+export function PaperDriveFrontCover({ transcript, style }: { transcript: Transcript, style?: CSSProperties }) {
+    const extras = transcript.extras as PaperDrivePageExtras
+    const { fontFamily: Montserrat } = loadMontserrat();
+
+    const qrImageBlend = extras?.qr?.logo
+    const defaultQrSize = RenderUtils.convertVHToPixels(extras?.marginTop ?? '10vh')
+    const logo = qrImageBlend ? staticFile(RenderUtils.getFileName(qrImageBlend)!) : undefined
+    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 (
+        <div style={{
+            backgroundColor: extras?.backgroundColor ?? "black",
+            ...style
+        }}>
+            <div style={{
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                color: 'white',
+                justifyContent: 'space-around'
+            }}>
+                <div style={{
+                    ...extras.header?.position
+                }}>
+                    {(transcript.title || extras.header?.text_title) && <h1 style={{
+                        color: extras?.header?.color ?? '#1a1a1c',
+                        fontFamily: extras?.header?.fontFamily ?? Montserrat,
+                        ...extras?.header?.title_style
+                    }}>{extras.header?.text_title || transcript.title}</h1>
                     }
-                },
-                "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"
+                    {
+                        transcript.text && <h1 style={{
+                            fontFamily: extras?.header?.fontFamily ?? Montserrat,
+                            ...extras?.header?.text_style
+                        }}>
+                            {transcript.text}
+                        </h1>
                     }
-                }
-            }
-        },
-        {
-            "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
+                    {
+                        extras?.header?.graphic && (
+                            <Img
+                                src={staticFile(RenderUtils.getFileName(extras?.header?.graphic?.source)!)}
+                                style={{
+                                    ...extras?.header?.graphic?.position
+                                }} />
+                        )
                     }
-                },
-                "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"
+                </div>
+                <center>
+
+                    <QRCode
+                        style={extras?.qr?.position ?? {
+                            zIndex: 1000,
+                            position: 'absolute',
+                            top: 50,
+                            left: 50
+                        }}
+                        bgColor={extras?.qr?.backgroundColor ?? 'transparent'}
+                        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}
+                    />
+                    {
+                        extras?.header?.text_sec && (
+                            <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_sec }} style={{
+                                fontFamily: Montserrat
+                            }} />
+                        )
                     }
-                },
-                "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"
+                    {
+                        extras?.header?.text_ter &&
+                        <div
+                            style={{
+                                fontFamily: Montserrat
+                            }}
+                            dangerouslySetInnerHTML={{ __html: extras?.header?.text_ter }}>
+
+                        </div>
                     }
-                }
-            },
-            "imageAbsPaths": [],
-            "durationInSeconds": 1
-        }
-    ]
-    loadFont();
+
+                </center>
+            </div>
+        </div>
+    )
+
+}
+
+
+
+
+
+export function PaperDriveBackCover({ transcript, style }: { transcript: Transcript, style?: CSSProperties }) {
+    const extras = transcript.extras as PaperDrivePageExtras
+
+    const { fontFamily: Montserrat } = loadMontserrat();
 
     return (
-        <AbsoluteFill>
+        <div style={{
+            backgroundColor: extras?.backgroundColor ?? "black",
+            ...style
+        }}>
+            <div style={{
+                fontFamily: Montserrat,
+                padding: 50,
+                flex: 1,
+                height: '100%',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                display: 'flex',
+                color: 'white'
+            }}>
+                <div style={{
+                    ...extras.header?.position
+                }}>
+                    <h2 dangerouslySetInnerHTML={{ __html: transcript.title }} />
+                    <span dangerouslySetInnerHTML={{ __html: transcript.text }} />
+                </div>
+
+                <div>
+                    {
+                        extras?.footer?.text && <h2
+                            dangerouslySetInnerHTML={{ __html: extras?.footer?.text }}
+                            style={{
+                                ...extras?.footer?.text_style
+                            }}
+                        />
+                    }
+                </div>
+            </div>
+        </div>
+    )
+
+}
 
 
-        </AbsoluteFill >
-    );
-};

src/paperdrive/PaperDriveIndex.tsx

@@ -3,8 +3,8 @@ 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";
 import './PaperDriveIndex.css'
+import { PaperDrivePageExtras } from "./types";
 
 const tableHeadStyles: CSSProperties = {
   textAlign: 'center'

src/paperdrive/PaperDrivePage.tsx

@@ -5,54 +5,11 @@ 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";
+import { PaperDrivePageExtras } from "./types";
 
-export type PaperDrivePageExtras = {
-  backgroundColor: string;
-  marginBottom: string;
-  url: string,
-  leftMarginLineColor?: string,
-  lineColor?: string,
-  marginLeft: string // "10%"
-  marginTop: string // "10%"
-  template?: "page" | "index" | "one-cover" | "two-cover"
-  qr?: {
-    logoOpacity?: number;
-    logo?: string;
-    color?: string | undefined;
-    size?: string //200 10vh 10vw
-    qrStyle?: "squares" | "dots" | "fluid"
-    position?: {
-      position: "static" | "relative" | "absolute" | "sticky" | "fixed" // "right"
-      top?: number // 0
-      left?: number // 0
-      bottom?: number // 0
-      right?: number // 0
-    }
-  },
-  header?: {
-    underline_style?: CSSProperties
-    fontFamily?: string // Lato, sans-serif
-    color?: string // black
-    text_title?: string // Title
-    text_date?: string // Date
-    text_page?: string // Page
-    position?: CSSProperties
-  },
-  footer?: {
-    text?: string // Lorem ipsum dolor
-    text_style?: CSSProperties,
-    position?: CSSProperties
-  },
-  index?: {
-    pageCount: number,
-    columns: { text: string, width: string }[]
-  }
-}
 export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
   const extras = transcript.extras as PaperDrivePageExtras
-  const qrImageBlend = extras?.qr?.logo
-  const defaultQrSize = RenderUtils.convertVHToPixels(extras?.marginTop ?? '10vh')
-  const logo = qrImageBlend ? staticFile(RenderUtils.getFileName(qrImageBlend)!) : undefined
+
   const watermark = transcript.imageAbsPaths?.[0]
   let watermarkPath = undefined
   if (watermark) {
@@ -61,6 +18,9 @@ export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
   loadLato();
   loadPoppins();
 
+  const qrImageBlend = extras?.qr?.logo
+  const defaultQrSize = RenderUtils.convertVHToPixels(extras?.marginTop ?? '10vh')
+  const logo = qrImageBlend ? staticFile(RenderUtils.getFileName(qrImageBlend)!) : undefined
   let qrSize = defaultQrSize
   if (extras?.qr?.size?.includes("vh")) {
     qrSize = RenderUtils.convertVHToPixels(extras?.qr?.size)
@@ -146,7 +106,7 @@ export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
                   <td style={{
                     textAlign: 'left'
                   }}>
-                    <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_title }} />
+                    <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_title }} style={extras?.header?.title_style} />
                   </td>
                   <td style={{
                     textAlign: 'left',
@@ -165,10 +125,10 @@ export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
 
               )}
               {
-                extras?.header?.text_date &&
+                extras?.header?.text_sec &&
                 <tr>
                   <td >
-                    <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_date }} />
+                    <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_sec }} style={extras?.header?.text_style} />
                   </td>
                   <td style={{
                     textAlign: 'left',
@@ -188,10 +148,10 @@ export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
               }
 
               {
-                extras?.header?.text_page &&
+                extras?.header?.text_ter &&
                 <tr>
                   <td>
-                    <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_page }} />
+                    <span dangerouslySetInnerHTML={{ __html: extras?.header?.text_ter }} style={extras?.header?.text_style} />
                   </td>
                 </tr>
 

src/paperdrive/types/index.ts

@@ -1,3 +1,51 @@
-export type PaperDrivePoster = {
+import { CSSProperties } from "react";
 
+export type PaperDrivePageExtras = {
+  backgroundColor: 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"
+    logoOpacity?: number;
+    logo?: string;
+    color?: string | undefined;
+    backgroundColor?: string | undefined;
+    size?: string //200 10vh 10vw
+    qrStyle?: "squares" | "dots" | "fluid"
+    position?: {
+      position: "static" | "relative" | "absolute" | "sticky" | "fixed" // "right"
+      top?: number // 0
+      left?: number // 0
+      bottom?: number // 0
+      right?: number // 0
+    }
+  },
+  header?: { // only for "page" and "index" and "front-cover" and "back-cover"
+    underline_style?: CSSProperties
+    fontFamily?: string // Lato, sans-serif
+    color?: string // black
+    graphic?: {
+      source: string,
+      position?: CSSProperties
+    },
+    title_style?: CSSProperties,
+    text_style?: CSSProperties,
+    text_title?: string // Title
+    text_sec?: string // Date
+    text_ter?: string // Page
+    position?: CSSProperties
+  },
+  footer?: {  // only for "page" 
+    text?: string // Lorem ipsum dolor
+    text_style?: CSSProperties,
+    position?: CSSProperties
+  },
+  index?: {  // only for "index"
+    pageCount: number,
+    columns: { text: string, width: string }[]
+  },
 }