diff --git a/src/components/middle/message/Video.tsx b/src/components/middle/message/Video.tsx index 9edb3a3d6..6f35fa64f 100644 --- a/src/components/middle/message/Video.tsx +++ b/src/components/middle/message/Video.tsx @@ -123,20 +123,22 @@ const Video = ({ const hasThumb = Boolean(thumbDataUri); const withBlurredBackground = Boolean(forcedWidth); + const isInline = fullMediaData && wasIntersectedRef.current; + + const isUnsupported = useUnsupportedMedia(videoRef, true, !isInline); + const previewMediaHash = !isPaidPreview ? getVideoMediaHash(video, 'preview') : undefined; const [isPreviewPreloaded] = useState(Boolean(previewMediaHash && mediaLoader.getFromMemory(previewMediaHash))); const canLoadPreview = isIntersectingForLoading; const previewBlobUrl = useMedia(previewMediaHash, !canLoadPreview); - const previewRef = useMediaTransition((hasThumb || previewBlobUrl) && !isPlayerReady); + const shouldHidePreview = isPlayerReady && !isUnsupported; + const previewRef = useMediaTransition((hasThumb || previewBlobUrl) && !shouldHidePreview); const noThumb = Boolean(!hasThumb || previewBlobUrl || isPlayerReady); const thumbRef = useBlurredMediaThumbRef(video, noThumb); useMediaTransition(!noThumb, { ref: thumbRef }); const blurredBackgroundRef = useBlurredMediaThumbRef(video, !withBlurredBackground); - const isInline = fullMediaData && wasIntersectedRef.current; - - const isUnsupported = useUnsupportedMedia(videoRef, true, !isInline); const { loadProgress: downloadProgress } = useMediaWithLoadProgress( !isPaidPreview ? getVideoMediaHash(video, 'download') : undefined, !isDownloading, @@ -169,7 +171,8 @@ const Video = ({ setPlayProgress(Math.max(0, e.currentTarget.currentTime - 1)); }); - const duration = (Number.isFinite(videoRef.current?.duration) ? videoRef.current?.duration : video.duration) || 0; + const duration = (Number.isFinite(videoRef.current?.duration) && !isUnsupported + ? videoRef.current?.duration : video.duration) || 0; const { width, height,