diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/ProgressBar.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/ProgressBar.tsx index 37ffffd3be..1e32249c07 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/ProgressBar.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/ProgressBar.tsx @@ -8,7 +8,7 @@ import { Action, ACTION_TYPES, } from '../reducer'; -import { QuickTrimData } from '../types'; +import { QuickTrimData } from '../utilities'; import { TrimScrubber } from './TrimScrubber'; export const ProgressBar = memo(({ @@ -46,9 +46,9 @@ export const ProgressBar = memo(({ }else{ // console.log(node); } - }, []); + }, [dispatchCompState]); - function handleWindowResize() { + const handleWindowResize = useCallback(()=> { if (playbarRef.current !== null && readyToMount){ dispatchCompState({ type: ACTION_TYPES.SET_PLAYBAR_LAYOUT, @@ -57,13 +57,13 @@ export const ProgressBar = memo(({ } }); } - } + },[dispatchCompState, readyToMount]); useLayoutEffect(() => { window.addEventListener("resize", handleWindowResize); return () => { window.removeEventListener("resize", handleWindowResize); }; - }, []); + }, [handleWindowResize]); if(readyToMount){ // console.log('progress bar rendering'); @@ -72,18 +72,20 @@ export const ProgressBar = memo(({
{ - console.log(val); - // setTrimState((curr)=>({ - // ...curr, - // trimStart: val.trimStartSeconds, - // trimEnd: val.trimEndSeconds - // })) + + dispatchCompState({ + type: ACTION_TYPES.MOVE_TRIM, + payload: { + trimStartSeconds: val.trimStartSeconds, + trimEndSeconds: val.trimEndSeconds + } + }); // onSelect({ // trimStartSeconds: val.trimStartSeconds, // trimEndSeconds: val.trimEndSeconds, diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/TrimScrubber.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/TrimScrubber.tsx index 96fb661f59..714e778230 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/TrimScrubber.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/TrimScrubber.tsx @@ -1,51 +1,50 @@ import React, { memo, - useMemo, useCallback } from 'react'; import { faGripDots } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { QuickTrimData } from '../types'; +import { QuickTrimData } from '../utilities'; import {withScrubbing, withScrubbingPropsI} from './withScrubbing'; interface TrimScrubberPropsI extends withScrubbingPropsI { - trimStart:number; + trimStartSeconds:number; trimDuration: number; - duration: number; + videoDuration: number; onChange:(val:QuickTrimData)=>void } export const TrimScrubber = memo(({ - trimStart, + trimStartSeconds, trimDuration, - duration, + videoDuration, onChange, ...rest }:TrimScrubberPropsI)=>{ - // console.log(`TrimsSrubber reRender!! ${Date.now()}`); - const TrimScrubberWithScrubbing = - useMemo(()=>withScrubbing(() => { - return( -
- -
- ); - }), []); + + const TrimScrubberWithScrubbing = withScrubbing(() => { + return( +
+ +
+ ); + }); const handleOnChange = useCallback((posPercent:number)=>{ + console.log(`handle on moving trim scrubber, pos%=${posPercent}`); onChange({ - trimStartSeconds: duration * posPercent, - trimEndSeconds: duration * posPercent + trimDuration, + trimStartSeconds: videoDuration * posPercent, + trimEndSeconds: videoDuration * posPercent + trimDuration, }); - }, [onChange, duration, trimDuration]); + }, [onChange, videoDuration, trimDuration]); return ( diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx index 7fbaec770d..7bc3925761 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx @@ -1,8 +1,9 @@ import React,{ + // useEffect, useRef, useState, useLayoutEffect, - useCallback, + // useCallback, } from 'react'; export interface withScrubbingPropsI { @@ -34,14 +35,17 @@ export const withScrubbing =

(Component: React.Co onScrubChanges, ...rest }: withScrubbingPropsI) => { - console.log(`withScrubbing reRender!! ${Date.now()}`); + // console.log(`withScrubbing reRender!! ${Date.now()}`); const refEl = useRef(null); + const refListener = useRef(Date.now()); + const initialLeftOffset = initialLeftOffsetPercent > 0 ? boundingWidth * initialLeftOffsetPercent : initialLeftOffsetProps; // const initialLeftOffset = 0; const [{ - key, currLeftOffset, pointerStartPos + // key, + currLeftOffset, pointerStartPos, // prevLeftOffset, }, setStates] = useState({ key: Date.now(), @@ -50,67 +54,64 @@ export const withScrubbing =

(Component: React.Co pointerStartPos: -1 // negative denotes pointer not engaged }); - const handleScrubStart = useCallback( (e: MouseEvent) => { - if(refEl.current){ - console.log(`start: ${e.clientX}` ); - if(refEl.current.contains(e.target as Node)){ - setStates((curr)=>({ - ...curr, - pointerStartPos: e.clientX - })); - return true; - } - } - },[]); - const handleScrubEnd = useCallback((e: MouseEvent)=>{ - // e.persist(); - e.preventDefault(); - e.stopPropagation(); - setStates((curr)=>({ - ...curr, - pointerStartPos: -1, - prevLeftOffset: curr.currLeftOffset, - })); - // if (onScrubEnds) onScrubEnds(currLeftOffset/boundingWidth); - }, []); - const handleScrubMove = useCallback ((e: MouseEvent)=>{ - // e.persist(); - e.preventDefault(); - e.stopPropagation(); - setStates((curr)=>{ - if(curr.pointerStartPos >= 0 && curr.pointerStartPos!==null){ - let newLeftOffset = curr.prevLeftOffset + e.clientX - curr.pointerStartPos; - if (newLeftOffset + scrubberWidth > boundingWidth) { - newLeftOffset = boundingWidth - scrubberWidth; - }else if(newLeftOffset < 0) { - newLeftOffset = 0; - } - if(newLeftOffset !== curr.currLeftOffset){ - return{ + useLayoutEffect(() => { + function handleScrubStart (e: MouseEvent) { + if(refEl.current){ + if(refEl.current.contains(e.target as Node)){ + setStates((curr)=>({ ...curr, - currLeftOffset: newLeftOffset + pointerStartPos: e.clientX + })); + return true; + } + } + }; + function handleScrubEnd (e: MouseEvent){ + e.preventDefault(); + e.stopPropagation(); + setStates((curr)=>({ + ...curr, + pointerStartPos: -1, + prevLeftOffset: curr.currLeftOffset, + })); + }; + function handleScrubMove (e: MouseEvent){ + e.preventDefault(); + e.stopPropagation(); + setStates((curr)=>{ + if(curr.pointerStartPos >= 0 && curr.pointerStartPos!==null){ + let newLeftOffset = curr.prevLeftOffset + e.clientX - curr.pointerStartPos; + if (newLeftOffset + scrubberWidth > boundingWidth) { + newLeftOffset = boundingWidth - scrubberWidth; + }else if(newLeftOffset < 0) { + newLeftOffset = 0; + } + if(newLeftOffset !== curr.currLeftOffset){ + return{ + ...curr, + currLeftOffset: newLeftOffset + } } } - } - return curr; - }); - // if (onScrubChanges) onScrubChanges(newLeftOffset/boundingWidth); - },[scrubberWidth, boundingWidth]); - - useLayoutEffect(() => { - if(!(window as any)[`listener-id-${key}`]){ - (window as any)[`listender-id-${key}`] = true; + return curr; + }); + }; + if(!(window as any)[`listener-id-${refListener}`]){ + (window as any)[`listender-id-${refListener}`] = true; window.addEventListener("mousedown", handleScrubStart); window.addEventListener("mouseup", handleScrubEnd); window.addEventListener("mousemove", handleScrubMove); return () => { - (window as any)[`${key}listeners`] = false; + (window as any)[`listener-id-${refListener}`] = false; window.removeEventListener("mousedown", handleScrubStart); window.removeEventListener("mouseup", handleScrubEnd); window.removeEventListener("mousemove", handleScrubMove); }; } - }, [handleScrubStart, handleScrubEnd, handleScrubMove, key]); + }, []); + // useEffect(()=>{ + // if(onScrubEnds)onScrubEnds(prevLeftOffset/boundingWidth); + // },[prevLeftOffset, boundingWidth, onScrubEnds]); return(

= minVideoDuration){ + if(action.payload.videoDuration >= MIN_VID_DURATION){ return{ ...state, status: STATE_STATUSES.VIDEO_METADATA_LOADED, @@ -119,7 +123,7 @@ export function reducer(state: State, action: Action): State { playpause: PLAYPUASE_STATES.READY, playbarWidth: newWidth, scrubberWidth: newWidth * (state.trimDuration / state.videoDuration), - timeCursorOffset: (newWidth-timeCursorWidth)*(prevOffset/ state.videoDuration) + timeCursorOffset: (newWidth-TIME_CURSOR_WIDTH)*(prevOffset/ state.videoDuration) }; }else{ return{ @@ -164,6 +168,13 @@ export function reducer(state: State, action: Action): State { } } } + case ACTION_TYPES.MOVE_TRIM:{ + return{ + ...state, + trimStartSeconds: action.payload.trimStartSeconds, + trimEndSeconds: action.payload.trimEndSeconds, + } + } case ACTION_TYPES.MOVE_TIMECURSOR:{ return { ...state, diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx deleted file mode 100644 index ad93df2aff..0000000000 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx +++ /dev/null @@ -1,20 +0,0 @@ -//For integration into other components -export type QuickTrimData = { - trimStartSeconds: number; - trimEndSeconds: number; -} - -// INTERNALS -export type TrimStates = { - canNotTrim: boolean; - trimReset: number; - trimDuration: number; - trimStart: number; - trimEnd: number; - maxDuration: number; -} - -export type PlaybarStates = { - playbarWidth: number; - timeCursorOffset: number; -} diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/utilities.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/utilities.tsx index 25593c7708..62f1f741fd 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/utilities.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/utilities.tsx @@ -1,4 +1,7 @@ //For integration into other components +export const TIME_CURSOR_WIDTH = 8; +export const MIN_VID_DURATION = 3; + export type QuickTrimData = { trimStartSeconds: number; trimEndSeconds: number; diff --git a/packages/fakeyou.com/src/v2/view/pages/components_library/sandbox.tsx b/packages/fakeyou.com/src/v2/view/pages/components_library/sandbox.tsx index f979b431bb..a7600a9c6e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/components_library/sandbox.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/components_library/sandbox.tsx @@ -23,13 +23,13 @@ export default function ComponentSandbox( />

-
+ {/*
-
+
*/} ); } \ No newline at end of file