From 8c12e90a79eab0dc7b381b1ee9378a2b0cbb5501 Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 5 Mar 2024 10:23:27 -0500 Subject: [PATCH 1/5] moving scrubber works --- .../common/VideoQuickTrim/TrimScrubber.tsx | 90 +++++++++++-------- .../common/VideoQuickTrim/VideoQuickTrim.tsx | 1 + .../common/VideoQuickTrim/styles.scss | 2 +- 3 files changed, 53 insertions(+), 40 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx index 531ffb32f1..cb54ca4659 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx @@ -1,7 +1,7 @@ import React, { useRef, - // useState, - // PointerEvent + useState, + PointerEvent } from 'react'; import { faGripDots @@ -22,50 +22,62 @@ export default function TrimScrubber({ onChange:(val:QuickTrimData)=>void }){ const ref = useRef(null); - // const [{ - // // leftOffset, - // pointerStart - // }, setState] = useState<{ - // leftOffset:number - // pointerStart:number - // }>({ - // leftOffset:0, - // pointerStart: -1 - // }); + const [{ + left, + leftOffset, + pointerStart + }, setState] = useState<{ + left: number, + leftOffset:number + pointerStart:number + }>({ + left:0, + leftOffset:0, + pointerStart: -1 + }); - // const [left, setLeft] = useState(0); - // if(ref.current){ - // ref.current.style.cursor = pointerStart >= 0 - // ? 'grabbing' : 'grab'; - // } - // function handleScrubStart(e: PointerEvent){ - // setState((curr)=>({ - // ...curr, - // pointerStart: e.clientX - // })); - // } - // function handleScrubEnd(e: PointerEvent){ - // setState((curr)=>({ - // ...curr, - // pointerStart: -1 - // })); - // } - // function handleScrubMove(e: PointerEvent){ - // if(pointerStart >= 0 && ref.current){ - // setLeft(e.clientX - ref.current.getBoundingClientRect().left); - // } - // } + if(ref.current){ + ref.current.style.cursor = pointerStart >= 0 + ? 'grabbing' : 'grab'; + } + function handleScrubStart(e: PointerEvent){ + e.persist(); + console.log(`start: ${pointerStart}` ); + setState((curr)=>({ + ...curr, + pointerStart: e.clientX + })); + } + function handleScrubEnd(e: PointerEvent){ + // e.persist(); + console.log(`end` ); + setState((curr)=>({ + ...curr, + pointerStart: -1, + leftOffset: curr.left, + })); + } + function handleScrubMove(e: PointerEvent){ + e.persist(); + if(pointerStart >= 0 && pointerStart!==null && ref.current){ + console.log(`${e.clientX} - ${pointerStart} = ${e.clientX-pointerStart}`) + setState((curr)=>({ + ...curr, + left: leftOffset + e.clientX - pointerStart + })); + } + } return(
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx index 4a49d08125..8a0746bffa 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx @@ -177,6 +177,7 @@ export default memo(function VideoQuickTrim({
Date: Tue, 5 Mar 2024 11:43:50 -0500 Subject: [PATCH 2/5] gating and returning values correctly --- .../common/VideoQuickTrim/TrimScrubber.tsx | 47 +++++++++++++------ .../common/VideoQuickTrim/VideoQuickTrim.tsx | 31 +++++++----- 2 files changed, 50 insertions(+), 28 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx index cb54ca4659..a2c97ae23e 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx @@ -1,6 +1,7 @@ import React, { useRef, useState, + useCallback, PointerEvent } from 'react'; import { @@ -11,17 +12,19 @@ import { QuickTrimData } from './types'; export default function TrimScrubber({ trimStart, - trimEnd, - width, + trimDuration, + duration, + widthPercent, + boundingWidth, onChange }:{ trimStart:number; - trimEnd: number; + trimDuration: number; + duration: number; boundingWidth: number; - width:number; + widthPercent:number; onChange:(val:QuickTrimData)=>void }){ - const ref = useRef(null); const [{ left, leftOffset, @@ -31,39 +34,53 @@ export default function TrimScrubber({ leftOffset:number pointerStart:number }>({ - left:0, - leftOffset:0, + left: trimStart/duration*boundingWidth, + leftOffset:0,//trimStart/duration*boundingWidth, pointerStart: -1 }); + const ref = useRef(null); if(ref.current){ ref.current.style.cursor = pointerStart >= 0 ? 'grabbing' : 'grab'; } + function handleScrubStart(e: PointerEvent){ e.persist(); - console.log(`start: ${pointerStart}` ); + // console.log(`start: ${pointerStart}` ); setState((curr)=>({ ...curr, pointerStart: e.clientX })); } function handleScrubEnd(e: PointerEvent){ - // e.persist(); - console.log(`end` ); + e.persist(); + // console.log(`end` ); setState((curr)=>({ ...curr, pointerStart: -1, - leftOffset: curr.left, + leftOffset: left, })); + console.log(`${duration} * ${left} / ${boundingWidth} = ${duration * left / boundingWidth}`) + onChange(({ + trimStartSeconds: duration * left / boundingWidth, + trimEndSeconds: duration * left / boundingWidth + trimDuration, + })) } function handleScrubMove(e: PointerEvent){ e.persist(); if(pointerStart >= 0 && pointerStart!==null && ref.current){ - console.log(`${e.clientX} - ${pointerStart} = ${e.clientX-pointerStart}`) + // console.log(`${e.clientX} - ${pointerStart} = ${e.clientX-pointerStart}`) + let newLeft = leftOffset + e.clientX - pointerStart; + // console.log(`${newLeft} + ${boundingWidth * widthPercent/100} > ${boundingWidth}`) + if (newLeft + boundingWidth * widthPercent/100 > boundingWidth) { + newLeft = boundingWidth - boundingWidth * widthPercent/100; + }else if(newLeft < 0) { + newLeft = 0; + } setState((curr)=>({ ...curr, - left: leftOffset + e.clientX - pointerStart + left: newLeft })); } } @@ -71,8 +88,8 @@ export default function TrimScrubber({
(initialTrimState); @@ -210,19 +211,23 @@ export default memo(function VideoQuickTrim({ {/* END of Video Wrapper */}
- { - setTrimState((curr)=>({ - ...curr, - trimStart: val.trimStartSeconds, - trimEnd: val.trimEndSeconds - })) - }} - /> + {videoRef.current && + { + console.log(val); + setTrimState((curr)=>({ + ...curr, + trimStart: val.trimStartSeconds, + trimEnd: val.trimEndSeconds + })) + }} + /> + }
{/* END of Playbar */} From f16ecd570f424e30b3505dc70830e141e6d7e039 Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 5 Mar 2024 13:47:07 -0500 Subject: [PATCH 3/5] scrubber fully functional --- .../common/VideoQuickTrim/TrimScrubber.tsx | 13 ++++---- .../common/VideoQuickTrim/VideoQuickTrim.tsx | 32 +++++++++++++------ .../common/VideoQuickTrim/types.tsx | 1 + .../pageVSTApp/compAdvanceOptions.tsx | 2 +- 4 files changed, 31 insertions(+), 17 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx index a2c97ae23e..b5fb2672af 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx @@ -1,7 +1,6 @@ import React, { useRef, useState, - useCallback, PointerEvent } from 'react'; import { @@ -14,7 +13,7 @@ export default function TrimScrubber({ trimStart, trimDuration, duration, - widthPercent, + width, boundingWidth, onChange }:{ @@ -22,7 +21,7 @@ export default function TrimScrubber({ trimDuration: number; duration: number; boundingWidth: number; - widthPercent:number; + width:number; onChange:(val:QuickTrimData)=>void }){ const [{ @@ -35,7 +34,7 @@ export default function TrimScrubber({ pointerStart:number }>({ left: trimStart/duration*boundingWidth, - leftOffset:0,//trimStart/duration*boundingWidth, + leftOffset: trimStart/duration*boundingWidth, pointerStart: -1 }); const ref = useRef(null); @@ -73,8 +72,8 @@ export default function TrimScrubber({ // console.log(`${e.clientX} - ${pointerStart} = ${e.clientX-pointerStart}`) let newLeft = leftOffset + e.clientX - pointerStart; // console.log(`${newLeft} + ${boundingWidth * widthPercent/100} > ${boundingWidth}`) - if (newLeft + boundingWidth * widthPercent/100 > boundingWidth) { - newLeft = boundingWidth - boundingWidth * widthPercent/100; + if (newLeft + width > boundingWidth) { + newLeft = boundingWidth - width; }else if(newLeft < 0) { newLeft = 0; } @@ -88,7 +87,7 @@ export default function TrimScrubber({
(true); const [{ canNotTrim, + trimReset, trimStart, trimEnd, trimDuration, @@ -140,22 +142,29 @@ export default memo(function VideoQuickTrim({ }, []); const handleChangeTrimDuration = (selected: string) =>{ - if(!canNotTrim){ - const newTrimEnd = trimStart+ trimOptions[selected]; + if(!canNotTrim && maxDuration > 0 && trimOptions[selected] <= maxDuration){ + let newTrimStart = trimStart; + let newTrimEnd = trimStart+ trimOptions[selected]; + if (newTrimEnd > maxDuration){ + newTrimEnd = maxDuration; + newTrimStart = maxDuration - trimOptions[selected]; + } setTrimState((curr)=>({ ...curr, + trimReset: new Date(), trimDuration: trimOptions[selected], + trimStart: newTrimStart, trimEnd: newTrimEnd, })) onSelect({ - trimStartSeconds: trimStart, + trimStartSeconds: newTrimStart, trimEndSeconds: newTrimEnd, }); if (isRepeatOn && videoRef.current && videoRef.current.currentTime > newTrimEnd ){ - videoRef.current.currentTime = trimStart; + videoRef.current.currentTime = newTrimStart; } } } @@ -168,10 +177,10 @@ export default memo(function VideoQuickTrim({ } }; - const trimScrubberWidth = videoRef.current + const trimScrubberWidth = videoRef.current && playbarWidth > 0 ? trimDuration > 0 && trimDuration < videoRef.current.duration - ? (trimDuration / videoRef.current.duration * 100) - : 100 + ? (trimDuration / videoRef.current.duration * playbarWidth) + : playbarWidth : 0; return ( @@ -212,9 +221,10 @@ export default memo(function VideoQuickTrim({
{videoRef.current && - } diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx index c8aa5abe3b..4e3dd0db0d 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx @@ -7,6 +7,7 @@ export type QuickTrimData = { // INTERNALS export type TrimStates = { canNotTrim: boolean; + trimReset: Date; trimDuration: number; trimStart: number; trimEnd: number; diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdvanceOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdvanceOptions.tsx index be700ae4aa..3948bb95ac 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdvanceOptions.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdvanceOptions.tsx @@ -28,7 +28,7 @@ import { defaultPreset, } from "./dataCnPresets"; -export default function SectionAdvanceOptions({ +export default function CompAdvanceOptions({ debug, t, vstValues: vstVal, From ee5971db02179edb137fff6d923169ff967b4ce2 Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 5 Mar 2024 13:53:50 -0500 Subject: [PATCH 4/5] fixing bugs, gating edge cages --- .../common/VideoQuickTrim/VideoQuickTrim.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx index 6c43182f10..47fba979c9 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx @@ -98,8 +98,10 @@ export default memo(function VideoQuickTrim({ }; node.ontimeupdate = ()=>{ - if(isRepeatOn && node.currentTime >= trimEnd){ - node.currentTime = 0; + if(isRepeatOn && + (node.currentTime >= trimEnd || node.currentTime <= trimStart) + ){ + node.currentTime = trimStart; } setPlaybarState((curr)=>({ ...curr, @@ -220,7 +222,9 @@ export default memo(function VideoQuickTrim({ {/* END of Video Wrapper */}
- {videoRef.current && + {trimScrubberWidth > 0 && + playbarWidth > 0 && + maxDuration > 0 && Date: Tue, 5 Mar 2024 13:54:32 -0500 Subject: [PATCH 5/5] hook dependencies --- .../src/components/common/VideoQuickTrim/VideoQuickTrim.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx index 47fba979c9..6f62433ba3 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx @@ -115,7 +115,7 @@ export default memo(function VideoQuickTrim({ node.onended = ()=>{setPlaypause("ended");}; } // else{} DOM node referenced by ref has been unmounted - }, [playbarWidth, onSelect, isRepeatOn, trimEnd]); //END videoRefCallback + }, [playbarWidth, onSelect, isRepeatOn, trimStart, trimEnd]); //END videoRefCallback function handleWindowResize() { if (playbarRef.current !== null) {