OV-424: * fix bug

BinaryStudioAcademy · Sep 25, 2024 · 44a35e4 · 44a35e4
1 parent 64c3327
commit 44a35e4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/frontend/src/bundles/studio/components/video/styles.module.css b/frontend/src/bundles/studio/components/video/styles.module.css
@@ -4,14 +4,23 @@
     justify-content: center;
 }
 
+.image {
+    position: absolute;
+    object-fit: cover;
+    z-index: 2;
+    height: 100%;
+    width: 100%;
+}
+
 .background {
-    background-size: cover;
     height: 100%;
     width: 100%;
-    justify-content: center;
+    z-index: 1;
+    position: absolute;
 }
 
-.image {
+.avatar {
+    z-index: 3;
     position: absolute;
     object-fit: contain;
     bottom: 0;

diff --git a/frontend/src/bundles/studio/components/video/video.tsx b/frontend/src/bundles/studio/components/video/video.tsx
@@ -1,7 +1,6 @@
 import {
     AbsoluteFill,
     Audio,
-    Flex,
     RemotionImg,
     Series,
 } from '~/bundles/common/components/components.js';
@@ -38,19 +37,28 @@ const VideoComponent: React.FC<Properties> = ({ scenes, scripts }) => {
                             durationInFrames={scene.duration * FPS}
                             className={styles['sequence'] as string}
                         >
-                            {scene?.avatar?.url || scene.background ? (
-                                <Flex
-                                    background={`${scene.background?.color ?? ''} url(${scene.background?.url ?? ''}) no-repeat`}
-                                    className={styles['background']}
-                                >
-                                    <RemotionImg
-                                        className={styles['image']}
-                                        src={scene?.avatar?.url ?? ''}
-                                    />
-                                </Flex>
+                            {scene?.avatar?.url ? (
+                                <RemotionImg
+                                    className={styles['avatar']}
+                                    src={scene?.avatar?.url ?? ''}
+                                />
                             ) : (
                                 <></>
                             )}
+                            {scene?.background?.url && (
+                                <RemotionImg
+                                    className={styles['image']}
+                                    src={scene?.background?.url}
+                                />
+                            )}
+                            {scene?.background?.color && (
+                                <div
+                                    style={{
+                                        backgroundColor: `${scene?.background?.color}`,
+                                    }}
+                                    className={styles['background']}
+                                ></div>
+                            )}
                         </Series.Sequence>
                     );
                 })}