From 758a50f9ee10c9dfb6708683b1a9cd309a4aa3da Mon Sep 17 00:00:00 2001 From: wil Date: Sun, 17 Mar 2024 16:42:24 -0400 Subject: [PATCH] scrubbing works completely when playing video --- .../components/ScrubberBar/TimeCursor.tsx | 28 ++++++++++++-- .../components/ScrubberBar/withScrubbing.tsx | 38 ++++++++++--------- .../components/common/VideoPlayer/styles.scss | 9 +++-- 3 files changed, 50 insertions(+), 25 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/TimeCursor.tsx b/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/TimeCursor.tsx index 60e864e783..bc141045ed 100644 --- a/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/TimeCursor.tsx +++ b/packages/fakeyou.com/src/components/common/VideoPlayer/components/ScrubberBar/TimeCursor.tsx @@ -1,13 +1,14 @@ import React, { - useContext, useCallback, - useState, + useContext, useEffect, useLayoutEffect, + useState, + useRef, } from 'react'; -import { withScrubbing, withScrubbingPropsI } from './withScrubbing'; import { VideoElementContext } from '../../contexts'; +import { withScrubbing, withScrubbingPropsI } from './withScrubbing'; interface TimeCursorPropsI { debug?: boolean @@ -23,6 +24,8 @@ export const TimeCursor = ({ const videoElement = useContext(VideoElementContext); const [timeCursorOffset, setTimeCursorOffset] = useState(0); const [boundingWidth, setBoundingWidth] = useState(videoElement?.getBoundingClientRect().width || 0); + const isLockedForScrubbing = useRef(false); + const wasPlaying = useRef(false); const PlayCursorWithScrubbing = withScrubbing(()=>{ return( @@ -31,7 +34,7 @@ export const TimeCursor = ({ }); useEffect(()=>{ const handleTimeCursorPosition = ()=>{ - if(videoElement!==null){ + if(videoElement!==null && !isLockedForScrubbing.current){ const newOffset = (videoElement.currentTime / videoElement.duration) * (boundingWidth); setTimeCursorOffset(newOffset); @@ -57,17 +60,34 @@ export const TimeCursor = ({ }; }, [handleWindowResize]) + const handleOnScrubStart = () => { + isLockedForScrubbing.current = true; + if(videoElement!==null) { + if (videoElement.paused) wasPlaying.current = false; + else { + wasPlaying.current = true; + videoElement.pause(); + } + } + } + const handleOnScrubEnd = useCallback( (newPos: number)=>{ + isLockedForScrubbing.current = false; if(videoElement !== null){ const newTime = newPos / boundingWidth * videoElement.duration; videoElement.currentTime = newTime; + if(wasPlaying.current === true){ + videoElement.play(); + } } },[videoElement, boundingWidth]); return( void; @@ -28,19 +29,20 @@ export const withScrubbing =

(Component: React.Co debug: propsDebug = false, boundingWidth, scrubberWidth, + hitboxPadding = 0, scrubPosition: propsLeftOffset = 0, styleOverride = {}, onScrubStart, onScrubEnd, ...rest }: withScrubbingPropsI) => { - // const debug = false || propsDebug; + const debug = true || propsDebug; const refEl = useRef(null); - // const refListener = useRef(Date.now()); + const refListener = useRef(Date.now()); - // if (debug) console.log(`${refListener.current} withSCRUBBING reRENDERING!! `); + if (debug) console.log(`${refListener.current} withSCRUBBING reRENDERING!! `); const [{ currLeftOffset, pointerStartPos, @@ -53,8 +55,8 @@ export const withScrubbing =

(Component: React.Co useLayoutEffect(() => { // if (debug) console.log(`withSCRUBBING useLAYOUTeffect!! `); - function handleScrubStart (e: MouseEvent) { - // if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_START!! `); + function handleScrubStart (e: PointerEvent) { + if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_START!! `); e.preventDefault(); e.stopPropagation(); if(refEl.current){ @@ -63,14 +65,15 @@ export const withScrubbing =

(Component: React.Co ...curr, pointerStartPos: e.clientX })); - + + if(onScrubStart) onScrubStart(); window.addEventListener("pointermove", handleScrubMove); return true; } } }; - function handleScrubEnd (e: MouseEvent){ - // if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_END!! `); + function handleScrubEnd (e: PointerEvent){ + if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_END!! `); e.preventDefault(); e.stopPropagation(); @@ -82,8 +85,8 @@ export const withScrubbing =

(Component: React.Co setBySelf: Date.now(), })); }; - function handleScrubMove (e: MouseEvent){ - // if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_MOVE!! `); + function handleScrubMove (e: PointerEvent){ + if (debug) console.log(`${refListener.current} withSCRUBBING SCRUB_MOVE!! `); e.preventDefault(); e.stopPropagation(); @@ -119,12 +122,12 @@ export const withScrubbing =

(Component: React.Co // } }, [scrubberWidth, boundingWidth]); - useEffect(()=>{ - // if (debug) console.log(`${refListener.current} withSCRUBBING useEFFECT for scrubStart!! `); - if(onScrubStart && pointerStartPos > 0){ - onScrubStart(); - } - },[pointerStartPos, onScrubStart]); + // useEffect(()=>{ + // // if (debug) console.log(`${refListener.current} withSCRUBBING useEFFECT for scrubStart!! `); + // if(onScrubStart && pointerStartPos > 0){ + // onScrubStart(); + // } + // },[pointerStartPos, onScrubStart]); useEffect(()=>{ // if (debug) console.log(`${refListener.current} withSCRUBBING useEFFECT for scrubEend!! `); @@ -159,7 +162,8 @@ export const withScrubbing =

(Component: React.Co position: 'absolute', top:0, width: scrubberWidth + 'px', - left: currLeftOffset + 'px', + padding: hitboxPadding + 'px', + left: (currLeftOffset - hitboxPadding) + 'px', cursor: pointerStartPos >=0 ? 'grabbing': 'grab', ...styleOverride }} diff --git a/packages/fakeyou.com/src/components/common/VideoPlayer/styles.scss b/packages/fakeyou.com/src/components/common/VideoPlayer/styles.scss index 43009552e2..57088523c5 100644 --- a/packages/fakeyou.com/src/components/common/VideoPlayer/styles.scss +++ b/packages/fakeyou.com/src/components/common/VideoPlayer/styles.scss @@ -105,10 +105,10 @@ $scrubber-bar-height: 2rem; } - .with-scrubber-wrapper{ - box-shadow: 1px 1px 4px 0px rgba(0,0,0,1); - // transition: 0.5s; - } + // .with-scrubber-wrapper{ + + // // transition: 0.5s; + // } .trim-scrubber{ height: 3rem; background-color: #e66462; @@ -116,6 +116,7 @@ $scrubber-bar-height: 2rem; outline: 0.125rem $white solid; border-top: 1rem $white solid; border-radius: 0.25rem 0.25rem 0.125rem 0.125rem; + display: flex;