From fbda8e8094abca74486ca9d350d07e04b773c410 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 21 Jan 2022 17:29:27 +0100
Subject: [PATCH] Animated Emoji: Fix flickering "like" emoji

---
 src/components/common/AnimatedEmoji.scss         | 6 +++---
 src/components/common/AnimatedEmoji.tsx          | 7 ++++---
 src/components/common/helpers/mediaDimensions.ts | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/common/AnimatedEmoji.scss b/src/components/common/AnimatedEmoji.scss
index dbc1d8056..fcfef9fc0 100644
--- a/src/components/common/AnimatedEmoji.scss
+++ b/src/components/common/AnimatedEmoji.scss
@@ -5,9 +5,9 @@
     position: absolute;
     width: 100%;
     height: 100%;
+  }
 
-    &.like-sticker-thumb {
-      transform: scale(0.8);
-    }
+  &.like-sticker-thumb img {
+    transform: scale(0.8);
   }
 }
diff --git a/src/components/common/AnimatedEmoji.tsx b/src/components/common/AnimatedEmoji.tsx
index a98ef8580..8c5647cab 100644
--- a/src/components/common/AnimatedEmoji.tsx
+++ b/src/components/common/AnimatedEmoji.tsx
@@ -5,11 +5,12 @@ import React, {
 import { ApiMediaFormat, ApiSticker } from '../../api/types';
 import { ActiveEmojiInteraction } from '../../global/types';
 
-import { LIKE_STICKER_ID } from './helpers/mediaDimensions';
+import buildClassName from '../../util/buildClassName';
 import { ObserveFn, useIsIntersecting } from '../../hooks/useIntersectionObserver';
 import useMedia from '../../hooks/useMedia';
 import useMediaTransition from '../../hooks/useMediaTransition';
 import useAnimatedEmoji from './hooks/useAnimatedEmoji';
+import { LIKE_STICKER_ID } from './helpers/mediaDimensions';
 
 import AnimatedSticker from './AnimatedSticker';
 
@@ -73,13 +74,13 @@ const AnimatedEmoji: FC<OwnProps> = ({
   return (
     <div
       ref={ref}
-      className="AnimatedEmoji media-inner"
+      className={buildClassName('AnimatedEmoji media-inner', sticker.id === LIKE_STICKER_ID && 'like-sticker-thumb')}
       // @ts-ignore teact feature
       style={style}
       onClick={handleClick}
     >
       {!isAnimationLoaded && thumbDataUri && (
-        <img src={thumbDataUri} className={sticker.id === LIKE_STICKER_ID ? 'like-sticker-thumb' : undefined} alt="" />
+        <img src={thumbDataUri} alt="" />
       )}
       {!isAnimationLoaded && previewBlobUrl && (
         <img src={previewBlobUrl} className={transitionClassNames} alt="" />
diff --git a/src/components/common/helpers/mediaDimensions.ts b/src/components/common/helpers/mediaDimensions.ts
index 7c8ce84c9..28d664a87 100644
--- a/src/components/common/helpers/mediaDimensions.ts
+++ b/src/components/common/helpers/mediaDimensions.ts
@@ -12,7 +12,7 @@ export const REM = parseInt(getComputedStyle(document.documentElement).fontSize,
 export const ROUND_VIDEO_DIMENSIONS_PX = 240;
 export const GIF_MIN_WIDTH = 300;
 export const AVATAR_FULL_DIMENSIONS = { width: 640, height: 640 };
-export const LIKE_STICKER_ID = '1258816259753933';
+export const LIKE_STICKER_ID = '4986041492570112461';
 
 const DEFAULT_MEDIA_DIMENSIONS: ApiDimensions = { width: 100, height: 100 };
 const MOBILE_SCREEN_NO_AVATARS_MESSAGE_EXTRA_WIDTH_REM = 4.5;