From b22379140963949eb1bcce5d1ea40cba88c1727d Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Wed, 28 Feb 2024 17:10:07 -0500
Subject: [PATCH 1/2] video duration check properly implemented with on load
 data

---
 .../common/VideoQuickTrim/VideoQuickTrim.tsx  | 53 +++++++++++--------
 .../common/VideoQuickTrim/styles.scss         | 17 ++++--
 .../components/pageVSTApp/defaultValues.tsx   |  4 +-
 .../components/pageVSTApp/pageVSTApp.tsx      |  5 +-
 4 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
index 67e6b0a39c..5933329bac 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
@@ -77,21 +77,29 @@ export default memo(function VideoQuickTrim({
     if (node !== null) { 
       // DOM node referenced by ref has changed and exists
       videoRef.current = node;
-      if (node.duration >= 3){
-        setTrimState((curr)=>({
-          ...curr,
-          canNotTrim: false,
-          trimDuration: 3,
-          trimEnd: 0,
-          maxDuration: node.duration
-        }));
-        node.ontimeupdate = (e: PointerEvent)=>{
-          setPlaybarState((curr)=>({
+      
+      node.onloadedmetadata = ()=>{
+        if (node.duration >= 3){
+          setTrimState((curr)=>({
             ...curr,
-            timeCursorOffset: (node.currentTime / node.duration) * (playbarWidth-8)
+            canNotTrim: false,
+            trimDuration: 3,
+            trimEnd: 3,
+            maxDuration: node.duration
           }));
+          onSelect({
+            trimStartSeconds: 0,
+            trimEndSeconds: 3,
+          })
         }
       }
+      
+      node.ontimeupdate = (e: PointerEvent)=>{
+        setPlaybarState((curr)=>({
+          ...curr,
+          timeCursorOffset: (node.currentTime / node.duration) * (playbarWidth-8)
+        }));
+      }
     } // else{} DOM node referenced by ref has been unmounted 
   }, [playbarWidth]); //END videoRefCallback
 
@@ -121,15 +129,17 @@ export default memo(function VideoQuickTrim({
   },[]);
 
   const handleChangeTrimDuration = (selected: string) =>{
-    setTrimState((curr)=>({
-      ...curr,
-      trimDuration: trimOptions[selected],
-      trimEnd: trimStart+ trimOptions[selected],
-    }))
-    onSelect({
-      trimStartSeconds: trimStart,
-      trimEndSeconds: trimStart+ trimOptions[selected],
-    });
+    if(!canNotTrim){
+      setTrimState((curr)=>({
+        ...curr,
+        trimDuration: trimOptions[selected],
+        trimEnd: trimStart+ trimOptions[selected],
+      }))
+      onSelect({
+        trimStartSeconds: trimStart,
+        trimEndSeconds: trimStart+ trimOptions[selected],
+      });
+    }
   }
 
   const handlePlaypause = ()=>{
@@ -172,7 +182,8 @@ export default memo(function VideoQuickTrim({
         </div>
         {videoRef.current && canNotTrim &&
           <div className="warning-too-short">
-            Warning: Sorry Your Video is TOO Short
+            <div className="background"></div>
+            <p>Warning: Sorry Your Video is TOO Short</p>
           </div>
         }
       </div>{/* END of Video Wrapper */}
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss
index e588f8c5b6..9c30de85ca 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss
@@ -42,10 +42,21 @@ $playbar-height: 2rem;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #e66462;
-    opacity: 70%;
+
+    div{
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      top:0;
+      left:0;
+      background-color: #e66462;
+      opacity: 70%;
+    }
     p{
-      opacity: 1;
+      position: absolute;
+      margin-top: 230px;
+      width: 100%;
+      top:0;
     }
   }
   .playbar{
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx
index 21c6d139ea..89d7fcc434 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx
@@ -8,9 +8,9 @@ const initialValues = {
   //video Settings
   width: 1024,
   height: 1024,
-  maxDuration: 3,
+  maxDuration: 0,
   trimStart: 0,
-  trimEnd: 3,
+  trimEnd: 0,
 
   //Presents
   workflowConfig: "weight_99tz2nzbp5x9v55gqn5ekj1sd",
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx
index c5a55a8060..61f8fb4cea 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx
@@ -174,18 +174,19 @@ export default function PageVSTApp({
               variant="primary"
             />
           </NavLink>
-          {/* <Button
+          <Button
             label="Fake Gen"
             onClick={()=>{
               const request = mapRequest(vstValues);
               console.log(request);
             }}
             variant="secondary"
-          />  */}
+          /> 
           <Button
             label={t("button.enqueue")}
             onClick={handleGenerate}
             variant="primary"
+            disabled={vstValues.trimEnd === 0}
           />
         </div>
       </div>

From e4771f7913913b2f7a6f0873e845d5248c6dbc3b Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Wed, 28 Feb 2024 17:20:45 -0500
Subject: [PATCH 2/2] latest simplest UI

---
 .../common/VideoQuickTrim/VideoQuickTrim.tsx  |  4 +--
 .../components/pageVSTApp/pageVSTApp.tsx      | 13 ++++---
 .../pageVSTApp/sectionAdvanceOptions.tsx      | 34 ++++++++++++-------
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
index 5933329bac..343ee9fa50 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
@@ -54,7 +54,7 @@ export default memo(function VideoQuickTrim({
   onSelect,
   ...rest
 }: VideoQuickTrimProps){
-  console.log("VideoQuickTrim Rerender!!");
+  // console.log("VideoQuickTrim Rerender!!");
 
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const playbarRef = useRef<HTMLDivElement | null>(null);
@@ -101,7 +101,7 @@ export default memo(function VideoQuickTrim({
         }));
       }
     } // else{} DOM node referenced by ref has been unmounted 
-  }, [playbarWidth]); //END videoRefCallback
+  }, [playbarWidth, onSelect]); //END videoRefCallback
 
   function handleWindowResize() {
     if(playbarRef.current !== null){
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx
index 61f8fb4cea..2f5b59eec0 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx
@@ -147,6 +147,11 @@ export default function PageVSTApp({
             required: false,
           }}
           />
+          <br/>
+          <SectionAdvanceOptions 
+            onChange={handleOnChange}
+            vstValues={vstValues}
+          />
        {/* </div>
         </div>
         <div className="row g-3  mb-4">
@@ -160,12 +165,12 @@ export default function PageVSTApp({
               }}/> */}
         </div>
       </div>
-      <div className="row g-3 mt-4">
+      {/* <div className="row g-3 mt-4">
         <SectionAdvanceOptions 
           onChange={handleOnChange}
           vstValues={vstValues}
         />
-      </div>
+      </div> */}
       <div className="row g-3 mt-4">
         <div className="col-12 d-flex justify-content-between">
           <NavLink to={`${parentPath}`}>
@@ -174,14 +179,14 @@ export default function PageVSTApp({
               variant="primary"
             />
           </NavLink>
-          <Button
+          {/* <Button
             label="Fake Gen"
             onClick={()=>{
               const request = mapRequest(vstValues);
               console.log(request);
             }}
             variant="secondary"
-          /> 
+          />  */}
           <Button
             label={t("button.enqueue")}
             onClick={handleGenerate}
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx
index e16036e380..d57f976c0c 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx
@@ -4,9 +4,9 @@ import {
   faBuildingColumns,
   faFaceViewfinder,
   faPerson,
-  faRotateLeft,
+  // faRotateLeft,
   faStar,
-  faSparkles,
+  // faSparkles,
   faText,
   faUser,
   
@@ -14,10 +14,10 @@ import {
 from "@fortawesome/pro-solid-svg-icons";
 
 import {
-  Accordion,
+  // Accordion,
   Button,
   Label,
-  NumberSliderV2
+  // NumberSliderV2
 } from 'components/common';
 import { VSTType } from './helpers';
 import { 
@@ -67,7 +67,7 @@ export default function SectionAdvanceOptions({
   return (
     <>
       <Label label="Video's Camera Angle"/>
-      <div className="d-flex flex-wrap w-100">
+      {/* <div className="d-flex flex-wrap w-100">
         <div className="my-1 me-1">
           <Button
             icon={faStar}
@@ -76,17 +76,25 @@ export default function SectionAdvanceOptions({
             onClick={()=>handlePreset('default')}
           />
         </div>
-        <div className="my-1 me-1">
+         <div className="my-1 me-1">
           <Button
             icon={faSparkles}
             label="Custom"
             isActive={preset==='custom'}
             disabled
           />
-        </div>
-      </div>
+        </div> 
+      </div> */}
       <div className="d-flex flex-wrap w-100">
-        <div className="my-1 me-1">
+        <div className="m-1">
+          <Button
+            icon={faStar}
+            label="Default"
+            isActive={preset==='default'}
+            onClick={()=>handlePreset('default')}
+          />
+        </div>
+        <div className="m-1">
           <Button
             icon={faFaceViewfinder}
             label="Face Closeups"
@@ -118,7 +126,7 @@ export default function SectionAdvanceOptions({
             onClick={()=>handlePreset('landscape')}
           />
         </div>
-        <div className="my-1 ms-1">
+        <div className="m-1">
           <Button
             icon={faText}
             label="Flat Logos, or Typographies"
@@ -127,7 +135,7 @@ export default function SectionAdvanceOptions({
           />
         </div>
       </div>
-      <Accordion className="mt-4">
+      {/* <Accordion className="mt-4">
         <Accordion.Item title={"Advanced Options"}>
           <div className="row g-3 p-3">
             <div className="col-md-6">
@@ -247,7 +255,7 @@ export default function SectionAdvanceOptions({
                 }
               }}/>
             </div>
-          </div> */}
+          </div> 
           <div className="d-flex p-3 justify-content-end">
             <Button
               icon={faRotateLeft}
@@ -259,7 +267,7 @@ export default function SectionAdvanceOptions({
             />
           </div>
         </Accordion.Item>
-      </Accordion>
+      </Accordion> */}
     </>
   );
 }
\ No newline at end of file