Cleanup reels code

src/RenderUtils.ts

@@ -19,7 +19,72 @@ function levenshteinDistance(str1: string, str2: string) {
 }
 export class RenderUtils {
 
-  public static randomElement<T>(arr: T[], seed: number): T {
+  public static splitWordsIntoGroups(words) {
+    const groups = [];
+    let currentGroup = [];
+
+    for (const word of words) {
+      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
+    const finalGroups = [];
+    for (const group of groups) {
+      while (group.length > 5) {
+        finalGroups.push(group.slice(0, 5));
+        group.splice(0, 5);
+      }
+      finalGroups.push(group);
+    }
+
+    return finalGroups?.map(group => {
+      return {
+        words: group
+      }
+    });
+  }
+
+
+  public static findCurrentGroupByTime(timeSec: Number, groups) {
+    var t = timeSec;
+    let wds = groups
+    for (let i = 0; i < wds.length; i++) {
+      const x = wds[i];
+      if (x.start != undefined && x.end != undefined && (t >= x.start && t < x.end)) {
+        return x
+      }
+    }
+  }
+
+
+  public static findCurrentWord(timeSec, frames) {
+    var t = timeSec;
+    let wds = frames
+    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
+      }
+    }
+  }
+
+
+  public static randomElement<T>(arr: T[], seed: string): T {
     return arr[Math.floor(random(seed || 1) * arr.length)];
   }
 

src/examples/SampleComposition.tsx

@@ -1,7 +1,7 @@
 import { AbsoluteFill } from 'remotion';
 import { Logo } from './Logo';
-import { Subtitle } from '../Subtitle';
-import { Title } from '../Title';
+import { Subtitle } from './Subtitle';
+import { Title } from './Title';
 import { z } from 'zod';
 import { zColor } from '@remotion/zod-types';
 

src/ig-reel/IGMediaRender.tsx

@@ -1,10 +1,10 @@
-import { AbsoluteFill, Easing, Img, Video, interpolate, staticFile, useCurrentFrame } from "remotion";
+//@ts-nocheck
+import { Img, Video, staticFile } from "remotion";
 import { DisplayMedia } from "./IGSimpleScene";
 
 
 export function IGMediaRender(props) {
   let displayMedia: DisplayMedia = props.displayMedia
-  let frame = useCurrentFrame()
   let bgMediaPath = staticFile(displayMedia?.path || '')
   let curZoom = props.curZoom
 

src/ig-reel/IGReelComposition.tsx

@@ -7,8 +7,6 @@ import { IGScene } from './IGSimpleScene';
 import { OriginalManuscript, Transcript } from '../models/OriginalManuscriptModel';
 import TransitionSeries from 'remotion-transition-series';
 
-
-
 export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
   const { fontFamily } = loadFont();
   let { meta, bgMusic, bgMusicDuration } = props
@@ -51,12 +49,4 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
 
     </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/IGSimpleScene.tsx

@@ -1,12 +1,9 @@
 //@ts-nocheck
-import { AbsoluteFill, interpolate, Img, staticFile, Audio, useCurrentFrame, Video, Easing, random } from 'remotion';
+import { AbsoluteFill, interpolate, staticFile, Audio, useCurrentFrame, Easing } from 'remotion';
 import React, { useEffect, useState } from 'react'
-import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
-import { Series, Sequence } from "remotion";
 import { RenderUtils } from '../RenderUtils';
 import { Transcript, SectionMedia } from '../models/OriginalManuscriptModel'
 import axios from 'axios';
-import GeneralSubtitles from '../subtitles/general_Subtitles';
 import ExcitedSubtitles from '../subtitles/excited_Subtitles';
 import _ from 'lodash';
 import './styles.module.css'
@@ -17,8 +14,6 @@ import { Slide } from '../anims/Slide';
 import { Pan } from '../anims/Pan';
 import { Dissolve } from '../anims/Dissolve';
 import { SlidingDoors } from '../anims/SlidingDoors';
-import { Plate } from '../anims/Plate';
-import { GlowingStroke } from '../anims/GlowingStrike';
 import { IGMediaRender } from './IGMediaRender';
 import { Group } from '../models/Types';
 
@@ -29,16 +24,15 @@ export const IGScene: React.FC<any> = (props: {
   script: any,
   item: Transcript
 }) => {
-  const { fontFamily } = loadFont();
   const [subtitles, setSubtitles] = useState(undefined)
   const [groups, setGroups] = useState(undefined)
-  const [averageCharsPs, setAverageCps] = useState(undefined)
   const item = props.item
-  let { title, subtitle_file, durationInSeconds } = item
+  let { subtitle_file, durationInSeconds } = item
   const { script } = props
   const { meta } = script
   const { fps } = meta
   const frame = useCurrentFrame();
+  let speechPath = RenderUtils.getFileName(item?.audioFullPath)
 
   useEffect(() => {
     const subFile = staticFile(RenderUtils.getFileName(subtitle_file))
@@ -47,10 +41,7 @@ export const IGScene: React.FC<any> = (props: {
       if (subtitles?.default) {
         subtitles = subtitles.default
       }
-      // let subtitles = SUBTITLES
-      let subtitlesClone = subtitles
       let subs = subtitles.words
-
       let noOfCharacters = 0
       let groupDuration = 0
       for (let i = 0; i < subs.length; i++) {
@@ -87,15 +78,13 @@ export const IGScene: React.FC<any> = (props: {
           }
         }
       }
-      setAverageCps(avgCps)
       setSubtitles(subs)
 
 
       let arr = subs
-      let chunkSize = 4;
       let groups = [];
 
-      groups = splitWordsIntoGroups(arr)
+      groups = RenderUtils.splitWordsIntoGroups(arr)
       groups.forEach((group) => {
         let words = group.words;
         group.start = words[0]?.start
@@ -111,7 +100,6 @@ export const IGScene: React.FC<any> = (props: {
     return (<></>)
   }
 
-
   let itemDurationInFrames = item.durationInSeconds * fps
   console.log('scriptItem.offset', frame, itemDurationInFrames)
 
@@ -123,11 +111,10 @@ export const IGScene: React.FC<any> = (props: {
 
 
   let curSecond: Number = frame / fps
-  let word = findCurrentWord(curSecond, subtitles)
-  let group: Group = findCurrentGroupByTime(curSecond, groups)
+  let word = RenderUtils.findCurrentWord(curSecond, subtitles)
+  let group: Group = RenderUtils.findCurrentGroupByTime(curSecond, groups)
 
   let currentDisplayMedia: DisplayMedia = (item?.imageAbsPaths || [])[0]
-  let transitioning = false
 
   if (!_.isEmpty(item?.imageAbsPaths)) {
     let frameOffest = 0
@@ -151,24 +138,8 @@ export const IGScene: React.FC<any> = (props: {
 
   }
 
-  let audioPath = RenderUtils.getFileName(item?.audioFullPath)
-
-  let transition = {
-    file: 'assets/overlay.webm',
-    durationSec: 2,
-    durationFrames: 2 * fps,
-  }
-
 
-  function randomElement<T>(arr: T[], seed: number): T {
-    let i = Math.floor(random(seed) * arr.length)
-    let rand = arr[i];
-    return rand
-  }
-
-
-
-  let chunks = (item?.imageAbsPaths?.map((displayMedia: DisplayMedia, i) => {
+  let chunks: React.ReactNode[] = (item?.imageAbsPaths?.map((displayMedia: DisplayMedia, i) => {
     let chunk = []
     let easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
     easeInOutExp = Easing.ease
@@ -183,7 +154,7 @@ export const IGScene: React.FC<any> = (props: {
       // .fill(CircularWipe)
       let Anim = anims[frame % 9]
       let seed = i * displayMedia.idx
-      Anim = randomElement(anims, `x-${seed}`)
+      Anim = RenderUtils.randomElement(anims, `x-${seed}`)
       const easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
       chunk.push((
         <TransitionSeries.Transition
@@ -198,12 +169,14 @@ export const IGScene: React.FC<any> = (props: {
     }
     return chunk
   }))
+
+
   return (
     <AbsoluteFill style={{
       width: '100%',
       height: '100%',
     }} className='relative'>
-      <Audio volume={1} src={staticFile(audioPath)} />
+      <Audio volume={1} src={staticFile(speechPath)} />
       <TransitionSeries>
         {
           ...chunks
@@ -231,104 +204,5 @@ export const IGScene: React.FC<any> = (props: {
 };
 
 
-function splitWordsIntoGroups(words) {
-  const groups = [];
-  let currentGroup = [];
-
-  for (const word of words) {
-    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
-  const finalGroups = [];
-  for (const group of groups) {
-    while (group.length > 5) {
-      finalGroups.push(group.slice(0, 5));
-      group.splice(0, 5);
-    }
-    finalGroups.push(group);
-  }
-
-  return finalGroups?.map(group => {
-    return {
-      words: group
-    }
-  });
-}
-
-function findCurrentGroupByWord(wod: String, group) {
-  if (!wod) {
-    return
-  }
-  for (let i = 0; i < group.length; i++) {
-
-    let cgroup = group[i]?.words
-
-    for (let j = 0; j < cgroup.length; j++) {
-      let cwod = cgroup[j]
-      if (cwod.idx == wod.idx) {
-        return cgroup
-      }
-    }
-  }
-}
-
-function findCurrentGroupByTime(timeSec: Number, groups) {
-  var t = timeSec;
-  let wds = groups
-  for (let i = 0; i < wds.length; i++) {
-    const x = wds[i];
-    if (x.start != undefined && x.end != undefined && (t >= x.start && t < x.end)) {
-      return x
-    }
-  }
-}
-
 
-function findCurrentWord(timeSec, frames) {
-  var t = timeSec;
-  let wds = frames
-  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 Title: React.FC<{ title?: string, color?: string }> = ({ title = "test", color = "#fff" }) => {
-
-  return (
-    <div style={{ backgroundColor: color, textAlign: "center", fontSize: "7em" }}>{title}</div>
-  );
-};
 

src/models/OriginalManuscriptModel.ts

@@ -20,6 +20,7 @@ export interface Transcript {
     title: string
     text: string
     pointers: string[]
+    subtitle_file: string
     imageText: string[]
     videoText: string[]
     dialog: string[]