From f5e50409d3cd1b06a0d80af00c866cd4cee04bcb Mon Sep 17 00:00:00 2001
From: John Preston <johnprestonmail@gmail.com>
Date: Sun, 16 Jan 2022 14:11:50 +0300
Subject: [PATCH] Add initial reaction bubble appear animation.

---
 .../view/history_view_react_animation.cpp     |  4 ++
 .../view/history_view_react_animation.h       |  1 +
 .../history/view/history_view_reactions.cpp   | 39 +++++++++++++------
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/Telegram/SourceFiles/history/view/history_view_react_animation.cpp b/Telegram/SourceFiles/history/view/history_view_react_animation.cpp
index ff77fd635..f1eb3890f 100644
--- a/Telegram/SourceFiles/history/view/history_view_react_animation.cpp
+++ b/Telegram/SourceFiles/history/view/history_view_react_animation.cpp
@@ -168,6 +168,10 @@ bool SendAnimation::flying() const {
 	return (_flyIcon != nullptr);
 }
 
+float64 SendAnimation::flyingProgress() const {
+	return _fly.value(1.);
+}
+
 QString SendAnimation::playingAroundEmoji() const {
 	const auto finished = !_valid
 		|| (!_flyIcon && !_center->animating() && !_effect->animating());
diff --git a/Telegram/SourceFiles/history/view/history_view_react_animation.h b/Telegram/SourceFiles/history/view/history_view_react_animation.h
index 0daca4982..7c3cba254 100644
--- a/Telegram/SourceFiles/history/view/history_view_react_animation.h
+++ b/Telegram/SourceFiles/history/view/history_view_react_animation.h
@@ -37,6 +37,7 @@ public:
 
 	[[nodiscard]] QString playingAroundEmoji() const;
 	[[nodiscard]] bool flying() const;
+	[[nodiscard]] float64 flyingProgress() const;
 
 private:
 	void flyCallback();
diff --git a/Telegram/SourceFiles/history/view/history_view_reactions.cpp b/Telegram/SourceFiles/history/view/history_view_reactions.cpp
index c111efc25..27e19693f 100644
--- a/Telegram/SourceFiles/history/view/history_view_reactions.cpp
+++ b/Telegram/SourceFiles/history/view/history_view_reactions.cpp
@@ -259,33 +259,46 @@ void InlineList::paint(
 	}
 	p.setFont(st::semiboldFont);
 	for (const auto &button : _buttons) {
+		const auto &geometry = button.geometry;
 		const auto mine = (_data.chosenReaction == button.emoji);
 		const auto withoutMine = button.count - (mine ? 1 : 0);
 		const auto animating = (animated == button.emoji);
 		const auto skipImage = animating
 			&& (withoutMine < 1 || !_animation->flying());
-		const auto skipBubble = skipImage && _animation->flying();
-		const auto &geometry = button.geometry;
+		const auto bubbleProgress = skipImage
+			? _animation->flyingProgress()
+			: 1.;
+		const auto bubbleReady = (bubbleProgress == 1.);
+		const auto bubbleSkip = anim::interpolate(
+			geometry.height() - geometry.width(),
+			0,
+			bubbleProgress);
 		const auto inner = geometry.marginsRemoved(padding);
 		const auto chosen = mine
-			&& (!animating || !_animation->flying());
-		if (!skipBubble) {
+			&& (!animating || !_animation->flying() || skipImage);
+		if (bubbleProgress > 0.) {
 			auto hq = PainterHighQualityEnabler(p);
 			p.setPen(Qt::NoPen);
 			if (inbubble) {
 				if (!chosen) {
-					p.setOpacity(context.outbg
+					p.setOpacity(bubbleProgress * (context.outbg
 						? kOutNonChosenOpacity
-						: kInNonChosenOpacity);
+						: kInNonChosenOpacity));
+				} else if (!bubbleReady) {
+					p.setOpacity(bubbleProgress);
 				}
 				p.setBrush(stm->msgFileBg);
 			} else {
+				if (!bubbleReady) {
+					p.setOpacity(bubbleProgress);
+				}
 				p.setBrush(chosen ? st->msgServiceFg() : st->msgServiceBg());
 			}
 			const auto radius = geometry.height() / 2.;
-			p.drawRoundedRect(geometry, radius, radius);
+			const auto fill = geometry.marginsAdded({ 0, 0, bubbleSkip, 0 });
+			p.drawRoundedRect(fill, radius, radius);
 			if (inbubble && !chosen) {
-				p.setOpacity(1.);
+				p.setOpacity(bubbleProgress);
 			}
 		}
 		if (button.image.isNull()) {
@@ -304,13 +317,14 @@ void InlineList::paint(
 				return _animation->paintGetArea(p, QPoint(), image);
 			};
 		}
-		if (skipBubble) {
+		if (bubbleProgress == 0.) {
 			continue;
 		}
 		resolveUserpicsImage(button);
+		const auto left = inner.x() + bubbleSkip;
 		if (button.userpics) {
 			p.drawImage(
-				inner.x() + size + st::reactionInlineUserpicsPadding.left(),
+				left + size + st::reactionInlineUserpicsPadding.left(),
 				geometry.y() + st::reactionInlineUserpicsPadding.top(),
 				button.userpics->image);
 		} else {
@@ -330,10 +344,13 @@ void InlineList::paint(
 			const auto textTop = geometry.y()
 				+ ((geometry.height() - st::semiboldFont->height) / 2);
 			p.drawText(
-				inner.x() + size + st::reactionInlineSkip,
+				left + size + st::reactionInlineSkip,
 				textTop + st::semiboldFont->ascent,
 				button.countText);
 		}
+		if (!bubbleReady) {
+			p.setOpacity(1.);
+		}
 	}
 }