READY

Add Effects

Add Transitions

Update modules

Add binary effects

.gitattributes

@@ -1 +1,2 @@
 *.mp4 filter=lfs diff=lfs merge=lfs -text
+*.webm filter=lfs diff=lfs merge=lfs -text

common-creds

@@ -1 +1 @@
-Subproject commit 2f7eff48f46b0e2f0904b8df6c24bb3a79e96192
+Subproject commit 5d7a3030c167c25abdab978394d5ebfed260eb10

common-utils

@@ -1 +1 @@
-Subproject commit f4abf22de6b3c3f7f855ca38b25d1f57c8c83dcd
+Subproject commit be1b982a86932c9d8507754a647cf22594be880e

package-lock.json

@@ -15,6 +15,7 @@
         "@remotion/cli": "4.0.19",
         "@remotion/eslint-config": "4.0.19",
         "@remotion/google-fonts": "4.0.19",
+        "@remotion/lottie": "^4.0.19",
         "@remotion/noise": "4.0.19",
         "@remotion/preload": "4.0.19",
         "@remotion/tailwind": "4.0.19",
@@ -31,6 +32,7 @@
         "fs-extra": "^11.1.1",
         "i": "^0.3.7",
         "lodash": "^4.17.21",
+        "lottie-web": "^5.12.2",
         "multi-db-orm": "^1.3.0",
         "npm": "^9.8.1",
         "path": "^0.12.7",
@@ -4399,6 +4401,19 @@
         "remotion": "4.0.19"
       }
     },
+    "node_modules/@remotion/lottie": {
+      "version": "4.0.19",
+      "resolved": "https://registry.npmjs.org/@remotion/lottie/-/lottie-4.0.19.tgz",
+      "integrity": "sha512-BGRxafOW8FlZsBfqV3+Dfdi4Dh+bQry5CcgBXF5JaZpRrhARJyjpNL5GHnTzKvTMeFYITZwphpJH10Z/xC7gKw==",
+      "dependencies": {
+        "remotion": "4.0.19"
+      },
+      "peerDependencies": {
+        "lottie-web": "^5",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@remotion/media-utils": {
       "version": "4.0.19",
       "resolved": "https://registry.npmjs.org/@remotion/media-utils/-/media-utils-4.0.19.tgz",
@@ -10388,6 +10403,11 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -22084,6 +22104,14 @@
         "remotion": "4.0.19"
       }
     },
+    "@remotion/lottie": {
+      "version": "4.0.19",
+      "resolved": "https://registry.npmjs.org/@remotion/lottie/-/lottie-4.0.19.tgz",
+      "integrity": "sha512-BGRxafOW8FlZsBfqV3+Dfdi4Dh+bQry5CcgBXF5JaZpRrhARJyjpNL5GHnTzKvTMeFYITZwphpJH10Z/xC7gKw==",
+      "requires": {
+        "remotion": "4.0.19"
+      }
+    },
     "@remotion/media-utils": {
       "version": "4.0.19",
       "resolved": "https://registry.npmjs.org/@remotion/media-utils/-/media-utils-4.0.19.tgz",
@@ -26614,6 +26642,11 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",

package.json

@@ -11,7 +11,7 @@
     "extract32": "set MODIFY_FILES=1 && node app.js",
     "extract": "MODIFY_FILES=1 && node app.js",
     "preview": "remotion studio",
-    "render-build:igreels": "remotion render --image-format=jpeg --enable-multi-process-on-linux --quality=70 --gl=angle IGReelComposition",
+    "render-build:igreels": "remotion render --image-format=jpeg --enable-multi-process-on-linux --quality=70  --concurrency 4 --gl=angle IGReelComposition",
     "render-build": "remotion render --image-format=jpeg --quality=70 --gl=angle ",
     "render-still": "remotion still --image-format=jpeg SemibitCompositionPoster  ",
     "upgrade": "remotion upgrade",
@@ -40,6 +40,7 @@
     "@remotion/cli": "4.0.19",
     "@remotion/eslint-config": "4.0.19",
     "@remotion/google-fonts": "4.0.19",
+    "@remotion/lottie": "^4.0.19",
     "@remotion/noise": "4.0.19",
     "@remotion/preload": "4.0.19",
     "@remotion/tailwind": "4.0.19",
@@ -56,6 +57,7 @@
     "fs-extra": "^11.1.1",
     "i": "^0.3.7",
     "lodash": "^4.17.21",
+    "lottie-web": "^5.12.2",
     "multi-db-orm": "^1.3.0",
     "npm": "^9.8.1",
     "path": "^0.12.7",
@@ -79,4 +81,4 @@
   "devDependencies": {
     "@types/lodash": "^4.14.199"
   }
-}
+}

