From c9314e5e5e5fd1352cc5b1ad5b41f7c45389de01 Mon Sep 17 00:00:00 2001
From: 23rd <23rd@vivaldi.net>
Date: Fri, 13 Nov 2020 05:13:49 +0300
Subject: [PATCH] Added ripple animation to stop recording voice button.

---
 .../history_view_voice_record_bar.cpp         | 47 ++++++++++++++-----
 Telegram/SourceFiles/ui/chat/chat.style       |  1 +
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/Telegram/SourceFiles/history/view/controls/history_view_voice_record_bar.cpp b/Telegram/SourceFiles/history/view/controls/history_view_voice_record_bar.cpp
index 534651f1e3..4d24c2900f 100644
--- a/Telegram/SourceFiles/history/view/controls/history_view_voice_record_bar.cpp
+++ b/Telegram/SourceFiles/history/view/controls/history_view_voice_record_bar.cpp
@@ -29,6 +29,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "styles/style_layers.h"
 #include "styles/style_media_player.h"
 #include "ui/controls/send_button.h"
+#include "ui/effects/ripple_animation.h"
 #include "ui/text/format_values.h"
 #include "window/window_session_controller.h"
 
@@ -604,15 +605,19 @@ rpl::lifetime &ListenWrap::lifetime() {
 	return _lifetime;
 }
 
-class RecordLock final : public Ui::RpWidget {
+class RecordLock final : public Ui::RippleButton {
 public:
 	RecordLock(not_null<Ui::RpWidget*> parent);
 
 	void requestPaintProgress(float64 progress);
 
-	[[nodiscard]] rpl::producer<> stops() const;
 	[[nodiscard]] rpl::producer<> locks() const;
 	[[nodiscard]] bool isLocked() const;
+	[[nodiscard]] bool isStopState() const;
+
+protected:
+	QImage prepareRippleMask() const override;
+	QPoint prepareRippleStartPosition() const override;
 
 private:
 	void init();
@@ -621,6 +626,7 @@ private:
 	void setProgress(float64 progress);
 	void startLockingAnimation(float64 to);
 
+	const QRect _rippleRect;
 	const QPen _arcPen;
 
 	Ui::Animations::Simple _lockAnimation;
@@ -630,7 +636,13 @@ private:
 };
 
 RecordLock::RecordLock(not_null<Ui::RpWidget*> parent)
-: RpWidget(parent)
+: RippleButton(parent, st::defaultRippleAnimation)
+, _rippleRect(QRect(
+	0,
+	0,
+	st::historyRecordLockTopShadow.width(),
+	st::historyRecordLockTopShadow.width())
+		.marginsRemoved(st::historyRecordLockRippleMargin))
 , _arcPen(
 	st::historyRecordLockIconFg,
 	st::historyRecordLockIconLineWidth,
@@ -755,6 +767,9 @@ void RecordLock::drawProgress(Painter &p) {
 		arrow.paintInCenter(p, arrowRect);
 		p.setOpacity(1.);
 	}
+	if (isLocked()) {
+		paintRipple(p, _rippleRect.x(), _rippleRect.y());
+	}
 	{
 		PainterHighQualityEnabler hq(p);
 		const auto &size = st::historyRecordLockIconSize;
@@ -833,18 +848,21 @@ bool RecordLock::isLocked() const {
 	return _progress.current() == 1.;
 }
 
+bool RecordLock::isStopState() const {
+	return isLocked() && (_lockAnimation.value(1.) == 1.);
+}
+
 rpl::producer<> RecordLock::locks() const {
 	return _progress.changes(
 	) | rpl::filter([=] { return isLocked(); }) | rpl::to_empty;
 }
 
-rpl::producer<> RecordLock::stops() const {
-	return events(
-	) | rpl::filter([=](not_null<QEvent*> e) {
-		return isLocked()
-			&& (_lockAnimation.value(1.) == 1.)
-			&& (e->type() == QEvent::MouseButtonRelease);
-	}) | rpl::to_empty;
+QImage RecordLock::prepareRippleMask() const {
+	return Ui::RippleAnimation::ellipseMask(_rippleRect.size());
+}
+
+QPoint RecordLock::prepareRippleStartPosition() const {
+	return mapFromGlobal(QCursor::pos()) - _rippleRect.topLeft();
 }
 
 VoiceRecordBar::VoiceRecordBar(
@@ -996,8 +1014,11 @@ void VoiceRecordBar::init() {
 		_showLockAnimation.start(std::move(callback), from, to, duration);
 	}, lifetime());
 
-	_lock->stops(
-	) | rpl::start_with_next([=] {
+	_lock->setClickedCallback([=] {
+		if (!_lock->isStopState()) {
+			return;
+		}
+
 		::Media::Capture::instance()->startedChanges(
 		) | rpl::filter([=](auto capturing) {
 			return !capturing && _listen;
@@ -1018,7 +1039,7 @@ void VoiceRecordBar::init() {
 		}, lifetime());
 
 		stopRecording(StopType::Listen);
-	}, lifetime());
+	});
 
 	_lock->locks(
 	) | rpl::start_with_next([=] {
diff --git a/Telegram/SourceFiles/ui/chat/chat.style b/Telegram/SourceFiles/ui/chat/chat.style
index 0b9f67f03e..a44df79c17 100644
--- a/Telegram/SourceFiles/ui/chat/chat.style
+++ b/Telegram/SourceFiles/ui/chat/chat.style
@@ -380,6 +380,7 @@ historyRecordLockBodyShadow: icon {{ "voice_lock/record_lock_body_shadow", histo
 historyRecordLockBody: icon {{ "voice_lock/record_lock_body", historyToDownBg }};
 historyRecordLockMargin: margins(4px, 4px, 4px, 4px);
 historyRecordLockArrow: icon {{ "voice_lock/voice_arrow", historyToDownFg }};
+historyRecordLockRippleMargin: margins(5px, 5px, 5px, 5px);
 
 historyRecordDelete: IconButton(historyAttach) {
 	icon: icon {{ "info_media_delete", historyComposeIconFg }};