From 146a5039a324f9b7718d3afe33a58fdb3be0fb46 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sat, 19 Jun 2021 12:29:43 +0300
Subject: [PATCH] Animated Emoji: Better preview and thumbnail

---
 src/components/common/AnimatedEmoji.tsx   | 17 ++++++++++++-----
 src/components/middle/message/Message.tsx |  6 +++++-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/common/AnimatedEmoji.tsx b/src/components/common/AnimatedEmoji.tsx
index 7b6c5ec5b..7e3d33d77 100644
--- a/src/components/common/AnimatedEmoji.tsx
+++ b/src/components/common/AnimatedEmoji.tsx
@@ -20,13 +20,14 @@ type OwnProps = {
   observeIntersection?: ObserveFn;
   isInline?: boolean;
   lastSyncTime?: number;
+  forceLoadPreview?: boolean;
 };
 
 const QUALITY = 1;
 const RESIZE_FACTOR = 0.5;
 
 const AnimatedEmoji: FC<OwnProps> = ({
-  sticker, isInline = false, observeIntersection, lastSyncTime,
+  sticker, isInline = false, observeIntersection, lastSyncTime, forceLoadPreview,
 }) => {
   // eslint-disable-next-line no-null/no-null
   const ref = useRef<HTMLDivElement>(null);
@@ -36,8 +37,14 @@ const AnimatedEmoji: FC<OwnProps> = ({
 
   const isIntersecting = useIsIntersecting(ref, observeIntersection);
 
-  const previewBlobUrl = useMedia(`${localMediaHash}?size=m`, !isIntersecting, ApiMediaFormat.BlobUrl, lastSyncTime);
-  const { transitionClassNames } = useTransitionForMedia(previewBlobUrl, 'slow');
+  const previewBlobUrl = useMedia(
+    `${localMediaHash}?size=m`,
+    !isIntersecting && !forceLoadPreview,
+    ApiMediaFormat.BlobUrl,
+    lastSyncTime,
+  );
+  const previewData = previewBlobUrl || (sticker.thumbnail && sticker.thumbnail.dataUri);
+  const { transitionClassNames } = useTransitionForMedia(previewData, 'slow');
 
   const mediaData = useMedia(localMediaHash, !isIntersecting, ApiMediaFormat.Lottie, lastSyncTime);
   const isMediaLoaded = Boolean(mediaData);
@@ -64,8 +71,8 @@ const AnimatedEmoji: FC<OwnProps> = ({
       style={style}
       onClick={handleClick}
     >
-      {previewBlobUrl && !isAnimationLoaded && (
-        <img src={previewBlobUrl} className={transitionClassNames} alt="" />
+      {previewData && !isAnimationLoaded && (
+        <img src={previewData} className={transitionClassNames} alt="" />
       )}
       {isMediaLoaded && (
         <AnimatedSticker
diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx
index 20bc8b930..08984725f 100644
--- a/src/components/middle/message/Message.tsx
+++ b/src/components/middle/message/Message.tsx
@@ -46,10 +46,13 @@ import {
   isOwnMessage,
   isReplyMessage,
   isAnonymousOwnMessage,
+  isMessageLocal,
   isChatPrivate,
   getMessageCustomShape,
   isChatChannel,
-  getMessageSingleEmoji, getSenderTitle, getUserColorKey,
+  getMessageSingleEmoji,
+  getSenderTitle,
+  getUserColorKey,
 } from '../../../modules/helpers';
 import buildClassName from '../../../util/buildClassName';
 import useEnsureMessage from '../../../hooks/useEnsureMessage';
@@ -538,6 +541,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
             sticker={animatedEmoji}
             observeIntersection={observeIntersectionForMedia}
             lastSyncTime={lastSyncTime}
+            forceLoadPreview={isMessageLocal(message)}
           />
         )}
         {isAlbum && (