scrubber progress, it's moving

packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx

@@ -1,47 +1,71 @@
 import React, {
   useRef,
-  // useState
+  useState,
+  PointerEvent
 } from 'react';
 import {
   faGripDots
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { QuickTrimData } from './types';
 
 export default function TrimScrubber({
-  width
+  trimStart,
+  trimEnd,
+  width,
+  onChange
 }:{
-  width:number
+  trimStart:number;
+  trimEnd: number;
+  boundingWidth: number;
+  width:number;
+  onChange:(val:QuickTrimData)=>void
 }){
   const ref = useRef<HTMLDivElement>(null);
+  const [{
+    leftOffset,
+    pointerStart
+  }, setState] = useState<{
+    leftOffset:number
+    pointerStart:number
+  }>({
+    leftOffset:0,
+    pointerStart: -1
+  });
+
+  const [left, setLeft] = useState<number>(0);
+  if(ref.current){
+    ref.current.style.cursor = pointerStart >= 0 
+    ? 'grabbing' : 'grab';
+  }
+  function handleScrubStart(e: PointerEvent<HTMLDivElement>){
+    setState((curr)=>({
+      ...curr,
+      pointerStart: e.clientX
+    })); 
+  }
+  function handleScrubEnd(e: PointerEvent<HTMLDivElement>){
+    setState((curr)=>({
+      ...curr,
+      pointerStart: -1
+    })); 
+  }
+  function handleScrubMove(e: PointerEvent<HTMLDivElement>){
+    if(pointerStart >= 0  && ref.current){
+      setLeft(e.clientX - ref.current.getBoundingClientRect().left);
+    }
+  }
   return(
     <div className="trim-scrubber" 
       ref={ref}
-      style={{width: width + "%"}}
-      // onPointerDown={()=>{
-      //   if(trimZoneRef.current){
-      //     trimZoneRef.current.style.cursor = 'grabbing';
-      //     setTrimState((curr)=>({
-      //       ...curr,
-      //       isScrubbingTrim: true,
-      //     }))
-      //   }
-      // }}
-      // onPointerUp={()=>{
-      //   if(trimZoneRef.current) {
-      //     trimZoneRef.current.style.cursor = 'grab';
-      //     setTrimState((curr)=>({
-      //       ...curr,
-      //       isScrubbingTrim: false,
-      //     }));
-      //   }
-      // }}
-      // onPointerMove={(e: PointerEvent<HTMLDivElement>)=>{
-      //   if(trimZoneRef.current && playbarRef.current && isScrubbingTrim){
-      //     // console.log(fractionToPercentage(
-      //     //   (e.clientX - trimZoneRef.current.getBoundingClientRect().left) / (playbarRef.current.getBoundingClientRect().width)
-      //     // ) + "%");
-      //   }
-      // }}
+      style={{
+        width: width + "%",
+        left: left
+      }}
+      onPointerDown={handleScrubStart}
+      onPointerUp={handleScrubEnd}
+      onPointerLeave={handleScrubEnd}
+      onPointerMove={handleScrubMove}
     >
       <FontAwesomeIcon icon={faGripDots} />
     </div>

packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx

@@ -4,7 +4,6 @@ import React, {
   useLayoutEffect,
   useState,
   useRef,
-  // PointerEvent,
 } from "react";
 import {
   faArrowsRepeat,
@@ -35,7 +34,6 @@ const trimOptions: { [key: string]: number } = {
 
 const initialTrimState: TrimStates = {
   canNotTrim: true,
-  isScrubbingTrim: false,
   trimDuration: 0,
   trimStart: 0,
   trimEnd: 0,
@@ -68,7 +66,6 @@ export default memo(function VideoQuickTrim({
     trimStart,
     trimEnd,
     trimDuration,
-    // isScrubbingTrim,
   }, setTrimState] = useState<TrimStates>(initialTrimState);
   
 
@@ -212,7 +209,19 @@ export default memo(function VideoQuickTrim({
       {/* END of Video Wrapper */}
       <div className="playbar" ref={playbarRefCallback}>
         <div className="playbar-bg" />
-        <TrimScrbber width={trimScrubberWidth} />
+        <TrimScrbber 
+          boundingWidth={playbarWidth}
+          width={trimScrubberWidth}
+          trimStart={trimStart}
+          trimEnd={trimEnd}
+          onChange={(val: QuickTrimData)=>{
+            setTrimState((curr)=>({
+              ...curr,
+              trimStart: val.trimStartSeconds,
+              trimEnd: val.trimEndSeconds
+            }))
+          }}
+        />
         <div className="playcursor" style={{left: timeCursorOffset+"px"}}/>
       </div> {/* END of Playbar */}
 

packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss

@@ -87,7 +87,7 @@ $playbar-height: 2rem;
     outline: 0.125rem $white solid;
     border-top: 1rem $white solid;
     border-radius: 0.25rem 0.25rem 0.125rem 0.125rem;
-    // cursor: grab;
+    cursor: grab;
 
     display: flex;
     justify-content: center;

packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx

@@ -7,7 +7,6 @@ export type QuickTrimData = {
 // INTERNALS
 export type TrimStates = {
   canNotTrim: boolean;
-  isScrubbingTrim: boolean;
   trimDuration: number;
   trimStart: number;
   trimEnd: number;

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx

@@ -145,14 +145,14 @@ export default function PageVSTApp({
               variant="primary"
             />
           </NavLink>
-          {/* <Button
+          <Button
             label="Fake Gen"
             onClick={()=>{
               const request = mapRequest(vstValues);
               console.log(request);
             }}
             variant="secondary"
-          />  */}
+          /> 
           <Button
             label={t("button.enqueue")}
             onClick={handleGenerate}