Backup before bye bye to frame based resumable

.gitignore

@@ -18,4 +18,5 @@ functions/*.log
 uploads/
 uploads/**
 audit_log_creds.json
-build/
+build/
+frames/

package.json

@@ -10,6 +10,8 @@
 		"submodule": "git submodule init && git submodule update",
 		"ci": "echo Runnin on CI",
 		"start": "node server.js",
+		"bundle": "echo -n | remotion bundle",
+		"skip-font-warn": "sed -E -i \"s/\\bfontsLoaded[[:space:]]*>[[:space:]]*20\\b/fontsLoaded > 20000/g\" build/bundle.js",
 		"extract32": "set MODIFY_FILES=1 && node app.js",
 		"extract": "MODIFY_FILES=1 && node app.js",
 		"preview": "remotion studio --log=verbose",

src/common/Error.tsx

@@ -2,7 +2,10 @@ import * as Montserrat from "@remotion/google-fonts/Montserrat";
 
 export function ErrorMsg(props: { error?: string, children?: any }) {
 
-  const { fontFamily } = Montserrat.loadFont("normal", { weights: ["500"] });
+  const { fontFamily } = Montserrat.loadFont("normal", {
+    weights: ["500"],
+    ignoreTooManyRequestsWarning: true
+  });
   const baseStyle = {
     borderColor: "transparent",
     borderRadius: "2rem",

src/common/PosterSingleTextWithBG.tsx

@@ -38,7 +38,10 @@ export const PosterSingleTextWithBG: React.FC<Transcript> = (item) => {
         padding: "0.2rem 1.5rem",
     };
 
-    const { fontFamily } = Montserrat.loadFont("normal", { weights: ["400"] });
+    const { fontFamily } = Montserrat.loadFont("normal", {
+        weights: ["400"],
+        ignoreTooManyRequestsWarning: true
+    });
     let curZoom = 1.5
     let lines = audioCaption?.words || [{
         word: text

src/ig-reel/IG2LineMotivationalScene.tsx

@@ -13,7 +13,10 @@ export default function IG2LineMotivationalScene(props: { meta: Meta; item: Tran
   const media = mediaAbsPaths[0];
   const watermark = mediaAbsPaths[1];
   const bgMusicPath = RenderUtils.tryStaticFile(audioFullPath);
-  const { fontFamily } = Montserrat.loadFont("normal", { weights: ["400"] });
+  const { fontFamily } = Montserrat.loadFont("normal", {
+    weights: ["400"],
+    ignoreTooManyRequestsWarning: true
+  });
   const frame = useCurrentFrame();
 
 

src/ig-reel/IGReelComposition.tsx

@@ -21,7 +21,9 @@ import { wipe } from "@remotion/transitions/wipe";
 import { TransitionAnims } from '../anims/transitions';
 
 export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
-  const { fontFamily } = loadFont();
+  const { fontFamily } = loadFont("normal", {
+    ignoreTooManyRequestsWarning: true
+  });
   let { meta, bgMusic, bgMusicDuration, bgMusicVolume } = props
   let transcripts: Transcript[] = props.contents
   let fps = meta.fps

src/linkedin-video/LinkedinFullSysDesignComposition.tsx

@@ -13,7 +13,9 @@ import { AnimGraphScene } from './AnimGraphScene';
 import GeneralSubtitles from '../subtitles/general_Subtitles';
 
 export const LinkedinFullSysDesignComposition: React.FC = (props: OriginalManuscript) => {
-  const { fontFamily } = loadFont();
+  const { fontFamily } = loadFont("normal", {
+    ignoreTooManyRequestsWarning: true
+  });
   let { meta, bgMusic, bgMusicDuration, bgMusicVolume } = props
   let transcripts: Transcript[] = props.contents
   let fps = meta.fps

src/subtitles/general_Subtitles.tsx

@@ -15,7 +15,8 @@ const GeneralSubtitles: React.FC<{ group: Group, word: Word, position: 'start' |
   fontSize = '6em',
   position = 'end' }) => {
 
-  let { fontFamily } = SubtitleFont.loadFont("normal", {
+  let { fontFamily } = SubtitleFont.loadFont("normal", { 
+    ignoreTooManyRequestsWarning: true,
     weights: ['900']
   })
 

src/subtitles/motivational_Subtitles.tsx

@@ -8,7 +8,8 @@ import _ from 'lodash'
 const MotivationalSubtitles: React.FC<{ group: Group, word: Word, position: 'top' | 'center' | 'bottom' }> = ({ group, word: curWord, position = 'center' }) => {
 
   let { fontFamily } = Montserrat.loadFont("normal", {
-    weights: ['900']
+    weights: ['900'],
+    ignoreTooManyRequestsWarning: true
   })
 
   const frame = useCurrentFrame();

src/youtube/SectionTextWithBG.tsx

@@ -34,7 +34,9 @@ export const SectionTextWithBG: React.FC<SequentialSceneData> = (props: Transcri
 
     const videoConfig = useVideoConfig();
     const { fps, width, height } = useVideoConfig();
-    const { fontFamily } = loadFont();
+    const { fontFamily } = loadFont("normal", {
+        ignoreTooManyRequestsWarning: true
+    });
     const frame = useCurrentFrame();
 
     let textBgColor = textColor;

src/youtube/SingleTextWithBG.tsx

@@ -28,7 +28,9 @@ function adjustFontSize(text: string, fullFont: number, minFontSizeDef): number
 export const SingleTextWithBG: React.FC<SequentialSceneData> = ({ text, textColor = '#fff', duration, direction = 'left', bgImagePath, audioPath, emphasisOnImage }) => {
     const videoConfig = useVideoConfig();
     const { fps, width, height } = useVideoConfig();
-    const { fontFamily } = loadFont();
+    const { fontFamily } = loadFont("normal", {
+        ignoreTooManyRequestsWarning: true
+    });
 
     let textBgColor = textColor;
     let textFontColor = "#fff";

test-render.cjs

@@ -1,4 +1,4 @@
-const { renderFrames, renderStill } = require('@remotion/renderer');
+const { renderFrames, renderStill, stitchFramesToVideo } = require('@remotion/renderer');
 const { bundle } = require('@remotion/bundler');
 const path = require('path');
 const fs = require('fs');
@@ -10,12 +10,28 @@ const { GenerateScript } = require('./src/GenerateScript.cjs')
 const entry = path.join(process.cwd(), 'src/index.ts'); // your Remotion entry file
 const originalManuScriptPath = path.join(process.cwd(), 'public/original_manuscript.json');
 const compositionId = 'IGReelComposition';
+const frameOutputDir = path.join(process.cwd(), 'frames');
 const outputDir = path.join(process.cwd(), 'out');
 const bundleLocation = path.join(process.cwd(), 'build');
-(async () => {
+const assetsInfoFile = path.join(process.cwd(), 'public/assetsInfo.json');
+
+function readAssetInfo() {
+  if (!fs.existsSync(assetsInfoFile)) {
+    return undefined
+  }
+  let assetsInfoStr = fs.readFileSync(assetsInfoFile)
+  let assetsInfo = JSON.parse(assetsInfoStr);
+  return assetsInfo
+}
+
+function updateAssetInfo(assetInfoNew) {
+  fs.writeFileSync(assetsInfoFile, JSON.stringify(assetInfoNew))
+}
+
+export const renderSSR = async (frameRange) => {
   const ScriptStr = fs.readFileSync(originalManuScriptPath);
   const ScriptInput = JSON.parse(ScriptStr);
-  const {
+  let {
     duration,
     Script,
     contents,
@@ -29,7 +45,7 @@ const bundleLocation = path.join(process.cwd(), 'build');
       fps: Script.meta.fps,
       height: Script.meta?.resolution?.height,
       width: Script.meta?.resolution?.width,
-      durationInFrames: 1,
+      durationInFrames: duration,
       defaultProps: Object.assign(Script, {
         bgMusic: RenderUtils.getFileName(Script.bgMusic),
         contents: contents,
@@ -44,8 +60,95 @@ const bundleLocation = path.join(process.cwd(), 'build');
       }),
     },
     serveUrl: bundleLocation,
-    output: path.join(outputDir, 'output.jpg')
+    output: path.join(frameOutputDir, 'output.jpg'),
+    // additional renderer options
+    audioCodec: 'mp3',
+    imageFormat: 'jpeg',
+    enableMultiProcessOnLinux: true,
+    jpegQuality: 70,
+    timeoutInMilliseconds: 60000,
+    concurrency: 1,
+    gl: 'angle'
+  }
+  const fps = Script.meta?.fps;
+  if (!fs.existsSync(frameOutputDir)) {
+    fs.mkdirSync(frameOutputDir, { recursive: true });
   }
-  // await renderStill(renderConfig);
-  await renderFrames(renderConfig)
-})();
+
+  const files = fs.readdirSync(frameOutputDir);
+  const frameNamePattern = 'frame-[frame].[ext]';
+  const frameNamedRe = /frame-(\d+)\.(png|jpg|jpeg)$/i;
+  let lastIndex = -1;
+  for (const f of files) {
+    const m = f.match(frameNamedRe);
+    if (m) {
+      const idx = Number(m[1]);
+      if (!Number.isNaN(idx) && idx > lastIndex) lastIndex = idx;
+    }
+  }
+
+  //-------DEBUG--------//
+  duration = 5 * fps;
+  let startFrame = Math.min(duration - 1, Math.max(0, lastIndex + 1));
+  startFrame = 0;
+  //-------DEBUG--------//
+  if (lastIndex >= 0) {
+    console.log(`Found last rendered frame index ${lastIndex}, resuming from ${startFrame}`);
+  } else {
+    console.log('No existing frame-*.png found, starting from frame 0');
+  }
+
+  const formatMsToETA = (ms) => {
+    const totalSeconds = Math.ceil(ms / 1000);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    const parts = [];
+    if (hours) parts.push(`${hours}h`);
+    if (minutes) parts.push(`${minutes}min`);
+    if (seconds || parts.length === 0) parts.push(`${seconds}sec`);
+    return parts.join(' ');
+  };
+
+  let result = await renderFrames({
+    ...renderConfig,
+    onBrowserLog: (info) => {
+      console.log(`${info.type}: ${info.text}`);
+      console.log(
+        info.stackTrace
+          .map((stack) => {
+            return `  ${stack.url}:${stack.lineNumber}:${stack.columnNumber}`;
+          })
+          .join('\n'),
+      );
+    },
+    imageSequencePattern: frameNamePattern,
+    outputDir: frameOutputDir,
+    frameRange: frameRange ?? [0, duration - 1],
+    onFrameUpdate: (rendered, frameIndex, timeTakenPerFrameMs) => {
+
+      if (rendered % 10 !== 0 && frameIndex !== duration - 1) return;
+      const remainingFrames = Math.max(0, duration - frameIndex);
+      const estimatedMsLeft = remainingFrames * (timeTakenPerFrameMs || 0);
+      const timeLeftSeconds = formatMsToETA(estimatedMsLeft);
+      console.log(`Rendered ${frameIndex} of ${duration} in ${timeTakenPerFrameMs?.toFixed(0)}ms Time left ${timeLeftSeconds}`);
+    }
+  });
+
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  const resultVideo = await stitchFramesToVideo({
+    assetsInfo: result.assetsInfo,
+    ...renderConfig,
+    ...renderConfig.composition,
+    audioCodec: 'mp3',
+    outputLocation: 'D:\\code\\node_projects\\semibit-media-render-farm\\out\\video.mp4',
+    verbose: true
+  })
+
+  console.log('resultVideo', resultVideo)
+
+
+}