fixed reset ids

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

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}

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;

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"