Backup before esm

app.js

@@ -9,6 +9,7 @@ const OracleStorage = require('./common-creds/oracle/storage.json');
 const axios = require('axios');
 const { spawn, exec, ChildProcess } = require('child_process');
 const { FireStoreDB } = require('multi-db-orm')
+var syllableCounter = require('syllable-count-english')
 var kill = require('tree-kill');
 
 let pl = {
@@ -81,7 +82,7 @@ function render() {
 
 const db = new FireStoreDB(path.join(__dirname, 'common-creds/firebase/semibitmedia.json'))
 
-function modifyFiles(originalManuscript) {
+function modifyFiles(originalManuscript, originalManuscriptFile) {
 
   let fname = path.join(__dirname, "./src/textWithBgImage/SequentialScene.orig.tsx")
   let fnameTarget = path.join(__dirname, "./src/textWithBgImage/SequentialScene.tsx")
@@ -94,10 +95,32 @@ function modifyFiles(originalManuscript) {
     seqScene = seqScene + `\n{getScene(contents[${index}])}\n`
   }
 
+  generateSubtitles(originalManuscript)
+  fs.writeFileSync(originalManuscriptFile, JSON.stringify(originalManuscript, null, 2))
+
   fs.writeFileSync(fnameTarget, SequentialSceneText.replace("{getScene(contents[0])}", seqScene));
 
 }
 
+function generateSubtitles(originalManuscript) {
+
+  let transcript = originalManuscript.transcript
+  for (let index = 0; index < transcript.length; index++) {
+    const section = transcript[index];
+    section.subtitles = section.text.split(".").map(t => {
+      return {
+        text: t,
+        expectedDurationSec: getDurationForSentenceByPhenone(t)
+      }
+    })
+  }
+  return originalManuscript
+}
+
+function getDurationForSentenceByPhenone(text) {
+  return syllableCounter.syllableCount(text)
+}
+
 async function extract(filePath) {
   await UnzipFiles(filePath, './public')
 }
@@ -175,6 +198,7 @@ app.all('/render', async (req, res) => {
       resolve()
     }
   })
+  clear()
   const perf = new PerformanceRecorder()
   perf.reset()
   let bundleUrl = req.query.fileUrl
@@ -198,7 +222,7 @@ app.all('/render', async (req, res) => {
     let manuObj = JSON.parse(fs.readFileSync(manuFile).toString())
     currentRenderJobId = manuObj.id
     let jobID = manuObj.id
-    modifyFiles(manuObj)
+    modifyFiles(manuObj, manuFile)
     const uploader = new FileUploader('oracle', OracleStorage.semibit_media)
     if (!skipRender) {
       Utils.clearFolder(path.join(__dirname, 'out'))
@@ -435,8 +459,11 @@ module.exports = app
 // doRender()
 
 if (process.env.MODIFY_FILES) {
-  let manuFile = path.join(__dirname, 'public/original_manuscript.json')
-  let manuObj = JSON.parse(fs.readFileSync(manuFile).toString())
-  modifyFiles(manuObj)
-  console.log('Sequence Generated')
+  let filePath = 'public/@export_607c230fef.zip'
+  extract(filePath).then(() => {
+    let manuFile = path.join(__dirname, 'public/original_manuscript.json')
+    let manuObj = JSON.parse(fs.readFileSync(manuFile).toString())
+    modifyFiles(manuObj, manuFile)
+    console.log('Sequence Generated')
+  })
 }

package-lock.json

@@ -40,6 +40,7 @@
         "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",
@@ -4576,6 +4577,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.5.tgz",
       "integrity": "sha512-rt40Nk13II9JwQBdeYqmbn2Q6IVTA5uPhvSO+JVqdXw/6/4glI6oR9ezty/A9Hg5u7JH4OmYmuQ+XvjKm0Datg=="
     },
+    "node_modules/@types/pluralize": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/pluralize/-/pluralize-0.0.29.tgz",
+      "integrity": "sha512-BYOID+l2Aco2nBik+iYS4SZX0Lf20KPILP5RGmM1IgzdwNdTs0eebiFriOPcej1sX9mLnSoiNte5zcFxssgpGA=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -11935,6 +11941,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-strings": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-strings/-/normalize-strings-1.1.1.tgz",
+      "integrity": "sha512-fARPRdTwmrQDLYhmeh7j/eZwrCP6WzxD6uKOdK/hT/uKACAE9AG2Bc2dgqOZLkfmmctHpfcJ9w3AQnfLgg3GYg=="
+    },
     "node_modules/npm": {
       "version": "9.8.1",
       "resolved": "https://registry.npmjs.org/npm/-/npm-9.8.1.tgz",
@@ -15249,6 +15260,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.27",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
@@ -17427,6 +17446,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/syllable": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/syllable/-/syllable-5.0.1.tgz",
+      "integrity": "sha512-HWtNCp6v7J8H0lrT8j1HHjfOLltRoDcC7QRFVu25p4BE52JqetXG65nqC7CsatT8WQRfY4Qvh93BWJIUxbmXFg==",
+      "dependencies": {
+        "@types/pluralize": "^0.0.29",
+        "normalize-strings": "^1.1.0",
+        "pluralize": "^8.0.0"
+      },
+      "bin": {
+        "syllable": "cli.js"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/syllable-count-english": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/syllable-count-english/-/syllable-count-english-1.0.6.tgz",
+      "integrity": "sha512-Z0Sj+Djb9jMOQqJACqx93zGXbKOxKvWUwxQJ878leGHM4RWhxBDcvem/311xUY4cTPY+8sgkiYpr+nEStSg0DA==",
+      "dependencies": {
+        "syllable": "^5.0.1"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
@@ -21607,6 +21651,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.5.tgz",
       "integrity": "sha512-rt40Nk13II9JwQBdeYqmbn2Q6IVTA5uPhvSO+JVqdXw/6/4glI6oR9ezty/A9Hg5u7JH4OmYmuQ+XvjKm0Datg=="
     },
+    "@types/pluralize": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/pluralize/-/pluralize-0.0.29.tgz",
+      "integrity": "sha512-BYOID+l2Aco2nBik+iYS4SZX0Lf20KPILP5RGmM1IgzdwNdTs0eebiFriOPcej1sX9mLnSoiNte5zcFxssgpGA=="
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -27187,6 +27236,11 @@
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="
     },
+    "normalize-strings": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-strings/-/normalize-strings-1.1.1.tgz",
+      "integrity": "sha512-fARPRdTwmrQDLYhmeh7j/eZwrCP6WzxD6uKOdK/hT/uKACAE9AG2Bc2dgqOZLkfmmctHpfcJ9w3AQnfLgg3GYg=="
+    },
     "npm": {
       "version": "9.8.1",
       "resolved": "https://registry.npmjs.org/npm/-/npm-9.8.1.tgz",
@@ -29334,6 +29388,11 @@
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg=="
     },
+    "pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA=="
+    },
     "postcss": {
       "version": "8.4.27",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
@@ -30776,6 +30835,24 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
+    "syllable": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/syllable/-/syllable-5.0.1.tgz",
+      "integrity": "sha512-HWtNCp6v7J8H0lrT8j1HHjfOLltRoDcC7QRFVu25p4BE52JqetXG65nqC7CsatT8WQRfY4Qvh93BWJIUxbmXFg==",
+      "requires": {
+        "@types/pluralize": "^0.0.29",
+        "normalize-strings": "^1.1.0",
+        "pluralize": "^8.0.0"
+      }
+    },
+    "syllable-count-english": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/syllable-count-english/-/syllable-count-english-1.0.6.tgz",
+      "integrity": "sha512-Z0Sj+Djb9jMOQqJACqx93zGXbKOxKvWUwxQJ878leGHM4RWhxBDcvem/311xUY4cTPY+8sgkiYpr+nEStSg0DA==",
+      "requires": {
+        "syllable": "^5.0.1"
+      }
+    },
     "tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",

package.json

@@ -7,6 +7,8 @@
   ],
   "scripts": {
     "start": "node server.js",
+    "extract32": "set MODIFY_FILES=1 && node app.js",
+    "extract": "MODIFY_FILES=1 && node app.js",
     "preview": "remotion studio",
     "render-build": "remotion render --image-format=jpeg --quality=70 --gl=angle SemibitComposition",
     "render-still": "remotion still --image-format=jpeg SemibitCompositionPoster  ",
@@ -61,6 +63,7 @@
     "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",

src/textWithBgImage/SectionTextWithBG.tsx

@@ -28,7 +28,7 @@ function adjustFontSize(text: string, fullFont: number, minFontSizeDef): number
 
 export const SectionTextWithBG: React.FC<SequentialSceneData> = (props) => {
 
-    var { text, durationInSecs, textColor = '#fff', duration, direction = 'left', bgImagePath, audioPath, commulativeDurationStartSec,
+    var { text, subtitles, durationInSecs, textColor = '#fff', duration, direction = 'left', bgImagePath, audioPath, commulativeDurationStartSec,
         title, pointers, emphasisOnImage, durationInSecs, rootProps } = props
 
     const videoConfig = useVideoConfig();
@@ -39,20 +39,26 @@ export const SectionTextWithBG: React.FC<SequentialSceneData> = (props) => {
     let textBgColor = textColor;
     let textFontColor = "#fff";
 
-    const totalWords = text.length
+    const totalChars = text.length
     var aggFrames = 0
     text = text.trim()
     if (text.startsWith(".")) {
         text = text.replace(".", "")
     }
-    const sentenceMap = text.split('.').map((t) => {
-        let wordCount = t.length
-        let expectedDurationSec = durationInSecs * (wordCount / totalWords)
-        let expectedDurationFrames = (duration * (wordCount / totalWords))
+    const sentenceMap = (subtitles || text.split('.').map((t) => {
+        let charCount = text.length
+        let expectedDurationSec = durationInSecs * (charCount / totalChars)
+        return {
+            text: t,
+            expectedDurationSec: expectedDurationSec
+        }
+    })
+    ).map(({ text, expectedDurationSec }) => {
+        let expectedDurationFrames = expectedDurationSec * fps
         aggFrames = aggFrames + expectedDurationFrames
         expectedDurationFrames = Math.floor(expectedDurationFrames)
         return {
-            text: t.trim(),
+            text: text.trim(),
             expectedDurationSec,
             expectedDurationFrames,
             startFrame: Math.max(0, aggFrames - expectedDurationFrames),

src/textWithBgImage/SemibitComposition.tsx

@@ -7,6 +7,7 @@ import { PosterSingleTextWithBG } from './PosterSingleTextWithBG';
 import { YoutubeCategoriesConfig } from './Categories';
 import '../style.css';
 import { preloadImage, preloadVideo } from "@remotion/preload";
+import Transitions from '../../public/assets/transitions.json'
 
 
 function getFileName(filePath: string, subdirpath?: string): string {
@@ -67,8 +68,15 @@ export const SemibitComposition: React.FC = () => {
                 if (curDurSecs < 3) {
                     curDurSecs = 3
                 }
-                let commDuration = durationInSec
-                durationInSec = durationInSec + curDurSecs
+                //@ts-ignore
+                const transitionFile = section?.transition_file || Transitions[0].file
+                //@ts-ignore
+                const transitionDurationSec = (section?.transition_duration_sec || Transitions[0].durationSec)
+                const transitionDurationFrames = transitionDurationSec * fps
+
+
+                let commDuration = durationInSec + transitionDurationSec
+                durationInSec = durationInSec + curDurSecs + transitionDurationSec
                 lastDirection = !lastDirection
                 imageAbsPaths.forEach(im => {
                     if (im.startsWith("http")) {
@@ -105,9 +113,10 @@ export const SemibitComposition: React.FC = () => {
         durationInSec: 5.433,
         file: Script.meta.tenantVideoConfig ? getFileName(Script.meta.tenantVideoConfig.introFile, "assets") : 'assets/music_intro.mp4'
     }
+    let ADJUST_END_DUR_SEC = 3
     const outro = {
         durationInFrames: 0,
-        durationInSec: 8.034,
+        durationInSec: 8.034 - ADJUST_END_DUR_SEC,
         file: Script.meta.tenantVideoConfig ? getFileName(Script.meta.tenantVideoConfig.outroFile, "assets") : 'assets/music_outro.mp4'
     }
 
@@ -118,6 +127,8 @@ export const SemibitComposition: React.FC = () => {
 
     if (outro) {
         durationInSec += outro.durationInSec
+        //hack for blank end
+        outro.durationInSec += ADJUST_END_DUR_SEC
         outro.durationInFrames = Math.ceil(fps * outro.durationInSec)
     }