From f1bc37c9736dc60b81b47ca194dd0ab8a37a08df Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Wed, 6 Mar 2024 16:22:43 -0500
Subject: [PATCH] fixed reset ids

---
 .../common/VideoQuickTrim/TrimScrubber.tsx    |  6 ++----
 .../common/VideoQuickTrim/VideoQuickTrim.tsx  |  6 +++---
 .../common/VideoQuickTrim/types.tsx           |  2 +-
 .../common/VideoQuickTrim/withScrubbing.tsx   | 20 +++++++++----------
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx
index 129485514b..8b7c795fcd 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx
@@ -36,17 +36,15 @@ export const TrimScrubber = memo(({
       trimStartSeconds: duration * posPercent,
       trimEndSeconds: duration * posPercent + trimDuration,
     });
-  }, [onChange])
+  }, [onChange, duration, trimDuration])
   return (
     <TrimScrubberWithScrubbing
       styleOverride={{
         top: '-1rem',
       }}
-      // initialLeftOffsetPercent={trimStart/trimDuration}
+      initialLeftOffsetPercent={trimStart/trimDuration}
       onScrubEnds={handleOnChange}
       {...rest}
     />
   )
 });
-
-
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
index f4bde41c1b..cc11257590 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
@@ -35,7 +35,7 @@ const trimOptions: { [key: string]: number } = {
 const initialTrimState: TrimStates = {
   canNotTrim: true,
   trimDuration: 0,
-  trimReset: new Date(),
+  trimReset: Date.now(),
   trimStart: 0,
   trimEnd: 0,
   maxDuration: 0,
@@ -153,7 +153,7 @@ export default memo(function VideoQuickTrim({
       }
       setTrimState((curr)=>({
         ...curr,
-        trimReset: new Date(),
+        trimReset: Date.now(),
         trimDuration: trimOptions[selected],
         trimStart: newTrimStart,
         trimEnd: newTrimEnd,
@@ -226,7 +226,7 @@ export default memo(function VideoQuickTrim({
           playbarWidth > 0 && 
           maxDuration > 0 &&
           <TrimScrubber
-            // key={trimReset.toString()}
+            key={trimReset}
             boundingWidth={playbarWidth-trimScrubberWidth}
             scrubberWidth={trimScrubberWidth}
             trimStart={trimStart}
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx
index 4e3dd0db0d..ad93df2aff 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx
@@ -7,7 +7,7 @@ export type QuickTrimData = {
 // INTERNALS
 export type TrimStates = {
   canNotTrim: boolean;
-  trimReset: Date;
+  trimReset: number;
   trimDuration: number;
   trimStart: number;
   trimEnd: number;
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/withScrubbing.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/withScrubbing.tsx
index 4ccd831953..2a90a65b72 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/withScrubbing.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/withScrubbing.tsx
@@ -18,7 +18,7 @@ export interface withScrubbingPropsI {
 }
 
 type withSrcubbingStates = {
-  key: Date,
+  key: number,
   currLeftOffset: number,
   prevLeftOffset: number;
   pointerStartPos: number;
@@ -36,15 +36,15 @@ export const withScrubbing = <P extends withScrubbingPropsI>(Component: React.Co
 }: withScrubbingPropsI) => {
   console.log('withScrubbing reRender');
   const refEl = useRef<HTMLDivElement| null>(null);
-  // const initialLeftOffset = 
-  //   initialLeftOffsetPercent > 0 ? boundingWidth * initialLeftOffsetPercent 
-  //   : initialLeftOffsetProps;
-  const initialLeftOffset = 0;
+  const initialLeftOffset = 
+    initialLeftOffsetPercent > 0 ? boundingWidth * initialLeftOffsetPercent 
+    : initialLeftOffsetProps;
+  // const initialLeftOffset = 0;
   const [{
     key, currLeftOffset, pointerStartPos
     // prevLeftOffset,
   }, setStates] = useState<withSrcubbingStates>({
-    key: new Date(),
+    key: Date.now(),
     currLeftOffset: initialLeftOffset, // in pixels
     prevLeftOffset: initialLeftOffset, //in pixels
     pointerStartPos: -1 // negative denotes pointer not engaged
@@ -98,19 +98,19 @@ export const withScrubbing = <P extends withScrubbingPropsI>(Component: React.Co
   },[scrubberWidth, boundingWidth]);
 
   useLayoutEffect(() => {
-    if(!(window as any)[`${key}listenders`]){
-      (window as any)[`${key}listenders`] = true;
+    if(!(window as any)[`listener-id-${key}`]){
+      (window as any)[`listender-id-${key}`] = true;
       window.addEventListener("mousedown", handleScrubStart);
       window.addEventListener("mouseup", handleScrubEnd);
       window.addEventListener("mousemove", handleScrubMove);
       return () => {
-        (window as any)[`${key}listenders`] = false;
+        (window as any)[`${key}listeners`] = false;
         window.removeEventListener("mousedown", handleScrubStart);
         window.removeEventListener("mouseup", handleScrubEnd);
         window.removeEventListener("mousemove", handleScrubMove);
       };
     }
-  }, [handleScrubEnd, handleScrubMove, key]);
+  }, [handleScrubStart, handleScrubEnd, handleScrubMove, key]);
   return(
     <div
       className="scrubber-wrapper"