Added subs

src/{Utils.ts → RenderUtils.ts}

@@ -16,7 +16,45 @@ function levenshteinDistance(str1: string, str2: string) {
 
   return dp[str1.length][str2.length];
 }
-export class Utils {
+export class RenderUtils {
+
+  public static splitArrayIntoChunks(arr, chunkSize) {
+    const chunkedArr = [];
+    for (let i = 0; i < arr.length; i += chunkSize) {
+      chunkedArr.push(arr.slice(i, i + chunkSize));
+    }
+    return chunkedArr;
+  }
+
+  public static splitArray(arr, pieces) {
+    let result = [];
+    let chunkSize = Math.ceil(arr.length / pieces);
+    for (let i = 0, j = arr.length; i < j; i += chunkSize) {
+      result.push(arr.slice(i, i + chunkSize));
+    }
+    return result;
+  }
+
+  public static getFileName(filePath: string, subdirpath?: string): string | undefined {
+    if (!filePath)
+      return undefined
+    if (filePath.startsWith("http"))
+      return filePath
+    const slashCount = (filePath.replace("./", "").split("/").length - 1);
+    if (slashCount > 0) {
+      let pub = filePath.replace("./", "")
+      return pub
+    }
+
+    const match = filePath.match(/([^\/\\]+)$/);
+    let folmat = match ? match[1] : '';
+    if (subdirpath) {
+      return subdirpath + "/" + folmat
+    }
+    else {
+      return folmat
+    }
+  }
 
   public static findMostSimilarString(inputString: string, stringArray: string[]) {
     let minDistance = Number.MAX_SAFE_INTEGER;

src/ig-reel/IGReelComposition.tsx

@@ -0,0 +1,41 @@
+import { AbsoluteFill, Img, staticFile } from 'remotion';
+import React from 'react'
+import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
+import { Series } from "remotion";
+import { IGScene } from './IGScene';
+
+
+export const IGReelComposition: React.FC = (props) => {
+  const { fontFamily } = loadFont();
+  let { contents, meta } = props
+
+
+  return (
+    <AbsoluteFill>
+
+      <Series>
+        {
+          contents.map((scriptItem, i) => {
+            let { durationInSeconds } = scriptItem
+            let durationInFrames = meta.fps * durationInSeconds
+            return (
+              <Series.Sequence durationInFrames={durationInFrames}>
+                <IGScene script={props} item={scriptItem} />
+              </Series.Sequence>
+            )
+          })
+        }
+      </Series>
+
+
+    </AbsoluteFill >
+  );
+};
+
+
+const Title: React.FC<{ title?: string, color: string }> = ({ title = "test", color }) => {
+
+  return (
+    <div style={{ backgroundColor: color, textAlign: "center", fontSize: "7em" }}>{title}</div>
+  );
+};

src/ig-reel/IGScene.tsx

@@ -0,0 +1,174 @@
+//@ts-nocheck
+import { AbsoluteFill, Img, staticFile, Audio, useCurrentFrame } from 'remotion';
+import React, { useEffect, useState } from 'react'
+import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
+import { Series } from "remotion";
+import { RenderUtils } from '../RenderUtils';
+
+export const IGScene: React.FC<any> = (props: { script: any, item: any }) => {
+  const { fontFamily } = loadFont();
+  const [subtitles, setSubtitles] = useState(undefined)
+  const [subtitleGroups, setSubtitleGroups] = useState(undefined)
+  const [averageCharsPs, setAverageCps] = useState(undefined)
+  const item = props.item
+  let { title, subtitle_file } = item
+  const { script } = props
+  const { meta } = script
+  const { fps } = meta
+  const audioPath = RenderUtils.getFileName(item.audioFullPath)
+  const frame = useCurrentFrame();
+
+  useEffect(() => {
+    let file = RenderUtils.getFileName(subtitle_file)
+    let subtitles = require('../../public/' + file)
+    let subtitlesClone = subtitles
+    let subs = subtitles.words
+
+
+    let noOfCharacters = 0
+    let groupDuration = 0
+    for (let i = 0; i < subs.length; i++) {
+      let frame = subs[i]
+      frame.idx = i
+      if (frame.end && frame.start) {
+        noOfCharacters += frame.endOffset - frame.startOffset
+        groupDuration += frame.end - frame.start
+      }
+    }
+    let avgCps = groupDuration / noOfCharacters
+
+    // Fill start and end for missing frames
+    for (let i = 0; i < subs.length; i++) {
+      let frame = subs[i]
+      let prevFrame = subs[i - 1]
+      let nextFrame = subs[i + 1]
+      if (!frame.end || !frame.start) {
+        let noOfCharacters = frame.endOffset - frame.startOffset
+        let frameDuration = noOfCharacters * avgCps
+        frame.start = prevFrame?.end || 0
+        frame.end = (frame.start + frameDuration)
+        // frame.end = nextFrame?.start || (frame.start + frameDuration)
+        if (nextFrame?.start < frame.end) {
+          let next2next = subs[i + 2]
+          if (next2next && next2next.start) {
+            nextFrame.end = next2next.start
+          }
+        }
+      }
+    }
+    setAverageCps(avgCps)
+    setSubtitles(subs)
+
+
+    let arr = subs
+    let chunkSize = 4;
+    const groups = [];
+    for (let i = 0; i < arr.length; i += chunkSize) {
+      let curGroup = arr.slice(i, i + chunkSize)
+      let grpDur = getGroupDuration(curGroup, avgCps)
+      let grpDurFrames = grpDur * meta.fps
+      groups.push({
+        duration: grpDur,
+        durationFrames: grpDurFrames,
+        frames: arr.slice(i, i + chunkSize)
+      });
+    }
+    setSubtitleGroups(groups)
+
+
+  }, [])
+
+  if (!subtitleGroups) {
+    return (<></>)
+  }
+
+  let curSecond = frame / fps
+  let word = findCurrentWord(curSecond, subtitles)
+  return (
+    <AbsoluteFill>
+      <Audio volume={1.0} src={staticFile(audioPath)} />
+      {/* <Title title={curSecond}></Title>
+      <Title title={word?.start + ' --- ' + word?.end}></Title> */}
+
+      <Title title={(word?.word || '_____')}></Title>
+      {
+
+      }
+      {/* <Series>
+        {
+          subtitleGroups.map(curGroup => {
+            let groupDuration = 0
+            let group = curGroup.frames
+            for (let i = 0; i < group.length; i++) {
+              let frame = group[i]
+              if (frame.end && frame.start) {
+                groupDuration += frame.end - frame.start
+              } else {
+                let noOfCharacters = frame.endOffset - frame.startOffset
+                groupDuration += noOfCharacters * averageCharsPs
+              }
+            }
+            let groupDurationFps = meta.fps * groupDuration
+
+            return (
+              <Series.Sequence durationInFrames={groupDurationFps}>
+                <SubTitleFrameGroup frames={group} />
+              </Series.Sequence>
+            )
+          })
+        }
+      </Series> */}
+    </AbsoluteFill >
+  );
+};
+
+function findCurrentWord(timeSec, frames) {
+  var t = timeSec;
+  let wds = frames
+  // var hits = wds.filter(function (x) {
+  //   return (t - x.start) > 0.0001 && (x.end - t) > 0.0001;
+  // }, wds);
+  // var currentWord = hits[0];
+  // return currentWord
+  for (let i = 0; i < wds.length; i++) {
+    const x = wds[i];
+    if (x.start && x.end && (t >= x.start && t < x.end)) {
+      return x
+    }
+  }
+}
+
+function getGroupDuration(group, avgCps) {
+  let groupDuration = 0
+  for (let i = 0; i < group.length; i++) {
+    let frame = group[i]
+    if (frame.end && frame.start) {
+      groupDuration += frame.end - frame.start
+    } else {
+      let noOfCharacters = frame.endOffset - frame.startOffset
+      groupDuration += noOfCharacters * avgCps
+    }
+  }
+  return groupDuration
+}
+
+const SubTitleFrameGroup: React.FC<{ title?: string, color: string }> = ({ frames }) => {
+
+
+  return (
+    <div style={{ display: 'block' }}>
+      {
+        frames.map((frame) => {
+          return <Title title={frame.word} color="#425211"></Title>
+        })
+      }
+    </div>
+  );
+};
+
+const Title: React.FC<{ title?: string, color?: string }> = ({ title = "test", color = "#fff" }) => {
+
+  return (
+    <div style={{ backgroundColor: color, textAlign: "center", fontSize: "7em" }}>{title}</div>
+  );
+};

src/textWithBgImage/PosterSingleTextWithBG.tsx

@@ -1,11 +1,7 @@
-import { AbsoluteFill, Audio, Img, spring, staticFile, useCurrentFrame, useVideoConfig } from 'remotion';
-import { MediaBackground } from './MediaBackground';
+import { AbsoluteFill, Img, staticFile } from 'remotion';
 import React from 'react'
-import TransitionSeries from 'remotion-transition-series/lib/TransitionSeries';
-import { GlowingStroke } from '../../anims/GlowingStrike';
 import { SequentialSceneData } from './SequentialScene';
 import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
-import { ReactComponent as Logo } from '../../../public/assets/bg_transparent.svg';
 
 function adjustFontSize(text: string, fullFont?: number): number {
     if (!fullFont) {

src/textWithBgImage/SemibitComposition.tsx

@@ -8,28 +8,10 @@ import { YoutubeCategoriesConfig } from './Categories';
 import '../style.css';
 import { preloadImage, preloadVideo } from "@remotion/preload";
 import Transitions from '../../public/assets/transitions.json'
+import { IGReelComposition } from '../ig-reel/IGReelComposition';
+import { RenderUtils } from '../RenderUtils';
 
 
-function getFileName(filePath: string, subdirpath?: string): string {
-    if (!filePath)
-        return undefined
-    if (filePath.startsWith("http"))
-        return filePath
-    const slashCount = (filePath.replace("./", "").split("/").length - 1);
-    if (slashCount > 0) {
-        let pub = filePath.replace("./", "")
-        return pub
-    }
-
-    const match = filePath.match(/([^\/\\]+)$/);
-    let folmat = match ? match[1] : '';
-    if (subdirpath) {
-        return subdirpath + "/" + folmat
-    }
-    else {
-        return folmat
-    }
-}
 
 
 
@@ -65,6 +47,7 @@ export const SemibitComposition: React.FC = () => {
 
     let contents: SequentialSceneData[] =
         Script.transcript
+            .filter(item => item.subtitle_file != undefined)
             // .slice(0, 2)
             .map((section) => {
                 var { text, duration, offset, imageAbsPaths, audioFullPath, title, pointers } = section
@@ -98,19 +81,19 @@ export const SemibitComposition: React.FC = () => {
                     }
                 })
                 let bgImagePaths = imageAbsPaths.map(p => {
-                    p.path = getFileName(p?.path)
+                    p.path = RenderUtils.getFileName(p?.path)
                     return p
                 })
                 let frame = Object.assign(section, {
                     "commulativeDurationStartSec": commDuration,
                     "text": text,
-                    "transition_file": getFileName(transitionFile),
+                    "transition_file": RenderUtils.getFileName(transitionFile),
                     "durationInSecs": curDurSecs,
                     "duration": Math.ceil(curDurSecs * fps),
                     "offset": offset * fps,
                     "direction": lastDirection ? 'left' : 'right',
                     "bgImagePaths": bgImagePaths,
-                    "audioPath": getFileName(audioFullPath),
+                    "audioPath": RenderUtils.getFileName(audioFullPath),
                     "textColor": '#F44336',
                     "emphasisOnImage": title?.length > 0 && pointers?.length > 0 || Script.meta.emphasisOnImage
                 })
@@ -122,13 +105,13 @@ export const SemibitComposition: React.FC = () => {
     const intro = {
         durationInFrames: 0,
         durationInSec: 5.433,
-        file: Script.meta.tenantVideoConfig ? getFileName(Script.meta.tenantVideoConfig.introFile, "assets") : 'assets/music_intro.mp4'
+        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 ? getFileName(Script.meta.tenantVideoConfig.outroFile, "assets") : 'assets/music_outro.mp4'
+        file: Script.meta.tenantVideoConfig ? RenderUtils.getFileName(Script.meta.tenantVideoConfig.outroFile, "assets") : 'assets/music_outro.mp4'
     }
 
     if (intro) {
@@ -144,7 +127,7 @@ export const SemibitComposition: React.FC = () => {
     }
 
     // durationInSec = 3
-    const duration = Math.ceil(durationInSec * fps)
+    const duration = Math.ceil(34.753016 * fps)
     console.log("Total Video Duration", durationInSec)
 
     //@ts-ignore
@@ -160,7 +143,22 @@ export const SemibitComposition: React.FC = () => {
                 width={Script.meta?.resolution?.width || 1920}
                 height={Script.meta?.resolution?.height || 1080}
                 defaultProps={{
-                    bgMusic: getFileName(Script.bgMusic, "mp3"),
+                    bgMusic: RenderUtils.getFileName(Script.bgMusic, "mp3"),
+                    contents: contents,
+                    intro: intro,
+                    outro: outro,
+                    meta: Script.meta
+                }}
+            />
+            <Composition
+                id='IGReelComposition'
+                component={IGReelComposition}
+                durationInFrames={duration}
+                fps={fps}
+                width={Script.meta?.resolution?.width || 1920}
+                height={Script.meta?.resolution?.height || 1080}
+                defaultProps={{
+                    bgMusic: RenderUtils.getFileName(Script.bgMusic, "mp3"),
                     contents: contents,
                     intro: intro,
                     outro: outro,
@@ -176,7 +174,7 @@ export const SemibitComposition: React.FC = () => {
                 defaultProps={{
                     emphasisOnImage: Script.meta.emphasisOnImage,
                     bgImagePath: (
-                        getFileName(Script.meta?.posterImage) ||
+                        RenderUtils.getFileName(Script.meta?.posterImage) ||
                         ("assets/" + (playListsIDs[Script.meta?.platlistName] || "PLeT-Kik6WdhTHl_RxwavJ3FXBGiXlYIxq") + ".jpg")
                     ),
                     text: (Script.meta?.posterTitle || Script.meta?.title)?.trim(),