Added animas

.gitignore

@@ -1,7 +1,9 @@
 node_modules
 dist
 .DS_Store
+*.mp4
 .env
+*.exe
 @@export_177ba1326b.zip
 # Ignore the output video from Git but not videos you import into src/.
 out/**

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 --quality=70 --gl=angle IGReelComposition",
+    "render-build:igreels": "remotion render --image-format=jpeg --enable-multi-process-on-linux --quality=70 --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",

scripts/cut_center.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+
+# Input video file
+input_file="input_video.mp4"
+
+# Output video file
+output_file="output_video.mp4"
+
+# Target aspect ratio (e.g., 9:16)
+target_aspect_ratio="9:16"
+
+# Get the dimensions of the input video
+video_info=$(ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 "$input_file")
+width=$(echo "$video_info" | cut -d ',' -f 1)
+height=$(echo "$video_info" | cut -d ',' -f 2)
+
+# Calculate the target width based on the target aspect ratio and height
+IFS=':' read -ra target_ratio <<< "$target_aspect_ratio"
+target_height=$((height))
+target_width=$((height * target_ratio[0] / target_ratio[1]))
+
+# Make sure the dimensions are even
+if [ $((target_width % 2)) -ne 0 ]; then
+  target_width=$((target_width + 1))
+fi
+if [ $((target_height % 2)) -ne 0 ]; then
+  target_height=$((target_height + 1))
+fi
+
+# Calculate the cropping parameters to center the video
+crop_x=$(( (width - target_width) / 2 ))
+crop_y=0  # Center vertically
+
+# Use FFmpeg to crop and resize the video
+./ffmpeg -i "$input_file" -vf "crop=$target_width:$target_height:$crop_x:$crop_y" -c:a copy -s "${target_width}x${target_height}" -y "$output_file"
+
+echo "Video cropped, resized, and saved as $output_file"

scripts/transparent.sh

@@ -0,0 +1,3 @@
+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 -loop 1 -i green.jpg -c:v libx264 -t 15 -pix_fmt yuv420p -vf scale=1080:1920 green.mp4

src/RenderUtils.ts

@@ -18,6 +18,13 @@ function levenshteinDistance(str1: string, str2: string) {
 }
 export class RenderUtils {
 
+  public static hashCode(s) {
+    return s.split("").reduce(function (a, b) {
+      a = ((a << 5) - a) + b.charCodeAt(0);
+      return a & a;
+    }, 0);
+  }
+
   public static splitArrayIntoChunks(arr, chunkSize) {
     const chunkedArr = [];
     for (let i = 0; i < arr.length; i += chunkSize) {

src/ig-reel/IGReelComposition.tsx

@@ -1,4 +1,5 @@
-import { AbsoluteFill, Img, staticFile } from 'remotion';
+//@ts-nocheck
+import { AbsoluteFill, Audio, Img, staticFile } from 'remotion';
 import React from 'react'
 import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
 import { Series } from "remotion";
@@ -7,14 +8,19 @@ import { IGScene } from './IGSimpleScene';
 
 export const IGReelComposition: React.FC = (props) => {
   const { fontFamily } = loadFont();
-  let { contents, meta } = props
+  let { contents, meta, bgMusic } = props
 
 
+  let bgMusicPath = staticFile(bgMusic || '')
   return (
     <AbsoluteFill style={{
       background: 'black'
     }}>
-
+      {
+        bgMusic && (
+          <Audio loop fade volume={0.05} src={bgMusicPath} />
+        )
+      }
       <Series>
         {
           contents.map((scriptItem, i) => {

src/ig-reel/IGSimpleScene.tsx

@@ -1,5 +1,5 @@
 //@ts-nocheck
-import { AbsoluteFill, Img, staticFile, Audio, useCurrentFrame } from 'remotion';
+import { AbsoluteFill, Img, staticFile, Audio, useCurrentFrame, Video } from 'remotion';
 import React, { useEffect, useState } from 'react'
 import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
 import { Series } from "remotion";
@@ -7,6 +7,9 @@ import { RenderUtils } from '../RenderUtils';
 import { Transcript } from '../OriginalManuscriptModel'
 import axios from 'axios';
 import GeneralSubtitles from '../subtitles/general_Subtitles';
+import ExcitedSubtitles from '../subtitles/excited_Subtitles';
+import _ from 'lodash';
+import './styles.module.css'
 
 export const IGScene: React.FC<any> = (props: {
   script: any,
@@ -97,16 +100,60 @@ export const IGScene: React.FC<any> = (props: {
   let curSecond: Number = frame / fps
   let word = findCurrentWord(curSecond, subtitles)
   let group = findCurrentGroupByTime(curSecond, groups)
-  let bgImage = staticFile(item?.imageAbsPaths[0]?.path || '')
+
+  let displayMedia = (item?.imageAbsPaths || [])[0]
+
+  if (!_.isEmpty(item?.imageAbsPaths)) {
+    let frameOffest = 0
+    for (let i = 0; i < item?.imageAbsPaths.length; i++) {
+      const media = item.imageAbsPaths[i];
+      media.startFrame = frameOffest
+      if (media.durationSec == undefined) {
+        media.durationSec = durationInSeconds
+      }
+      media.durationFrames = media.durationSec * fps
+      media.endFrame = frameOffest + media.durationFrames
+      frameOffest = frameOffest + media.durationFrames
+      if (frame > media.startFrame && frame < media.endFrame) {
+        displayMedia = media
+      }
+    }
+  }
+
+  let bgMediaPath = staticFile(displayMedia?.path || '')
   let audioPath = RenderUtils.getFileName(item?.audioFullPath)
 
+
   return (
     <AbsoluteFill className='relative'>
-      <Audio volume={1.0} src={staticFile(audioPath)} />
-      <Img className='absolute inset-0 w-full h-full object-cover' style={{ height: '100%', width: '100%' }} src={bgImage}>
-      </Img>
+      <Audio volume={1} src={staticFile(audioPath)} />
+      {
+        displayMedia && (
+          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} />
+
+              <Video className="transparent" playbackRate={0.5} volume={0} style={{
+                position: 'absolute',
+                background: `linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 0), linear-gradient(135deg, rgba(0, 0, 0, .1) 25%, transparent 0), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, .1) 0), linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, .1) 0), #fff;`,
+                height: '100%', width: '100%',
+              }} src={staticFile('assets/overlay.webm')} />
+            </div>
+          ) : (
+            <Img className='absolute inset-0 w-full h-full object-cover' style={{ height: '100%', width: '100%' }} src={bgMediaPath} />
+          )
+        )
+      }
       <div className='absolute inset-0'>
-        <GeneralSubtitles position='center' group={group} word={word} />
+        <ExcitedSubtitles position='center' group={group} word={word} />
       </div>
     </AbsoluteFill >
   );

src/ig-reel/styles.module.css

@@ -0,0 +1,3 @@
+.transparent {
+  background: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 0), linear-gradient(135deg, rgba(0, 0, 0, .1) 25%, transparent 0), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, .1) 0), linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, .1) 0), #fff;
+}

src/subtitles/excited_Subtitles.tsx

@@ -0,0 +1,57 @@
+//@ts-nocheck
+import React, { useEffect, useState } from 'react'
+import * as SubtitleFont from "@remotion/google-fonts/Montserrat";
+import { AbsoluteFill, Img, interpolate, interpolateColors, Series, spring, useCurrentFrame, useVideoConfig, random } from "remotion";
+import { Group, Word } from '../ig-reel/Types';
+import _, { words } from 'lodash'
+import GeneralSubtitles from './general_Subtitles';
+import { RenderUtils } from '../RenderUtils';
+
+
+const ExcitedSubtitles: React.FC<{ group: Group, word: Word, position: 'start' | 'center' | 'end' }> = ({
+  word, group }) => {
+
+  let { fontFamily } = SubtitleFont.loadFont("normal", {
+    weights: ['900']
+  })
+
+  let frame = useCurrentFrame()
+  let rotation = 0
+  if (group && group.words) {
+    let sent = group.words.map(w => w.word).join(" ")
+    const randomNumber = RenderUtils.hashCode(sent)
+    let last2 = randomNumber % 100
+    if (last2 < 50) {
+      rotation = (-5)
+    } else {
+      rotation = (5)
+    }
+  }
+
+  let getHighlightStyle = (frame, wdStartFrame, wdEndFrame) => {
+    const color = interpolateColors(frame - wdStartFrame, [0, 1], ["#fff", "#00EF00"]);
+
+    return {
+      color: color,
+      opacity: 1,
+      borderStyle: 'solid',
+    };
+  }
+
+  return (
+    <div style={{
+      width: '100%', height: '100%',
+
+    }}>
+      <GeneralSubtitles style={{
+        transform: `rotate(${rotation}deg)`,
+        justifyContent: 'center',
+        alignContent: 'center'
+      }}
+        wordFont={fontFamily}
+        getHighlightStyle={getHighlightStyle}
+        word={word} group={group} position="end" />
+    </div>
+  );
+};
+export default ExcitedSubtitles

src/subtitles/general_Subtitles.tsx

@@ -1,19 +1,21 @@
 //@ts-nocheck
 import React, { useEffect, useState } from 'react'
-import * as Montserrat from "@remotion/google-fonts/Lato";
+import * as SubtitleFont from "@remotion/google-fonts/Lato";
 import { AbsoluteFill, Img, interpolate, interpolateColors, Series, spring, useCurrentFrame, useVideoConfig } from "remotion";
 import { Group, Word } from '../ig-reel/Types';
 import _ from 'lodash'
 
 
 const GeneralSubtitles: React.FC<{ group: Group, word: Word, position: 'start' | 'center' | 'end' }> = ({
+  style,
   getHighlightStyle,
   group,
   word: curWord,
+  wordFont,
   fontSize = '6em',
   position = 'end' }) => {
 
-  let { fontFamily } = Montserrat.loadFont("normal", {
+  let { fontFamily } = SubtitleFont.loadFont("normal", {
     weights: ['900']
   })
 
@@ -46,7 +48,7 @@ const GeneralSubtitles: React.FC<{ group: Group, word: Word, position: 'start' |
     padding: '0.2rem 1.5rem',
   };
   if (!getHighlightStyle) {
-    getHighlightStyle = (opacityMult, sizeMult) => {
+    getHighlightStyle = (frame, wdStartFrame, wdEndFrame) => {
       return {
         opacity: opacityMult,
         background: color,
@@ -59,25 +61,24 @@ const GeneralSubtitles: React.FC<{ group: Group, word: Word, position: 'start' |
       };
     }
   }
-  let highlightStyle = getHighlightStyle(opacityMult, sizeMult)
+  let highlightStyle = getHighlightStyle(frame, wdStartFrame, wdEndFrame)
 
 
   return (
     <div
       className="min-h-screen"
-      style={{
+      style={Object.assign({
         display: 'flex',
         flexDirection: 'column',
-        background: '#000',
         height: '100%',
         fontSize: fontSize || '10em',
         justifyContent: position,
-      }}
+      }, {})}
     >
 
       <div
         className="p-6 rounded-lg"
-        style={{
+        style={Object.assign({
           paddingRight: '10%',
           paddingLeft: '10%',
           paddingBottom: '20%',
@@ -87,7 +88,7 @@ const GeneralSubtitles: React.FC<{ group: Group, word: Word, position: 'start' |
           display: 'flex',
           flexWrap: 'wrap', // Add flex-wrap to allow multiple lines
           maxWidth: '100%', // Add max-width to restrict width to screen size
-        }}
+        }, style)}
       >
         {/* 
         <span style={baseStyle}>
@@ -107,7 +108,7 @@ const GeneralSubtitles: React.FC<{ group: Group, word: Word, position: 'start' |
                   key={index}
                   style={{
                     ...wordStyle,
-                    fontFamily,
+                    fontFamily: wordFont || fontFamily
                   }}
                 >
                   {word?.word?.toUpperCase()}