SSR working

.gitignore

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

package.json

@@ -16,7 +16,8 @@
 		"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 1 --gl=vulkan   IGReelComposition",
-		"render-build": "remotion $npm_config_target --audio-codec mp3  --image-format=jpeg --enable-multi-process-on-linux --quality=70 --timeout 60000  --concurrency 1 --gl=angle  --browser-executable /usr/bin/chromium-browser $npm_config_composition",
+		"render-build:win32": "remotion %npm_config_target% --audio-codec mp3  --image-format=jpeg --enable-multi-process-on-linux --quality=70 --timeout 60000  --concurrency 1 --gl=angle  %npm_config_composition%",
+		"render-build": "remotion $npm_config_target --audio-codec mp3  --image-format=jpeg --enable-multi-process-on-linux --quality=70 --timeout 60000  --concurrency 1 --gl=angle  $npm_config_composition out/",
 		"render-still": "remotion still --image-format=jpeg SemibitCompositionPoster  ",
 		"render-image": "remotion still --image-format=jpeg --concurrency 1 $npm_config_composition $npm_config_output",
 		"render-images": "remotion render --enable-multiprocess-on-linux --sequence --image-format=jpeg $npm_config_composition $npm_config_output",

renderer.js

@@ -4,13 +4,13 @@ import pkg from 'common-utils';
 import {exec} from 'child_process';
 import {dirname} from 'path';
 import {fileURLToPath} from 'url';
