diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/TrimScrubber.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/TrimScrubber.tsx index 714e778230..816353a088 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/TrimScrubber.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/TrimScrubber.tsx @@ -45,7 +45,7 @@ export const TrimScrubber = memo(({ top: '-1rem', }} initialLeftOffsetPercent={trimStartSeconds/videoDuration} - onScrubEnds={handleOnChange} + onScrubChanged={handleOnChange} {...rest} /> ) 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 2ad8a29b66..13832ac933 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx @@ -1,4 +1,5 @@ import React,{ + memo, useEffect, useRef, useState, @@ -12,7 +13,7 @@ export interface withScrubbingPropsI { initialLeftOffset?: number; //in pixels initialLeftOffsetPercent?: number; // in %, 0 < % < 1 styleOverride?: {[key: string]: string|number }; - onScrubEnds?: (posPercent: number)=>void; + onScrubChanged?: (posPercent: number)=>void; //return scrubber location as %, where 0 < % < 1 } @@ -23,23 +24,23 @@ type withSrcubbingStates = { pointerStartPos: number; } -export const withScrubbing =
(Component: React.ComponentType
) => ({ +export const withScrubbing =
(Component: React.ComponentType
) => memo(({
boundingWidth,
scrubberWidth,
initialLeftOffset : initialLeftOffsetProps = 0,
initialLeftOffsetPercent = 0,
styleOverride = {},
- onScrubEnds,
+ onScrubChanged,
...rest
}: withScrubbingPropsI) => {
- console.log(`withSCRUBBING reRender!! `);
+ console.log(`withSCRUBBING reRENDERING!! `);
const refEl = useRef (Component: React.Co
});
useLayoutEffect(() => {
+ console.log(`withSCRUBBING useLAYOUTeffect!! `);
function handleScrubStart (e: MouseEvent) {
if(refEl.current){
if(refEl.current.contains(e.target as Node)){
@@ -108,8 +110,15 @@ export const withScrubbing = (Component: React.Co
}, [scrubberWidth, boundingWidth]);
useEffect(()=>{
- if(onScrubEnds)onScrubEnds(prevLeftOffset/boundingWidth);
- },[prevLeftOffset, boundingWidth, onScrubEnds]);
+ console.log(`withSCRUBBING useEFFECT!! `);
+ const positionInPercentage = prevLeftOffset/boundingWidth;
+ if(onScrubChanged
+ && typeof positionInPercentage === "number"
+ && positionInPercentage >= 0
+ ){
+ onScrubChanged(prevLeftOffset/boundingWidth);
+ }
+ },[prevLeftOffset, boundingWidth, onScrubChanged]);
return(