From f4e48382594b7e90f8b6d111338e60f4fec2bf57 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Mon, 11 Mar 2024 12:21:40 -0400
Subject: [PATCH] fix trim width initiation

---
 .../components/TrimScrubber.tsx               |  2 +-
 .../components/withScrubbing.tsx              | 25 +++++++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

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 = <P extends withScrubbingPropsI>(Component: React.ComponentType<P>) => ({
+export const withScrubbing = <P extends withScrubbingPropsI>(Component: React.ComponentType<P>) => memo(({
   boundingWidth,
   scrubberWidth,
   initialLeftOffset : initialLeftOffsetProps = 0,
   initialLeftOffsetPercent = 0,
   styleOverride = {},
-  onScrubEnds,
+  onScrubChanged,
   ...rest
 }: withScrubbingPropsI) => {
-  console.log(`withSCRUBBING reRender!! `);
+  console.log(`withSCRUBBING reRENDERING!! `);
   const refEl = useRef<HTMLDivElement| null>(null);
   const refListener = useRef<number>(Date.now());
 
   const initialLeftOffset = 
     initialLeftOffsetPercent > 0 ? boundingWidth * initialLeftOffsetPercent 
     : initialLeftOffsetProps;
-  // const initialLeftOffset = 0;
+
   const [{
     // key, 
     currLeftOffset, pointerStartPos,
@@ -52,6 +53,7 @@ export const withScrubbing = <P extends withScrubbingPropsI>(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 = <P extends withScrubbingPropsI>(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(
     <div
@@ -129,4 +138,4 @@ export const withScrubbing = <P extends withScrubbingPropsI>(Component: React.Co
       />
     </div>
   );
-};
+});