public/assets/transitions.json

@@ -0,0 +1,46 @@
+[
+  {
+    "file": "assets/transition.mp4",
+    "durationSec": 5
+  },
+  {
+    "mood": "excited,happy",
+    "file": "assets/effects/effect_slice_transition.webm",
+    "durationSec": 2.07
+  },
+  {
+    "mood": "excited,happy",
+    "file": "assets/effects/effect_water_splash.webm",
+    "durationSec": 2.07
+  },
+  {
+    "mood": "excited,happy",
+    "file": "assets/effects/effect_circle.webm",
+    "durationSec": 2.07
+  },
+  {
+    "mood": "excited,happy",
+    "file": "assets/effects/effect_fire_2.webm",
+    "durationSec": 0.93
+  },
+  {
+    "mood": "excited",
+    "file": "assets/effects/effect_hexagon.webm",
+    "durationSec": 2.07
+  },
+  {
+    "mood": "excited,happy",
+    "file": "assets/effects/effect_white_boom.webm",
+    "durationSec": 1
+  },
+  {
+    "mood": "excited,happy",
+    "file": "assets/effects/effect_sky.webm",
+    "durationSec": 2.07
+  },
+  {
+    "mood": "motivational",
+    "file": "assets/effects/effect_words.webm",
+    "durationSec": 2.07
+  }
+]

scripts/transparent.sh

@@ -1,3 +1,10 @@
-ffmpeg -i ig-reels-next.mp4 -vf chromakey=black overlay.webm
-ffmpeg -i ig-reels-next.mp4 -c:v libvpx -vf "colorkey=0x000000:0.1:0.1,format=yuva420p,scale=1280:720" -auto-alt-ref 0 -y overlay.webm
+# ffmpeg -i ig-reels-next.mp4 -vf chromakey=black overlay.webm
+# ffmpeg -i ig-reels-next.mp4 -c:v libvpx -vf "colorkey=0x0bb563:0.01:0.1,format=yuva420p,scale=iw:ih" -auto-alt-ref 0 -y overlay.webm
+
+
+# ffmpeg -i ig-reels-next.mp4 -c:v prores_ks ig-reels-next.mov
+
+
+ffmpeg -i ig-reels-next.webm -vf "chromakey=black:0.1:0.1"  -c:v libvpx-vp9 -crf 30 -b:v 0 -b:a 128k -c:a libopus -y overlay.webm && del ig-reels-next.webm
+
 # ffmpeg -loop 1 -i green.jpg -c:v libx264 -t 15 -pix_fmt yuv420p -vf scale=1080:1920 green.mp4

src/Compositions.tsx

@@ -9,6 +9,7 @@ import './style.css';
 import Transitions from '../public/assets/transitions.json'
 import { IGReelComposition } from './ig-reel/IGReelComposition';
 import { RenderUtils } from './RenderUtils';
+import { VideoSplash, VideoSplashSchema } from './anims/VideoSplash';
 
 
 
