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 (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 (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);
}