diff --git a/src/api/gramjs/methods/symbols.ts b/src/api/gramjs/methods/symbols.ts index 9f3556230..93f054777 100644 --- a/src/api/gramjs/methods/symbols.ts +++ b/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), diff --git a/src/components/middle/composer/EmojiPicker.scss b/src/components/middle/composer/EmojiPicker.scss index ae0789fb4..067cf3bf0 100644 --- a/src/components/middle/composer/EmojiPicker.scss +++ b/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 { diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss index 51c46b04a..1aebaa305 100644 --- a/src/components/middle/composer/SymbolMenu.scss +++ b/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; } diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index 033167dd5..c0c6c20bf 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -353,7 +353,7 @@ const Message: FC = ({ 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 = ({ onStopEffect={stopStickerEffect} /> )} - {animatedCustomEmoji && ( + {hasAnimatedEmoji && animatedCustomEmoji && ( = ({ activeEmojiInteractions={activeEmojiInteractions} /> )} - {animatedEmoji && ( + {hasAnimatedEmoji && animatedEmoji && ( (); const RENDER_HISTORY = new Set(); 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(); + } } diff --git a/src/hooks/useLastSyncTime.ts b/src/hooks/useLastSyncTime.ts new file mode 100644 index 000000000..9541521b3 --- /dev/null +++ b/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(); +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; +}