diff --git a/Telegram/SourceFiles/calls/calls.style b/Telegram/SourceFiles/calls/calls.style index b0ad45ca92..128f5e35a4 100644 --- a/Telegram/SourceFiles/calls/calls.style +++ b/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 { diff --git a/Telegram/SourceFiles/calls/group/calls_group_panel.cpp b/Telegram/SourceFiles/calls/group/calls_group_panel.cpp index 09821cce85..10f2324ea0 100644 --- a/Telegram/SourceFiles/calls/group/calls_group_panel.cpp +++ b/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([] { + auto result = st::groupCallBg->c; + result.setAlphaF(kControlsBackgroundOpacity); + return result; + }); + const auto corners = lifetime.make_state( + 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(); diff --git a/Telegram/SourceFiles/calls/group/calls_group_panel.h b/Telegram/SourceFiles/calls/group/calls_group_panel.h index c9b5354244..ed14ca4c37 100644 --- a/Telegram/SourceFiles/calls/group/calls_group_panel.h +++ b/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 _videoMode; + object_ptr _controlsBackground = { nullptr }; object_ptr _settings = { nullptr }; object_ptr _callShare = { nullptr }; object_ptr _video = { nullptr }; diff --git a/Telegram/SourceFiles/ui/controls/call_mute_button.cpp b/Telegram/SourceFiles/ui/controls/call_mute_button.cpp index 76b1d6b959..0bcfbdb9f1 100644 --- a/Telegram/SourceFiles/ui/controls/call_mute_button.cpp +++ b/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(); }