Improve video chat controls layout.

Telegram/SourceFiles/calls/calls.style

@@ -678,6 +678,7 @@ groupCallShareBoxList: PeerList(groupCallMembersList) {
 groupCallMembersTop: 51px;
 groupCallTitleTop: 8px;
 groupCallSubtitleTop: 26px;
+groupCallWideVideoTop: 24px;
 
 groupCallMembersMargin: margins(16px, 16px, 16px, 28px);
 groupCallAddMember: SettingsButton(defaultSettingsButton) {
@@ -832,6 +833,10 @@ groupCallButtonSkip: 43px;
 groupCallButtonSkipSmall: 4px;
 groupCallButtonBottomSkip: 145px;
 groupCallButtonBottomSkipSmall: 95px;
+groupCallButtonBottomSkipWide: 89px;
+groupCallMembersBottomSkipSmall: 72px;
+groupCallControlsBackMargin: margins(2px, 2px, 2px, 2px);
+groupCallControlsBackRadius: 12px;
 groupCallMuteBottomSkip: 160px;
 
 groupCallTopBarUserpics: GroupCallUserpics {

Telegram/SourceFiles/calls/group/calls_group_panel.cpp

@@ -26,6 +26,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/layers/generic_box.h"
 #include "ui/text/text_utilities.h"
 #include "ui/toasts/common_toasts.h"
+#include "ui/round_rect.h"
 #include "ui/special_buttons.h"
 #include "info/profile/info_profile_values.h" // Info::Profile::Value.
 #include "core/application.h"
@@ -63,6 +64,7 @@ constexpr auto kSpacePushToTalkDelay = crl::time(250);
 constexpr auto kRecordingAnimationDuration = crl::time(1200);
 constexpr auto kRecordingOpacity = 0.6;
 constexpr auto kStartNoConfirmation = TimeId(10);
+constexpr auto kControlsBackgroundOpacity = 0.8;
 
 class InviteController final : public ParticipantsBoxController {
 public:
@@ -706,7 +708,10 @@ void Panel::refreshLeftButton() {
 	raw->setColorOverrides(_mute->colorOverrides());
 
 	if (!_video) {
-		_video.create(widget(), st::groupCallVideoSmall);
+		_video.create(
+			widget(),
+			st::groupCallVideoSmall,
+			&st::groupCallVideoActiveSmall);
 		_video->show();
 		_video->setClickedCallback([=] {
 			const auto sharing = _call->isScreenSharing();
@@ -937,10 +942,31 @@ void Panel::setupMembers() {
 	setupPinnedVideo();
 }
 
+void Panel::raiseControls() {
+	if (_controlsBackground) {
+		_controlsBackground->raise();
+	}
+	const auto buttons = {
+		&_settings,
+		&_callShare,
+		&_screenShare,
+		&_video,
+		&_hangup
+	};
+	for (const auto button : buttons) {
+		if (const auto raw = button->data()) {
+			raw->raise();
+		}
+	}
+	_mute->raise();
+}
+
 void Panel::setupPinnedVideo() {
 	_pinnedVideo.create(widget());
 	_pinnedVideo->setVisible(_mode == PanelMode::Wide);
 
+	raiseControls();
+
 	rpl::combine(
 		_pinnedVideo->shownValue(),
 		_call->videoLargeTrackValue()
@@ -1517,10 +1543,36 @@ bool Panel::updateMode() {
 		_members->setMode(mode);
 	}
 	_pinnedVideo->setVisible(mode == PanelMode::Wide);
+	refreshControlsBackground();
 	updateControlsGeometry();
 	return true;
 }
 
+void Panel::refreshControlsBackground() {
+	if (_mode != PanelMode::Wide) {
+		_controlsBackground.destroy();
+	} else if (_controlsBackground) {
+		return;
+	}
+	_controlsBackground.create(widget());
+	_controlsBackground->show();
+	auto &lifetime = _controlsBackground->lifetime();
+	const auto color = lifetime.make_state<style::complex_color>([] {
+		auto result = st::groupCallBg->c;
+		result.setAlphaF(kControlsBackgroundOpacity);
+		return result;
+	});
+	const auto corners = lifetime.make_state<Ui::RoundRect>(
+		st::groupCallControlsBackRadius,
+		color->color());
+	_controlsBackground->paintRequest(
+	) | rpl::start_with_next([=] {
+		auto p = QPainter(_controlsBackground.data());
+		corners->paint(p, _controlsBackground->rect());
+	}, lifetime);
+	raiseControls();
+}
+
 void Panel::updateControlsGeometry() {
 	if (widget()->size().isEmpty() || (!_settings && !_callShare)) {
 		return;
@@ -1560,6 +1612,16 @@ void Panel::updateControlsGeometry() {
 		}
 		_hangup->setStyle(st::groupCallHangupSmall);
 		_hangup->moveToLeft(left, buttonsTop);
+		left += _hangup->width();
+		if (_controlsBackground) {
+			const auto rect = QRect(
+				left - fullWidth,
+				buttonsTop,
+				fullWidth,
+				_hangup->height());
+			_controlsBackground->setGeometry(
+				rect.marginsAdded(st::groupCallControlsBackMargin));
+		}
 	} else {
 		_mute->setStyle(st::callMuteButton);
 		const auto muteTop = widget()->height()
@@ -1614,11 +1676,6 @@ void Panel::updateMembersGeometry() {
 		return;
 	}
 	const auto desiredHeight = _members->desiredHeight();
-	const auto muteTop = widget()->height() - st::groupCallMuteBottomSkip;
-	const auto membersTop = st::groupCallMembersTop;
-	const auto availableHeight = muteTop
-		- membersTop
-		- st::groupCallMembersMargin.bottom();
 	if (_mode == PanelMode::Wide) {
 		_members->setGeometry(
 			st::groupCallNarrowSkip,
@@ -1627,12 +1684,20 @@ void Panel::updateMembersGeometry() {
 			std::min(desiredHeight, widget()->height()));
 		const auto pinnedLeft = st::groupCallNarrowSkip * 2
 			+ st::groupCallNarrowSize.width();
+		const auto pinnedTop = st::groupCallWideVideoTop;
 		_pinnedVideo->setGeometry(
 			pinnedLeft,
-			membersTop,
+			pinnedTop,
 			widget()->width() - pinnedLeft - st::groupCallNarrowSkip,
-			availableHeight);
+			widget()->height() - pinnedTop - st::groupCallNarrowSkip);
 	} else {
+		const auto membersBottom = _videoMode.current()
+			? (widget()->height() - st::groupCallMembersBottomSkipSmall)
+			: (widget()->height() - st::groupCallMuteBottomSkip);
+		const auto membersTop = st::groupCallMembersTop;
+		const auto availableHeight = membersBottom
+			- st::groupCallMembersMargin.bottom()
+			- membersTop;
 		const auto membersWidthAvailable = widget()->width()
 			- st::groupCallMembersMargin.left()
 			- st::groupCallMembersMargin.right();

Telegram/SourceFiles/calls/group/calls_group_panel.h

@@ -90,10 +90,12 @@ private:
 
 	bool handleClose();
 	void startScheduledNow();
+	void raiseControls();
 
 	bool updateMode();
 	void updateControlsGeometry();
 	void updateMembersGeometry();
+	void refreshControlsBackground();
 	void showControls();
 	void refreshLeftButton();
 
@@ -146,6 +148,7 @@ private:
 	ChooseJoinAsProcess _joinAsProcess;
 	rpl::variable<bool> _videoMode;
 
+	object_ptr<Ui::RpWidget> _controlsBackground = { nullptr };
 	object_ptr<Ui::CallButton> _settings = { nullptr };
 	object_ptr<Ui::CallButton> _callShare = { nullptr };
 	object_ptr<Ui::CallButton> _video = { nullptr };

Telegram/SourceFiles/ui/controls/call_mute_button.cpp

@@ -1064,6 +1064,9 @@ void CallMuteButton::moveInner(QPoint position) {
 }
 
 void CallMuteButton::setVisible(bool visible) {
+	_centerLabel->setVisible(visible);
+	_label->setVisible(visible);
+	_sublabel->setVisible(visible);
 	_content->setVisible(visible);
 	_blobs->setVisible(visible);
 }
@@ -1071,9 +1074,15 @@ void CallMuteButton::setVisible(bool visible) {
 void CallMuteButton::raise() {
 	_blobs->raise();
 	_content->raise();
+	_centerLabel->raise();
+	_label->raise();
+	_sublabel->raise();
 }
 
 void CallMuteButton::lower() {
+	_centerLabel->lower();
+	_label->lower();
+	_sublabel->lower();
 	_content->lower();
 	_blobs->lower();
 }