r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix showing still loading reaction

Browse Source
This commit is contained in:
Eduard Kuzmenko 2022-02-11 01:04:28 +04:00
parent df02f81e36
commit 57c1cad9ea
2 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/chat/reaction.ts
View File

@ -6,6 +6,7 @@
import callbackify from "../../helpers/callbackify"; import callbackify from "../../helpers/callbackify";
import { formatNumber } from "../../helpers/number"; import { formatNumber } from "../../helpers/number";
import { fastRaf } from "../../helpers/schedulers";
import { MessagePeerReaction, ReactionCount } from "../../layer"; import { MessagePeerReaction, ReactionCount } from "../../layer";
import appPeersManager from "../../lib/appManagers/appPeersManager"; import appPeersManager from "../../lib/appManagers/appPeersManager";
import appReactionsManager from "../../lib/appManagers/appReactionsManager"; import appReactionsManager from "../../lib/appManagers/appReactionsManager";
@ -31,6 +32,7 @@ export default class ReactionElement extends HTMLElement {
private stackedAvatars: StackedAvatars; private stackedAvatars: StackedAvatars;
private canRenderAvatars: boolean; private canRenderAvatars: boolean;
private _reactionCount: ReactionCount; private _reactionCount: ReactionCount;
private wrapStickerPromise: ReturnType<typeof wrapSticker>;
constructor() { constructor() {
super(); super();
@ -79,12 +81,16 @@ export default class ReactionElement extends HTMLElement {
} }
const size = this.type === 'inline' ? REACTION_INLINE_SIZE : REACTION_BLOCK_SIZE; const size = this.type === 'inline' ? REACTION_INLINE_SIZE : REACTION_BLOCK_SIZE;
wrapSticker({ const wrapPromise = this.wrapStickerPromise = wrapSticker({
div: this.stickerContainer, div: this.stickerContainer,
doc: availableReaction.center_icon ?? availableReaction.static_icon, doc: availableReaction.center_icon ?? availableReaction.static_icon,
width: size, width: size,
height: size, height: size,
static: true static: true
}).finally(() => {
if(this.wrapStickerPromise === wrapPromise) {
this.wrapStickerPromise = undefined;
}
}); });
}); });
} }
@ -175,15 +181,31 @@ export default class ReactionElement extends HTMLElement {
play: false play: false
}).stickerPromise }).stickerPromise
]).then(([iconPlayer, aroundPlayer]) => { ]).then(([iconPlayer, aroundPlayer]) => {
iconPlayer.addEventListener('enterFrame', (frameNo) => { const remove = () => {
if(frameNo === iconPlayer.maxFrame) { // if(!isInDOM(div)) return;
fastRaf(() => {
// if(!isInDOM(div)) return;
iconPlayer.remove(); iconPlayer.remove();
div.remove(); div.remove();
this.stickerContainer.classList.remove('has-animation');
});
};
iconPlayer.addEventListener('enterFrame', (frameNo) => {
if(frameNo === iconPlayer.maxFrame) {
if(this.wrapStickerPromise) { // wait for fade in animation
this.wrapStickerPromise.then(() => {
setTimeout(remove, 1e3);
});
} else {
remove();
}
} }
}); });
iconPlayer.addEventListener('firstFrame', () => { iconPlayer.addEventListener('firstFrame', () => {
this.stickerContainer.prepend(div); this.stickerContainer.append(div);
this.stickerContainer.classList.add('has-animation');
iconPlayer.play(); iconPlayer.play();
aroundPlayer.play(); aroundPlayer.play();
}, {once: true}); }, {once: true});

7
src/scss/partials/_reaction.scss
View File

@ -38,10 +38,13 @@
right: var(--reaction-offset); right: var(--reaction-offset);
bottom: var(--reaction-offset); bottom: var(--reaction-offset);
left: var(--reaction-offset); left: var(--reaction-offset);
z-index: 1;
// animation: reaction-activate 2s linear forwards; // animation: reaction-activate 2s linear forwards;
}
& + .media-sticker { &.has-animation {
opacity: 0; > .media-sticker {
visibility: hidden;
} }
} }