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
+ return
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 8b33edf78b..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
@@ -30,8 +30,12 @@ import {
} from "@storyteller/components/src/jobs/InferenceJob";
interface LipSyncProps {
+ // animationChange: any;
+ // animationStyle: any;
audioProps: any;
children?: any;
+ // cropChange: any;
+ // cropping: any;
imageProps: any;
frameDimensions: any;
frameDimensionsChange: any;
@@ -62,7 +66,11 @@ interface EditorProps {
const softSpring = { config: { mass: 1, tension: 80, friction: 10 } };
const InputPage = ({
+ // animationChange,
+ // animationStyle,
audioProps,
+ // cropping,
+ // cropChange,
imageProps,
frameDimensions,
frameDimensionsChange,
@@ -87,22 +95,6 @@ const InputPage = ({
}}
/>
-
-
-
-
-
-
-
-
-
-
- {/*
-
*/}
{t("headings.audio")}
@@ -116,6 +108,26 @@ const InputPage = ({
}}
/>
+
+
+
+
+
+
;
};
@@ -175,7 +187,6 @@ export default function LipsyncEditor({
const imageProps = useFile({}); // contains upload inout state and controls, see docs
const [index, indexSet] = useState
(0); // index = slideshow slide position
-
//const [animationStyle,animationStyleSet] = useState(0);
const [frameDimensions,frameDimensionsSet] = useState("twitter_square");
const [removeWatermark,removeWatermarkSet] = useState(false);