Custom Emoji: Various fixes (#2099)

src/api/gramjs/methods/symbols.ts

@@ -169,6 +169,8 @@ export async function fetchStickers(
     return undefined;
   }
 
+  localDb.stickerSets[String(result.set.id)] = result.set;
+
   return {
     set: buildStickerSet(result.set),
     stickers: processStickerResult(result.documents),

src/components/middle/composer/EmojiPicker.scss

@@ -9,11 +9,6 @@
     @media (max-width: 600px) {
       padding: 0.5rem 0.25rem;
     }
-
-    .symbol-set-container {
-      display: flex;
-      flex-wrap: wrap;
-    }
   }
 
   &-header {

src/components/middle/composer/SymbolMenu.scss

@@ -228,6 +228,16 @@
   }
 
   .symbol-set-container {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    // Fix for the last row alignment
+    &::after {
+      content: "";
+      flex: auto;
+    }
+
     &:not(.shown) {
       display: block;
     }

src/components/middle/message/Message.tsx

@@ -353,7 +353,7 @@ const Message: FC<OwnProps & StateProps> = ({
   const hasReply = isReplyMessage(message) && !shouldHideReply;
   const hasThread = Boolean(threadInfo) && messageListType === 'thread';
   const customShape = getMessageCustomShape(message);
-  const hasAnimatedEmoji = animatedEmoji || animatedCustomEmoji;
+  const hasAnimatedEmoji = customShape && (animatedEmoji || animatedCustomEmoji);
   const hasReactions = reactionMessage?.reactions && !areReactionsEmpty(reactionMessage.reactions);
   const asForwarded = (
     forwardInfo
@@ -706,7 +706,7 @@ const Message: FC<OwnProps & StateProps> = ({
             onStopEffect={stopStickerEffect}
           />
         )}
-        {animatedCustomEmoji && (
+        {hasAnimatedEmoji && animatedCustomEmoji && (
           <AnimatedCustomEmoji
             customEmojiId={animatedCustomEmoji}
             withEffects={isUserId(chatId)}
@@ -719,7 +719,7 @@ const Message: FC<OwnProps & StateProps> = ({
             activeEmojiInteractions={activeEmojiInteractions}
           />
         )}
-        {animatedEmoji && (
+        {hasAnimatedEmoji && animatedEmoji && (
           <AnimatedEmoji
             emoji={animatedEmoji}
             withEffects={isUserId(chatId)}

src/hooks/useEnsureCustomEmoji.ts

@@ -1,6 +1,9 @@
 import { getActions, getGlobal } from '../global';
+
 import { throttle } from '../util/schedulers';
 
+import useLastSyncTime from './useLastSyncTime';
+
 const LOAD_QUEUE = new Set<string>();
 const RENDER_HISTORY = new Set<string>();
 const THROTTLE = 200;
@@ -27,6 +30,7 @@ export function notifyCustomEmojiRender(emojiId: string) {
 }
 
 export default function useEnsureCustomEmoji(id: string) {
+  const lastSyncTime = useLastSyncTime();
   notifyCustomEmojiRender(id);
 
   if (getGlobal().customEmojis.byId[id]) {
@@ -34,5 +38,7 @@ export default function useEnsureCustomEmoji(id: string) {
   }
 
   LOAD_QUEUE.add(id);
-  loadFromQueue();
+  if (lastSyncTime) {
+    loadFromQueue();
+  }
 }

src/hooks/useLastSyncTime.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from '../lib/teact/teact';
+import { addCallback } from '../lib/teact/teactn';
+import { getGlobal } from '../global';
+
+import type { GlobalState } from '../global/types';
+
+type LastSyncTimeSetter = (time: number) => void;
+
+const handlers = new Set<LastSyncTimeSetter>();
+let prevGlobal: GlobalState | undefined;
+
+addCallback((global: GlobalState) => {
+  if (global.lastSyncTime && global.lastSyncTime !== prevGlobal?.lastSyncTime) {
+    for (const handler of handlers) {
+      handler(global.lastSyncTime);
+    }
+  }
+
+  prevGlobal = global;
+});
+
+export default function useLastSyncTime() {
+  const [lastSyncTime, setLastSyncTime] = useState(getGlobal().lastSyncTime);
+
+  useEffect(() => {
+    handlers.add(setLastSyncTime);
+
+    return () => {
+      handlers.delete(setLastSyncTime);
+    };
+  }, []);
+
+  return lastSyncTime;
+}