From 642dc91295e54c21837bb0ea396b71c2b710a3cc Mon Sep 17 00:00:00 2001
From: olivicmic <vic@vics.pics>
Date: Thu, 5 Oct 2023 13:01:26 -0700
Subject: [PATCH] cleaned up animation configuration inputs

---
 .../components/common/Checkbox/Checkbox.scss  |  9 +++
 .../components/common/Checkbox/Checkbox.tsx   |  2 +-
 .../common/ImageInput/ImageInput.scss         |  2 +-
 .../common/SegmentButtons/SegmentButtons.scss |  1 +
 .../lipsync/LipsyncEditor/LipsyncEditor.scss  | 16 ++++++
 .../lipsync/LipsyncEditor/LipsyncEditor.tsx   | 57 +++++++++----------
 6 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
index 3d3cf2d470..79a06040d1 100644
--- a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
+++ b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
@@ -1,5 +1,14 @@
 @import "scss/colours.scss";
 
+.fy-checkbox-frame {
+  margin-bottom: .5rem;
+  white-space: nowrap;
+
+  label {
+    margin-left: .5rem;
+  }
+}
+
 .fy-checkbox {
   background-color: $primary;
   border-radius: .5rem;
diff --git a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
index 949409b055..35826acf2a 100644
--- a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
+++ b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
@@ -21,7 +21,7 @@ export default function Checkbox({ checked, className = "", label = "", name = "
   });
   const onClick = ({ target }: any) => onChange({ target: { checked: !checked, name, type: 'checkbox' } });
   const id = "checkbox-" + useId();
-  return <div {...{ ...makeClass("form-check",className),  }}>
+  return <div {...{ ...makeClass("fy-checkbox-frame",className),  }}>
     <a.svg {...{ className: "fy-checkbox", onClick, style, ...hoverEvents }}>
       <Check {...{ checked }}/>
     </a.svg>
diff --git a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
index 612038a77e..e9804a0ae8 100644
--- a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
+++ b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
@@ -3,7 +3,7 @@
 
 
 .image-upload-frame {
-	aspect-ratio: 4/3;
+	// aspect-ratio: 4/3;
 	// @include breakpoint(min-width 992px) {
 	// 	aspect-ratio: 1/1;
 	// }
diff --git a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss
index e2589e3233..422a63e43c 100644
--- a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss
+++ b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss
@@ -5,6 +5,7 @@
 	grid-auto-flow: column;
 	grid-auto-columns: 1fr;
 	gap: 2px;
+	padding: 0;
 
 	li {
 		background-color: $secondary;
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 be1de2ec1e..0592b46ec6 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
@@ -17,6 +17,22 @@ $under992: max-width 992px;
     display: block;
     margin-top: 1rem;
   }
+
+  .animation-configure-panel {
+    margin: 1rem 0 -.5rem;
+    padding: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem 2rem;
+
+    .input-block {
+      legend {
+        font-size: .875rem;
+      };
+      flex-grow: 1;
+      vertical-align: top;
+    }
+  }
 }
 
 .progress-header {
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 bfaf69a409..8bc50a6e9e 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
@@ -2,11 +2,7 @@ import React, { useState } from "react";
 import { animated, useTransition } from "@react-spring/web";
 import { v4 as uuidv4 } from "uuid";
 import { useFile, useLocalize } from "hooks";
-<<<<<<< HEAD
-import { AudioInput, Checkbox, ImageInput, NumberSlider, SegmentButtons, Spinner } from "components/common";
-=======
 import { AudioInput, Checkbox, ImageInput, SegmentButtons, Spinner } from "components/common";
->>>>>>> master
 import { springs } from "resources";
 import {
   UploadAudio,
@@ -34,12 +30,12 @@ import {
 } from "@storyteller/components/src/jobs/InferenceJob";
 
 interface LipSyncProps {
-  animationChange: any;
-  animationStyle: any;
+  // animationChange: any;
+  // animationStyle: any;
   audioProps: any;
   children?: any;
-  cropChange: any;
-  cropping: any;
+  // cropChange: any;
+  // cropping: any;
   imageProps: any;
   frameDimensions: any;
   frameDimensionsChange: any;
@@ -70,11 +66,11 @@ interface EditorProps {
 const softSpring = { config: { mass: 1, tension: 80, friction: 10 } };
 
 const InputPage = ({
-  animationChange,
-  animationStyle,
+  // animationChange,
+  // animationStyle,
   audioProps,
-  cropping,
-  cropChange,
+  // cropping,
+  // cropChange,
   imageProps,
   frameDimensions,
   frameDimensionsChange,
@@ -99,23 +95,6 @@ const InputPage = ({
         }}
       />
 
-      <label {...{ class: "sub-title", }}>Video Dimensions</label>
-      <SegmentButtons {...{
-        onChange: frameDimensionsChange,
-        options: [{ label: "Landscape (Wide)", value: "twitter_landscape" },{ label: "Portrait (Tall)", value: "twitter_portrait" },{ label: "Square", value: "twitter_square" }],
-        value: frameDimensions
-      }}/>
-
-      <label {...{ class: "sub-title", }}>Animation</label>
-      <Checkbox {...{ checked: still, label: "Reduce Movement (not recommended)", onChange: stillChange}}/>
-      <Checkbox {...{ checked: disableFaceEnhancement, label: "Disable Face Enhancer (not recommended)", onChange: disableFaceEnhancementChange}}/>
-
-      <label {...{ class: "sub-title", }}>Watermark</label>
-      <Checkbox {...{ checked: removeWatermark, label: "Remove Watermark (premium only)", onChange: removeWatermarkChange }}/>
-      
-      {/*<label {...{ class: "sub-title", }}>Animation style</label>
-      <NumberSlider {...{ min: 0, max: 32, onChange: animationChange, value: animationStyle }}/>*/}
-
     </div>
     <div {...{ className: "media-input-column col-lg-6" }}>
       <h5>{t("headings.audio")}</h5>
@@ -129,6 +108,26 @@ const InputPage = ({
         }}
       />
     </div>
+    <div {...{ className: "animation-configure-panel panel" }}>
+      <fieldset {...{ className: "input-block" }}>
+        <legend>Video Dimensions</legend>
+        <SegmentButtons {...{
+          onChange: frameDimensionsChange,
+          options: [{ label: "Landscape (Wide)", value: "twitter_landscape" },{ label: "Portrait (Tall)", value: "twitter_portrait" },{ label: "Square", value: "twitter_square" }],
+          value: frameDimensions
+        }}/>
+      </fieldset>
+      <fieldset {...{ className: "input-block" }}>
+        <legend>Watermark</legend>
+        <Checkbox {...{ checked: removeWatermark, label: "Remove Watermark (premium only)", onChange: removeWatermarkChange }}/>
+      </fieldset>
+      <fieldset {...{ className: "input-block" }}>
+        <legend>Animation</legend>
+        <Checkbox {...{ checked: still, label: "Reduce Movement (not recommended)", onChange: stillChange}}/>
+        <Checkbox {...{ checked: disableFaceEnhancement, label: "Disable Face Enhancer (not recommended)", onChange: disableFaceEnhancementChange}}/>
+      </fieldset>
+    </div>
+
   </animated.div>;
 };