Add CallMuteButton with lottie animations.

Telegram/Resources/qrc/telegram/telegram.qrc

@@ -59,6 +59,10 @@
     <file alias="day-blue.tdesktop-theme">../../day-blue.tdesktop-theme</file>
     <file alias="night.tdesktop-theme">../../night.tdesktop-theme</file>
     <file alias="night-green.tdesktop-theme">../../night-green.tdesktop-theme</file>
+    <file alias="icons/calls/active_hand.json">../../icons/calls/active_hand.json</file>
+    <file alias="icons/calls/hand_muted_active.json">../../icons/calls/hand_muted_active.json</file>
+    <file alias="icons/calls/raised_hand_1.json">../../icons/calls/raised_hand_1.json</file>
+    <file alias="icons/calls/raised_hand_2.json">../../icons/calls/raised_hand_2.json</file>
   </qresource>
   <qresource prefix="/qt-project.org">
     <file>../qmime/freedesktop.org.xml</file>

Telegram/SourceFiles/calls/calls.style

@@ -393,6 +393,8 @@ callErrorToast: Toast(defaultToast) {
 groupCallWidth: 380px;
 groupCallHeight: 580px;
 
+groupCallMuteButtonIconSize: size(52px, 52px);
+groupCallMuteButtonIconTop: 39px;
 groupCallRipple: RippleAnimation(defaultRippleAnimation) {
 	color: groupCallMembersBgRipple;
 }

Telegram/SourceFiles/calls/calls_group_panel.cpp

@@ -12,10 +12,10 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "calls/calls_group_settings.h"
 #include "calls/calls_group_menu.h"
 #include "ui/platform/ui_platform_window_title.h"
+#include "ui/controls/call_mute_button.h"
 #include "ui/widgets/buttons.h"
 #include "ui/widgets/window.h"
 #include "ui/widgets/call_button.h"
-#include "ui/widgets/call_mute_button.h"
 #include "ui/widgets/checkbox.h"
 #include "ui/widgets/dropdown_menu.h"
 #include "ui/widgets/input_fields.h"
@@ -428,7 +428,7 @@ void GroupPanel::initControls() {
 		const auto newState = (oldState == MuteState::ForceMuted)
 			? MuteState::RaisedHand
 			: (oldState == MuteState::RaisedHand)
-			? MuteState::ForceMuted
+			? MuteState::RaisedHand
 			: (oldState == MuteState::Muted)
 			? MuteState::Active
 			: MuteState::Muted;

Telegram/SourceFiles/ui/controls/call_mute_button.h

@@ -0,0 +1,155 @@
+// This file is part of Desktop App Toolkit,
+// a set of libraries for developing nice desktop applications.
+//
+// For license and copyright information please follow this link:
+// https://github.com/desktop-app/legal/blob/master/LEGAL
+//
+#pragma once
+
+#include "base/unique_qptr.h"
+#include "ui/effects/animations.h"
+#include "ui/effects/cross_line.h"
+#include "ui/effects/gradient.h"
+#include "ui/effects/radial_animation.h"
+#include "lottie/lottie_icon.h"
+
+namespace Ui {
+
+class BlobsWidget;
+
+class AbstractButton;
+class FlatLabel;
+class RpWidget;
+class AnimatedLabel;
+
+struct CallButtonColors;
+
+enum class CallMuteButtonType {
+	Connecting,
+	Active,
+	Muted,
+	ForceMuted,
+	RaisedHand,
+};
+
+struct CallMuteButtonState {
+	QString text;
+	QString subtext;
+	CallMuteButtonType type = CallMuteButtonType::Connecting;
+};
+
+class CallMuteButton final {
+public:
+	explicit CallMuteButton(
+		not_null<RpWidget*> parent,
+		rpl::producer<bool> &&hideBlobs,
+		CallMuteButtonState initial = CallMuteButtonState());
+	~CallMuteButton();
+
+	void setState(const CallMuteButtonState &state);
+	void setLevel(float level);
+	[[nodiscard]] rpl::producer<Qt::MouseButton> clicks();
+
+	[[nodiscard]] QSize innerSize() const;
+	[[nodiscard]] QRect innerGeometry() const;
+	void moveInner(QPoint position);
+
+	void shake();
+
+	void setVisible(bool visible);
+	void show() {
+		setVisible(true);
+	}
+	void hide() {
+		setVisible(false);
+	}
+	void raise();
+	void lower();
+
+	[[nodiscard]] rpl::producer<CallButtonColors> colorOverrides() const;
+
+	[[nodiscard]] rpl::lifetime &lifetime();
+
+private:
+	enum class HandleMouseState {
+		Enabled,
+		Blocked,
+		Disabled,
+	};
+	struct RadialInfo {
+		std::optional<RadialState> state = std::nullopt;
+		bool isDirectionToShow = false;
+		rpl::variable<float64> rawShowProgress = 0.;
+		float64 realShowProgress = 0.;
+		const style::InfiniteRadialAnimation &st = st::callConnectingRadial;
+	};
+	struct IconState {
+		not_null<Lottie::Icon*> icon;
+		int frameFrom = 0;
+		int frameTo = 0;
+		std::optional<int> otherJumpToFrame;
+
+		inline bool operator==(const IconState &other) const {
+			return (icon == other.icon)
+				&& (frameFrom == other.frameFrom)
+				&& (frameTo == other.frameTo)
+				&& (otherJumpToFrame == other.otherJumpToFrame);
+		}
+		inline bool operator!=(const IconState &other) const {
+			return !(*this == other);
+		}
+	};
+
+	void init();
+	void overridesColors(
+		CallMuteButtonType fromType,
+		CallMuteButtonType toType,
+		float64 progress);
+
+	void setHandleMouseState(HandleMouseState state);
+	void updateCenterLabelGeometry(QRect my, QSize size);
+	void updateLabelGeometry(QRect my, QSize size);
+	void updateSublabelGeometry(QRect my, QSize size);
+	void updateLabelsGeometry();
+
+	[[nodiscard]] IconState initialState();
+	[[nodiscard]] IconState iconStateFrom(CallMuteButtonType previous);
+	[[nodiscard]] IconState randomWavingState();
+	void scheduleIconState(const IconState &state);
+	void startIconState(const IconState &state);
+	void iconAnimationCallback();
+
+	[[nodiscard]] static HandleMouseState HandleMouseStateFromType(
+		CallMuteButtonType type);
+
+	rpl::variable<CallMuteButtonState> _state;
+	float _level = 0.;
+	float64 _crossLineProgress = 0.;
+	QRect _muteIconRect;
+	HandleMouseState _handleMouseState = HandleMouseState::Enabled;
+
+	const style::CallButton &_st;
+
+	const base::unique_qptr<BlobsWidget> _blobs;
+	const base::unique_qptr<AbstractButton> _content;
+	const base::unique_qptr<AnimatedLabel> _centerLabel;
+	const base::unique_qptr<AnimatedLabel> _label;
+	const base::unique_qptr<AnimatedLabel> _sublabel;
+	int _labelShakeShift = 0;
+
+	RadialInfo _radialInfo;
+	std::unique_ptr<InfiniteRadialAnimation> _radial;
+	const base::flat_map<CallMuteButtonType, anim::gradient_colors> _colors;
+
+	std::array<std::optional<Lottie::Icon>, 4> _icons;
+	IconState _iconState;
+	std::optional<IconState> _scheduledState;
+
+	Animations::Simple _switchAnimation;
+	Animations::Simple _shakeAnimation;
+
+	rpl::event_stream<CallButtonColors> _colorOverrides;
+
+};
+
+} // namespace Ui

Telegram/cmake/td_ui.cmake

@@ -96,6 +96,8 @@ PRIVATE
     ui/chat/message_bar.h
     ui/chat/pinned_bar.cpp
     ui/chat/pinned_bar.h
+    ui/controls/call_mute_button.cpp
+    ui/controls/call_mute_button.h
     ui/controls/delete_message_context_action.cpp
     ui/controls/delete_message_context_action.h
     ui/controls/emoji_button.cpp

Telegram/lib_lottie

@@ -1 +1 @@
-Subproject commit fb40f379d82ffa1fc7506e9a8dddcf48847715ae
+Subproject commit 9739a0d5674df45443197224e1e2da95e3072dd5

Telegram/lib_ui

@@ -1 +1 @@
-Subproject commit 515f215c05498d6f2d50ce9ce81c9e08a773c381
+Subproject commit 2696dbc959f29b773646d5ba6fc882a2ad468565