diff --git a/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/TimeCursor.tsx b/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/TimeCursor.tsx index bc141045ed..9761959c80 100644 --- a/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/TimeCursor.tsx +++ b/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/TimeCursor.tsx @@ -60,7 +60,7 @@ export const TimeCursor = ({ }; }, [handleWindowResize]) - const handleOnScrubStart = () => { + const handleOnScrubStart = useCallback(() => { isLockedForScrubbing.current = true; if(videoElement!==null) { if (videoElement.paused) wasPlaying.current = false; @@ -69,7 +69,7 @@ export const TimeCursor = ({ videoElement.pause(); } } - } + }, [videoElement]) const handleOnScrubEnd = useCallback( (newPos: number)=>{ isLockedForScrubbing.current = false; diff --git a/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/withScrubbing.tsx b/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/withScrubbing.tsx index 81fb93d99b..aa9ece22fc 100644 --- a/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/withScrubbing.tsx +++ b/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/withScrubbing.tsx @@ -36,13 +36,13 @@ export const withScrubbing =

(Component: React.Co onScrubEnd, ...rest }: withScrubbingPropsI) => { - const debug = true || propsDebug; + // const debug = true || propsDebug; const refEl = useRef(null); - const refListener = useRef(Date.now()); + // const refListener = useRef(Date.now()); - if (debug) console.log(`${refListener.current} withSCRUBBING reRENDERING!! `); + // if (debug) console.log(`${refListener.current} withSCRUBBING reRENDERING!! `); const [{ currLeftOffset, pointerStartPos, @@ -56,7 +56,7 @@ export const withScrubbing =

(Component: React.Co useLayoutEffect(() => { // if (debug) console.log(`withSCRUBBING useLAYOUTeffect!! `); function handleScrubStart (e: PointerEvent) { - if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_START!! `); + // if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_START!! `); e.preventDefault(); e.stopPropagation(); if(refEl.current){ @@ -73,7 +73,7 @@ export const withScrubbing =

(Component: React.Co } }; function handleScrubEnd (e: PointerEvent){ - if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_END!! `); + // if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_END!! `); e.preventDefault(); e.stopPropagation(); @@ -86,7 +86,7 @@ export const withScrubbing =

(Component: React.Co })); }; function handleScrubMove (e: PointerEvent){ - if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_MOVE!! `); + // if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_MOVE!! `); e.preventDefault(); e.stopPropagation(); @@ -120,7 +120,7 @@ export const withScrubbing =

(Component: React.Co window.removeEventListener("pointermove", handleScrubMove); }; // } - }, [scrubberWidth, boundingWidth]); + }, [scrubberWidth, boundingWidth, onScrubStart]); // useEffect(()=>{ // // if (debug) console.log(`${refListener.current} withSCRUBBING useEFFECT for scrubStart!! `); 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 05b411e58f..e3807ccf72 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx @@ -34,13 +34,13 @@ export const withScrubbing =

(Component: React.Co onScrubEnd, ...rest }: withScrubbingPropsI) => { - const debug = true; //|| propsDebug; + // const debug = true; //|| propsDebug; const refEl = useRef(null); - const refListener = useRef(Date.now()); + // const refListener = useRef(Date.now()); - if (debug) console.log(`${refListener.current} withSCRUBBING reRENDERING!! `); + // if (debug) console.log(`${refListener.current} withSCRUBBING reRENDERING!! `); const [{ currLeftOffset, pointerStartPos, @@ -54,7 +54,7 @@ export const withScrubbing =

(Component: React.Co useLayoutEffect(() => { // if (debug) console.log(`withSCRUBBING useLAYOUTeffect!! `); function handleScrubStart (e: MouseEvent) { - if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_START!! `); + // if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_START!! `); e.preventDefault(); e.stopPropagation(); if(refEl.current){ @@ -70,7 +70,7 @@ export const withScrubbing =

(Component: React.Co } }; function handleScrubEnd (e: MouseEvent){ - if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_END!! `); + // if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_END!! `); e.preventDefault(); e.stopPropagation(); @@ -83,7 +83,7 @@ export const withScrubbing =

(Component: React.Co })); }; function handleScrubMove (e: MouseEvent){ - if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_MOVE!! `); + // if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_MOVE!! `); e.preventDefault(); e.stopPropagation(); @@ -106,28 +106,28 @@ export const withScrubbing =

(Component: React.Co }); }; - if(!(window as any)[`listener-id-${refListener.current}`]){ - (window as any)[`listender-id-${refListener.current}`] = true; - window.addEventListener("pointerdown", handleScrubStart); - window.addEventListener("pointerup", handleScrubEnd); - return () => { - (window as any)[`listener-id-${refListener.current}`] = false; - window.removeEventListener("pointerdown", handleScrubStart); - window.removeEventListener("pointerup", handleScrubEnd); - window.removeEventListener("pointermove", handleScrubMove); - }; - } + // if(!(window as any)[`listener-id-${refListener.current}`]){ + // (window as any)[`listender-id-${refListener.current}`] = true; + window.addEventListener("pointerdown", handleScrubStart); + window.addEventListener("pointerup", handleScrubEnd); + return () => { + // (window as any)[`listener-id-${refListener.current}`] = false; + window.removeEventListener("pointerdown", handleScrubStart); + window.removeEventListener("pointerup", handleScrubEnd); + window.removeEventListener("pointermove", handleScrubMove); + }; + // } }, [scrubberWidth, boundingWidth]); useEffect(()=>{ - if (debug) console.log(`${refListener.current} withSCRUBBING useEFFECT for scrubStart!! `); + // if (debug) console.log(`${refListener.current} withSCRUBBING useEFFECT for scrubStart!! `); if(onScrubStart && pointerStartPos > 0){ onScrubStart(); } },[pointerStartPos, onScrubStart]); useEffect(()=>{ - if (debug) console.log(`${refListener.current} withSCRUBBING useEFFECT for scrubEend!! `); + // if (debug) console.log(`${refListener.current} withSCRUBBING useEFFECT for scrubEend!! `); if(onScrubEnd && boundingWidth > 0 && prevLeftOffset >= 0 && propsLeftOffset !== prevLeftOffset){ onScrubEnd(prevLeftOffset); }