diff --git a/src/components/common/CustomEmoji.tsx b/src/components/common/CustomEmoji.tsx index 3bc31910f..7da2d7c3c 100644 --- a/src/components/common/CustomEmoji.tsx +++ b/src/components/common/CustomEmoji.tsx @@ -78,7 +78,7 @@ const CustomEmoji: FC = ({ const { customEmoji, canPlay } = useCustomEmoji(documentId); const loopCountRef = useRef(0); - const [shouldLoop, setShouldLoop] = useState(true); + const [shouldPlay, setShouldPlay] = useState(true); const hasCustomColor = customEmoji?.shouldUseTextColor; const customColor = useDynamicColorListener(containerRef, !hasCustomColor); @@ -89,7 +89,7 @@ const CustomEmoji: FC = ({ loopCountRef.current += 1; if (loopCountRef.current >= loopLimit) { - setShouldLoop(false); + setShouldPlay(false); e.currentTarget.currentTime = 0; } else { // Loop manually @@ -102,9 +102,8 @@ const CustomEmoji: FC = ({ loopCountRef.current += 1; - // Sticker plays 1 more time after disabling loop - if (loopCountRef.current >= loopLimit - 1) { - setShouldLoop(false); + if (loopCountRef.current >= loopLimit) { + setShouldPlay(false); } }); @@ -143,10 +142,10 @@ const CustomEmoji: FC = ({ sticker={customEmoji} isSmall={!isBig} size={size} - noPlay={noPlay || !canPlay} + noPlay={noPlay || !(shouldPlay && canPlay)} thumbClassName={styles.thumb} fullMediaClassName={styles.media} - shouldLoop={shouldLoop} + shouldLoop loopLimit={loopLimit} shouldPreloadPreview={shouldPreloadPreview || noPlay || !canPlay} forceOnHeavyAnimation={forceOnHeavyAnimation} diff --git a/src/components/common/StickerView.tsx b/src/components/common/StickerView.tsx index aaa49d577..da79fa017 100644 --- a/src/components/common/StickerView.tsx +++ b/src/components/common/StickerView.tsx @@ -180,12 +180,12 @@ const StickerView: FC = ({ /> ) : isVideo ? ( { const { stopActiveReaction } = getActions(); @@ -164,6 +166,7 @@ const ReactionAnimatedEmoji = ({ className={styles.customEmoji} size={size} noPlay={shouldPause} + loopLimit={loopLimit} forceAlways observeIntersectionForPlaying={observeIntersection} /> diff --git a/src/components/middle/ContactGreeting.tsx b/src/components/middle/ContactGreeting.tsx index c73a77835..1a7ed3d88 100644 --- a/src/components/middle/ContactGreeting.tsx +++ b/src/components/middle/ContactGreeting.tsx @@ -1,11 +1,12 @@ import type { FC } from '../../lib/teact/teact'; -import React, { memo, useEffect, useRef } from '../../lib/teact/teact'; +import React, { + memo, useEffect, useMemo, useRef, +} from '../../lib/teact/teact'; import { getActions, withGlobal } from '../../global'; import type { ApiSticker, ApiUpdateConnectionStateType } from '../../api/types'; import type { MessageList } from '../../global/types'; -import { getPeerIdDividend } from '../../global/helpers'; import { selectChat, selectChatLastMessage, selectCurrentMessageList } from '../../global/selectors'; import useLang from '../../hooks/useLang'; @@ -20,14 +21,14 @@ type OwnProps = { }; type StateProps = { - sticker?: ApiSticker; + stickers?: ApiSticker[]; lastUnreadMessageId?: number; connectionState?: ApiUpdateConnectionStateType; currentMessageList?: MessageList; }; const ContactGreeting: FC = ({ - sticker, + stickers, connectionState, lastUnreadMessageId, currentMessageList, @@ -43,13 +44,20 @@ const ContactGreeting: FC = ({ // eslint-disable-next-line no-null/no-null const containerRef = useRef(null); + const sticker = useMemo(() => { + if (!stickers?.length) return undefined; + + const randomIndex = Math.floor(Math.random() * stickers.length); + return stickers[randomIndex]; + }, [stickers]); + useEffect(() => { - if (sticker || connectionState !== 'connectionStateReady') { + if (stickers?.length || connectionState !== 'connectionStateReady') { return; } loadGreetingStickers(); - }, [connectionState, loadGreetingStickers, sticker]); + }, [connectionState, loadGreetingStickers, stickers]); useEffect(() => { if (connectionState === 'connectionStateReady' && lastUnreadMessageId) { @@ -94,8 +102,6 @@ const ContactGreeting: FC = ({ export default memo(withGlobal( (global, { userId }): StateProps => { const { stickers } = global.stickers.greeting; - const dividend = getPeerIdDividend(userId) + getPeerIdDividend(global.currentUserId!); - const sticker = stickers?.length ? stickers[dividend % stickers.length] : undefined; const chat = selectChat(global, userId); if (!chat) { return {}; @@ -104,7 +110,7 @@ export default memo(withGlobal( const lastMessage = selectChatLastMessage(global, chat.id); return { - sticker, + stickers, lastUnreadMessageId: lastMessage && lastMessage.id !== chat.lastReadInboxMessageId ? lastMessage.id : undefined, diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index 23ee1327a..5f9887b1f 100644 --- a/src/components/middle/MessageList.tsx +++ b/src/components/middle/MessageList.tsx @@ -607,7 +607,7 @@ const MessageList: FC = ({ ) : isBot && !hasMessages ? ( ) : shouldRenderGreeting ? ( - + ) : messageIds && (!messageGroups || isGroupChatJustCreated || isEmptyTopic) ? ( @@ -151,16 +153,18 @@ const SavedTagButton: FC<{ > - + {withContextMenu && ( + + )} {withContextMenu && contextMenuPosition && (