diff --git a/src/components/middle/message/RoundVideo.scss b/src/components/middle/message/RoundVideo.scss index 20cb9cb84..aae3ddbae 100644 --- a/src/components/middle/message/RoundVideo.scss +++ b/src/components/middle/message/RoundVideo.scss @@ -35,4 +35,10 @@ stroke-opacity: .35; stroke-linecap: round; } + + video::-internal-media-controls-cast-button, + video::-webkit-media-controls, + video::-webkit-media-controls-start-playback-button { + display: none; + } } diff --git a/src/components/middle/message/RoundVideo.tsx b/src/components/middle/message/RoundVideo.tsx index 3106526e3..f85ee9a79 100644 --- a/src/components/middle/message/RoundVideo.tsx +++ b/src/components/middle/message/RoundVideo.tsx @@ -35,6 +35,18 @@ type OwnProps = { lastSyncTime?: number; }; +let currentOnRelease: NoneToVoidFunction; + +function createCapture(onRelease: NoneToVoidFunction) { + return () => { + if (currentOnRelease) { + currentOnRelease(); + } + + currentOnRelease = onRelease; + }; +} + const RoundVideo: FC = ({ message, observeIntersection, @@ -103,6 +115,18 @@ const RoundVideo: FC = ({ const shouldPlay = Boolean(mediaData && isIntersecting); + const stopPlaying = () => { + setIsActivated(false); + setProgress(0); + safePlay(playerRef.current!); + + requestAnimationFrame(() => { + playingProgressRef.current!.innerHTML = ''; + }); + }; + + const capturePlaying = createCapture(stopPlaying); + useEffect(() => { if (!playerRef.current) { return; @@ -136,8 +160,9 @@ const RoundVideo: FC = ({ } else { playerEl.currentTime = 0; setIsActivated(true); + capturePlaying(); } - }, [isActivated, mediaData]); + }, [capturePlaying, isActivated, mediaData]); const handleTimeUpdate = useCallback((e: React.UIEvent) => { const playerEl = e.currentTarget; @@ -145,16 +170,6 @@ const RoundVideo: FC = ({ setProgress(playerEl.currentTime / playerEl.duration); }, []); - const handleEnded = useCallback(() => { - setIsActivated(false); - setProgress(0); - safePlay(playerRef.current!); - - requestAnimationFrame(() => { - playingProgressRef.current!.innerHTML = ''; - }); - }, []); - const videoClassName = buildClassName('full-media', transitionClassNames); return ( @@ -187,7 +202,7 @@ const RoundVideo: FC = ({ loop={!isActivated} playsInline poster={thumbDataUri} - onEnded={isActivated ? handleEnded : undefined} + onEnded={isActivated ? stopPlaying : undefined} // eslint-disable-next-line react/jsx-props-no-spreading {...bufferingHandlers} onTimeUpdate={isActivated ? handleTimeUpdate : undefined}