From 5834f250f82495362e31b54711b8e1ffbb1d53b0 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 19 Jul 2021 03:34:20 +0300
Subject: [PATCH] [Perf] Video: Do not render blurred canvas if preview is
 present

---
 src/components/middle/message/RoundVideo.tsx |  2 --
 src/components/middle/message/Video.tsx      | 36 ++++++++------------
 2 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/src/components/middle/message/RoundVideo.tsx b/src/components/middle/message/RoundVideo.tsx
index 2216c7a54..36784840d 100644
--- a/src/components/middle/message/RoundVideo.tsx
+++ b/src/components/middle/message/RoundVideo.tsx
@@ -142,9 +142,7 @@ const RoundVideo: FC<OwnProps> = ({
   }, [shouldPlay]);
 
   useHeavyAnimationCheckForVideo(playerRef, shouldPlay);
-
   usePauseOnInactive(playerRef, Boolean(mediaData));
-
   useVideoCleanup(playerRef, [mediaData]);
 
   const handleClick = useCallback(() => {
diff --git a/src/components/middle/message/Video.tsx b/src/components/middle/message/Video.tsx
index 544ce0405..b34ec521d 100644
--- a/src/components/middle/message/Video.tsx
+++ b/src/components/middle/message/Video.tsx
@@ -78,16 +78,16 @@ const Video: FC<OwnProps> = ({
     getMessageMediaFormat(message, 'pictogram'),
     lastSyncTime,
   );
-  const thumbRef = useBlurredMediaThumbRef(message);
   const { mediaData, downloadProgress } = useMediaWithDownloadProgress(
     getMessageMediaHash(message, 'inline'),
     !shouldDownload,
     getMessageMediaFormat(message, 'inline'),
     lastSyncTime,
   );
-
   const fullMediaData = localBlobUrl || mediaData;
   const isInline = Boolean(isIntersecting && fullMediaData);
+  // Thumbnail is always rendered so we can only disable blur if we have preview
+  const thumbRef = useBlurredMediaThumbRef(message, previewBlobUrl);
 
   const { isBuffered, bufferingHandlers } = useBuffering(!shouldAutoLoad);
   const { isUploading, isTransferring, transferProgress } = getMediaTransferState(
@@ -100,7 +100,7 @@ const Video: FC<OwnProps> = ({
     shouldRender: shouldRenderSpinner,
     transitionClassNames: spinnerClassNames,
   } = useShowTransition(isTransferring, undefined, wasDownloadDisabled);
-  const { shouldRenderThumb, transitionClassNames } = useTransitionForMedia(fullMediaData, 'slow');
+  const { transitionClassNames } = useTransitionForMedia(fullMediaData, 'slow');
 
   const [playProgress, setPlayProgress] = useState<number>(0);
   const handleTimeUpdate = useCallback((e: React.SyntheticEvent<HTMLVideoElement>) => {
@@ -114,9 +114,7 @@ const Video: FC<OwnProps> = ({
   const { width, height } = dimensions || calculateVideoDimensions(video, isOwn, isForwarded, noAvatars);
 
   useHeavyAnimationCheckForVideo(videoRef, Boolean(isInline && shouldAutoPlay));
-
   usePauseOnInactive(videoRef, isPlayAllowed);
-
   useVideoCleanup(videoRef, [isInline]);
 
   const handleClick = useCallback(() => {
@@ -141,10 +139,6 @@ const Video: FC<OwnProps> = ({
     ? `width: ${width}px; height: ${height}px; left: ${dimensions.x}px; top: ${dimensions.y}px;`
     : '';
 
-  const shouldRenderInlineVideo = isInline;
-  const shouldRenderPlayButton = (isDownloadAllowed && !isPlayAllowed && !shouldRenderSpinner);
-  const shouldRenderDownloadButton = !isDownloadAllowed;
-
   return (
     <div
       ref={ref}
@@ -154,15 +148,14 @@ const Video: FC<OwnProps> = ({
       style={style}
       onClick={isUploading ? undefined : handleClick}
     >
-      {(!isInline || shouldRenderThumb || shouldRenderInlineVideo)
-        && (
-          <canvas
-            ref={thumbRef}
-            className="thumbnail"
-            // @ts-ignore teact feature
-            style={`width: ${width}px; height: ${height}px;`}
-          />
-        )}
+      {!previewBlobUrl && (
+        <canvas
+          ref={thumbRef}
+          className="thumbnail"
+          // @ts-ignore teact feature
+          style={`width: ${width}px; height: ${height}px;`}
+        />
+      )}
       {previewBlobUrl && (
         <img
           src={previewBlobUrl}
@@ -172,8 +165,7 @@ const Video: FC<OwnProps> = ({
           alt=""
         />
       )}
-
-      {shouldRenderInlineVideo && (
+      {isInline && (
         <video
           ref={videoRef}
           className={videoClassName}
@@ -190,7 +182,7 @@ const Video: FC<OwnProps> = ({
           <source src={fullMediaData} />
         </video>
       )}
-      {shouldRenderPlayButton && (
+      {(isDownloadAllowed && !isPlayAllowed && !shouldRenderSpinner) && (
         <i className="icon-large-play" />
       )}
       {shouldRenderSpinner && (
@@ -198,7 +190,7 @@ const Video: FC<OwnProps> = ({
           <ProgressSpinner progress={transferProgress} onClick={isUploading ? handleClick : undefined} />
         </div>
       )}
-      {shouldRenderDownloadButton && (
+      {!isDownloadAllowed && (
         <i className="icon-download" />
       )}
       {isTransferring ? (