scrubber fully functional

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

@@ -1,7 +1,6 @@
 import React, {
   useRef,
   useState,
-  useCallback,
   PointerEvent
 } from 'react';
 import {
@@ -14,7 +13,7 @@ export default function TrimScrubber({
   trimStart,
   trimDuration,
   duration,
-  widthPercent,
+  width,
   boundingWidth,
   onChange
 }:{
@@ -22,7 +21,7 @@ export default function TrimScrubber({
   trimDuration: number;
   duration: number;
   boundingWidth: number;
-  widthPercent:number;
+  width:number;
   onChange:(val:QuickTrimData)=>void
 }){
   const [{
@@ -35,7 +34,7 @@ export default function TrimScrubber({
     pointerStart:number
   }>({
     left: trimStart/duration*boundingWidth,
-    leftOffset:0,//trimStart/duration*boundingWidth,
+    leftOffset: trimStart/duration*boundingWidth,
     pointerStart: -1
   });
   const ref = useRef<HTMLDivElement | null>(null);
@@ -73,8 +72,8 @@ export default function TrimScrubber({
       // console.log(`${e.clientX} - ${pointerStart} = ${e.clientX-pointerStart}`)
       let newLeft = leftOffset + e.clientX - pointerStart;
       // console.log(`${newLeft} + ${boundingWidth * widthPercent/100} > ${boundingWidth}`)
-      if (newLeft + boundingWidth * widthPercent/100 > boundingWidth) {
-        newLeft = boundingWidth - boundingWidth * widthPercent/100;
+      if (newLeft + width > boundingWidth) {
+        newLeft = boundingWidth - width;
       }else if(newLeft < 0) {
         newLeft = 0;
       }
@@ -88,7 +87,7 @@ export default function TrimScrubber({
     <div className="trim-scrubber" 
       ref={ref}
       style={{
-        width: widthPercent + "%",
+        width: width + "px",
         left: left,
       }}
       onPointerDown={handleScrubStart}

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

@@ -35,6 +35,7 @@ const trimOptions: { [key: string]: number } = {
 const initialTrimState: TrimStates = {
   canNotTrim: true,
   trimDuration: 0,
+  trimReset: new Date(),
   trimStart: 0,
   trimEnd: 0,
   maxDuration: 0,
@@ -63,6 +64,7 @@ export default memo(function VideoQuickTrim({
   const [isRepeatOn, setIsRepatOn] = useState<boolean>(true);
   const [{
     canNotTrim,
+    trimReset,
     trimStart,
     trimEnd,
     trimDuration,
@@ -140,22 +142,29 @@ export default memo(function VideoQuickTrim({
   }, []);
 
   const handleChangeTrimDuration = (selected: string) =>{
-    if(!canNotTrim){
-      const newTrimEnd = trimStart+ trimOptions[selected];
+    if(!canNotTrim && maxDuration > 0 && trimOptions[selected] <= maxDuration){
+      let newTrimStart = trimStart;
+      let newTrimEnd = trimStart+ trimOptions[selected];
+      if (newTrimEnd > maxDuration){
+        newTrimEnd = maxDuration;
+        newTrimStart = maxDuration - trimOptions[selected];
+      }
       setTrimState((curr)=>({
         ...curr,
+        trimReset: new Date(),
         trimDuration: trimOptions[selected],
+        trimStart: newTrimStart,
         trimEnd: newTrimEnd,
       }))
       onSelect({
-        trimStartSeconds: trimStart,
+        trimStartSeconds: newTrimStart,
         trimEndSeconds: newTrimEnd,
       });
       if (isRepeatOn 
           && videoRef.current 
           && videoRef.current.currentTime > newTrimEnd
       ){
-        videoRef.current.currentTime = trimStart;
+        videoRef.current.currentTime = newTrimStart;
       }
     }
   }
@@ -168,10 +177,10 @@ export default memo(function VideoQuickTrim({
     }
   };
 
-  const trimScrubberWidth = videoRef.current 
+  const trimScrubberWidth = videoRef.current && playbarWidth > 0
     ? trimDuration > 0 && trimDuration < videoRef.current.duration 
-      ? (trimDuration / videoRef.current.duration * 100) 
-      : 100
+      ? (trimDuration / videoRef.current.duration * playbarWidth) 
+      : playbarWidth
     : 0;
 
   return (
@@ -212,9 +221,10 @@ export default memo(function VideoQuickTrim({
       <div className="playbar" ref={playbarRefCallback}>
         <div className="playbar-bg" />
         {videoRef.current && 
-          <TrimScrbber 
+          <TrimScrbber
+            key={trimReset.toString()}
             boundingWidth={playbarWidth}
-            widthPercent={trimScrubberWidth}
+            width={trimScrubberWidth}
             trimStart={trimStart}
             trimDuration={trimDuration}
             duration={maxDuration}
@@ -225,6 +235,10 @@ export default memo(function VideoQuickTrim({
                 trimStart: val.trimStartSeconds,
                 trimEnd: val.trimEndSeconds
               }))
+              onSelect({
+                trimStartSeconds: val.trimStartSeconds,
+                trimEndSeconds: val.trimEndSeconds,
+              });
             }}
           />
         }

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

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

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

@@ -28,7 +28,7 @@ import {
   defaultPreset,
 } from "./dataCnPresets";
 
-export default function SectionAdvanceOptions({
+export default function CompAdvanceOptions({
   debug,
   t,
   vstValues: vstVal,