diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx index 7bc392576..2ad8a29b6 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx @@ -1,5 +1,5 @@ import React,{ - // useEffect, + useEffect, useRef, useState, useLayoutEffect, @@ -14,8 +14,6 @@ export interface withScrubbingPropsI { styleOverride?: {[key: string]: string|number }; onScrubEnds?: (posPercent: number)=>void; //return scrubber location as %, where 0 < % < 1 - onScrubChanges?: (posPercent:number)=>void; - //return scrubber location as %, where 0 < % < 1 } type withSrcubbingStates = { @@ -32,10 +30,9 @@ export const withScrubbing =

(Component: React.Co initialLeftOffsetPercent = 0, styleOverride = {}, onScrubEnds, - onScrubChanges, ...rest }: withScrubbingPropsI) => { - // console.log(`withScrubbing reRender!! ${Date.now()}`); + console.log(`withSCRUBBING reRender!! `); const refEl = useRef(null); const refListener = useRef(Date.now()); @@ -46,7 +43,7 @@ export const withScrubbing =

(Component: React.Co const [{ // key, currLeftOffset, pointerStartPos, - // prevLeftOffset, + prevLeftOffset, }, setStates] = useState({ key: Date.now(), currLeftOffset: initialLeftOffset, // in pixels @@ -108,10 +105,12 @@ export const withScrubbing =

(Component: React.Co window.removeEventListener("mousemove", handleScrubMove); }; } - }, []); - // useEffect(()=>{ - // if(onScrubEnds)onScrubEnds(prevLeftOffset/boundingWidth); - // },[prevLeftOffset, boundingWidth, onScrubEnds]); + }, [scrubberWidth, boundingWidth]); + + useEffect(()=>{ + if(onScrubEnds)onScrubEnds(prevLeftOffset/boundingWidth); + },[prevLeftOffset, boundingWidth, onScrubEnds]); + return(