diff --git a/src/components/mediaViewer/VideoPlayer.tsx b/src/components/mediaViewer/VideoPlayer.tsx index bdd5961fa..03662c34e 100644 --- a/src/components/mediaViewer/VideoPlayer.tsx +++ b/src/components/mediaViewer/VideoPlayer.tsx @@ -323,7 +323,6 @@ const VideoPlayer: FC = ({ diff --git a/src/components/middle/message/Video.tsx b/src/components/middle/message/Video.tsx index 1b4c9e7db..9b55d0034 100644 --- a/src/components/middle/message/Video.tsx +++ b/src/components/middle/message/Video.tsx @@ -176,7 +176,7 @@ const Video = ({ : calculateVideoDimensions(video, Boolean(isOwn), asForwarded, isInWebPage, noAvatars, isMobile) ); - const handleClick = useLastCallback((e: React.MouseEvent) => { + const handleClick = useLastCallback((e: React.MouseEvent, isFromSpinner?: boolean) => { if (isUploading) { onCancelUpload?.(clickArg!); return; @@ -201,9 +201,21 @@ const Video = ({ return; } + if (isFromSpinner && shouldLoad && !isPlayerReady && !isFullMediaPreloaded) { + setIsLoadAllowed(false); + e.stopPropagation(); + return; + } + onClick?.(clickArg!, e); }); + const handleClickOnSpinner = useLastCallback( + (e: React.MouseEvent) => { + handleClick(e, true); + }, + ); + const componentClassName = buildClassName( 'media-inner dark', !isUploading && 'interactive', @@ -220,7 +232,7 @@ const Video = ({ id={id} className={componentClassName} style={style} - onClick={isUploading ? undefined : handleClick} + onClick={isUploading ? undefined : (e) => handleClick(e)} > {withBlurredBackground && ( @@ -265,7 +277,10 @@ const Video = ({ /> {shouldRenderSpinner && (
- +
)} {!isLoadAllowed && !fullMediaData && (