diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx index 67e6b0a39c..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(null); const playbarRef = useRef(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({ {videoRef.current && canNotTrim &&
- Warning: Sorry Your Video is TOO Short +
+

Warning: Sorry Your Video is TOO Short

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