Committed with Git-Upload

src/Compositions.tsx

@@ -59,7 +59,7 @@ export const Compositions: React.FC = () => {
         Script.transcript
             .sort((t, u) => t.index - u.index)
             // .filter(item => (item.audioCaptionFile != undefined))
-            // .slice(0, 2)
+            // .slice(0, 5)
             .map((section, idx, array) => {
                 section.index = section.index || idx;
                 var { text, duration: durationMilis, offset, mediaAbsPaths, mediaAbsPaths, audioFullPath, title, pointers } = section

src/RenderUtils.ts

@@ -71,7 +71,9 @@ export class RenderUtils {
 
     return finalGroups?.map(group => {
       return {
-        words: group
+        words: group,
+        start: undefined,
+        end: undefined
       }
     });
   }

src/anims/VideoSplash.tsx

@@ -38,5 +38,6 @@ export const VideoSplash:
 
 export const VideoSplashSchema = z.object({
   file: z.string(),
-  durationInFrames: z.number()
+  durationInFrames: z.number().optional(),
+  style: z.any()
 });

src/ig-reel/IGSimpleScene.tsx

@@ -28,7 +28,7 @@ export type DisplayMedia = SectionMedia &
 
 
 export const GenerateWordGroupRanges = function (audioCaptionFile: string, setSubtitles: Function, setGroups: Function) {
-  const subFile = staticFile(RenderUtils.getFileName(audioCaptionFile))
+  const subFile = staticFile(RenderUtils.getFileName(audioCaptionFile)!!)
   axios.get(subFile).then((response) => {
     let subtitles = response?.data
     if (subtitles?.default) {
@@ -139,10 +139,8 @@ export const IGSimpleScene: React.FC<any> = (props: {
   const isLastScene = script.transcript[script.transcript?.length - 1]?.index == itemIdx
   const nextScene = script.transcript.find(i => i.index == itemIdx + 1);
   let nextSceneMedia0 = nextScene?.mediaAbsPaths as any as DisplayMedia;
-  console.log('item.index', item.index,
-    'nextSceneMedia0', nextSceneMedia0,
-    "isLastScene", isLastScene,
-    'item?.mediaAbsPaths?.[0]', item?.mediaAbsPaths?.[0])
+
+
   if (nextSceneMedia0) {
     nextSceneMedia0 = calculateDisplayMedia(nextScene as Transcript, durationInSeconds, frame, fps)
   }
@@ -166,14 +164,14 @@ export const IGSimpleScene: React.FC<any> = (props: {
 
 
   let curSecond: Number = frame / fps
-  let word = RenderUtils.findCurrentWord(curSecond, subtitles)
+  let word = RenderUtils.findCurrentWord(curSecond, subtitles!!)
   let group: Group = RenderUtils.findCurrentGroupByTime(curSecond, groups)
 
   let currentDisplayMedia: DisplayMedia = calculateDisplayMedia(item, durationInSeconds, frame, fps)
 
 
 
-  let chunks: React.ReactNode[] = (item?.mediaAbsPaths?.map((displayMedia: DisplayMedia, i) => {
+  let chunks: React.ReactNode[] = ((item?.mediaAbsPaths as any[])?.map((displayMedia: DisplayMedia, i) => {
     let chunk = []
     let easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
     easeInOutExp = Easing.ease
@@ -187,13 +185,28 @@ export const IGSimpleScene: React.FC<any> = (props: {
       </TransitionSeries.Sequence>
     ))
     if (i < item?.mediaAbsPaths.length - 1 || true) {
-      let anims = [CircularWipe, Slide, SlidingDoors, Pan, LinearWipe, Dissolve, CircularWipe, Slide, SlidingDoors, Pan, LinearWipe, Dissolve]
-        .fill(SlidingDoors)
-      let Anim = anims[frame % 9]
-      let seed = i * displayMedia.idx
-      Anim = RenderUtils.randomElement(anims, `x-${seed}`)
+
+      let animsObj = {
+        // CircularWipe, Slide,LinearWipe, // Not work
+        SlidingDoors: SlidingDoors,
+        Pan: Pan,
+        Dissolve: Dissolve
+      }
+      let anims = Object.values(animsObj);//.fill(SlidingDoors);
+      let seed = itemIdx + i * displayMedia.idx
+      let Anim = RenderUtils.randomElement(anims, `x-${seed}`)
       const easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
-      if (!isLastScene && (item.transition_type?.includes('geometrial') || item.transition_type == undefined)) {
+
+      let transitionList = item.transition_type?.split(",");
+      let animFromTranscript = Object.keys(animsObj).find(n => {
+        return transitionList.includes(n)
+      })
+      if (animFromTranscript) {
+        //@ts-ignore
+        Anim = animsObj[animFromTranscript]
+      }
+
+      if (!isLastScene && (item.transition_type?.includes('geometrial') || animFromTranscript || item.transition_type == undefined)) {
         chunk.push((
           <TransitionSeries.Transition
             durationInFrames={60}
@@ -216,7 +229,7 @@ export const IGSimpleScene: React.FC<any> = (props: {
       width: '100%',
       height: '100%',
     }} className='relative'>
-      <Audio volume={1} loop src={staticFile(speechPath)} />
+      <Audio volume={1} loop src={staticFile(speechPath as string)} />
       {
         nextSceneMedia0 && (
           <TransitionSeries.Sequence durationInFrames={nextSceneMedia0.durationFrames || itemDurationInFrames}>
@@ -234,8 +247,8 @@ export const IGSimpleScene: React.FC<any> = (props: {
       {
         (item.transition_type?.includes("graphical")) && !isLastScene &&
         currentDisplayMedia?.idx > -1 && (
-          item?.mediaAbsPaths?.map((displayMedia: DisplayMedia, i) => {
-            let transitionsByMood = Transitions.filter(t => t.mood?.indexOf("happy") > -1)
+          (item?.mediaAbsPaths as any)?.map((displayMedia: DisplayMedia) => {
+            let transitionsByMood = Transitions.filter(t => (t?.mood?.indexOf("happy") || -1) > -1)
             let transition = RenderUtils.randomElement(transitionsByMood, `x-${displayMedia.idx * displayMedia.durationFrames}`)
             // transition = transitionsByMood[5]
 
@@ -243,8 +256,9 @@ export const IGSimpleScene: React.FC<any> = (props: {
               <Sequence from={displayMedia?.endFrame - transition.durationSec * fps / 2} durationInFrames={transition.durationSec * fps}>
                 <VideoSplash file={transition.file} style={{
                   position: 'relative',
-                  height: '100%', width: '100%'
-                }} />
+                  height: '100%',
+                  width: '100%'
+                } as any} />
               </Sequence>
             )
           })
@@ -275,7 +289,6 @@ export const IGSimpleScene: React.FC<any> = (props: {
           <div style={{
             display: 'flex',
             flexDirection: 'row',
-            height: '100%',
             justifyContent: 'center',
             alignContent: 'center',
             paddingTop: '20%',