From e07207c195a86a27491fd4181a4910eab2d6862b Mon Sep 17 00:00:00 2001
From: olivicmic <vic@vics.pics>
Date: Fri, 6 Oct 2023 12:06:32 -0700
Subject: [PATCH] fit smaple video into face animator layout with inputs

---
 .../common/ImageInput/ImageInput.scss         |  6 +++---
 .../lipsync/LipsyncEditor/LipsyncEditor.scss  | 19 ++++++++++++++++---
 .../lipsync/LipsyncEditor/LipsyncEditor.tsx   |  2 +-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
index e9804a0ae8..c6a2169d5d 100644
--- a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
+++ b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
@@ -4,9 +4,9 @@
 
 .image-upload-frame {
 	// aspect-ratio: 4/3;
-	// @include breakpoint(min-width 992px) {
-	// 	aspect-ratio: 1/1;
-	// }
+	@include breakpoint(min-width 992px) {
+		aspect-ratio: 1/1;
+	}
 }
 
 .fy-image-uploader {
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
index 5a51725881..546808d21a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
@@ -15,8 +15,21 @@ $under992: max-width 992px;
     }
   }
 
+  .audio-input-column {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    .fy-audio-uploder {
+      flex: 1 0 auto;
+    }
+  }
+
   .video-frame {
+    overflow: hidden;
     width: 100%;
+    margin: 0;
+    flex: 1;
     position: relative;
 
     video, .video-overlay {
@@ -25,8 +38,8 @@ $under992: max-width 992px;
       height: 100%;
     }
 
-    video {
-    }
+    video { position: absolute; object-fit: cover; }
+
     .video-overlay {
       background: linear-gradient(rgba($primary,0.5) 0%, rgba($secondary,0.75) 75%);
       cursor: pointer;
@@ -59,7 +72,7 @@ $under992: max-width 992px;
     }
   }
   .animation-configure-panel {
-    margin: 1rem 0 -.5rem;
+    margin: 1.5rem 0 -.5rem;
     padding: 1rem;
     display: flex;
     flex-wrap: wrap;
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
index 75a6029b9f..f02192cee7 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
@@ -102,7 +102,7 @@ const InputPage = ({
         }}
       />
     </div>
-    <div {...{ className: "media-input-column col-lg-6" }}>
+    <div {...{ className: "media-input-column audio-input-column col-lg-6" }}>
       <h5>{t("headings.audio")}</h5>
       <AudioInput
         {...{