Remove media_volume icon, use volume slider.

Telegram/SourceFiles/media/view/media_clip_controller.cpp

@@ -8,7 +8,6 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "media/view/media_clip_controller.h"
 
 #include "media/view/media_clip_playback.h"
-#include "media/view/media_clip_volume_controller.h"
 #include "styles/style_mediaview.h"
 #include "ui/widgets/labels.h"
 #include "ui/widgets/continuous_sliders.h"
@@ -24,7 +23,7 @@ Controller::Controller(QWidget *parent) : TWidget(parent)
 , _playPauseResume(this, st::mediaviewPlayButton)
 , _playbackSlider(this, st::mediaviewPlayback)
 , _playback(std::make_unique<Playback>())
-, _volumeController(this)
+, _volumeController(this, st::mediaviewPlayback)
 , _fullScreenToggle(this, st::mediaviewFullScreenButton)
 , _playedAlready(this, st::mediaviewPlayProgressLabel)
 , _toPlayLeft(this, st::mediaviewPlayProgressLabel)
@@ -33,11 +32,15 @@ Controller::Controller(QWidget *parent) : TWidget(parent)
 	_fadeAnimation->setFinishedCallback([this] { fadeFinished(); });
 	_fadeAnimation->setUpdatedCallback([this](float64 opacity) { fadeUpdated(opacity); });
 
-	_volumeController->setVolume(Global::VideoVolume());
+	_volumeController->setValue(Global::VideoVolume());
+	_volumeController->setChangeProgressCallback([=](float64 value) {
+		volumeChanged(value);
+	});
+	//_volumeController->setChangeFinishedCallback();
 
 	connect(_playPauseResume, SIGNAL(clicked()), this, SIGNAL(playPressed()));
 	connect(_fullScreenToggle, SIGNAL(clicked()), this, SIGNAL(toFullScreenPressed()));
