Message: Do not render redundant canvas thumb

src/components/common/GifButton.tsx

@@ -1,6 +1,6 @@
 import type { FC } from '../../lib/teact/teact';
 import React, {
-  memo, useCallback, useEffect, useRef,
+  memo, useCallback, useEffect, useRef, useState,
 } from '../../lib/teact/teact';
 
 import type { ApiVideo } from '../../api/types';
@@ -51,12 +51,12 @@ const GifButton: FC<OwnProps> = ({
 
   const lang = useLang();
 
-  const hasThumbnail = Boolean(gif.thumbnail?.dataUri);
   const localMediaHash = `gif${gif.id}`;
   const isIntersecting = useIsIntersecting(ref, observeIntersection);
   const loadAndPlay = isIntersecting && !isDisabled;
   const previewBlobUrl = useMedia(`${localMediaHash}?size=m`, !loadAndPlay, ApiMediaFormat.BlobUrl);
-  const thumbRef = useCanvasBlur(gif.thumbnail?.dataUri, Boolean(previewBlobUrl));
+  const [withThumb] = useState(gif.thumbnail?.dataUri && !previewBlobUrl);
+  const thumbRef = useCanvasBlur(gif.thumbnail?.dataUri, !withThumb);
   const videoData = useMedia(localMediaHash, !loadAndPlay, ApiMediaFormat.BlobUrl);
   const shouldRenderVideo = Boolean(loadAndPlay && videoData);
   const { isBuffered, bufferingHandlers } = useBuffering(true);
@@ -157,7 +157,7 @@ const GifButton: FC<OwnProps> = ({
           <i className="icon-close gif-unsave-button-icon" />
         </Button>
       )}
-      {hasThumbnail && (
+      {withThumb && (
         <canvas
           ref={thumbRef}
           className="thumbnail"
@@ -187,7 +187,7 @@ const GifButton: FC<OwnProps> = ({
         />
       )}
       {shouldRenderSpinner && (
-        <Spinner color={previewBlobUrl || hasThumbnail ? 'white' : 'black'} />
+        <Spinner color={previewBlobUrl || withThumb ? 'white' : 'black'} />
       )}
       {onClick && contextMenuPosition !== undefined && (
         <Menu

src/components/middle/message/Photo.tsx

@@ -84,6 +84,8 @@ const Photo: FC<OwnProps> = ({
     mediaData, loadProgress,
   } = useMediaWithLoadProgress(getMessageMediaHash(message, size), !shouldLoad);
   const fullMediaData = localBlobUrl || mediaData;
+
+  const [withThumb] = useState(!fullMediaData);
   const thumbRef = useBlurredMediaThumbRef(message, fullMediaData);
 
   const {
@@ -163,11 +165,13 @@ const Photo: FC<OwnProps> = ({
       style={style}
       onClick={isUploading ? undefined : handleClick}
     >
-      <canvas
+      {withThumb && (
-        ref={thumbRef}
+        <canvas
-        className="thumbnail"
+          ref={thumbRef}
-        style={`width: ${width}px; height: ${height}px;${aspectRatio}`}
+          className="thumbnail"
-      />
+          style={`width: ${width}px; height: ${height}px;${aspectRatio}`}
+        />
+      )}
       <img
         src={fullMediaData}
         className={`full-media ${transitionClassNames}`}

src/components/middle/message/RoundVideo.tsx

@@ -74,6 +74,8 @@ const RoundVideo: FC<OwnProps> = ({
     ApiMediaFormat.BlobUrl,
     lastSyncTime,
   );
+
+  const [withThumb] = useState(!mediaData);
   const thumbRef = useBlurredMediaThumbRef(message, mediaData);
 
   const { isBuffered, bufferingHandlers } = useBuffering();
@@ -186,16 +188,17 @@ const RoundVideo: FC<OwnProps> = ({
       className="RoundVideo media-inner"
       onClick={handleClick}
     >
-      <div className="thumbnail-wrapper">
+      {withThumb && (
-        <canvas
+        <div className="thumbnail-wrapper">
-          ref={thumbRef}
+          <canvas
-          className="thumbnail"
+            ref={thumbRef}
-          style={`width: ${ROUND_VIDEO_DIMENSIONS_PX}px; height: ${ROUND_VIDEO_DIMENSIONS_PX}px`}
+            className="thumbnail"
-        />
+            style={`width: ${ROUND_VIDEO_DIMENSIONS_PX}px; height: ${ROUND_VIDEO_DIMENSIONS_PX}px`}
-      </div>
+          />
+        </div>
+      )}
       {mediaData && (
         <div className="video-wrapper">
-          {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
           <OptimizedVideo
             canPlay={shouldPlay}
             ref={playerRef}

src/components/middle/message/Video.tsx

@@ -93,7 +93,9 @@ const Video: FC<OwnProps> = ({
   );
   const fullMediaData = localBlobUrl || mediaData;
   const isInline = Boolean(isIntersecting && fullMediaData);
-  // Thumbnail is always rendered so we can only disable blur if we have preview
+
+  // Thumbnail is always rendered, so we can only disable blur if we have a preview
+  const [withThumb] = useState(!previewBlobUrl);
   const thumbRef = useBlurredMediaThumbRef(message, previewBlobUrl);
 
   const { loadProgress: downloadProgress } = useMediaWithLoadProgress(
@@ -159,18 +161,21 @@ const Video: FC<OwnProps> = ({
       style={style}
       onClick={isUploading ? undefined : handleClick}
     >
-      <canvas
+      {withThumb ? (
-        ref={thumbRef}
+        <canvas
-        className="thumbnail"
+          ref={thumbRef}
-        style={`width: ${width}px; height: ${height}px;${aspectRatio}`}
+          className="thumbnail"
-      />
+          style={`width: ${width}px; height: ${height}px;${aspectRatio}`}
-      <img
+        />
-        src={previewBlobUrl}
+      ) : (
-        className={buildClassName('thumbnail', previewClassNames)}
+        <img
-        style={`width: ${width}px; height: ${height}px;${aspectRatio}`}
+          src={previewBlobUrl}
-        alt=""
+          className={buildClassName('thumbnail', previewClassNames)}
-        draggable={!isProtected}
+          style={`width: ${width}px; height: ${height}px;${aspectRatio}`}
-      />
+          alt=""
+          draggable={!isProtected}
+        />
+      )}
       {isInline && (
         <OptimizedVideo
           ref={videoRef}