src/common/PosterSingleTextWithBG.tsx

import { AbsoluteFill, Img, staticFile } from 'remotion';
import React from 'react'
import * as Montserrat from "@remotion/google-fonts/Montserrat";
import { Group, PosterSingleTextWithBGExtra, Transcript, Word } from 'common-utils';

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 PosterSingleTextWithBG: React.FC<Transcript> = (item) => {
    const { audioCaption, text = "No Text" } = item;
    const bgImagePath = item.mediaAbsPaths?.[0]?.path
    const {
        textBgColor,
    } = item.extras as PosterSingleTextWithBGExtra

    const baseStyle = {
        textAlign: 'center',
        borderColor: "transparent",
        borderRadius: "2rem",
        borderLeftWidth: "4px",
        borderRightWidth: "4px",
        color: "#fff",
        textShadow: "0px 0px 50px #000, 0px 0px 50px #000",
        padding: "0.2rem 1.5rem",
    };

    const { fontFamily } = Montserrat.loadFont("normal", {
        weights: ["400"],
        ignoreTooManyRequestsWarning: true
    });
    let curZoom = 1.5
    let lines = audioCaption?.words || [{
        word: text
    } as Word]
    return (
        <AbsoluteFill>

            {
                bgImagePath && <Img
                    style={{
                        transform: `scale(${(curZoom)})  translateX(${0}px)`,
                    }}
                    src={staticFile(bgImagePath)} />
            }


            <AbsoluteFill
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    flexDirection: 'column',
                    background: textBgColor
                }}
            >
                <h1
                    style={{
                        overflow: 'hidden',
                        fontFamily: fontFamily,
                        fontWeight: 'bold',
                        textAlign: 'left',
                        position: 'absolute',
                    }}
                >
                    <div
                        className="p-6 rounded-lg"
                        style={{
                            width: "100%",
                            height: "100%",
                            display: "flex",
                            flexDirection: "column",
                            justifyContent: "center",
                            alignItems: "center",
                            alignContent: "center",
                            flex: 1,
                        }}
                    >
                        {
                            lines.map(line => {

                                return (
                                    <span
                                        style={{
                                            ...baseStyle,
                                            fontFamily,
                                            fontSize: 42,
                                            ...line.textStyle
                                        } as any}
                                    >
                                        {line.word}
                                    </span>
                                )
                            })
                        }

                    </div>
                </h1>
            </AbsoluteFill>
        </AbsoluteFill >

    );
};




function ColoredCircleFunction({ color, size, radius, transform }: any) {
    const circleStyle = {
        width: size,
        height: size,
        borderRadius: radius,
        backgroundColor: color,
        transform: transform
    };

    return (
        <div style={circleStyle}></div>
    );
}

export const ColoredCircle = ColoredCircleFunction;