src/paperdrive/PaperDriveHorizontalCoverComposition.tsx

import { AbsoluteFill, Img, staticFile } from 'remotion';
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={{
            backgroundSize: extras?.backgroundImage ? 'cover' : undefined,
            backgroundPosition: extras?.backgroundImage ? 'center' : undefined,
            backgroundRepeat: extras?.backgroundImage ? 'no-repeat' : undefined,
            backgroundColor: extras?.backgroundColor ?? "black",
            backgroundImage: extras?.backgroundImage ? `url(${staticFile(RenderUtils.getFileName(extras?.backgroundImage!)!)})` : undefined,
            ...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>
                    }
                    {
                        transcript.text && <h1 style={{
                            fontFamily: extras?.header?.fontFamily ?? Montserrat,
                            ...extras?.header?.text_style
                        }}>
                            {transcript.text}
                        </h1>
                    }
                    {
                        extras?.header?.graphic?.source && (
                            <Img
                                src={staticFile(RenderUtils.getFileName(extras?.header?.graphic?.source)!)}
                                style={{
                                    ...extras?.header?.graphic?.position
                                }} />
                        )
                    }
                </div>
                <center style={{
                    marginLeft: -50
                }}>

                    <QRCode
                        style={extras?.qr?.position ?? {
                            zIndex: 1000,
                            position: 'absolute',
                            top: 50,
                            left: 40
                        }}
                        bgColor={extras?.qr?.backgroundColor ?? 'transparent'}
                        fgColor={extras?.qr?.color ?? 'black'}
                        size={qrSize ?? defaultQrSize}
                        value={extras?.qr?.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
                            }} />
                        )
                    }
                    {
                        extras?.header?.text_ter &&
                        <div
                            style={{
                                fontFamily: Montserrat
                            }}
                            dangerouslySetInnerHTML={{ __html: extras?.header?.text_ter }}>

                        </div>
                    }

                </center>
            </div>
        </div>
    )

}





export function PaperDriveBackCover({ transcript, style }: { transcript: Transcript, style?: CSSProperties }) {
    const extras = transcript.extras as PaperDrivePageExtras

    const { fontFamily: Montserrat } = loadMontserrat();

    return (
        <div style={{
            backgroundSize: extras?.backgroundImage ? 'cover' : undefined,
            backgroundPosition: extras?.backgroundImage ? 'center' : undefined,
            backgroundRepeat: extras?.backgroundImage ? 'no-repeat' : undefined,
            backgroundColor: extras?.backgroundColor ?? "black",
            backgroundImage: extras?.backgroundImage ? `url(${staticFile(RenderUtils.getFileName(extras?.backgroundImage!)!)})` : undefined,
            ...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>
    )

}