Add plugins

common-utils

@@ -1 +1 @@
-Subproject commit d8e83ba4748273a696d23d0a11df0dc1ae7fae32
+Subproject commit 6137795c68524d7ee3083df49c6f4d499a6d107b

src/ig-reel/IGReelComposition.tsx

@@ -30,6 +30,8 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
   let frame = useCurrentFrame()
   const resolution = useVideoConfig();
 
+  const plugins = meta.plugins || []
+  const applyTransparentPlugin = plugins.find((p) => p.name === "transparent-background")
   let textLen = props.transcript.length % 5
   let transitions = Transitions.filter(t => t.mood?.indexOf("intro") > -1)
   let startTransition = props.hook
@@ -38,24 +40,24 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
   let bgMusicPath = RenderUtils.tryStaticFile(bgMusic || '')
   let chunks = [];
   transcripts.forEach((scriptItem: Transcript, i, array) => {
-            let { durationInSeconds } = scriptItem
+    let { durationInSeconds } = scriptItem
     let durationInFrames = meta.fps * (durationInSeconds + (scriptItem.transition_duration_sec || 0))
-            let template = scriptItem.extras?.template
-            let Component = (
-              <IGSimpleScene
-                meta={props.meta}
-                script={props}
-                item={scriptItem} />
-            );
-            if (template == 'motivational-2-liner') {
-              Component = (
-                <IG2LineMotivationalScene
-                  meta={props.meta}
-                  script={props}
-                  item={scriptItem} />
-              )
-            }
-            const easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
+    let template = scriptItem.extras?.template
+    let Component = (
+      <IGSimpleScene
+        meta={props.meta}
+        script={props}
+        item={scriptItem} />
+    );
+    if (template == 'motivational-2-liner') {
+      Component = (
+        <IG2LineMotivationalScene
+          meta={props.meta}
+          script={props}
+          item={scriptItem} />
+      )
+    }
+    const easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
 
     chunks.push(
       <TransitionSeries.Sequence
@@ -82,7 +84,7 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
 
   return (
     <AbsoluteFill style={{
-      background: 'black'
+      background: applyTransparentPlugin ? 'transparent' : 'black'
     }}>
       {bgMusic && (
         <Audio