From 9448ba0a851938cc08c3e198593720d10f7deb76 Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 28 Feb 2024 23:35:16 -0500 Subject: [PATCH 1/4] fixing to use better events, separate trim scrubber to its own component --- .../common/VideoQuickTrim/TrimScrubber.tsx | 49 ++++++++++++++++ .../common/VideoQuickTrim/VideoQuickTrim.tsx | 58 ++++++------------- .../common/VideoQuickTrim/styles.scss | 2 +- .../components/pageVSTApp/pageVSTApp.tsx | 42 ++------------ 4 files changed, 72 insertions(+), 79 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx new file mode 100644 index 0000000000..dc900305eb --- /dev/null +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx @@ -0,0 +1,49 @@ +import React, { + useRef, + // useState +} from 'react'; +import { + faGripDots +} from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +export default function TrimScrubber({ + width +}:{ + width:number +}){ + const ref = useRef(null); + return( +
{ + // 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)=>{ + // if(trimZoneRef.current && playbarRef.current && isScrubbingTrim){ + // // console.log(fractionToPercentage( + // // (e.clientX - trimZoneRef.current.getBoundingClientRect().left) / (playbarRef.current.getBoundingClientRect().width) + // // ) + "%"); + // } + // }} + > + +
+ ); +} diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx index 343ee9fa50..2e59eed52e 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx @@ -4,12 +4,12 @@ import React, { useLayoutEffect, useState, useRef, - PointerEvent, + // PointerEvent, } from "react"; import { faPlay, faPause, - faGripDots, + // faGripDots, faVolume, faVolumeSlash, } from "@fortawesome/pro-solid-svg-icons" @@ -23,6 +23,7 @@ import { VideoFakeyouProps } from "../VideoFakeyou/VideoFakeyou"; import { QuickTrimData, TrimStates, PlaybarStates } from "./types"; import { formatSecondsToHHMMSSCS } from "./helpers"; +import TrimScrbber from "./TrimScrubber"; import './styles.scss' interface VideoQuickTrimProps extends VideoFakeyouProps{ @@ -58,10 +59,9 @@ export default memo(function VideoQuickTrim({ const videoRef = useRef(null); const playbarRef = useRef(null); - const trimZoneRef = useRef(null); const [{playbarWidth, timeCursorOffset}, setPlaybarState] = useState(initialPlaybarState); - const [playpause, setPlaypause] = useState<'playing'|'paused'|'stopped'>('paused'); + const [playpause, setPlaypause] = useState<'playing'|'paused'|'ended'>('paused'); const [isMuted, setIsMuted] = useState(false); const [{ canNotTrim, @@ -74,6 +74,7 @@ export default memo(function VideoQuickTrim({ const videoRefCallback = useCallback(node => { + console.log("videoRefCallback"); if (node !== null) { // DOM node referenced by ref has changed and exists videoRef.current = node; @@ -87,19 +88,26 @@ export default memo(function VideoQuickTrim({ trimEnd: 3, maxDuration: node.duration })); + //TODO: this sbould be set in USEEFFECT + //IFF USEEFFECT starts working again onSelect({ trimStartSeconds: 0, trimEndSeconds: 3, }) } - } + }; - node.ontimeupdate = (e: PointerEvent)=>{ + node.ontimeupdate = ()=>{ setPlaybarState((curr)=>({ ...curr, timeCursorOffset: (node.currentTime / node.duration) * (playbarWidth-8) })); - } + }; + + node.onplay = ()=>{ setPlaypause("playing");}; + node.onpause = ()=>{setPlaypause("paused");}; + node.onended = ()=>{setPlaypause("ended");}; + } // else{} DOM node referenced by ref has been unmounted }, [playbarWidth, onSelect]); //END videoRefCallback @@ -143,7 +151,7 @@ export default memo(function VideoQuickTrim({ } const handlePlaypause = ()=>{ - if (playpause === 'paused' || playpause === 'stopped'){ + if (playpause === 'paused' || playpause === 'ended'){ videoRef.current?.play(); setPlaypause('playing'); }else{ @@ -152,7 +160,7 @@ export default memo(function VideoQuickTrim({ } } - const trimZoneWidth = videoRef.current + const trimScrubberWidth = videoRef.current ? trimDuration > 0 && trimDuration < videoRef.current.duration ? (trimDuration / videoRef.current.duration * 100) : 100 @@ -189,37 +197,7 @@ export default memo(function VideoQuickTrim({ {/* END of Video Wrapper */}
-
{ - // 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)=>{ - // if(trimZoneRef.current && playbarRef.current && isScrubbingTrim){ - // // console.log(fractionToPercentage( - // // (e.clientX - trimZoneRef.current.getBoundingClientRect().left) / (playbarRef.current.getBoundingClientRect().width) - // // ) + "%"); - // } - // }} - > - -
+
{/* END of Playbar */} diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss index 9c30de85ca..8be5463f5f 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss @@ -73,7 +73,7 @@ $playbar-height: 2rem; background-color: $panel-inner-border; border-radius: 0 0 0.5rem 0.5rem; } - .trimzone{ + .trim-scrubber{ position: absolute; top:-1rem; height: 3rem; diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx index 2f5b59eec0..8b0135d737 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx @@ -1,4 +1,7 @@ -import React, { useRef, useState } from "react"; +import React, { + // useRef, + useState, +} from "react"; import { NavLink } from 'react-router-dom'; import { useParams, useHistory } from "react-router-dom"; @@ -14,7 +17,6 @@ import EnqueueVideoStyleTransfer from "@storyteller/components/src/api/video_sty import { Action, State } from "../../reducer"; -// import { TableOfKeyValues } from "../../commons"; import { initialValues } from "./defaultValues"; import { mapRequest, @@ -33,7 +35,6 @@ export default function PageVSTApp({ parentPath: string; dispatchPageState: (action: Action) => void; }) { - const videoRef = useRef(null); const { mediaToken } = useParams(); const [vstValues, setVstValues] = useState({ @@ -41,34 +42,6 @@ export default function PageVSTApp({ fileToken: pageState.mediaFileToken || mediaToken, }); - - if(videoRef?.current){ - if(debug) console.log("set-up video element listeners"); - const ve = videoRef.current - ve.onloadedmetadata = () =>{ - const newValues : { - width?: number; - height?: number; - maxDuration?: number; - } = {}; - // if (ve.videoWidth && ve.videoHeight) { - // const aspectRatio = ve.videoWidth/ve.videoHeight - // if (aspectRatio > 1) newValues.width = 960; - // else if (aspectRatio < 1) newValues.height = 960 - // else if (debug) console.log(`aspectRaio: ${aspectRatio}`); - // } - if(ve.duration){ - newValues.maxDuration = ve.duration - // newValues.framesCap = newValues.maxFrames; - } - setVstValues((curr)=>({ - ...curr, - ...newValues, - })) - } - } - - const handleOnChange = (val:{[key: string]: number|string|boolean|undefined}) => { setVstValues((curr)=>({...curr, ...val})); } @@ -119,13 +92,6 @@ export default function PageVSTApp({ }} />
- {/*
-
-
-
*/}