diff --git a/Telegram/Resources/icons/calls/volume/speaker.png b/Telegram/Resources/icons/calls/volume/speaker.png new file mode 100644 index 000000000..d7859a773 Binary files /dev/null and b/Telegram/Resources/icons/calls/volume/speaker.png differ diff --git a/Telegram/Resources/icons/calls/volume/speaker@2x.png b/Telegram/Resources/icons/calls/volume/speaker@2x.png new file mode 100644 index 000000000..76dffc756 Binary files /dev/null and b/Telegram/Resources/icons/calls/volume/speaker@2x.png differ diff --git a/Telegram/Resources/icons/calls/volume/speaker@3x.png b/Telegram/Resources/icons/calls/volume/speaker@3x.png new file mode 100644 index 000000000..3397ea286 Binary files /dev/null and b/Telegram/Resources/icons/calls/volume/speaker@3x.png differ diff --git a/Telegram/SourceFiles/calls/calls.style b/Telegram/SourceFiles/calls/calls.style index 612a52b6b..bb5e042fd 100644 --- a/Telegram/SourceFiles/calls/calls.style +++ b/Telegram/SourceFiles/calls/calls.style @@ -778,7 +778,13 @@ groupCallMajorBlobMaxRadius: 4px; groupCallMinorBlobIdleRadius: 3px; groupCallMinorBlobMaxRadius: 12px; -groupCallMenuVolumeItemHeight: 100px; +groupCallMuteCrossLine: CrossLineAnimation { + fg: groupCallIconFg; + icon: icon {{ "calls/volume/speaker", groupCallIconFg }}; + startPosition: point(2px, 5px); + endPosition: point(16px, 19px); + stroke: 2px; +} callTopBarMuteCrossLine: CrossLineAnimation { fg: callBarFg; diff --git a/Telegram/SourceFiles/calls/calls_volume_item.cpp b/Telegram/SourceFiles/calls/calls_volume_item.cpp index 84550a48c..ab8701f57 100644 --- a/Telegram/SourceFiles/calls/calls_volume_item.cpp +++ b/Telegram/SourceFiles/calls/calls_volume_item.cpp @@ -8,6 +8,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL #include "calls/calls_volume_item.h" #include "calls/calls_group_common.h" +#include "ui/effects/cross_line.h" #include "ui/widgets/continuous_sliders.h" #include "styles/style_calls.h" #include "styles/style_media_player.h" @@ -34,11 +35,18 @@ MenuVolumeItem::MenuVolumeItem( this, st::mediaPlayerPanelPlayback)) , _dummyAction(new QAction(parent)) -, _font(st.itemStyle.font) { +, _st(st) +, _font(st.itemStyle.font) +, _stCross(st::groupCallMuteCrossLine) +, _crossLineMute(std::make_unique(_stCross, true)) { initResizeHook(parent->sizeValue()); enableMouseSelecting(); + const auto itemRect = rect() - st.itemPadding; + const auto speakerRect = QRect(itemRect.topLeft(), _stCross.icon.size()); + const auto volumeRect = speakerRect.translated(_stCross.icon.width(), 0); + paintRequest( ) | rpl::start_with_next([=](const QRect &clip) { Painter p(this); @@ -53,7 +61,12 @@ MenuVolumeItem::MenuVolumeItem( : (enabled ? st.itemFg : st.itemFgDisabled)); p.setFont(_font); const auto volume = std::round(_slider->value() * kMaxVolumePercent); - p.drawText(QPoint(0, _font->ascent), u"%1%"_q.arg(volume)); + p.drawText(volumeRect, u"%1%"_q.arg(volume), style::al_center); + + _crossLineMute->paint( + p, + speakerRect.topLeft(), + _crossLineAnimation.value(_localMuted ? 1. : 0.)); }, lifetime()); setCloudVolume(startVolume); @@ -63,10 +76,17 @@ MenuVolumeItem::MenuVolumeItem( if (_localMuted != newMuted) { _localMuted = newMuted; _toggleMuteLocallyRequests.fire_copy(newMuted); + + _crossLineAnimation.start( + [=] { update(speakerRect); }, + _localMuted ? 0. : 1., + _localMuted ? 1. : 0., + st::callPanelDuration); } if (value > 0) { _changeVolumeLocallyRequests.fire(value * _maxVolume); } + update(volumeRect); }); const auto returnVolume = [=] { @@ -122,7 +142,8 @@ MenuVolumeItem::MenuVolumeItem( _waitingForUpdateVolume = false; }, lifetime()); - _slider->setGeometry(rect()); + _slider->setGeometry(itemRect + - style::margins(0, contentHeight() / 2, 0, 0)); } void MenuVolumeItem::setCloudVolume(int volume) { @@ -148,7 +169,9 @@ bool MenuVolumeItem::isEnabled() const { } int MenuVolumeItem::contentHeight() const { - return st::groupCallMenuVolumeItemHeight; + return _st.itemPadding.top() + + _st.itemPadding.bottom() + + _stCross.icon.height() * 2; } rpl::producer MenuVolumeItem::toggleMuteRequests() const { diff --git a/Telegram/SourceFiles/calls/calls_volume_item.h b/Telegram/SourceFiles/calls/calls_volume_item.h index e047a9f6f..d76a17f6d 100644 --- a/Telegram/SourceFiles/calls/calls_volume_item.h +++ b/Telegram/SourceFiles/calls/calls_volume_item.h @@ -11,6 +11,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL #include "ui/widgets/menu/menu_item_base.h" namespace Ui { +class CrossLineAnimation; class MediaSlider; } // namespace Ui @@ -55,7 +56,12 @@ private: const base::unique_qptr _slider; const not_null _dummyAction; + const style::Menu &_st; const style::font &_font; + const style::CrossLineAnimation &_stCross; + + const std::unique_ptr _crossLineMute; + Ui::Animations::Simple _crossLineAnimation; rpl::event_stream _toggleMuteRequests; rpl::event_stream _toggleMuteLocallyRequests;