From 44a35e4b83692940d3b5165c29926a81b5d6ac1e Mon Sep 17 00:00:00 2001
From: Oleksandra Okhotnykova <ohotnikova.sasha2002@gmail.com>
Date: Wed, 25 Sep 2024 15:53:20 +0200
Subject: [PATCH] OV-424: * fix bug

---
 .../studio/components/video/styles.module.css | 15 ++++++++--
 .../bundles/studio/components/video/video.tsx | 30 ++++++++++++-------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/frontend/src/bundles/studio/components/video/styles.module.css b/frontend/src/bundles/studio/components/video/styles.module.css
index b7ed47c9e..93b8252f0 100644
--- 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
index be50b93e5..ea2b3c790 100644
--- 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>
                     );
                 })}