Added Paperdrive platform

.vscode/settings.json

@@ -2,8 +2,8 @@
 	"editor.tabSize": 2,
 	"typescript.tsdk": "node_modules/typescript/lib",
 	"editor.codeActionsOnSave": {
-		"source.organizeImports": false,
-		"source.fixAll": true
+		"source.organizeImports": "never",
+		"source.fixAll": "explicit"
 	},
 	"typescript.enablePromptUseWorkspaceTsdk": true,
 	"css.lint.unknownAtRules": "ignore"

common-creds

@@ -1 +1 @@
-Subproject commit aef4467f366d76969ca0d9699062c17b2f767977
+Subproject commit 5e7f22af79dfea56918ce3d6a5757fb796d474be

package.json

@@ -1,88 +1,90 @@
 {
-  "name": "semibit-media-render-farm",
-  "version": "1.0.0",
-  "type": "module",
-  "description": "semibit media renderer",
-  "sideEffects": [
-    "*.css"
-  ],
-  "scripts": {
-    "start": "node server.js",
-    "extract32": "set MODIFY_FILES=1 && node app.js",
-    "extract": "MODIFY_FILES=1 && node app.js",
-    "preview": "remotion studio",
-    "preinstall": "cd common-utils && npm run build",
-    "build:utils": "cd common-utils && npm run build && cd .. && npm install ./common-utils",
-    "render-build:igreels": "remotion render --audio-codec mp3  --image-format=jpeg --enable-multi-process-on-linux --quality=70  --concurrency 2 --gl=angle IGReelComposition",
-    "render-build": "remotion render --audio-codec mp3  --image-format=jpeg --enable-multi-process-on-linux --quality=70  --concurrency 2 --gl=angle",
-    "render-still": "remotion still --image-format=jpeg SemibitCompositionPoster  ",
-    "upgrade": "remotion upgrade",
-    "postinstall": "cd node_modules/common-utils && npm run build && cd ../../ && node ffmpeg-fix.js",
-    "serve": "firebase emulators:start --only functions --project semibitmedia",
-    "shell": "firebase functions:shell --project semibitmedia",
-    "deploy": "firebase deploy --only functions --project semibitmedia",
-    "logs": "firebase functions:log --project semibitmedia"
-  },
-  "engines": {
-    "node": "16"
-  },
-  "private": true,
-  "repository": {},
-  "license": "UNLICENSED",
-  "pnpm": {
-    "peerDependencyRules": {
-      "ignoreMissing": [
-        "webpack"
-      ]
-    }
-  },
-  "dependencies": {
-    "@ffmpeg-installer/ffmpeg": "^1.1.0",
-    "@remotion/bundler": "4.0.19",
-    "@remotion/cli": "4.0.19",
-    "@remotion/eslint-config": "4.0.19",
-    "@remotion/google-fonts": "4.0.19",
-    "@remotion/lottie": "^4.0.19",
-    "@remotion/noise": "4.0.19",
-    "@remotion/preload": "4.0.19",
-    "@remotion/tailwind": "4.0.19",
-    "@remotion/zod-types": "4.0.19",
-    "@types/react": "^18.0.26",
-    "@types/web": "^0.0.86",
-    "axios": "^1.4.0",
-    "body-parser": "^1.20.2",
-    "common-utils": "file:common-utils",
-    "express": "^4.18.2",
-    "ffbinaries": "^1.1.5",
-    "firebase-admin": "^11.9.0",
-    "firebase-functions": "^4.4.1",
-    "fs-extra": "^11.1.1",
-    "gojs-react": "^1.1.2",
-    "i": "^0.3.7",
-    "lodash": "^4.17.21",
-    "lottie-web": "^5.12.2",
-    "multi-db-orm": "^1.3.0",
-    "npm": "^9.8.1",
-    "path": "^0.12.7",
-    "puppeteer": "^21.3.6",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "reactflow": "^11.9.4",
-    "remotion": "4.0.19",
-    "remotion-animated": "^2.0.0",
-    "remotion-transition-series": "^0.0.10",
-    "socket.io": "^4.7.2",
-    "styled-components": "^6.0.5",
-    "syllable-count-english": "^1.0.6",
-    "tree-kill": "^1.2.2",
-    "ts-node-dev": "^2.0.0",
-    "typescript": "^4.9.4",
-    "which": "^3.0.1",
-    "ws": "^8.13.0",
-    "zod": "^3.21.4"
-  },
-  "packageManager": "npm@8.19.4",
-  "devDependencies": {
-    "@types/lodash": "^4.14.199"
-  }
+	"name": "semibit-media-render-farm",
+	"version": "1.0.0",
+	"type": "module",
+	"description": "semibit media renderer",
+	"sideEffects": [
+		"*.css"
+	],
+	"scripts": {
+		"start": "node server.js",
+		"extract32": "set MODIFY_FILES=1 && node app.js",
+		"extract": "MODIFY_FILES=1 && node app.js",
+		"preview": "remotion studio",
+		"preinstall": "cd common-utils && npm run build",
+		"build:utils": "cd common-utils && npm run build && cd .. && npm install ./common-utils",
+		"render-build:igreels": "remotion render --audio-codec mp3  --image-format=jpeg --enable-multi-process-on-linux --quality=70  --concurrency 2 --gl=angle IGReelComposition",
+		"render-build": "remotion render --audio-codec mp3  --image-format=jpeg --enable-multi-process-on-linux --quality=70  --concurrency 2 --gl=angle",
+		"render-still": "remotion still --image-format=jpeg SemibitCompositionPoster  ",
+		"render-image": "remotion still --image-format=jpeg $npm_config_composition $npm_config_output",
+		"upgrade": "remotion upgrade",
+		"postinstall": "cd node_modules/common-utils && npm run build && cd ../../ && node ffmpeg-fix.js",
+		"serve": "firebase emulators:start --only functions --project semibitmedia",
+		"shell": "firebase functions:shell --project semibitmedia",
+		"deploy": "firebase deploy --only functions --project semibitmedia",
+		"logs": "firebase functions:log --project semibitmedia"
+	},
+	"engines": {
+		"node": "16"
+	},
+	"private": true,
+	"repository": {},
+	"license": "UNLICENSED",
+	"pnpm": {
+		"peerDependencyRules": {
+			"ignoreMissing": [
+				"webpack"
+			]
+		}
+	},
+	"dependencies": {
+		"@ffmpeg-installer/ffmpeg": "^1.1.0",
+		"@remotion/bundler": "4.0.19",
+		"@remotion/cli": "4.0.19",
+		"@remotion/eslint-config": "4.0.19",
+		"@remotion/google-fonts": "4.0.19",
+		"@remotion/lottie": "^4.0.19",
+		"@remotion/noise": "4.0.19",
+		"@remotion/preload": "4.0.19",
+		"@remotion/tailwind": "4.0.19",
+		"@remotion/zod-types": "4.0.19",
+		"@types/react": "^18.0.26",
+		"@types/web": "^0.0.86",
+		"axios": "^1.4.0",
+		"body-parser": "^1.20.2",
+		"common-utils": "file:common-utils",
+		"express": "^4.18.2",
+		"ffbinaries": "^1.1.5",
+		"firebase-admin": "^11.9.0",
+		"firebase-functions": "^4.4.1",
+		"fs-extra": "^11.1.1",
+		"gojs-react": "^1.1.2",
+		"i": "^0.3.7",
+		"lodash": "^4.17.21",
+		"lottie-web": "^5.12.2",
+		"multi-db-orm": "^1.3.0",
+		"npm": "^9.8.1",
+		"path": "^0.12.7",
+		"puppeteer": "^21.3.6",
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0",
+		"react-qrcode-logo": "^3.0.0",
+		"reactflow": "^11.9.4",
+		"remotion": "4.0.19",
+		"remotion-animated": "^2.0.0",
+		"remotion-transition-series": "^0.0.10",
+		"socket.io": "^4.7.2",
+		"styled-components": "^6.0.5",
+		"syllable-count-english": "^1.0.6",
+		"tree-kill": "^1.2.2",
+		"ts-node-dev": "^2.0.0",
+		"typescript": "^4.9.4",
+		"which": "^3.0.1",
+		"ws": "^8.13.0",
+		"zod": "^3.21.4"
+	},
+	"packageManager": "npm@8.19.4",
+	"devDependencies": {
+		"@types/lodash": "^4.14.199"
+	}
 }

