From cdcce94f1a802e969e83243874065e705abae72b Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 7 Dec 2022 17:38:33 +0100
Subject: [PATCH] Message Input: Various fixes for custom emoji (#2188)

---
 src/components/middle/composer/Composer.scss        |  4 ----
 src/components/middle/composer/Composer.tsx         |  2 +-
 .../middle/composer/hooks/useInputCustomEmojis.ts   | 13 ++++++-------
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss
index 820823700..bde5c09a6 100644
--- a/src/components/middle/composer/Composer.scss
+++ b/src/components/middle/composer/Composer.scss
@@ -260,10 +260,6 @@
     margin-right: -0.5rem;
   }
 
-  .inline-bot-spinner {
-    margin-right: 3rem;
-  }
-
   > .AttachMenu > .Button,
   > .Button {
     flex-shrink: 0;
diff --git a/src/components/middle/composer/Composer.tsx b/src/components/middle/composer/Composer.tsx
index 002ace436..1515c5cb7 100644
--- a/src/components/middle/composer/Composer.tsx
+++ b/src/components/middle/composer/Composer.tsx
@@ -1261,7 +1261,7 @@ const Composer: FC<OwnProps & StateProps> = ({
             onSuppressedFocus={closeSymbolMenu}
           />
           {isInlineBotLoading && Boolean(inlineBotId) && (
-            <Spinner color="gray" className="inline-bot-spinner" />
+            <Spinner color="gray" />
           )}
           {withScheduledButton && (
             <Button
diff --git a/src/components/middle/composer/hooks/useInputCustomEmojis.ts b/src/components/middle/composer/hooks/useInputCustomEmojis.ts
index 519f8338f..f48aa2d98 100644
--- a/src/components/middle/composer/hooks/useInputCustomEmojis.ts
+++ b/src/components/middle/composer/hooks/useInputCustomEmojis.ts
@@ -7,7 +7,6 @@ import type { ApiSticker } from '../../../../api/types';
 
 import { getGlobal } from '../../../../global';
 import { selectIsAlwaysHighPriorityEmoji } from '../../../../global/selectors';
-import generateIdFor from '../../../../util/generateIdFor';
 import {
   addCustomEmojiInputRenderCallback,
   getCustomEmojiMediaDataForInput,
@@ -16,14 +15,14 @@ import {
 import { round } from '../../../../util/math';
 import { fastRaf } from '../../../../util/schedulers';
 import AbsoluteVideo from '../../../../util/AbsoluteVideo';
+import { REM } from '../../../common/helpers/mediaDimensions';
 
 import { useResizeObserver } from '../../../../hooks/useResizeObserver';
 import useBackgroundMode from '../../../../hooks/useBackgroundMode';
 
-const ID_STORE = {};
-const SIZE = 20;
+const SIZE = 1.25 * REM;
 
-type Player = {
+type CustomEmojiPlayer = {
   play: () => void;
   pause: () => void;
   destroy: () => void;
@@ -37,7 +36,7 @@ export default function useInputCustomEmojis(
   sharedCanvasHqRef: React.RefObject<HTMLCanvasElement>,
   absoluteContainerRef: React.RefObject<HTMLElement>,
 ) {
-  const mapRef = useRef<Map<string, Player>>(new Map());
+  const mapRef = useRef<Map<string, CustomEmojiPlayer>>(new Map());
 
   const removeContainers = useCallback((ids: string[]) => {
     ids.forEach((id) => {
@@ -162,13 +161,13 @@ function createPlayer({
   mediaUrl: string;
   position: { x: number; y: number };
   isHq?: boolean;
-}): Player {
+}): CustomEmojiPlayer {
   if (customEmoji.isLottie) {
     const lottie = RLottie.init(
       uniqueId,
       isHq ? sharedCanvasHqRef.current! : sharedCanvasRef.current!,
       undefined,
-      generateIdFor(ID_STORE, true),
+      customEmoji.id,
       mediaUrl,
       {
         size: SIZE,