@@ -47,7 +48,7 @@ export const Compositions: React.FC = () => {
     let contents: SequentialSceneData[] =
         Script.transcript
             .filter(item => item.subtitle_file != undefined)
-            // .slice(0, 1)
+            .slice(0, 2)
             .map((section) => {
                 var { text, duration, offset, imageAbsPaths, audioFullPath, title, pointers } = section
                 if (!duration)
@@ -164,6 +165,22 @@ export const Compositions: React.FC = () => {
                 })}
             />
 
+            <Composition
+                defaultProps={{
+                    direction: 'left',
+                    progress: 1,
+                    file: 'effect_hexagon.webm',
+                    durationInFrames: 200,
+                }}
+                schema={VideoSplashSchema}
+                id='VideoSplash'
+                component={VideoSplash}
+                durationInFrames={100}
+                fps={fps}
+                width={Script.meta?.resolution?.width || 1920}
+                height={Script.meta?.resolution?.height || 1080}
+            />
+
             <Still
                 id="SemibitCompositionPoster"
                 component={PosterSingleTextWithBG}

src/anims/Dissolve.tsx

@@ -15,6 +15,7 @@ export const Dissolve: TransitionImplementation = ({
           top: 0,
           right: 0,
           bottom: 0,
+          opacity: 1 - progress,
         }}
       >
         {exitingElement}

src/anims/VideoSplash.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TransitionImplementationProps } from 'remotion-transition-series/lib/components/Transition';
+import { OffthreadVideo, Video, staticFile } from 'remotion'
+import { z } from "zod";
+
+export const VideoSplash:
+  React.FC<z.infer<typeof VideoSplashSchema>> = (props) => {
+
+    let {
+      file,
+      durationInFrames,
+    } = props
+    return (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+
+        <Video  {...props} playbackRate={1}
+          volume={0} style={{
+            position: 'absolute',
+            height: '100%', width: '100%',
+          }} src={staticFile((file || 'assets/effects/effect_zipper.webm'))} />
+
+      </div>
+    );
+  };
+
+
+
+export const VideoSplashSchema = z.object({
+  file: z.string(),
+  durationInFrames: z.number()
+});

src/ig-reel/IGMediaRender.tsx

@@ -1,30 +1,57 @@
 //@ts-nocheck
-import { Img, Video, staticFile } from "remotion";
+import { Img, Video, OffthreadVideo, staticFile } from "remotion";
+import TransitionSeries from "remotion-transition-series/lib/TransitionSeries";
+import { VideoSplash } from "../anims/VideoSplash";
+import { SequentialScene } from "../youtube/SequentialScene";
 import { DisplayMedia } from "./IGSimpleScene";
+import Transitions from '../../public/assets/transitions.json'
+import { RenderUtils } from "../RenderUtils";
 
 
 export function IGMediaRender(props) {
   let displayMedia: DisplayMedia = props.displayMedia
   let bgMediaPath = staticFile(displayMedia?.path || '')
   let curZoom = props.curZoom
+  let transitionsByMood = Transitions.filter(t => t.mood?.indexOf("happy") > -1)
+  let transition = RenderUtils.randomElement(transitionsByMood, `x-${displayMedia.idx * displayMedia.durationFrames}`)
+  // transition.file = 'assets/effects/effect_sky.webm'
 
   return (
-    displayMedia.type == 'video' ? (
-      <div style={{
-        position: 'relative',
-        height: '100%', width: '100%'
-      }}>
-        <Video playbackRate={0.5} volume={0} style={{
-          background: '#fff',
-          position: 'absolute',
-          height: '100%', width: '100%'
-        }} src={bgMediaPath} />
-      </div>
-    ) : (
-      <Img className='absolute inset-0 w-full h-full object-cover' style={{
-        transform: `scale(${(curZoom)})  translateX(${10 * curZoom}px)`,
-        height: '100%', width: '100%'
-      }} src={bgMediaPath} />
-    )
+    <div style={{
+      position: 'relative',
+      height: '100%', width: '100%'
+    }}>
+
+      {
+        displayMedia.type == 'video' ? (
+          <div style={{
+            position: 'relative',
+            height: '100%', width: '100%'
+          }}>
+            <Video playbackRate={0.5} volume={0} style={{
+              background: '#fff',
+              position: 'absolute',
+              height: '100%', width: '100%'
+            }} src={bgMediaPath} />
+          </div>
+        ) : (
+          <Img className='absolute inset-0 w-full h-full object-cover' style={{
+            transform: `scale(${(curZoom)})  translateX(${10 * curZoom}px)`,
+            height: '100%', width: '100%'
+          }} src={bgMediaPath} />
+        )
+      }
+      {/* {
+        displayMedia?.idx > -1 && (
+          <TransitionSeries.Sequence from={displayMedia.durationFrames - 60}>
+            <VideoSplash file={transition.file} style={{
+              position: 'relative',
+              height: '100%', width: '100%'
+            }} />
+          </TransitionSeries.Sequence>
+        )
+      } */}
+
+    </div>
   )
 }

src/ig-reel/IGSimpleScene.tsx

@@ -1,8 +1,8 @@
 //@ts-nocheck
-import { AbsoluteFill, interpolate, staticFile, Audio, useCurrentFrame, Easing } from 'remotion';
+import { AbsoluteFill, Sequence, interpolate, staticFile, Audio, useCurrentFrame, Easing } from 'remotion';
 import React, { useEffect, useState } from 'react'
 import { RenderUtils } from '../RenderUtils';