src/Compositions.tsx

@@ -12,6 +12,8 @@ import { RenderUtils } from './RenderUtils';
 import { VideoSplash, VideoSplashSchema } from './anims/VideoSplash';
 import { YoutubeVideoScene } from './youtube/YoutubeVideoScene';
 import { LinkedinFullSysDesignComposition } from './linkedin-video/LinkedinFullSysDesignComposition';
+import { PaperDriveComposition } from './paperdrive/PaperDriveComposition';
+import { PaperDriveHorizontalCoverComposition } from './paperdrive/PaperDriveHorizontalCoverComposition';
 
 
 
@@ -194,6 +196,35 @@ export const Compositions: React.FC = () => {
                 })}
             />
 
+            <Composition
+                id='PaperDriveComposition'
+                component={PaperDriveComposition}
+                durationInFrames={Script.meta.fps * Script.transcript.length}
+                fps={fps}
+                width={Script.meta?.resolution?.width || 1920}
+                height={Script.meta?.resolution?.height || 1080}
+                defaultProps={Object.assign(Script, {
+                    bgMusic: RenderUtils.getFileName(Script.bgMusic, "mp3"),
+                    contents: contents,
+                    intro: intro,
+                    outro: outro
+                })}
+            />
+
+            <Composition
+                id='PaperDriveHorizontalCoverComposition'
+                component={PaperDriveHorizontalCoverComposition}
+                durationInFrames={duration}
+                fps={fps}
+                width={Script.meta?.resolution?.width || 1920}
+                height={Script.meta?.resolution?.height || 1080}
+                defaultProps={Object.assign(Script, {
+                    bgMusic: RenderUtils.getFileName(Script.bgMusic, "mp3"),
+                    contents: contents,
+                    intro: intro,
+                    outro: outro
+                })}
+            />
             <Composition
                 defaultProps={{
                     direction: 'left',

src/RenderUtils.ts

@@ -19,7 +19,7 @@ function levenshteinDistance(str1: string, str2: string) {
 }
 export class RenderUtils {
 
-  public static splitWordsIntoGroups(words) {
+  public static splitWordsIntoGroups(words: any) {
     const groups = [];
     let currentGroup = [];
 
@@ -60,11 +60,11 @@ export class RenderUtils {
   }
 
 
-  public static findCurrentGroupByTime(timeSec: Number, groups) {
+  public static findCurrentGroupByTime(timeSec: Number, groups: any[]) {
     var t = timeSec;
     let wds = groups
     for (let i = 0; i < wds.length; i++) {
-      const x = wds[i];
+      const x: any = wds[i];
       if (x.start != undefined && x.end != undefined && (t >= x.start && t < x.end)) {
         return x
       }
@@ -72,7 +72,7 @@ export class RenderUtils {
   }
 
 
-  public static findCurrentWord(timeSec, frames) {
+  public static findCurrentWord(timeSec: Number, frames: any[]) {
     var t = timeSec;
     let wds = frames
     for (let i = 0; i < wds.length; i++) {
@@ -88,14 +88,14 @@ export class RenderUtils {
     return arr[Math.floor(random(seed || 1) * arr.length)];
   }
 
-  public static hashCode(s) {
-    return s.split("").reduce(function (a, b) {
+  public static hashCode(s: string) {
+    return s.split("").reduce(function (a: number, b: string) {
       a = ((a << 5) - a) + b.charCodeAt(0);
       return a & a;
     }, 0);
   }
 
-  public static splitArrayIntoChunks(arr, chunkSize) {
+  public static splitArrayIntoChunks(arr: string | any[], chunkSize: number) {
     const chunkedArr = [];
     for (let i = 0; i < arr.length; i += chunkSize) {
       chunkedArr.push(arr.slice(i, i + chunkSize));
@@ -103,7 +103,7 @@ export class RenderUtils {
     return chunkedArr;
   }
 
-  public static splitArray(arr, pieces) {
+  public static splitArray(arr: string | any[], pieces: number) {
     let result = [];
     let chunkSize = Math.ceil(arr.length / pieces);
     for (let i = 0, j = arr.length; i < j; i += chunkSize) {

src/paperdrive/PaperDriveComposition.tsx

@@ -0,0 +1,37 @@
+import { AbsoluteFill, Audio, Easing, Img, interpolate, staticFile, useCurrentFrame } from 'remotion';
+import React from 'react'
+import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
+import { Series } from "remotion";
+import { IGScene } from '../ig-reel/IGSimpleScene';
+import { OriginalManuscript, Transcript } from 'common-utils';
+import TransitionSeries from 'remotion-transition-series';
+import { VideoSplash } from '../anims/VideoSplash';
+import Transitions from '../../public/assets/transitions.json'
+import { RenderUtils } from '../RenderUtils';
+import GeneralSubtitles from '../subtitles/general_Subtitles';
+import { PaperDrivePage } from './PaperDrivePage';
+
+export const PaperDriveComposition = (props: OriginalManuscript) => {
+  const { fontFamily } = loadFont();
+  let { meta, bgMusic, bgMusicDuration } = props
+  let transcripts: Transcript[] = props.transcript
+  let fps = meta.fps
+  let frame = useCurrentFrame()
+  return (
+
+
+    <Series>
+      {
+        props.transcript.map(transcript => {
+          return (
+            <Series.Sequence durationInFrames={transcript.durationInSeconds * fps}>
+              <PaperDrivePage transcript={transcript} />
+            </Series.Sequence>
+          )
+        })
+      }
+
+    </Series>
+
+  );
+};

src/paperdrive/PaperDriveHorizontalCoverComposition.tsx

@@ -0,0 +1,32 @@
+import { AbsoluteFill, Img, staticFile } from 'remotion';
+import React from 'react'
+import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
+import { PaperDrivePoster } from './types';
+
+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();
+
+    return (
+        <AbsoluteFill>
+
+
+        </AbsoluteFill >
+    );
+};

src/paperdrive/PaperDrivePage.tsx

@@ -0,0 +1,78 @@
+import { Transcript } from "common-utils"
+import React from "react"
+import { AbsoluteFill, staticFile } from "remotion"
+import { QRCode } from 'react-qrcode-logo';
+import { RenderUtils } from '../RenderUtils';
+
+export type PaperDrivePageExtras = {
+  marginBottom: string;
+  url: string,
+  leftMarginLineColor?: string,
+  lineColor?: string,
+  qr?: {
+    logoOpacity?: number;
+    showLogo?: any;
+    color?: string | undefined;
+    size?: number //200
+    qrStyle?: "squares" | "dots" | "fluid"
+    position?: {
+      position: "static" | "relative" | "absolute" | "sticky" | "fixed" // "right"
+      top?: number // 0
+      left?: number // 0
+      bottom?: number // 0
+      right?: number // 0
+    }
+  },
+  marginLeft: string // "10%"
+  marginTop: string // "10%"
+}
+export function PaperDrivePage({ transcript }: { transcript: Transcript }) {
+  const extras = transcript.extras as PaperDrivePageExtras
+  const qrImageBlend = transcript.imageAbsPaths?.[0]?.path
+  const defaultQrSize = 300
+  const logo = qrImageBlend ? staticFile(RenderUtils.getFileName(qrImageBlend)!) : undefined
+  return (
+    <AbsoluteFill style={{
+      background: 'white',
+      paddingTop: extras.marginTop ?? '10%',
+      paddingBottom: extras.marginBottom ?? '5%',
+    }}>
+      <AbsoluteFill style={{
+        background: 'white',
+        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
+      }}>
+      </AbsoluteFill>
+
+      <div style={extras.qr?.position ?? {
+        position: 'absolute',
+        top: 0,
+        right: 0
+      }}>
+        <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={{
+        position: 'absolute',
+        left: extras.marginLeft,
+        top: '0',
+        height: '100%',
+        width: '2px',
+        backgroundColor: extras.leftMarginLineColor ?? 'lightgray',
+      }}>
+      </div>
+    </AbsoluteFill>
+  )
+}

src/paperdrive/types/index.ts

@@ -0,0 +1,3 @@
+export type PaperDrivePoster = {
+
+}

src/youtube/SequentialScene.tsx

@@ -107,14 +107,6 @@ export const SequentialScene: React.FC = (
 
 {getScene(contents[2])}
 
-{getTransitionScene(contents[3])}
-
-{getScene(contents[3])}
-
-{getTransitionScene(contents[4])}
-
-{getScene(contents[4])}
-
 
 
                 {