-	connect(_volumeController, SIGNAL(volumeChanged(float64)), this, SIGNAL(volumeChanged(float64)));
+	//connect(_volumeController, SIGNAL(volumeChanged(float64)), this, SIGNAL(volumeChanged(float64)));
 
 	_playback->setInLoadingStateChangedCallback([this](bool loading) {
 		_playbackSlider->setDisabled(loading);
@@ -80,12 +83,15 @@ void Controller::startFading(Callback start) {
 	if (!_fadeAnimation->animating()) {
 		showChildren();
 		_playbackSlider->disablePaint(true);
+		_volumeController->disablePaint(true);
 		_childrenHidden = false;
 	}
 	start();
 	if (_fadeAnimation->animating()) {
 		for (const auto child : children()) {
-			if (child->isWidgetType() && child != _playbackSlider) {
+			if (child->isWidgetType()
+				&& child != _playbackSlider
+				&& child != _volumeController) {
 				static_cast<QWidget*>(child)->hide();
 			}
 		}
@@ -94,6 +100,7 @@ void Controller::startFading(Callback start) {
 		fadeFinished();
 	}
 	_playbackSlider->disablePaint(false);
+	_volumeController->disablePaint(false);
 }
 
 void Controller::showAnimated() {
@@ -114,6 +121,7 @@ void Controller::fadeFinished() {
 
 void Controller::fadeUpdated(float64 opacity) {
 	_playbackSlider->setFadeOpacity(opacity);
+	_volumeController->setFadeOpacity(opacity);
 }
 
 void Controller::updatePlayback(const Player::TrackState &state) {
@@ -197,7 +205,8 @@ void Controller::resizeEvent(QResizeEvent *e) {
 	int fullScreenTop = (height() - _fullScreenToggle->height()) / 2;
 	_fullScreenToggle->moveToRight(st::mediaviewFullScreenLeft, fullScreenTop);
 
-	_volumeController->moveToRight(st::mediaviewFullScreenLeft + _fullScreenToggle->width() + st::mediaviewVolumeLeft, (height() - _volumeController->height()) / 2);
+	_volumeController->resize(st::mediaviewVolumeWidth, st::mediaviewPlayback.seekSize.height());
+	_volumeController->moveToRight(st::mediaviewFullScreenLeft + _fullScreenToggle->width() + st::mediaviewVolumeLeft, st::mediaviewPlaybackTop);
 
 	auto playbackWidth = width() - st::mediaviewPlayPauseLeft - _playPauseResume->width() - playTop - fullScreenTop - _volumeController->width() - st::mediaviewVolumeLeft - _fullScreenToggle->width() - st::mediaviewFullScreenLeft;
 	_playbackSlider->resize(playbackWidth, st::mediaviewPlayback.seekSize.height());
@@ -216,6 +225,7 @@ void Controller::paintEvent(QPaintEvent *e) {
 	if (_childrenHidden) {
 		showChildren();
 		_playbackSlider->setFadeOpacity(1.);
+		_volumeController->setFadeOpacity(1.);
 		_childrenHidden = false;
 	}
 	App::roundRect(p, rect(), st::mediaviewSaveMsgBg, MediaviewSaveCorners);

Telegram/SourceFiles/media/view/media_clip_controller.h

@@ -22,7 +22,6 @@ struct TrackState;
 namespace Clip {
 
 class Playback;
-class VolumeController;
 
 class Controller : public TWidget {
 	Q_OBJECT
@@ -74,7 +73,7 @@ private:
 	object_ptr<Ui::IconButton> _playPauseResume;
 	object_ptr<Ui::MediaSlider> _playbackSlider;
 	std::unique_ptr<Playback> _playback;
-	object_ptr<VolumeController> _volumeController;
+	object_ptr<Ui::MediaSlider> _volumeController;
 	object_ptr<Ui::IconButton> _fullScreenToggle;
 	object_ptr<Ui::LabelSimple> _playedAlready;
 	object_ptr<Ui::LabelSimple> _toPlayLeft;

Telegram/SourceFiles/media/view/media_clip_volume_controller.cpp

@@ -1,99 +0,0 @@
-/*
-This file is part of Telegram Desktop,
-the official desktop application for the Telegram messaging service.
-
-For license and copyright information please follow this link:
-https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
-*/
-#include "media/view/media_clip_volume_controller.h"
-
-#include "styles/style_mediaview.h"
-
-namespace Media {
-namespace Clip {
-
-VolumeController::VolumeController(QWidget *parent) : TWidget(parent) {
-	resize(st::mediaviewVolumeSize);
-	setCursor(style::cur_pointer);
-	setMouseTracking(true);
-}
-
-void VolumeController::setVolume(float64 volume) {
-	_volume = volume;
-	update();
-}
-
-void VolumeController::paintEvent(QPaintEvent *e) {
-	Painter p(this);
-
-	int32 top = st::mediaviewVolumeIconTop;
-	int32 left = (width() - st::mediaviewVolumeIcon.width()) / 2;
-	int32 mid = left + qRound(st::mediaviewVolumeIcon.width() * _volume);
-	int32 right = left + st::mediaviewVolumeIcon.width();
-
-	if (mid > left) {
-		p.setClipRect(rtlrect(left, top, mid - left, st::mediaviewVolumeIcon.height(), width()));
-		auto over = _a_over.current(getms(), _over ? 1. : 0.);
-		if (over < 1.) {
-			st::mediaviewVolumeOnIcon.paint(p, QPoint(left, top), width());
-		}
-		if (over > 0.) {
-			p.setOpacity(over);
-			st::mediaviewVolumeOnIconOver.paint(p, QPoint(left, top), width());
-			p.setOpacity(1.);
-		}
-	}
-	if (right > mid) {
-		p.setClipRect(rtlrect(mid, top, right - mid, st::mediaviewVolumeIcon.height(), width()));
-		st::mediaviewVolumeIcon.paint(p, QPoint(left, top), width());
-	}
-}
-
-void VolumeController::mouseMoveEvent(QMouseEvent *e) {
-	if (_downCoord < 0) {
-		return;
-	}
-	int delta = e->pos().x() - _downCoord;
-	int left = (width() - st::mediaviewVolumeIcon.width()) / 2;
-	float64 startFrom = snap((_downCoord - left) / float64(st::mediaviewVolumeIcon.width()), 0., 1.);
-	float64 add = delta / float64(4 * st::mediaviewVolumeIcon.width());
-	auto newVolume = snap(startFrom + add, 0., 1.);
-	changeVolume(newVolume);
-}
-
-void VolumeController::mousePressEvent(QMouseEvent *e) {
-	_downCoord = snap(e->pos().x(), 0, width());
-	int left = (width() - st::mediaviewVolumeIcon.width()) / 2;
-	auto newVolume = snap((_downCoord - left) / float64(st::mediaviewVolumeIcon.width()), 0., 1.);
-	changeVolume(newVolume);
-}
-
-void VolumeController::changeVolume(float64 newVolume) {
-	if (newVolume != _volume) {
-		setVolume(newVolume);
-		emit volumeChanged(_volume);
-	}
-}
-
-void VolumeController::mouseReleaseEvent(QMouseEvent *e) {
-	_downCoord = -1;
-}
-
-void VolumeController::enterEventHook(QEvent *e) {
-	setOver(true);
-}
-
-void VolumeController::leaveEventHook(QEvent *e) {
-	setOver(false);
-}
-
-void VolumeController::setOver(bool over) {
-	if (_over == over) return;
-
-	_over = over;
-	auto from = _over ? 0. : 1., to = _over ? 1. : 0.;
-	_a_over.start([this] { update(); }, from, to, st::mediaviewOverDuration);
-}
-
-} // namespace Clip
-} // namespace Media

Telegram/SourceFiles/media/view/media_clip_volume_controller.h

@@ -1,45 +0,0 @@
-/*
-This file is part of Telegram Desktop,
-the official desktop application for the Telegram messaging service.
-
-For license and copyright information please follow this link:
-https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
-*/
-#pragma once
-
-namespace Media {
-namespace Clip {
-
-class VolumeController : public TWidget {
-	Q_OBJECT
-
-public:
-	VolumeController(QWidget *parent);
-
-	void setVolume(float64 volume);
-
-signals:
-	void volumeChanged(float64 volume);
-
-protected:
-	void paintEvent(QPaintEvent *e) override;
-	void mouseMoveEvent(QMouseEvent *e) override;
-	void mousePressEvent(QMouseEvent *e) override;
-	void mouseReleaseEvent(QMouseEvent *e) override;
-	void enterEventHook(QEvent *e) override;
-	void leaveEventHook(QEvent *e) override;
-
-private:
-	void setOver(bool over);
-	void changeVolume(float64 newVolume);
-
-	float64 _volume = 0.;
-	int _downCoord = -1; // < 0 means mouse is not pressed
-
-	bool _over = false;
-	Animation _a_over;
-
-};
-
-} // namespace Clip
-} // namespace Media

Telegram/SourceFiles/media/view/mediaview.style

@@ -43,7 +43,7 @@ mediaviewPauseIcon: icon {{ "media_pause", mediaviewPlaybackIconFg, point(1px, 1
 mediaviewPauseIconOver: icon {{ "media_pause", mediaviewPlaybackIconFgOver, point(1px, 1px) }};
 mediaviewPlayPauseLeft: 17px;
 mediaviewFullScreenLeft: 17px;
-mediaviewVolumeLeft: 15px;
+mediaviewVolumeLeft: 7px;
 
 mediaviewFullScreenButton: IconButton(mediaviewPlayButton) {
 	icon: icon {{ "media_fullscreen_to", mediaviewPlaybackIconFg, point(0px, 0px) }};
@@ -55,11 +55,7 @@ mediaviewFullScreenOutIconOver: icon {{ "media_fullscreen_from", mediaviewPlayba
 
 mediaviewPlaybackTop: 28px;
 
-mediaviewVolumeSize: size(44px, 20px);
+mediaviewVolumeWidth: 60px;
-mediaviewVolumeIcon: icon {{ "media_volume", mediaviewPlaybackInactiveOver, point(0px, 0px) }};
-mediaviewVolumeOnIcon: icon {{ "media_volume", mediaviewPlaybackActive, point(0px, 0px) }};
-mediaviewVolumeOnIconOver: icon {{ "media_volume", mediaviewPlaybackActiveOver, point(0px, 0px) }};
-mediaviewVolumeIconTop: 8px;
 mediaviewControllerRadius: 25px;
 
 mediaviewLeft: icon {{ "mediaview_next-flip_horizontal", mediaviewControlFg }};

Telegram/SourceFiles/ui/widgets/continuous_sliders.cpp

@@ -231,18 +231,20 @@ void MediaSlider::paintEvent(QPaintEvent *e) {
 	auto inactiveFg = disabled ? _st.inactiveFgDisabled : anim::brush(_st.inactiveFg, _st.inactiveFgOver, over);
 	if (mid > from) {
 		auto fromClipRect = horizontal ? QRect(0, 0, mid, height()) : QRect(0, 0, width(), mid);
+		const auto till = std::min(mid + radius, end);
 		auto fromRect = horizontal
-			? QRect(from, (height() - _st.width) / 2, mid + radius - from, _st.width)
+			? QRect(from, (height() - _st.width) / 2, till - from, _st.width)
-			: QRect((width() - _st.width) / 2, from, _st.width, mid + radius - from);
+			: QRect((width() - _st.width) / 2, from, _st.width, till - from);
 		p.setClipRect(fromClipRect);
 		p.setBrush(horizontal ? activeFg : inactiveFg);
 		p.drawRoundedRect(fromRect, radius, radius);
 	}
 	if (end > mid) {
 		auto endClipRect = horizontal ? QRect(mid, 0, width() - mid, height()) : QRect(0, mid, width(), height() - mid);
+		const auto begin = std::max(mid - radius, from);
 		auto endRect = horizontal
-			? QRect(mid - radius, (height() - _st.width) / 2, end - (mid - radius), _st.width)
+			? QRect(begin, (height() - _st.width) / 2, end - begin, _st.width)
-			: QRect((width() - _st.width) / 2, mid - radius, _st.width, end - (mid - radius));
+			: QRect((width() - _st.width) / 2, begin, _st.width, end - begin);
 		p.setClipRect(endClipRect);
 		p.setBrush(horizontal ? inactiveFg : activeFg);
 		p.drawRoundedRect(endRect, radius, radius);

Telegram/gyp/telegram_sources.txt

@@ -370,8 +370,6 @@
 <(src_loc)/media/view/media_clip_controller.h
 <(src_loc)/media/view/media_clip_playback.cpp
 <(src_loc)/media/view/media_clip_playback.h
-<(src_loc)/media/view/media_clip_volume_controller.cpp
-<(src_loc)/media/view/media_clip_volume_controller.h
 <(src_loc)/media/view/media_view_group_thumbs.cpp
 <(src_loc)/media/view/media_view_group_thumbs.h
 <(src_loc)/media/media_audio.cpp