diff --git a/src/components/DefaultVideo/DefaultVideo.tsx b/src/components/DefaultVideo/DefaultVideo.tsx index 7145045ee..b4a86bc94 100644 --- a/src/components/DefaultVideo/DefaultVideo.tsx +++ b/src/components/DefaultVideo/DefaultVideo.tsx @@ -21,7 +21,13 @@ interface DefaultVideoProps { export const DefaultVideo = React.forwardRef( (props, ref) => { const {video, qa, customBarControlsClassName} = props; - const {controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd} = video; + const { + controls, + customControlsOptions, + muted: initiallyMuted = true, + onVideoEnd, + loop, + } = video; const { muteButtonShown, positioning, @@ -45,22 +51,6 @@ export const DefaultVideo = React.forwardRef { - const videoElement = videoRef.current; - if (!videoElement || !onVideoEnd) { - return undefined; - } - - const handleVideoEnd = () => { - onVideoEnd?.(); - }; - - videoElement.addEventListener('ended', handleVideoEnd); - return () => { - videoElement.removeEventListener('ended', handleVideoEnd); - }; - }, [videoRef, onVideoEnd]); - // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389 React.useEffect(() => { const videoElement = videoRef.current; @@ -81,6 +71,7 @@ export const DefaultVideo = React.forwardRef { setIsMuted((value) => !value); }, []); @@ -91,6 +82,25 @@ export const DefaultVideo = React.forwardRef { + const videoElement = videoRef.current; + if (!videoElement) { + return; + } + + if (loop) { + const {start = 0, end = videoElement.duration} = + typeof loop === 'boolean' ? {} : loop; + + if (videoElement.currentTime >= end) { + videoElement.currentTime = start; + videoElement.play(); + } + } + + onVideoEnd?.(); + }, [loop, onVideoEnd]); + return (