-import { Transcript, SectionMedia } from '../models/OriginalManuscriptModel'
+import { Transcript, SectionMedia, OriginalManuscript } from '../models/OriginalManuscriptModel'
 import axios from 'axios';
 import ExcitedSubtitles from '../subtitles/excited_Subtitles';
 import _ from 'lodash';
@@ -16,12 +16,14 @@ import { Dissolve } from '../anims/Dissolve';
 import { SlidingDoors } from '../anims/SlidingDoors';
 import { IGMediaRender } from './IGMediaRender';
 import { Group } from '../models/Types';
+import { VideoSplash } from '../anims/VideoSplash';
+import Transitions from '../../public/assets/transitions.json'
 
 export type DisplayMedia = SectionMedia &
 { idx: number, durationFrames: number, startFrame: number, endFrame: number, }
 
 export const IGScene: React.FC<any> = (props: {
-  script: any,
+  script: OriginalManuscript,
   item: Transcript
 }) => {
   const [subtitles, setSubtitles] = useState(undefined)
@@ -106,7 +108,7 @@ export const IGScene: React.FC<any> = (props: {
   const foregroundOpacity = interpolate(
     frame,
     [0, 10, itemDurationInFrames - 10, itemDurationInFrames],
-    [1, 0, 0, 1]
+    [1, 0, 0, item.index >= props?.script?.transcript?.length - 1 ? 0 : 1]
   );
 
 
@@ -151,26 +153,29 @@ export const IGScene: React.FC<any> = (props: {
     ))
     if (i < item?.imageAbsPaths.length - 1 || true) {
       let anims = [CircularWipe, Slide, SlidingDoors, Pan, LinearWipe, Dissolve, CircularWipe, Slide, SlidingDoors, Pan, LinearWipe, Dissolve]
-      // .fill(CircularWipe)
+      // .fill(SlidingDoors)
       let Anim = anims[frame % 9]
       let seed = i * displayMedia.idx
       Anim = RenderUtils.randomElement(anims, `x-${seed}`)
       const easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
-      chunk.push((
-        <TransitionSeries.Transition
-          durationInFrames={30}
-          transitionComponent={({ progress, ...props }) => {
-            return (
-              <Anim {...props} progress={easeInOutExp(progress)} />
-            )
-          }}
-        />
-      ))
+      if (item.transition_type == 'geometrial' || item.transition_type == undefined) {
+        chunk.push((
+          <TransitionSeries.Transition
+            durationInFrames={60}
+            transitionComponent={({ progress, ...props }) => {
+              return (
+                <Anim {...props} progress={easeInOutExp(progress)} />
+              )
+            }}
+          />
+        ))
+      }
     }
     return chunk
   }))
 
 
+  console.log('currentDisplayMedia?.endFrame', frame, currentDisplayMedia?.endFrame)
   return (
     <AbsoluteFill style={{
       width: '100%',
@@ -184,6 +189,26 @@ export const IGScene: React.FC<any> = (props: {
 
       </TransitionSeries>
 
+      {
+        (item.transition_type == 'graphical') &&
+        currentDisplayMedia?.idx > -1 && (
+          item?.imageAbsPaths?.map((displayMedia: DisplayMedia, i) => {
+            let transitionsByMood = Transitions.filter(t => t.mood?.indexOf("happy") > -1)
+            let transition = RenderUtils.randomElement(transitionsByMood, `x-${displayMedia.idx * displayMedia.durationFrames}`)
+            // transition = transitionsByMood[5]
+
+            return (
+              <Sequence from={displayMedia?.endFrame - transition.durationSec * fps / 2} durationInFrames={transition.durationSec * fps}>
+                <VideoSplash file={transition.file} style={{
+                  position: 'relative',
+                  height: '100%', width: '100%'
+                }} />
+              </Sequence>
+            )
+          })
+        )
+      }
+
       <div style={{
         opacity: foregroundOpacity,
         zIndex: 10,

src/models/OriginalManuscriptModel.ts

@@ -26,6 +26,7 @@ export interface Transcript {
     dialog: string[]
     imageAbsPathsOriginal: SectionMedia[]
     index: number
+    transition_type: 'graphical' | 'geometrial'
     transition_file: string
     transition_duration_sec: number
     status: boolean