diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index e28f9378..ecdd260a 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -88,7 +88,7 @@ import { CallType } from "../../lib/calls/types"; import getVisibleRect from "../../helpers/dom/getVisibleRect"; import PopupJoinChatInvite from "../popups/joinChatInvite"; import { InternalLink, INTERNAL_LINK_TYPE } from "../../lib/appManagers/internalLink"; -import ReactionsElement from "./reactions"; +import ReactionsElement, { REACTIONS_ELEMENTS } from "./reactions"; import type ReactionElement from "./reaction"; import type { AppReactionsManager } from "../../lib/appManagers/appReactionsManager"; import RLottiePlayer from "../../lib/rlottie/rlottiePlayer"; @@ -458,6 +458,33 @@ export default class ChatBubbles { this.appendReactionsElementToBubble(bubble, message, changedResults); }); + + this.listenerSetter.add(rootScope)('message_reactions', ({message, changedResults}) => { + if(this.peerId !== message.peerId) { + return; + } + + const scrolledDown = this.scrolledDown; + let bubble: HTMLElement; + if(scrolledDown) { + bubble = this.getBubbleByMessage(message); + } + + const key = message.peerId + '_' + message.mid; + const set = REACTIONS_ELEMENTS.get(key); + if(!set) { + rootScope.dispatchEvent('missed_reactions_element', {message, changedResults}); + return; + } + + for(const element of set) { + element.update(message, changedResults); + } + + if(scrolledDown && bubble) { + this.scrollToBubbleIfLast(bubble); + } + }); } /* this.listenerSetter.add(rootScope)('message_reactions', ({peerId, mid}) => { @@ -2462,7 +2489,7 @@ export default class ChatBubbles { }); }; - afterSetPromise.then(() => { + Promise.all([afterSetPromise, getHeavyAnimationPromise(), pause(500)]).then(() => { fetchReactions(); }); } diff --git a/src/components/chat/reactions.ts b/src/components/chat/reactions.ts index b7747d46..f937beb7 100644 --- a/src/components/chat/reactions.ts +++ b/src/components/chat/reactions.ts @@ -14,19 +14,8 @@ import ReactionElement, { ReactionLayoutType, REACTION_DISPLAY_BLOCK_COUNTER_AT const CLASS_NAME = 'reactions'; const TAG_NAME = CLASS_NAME + '-element'; -const elements: Map> = new Map(); -rootScope.addEventListener('message_reactions', ({message, changedResults}) => { - const key = message.peerId + '_' + message.mid; - const set = elements.get(key); - if(!set) { - rootScope.dispatchEvent('missed_reactions_element', {message, changedResults}); - return; - } - - for(const element of set) { - element.update(message, changedResults); - } -}); +const REACTIONS_ELEMENTS: Map> = new Map(); +export {REACTIONS_ELEMENTS}; export default class ReactionsElement extends HTMLElement { private message: Message.message; @@ -43,9 +32,9 @@ export default class ReactionsElement extends HTMLElement { } connectedCallback() { - let set = elements.get(this.key); + let set = REACTIONS_ELEMENTS.get(this.key); if(!set) { - elements.set(this.key, set = new Set()); + REACTIONS_ELEMENTS.set(this.key, set = new Set()); } set.add(this); @@ -57,10 +46,10 @@ export default class ReactionsElement extends HTMLElement { } disconnectedCallback() { - const set = elements.get(this.key); + const set = REACTIONS_ELEMENTS.get(this.key); set.delete(this); if(!set.size) { - elements.delete(this.key); + REACTIONS_ELEMENTS.delete(this.key); } }