From 11196c8d940b3205d38d3633cdb8aa8472abe8e0 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 13 Nov 2022 17:05:53 +0400
Subject: [PATCH] Adjust custom emoji size

---
 src/components/common/CustomEmoji.tsx            | 16 +++++++++++++---
 src/components/common/EmbeddedMessage.scss       |  2 +-
 src/components/middle/MiddleHeader.scss          |  2 +-
 .../middle/message/_message-content.scss         |  4 +++-
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/common/CustomEmoji.tsx b/src/components/common/CustomEmoji.tsx
index f9147106b..f920a194f 100644
--- a/src/components/common/CustomEmoji.tsx
+++ b/src/components/common/CustomEmoji.tsx
@@ -7,6 +7,7 @@ import type { FC, TeactNode } from '../../lib/teact/teact';
 import type { ObserveFn } from '../../hooks/useIntersectionObserver';
 import { ApiMessageEntityTypes } from '../../api/types';
 
+import { REM } from './helpers/mediaDimensions';
 import { getPropertyHexColor } from '../../util/themeStyle';
 import { hexToRgb } from '../../util/switchTheme';
 import buildClassName from '../../util/buildClassName';
@@ -72,12 +73,14 @@ const CustomEmoji: FC<OwnProps> = ({
   const [customColor, setCustomColor] = useState<[number, number, number] | undefined>();
   const hasCustomColor = customEmoji && selectIsDefaultEmojiStatusPack(getGlobal(), customEmoji.stickerSetInfo);
 
+  const [realSize, setRealSize] = useState<number>(size);
+
   useEffect(() => {
-    if (!hasCustomColor || !containerRef.current) {
+    if (!hasCustomColor) {
       setCustomColor(undefined);
       return;
     }
-    const hexColor = getPropertyHexColor(getComputedStyle(containerRef.current), '--emoji-status-color');
+    const hexColor = getPropertyHexColor(getComputedStyle(containerRef.current!), '--emoji-status-color');
     if (!hexColor) {
       setCustomColor(undefined);
       return;
@@ -86,6 +89,13 @@ const CustomEmoji: FC<OwnProps> = ({
     setCustomColor([customColorRgb.r, customColorRgb.g, customColorRgb.b]);
   }, [hasCustomColor]);
 
+  useEffect(() => {
+    const computedSize = getComputedStyle(containerRef.current!).getPropertyValue('--custom-emoji-size');
+    if (computedSize) {
+      setRealSize(Math.round(Number(computedSize.replace(/[^\d.]/g, '')) * REM));
+    }
+  }, []);
+
   const handleVideoEnded = useCallback((e) => {
     if (!loopLimit) return;
 
@@ -136,7 +146,7 @@ const CustomEmoji: FC<OwnProps> = ({
           containerRef={containerRef}
           sticker={customEmoji}
           isSmall
-          size={size}
+          size={realSize}
           customColor={customColor}
           thumbClassName={styles.thumb}
           fullMediaClassName={styles.media}
diff --git a/src/components/common/EmbeddedMessage.scss b/src/components/common/EmbeddedMessage.scss
index 92ca1f772..348856340 100644
--- a/src/components/common/EmbeddedMessage.scss
+++ b/src/components/common/EmbeddedMessage.scss
@@ -106,7 +106,7 @@
 
     .custom-emoji {
       // Custom emoji needs to be slightly bigger than normal emoji
-      --custom-emoji-size: calc(1.125 * var(--message-text-size, 1rem) + 1px);
+      --custom-emoji-size: max(calc(1.125 * var(--message-text-size, 1rem) + 1px), 20px);
       margin-inline-end: 1px;
 
       & > img {
diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss
index 79169b1a1..93c0ad6e0 100644
--- a/src/components/middle/MiddleHeader.scss
+++ b/src/components/middle/MiddleHeader.scss
@@ -521,7 +521,7 @@
         }
 
         .custom-emoji {
-          --custom-emoji-size: 1.125rem;
+          --custom-emoji-size: 1.25rem;
         }
       }
     }
diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss
index febb1325f..1f143b0c2 100644
--- a/src/components/middle/message/_message-content.scss
+++ b/src/components/middle/message/_message-content.scss
@@ -445,7 +445,9 @@
     }
 
     .custom-emoji {
-      --custom-emoji-size: calc(1.25 * var(--message-text-size, 1rem));
+      --custom-emoji-size: max(calc(1.25 * var(--message-text-size, 1rem)), 20px);
+      width: var(--custom-emoji-size);
+      height: var(--custom-emoji-size);
     }
   }