diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx index 2e59eed52e..b9b10a12bf 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx @@ -7,9 +7,9 @@ import React, { // PointerEvent, } from "react"; import { + faArrowsRepeat, faPlay, faPause, - // faGripDots, faVolume, faVolumeSlash, } from "@fortawesome/pro-solid-svg-icons" @@ -60,13 +60,17 @@ export default memo(function VideoQuickTrim({ const videoRef = useRef(null); const playbarRef = useRef(null); - const [{playbarWidth, timeCursorOffset}, setPlaybarState] = useState(initialPlaybarState); + const [{ + playbarWidth, + timeCursorOffset + }, setPlaybarState] = useState(initialPlaybarState); const [playpause, setPlaypause] = useState<'playing'|'paused'|'ended'>('paused'); const [isMuted, setIsMuted] = useState(false); + const [isRepeatOn, setIsRepatOn] = useState(true); const [{ canNotTrim, trimStart, - // trimEnd, + trimEnd, trimDuration, // isScrubbingTrim, }, setTrimState] = useState(initialTrimState); @@ -98,10 +102,14 @@ export default memo(function VideoQuickTrim({ }; node.ontimeupdate = ()=>{ + if(isRepeatOn && node.currentTime >= trimEnd){ + node.currentTime = 0; + } setPlaybarState((curr)=>({ ...curr, timeCursorOffset: (node.currentTime / node.duration) * (playbarWidth-8) })); + }; node.onplay = ()=>{ setPlaypause("playing");}; @@ -109,7 +117,7 @@ export default memo(function VideoQuickTrim({ node.onended = ()=>{setPlaypause("ended");}; } // else{} DOM node referenced by ref has been unmounted - }, [playbarWidth, onSelect]); //END videoRefCallback + }, [playbarWidth, onSelect, isRepeatOn, trimEnd]); //END videoRefCallback function handleWindowResize() { if(playbarRef.current !== null){ @@ -138,25 +146,30 @@ export default memo(function VideoQuickTrim({ const handleChangeTrimDuration = (selected: string) =>{ if(!canNotTrim){ + const newTrimEnd = trimStart+ trimOptions[selected]; setTrimState((curr)=>({ ...curr, trimDuration: trimOptions[selected], - trimEnd: trimStart+ trimOptions[selected], + trimEnd: newTrimEnd, })) onSelect({ trimStartSeconds: trimStart, - trimEndSeconds: trimStart+ trimOptions[selected], + trimEndSeconds: newTrimEnd, }); + if (isRepeatOn + && videoRef.current + && videoRef.current.currentTime > newTrimEnd + ){ + videoRef.current.currentTime = trimStart; + } } } const handlePlaypause = ()=>{ if (playpause === 'paused' || playpause === 'ended'){ videoRef.current?.play(); - setPlaypause('playing'); }else{ videoRef.current?.pause(); - setPlaypause('paused'); } } @@ -209,13 +222,19 @@ export default memo(function VideoQuickTrim({ variant="secondary" onClick={handlePlaypause} /> +