Merge pull request #529 from storytold/contdev/page/video_transfer

Contdev/page/video transfer

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

@@ -1,7 +1,7 @@
 import React, {
   useRef,
-  // useState,
-  // PointerEvent
+  useState,
+  PointerEvent
 } from 'react';
 import {
   faGripDots
@@ -11,61 +11,89 @@ import { QuickTrimData } from './types';
 
 export default function TrimScrubber({
   trimStart,
-  trimEnd,
+  trimDuration,
+  duration,
   width,
+  boundingWidth,
   onChange
 }:{
   trimStart:number;
-  trimEnd: number;
+  trimDuration: number;
+  duration: 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,
+    leftOffset,
+    pointerStart
+  }, setState] = useState<{
+    left: number,
+    leftOffset:number
+    pointerStart:number
+  }>({
+    left: trimStart/duration*boundingWidth,
+    leftOffset: trimStart/duration*boundingWidth,
+    pointerStart: -1
+  });
+  const ref = useRef<HTMLDivElement | null>(null);
 
-  // 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);
-  //   }
-  // }
+  if(ref.current){
+    ref.current.style.cursor = pointerStart >= 0 
+    ? 'grabbing' : 'grab';
+  }
+
+  function handleScrubStart(e: PointerEvent<HTMLDivElement>){
+    e.persist();
+    // console.log(`start: ${pointerStart}` );
+    setState((curr)=>({
+      ...curr,
+      pointerStart: e.clientX
+    })); 
+  }
+  function handleScrubEnd(e: PointerEvent<HTMLDivElement>){
+    e.persist();
+    // console.log(`end` );
+    setState((curr)=>({
+      ...curr,
+      pointerStart: -1,
+      leftOffset: left,
+    })); 
+    console.log(`${duration} * ${left} / ${boundingWidth} = ${duration * left / boundingWidth}`)
+    onChange(({
+      trimStartSeconds: duration * left / boundingWidth,
+      trimEndSeconds: duration  * left / boundingWidth + trimDuration,
+    }))
+  }
+  function handleScrubMove(e: PointerEvent<HTMLDivElement>){
+    e.persist();
+    if(pointerStart >= 0 && pointerStart!==null && ref.current){
+      // console.log(`${e.clientX} - ${pointerStart} = ${e.clientX-pointerStart}`)
+      let newLeft = leftOffset + e.clientX - pointerStart;
+      // console.log(`${newLeft} + ${boundingWidth * widthPercent/100} > ${boundingWidth}`)
+      if (newLeft + width > boundingWidth) {
+        newLeft = boundingWidth - width;
+      }else if(newLeft < 0) {
+        newLeft = 0;
+      }
+      setState((curr)=>({
+        ...curr,
+        left: newLeft
+      }));
+    }
+  }
   return(
     <div className="trim-scrubber" 
       ref={ref}
       style={{
-        width: width + "%",
-        // left: left
+        width: width + "px",
+        left: left,
       }}
-      // onPointerDown={handleScrubStart}
-      // onPointerUp={handleScrubEnd}
-      // onPointerLeave={handleScrubEnd}
-      // onPointerMove={handleScrubMove}
+      onPointerDown={handleScrubStart}
+      onPointerUp={handleScrubEnd}
+      onPointerLeave={handleScrubEnd}
+      onPointerMove={handleScrubMove}
     >
       <FontAwesomeIcon icon={faGripDots} />
     </div>

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,9 +64,11 @@ export default memo(function VideoQuickTrim({
   const [isRepeatOn, setIsRepatOn] = useState<boolean>(true);
   const [{
     canNotTrim,
+    trimReset,
     trimStart,
     trimEnd,
     trimDuration,
+    maxDuration
   }, setTrimState] = useState<TrimStates>(initialTrimState);
   
 
@@ -95,8 +98,10 @@ export default memo(function VideoQuickTrim({
       };
       
       node.ontimeupdate = ()=>{
-        if(isRepeatOn && node.currentTime >= trimEnd){
-          node.currentTime = 0;
+        if(isRepeatOn && 
+            (node.currentTime >= trimEnd || node.currentTime <= trimStart)
+          ){
+          node.currentTime = trimStart;
         }
         setPlaybarState((curr)=>({
           ...curr,
@@ -110,7 +115,7 @@ export default memo(function VideoQuickTrim({
       node.onended = ()=>{setPlaypause("ended");};
 
     } // else{} DOM node referenced by ref has been unmounted 
-  }, [playbarWidth, onSelect, isRepeatOn, trimEnd]); //END videoRefCallback
+  }, [playbarWidth, onSelect, isRepeatOn, trimStart, trimEnd]); //END videoRefCallback
 
   function handleWindowResize() {
     if (playbarRef.current !== null) {
@@ -139,22 +144,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;
       }
     }
   }
@@ -167,16 +179,17 @@ 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 (
     <div className="fy-video-quicktrim">
       <div className="video-wrapper">
         <VideoFakeyou
+          height={500}
           controls={false}
           muted={isMuted}
           ref={videoRefCallback}
@@ -209,19 +222,30 @@ export default memo(function VideoQuickTrim({
       {/* END of Video Wrapper */}
       <div className="playbar" ref={playbarRefCallback}>
         <div className="playbar-bg" />
-        <TrimScrbber 
-          boundingWidth={playbarWidth}
-          width={trimScrubberWidth}
-          trimStart={trimStart}
-          trimEnd={trimEnd}
-          onChange={(val: QuickTrimData)=>{
-            setTrimState((curr)=>({
-              ...curr,
-              trimStart: val.trimStartSeconds,
-              trimEnd: val.trimEndSeconds
-            }))
-          }}
-        />
+        {trimScrubberWidth > 0 && 
+          playbarWidth > 0 && 
+          maxDuration > 0 &&
+          <TrimScrbber
+            key={trimReset.toString()}
+            boundingWidth={playbarWidth}
+            width={trimScrubberWidth}
+            trimStart={trimStart}
+            trimDuration={trimDuration}
+            duration={maxDuration}
+            onChange={(val: QuickTrimData)=>{
+              console.log(val);
+              setTrimState((curr)=>({
+                ...curr,
+                trimStart: val.trimStartSeconds,
+                trimEnd: val.trimEndSeconds
+              }))
+              onSelect({
+                trimStartSeconds: val.trimStartSeconds,
+                trimEndSeconds: val.trimEndSeconds,
+              });
+            }}
+          />
+        }
         <div className="playcursor" style={{left: timeCursorOffset+"px"}}/>
       </div> {/* END of Playbar */}
 

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

@@ -90,7 +90,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,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,