Scroll to the bubble's end on reactions update

This commit is contained in:
Eduard Kuzmenko 2022-02-25 16:11:57 +02:00
parent 2ccc2b06ac
commit 8eeb180ddd
2 changed files with 35 additions and 19 deletions

View File

@ -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();
});
}

View File

@ -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<string, Set<ReactionsElement>> = 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<string, Set<ReactionsElement>> = 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);
}
}