diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/withScrubbing.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/withScrubbing.tsx index 7e30152aab..4ccd831953 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/withScrubbing.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/withScrubbing.tsx @@ -1,8 +1,8 @@ import React,{ + useRef, useState, useLayoutEffect, useCallback, - PointerEvent, } from 'react'; export interface withScrubbingPropsI { @@ -35,6 +35,7 @@ export const withScrubbing =

(Component: React.Co ...rest }: withScrubbingPropsI) => { console.log('withScrubbing reRender'); + const refEl = useRef(null); // const initialLeftOffset = // initialLeftOffsetPercent > 0 ? boundingWidth * initialLeftOffsetPercent // : initialLeftOffsetProps; @@ -49,16 +50,18 @@ export const withScrubbing =

(Component: React.Co pointerStartPos: -1 // negative denotes pointer not engaged }); - function handleScrubStart (e: PointerEvent){ - // e.persist(); - e.preventDefault(); - e.stopPropagation(); - console.log(`start: ${pointerStartPos} -> ${e.clientX}` ); - setStates((curr)=>({ - ...curr, - pointerStartPos: e.clientX - })); - } + 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(); @@ -97,18 +100,21 @@ export const withScrubbing =

(Component: React.Co useLayoutEffect(() => { if(!(window as any)[`${key}listenders`]){ (window as any)[`${key}listenders`] = true; - window.addEventListener("pointerup", handleScrubEnd); - window.addEventListener("pointermove", handleScrubMove); + window.addEventListener("mousedown", handleScrubStart); + window.addEventListener("mouseup", handleScrubEnd); + window.addEventListener("mousemove", handleScrubMove); return () => { (window as any)[`${key}listenders`] = false; - window.removeEventListener("pointerup", handleScrubEnd); - window.removeEventListener("pointermove", handleScrubMove); + window.removeEventListener("mousedown", handleScrubStart); + window.removeEventListener("mouseup", handleScrubEnd); + window.removeEventListener("mousemove", handleScrubMove); }; } }, [handleScrubEnd, handleScrubMove, key]); return(

(Component: React.Co cursor: pointerStartPos >=0 ? 'grabbing': 'grab', ...styleOverride }} - onPointerDown={handleScrubStart} >