Update audio player icons.

Telegram/SourceFiles/media/player/media_player.style

@@ -29,12 +29,11 @@ mediaPlayerButton: MediaPlayerButton {
 mediaPlayerButtonSize: size(25px, 30px);
 
 mediaPlayerButtonPosition: point(5px, 10px);
-mediaPlayerSkipIconPosition: point(5px, 12px);
 
 mediaPlayerHeight: 35px;
 mediaPlayerPadding: 8px;
 mediaPlayerNameTop: 22px;
-mediaPlayerPlayLeft: 7px;
+mediaPlayerPlayLeft: 9px;
 mediaPlayerPlaySkip: 1px;
 mediaPlayerPlayTop: 0px;
 mediaPlayerCloseRight: 0px;
@@ -47,61 +46,65 @@ mediaPlayerTime: LabelSimple(defaultLabelSimple) {
 }
 
 mediaPlayerRepeatButton: IconButton {
-	width: 31px;
-	height: 30px;
+	width: 30px;
+	height: 34px;
 
 	icon: icon {
-		{ "player/player_repeat", mediaPlayerActiveFg, point(9px, 11px) }
+		{ "player/player_repeat", mediaPlayerActiveFg }
 	};
-	iconPosition: point(0px, 0px);
+	iconPosition: point(3px, 6px);
 
-	rippleAreaPosition: point(3px, 5px);
-	rippleAreaSize: 25px;
+	rippleAreaPosition: point(2px, 5px);
+	rippleAreaSize: 26px;
 	ripple: RippleAnimation(defaultRippleAnimation) {
 		color: lightButtonBgOver;
 	}
 }
 mediaPlayerRepeatDisabledIcon: icon {
-	{ "player/player_repeat", menuIconFg, point(9px, 11px)}
+	{ "player/player_repeat", menuIconFg }
 };
 mediaPlayerRepeatDisabledIconOver: icon {
-	{ "player/player_repeat", menuIconFgOver, point(9px, 11px)}
+	{ "player/player_repeat", menuIconFgOver }
 };
 mediaPlayerRepeatOneIcon: icon {
-	{ "player/player_repeat_one", mediaPlayerActiveFg, point(9px, 11px)}
+	{ "player/player_repeat_single", mediaPlayerActiveFg }
 };
 mediaPlayerRepeatOneDisabledIcon: icon {
-	{ "player/player_repeat_one", menuIconFg, point(9px, 11px)}
+	{ "player/player_repeat_single", menuIconFg }
 };
 mediaPlayerRepeatOneDisabledIconOver: icon {
-	{ "player/player_repeat_one", menuIconFgOver, point(9px, 11px)}
+	{ "player/player_repeat_single", menuIconFgOver }
 };
 mediaPlayerReverseIcon: icon {
-	{ "player/player_reverse", mediaPlayerActiveFg, point(9px, 11px)}
+	{ "player/player_order", mediaPlayerActiveFg }
 };
 mediaPlayerReverseDisabledIcon: icon {
-	{ "player/player_reverse", menuIconFg, point(9px, 11px)}
+	{ "player/player_order", menuIconFg }
 };
 mediaPlayerReverseDisabledIconOver: icon {
-	{ "player/player_reverse", menuIconFgOver, point(9px, 11px)}
+	{ "player/player_order", menuIconFgOver }
 };
 mediaPlayerShuffleIcon: icon {
-	{ "player/player_shuffle", mediaPlayerActiveFg, point(9px, 11px)}
-};
-mediaPlayerShuffleDisabledIcon: icon {
-	{ "player/player_shuffle", menuIconFg, point(9px, 11px)}
-};
-mediaPlayerShuffleDisabledIconOver: icon {
-	{ "player/player_shuffle", menuIconFgOver, point(9px, 11px)}
-};
-mediaPlayerRepeatReverseIcon: icon {
-	{ "player/player_repeat_reverse", mediaPlayerActiveFg, point(9px, 11px)}
-};
-mediaPlayerRepeatShuffleIcon: icon {
-	{ "player/player_repeat_shuffle", mediaPlayerActiveFg, point(9px, 11px)}
+	{ "player/player_shuffle", mediaPlayerActiveFg }
 };
 mediaPlayerRepeatDisabledRippleBg: windowBgOver;
 
+mediaPlayerPlayButton: IconButton(mediaPlayerRepeatButton) {
+	width: 24px;
+	icon: icon{
+		{ "player/player_play", mediaPlayerActiveFg }
+	};
+	iconPosition: point(0px, 5px);
+	rippleAreaPosition: point(0px, 5px);
+	rippleAreaSize: 24px;
+}
+mediaPlayerPauseIcon: icon{
+	{ "player/player_pause", mediaPlayerActiveFg }
+};
+mediaPlayerCancelIcon: icon{
+	{ "player/panel_close", mediaPlayerActiveFg }
+};
+
 mediaPlayerSpeedButton: IconButton {
 	width: 31px;
 	height: 30px;
@@ -152,66 +155,52 @@ mediaPlayerPopupMenu: PopupMenu(defaultPopupMenu) {
 mediaPlayerMenuCheck: icon {{ "player/player_check", mediaPlayerActiveFg }};
 
 mediaPlayerVolumeIcon0: icon {
-	{ "player/player_volume0", mediaPlayerActiveFg },
+	{ "player/player_mini_off", mediaPlayerActiveFg },
 };
 mediaPlayerVolumeIcon1: icon {
-	{ "player/player_volume1", mediaPlayerActiveFg },
+	{ "player/player_mini_half", mediaPlayerActiveFg },
 };
-mediaPlayerVolumeIcon2: icon {
-	{ "player/player_volume2", mediaPlayerActiveFg },
-};
-mediaPlayerVolumeIcon3: icon {
-	{ "player/player_volume3", mediaPlayerActiveFg },
-};
-mediaPlayerVolumeToggle: IconButton {
-	width: 31px;
-	height: 30px;
-
-	icon: mediaPlayerVolumeIcon0;
-	iconPosition: point(8px, 11px);
-
-	rippleAreaPosition: point(3px, 5px);
-	rippleAreaSize: 25px;
-	ripple: RippleAnimation(defaultRippleAnimation) {
-		color: lightButtonBgOver;
-	}
+mediaPlayerVolumeToggle: IconButton(mediaPlayerRepeatButton) {
+	width: 34px;
+	icon: icon {
+		{ "player/player_mini_full", mediaPlayerActiveFg },
+	};
+	iconPosition: point(5px, 6px);
+	rippleAreaPosition: point(4px, 5px);
 }
 mediaPlayerVolumeMargin: 10px;
 mediaPlayerVolumeSize: size(27px, 100px);
 
-mediaPlayerNextButton: IconButton(mediaPlayerRepeatButton) {
-	width: 25px;
+mediaPlayerNextButton: IconButton(mediaPlayerPlayButton) {
 	icon: icon {
-		{ "player/player_next", mediaPlayerActiveFg, mediaPlayerSkipIconPosition },
+		{ "player/player_forward", mediaPlayerActiveFg },
 	};
-
-	rippleAreaPosition: point(0px, 5px);
 }
 mediaPlayerNextDisabledIcon: icon {
-	{ "player/player_next", mediaPlayerInactiveFg, mediaPlayerSkipIconPosition },
+	{ "player/player_forward", mediaPlayerInactiveFg },
 };
 mediaPlayerPreviousButton: IconButton(mediaPlayerNextButton) {
 	icon: icon {
-		{ "player/player_next-flip_horizontal", mediaPlayerActiveFg, mediaPlayerSkipIconPosition },
+		{ "player/player_backward", mediaPlayerActiveFg },
 	};
-	rippleAreaPosition: point(1px, 5px);
 }
 mediaPlayerPreviousDisabledIcon: icon {
-	{ "player/player_next-flip_horizontal", mediaPlayerInactiveFg, mediaPlayerSkipIconPosition },
+	{ "player/player_backward", mediaPlayerInactiveFg },
 };
 
-touchBarIconPlayerClose: icon {{ "player/player_close", windowFg }};
+touchBarIconPlayerClose: icon {{ "player/panel_close", windowFg }};
 touchBarIconPlayerPlay: icon {{ "media_play", windowFg }};
 touchBarIconPlayerPause: icon {{ "media_pause", windowFg }};
-touchBarIconPlayerNext: icon {{ "player/player_next", windowFg }};
-touchBarIconPlayerPrevious: icon {{ "player/player_next-flip_horizontal", windowFg }};
+touchBarIconPlayerNext: icon {{ "player/player_forward", windowFg }};
+touchBarIconPlayerPrevious: icon {{ "player/player_backward", windowFg }};
 
 mediaPlayerClose: IconButton(mediaPlayerRepeatButton) {
-	width: 37px;
-	icon: icon {{ "player/player_close", menuIconFg, point(10px, 12px) }};
-	iconOver: icon {{ "player/player_close", menuIconFgOver, point(10px, 12px) }};
+	width: 39px;
+	icon: icon {{ "player/panel_close", menuIconFg }};
+	iconOver: icon {{ "player/panel_close", menuIconFgOver }};
+	iconPosition: point(5px, 6px);
 
-	rippleAreaPosition: point(3px, 5px);
+	rippleAreaPosition: point(4px, 5px);
 	ripple: RippleAnimation(defaultRippleAnimation) {
 		color: windowBgOver;
 	}
@@ -245,25 +234,18 @@ mediaPlayerPanelMarginBottom: 10px;
 mediaPlayerPanelWidth: 344px;
 mediaPlayerCoverHeight: 102px;
 
-mediaPlayerPanelClose: IconButton(mediaPlayerClose) {
-	width: 43px;
-	height: 28px;
-	icon: icon {{ "player/player_close", menuIconFg, point(16px, 14px) }};
-	iconOver: icon {{ "player/player_close", menuIconFgOver, point(16px, 14px) }};
-}
-
 mediaPlayerPanelNextButton: IconButton(mediaPlayerRepeatButton) {
 	width: 37px;
-	icon: icon {{ "player/player_panel_next", mediaPlayerActiveFg, point(10px, 10px) }};
+	icon: icon {{ "player/player_forward", mediaPlayerActiveFg, point(6px, 4px) }};
 }
 mediaPlayerPanelNextDisabledIcon: icon {
-	{ "player/player_panel_next", mediaPlayerInactiveFg, point(10px, 10px) },
+	{ "player/player_forward", mediaPlayerInactiveFg, point(6px, 4px) },
 };
 mediaPlayerPanelPreviousButton: IconButton(mediaPlayerPanelNextButton) {
-	icon: icon {{ "player/player_panel_next-flip_horizontal", mediaPlayerActiveFg, point(10px, 10px) }};
+	icon: icon {{ "player/player_backward", mediaPlayerActiveFg, point(6px, 4px) }};
 }
 mediaPlayerPanelPreviousDisabledIcon: icon {
-	{ "player/player_panel_next-flip_horizontal", mediaPlayerInactiveFg, point(10px, 10px) },
+	{ "player/player_backward", mediaPlayerInactiveFg, point(6px, 4px) },
 };
 
 mediaPlayerPanelPadding: 16px;

Telegram/SourceFiles/media/player/media_player_instance.cpp

@@ -497,6 +497,7 @@ bool Instance::moveInPlaylist(
 	const auto jumpById = [&](FullMsgId id) {
 		return jumpByItem(data->history->owner().message(id));
 	};
+	const auto repeatAll = (repeat(data) == RepeatMode::All);
 
 	if (order(data) == OrderMode::Shuffle) {
 		const auto raw = data->shuffleData.get();
@@ -516,7 +517,7 @@ bool Instance::moveInPlaylist(
 				raw->nonPlayedIds.erase(i);
 			}
 		}
-		if (repeat(data) == RepeatMode::All) {
+		if (repeatAll) {
 			ensureShuffleMove(data, delta);
 		}
 		if (raw->nonPlayedIds.empty()
@@ -544,7 +545,8 @@ bool Instance::moveInPlaylist(
 
 	const auto newIndex = *data->playlistIndex
 		+ (order(data) == OrderMode::Reverse ? -delta : delta);
-	const auto useIndex = (!data->playlistSlice
+	const auto useIndex = (!repeatAll
+		|| !data->playlistSlice
 		|| data->playlistSlice->skippedAfter() != 0
 		|| data->playlistSlice->skippedBefore() != 0
 		|| !data->playlistSlice->size())
@@ -553,7 +555,7 @@ bool Instance::moveInPlaylist(
 			% int(data->playlistSlice->size()));
 	if (const auto item = itemByIndex(data, useIndex)) {
 		return jumpByItem(item);
-	} else if (repeat(data) == RepeatMode::All
+	} else if (repeatAll
 		&& data->playlistOtherSlice
 		&& data->playlistOtherSlice->size() > 0) {
 		const auto &other = *data->playlistOtherSlice;

Telegram/SourceFiles/media/player/media_player_repeat_controls.cpp

@@ -53,8 +53,8 @@ void PrepareRepeatDropdown(not_null<Dropdown*> dropdown) {
 		const auto shuffled = (mode == OrderMode::Shuffle);
 		shuffle->setIconOverride(shuffled
 			? &st::mediaPlayerShuffleIcon
-			: &st::mediaPlayerShuffleDisabledIcon,
-			shuffled ? nullptr : &st::mediaPlayerShuffleDisabledIconOver);
+			: &st::mediaPlayerShuffleIcon,
+			shuffled ? nullptr : &st::mediaPlayerShuffleIcon);
 		shuffle->setRippleColorOverride(
 			shuffled ? nullptr : &st::mediaPlayerRepeatDisabledRippleBg);
 		const auto reversed = (mode == OrderMode::Reverse);

Telegram/SourceFiles/media/player/media_player_widget.cpp

@@ -18,6 +18,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/widgets/shadow.h"
 #include "ui/widgets/buttons.h"
 #include "ui/widgets/popup_menu.h"
+#include "ui/wrap/fade_wrap.h"
 #include "ui/effects/ripple_animation.h"
 #include "ui/text/format_values.h"
 #include "ui/text/format_song_document_name.h"
@@ -236,11 +237,13 @@ Widget::Widget(QWidget *parent, not_null<Main::Session*> session)
 : RpWidget(parent)
 , _session(session)
 , _nameLabel(this, st::mediaPlayerName)
-, _timeLabel(this, st::mediaPlayerTime)
-, _playPause(this)
-, _volumeToggle(this, st::mediaPlayerVolumeToggle)
-, _repeatToggle(this, st::mediaPlayerRepeatButton)
-, _playbackSpeed(this, st::mediaPlayerSpeedButton)
+, _rightControls(this, object_ptr<Ui::RpWidget>(this))
+, _timeLabel(rightControls(), st::mediaPlayerTime)
+, _playPause(this, st::mediaPlayerPlayButton)
+, _volumeToggle(rightControls(), st::mediaPlayerVolumeToggle)
+, _repeatToggle(rightControls(), st::mediaPlayerRepeatButton)
+, _orderToggle(rightControls(), st::mediaPlayerRepeatButton)
+, _playbackSpeed(rightControls(), st::mediaPlayerSpeedButton)
 , _close(this, st::mediaPlayerClose)
 , _shadow(this)
 , _playbackSlider(this, st::mediaPlayerPlayback)
@@ -249,6 +252,8 @@ Widget::Widget(QWidget *parent, not_null<Main::Session*> session)
 	setMouseTracking(true);
 	resize(width(), st::mediaPlayerHeight + st::lineWidth);
 
+	_rightControls->show(anim::type::instant);
+
 	_nameLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
 	_timeLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
 
@@ -290,13 +295,16 @@ Widget::Widget(QWidget *parent, not_null<Main::Session*> session)
 		updateVolumeToggleIcon();
 	}, lifetime());
 
-	rpl::combine(
-		Core::App().settings().playerRepeatModeValue(),
-		Core::App().settings().playerOrderModeValue()
+	Core::App().settings().playerRepeatModeValue(
 	) | rpl::start_with_next([=] {
 		updateRepeatToggleIcon();
 	}, lifetime());
 
+	Core::App().settings().playerOrderModeValue(
+	) | rpl::start_with_next([=] {
+		updateOrderToggleIcon();
+	}, lifetime());
+
 	_repeatToggle->setClickedCallback([=] {
 		auto &settings = Core::App().settings();
 		settings.setPlayerRepeatMode([&] {
@@ -342,23 +350,18 @@ Widget::Widget(QWidget *parent, not_null<Main::Session*> session)
 	}, lifetime());
 
 	setType(AudioMsgId::Type::Song);
-	_playPause->finishTransform();
+	//_playPause->finishTransform();
 }
 
 void Widget::updateVolumeToggleIcon() {
-	auto icon = []() -> const style::icon * {
-		auto volume = Core::App().settings().songVolume();
-		if (volume > 0) {
-			if (volume < 1 / 3.) {
-				return &st::mediaPlayerVolumeIcon1;
-			} else if (volume < 2 / 3.) {
-				return &st::mediaPlayerVolumeIcon2;
-			}
-			return &st::mediaPlayerVolumeIcon3;
-		}
-		return nullptr;
-	};
-	_volumeToggle->setIconOverride(icon());
+	_volumeToggle->setIconOverride([] {
+		const auto volume = Core::App().settings().songVolume();
+		return (volume == 0.)
+			? &st::mediaPlayerVolumeIcon0
+			: (volume < 0.5)
+			? &st::mediaPlayerVolumeIcon1
+			: nullptr;
+	}());
 }
 
 void Widget::setCloseCallback(Fn<void()> callback) {
@@ -401,7 +404,7 @@ void Widget::hideShadow() {
 }
 
 QPoint Widget::getPositionForVolumeWidget() const {
-	auto x = _volumeToggle->x();
+	auto x = _volumeToggle->x() + _rightControls->x();
 	x += (_volumeToggle->width() - st::mediaPlayerVolumeSize.width()) / 2;
 	if (rtl()) x = width() - x - st::mediaPlayerVolumeSize.width();
 	return QPoint(x, height());
@@ -412,18 +415,22 @@ void Widget::volumeWidgetCreated(Dropdown *widget) {
 }
 
 QPoint Widget::getPositionForRepeatWidget() const {
-	auto x = _repeatToggle->x();
-	x += (_repeatToggle->width() - st::mediaPlayerVolumeSize.width()) / 2;
+	auto x = _orderToggle->x() + _rightControls->x();
+	x += (_orderToggle->width() - st::mediaPlayerVolumeSize.width()) / 2;
 	if (rtl()) x = width() - x - st::mediaPlayerVolumeSize.width();
 	return QPoint(x, height());
 }
 
 void Widget::repeatWidgetCreated(Dropdown *widget) {
-	_repeatToggle->installEventFilter(widget);
+	_orderToggle->installEventFilter(widget);
 }
 
 Widget::~Widget() = default;
 
+not_null<Ui::RpWidget*> Widget::rightControls() {
+	return _rightControls->entity();
+}
+
 void Widget::handleSeekProgress(float64 progress) {
 	if (!_lastDurationMs) return;
 
@@ -452,19 +459,29 @@ void Widget::resizeEvent(QResizeEvent *e) {
 }
 
 void Widget::updateControlsGeometry() {
-	auto right = st::mediaPlayerCloseRight;
-	_close->moveToRight(right, st::mediaPlayerPlayTop); right += _close->width();
+	_close->moveToRight(st::mediaPlayerCloseRight, st::mediaPlayerPlayTop);
+	auto right = 0;
 	if (hasPlaybackSpeedControl()) {
-		_playbackSpeed->moveToRight(right, st::mediaPlayerPlayTop); right += _playbackSpeed->width();
+		_playbackSpeed->moveToRight(right, 0); right += _playbackSpeed->width();
 	}
-	_repeatToggle->moveToRight(right, st::mediaPlayerPlayTop); right += _repeatToggle->width();
-	_volumeToggle->moveToRight(right, st::mediaPlayerPlayTop); right += _volumeToggle->width();
+	_repeatToggle->moveToRight(right, 0); right += _repeatToggle->width();
+	_orderToggle->moveToRight(right, 0); right += _orderToggle->width();
+	_volumeToggle->moveToRight(right, 0); right += _volumeToggle->width();
+
+	updateControlsWrapGeometry();
 
 	updatePlayPrevNextPositions();
 
 	_playbackSlider->setGeometry(0, height() - st::mediaPlayerPlayback.fullWidth, width(), st::mediaPlayerPlayback.fullWidth);
 }
 
+void Widget::updateControlsWrapGeometry() {
+	rightControls()->resize(getTimeRight() + _timeLabel->width(), _repeatToggle->height());
+	_rightControls->moveToRight(
+		st::mediaPlayerCloseRight + _close->width(),
+		st::mediaPlayerPlayTop);
+}
+
 void Widget::paintEvent(QPaintEvent *e) {
 	Painter p(this);
 	auto fill = e->rect().intersected(QRect(0, 0, width(), st::mediaPlayerHeight));
@@ -504,10 +521,10 @@ void Widget::mouseReleaseEvent(QMouseEvent *e) {
 }
 
 void Widget::updateOverLabelsState(QPoint pos) {
-	auto left = getLabelsLeft();
-	auto right = getLabelsRight();
-	auto labels = myrtlrect(left, 0, width() - right - left, height() - st::mediaPlayerPlayback.fullWidth);
-	auto over = labels.contains(pos);
+	const auto left = getNameLeft();
+	const auto right = getNameRight();
+	const auto labels = myrtlrect(left, 0, width() - right - left, height() - st::mediaPlayerPlayback.fullWidth);
+	const auto over = labels.contains(pos);
 	updateOverLabelsState(over);
 }
 
@@ -531,7 +548,7 @@ void Widget::updatePlayPrevNextPositions() {
 	updateLabelsGeometry();
 }
 
-int Widget::getLabelsLeft() const {
+int Widget::getNameLeft() const {
 	auto result = st::mediaPlayerPlayLeft + _playPause->width();
 	if (_previousTrack) {
 		result += _previousTrack->width() + st::mediaPlayerPlaySkip + _nextTrack->width() + st::mediaPlayerPlaySkip;
@@ -540,10 +557,18 @@ int Widget::getLabelsLeft() const {
 	return result;
 }
 
-int Widget::getLabelsRight() const {
-	auto result = st::mediaPlayerCloseRight + _close->width();
+int Widget::getNameRight() const {
+	return st::mediaPlayerCloseRight
+		+ _close->width()
+		+ st::mediaPlayerPadding;
+}
+
+int Widget::getTimeRight() const {
+	auto result = 0;
 	if (_type == AudioMsgId::Type::Song) {
-		result += _repeatToggle->width() + _volumeToggle->width();
+		result += _repeatToggle->width()
+			+ _orderToggle->width()
+			+ _volumeToggle->width();
 	}
 	if (hasPlaybackSpeedControl()) {
 		result += _playbackSpeed->width();
@@ -553,49 +578,57 @@ int Widget::getLabelsRight() const {
 }
 
 void Widget::updateLabelsGeometry() {
-	auto left = getLabelsLeft();
-	auto right = getLabelsRight();
-
-	auto widthForName = width() - left - right;
-	widthForName -= _timeLabel->width() + 2 * st::normalFont->spacew;
+	const auto left = getNameLeft();
+	const auto widthForName = width()
+		- left
+		- getNameRight();
 	_nameLabel->resizeToWidth(widthForName);
-
 	_nameLabel->moveToLeft(left, st::mediaPlayerNameTop - st::mediaPlayerName.style.font->ascent);
+
+	const auto right = getTimeRight();
 	_timeLabel->moveToRight(right, st::mediaPlayerNameTop - st::mediaPlayerTime.font->ascent);
+
+	updateControlsWrapGeometry();
 }
 
 void Widget::updateRepeatToggleIcon() {
-	const auto type = AudioMsgId::Type::Song;
-	const auto repeat = Core::App().settings().playerRepeatMode();
-	const auto order = Core::App().settings().playerOrderMode();
-	if (repeat == RepeatMode::None && order == OrderMode::Default) {
+	switch (Core::App().settings().playerRepeatMode()) {
+	case RepeatMode::None:
 		_repeatToggle->setIconOverride(
 			&st::mediaPlayerRepeatDisabledIcon,
 			&st::mediaPlayerRepeatDisabledIconOver);
 		_repeatToggle->setRippleColorOverride(
 			&st::mediaPlayerRepeatDisabledRippleBg);
-		return;
+		break;
+	case RepeatMode::One:
+		_repeatToggle->setIconOverride(&st::mediaPlayerRepeatOneIcon);
+		_repeatToggle->setRippleColorOverride(nullptr);
+		break;
+	case RepeatMode::All:
+		_repeatToggle->setIconOverride(nullptr);
+		_repeatToggle->setRippleColorOverride(nullptr);
+		break;
+	}
+}
+
+void Widget::updateOrderToggleIcon() {
+	switch (Core::App().settings().playerOrderMode()) {
+	case OrderMode::Default:
+		_orderToggle->setIconOverride(
+			&st::mediaPlayerReverseDisabledIcon,
+			&st::mediaPlayerReverseDisabledIconOver);
+		_orderToggle->setRippleColorOverride(
+			&st::mediaPlayerRepeatDisabledRippleBg);
+		break;
+	case OrderMode::Reverse:
+		_orderToggle->setIconOverride(nullptr);
+		_orderToggle->setRippleColorOverride(nullptr);
+		break;
+	case OrderMode::Shuffle:
+		_orderToggle->setIconOverride(&st::mediaPlayerShuffleIcon);
+		_orderToggle->setRippleColorOverride(nullptr);
+		break;
 	}
-	const auto &icon = [&]() -> const style::icon& {
-		switch (repeat) {
-		case RepeatMode::None:
-			switch (order) {
-			case OrderMode::Reverse: return st::mediaPlayerReverseIcon;
-			case OrderMode::Shuffle: return st::mediaPlayerShuffleIcon;
-			}
-			break;
-		case RepeatMode::One: return st::mediaPlayerRepeatOneIcon;
-		case RepeatMode::All:
-			switch (order) {
-			case OrderMode::Default: return st::mediaPlayerRepeatButton.icon;
-			case OrderMode::Reverse: return st::mediaPlayerRepeatReverseIcon;
-			case OrderMode::Shuffle: return st::mediaPlayerRepeatShuffleIcon;
-			}
-			break;
-		}
-		Unexpected("Repeat / order values in Settings.");
-	}();
-	_repeatToggle->setIconOverride(&icon);
 }
 
 void Widget::checkForTypeChange() {
@@ -662,15 +695,11 @@ void Widget::handleSongUpdate(const TrackState &state) {
 	if (instance()->isSeeking(_type)) {
 		showPause = true;
 	}
-	auto buttonState = [audio = state.id.audio(), showPause] {
-		if (audio->loading()) {
-			return ButtonState::Cancel;
-		} else if (showPause) {
-			return ButtonState::Pause;
-		}
-		return ButtonState::Play;
-	};
-	_playPause->setState(buttonState());
+	_playPause->setIconOverride(state.id.audio()->loading()
+		? &st::mediaPlayerCancelIcon
+		: showPause
+		? &st::mediaPlayerPauseIcon
+		: nullptr);
 
 	updateTimeText(state);
 }

Telegram/SourceFiles/media/player/media_player_widget.h

@@ -19,6 +19,8 @@ class LabelSimple;
 class IconButton;
 class PlainShadow;
 class FilledSlider;
+template <typename Widget>
+class FadeWrap;
 } // namespace Ui
 
 namespace Media {
@@ -72,19 +74,24 @@ protected:
 	void mouseReleaseEvent(QMouseEvent *e) override;
 
 private:
+	[[nodiscard]] not_null<Ui::RpWidget*> rightControls();
+
 	void handleSeekProgress(float64 progress);
 	void handleSeekFinished(float64 progress);
 
-	int getLabelsLeft() const;
-	int getLabelsRight() const;
+	[[nodiscard]] int getNameLeft() const;
+	[[nodiscard]] int getNameRight() const;
+	[[nodiscard]] int getTimeRight() const;
 	void updateOverLabelsState(QPoint pos);
 	void updateOverLabelsState(bool over);
 
 	void updatePlayPrevNextPositions();
 	void updateLabelsGeometry();
 	void updateRepeatToggleIcon();
+	void updateOrderToggleIcon();
 	void updateControlsVisibility();
 	void updateControlsGeometry();
+	void updateControlsWrapGeometry();
 	void createPrevNextButtons();
 	void destroyPrevNextButtons();
 
@@ -123,12 +130,14 @@ private:
 	class PlayButton;
 	class SpeedButton;
 	object_ptr<Ui::FlatLabel> _nameLabel;
+	object_ptr<Ui::FadeWrap<Ui::RpWidget>> _rightControls;
 	object_ptr<Ui::LabelSimple> _timeLabel;
 	object_ptr<Ui::IconButton> _previousTrack = { nullptr };
-	object_ptr<PlayButton> _playPause;
+	object_ptr<Ui::IconButton> _playPause;
 	object_ptr<Ui::IconButton> _nextTrack = { nullptr };
 	object_ptr<Ui::IconButton> _volumeToggle;
 	object_ptr<Ui::IconButton> _repeatToggle;
+	object_ptr<Ui::IconButton> _orderToggle;
 	object_ptr<SpeedButton> _playbackSpeed;
 	object_ptr<Ui::IconButton> _close;
 	object_ptr<Ui::PlainShadow> _shadow = { nullptr };