Merge pull request #520 from storytold/feature/comp/playbar-w-trim

Feature/comp/playbar w trim

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);
@@ -77,23 +77,31 @@ 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
+  }, [playbarWidth, onSelect]); //END videoRefCallback
 
   function handleWindowResize() {
     if(playbarRef.current !== null){
@@ -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 */}

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{

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",

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}`}>
@@ -186,6 +191,7 @@ export default function PageVSTApp({
             label={t("button.enqueue")}
             onClick={handleGenerate}
             variant="primary"
+            disabled={vstValues.trimEnd === 0}
           />
         </div>
       </div>

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> */}
     </>
   );
 }