Improve screencast source choosing design.

Telegram/Resources/langs/lang.strings

@@ -2000,6 +2000,9 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 "lng_group_call_share_button" = "Share";
 "lng_group_call_video" = "Video";
 "lng_group_call_screen_share" = "Share";
+"lng_group_call_screen_share_start" = "Share Screen";
+"lng_group_call_screen_share_stop" = "Stop Sharing";
+"lng_group_call_screen_title" = "Screen {index}";
 "lng_group_call_unmute_small" = "Unmute";
 "lng_group_call_you_are_live_small" = "Mute";
 "lng_group_call_force_muted_small" = "Muted";

Telegram/SourceFiles/calls/calls.style

@@ -856,8 +856,7 @@ groupCallTopBarOpen: RoundButton(groupCallTopBarJoin) {
 		color: shadowFg;
 	}
 }
-groupCallBox: Box(defaultBox) {
+groupCallBoxButton: RoundButton(defaultBoxButton) {
-	button: RoundButton(defaultBoxButton) {
 	textFg: groupCallActiveFg;
 	textFgOver: groupCallActiveFg;
 	numbersTextFg: groupCallActiveFg;
@@ -867,6 +866,8 @@ groupCallBox: Box(defaultBox) {
 
 	ripple: groupCallRipple;
 }
+groupCallBox: Box(defaultBox) {
+	button: groupCallBoxButton;
 	margin: margins(0px, 56px, 0px, 10px);
 	bg: groupCallMembersBg;
 	title: FlatLabel(boxTitle) {
@@ -1092,8 +1093,46 @@ groupCallStartsWhenTop: 160px;
 groupCallCountdownFont: font(64px semibold);
 groupCallCountdownTop: 52px;
 
-desktopCaptureSourceSize: size(160px, 120px);
+desktopCaptureMargins: margins(12px, 8px, 12px, 6px);
-desktopCaptureSourceSkip: 12px;
+desktopCaptureSourceSize: size(235px, 165px);
+desktopCaptureSourceSkips: size(2px, 10px);
+desktopCaptureSourceTitle: WindowTitle(groupCallTitle) {
+	height: 21px;
+}
+desktopCapturePadding: margins(7px, 7px, 7px, 33px);
+desktopCaptureLabelBottom: 7px;
+desktopCaptureLabel: FlatLabel(defaultFlatLabel) {
+	minWidth: 200px;
+	maxHeight: 20px;
+	textFg: groupCallMembersFg;
+	style: semiboldTextStyle;
+}
+desktopCaptureCancel: RoundButton(defaultBoxButton) {
+	textFg: groupCallActiveFg;
+	textFgOver: groupCallActiveFg;
+	numbersTextFg: groupCallActiveFg;
+	numbersTextFgOver: groupCallActiveFg;
+	textBg: groupCallBg;
+	textBgOver: groupCallMembersBg;
+
+	ripple: groupCallRipple;
+}
+desktopCaptureFinish: RoundButton(desktopCaptureCancel) {
+	textFg: groupCallMemberMutedIcon;
+	textFgOver: groupCallMemberMutedIcon;
+}
+desktopCaptureSubmit: RoundButton(desktopCaptureCancel) {
+	textFg: groupCallIconFg;
+	textFgOver: groupCallIconFg;
+	numbersTextFg: groupCallIconFg;
+	numbersTextFgOver: groupCallIconFg;
+	textBg: groupCallMuted1;
+	textBgOver: groupCallMuted1;
+
+	ripple: RippleAnimation(groupCallRipple) {
+		color: groupCallMuted2;
+	}
+}
 
 groupCallNarrowSkip: 9px;
 groupCallNarrowRowSkip: 8px;

Telegram/SourceFiles/calls/group/calls_group_call.cpp

@@ -322,7 +322,12 @@ GroupCall::~GroupCall() {
 }
 
 bool GroupCall::isScreenSharing() const {
-	return (_videoDeviceId != _videoInputId);
+	return (_videoDeviceId != _videoInputId)
+		&& (_videoOutgoing->state() == Webrtc::VideoState::Active);
+}
+
+QString GroupCall::screenSharingDeviceId() const {
+	return isScreenSharing() ? _videoDeviceId : QString();
 }
 
 void GroupCall::toggleVideo(bool active) {

Telegram/SourceFiles/calls/group/calls_group_call.h

@@ -248,7 +248,8 @@ public:
 
 	void setCurrentAudioDevice(bool input, const QString &deviceId);
 	void setCurrentVideoDevice(const QString &deviceId);
-	bool isScreenSharing() const;
+	[[nodiscard]] bool isScreenSharing() const;
+	[[nodiscard]] QString screenSharingDeviceId() const;
 	void toggleVideo(bool active);
 	void switchToScreenSharing(const QString &uniqueId);
 

Telegram/SourceFiles/calls/group/calls_group_members.cpp

@@ -1460,9 +1460,9 @@ void MembersController::updateRow(
 			Assert(nowSsrc != 0);
 			_soundingRowBySsrc.emplace(nowSsrc, row);
 		}
-		if (isMe(row->peer())) {
+		//if (isMe(row->peer())) {
-			row->setVideoTrack(_call->outgoingVideoTrack());
+		//	row->setVideoTrack(_call->outgoingVideoTrack());
-		}
+		//}
 	}
 	const auto nowNoSounding = _soundingRowBySsrc.empty();
 	if (wasNoSounding && !nowNoSounding) {

Telegram/SourceFiles/calls/group/calls_group_panel.cpp

@@ -484,6 +484,10 @@ QWidget *Panel::chooseSourceParent() {
 	return _window.get();
 }
 
+QString Panel::chooseSourceActiveDeviceId() {
+	return _call->screenSharingDeviceId();
+}
+
 rpl::lifetime &Panel::chooseSourceInstanceLifetime() {
 	return _window->lifetime();
 }
@@ -492,6 +496,10 @@ void Panel::chooseSourceAccepted(const QString &deviceId) {
 	_call->switchToScreenSharing(deviceId);
 }
 
+void Panel::chooseSourceStop() {
+	_call->toggleVideo(false);
+}
+
 void Panel::initWindow() {
 	_window->setAttribute(Qt::WA_OpaquePaintEvent);
 	_window->setAttribute(Qt::WA_NoSystemBackground);

Telegram/SourceFiles/calls/group/calls_group_panel.h

@@ -116,8 +116,10 @@ private:
 	void subscribeToPeerChanges();
 
 	QWidget *chooseSourceParent() override;
+	QString chooseSourceActiveDeviceId() override;
 	rpl::lifetime &chooseSourceInstanceLifetime() override;
 	void chooseSourceAccepted(const QString &deviceId) override;
+	void chooseSourceStop() override;
 
 	const not_null<GroupCall*> _call;
 	not_null<PeerData*> _peer;

Telegram/SourceFiles/calls/group/ui/desktop_capture_choose_source.cpp

@@ -11,8 +11,12 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/widgets/scroll_area.h"
 #include "ui/widgets/labels.h"
 #include "ui/widgets/buttons.h"
+#include "ui/effects/ripple_animation.h"
+#include "ui/image/image.h"
+#include "ui/platform/ui_platform_window_title.h"
 #include "base/platform/base_platform_info.h"
 #include "webrtc/webrtc_video_track.h"
+#include "lang/lang_keys.h"
 #include "styles/style_calls.h"
 
 #include <tgcalls/desktop_capturer/DesktopCaptureSourceManager.h>
@@ -33,6 +37,19 @@ struct Preview {
 	rpl::lifetime lifetime;
 };
 
+class SourceButton final : public RippleButton {
+public:
+	using RippleButton::RippleButton;
+
+private:
+	QImage prepareRippleMask() const override;
+
+};
+
+QImage SourceButton::prepareRippleMask() const {
+	return RippleAnimation::roundRectMask(size(), st::roundRadiusLarge);
+}
+
 class Source final {
 public:
 	Source(
@@ -43,19 +60,23 @@ public:
 	void setGeometry(QRect geometry);
 	void clearHelper();
 
-	[[nodiscard]] bool ready() const;
+	[[nodiscard]] rpl::producer<> activations() const;
-	[[nodiscard]] rpl::producer<> clicks() const;
+	void setActive(bool active);
 	[[nodiscard]] rpl::lifetime &lifetime();
 
 private:
 	void paint();
 	void setupPreview();
 
-	AbstractButton _widget;
+	SourceButton _widget;
 	FlatLabel _label;
+	RoundRect _selectedRect;
+	RoundRect _activeRect;
 	tgcalls::DesktopCaptureSource _source;
 	std::unique_ptr<Preview> _preview;
+	rpl::event_stream<> _activations;
 	QImage _frame;
+	bool _active = false;
 
 };
 
@@ -80,11 +101,16 @@ private:
 		std::unique_ptr<ChooseSourceProcess>> &Map();
 
 	const not_null<ChooseSourceDelegate*> _delegate;
-	const std::unique_ptr<::Ui::Window> _window;
+	const std::unique_ptr<Ui::Window> _window;
 	const std::unique_ptr<ScrollArea> _scroll;
 	const not_null<RpWidget*> _inner;
+	const not_null<RpWidget*> _bottom;
+	const not_null<RoundButton*> _submit;
+	const not_null<RoundButton*> _finish;
 
 	std::vector<std::unique_ptr<Source>> _sources;
+	Source *_selected = nullptr;
+	QString _selectedId;
 
 };
 
@@ -109,25 +135,45 @@ Source::Source(
 	not_null<QWidget*> parent,
 	tgcalls::DesktopCaptureSource source,
 	const QString &title)
-: _widget(parent)
+: _widget(parent, st::groupCallRipple)
-, _label(&_widget, title)
+, _label(&_widget, title, st::desktopCaptureLabel)
+, _selectedRect(ImageRoundRadius::Large, st::groupCallMembersBgOver)
+, _activeRect(ImageRoundRadius::Large, st::groupCallMuted1)
 , _source(source) {
 	_widget.paintRequest(
 	) | rpl::start_with_next([=] {
 		paint();
 	}, _widget.lifetime());
 
+	_label.setAttribute(Qt::WA_TransparentForMouseEvents);
+
 	_widget.sizeValue(
 	) | rpl::start_with_next([=](QSize size) {
-		_label.resizeToNaturalWidth(size.width());
+		const auto padding = st::desktopCapturePadding;
+		_label.resizeToNaturalWidth(
+			size.width() - padding.left() - padding.right());
 		_label.move(
 			(size.width() - _label.width()) / 2,
-			size.height() - _label.height());
+			size.height() - _label.height() - st::desktopCaptureLabelBottom);
 	}, _label.lifetime());
+
+	_widget.setClickedCallback([=] {
+		setActive(true);
+	});
 }
 
-rpl::producer<> Source::clicks() const {
+rpl::producer<> Source::activations() const {
-	return _widget.clicks() | rpl::to_empty;
+	return _activations.events();
+}
+
+void Source::setActive(bool active) {
+	if (_active != active) {
+		_active = active;
+		_widget.update();
+		if (active) {
+			_activations.fire({});
+		}
+	}
 }
 
 void Source::setGeometry(QRect geometry) {
@@ -144,14 +190,21 @@ void Source::paint() {
 	if (_frame.isNull() && !_preview) {
 		setupPreview();
 	}
+	if (_active) {
+		_activeRect.paint(p, _widget.rect());
+	} else if (_widget.isOver() || _widget.isDown()) {
+		_selectedRect.paint(p, _widget.rect());
+	}
+	_widget.paintRipple(
+		p,
+		{ 0, 0 },
+		_active ? &st::groupCallMuted2->c : nullptr);
+
 	const auto size = _preview ? _preview->track.frameSize() : QSize();
 	const auto factor = style::DevicePixelRatio();
+	const auto padding = st::desktopCapturePadding;
 	const auto rect = _widget.rect();
-	const auto inner = QRect(
+	const auto inner = rect.marginsRemoved(padding);
-		rect.x(),
-		rect.y(),
-		rect.width(),
-		rect.height() - _label.height());
 	if (!size.isEmpty()) {
 		const auto scaled = size.scaled(inner.size(), Qt::KeepAspectRatio);
 		const auto request = Webrtc::FrameRequest{
@@ -190,9 +243,20 @@ rpl::lifetime &Source::lifetime() {
 ChooseSourceProcess::ChooseSourceProcess(
 	not_null<ChooseSourceDelegate*> delegate)
 : _delegate(delegate)
-, _window(std::make_unique<::Ui::Window>())
+, _window(std::make_unique<Ui::Window>())
 , _scroll(std::make_unique<ScrollArea>(_window->body()))
-, _inner(_scroll->setOwnedWidget(object_ptr<RpWidget>(_scroll.get()))) {
+, _inner(_scroll->setOwnedWidget(object_ptr<RpWidget>(_scroll.get())))
+, _bottom(CreateChild<RpWidget>(_window->body().get()))
+, _submit(
+	CreateChild<RoundButton>(
+		_bottom.get(),
+		tr::lng_group_call_screen_share_start(),
+		st::desktopCaptureSubmit))
+, _finish(
+	CreateChild<RoundButton>(
+		_bottom.get(),
+		tr::lng_group_call_screen_share_stop(),
+		st::desktopCaptureFinish)) {
 	setupPanel();
 	setupSources();
 	activate();
@@ -233,25 +297,102 @@ void ChooseSourceProcess::activate() {
 }
 
 void ChooseSourceProcess::setupPanel() {
-	const auto width = kColumns * st::desktopCaptureSourceSize.width()
+	_window->setAttribute(Qt::WA_OpaquePaintEvent);
-		+ (kColumns + 1) * st::desktopCaptureSourceSkip;
+	_window->setAttribute(Qt::WA_NoSystemBackground);
-	const auto height = kRows * st::desktopCaptureSourceSize.height()
+	_window->setWindowIcon(QIcon(
-		+ (kRows + 1) * st::desktopCaptureSourceSkip
+		QPixmap::fromImage(Image::Empty()->original(), Qt::ColorOnly)));
-		+ (st::desktopCaptureSourceSize.height() / 2);
+	_window->setTitleStyle(st::desktopCaptureSourceTitle);
+
+	const auto skips = st::desktopCaptureSourceSkips;
+	const auto margins = st::desktopCaptureMargins;
+	const auto padding = st::desktopCapturePadding;
+	const auto bottomSkip = margins.right() + padding.right();
+	const auto bottomHeight = 2 * bottomSkip
+		+ st::desktopCaptureCancel.height;
+	const auto width = margins.left()
+		+ kColumns * st::desktopCaptureSourceSize.width()
+		+ (kColumns - 1) * skips.width()
+		+ margins.right();
+	const auto height = margins.top()
+		+ kRows * st::desktopCaptureSourceSize.height()
+		+ (kRows - 1) * skips.height()
+		+ (st::desktopCaptureSourceSize.height() / 2)
+		+ bottomHeight;
 	_window->setFixedSize({ width, height });
 	_window->setWindowFlags(Qt::WindowStaysOnTopHint);
 
+	_window->body()->paintRequest(
+	) | rpl::start_with_next([=](QRect clip) {
+		QPainter(_window->body()).fillRect(clip, st::groupCallBg);
+	}, _window->lifetime());
+
+	_bottom->setGeometry(0, height - bottomHeight, width, bottomHeight);
+
+	_submit->setClickedCallback([=] {
+		if (_selectedId.isEmpty()) {
+			return;
+		}
+		const auto weak = MakeWeak(_window.get());
+		_delegate->chooseSourceAccepted(_selectedId);
+		if (const auto strong = weak.data()) {
+			strong->close();
+		}
+	});
+	_finish->setClickedCallback([=] {
+		const auto weak = MakeWeak(_window.get());
+		_delegate->chooseSourceStop();
+		if (const auto strong = weak.data()) {
+			strong->close();
+		}
+	});
+	const auto cancel = CreateChild<RoundButton>(
+		_bottom.get(),
+		tr::lng_cancel(),
+		st::desktopCaptureCancel);
+	cancel->setClickedCallback([=] {
+		_window->close();
+	});
+
+	rpl::combine(
+		_submit->widthValue(),
+		_submit->shownValue(),
+		_finish->widthValue(),
+		_finish->shownValue(),
+		cancel->widthValue()
+	) | rpl::start_with_next([=](
+			int submitWidth,
+			bool submitShown,
+			int finishWidth,
+			bool finishShown,
+			int cancelWidth) {
+		_finish->moveToRight(bottomSkip, bottomSkip);
+		_submit->moveToRight(bottomSkip, bottomSkip);
+		cancel->moveToRight(
+			bottomSkip * 2 + (submitShown ? submitWidth : finishWidth),
+			bottomSkip);
+	}, _bottom->lifetime());
+
+	const auto sharing = !_delegate->chooseSourceActiveDeviceId().isEmpty();
+	_finish->setVisible(sharing);
+	_submit->setVisible(!sharing);
+
 	_window->body()->sizeValue(
 	) | rpl::start_with_next([=](QSize size) {
-		_scroll->setGeometry({ QPoint(), size });
+		_scroll->setGeometry(
+			0,
+			0,
+			size.width(),
+			size.height() - _bottom->height());
 	}, _scroll->lifetime());
 
 	_scroll->widthValue(
 	) | rpl::start_with_next([=](int width) {
 		const auto rows = int(std::ceil(_sources.size() / float(kColumns)));
-		const auto height = rows * st::desktopCaptureSourceSize.height()
+		const auto innerHeight = margins.top()
-			+ (rows + 1) * st::desktopCaptureSourceSkip;
+			+ rows * st::desktopCaptureSourceSize.height()
-		_inner->resize(width, height);
+			+ (rows - 1) * skips.height()
+			+ margins.bottom();
+		_inner->resize(width, std::max(height, innerHeight));
 	}, _inner->lifetime());
 
 	if (const auto parent = _delegate->chooseSourceParent()) {
@@ -278,17 +419,42 @@ void ChooseSourceProcess::fillSources() {
 
 	auto screenIndex = 0;
 	auto windowIndex = 0;
+	const auto active = _delegate->chooseSourceActiveDeviceId();
 	const auto append = [&](const tgcalls::DesktopCaptureSource &source) {
-		const auto title = !source.title().empty()
+		const auto title = !source.isWindow()
+			? tr::lng_group_call_screen_title(
+				tr::now,
+				lt_index,
+				QString::number(++screenIndex))
+			: !source.title().empty()
 			? QString::fromStdString(source.title())
-			: source.isWindow()
+			: "Window " + QString::number(++windowIndex);
-			? "Window " + QString::number(++windowIndex)
+		const auto id = source.deviceIdKey();
-			: "Screen " + QString::number(++screenIndex);
 		_sources.push_back(std::make_unique<Source>(_inner, source, title));
-		_sources.back()->clicks(
+
-		) | rpl::start_with_next([=, id = source.deviceIdKey()]{
+		const auto raw = _sources.back().get();
-			_delegate->chooseSourceAccepted(QString::fromStdString(id));
+		if (!active.isEmpty() && active.toStdString() == id) {
-			}, _sources.back()->lifetime());
+			_selected = raw;
+			raw->setActive(true);
+		}
+		_sources.back()->activations(
+		) | rpl::filter([=] {
+			return (_selected != raw);
+		}) | rpl::start_with_next([=]{
+			if (_selected) {
+				_selected->setActive(false);
+			}
+			_selected = raw;
+			_selectedId = QString::fromStdString(id);
+			if (_selectedId == _delegate->chooseSourceActiveDeviceId()) {
+				_selectedId = QString();
+				_finish->setVisible(true);
+				_submit->setVisible(false);
+			} else {
+				_finish->setVisible(false);
+				_submit->setVisible(true);
+			}
+		}, raw->lifetime());
 	};
 	for (const auto &source : screensManager.sources()) {
 		append(source);
@@ -300,31 +466,34 @@ void ChooseSourceProcess::fillSources() {
 
 void ChooseSourceProcess::setupSourcesGeometry() {
 	if (_sources.empty()) {
-		//LOG(());
 		destroy();
 		return;
 	}
 	_inner->widthValue(
 	) | rpl::start_with_next([=](int width) {
 		const auto rows = int(std::ceil(_sources.size() / float(kColumns)));
-		const auto skip = st::desktopCaptureSourceSkip;
+		const auto margins = st::desktopCaptureMargins;
-		const auto single = (width - (kColumns + 1) * skip) / kColumns;
+		const auto skips = st::desktopCaptureSourceSkips;
+		const auto single = (width
+			- margins.left()
+			- margins.right()
+			- (kColumns - 1) * skips.width()) / kColumns;
 		const auto height = st::desktopCaptureSourceSize.height();
-		auto top = skip;
+		auto top = margins.top();
 		auto index = 0;
 		for (auto row = 0; row != rows; ++row) {
-			auto left = skip;
+			auto left = margins.left();
 			for (auto column = 0; column != kColumns; ++column) {
 				_sources[index]->setGeometry({ left, top, single, height });
 				if (++index == _sources.size()) {
 					break;
 				}
-				left += single + skip;
+				left += single + skips.width();
 			}
 			if (index >= _sources.size()) {
 				break;
 			}
-			top += height + skip;
+			top += height + skips.height();
 		}
 	}, _inner->lifetime());
 
@@ -333,9 +502,10 @@ void ChooseSourceProcess::setupSourcesGeometry() {
 		_scroll->heightValue()
 	) | rpl::start_with_next([=](int scrollTop, int scrollHeight) {
 		const auto rows = int(std::ceil(_sources.size() / float(kColumns)));
-		const auto skip = st::desktopCaptureSourceSkip;
+		const auto margins = st::desktopCaptureMargins;
+		const auto skips = st::desktopCaptureSourceSkips;
 		const auto height = st::desktopCaptureSourceSize.height();
-		auto top = skip;
+		auto top = margins.top();
 		auto index = 0;
 		for (auto row = 0; row != rows; ++row) {
 			const auto hidden = (top + height <= scrollTop)
@@ -353,7 +523,7 @@ void ChooseSourceProcess::setupSourcesGeometry() {
 			if (index >= _sources.size()) {
 				break;
 			}
-			top += height + skip;
+			top += height + skips.height();
 		}
 	}, _inner->lifetime());
 }

Telegram/SourceFiles/calls/group/ui/desktop_capture_choose_source.h

@@ -19,8 +19,10 @@ namespace Calls::Group::Ui::DesktopCapture {
 class ChooseSourceDelegate {
 public:
 	virtual QWidget *chooseSourceParent() = 0;
+	virtual QString chooseSourceActiveDeviceId() = 0;
 	virtual rpl::lifetime &chooseSourceInstanceLifetime() = 0;
 	virtual void chooseSourceAccepted(const QString &deviceId) = 0;
+	virtual void chooseSourceStop() = 0;
 };
 
 void ChooseSource(not_null<ChooseSourceDelegate*> delegate);

Telegram/SourceFiles/ui/image/image.cpp

@@ -93,16 +93,6 @@ QImage FromInlineBytes(const QByteArray &bytes) {
 	return App::readImage(ExpandInlineBytes(bytes));
 }
 
-QSize GetSizeForDocument(const QVector<MTPDocumentAttribute> &attributes) {
-	for (const auto &attribute : attributes) {
-		if (attribute.type() == mtpc_documentAttributeImageSize) {
-			auto &size = attribute.c_documentAttributeImageSize();
-			return QSize(size.vw().v, size.vh().v);
-		}
-	}
-	return QSize();
-}
-
 } // namespace Images
 
 Image::Image(const QString &path) : Image(ReadContent(path)) {

Telegram/SourceFiles/ui/image/image.h

@@ -14,9 +14,6 @@ namespace Images {
 [[nodiscard]] QByteArray ExpandInlineBytes(const QByteArray &bytes);
 [[nodiscard]] QImage FromInlineBytes(const QByteArray &bytes);
 
-[[nodiscard]] QSize GetSizeForDocument(
-	const QVector<MTPDocumentAttribute> &attributes);
-
 } // namespace Images
 
 class Image final {

Telegram/SourceFiles/ui/image/image_location_factory.cpp

@@ -13,6 +13,19 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include <QtCore/QBuffer>
 
 namespace Images {
+namespace {
+
+QSize GetSizeForDocument(const QVector<MTPDocumentAttribute> &attributes) {
+	for (const auto &attribute : attributes) {
+		if (attribute.type() == mtpc_documentAttributeImageSize) {
+			auto &size = attribute.c_documentAttributeImageSize();
+			return QSize(size.vw().v, size.vh().v);
+		}
+	}
+	return QSize();
+}
+
+} // namespace
 
 ImageWithLocation FromPhotoSize(
 		not_null<Main::Session*> session,