Browse Source

Fix showing still loading reaction

master
Eduard Kuzmenko 3 years ago
parent
commit
57c1cad9ea
  1. 30
      src/components/chat/reaction.ts
  2. 7
      src/scss/partials/_reaction.scss

30
src/components/chat/reaction.ts

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

7
src/scss/partials/_reaction.scss

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

Loading…
Cancel
Save