+import { platform } from 'os';
 const {UnzipFiles, Utils, ZipFiles} = pkg;
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-export async function explodeUrl(fileUrl, jobId, dir) {
-	const zipFile = `${dir}/exported-${jobId}.zip`;
+export async function explodeUrl(fileUrl, jobId, dir, zipFile) {
 	await Utils.downloadFile(fileUrl, zipFile, true);
 	await UnzipFiles(zipFile, dir);
 }
@@ -38,15 +38,21 @@ export async function generateOutputBundle(jobId) {
 export function getNpmScript(mediaType) {
 	if (mediaType === 'image') {
 		return 'still';
-	} else {
+	} else if (!mediaType || mediaType === 'video') {
 		return 'render';
+	} else {
+		return mediaType;
 	}
 }
 
 export function doRender(jobId, composition, sendToObserver, target = 'render') {
 	const renderComposition = composition || 'SemibitComposition';
 	let outFile = `out/${jobId}-video.mp4`;
-	let cmd = `npm run render-build  --target=${target} --composition=${renderComposition}`;
+	let script = 'render-build';
+	if (platform() == 'win32') {
+		script = `render-build:win32`
+	}
+	let cmd = `npm run ${script}  --target=${target} --composition=${renderComposition}`;
 	const childProcess = exec(cmd);
 
 	console.log('Starting video render. ' + cmd);

routes.js

@@ -13,6 +13,7 @@ import {fileURLToPath} from 'url';
 import pkg from 'common-utils';
 const {Utils, PerformanceRecorder, FileUploader, Vault} = pkg;
 import bodyParser from 'body-parser';
+import { existsSync } from 'fs';
 
 const RenderRouter = Router();
 const __filename = fileURLToPath(import.meta.url);
@@ -50,14 +51,22 @@ RenderRouter.post('/api/render-sync', async (req, res) => {
 	res.setHeader('X-Job-Id', jobId);
 	res.setTimeout(0);
 	res.setHeader('Connection', 'keep-alive');
-	if (!skipClear) {
-		clear();
-	}
+
 	let logs = [];
 	try {
-		async function run() {
+		const run = async () => {
 			let pref = new PerformanceRecorder();
-			await explodeUrl(fileUrl, jobId, path.join(__dirname, 'public'));
+			const dir = path.join(__dirname, 'public')
+			const zipFile = `${dir}/exported-${jobId}.zip`;
+			if (!existsSync(zipFile)) {
+				if (!skipClear) {
+					clear();
+				}
+				await explodeUrl(fileUrl, jobId, dir, zipFile);
+			}
+			else {
+				console.log(`Job ${jobId} assets already exploded to public. Not downloading again.`)
+			}
 			let originalManuscript = Utils.readFileToObject(
 				path.join(__dirname, `public/original_manuscript.json`)
 			);

src/GenerateScript.cjs

@@ -0,0 +1,122 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+  return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.GenerateScript = void 0;
+var transitions_json_1 = __importDefault(require("../public/assets/transitions.json"));
+var RenderUtils_1 = require("./RenderUtils.cjs");
+var Categories_1 = require("./models/Categories.cjs");
+function GenerateScript(Script) {
+  var _a, _b, _c, _d, _e, _f;
+  var fps = (_a = Script === null || Script === void 0 ? void 0 : Script.meta) === null || _a === void 0 ? void 0 : _a.fps;
+  if (!fps) {
+    Script.meta.fps = 24;
+    fps = 24;
+  }
+  var durationInSec = 0;
+  var lastDirection = false;
+  var preloadImages = [];
+  var preloadVideos = [];
+  var contents = Script.transcript
+    .sort(function (t, u) { return t.index - u.index; })
+    // .filter(item => (item.audioCaptionFile != undefined))
+    // .slice(0, 2)
+    .map(function (section, idx, array) {
+      section.index = section.index || idx;
+      var text = section.text, durationMilis = section.duration, offset = section.offset, mediaAbsPaths = section.mediaAbsPaths, mediaAbsPaths = section.mediaAbsPaths, audioFullPath = section.audioFullPath, title = section.title, pointers = section.pointers;
+      mediaAbsPaths = mediaAbsPaths || mediaAbsPaths || [];
+      if (!durationMilis) {
+        durationMilis = section.durationInSeconds * 1000;
+      }
+      if (!durationMilis)
+        durationMilis = 10e3;
+      // maybe required for youtube composition !!!
+      var curDurSecs = (durationMilis / 1e3);
+      if (curDurSecs < 3) {
+        curDurSecs = 3;
+      }
+      //@ts-ignore
+      var transitionFile = ((section === null || section === void 0 ? void 0 : section.transition_file) || transitions_json_1["default"][0].file);
+      var transition_type = (section === null || section === void 0 ? void 0 : section.transition_type);
+      if (transition_type && transition_type != 'none') {
+        section.transition_duration_sec = (section === null || section === void 0 ? void 0 : section.transition_duration_sec) || 0.5;
+      }
+      //@ts-ignore
+      var transitionDurationSec = ((section === null || section === void 0 ? void 0 : section.transition_duration_sec) || (transition_type && transition_type != 'none') ? 0.5 : 0);
+      var transitionDurationFrames = transitionDurationSec * fps;
+      var commDuration = durationInSec; //+ transitionDurationSec
+      durationInSec = durationInSec + curDurSecs; ///+ transitionDurationSec
+      lastDirection = !lastDirection;
+      mediaAbsPaths.forEach(function (p) {
+        var im = p.path;
+        if (im.startsWith("http")) {
+          if (im.indexOf("-video-") > -1 || im.indexOf(".mp4") > -1 || im.indexOf(".webm") > -1) {
+            preloadVideos.push(im);
+            // preloadVideo(im)
+          }
+          else {
+            preloadImages.push(im);
+            // preloadImage(im)
+          }
+        }
+      });
+      var bgImagePaths = mediaAbsPaths.map(function (p) {
+        p.path = RenderUtils_1.RenderUtils.getFileName(p === null || p === void 0 ? void 0 : p.path);
+        return p;
+      });
+      if (!offset) {
+        offset = commDuration;
+      }
+      var frame = Object.assign(section, {
+        "commulativeDurationStartSec": commDuration,
+        "text": text,
+        "transition_file": RenderUtils_1.RenderUtils.getFileName(transitionFile),
+        "durationInSecs": curDurSecs,
+        "duration": Math.ceil(curDurSecs * fps),
+        "offset": offset * fps,
+        "direction": lastDirection ? 'left' : 'right',
+        "bgImagePaths": bgImagePaths,
+        "audioPath": RenderUtils_1.RenderUtils.getFileName(audioFullPath),
+        "textColor": '#F44336',
+        "emphasisOnImage": (title === null || title === void 0 ? void 0 : title.length) > 0 && (pointers === null || pointers === void 0 ? void 0 : pointers.length) > 0 || Script.meta.emphasisOnImage
+      });
+      return frame;
+    });
+  console.log('contents', contents);
+  var intro = {
+    durationInFrames: 0,
+    durationInSec: 5.433,
+    file: Script.meta.tenantVideoConfig ? RenderUtils_1.RenderUtils.getFileName(Script.meta.tenantVideoConfig.introFile, "assets") : 'assets/music_intro.mp4'
+  };
+  var ADJUST_END_DUR_SEC = 3;
+  var outro = {
+    durationInFrames: 0,
+    durationInSec: 8.034 - ADJUST_END_DUR_SEC,
+    file: Script.meta.tenantVideoConfig ? RenderUtils_1.RenderUtils.getFileName(Script.meta.tenantVideoConfig.outroFile, "assets") : 'assets/music_outro.mp4'
+  };
+  if (intro && ((_c = (_b = Script === null || Script === void 0 ? void 0 : Script.meta) === null || _b === void 0 ? void 0 : _b.tenantVideoConfig) === null || _c === void 0 ? void 0 : _c.introFile)) {
+    durationInSec += intro.durationInSec;
+    intro.durationInFrames = Math.ceil(fps * intro.durationInSec);
+  }
+  if (outro && ((_e = (_d = Script === null || Script === void 0 ? void 0 : Script.meta) === null || _d === void 0 ? void 0 : _d.tenantVideoConfig) === null || _e === void 0 ? void 0 : _e.outroFile)) {
+    durationInSec += outro.durationInSec;
+    //hack for blank end
+    outro.durationInSec += 30;
+    outro.durationInFrames = Math.ceil(fps * outro.durationInSec);
+  }
+  // durationInSec = 10
+  var duration = Math.ceil(durationInSec * fps);
+  console.log("Total Video Duration", durationInSec);
+  //@ts-ignore
+  var playListsIDs = Categories_1.YoutubeCategoriesConfig.GET_PLAY_LIST_IDS(((_f = Script.meta) === null || _f === void 0 ? void 0 : _f.userId) || "104349087108535511186");
+  return {
+    Script: Script,
+    contents: contents,
+    playListsIDs: playListsIDs,
+    duration: duration,
+    outro: outro,
+    intro: intro
+  };
+}
+exports.GenerateScript = GenerateScript;

src/GenerateScript.js

@@ -0,0 +1,122 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.GenerateScript = void 0;
+var transitions_json_1 = __importDefault(require("../public/assets/transitions.json"));
+var RenderUtils_1 = require("./RenderUtils");
+var Categories_1 = require("./models/Categories");
+function GenerateScript(Script) {
+    var _a, _b, _c, _d, _e, _f;
+    var fps = (_a = Script === null || Script === void 0 ? void 0 : Script.meta) === null || _a === void 0 ? void 0 : _a.fps;
+    if (!fps) {
+        Script.meta.fps = 24;
+        fps = 24;
+    }
+    var durationInSec = 0;
+    var lastDirection = false;
+    var preloadImages = [];
+    var preloadVideos = [];
+    var contents = Script.transcript
+        .sort(function (t, u) { return t.index - u.index; })
+        // .filter(item => (item.audioCaptionFile != undefined))
+        // .slice(0, 2)
+        .map(function (section, idx, array) {
+        section.index = section.index || idx;
+        var text = section.text, durationMilis = section.duration, offset = section.offset, mediaAbsPaths = section.mediaAbsPaths, mediaAbsPaths = section.mediaAbsPaths, audioFullPath = section.audioFullPath, title = section.title, pointers = section.pointers;
+        mediaAbsPaths = mediaAbsPaths || mediaAbsPaths || [];
+        if (!durationMilis) {
+            durationMilis = section.durationInSeconds * 1000;
+        }
+        if (!durationMilis)
+            durationMilis = 10e3;
+        // maybe required for youtube composition !!!
+        var curDurSecs = (durationMilis / 1e3);
+        if (curDurSecs < 3) {
+            curDurSecs = 3;
+        }
+        //@ts-ignore
+        var transitionFile = ((section === null || section === void 0 ? void 0 : section.transition_file) || transitions_json_1["default"][0].file);
+        var transition_type = (section === null || section === void 0 ? void 0 : section.transition_type);
+        if (transition_type && transition_type != 'none') {
+            section.transition_duration_sec = (section === null || section === void 0 ? void 0 : section.transition_duration_sec) || 0.5;
+        }
+        //@ts-ignore
+        var transitionDurationSec = ((section === null || section === void 0 ? void 0 : section.transition_duration_sec) || (transition_type && transition_type != 'none') ? 0.5 : 0);
+        var transitionDurationFrames = transitionDurationSec * fps;
+        var commDuration = durationInSec; //+ transitionDurationSec
+        durationInSec = durationInSec + curDurSecs; ///+ transitionDurationSec
+        lastDirection = !lastDirection;
+        mediaAbsPaths.forEach(function (p) {
+            var im = p.path;
+            if (im.startsWith("http")) {
+                if (im.indexOf("-video-") > -1 || im.indexOf(".mp4") > -1 || im.indexOf(".webm") > -1) {
+                    preloadVideos.push(im);
+                    // preloadVideo(im)
+                }
+                else {
+                    preloadImages.push(im);
+                    // preloadImage(im)
+                }
+            }
+        });
+        var bgImagePaths = mediaAbsPaths.map(function (p) {
+            p.path = RenderUtils_1.RenderUtils.getFileName(p === null || p === void 0 ? void 0 : p.path);
+            return p;
+        });
+        if (!offset) {
+            offset = commDuration;
+        }
+        var frame = Object.assign(section, {
+            "commulativeDurationStartSec": commDuration,
+            "text": text,
+            "transition_file": RenderUtils_1.RenderUtils.getFileName(transitionFile),
+            "durationInSecs": curDurSecs,
+            "duration": Math.ceil(curDurSecs * fps),
+            "offset": offset * fps,
+            "direction": lastDirection ? 'left' : 'right',
+            "bgImagePaths": bgImagePaths,
+            "audioPath": RenderUtils_1.RenderUtils.getFileName(audioFullPath),
+            "textColor": '#F44336',
+            "emphasisOnImage": (title === null || title === void 0 ? void 0 : title.length) > 0 && (pointers === null || pointers === void 0 ? void 0 : pointers.length) > 0 || Script.meta.emphasisOnImage
+        });
+        return frame;
+    });
+    console.log('contents', contents);
+    var intro = {
+        durationInFrames: 0,
+        durationInSec: 5.433,
+        file: Script.meta.tenantVideoConfig ? RenderUtils_1.RenderUtils.getFileName(Script.meta.tenantVideoConfig.introFile, "assets") : 'assets/music_intro.mp4'
+    };
+    var ADJUST_END_DUR_SEC = 3;
+    var outro = {
+        durationInFrames: 0,
+        durationInSec: 8.034 - ADJUST_END_DUR_SEC,
+        file: Script.meta.tenantVideoConfig ? RenderUtils_1.RenderUtils.getFileName(Script.meta.tenantVideoConfig.outroFile, "assets") : 'assets/music_outro.mp4'
+    };
+    if (intro && ((_c = (_b = Script === null || Script === void 0 ? void 0 : Script.meta) === null || _b === void 0 ? void 0 : _b.tenantVideoConfig) === null || _c === void 0 ? void 0 : _c.introFile)) {
+        durationInSec += intro.durationInSec;
+        intro.durationInFrames = Math.ceil(fps * intro.durationInSec);
+    }
+    if (outro && ((_e = (_d = Script === null || Script === void 0 ? void 0 : Script.meta) === null || _d === void 0 ? void 0 : _d.tenantVideoConfig) === null || _e === void 0 ? void 0 : _e.outroFile)) {
+        durationInSec += outro.durationInSec;
+        //hack for blank end
+        outro.durationInSec += 30;
+        outro.durationInFrames = Math.ceil(fps * outro.durationInSec);
+    }
+    // durationInSec = 10
+    var duration = Math.ceil(durationInSec * fps);
+    console.log("Total Video Duration", durationInSec);
+    //@ts-ignore
+    var playListsIDs = Categories_1.YoutubeCategoriesConfig.GET_PLAY_LIST_IDS(((_f = Script.meta) === null || _f === void 0 ? void 0 : _f.userId) || "104349087108535511186");
+    return {
+        Script: Script,
+        contents: contents,
+        playListsIDs: playListsIDs,
+        duration: duration,
+        outro: outro,
+        intro: intro
+    };
+}
+exports.GenerateScript = GenerateScript;

src/GenerateScript.ts

@@ -0,0 +1,129 @@
+import { OriginalManuscript } from 'common-utils'
+import Transitions from '../public/assets/transitions.json'
+import { RenderUtils } from './RenderUtils'
+import { YoutubeCategoriesConfig } from './models/Categories'
+
+export function GenerateScript(Script: OriginalManuscript) {
+
+  let fps = Script?.meta?.fps
+  if (!fps) {
+    Script.meta.fps = 24
+    fps = 24
+  }
+  var durationInSec = 0
+  var lastDirection = false;
+
+  let preloadImages = []
+  let preloadVideos = []
+
+  let contents =
+    Script.transcript
+      .sort((t, u) => t.index - u.index)
+      // .filter(item => (item.audioCaptionFile != undefined))
+      // .slice(0, 2)
+      .map((section, idx, array) => {
+        section.index = section.index || idx;
+        var { text, duration: durationMilis, offset, mediaAbsPaths, mediaAbsPaths, audioFullPath, title, pointers } = section
+        mediaAbsPaths = mediaAbsPaths || mediaAbsPaths || []
+        if (!durationMilis) {
+          durationMilis = section.durationInSeconds * 1000
+        }
+        if (!durationMilis)
+          durationMilis = 10e3
+        // maybe required for youtube composition !!!
+        let curDurSecs = (durationMilis / 1e3)
+        if (curDurSecs < 3) {
+          curDurSecs = 3
+        }
+        //@ts-ignore
+        const transitionFile = (section?.transition_file || Transitions[0].file)
+        const transition_type = (section?.transition_type)
+        if (transition_type && transition_type != 'none') {
+          section.transition_duration_sec = section?.transition_duration_sec || 0.5
+        }
+        //@ts-ignore
+        const transitionDurationSec = (section?.transition_duration_sec || (transition_type && transition_type != 'none') ? 0.5 : 0)
+        const transitionDurationFrames = transitionDurationSec * fps
+
+
+        let commDuration = durationInSec //+ transitionDurationSec
+        durationInSec = durationInSec + curDurSecs;///+ transitionDurationSec
+        lastDirection = !lastDirection
+        mediaAbsPaths.forEach(p => {
+          let im = p.path
+          if (im.startsWith("http")) {
+            if (im.indexOf("-video-") > -1 || im.indexOf(".mp4") > -1 || im.indexOf(".webm") > -1) {
+              preloadVideos.push(im)
+              // preloadVideo(im)
+            }
+            else {
+              preloadImages.push(im)
+              // preloadImage(im)
+            }
+          }
+        })
+        let bgImagePaths = mediaAbsPaths.map(p => {
+          p.path = RenderUtils.getFileName(p?.path)!!
+          return p
+        })
+        if (!offset) {
+          offset = commDuration
+        }
+        let frame = Object.assign(section, {
+          "commulativeDurationStartSec": commDuration,
+          "text": text,
+          "transition_file": RenderUtils.getFileName(transitionFile),
+          "durationInSecs": curDurSecs,
+          "duration": Math.ceil(curDurSecs * fps),
+          "offset": offset * fps,
+          "direction": lastDirection ? 'left' : 'right',
+          "bgImagePaths": bgImagePaths,
+          "audioPath": RenderUtils.getFileName(audioFullPath),
+          "textColor": '#F44336',
+          "emphasisOnImage": title?.length > 0 && pointers?.length > 0 || Script.meta.emphasisOnImage
+        })
+
+        return frame
+      })
+
+  console.log('contents', contents)
+  const intro = {
+    durationInFrames: 0,
+    durationInSec: 5.433,
+    file: Script.meta.tenantVideoConfig ? RenderUtils.getFileName(Script.meta.tenantVideoConfig.introFile, "assets") : 'assets/music_intro.mp4'
+  }
+  let ADJUST_END_DUR_SEC = 3
+  const outro = {
+    durationInFrames: 0,
+    durationInSec: 8.034 - ADJUST_END_DUR_SEC,
+    file: Script.meta.tenantVideoConfig ? RenderUtils.getFileName(Script.meta.tenantVideoConfig.outroFile, "assets") : 'assets/music_outro.mp4'
+  }
+
+  if (intro && Script?.meta?.tenantVideoConfig?.introFile) {
+    durationInSec += intro.durationInSec
+    intro.durationInFrames = Math.ceil(fps * intro.durationInSec)
+  }
+
+  if (outro && Script?.meta?.tenantVideoConfig?.outroFile) {
+    durationInSec += outro.durationInSec
+    //hack for blank end
+    outro.durationInSec += 30
+    outro.durationInFrames = Math.ceil(fps * outro.durationInSec)
+  }
+
+  // durationInSec = 10
+  const duration = Math.ceil(durationInSec * fps)
+  console.log("Total Video Duration", durationInSec)
+
+  //@ts-ignore
+  const playListsIDs = YoutubeCategoriesConfig.GET_PLAY_LIST_IDS(Script.meta?.userId || "104349087108535511186")
+
+  return {
+    Script,
+    contents,
+    playListsIDs,
+    duration,
+    outro,
+    intro
+  }
+}

src/RenderUtils.cjs

@@ -0,0 +1,182 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+  return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.RenderUtils = void 0;
+var lodash_1 = __importDefault(require("lodash"));
+var remotion_1 = require("remotion");
+function levenshteinDistance(str1, str2) {
+  var dp = Array.from({ length: str1.length + 1 }, function (_, i) { return [i]; });
+  for (var j = 1; j <= str2.length; j++) {
+    dp[0][j] = j;
+  }
+  for (var i = 1; i <= str1.length; i++) {
+    for (var j = 1; j <= str2.length; j++) {
+      var cost = str1[i - 1] === str2[j - 1] ? 0 : 1;
+      dp[i][j] = Math.min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + cost);
+    }
+  }
+  return dp[str1.length][str2.length];
+}
+var RenderUtils = /** @class */ (function () {
+  function RenderUtils() {
+  }
+  RenderUtils.calculateDisplayMedia = function (item, durationInSeconds, frame, fps) {
+    var currentDisplayMedia = ((item === null || item === void 0 ? void 0 : item.mediaAbsPaths) || [])[0];
+    if (!lodash_1["default"].isEmpty(item === null || item === void 0 ? void 0 : item.mediaAbsPaths)) {
+      var frameOffest = 0;
+      for (var i = 0; i < (item === null || item === void 0 ? void 0 : item.mediaAbsPaths.length); i++) {
+        var media = item.mediaAbsPaths[i];
+        if (!media) {
+          return undefined;
+        }
+        media.idx = i;
+        media.startFrame = frameOffest;
+        if (media.durationSec == undefined) {
+          media.durationSec = durationInSeconds / (item === null || item === void 0 ? void 0 : item.mediaAbsPaths.length);
+          if (i == item.mediaAbsPaths.length - 1) {
+            media.durationSec = durationInSeconds;
+          }
+        }
+        media.durationFrames = media.durationSec * fps;
+        media.endFrame = frameOffest + media.durationFrames;
+        frameOffest = frameOffest + media.durationFrames;
+        if (frame > media.startFrame && frame < media.endFrame) {
+          currentDisplayMedia = media;
+        }
+      }
+    }
+    return currentDisplayMedia;
+  };
+  RenderUtils.tryStaticFile = function (file) {
+    try {
+      return (0, remotion_1.staticFile)(file);
+    }
+    catch (e) {
+      var fileName = RenderUtils.getFileName(file);
+      return (0, remotion_1.staticFile)(fileName);
+    }
+  };
+  RenderUtils.convertVHToPixels = function (vh) {
+    return Math.round(window.innerHeight * (parseInt(vh.replace("vh", "")) / 100));
+  };
+  RenderUtils.convertVWToPixels = function (vw) {
+    return Math.round(window.innerWidth * (parseInt(vw.replace("vw", "")) / 100));
+  };
+  RenderUtils.splitWordsIntoGroups = function (words) {
+    var groups = [];
+    var currentGroup = [];
+    for (var _i = 0, words_1 = words; _i < words_1.length; _i++) {
+      var word = words_1[_i];
+      if (currentGroup.length === 0) {
+        currentGroup.push(word);
+      }
+      else if (word.sentence_end) {
+        currentGroup.push(word);
+        groups.push(currentGroup);
+        currentGroup = [];
+      }
+      else if (currentGroup.length < 5) {
+        currentGroup.push(word);
+      }
+      else {
+        groups.push(currentGroup);
+        currentGroup = [word];
+      }
+    }
+    if (currentGroup.length > 0) {
+      groups.push(currentGroup);
+    }
+    // Ensure each group has a maximum of 5 words
+    var finalGroups = [];
+    for (var _a = 0, groups_1 = groups; _a < groups_1.length; _a++) {
+      var group = groups_1[_a];
+      while (group.length > 5) {
+        finalGroups.push(group.slice(0, 5));
+        group.splice(0, 5);
+      }
+      finalGroups.push(group);
+    }
+    return finalGroups === null || finalGroups === void 0 ? void 0 : finalGroups.map(function (group) {
+      return {
+        words: group,
+        start: undefined,
+        end: undefined
+      };
+    });
+  };
+  RenderUtils.findCurrentGroupByTime = function (timeSec, groups) {
+    var t = timeSec;
+    var wds = groups;
+    for (var i = 0; i < wds.length; i++) {
+      var x = wds[i];
+      if (x.start != undefined && x.end != undefined && (t >= x.start && t < x.end)) {
+        return x;
+      }
+    }
+  };
+  RenderUtils.findCurrentWord = function (timeSec, frames) {
+    var t = timeSec;
+    var wds = frames;
+    for (var i = 0; i < wds.length; i++) {
+      var x = wds[i];
+      if (x.start && x.end && (t >= x.start && t < x.end)) {
+        return x;
+      }
+    }
+  };
+  RenderUtils.randomElement = function (arr, seed) {
+    return arr[Math.floor((0, remotion_1.random)(seed || 1) * arr.length)];
+  };
+  RenderUtils.hashCode = function (s) {
+    return s.split("").reduce(function (a, b) {
+      a = ((a << 5) - a) + b.charCodeAt(0);
+      return a & a;
+    }, 0);
+  };
+  RenderUtils.splitArrayIntoChunks = function (arr, chunkSize) {
+    var chunkedArr = [];
+    for (var i = 0; i < arr.length; i += chunkSize) {
+      chunkedArr.push(arr.slice(i, i + chunkSize));
+    }
+    return chunkedArr;
+  };
+  RenderUtils.splitArray = function (arr, pieces) {
+    var result = [];
+    var chunkSize = Math.ceil(arr.length / pieces);
+    for (var i = 0, j = arr.length; i < j; i += chunkSize) {
+      result.push(arr.slice(i, i + chunkSize));
+    }
+    return result;
+  };
+  RenderUtils.getFileName = function (filePath, subdirpath) {
+    if (!filePath)
+      return undefined;
+    if (filePath.startsWith("http"))
+      return filePath;
+    // Always extract just the filename from any path
+    var match = filePath.match(/([^\/\\]+)$/);
+    var filename = match ? match[1] : '';
+    if (subdirpath) {
+      return subdirpath + "/" + filename;
+    }
+    else {
+      return filename;
+    }
+  };
+  RenderUtils.findMostSimilarString = function (inputString, stringArray) {
+    var minDistance = Number.MAX_SAFE_INTEGER;
+    var mostSimilarString = '';
+    stringArray.forEach(function (str) {
+      var distance = levenshteinDistance(inputString, str);
+      if (distance < minDistance) {
+        minDistance = distance;
+        mostSimilarString = str;
+      }
+    });
+    return mostSimilarString;
+  };
+  return RenderUtils;
+}());
+exports.RenderUtils = RenderUtils;

src/RenderUtils.js

@@ -0,0 +1,182 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.RenderUtils = void 0;
+var lodash_1 = __importDefault(require("lodash"));
+var remotion_1 = require("remotion");
+function levenshteinDistance(str1, str2) {
+    var dp = Array.from({ length: str1.length + 1 }, function (_, i) { return [i]; });
+    for (var j = 1; j <= str2.length; j++) {
+        dp[0][j] = j;
+    }
+    for (var i = 1; i <= str1.length; i++) {
+        for (var j = 1; j <= str2.length; j++) {
+            var cost = str1[i - 1] === str2[j - 1] ? 0 : 1;
+            dp[i][j] = Math.min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + cost);
+        }
+    }
+    return dp[str1.length][str2.length];
+}
+var RenderUtils = /** @class */ (function () {
+    function RenderUtils() {
+    }
+    RenderUtils.calculateDisplayMedia = function (item, durationInSeconds, frame, fps) {
+        var currentDisplayMedia = ((item === null || item === void 0 ? void 0 : item.mediaAbsPaths) || [])[0];
+        if (!lodash_1["default"].isEmpty(item === null || item === void 0 ? void 0 : item.mediaAbsPaths)) {
+            var frameOffest = 0;
+            for (var i = 0; i < (item === null || item === void 0 ? void 0 : item.mediaAbsPaths.length); i++) {
+                var media = item.mediaAbsPaths[i];
+                if (!media) {
+                    return undefined;
+                }
+                media.idx = i;
+                media.startFrame = frameOffest;
+                if (media.durationSec == undefined) {
+                    media.durationSec = durationInSeconds / (item === null || item === void 0 ? void 0 : item.mediaAbsPaths.length);
+                    if (i == item.mediaAbsPaths.length - 1) {
+                        media.durationSec = durationInSeconds;
+                    }
+                }
+                media.durationFrames = media.durationSec * fps;
+                media.endFrame = frameOffest + media.durationFrames;
+                frameOffest = frameOffest + media.durationFrames;
+                if (frame > media.startFrame && frame < media.endFrame) {
+                    currentDisplayMedia = media;
+                }
+            }
+        }
+        return currentDisplayMedia;
+    };
+    RenderUtils.tryStaticFile = function (file) {
+        try {
+            return (0, remotion_1.staticFile)(file);
+        }
+        catch (e) {
+            var fileName = RenderUtils.getFileName(file);
+            return (0, remotion_1.staticFile)(fileName);
+        }
+    };
+    RenderUtils.convertVHToPixels = function (vh) {
+        return Math.round(window.innerHeight * (parseInt(vh.replace("vh", "")) / 100));
+    };
+    RenderUtils.convertVWToPixels = function (vw) {
+        return Math.round(window.innerWidth * (parseInt(vw.replace("vw", "")) / 100));
+    };
+    RenderUtils.splitWordsIntoGroups = function (words) {
+        var groups = [];
+        var currentGroup = [];
+        for (var _i = 0, words_1 = words; _i < words_1.length; _i++) {
+            var word = words_1[_i];
+            if (currentGroup.length === 0) {
+                currentGroup.push(word);
+            }
+            else if (word.sentence_end) {
+                currentGroup.push(word);
+                groups.push(currentGroup);
+                currentGroup = [];
+            }
+            else if (currentGroup.length < 5) {
+                currentGroup.push(word);
+            }
+            else {
+                groups.push(currentGroup);
+                currentGroup = [word];
+            }
+        }
+        if (currentGroup.length > 0) {
+            groups.push(currentGroup);
+        }
+        // Ensure each group has a maximum of 5 words
+        var finalGroups = [];
+        for (var _a = 0, groups_1 = groups; _a < groups_1.length; _a++) {
+            var group = groups_1[_a];
+            while (group.length > 5) {
+                finalGroups.push(group.slice(0, 5));
+                group.splice(0, 5);
+            }
+            finalGroups.push(group);
+        }
+        return finalGroups === null || finalGroups === void 0 ? void 0 : finalGroups.map(function (group) {
+            return {
+                words: group,
+                start: undefined,
+                end: undefined
+            };
+        });
+    };
+    RenderUtils.findCurrentGroupByTime = function (timeSec, groups) {
+        var t = timeSec;
+        var wds = groups;
+        for (var i = 0; i < wds.length; i++) {
+            var x = wds[i];
+            if (x.start != undefined && x.end != undefined && (t >= x.start && t < x.end)) {
+                return x;
+            }
+        }
+    };
+    RenderUtils.findCurrentWord = function (timeSec, frames) {
+        var t = timeSec;
+        var wds = frames;
+        for (var i = 0; i < wds.length; i++) {
+            var x = wds[i];
+            if (x.start && x.end && (t >= x.start && t < x.end)) {
+                return x;
+            }
+        }
+    };
+    RenderUtils.randomElement = function (arr, seed) {
+        return arr[Math.floor((0, remotion_1.random)(seed || 1) * arr.length)];
+    };
+    RenderUtils.hashCode = function (s) {
+        return s.split("").reduce(function (a, b) {
+            a = ((a << 5) - a) + b.charCodeAt(0);
+            return a & a;
+        }, 0);
+    };
+    RenderUtils.splitArrayIntoChunks = function (arr, chunkSize) {
+        var chunkedArr = [];
+        for (var i = 0; i < arr.length; i += chunkSize) {
+            chunkedArr.push(arr.slice(i, i + chunkSize));
+        }
+        return chunkedArr;
+    };
+    RenderUtils.splitArray = function (arr, pieces) {
+        var result = [];
+        var chunkSize = Math.ceil(arr.length / pieces);
+        for (var i = 0, j = arr.length; i < j; i += chunkSize) {
+            result.push(arr.slice(i, i + chunkSize));
+        }
+        return result;
+    };
+    RenderUtils.getFileName = function (filePath, subdirpath) {
+        if (!filePath)
+            return undefined;
+        if (filePath.startsWith("http"))
+            return filePath;
+        // Always extract just the filename from any path
+        var match = filePath.match(/([^\/\\]+)$/);
+        var filename = match ? match[1] : '';
+        if (subdirpath) {
+            return subdirpath + "/" + filename;
+        }
+        else {
+            return filename;
+        }
+    };
+    RenderUtils.findMostSimilarString = function (inputString, stringArray) {
+        var minDistance = Number.MAX_SAFE_INTEGER;
+        var mostSimilarString = '';
+        stringArray.forEach(function (str) {
+            var distance = levenshteinDistance(inputString, str);
+            if (distance < minDistance) {
+                minDistance = distance;
+                mostSimilarString = str;
+            }
+        });
+        return mostSimilarString;
+    };
+    return RenderUtils;
+}());
+exports.RenderUtils = RenderUtils;

src/models/Categories.cjs

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+  return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a, _b, _c;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YoutubeCategoriesConfig = void 0;
+var path_1 = __importDefault(require("path"));
+var PLAY_LIST_NAMES = {
+  SCIENCE_AND_TECHNOLOGY: 'Science & Technology',
+  AMAZING_UNIVERSE: 'The Amazing Universe: From Microbes to Galaxies',
+  HISTORY_AND_POLITICS: 'The Past is Present: Lessons from History and Politics',
+  CURRENT_AND_NEWS: 'Current Events & News Digest',
+  GADGET_REVIEWS: 'Gadget Reviews',
+  LAPTOP_REVIEWS: 'Laptop Reviews',
+  MOBILE_REVIEWS: 'Mobile Reviews',
+  RAD_TECH_TODAY: 'Rad Tech Today'
+};
+var INTRO_OUTRO_TENANT_CONFIG = {
+  "104349087108535511186": {
+    introFile: path_1["default"].join(__dirname, "../../public/assets/music_intro.mp4"),
+    outroFile: path_1["default"].join(__dirname, "../../public/assets/music_outro.mp4")
+  },
+  "116439292677772406470": {
+    introFile: path_1["default"].join(__dirname, "../../public/assets/music_techrads_intro.mp4"),
+    outroFile: path_1["default"].join(__dirname, "../../public/assets/music_techrads_outro.mp4")
+  }
+};
+var SOCIAL_HANDLES = {
+  INSTAGRAM: {
+    "104349087108535511186": 'semibit.media',
+    "116439292677772406470": 'tech.rads'
+  }
+};
+var ALL_TENANT_PLAYLISTS = {
+  "104349087108535511186": (_a = {},
+    _a[PLAY_LIST_NAMES.SCIENCE_AND_TECHNOLOGY] = 'PLeT-Kik6WdhQT35w5SVx1tUzM0L-U9aHy',
+    _a[PLAY_LIST_NAMES.AMAZING_UNIVERSE] = 'PLeT-Kik6WdhQJEnsI-QapmmjxEvZEXMQ2',
+    _a[PLAY_LIST_NAMES.HISTORY_AND_POLITICS] = 'PLeT-Kik6WdhSqoMh2dfnFpHaGTa-3PCBB',
+    _a[PLAY_LIST_NAMES.CURRENT_AND_NEWS] = 'PLeT-Kik6WdhTHl_RxwavJ3FXBGiXlYIxq',
+    _a),
+  "116439292677772406470": (_b = {},
+    _b[PLAY_LIST_NAMES.RAD_TECH_TODAY] = 'PLNGN7S9FgPhTFGUAhPdhdSJP5Jq0ljPqE',
+    _b[PLAY_LIST_NAMES.LAPTOP_REVIEWS] = 'PLNGN7S9FgPhSiWXNTZgoAKz9iu6zL12ox',
+    _b[PLAY_LIST_NAMES.MOBILE_REVIEWS] = 'PLNGN7S9FgPhQRQHOdrNXpVI_5CAT9-noa',
+    _b[PLAY_LIST_NAMES.GADGET_REVIEWS] = 'PLNGN7S9FgPhQflAC9FqdIm7_BtLWOCDHa',
+    _b)
+};
+var GET_PLAY_LIST_IDS = function (userId) {
+  var playlists = ALL_TENANT_PLAYLISTS[userId] || ALL_TENANT_PLAYLISTS['104349087108535511186'];
+  return playlists;
+};
+var YOUTUBE_VIDEO_CATEGORY_ID = (_c = {},
+  _c[PLAY_LIST_NAMES.SCIENCE_AND_TECHNOLOGY] = "28",
+  _c[PLAY_LIST_NAMES.AMAZING_UNIVERSE] = "28",
+  _c[PLAY_LIST_NAMES.HISTORY_AND_POLITICS] = "27",
+  _c[PLAY_LIST_NAMES.CURRENT_AND_NEWS] = "25",
+  _c[PLAY_LIST_NAMES.RAD_TECH_TODAY] = "28",
+  _c[PLAY_LIST_NAMES.LAPTOP_REVIEWS] = "28",
+  _c[PLAY_LIST_NAMES.MOBILE_REVIEWS] = "28",
+  _c[PLAY_LIST_NAMES.GADGET_REVIEWS] = "28",
+  _c);
+exports.YoutubeCategoriesConfig = {
+  PLAY_LIST_NAMES: PLAY_LIST_NAMES,
+  ALL_TENANT_PLAYLISTS: ALL_TENANT_PLAYLISTS,
+  GET_PLAY_LIST_IDS: GET_PLAY_LIST_IDS,
+  YOUTUBE_VIDEO_CATEGORY_ID: YOUTUBE_VIDEO_CATEGORY_ID,
+  INTRO_OUTRO_TENANT_CONFIG: INTRO_OUTRO_TENANT_CONFIG,
+  SOCIAL_HANDLES: SOCIAL_HANDLES
+};

src/models/Categories.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a, _b, _c;
+exports.__esModule = true;
+exports.YoutubeCategoriesConfig = void 0;
+var path_1 = __importDefault(require("path"));
+var PLAY_LIST_NAMES = {
+    SCIENCE_AND_TECHNOLOGY: 'Science & Technology',
+    AMAZING_UNIVERSE: 'The Amazing Universe: From Microbes to Galaxies',
+    HISTORY_AND_POLITICS: 'The Past is Present: Lessons from History and Politics',
+    CURRENT_AND_NEWS: 'Current Events & News Digest',
+    GADGET_REVIEWS: 'Gadget Reviews',
+    LAPTOP_REVIEWS: 'Laptop Reviews',
+    MOBILE_REVIEWS: 'Mobile Reviews',
+    RAD_TECH_TODAY: 'Rad Tech Today'
+};
+var INTRO_OUTRO_TENANT_CONFIG = {
+    "104349087108535511186": {
+        introFile: path_1["default"].join(__dirname, "../../public/assets/music_intro.mp4"),
+        outroFile: path_1["default"].join(__dirname, "../../public/assets/music_outro.mp4")
+    },
+    "116439292677772406470": {
+        introFile: path_1["default"].join(__dirname, "../../public/assets/music_techrads_intro.mp4"),
+        outroFile: path_1["default"].join(__dirname, "../../public/assets/music_techrads_outro.mp4")
+    }
+};
+var SOCIAL_HANDLES = {
+    INSTAGRAM: {
+        "104349087108535511186": 'semibit.media',
+        "116439292677772406470": 'tech.rads'
+    }
+};
+var ALL_TENANT_PLAYLISTS = {
+    "104349087108535511186": (_a = {},
+        _a[PLAY_LIST_NAMES.SCIENCE_AND_TECHNOLOGY] = 'PLeT-Kik6WdhQT35w5SVx1tUzM0L-U9aHy',
+        _a[PLAY_LIST_NAMES.AMAZING_UNIVERSE] = 'PLeT-Kik6WdhQJEnsI-QapmmjxEvZEXMQ2',
+        _a[PLAY_LIST_NAMES.HISTORY_AND_POLITICS] = 'PLeT-Kik6WdhSqoMh2dfnFpHaGTa-3PCBB',
+        _a[PLAY_LIST_NAMES.CURRENT_AND_NEWS] = 'PLeT-Kik6WdhTHl_RxwavJ3FXBGiXlYIxq',
+        _a),
+    "116439292677772406470": (_b = {},
+        _b[PLAY_LIST_NAMES.RAD_TECH_TODAY] = 'PLNGN7S9FgPhTFGUAhPdhdSJP5Jq0ljPqE',
+        _b[PLAY_LIST_NAMES.LAPTOP_REVIEWS] = 'PLNGN7S9FgPhSiWXNTZgoAKz9iu6zL12ox',
+        _b[PLAY_LIST_NAMES.MOBILE_REVIEWS] = 'PLNGN7S9FgPhQRQHOdrNXpVI_5CAT9-noa',
+        _b[PLAY_LIST_NAMES.GADGET_REVIEWS] = 'PLNGN7S9FgPhQflAC9FqdIm7_BtLWOCDHa',
+        _b)
+};
+var GET_PLAY_LIST_IDS = function (userId) {
+    var playlists = ALL_TENANT_PLAYLISTS[userId] || ALL_TENANT_PLAYLISTS['104349087108535511186'];
+    return playlists;
+};
+var YOUTUBE_VIDEO_CATEGORY_ID = (_c = {},
+    _c[PLAY_LIST_NAMES.SCIENCE_AND_TECHNOLOGY] = "28",
+    _c[PLAY_LIST_NAMES.AMAZING_UNIVERSE] = "28",
+    _c[PLAY_LIST_NAMES.HISTORY_AND_POLITICS] = "27",
+    _c[PLAY_LIST_NAMES.CURRENT_AND_NEWS] = "25",
+    _c[PLAY_LIST_NAMES.RAD_TECH_TODAY] = "28",
+    _c[PLAY_LIST_NAMES.LAPTOP_REVIEWS] = "28",
+    _c[PLAY_LIST_NAMES.MOBILE_REVIEWS] = "28",
+    _c[PLAY_LIST_NAMES.GADGET_REVIEWS] = "28",
+    _c);
+exports.YoutubeCategoriesConfig = {
+    PLAY_LIST_NAMES: PLAY_LIST_NAMES,
+    ALL_TENANT_PLAYLISTS: ALL_TENANT_PLAYLISTS,
+    GET_PLAY_LIST_IDS: GET_PLAY_LIST_IDS,
+    YOUTUBE_VIDEO_CATEGORY_ID: YOUTUBE_VIDEO_CATEGORY_ID,
+    INTRO_OUTRO_TENANT_CONFIG: INTRO_OUTRO_TENANT_CONFIG,
+    SOCIAL_HANDLES: SOCIAL_HANDLES
+};

src/webpack-override.ts

@@ -2,5 +2,28 @@ import { enableTailwind } from '@remotion/tailwind';
 import { WebpackOverrideFn } from '@remotion/bundler';
 
 export const webpackOverride: WebpackOverrideFn = (currentConfiguration) => {
-	return enableTailwind(currentConfiguration);
+	const config = enableTailwind(currentConfiguration);
+
+	// Disable minification so symbols and names are preserved for debugging
+	config.optimization = config.optimization || {};
+	config.optimization.minimize = false;
+
+	// Remove any minimizers (e.g., Terser) if present
+	if (Array.isArray(config.optimization.minimizer)) {
+		config.optimization.minimizer.length = 0;
+	}
+
+	// Keep readable module/chunk ids so stack traces and names are preserved
+	// (supported values: 'named' or 'deterministic' / 'size' etc.)
+	config.optimization.moduleIds = 'named';
+	config.optimization.chunkIds = 'named';
+
+	// Emit full source maps for better debugging
+	config.devtool = config.devtool || 'source-map';
+
+	// Include path info in the output for easier inspection
+	config.output = config.output || {};
+	config.output.pathinfo = true;
+
+	return config;
 };

test-render.cjs

@@ -0,0 +1,50 @@
+const { renderFrames, renderStill } = require('@remotion/renderer');
+const { bundle } = require('@remotion/bundler');
+const path = require('path');
+const fs = require('fs');
+
+const { RenderUtils } = require('./src/RenderUtils.cjs')
+const { GenerateScript } = require('./src/GenerateScript.cjs')
+
+//npx tsc src/GenerateScript.ts --module commonjs --outDir build --esModuleInterop --declaration false
+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 outputDir = path.join(process.cwd(), 'out');
+const bundleLocation = path.join(process.cwd(), 'build');
+(async () => {
+  const ScriptStr = fs.readFileSync(originalManuScriptPath);
+  const ScriptInput = JSON.parse(ScriptStr);
+  const {
+    duration,
+    Script,
+    contents,
+    intro,
+    outro,
+    playListsIDs
+  } = GenerateScript(ScriptInput)
+  let renderConfig = {
+    composition: {
+      id: compositionId,
+      fps: Script.meta.fps,
+      height: Script.meta?.resolution?.height,
+      width: Script.meta?.resolution?.width,
+      durationInFrames: 1,
+      defaultProps: Object.assign(Script, {
+        bgMusic: RenderUtils.getFileName(Script.bgMusic),
+        contents: contents,
+        intro: intro,
+        outro: outro
+      }),
+      props: Object.assign(Script, {
+        bgMusic: RenderUtils.getFileName(Script.bgMusic),
+        contents: contents,
+        intro: intro,
+        outro: outro
+      }),
+    },
+    serveUrl: bundleLocation,
+    output: path.join(outputDir, 'output.jpg')
+  }
+  await renderStill(renderConfig);
+})();