Improve narrow participants column design.

Telegram/SourceFiles/calls/calls.style

@@ -562,6 +562,11 @@ groupCallMembersListItem: PeerListItem(defaultPeerListItem) {
 	statusFgOver: groupCallMemberInactiveStatus;
 	statusFgActive: groupCallMemberActiveStatus;
 }
+groupCallNarrowMembersListItem: PeerListItem(groupCallMembersListItem) {
+	statusFg: groupCallMemberNotJoinedStatus;
+	statusFgOver: groupCallMemberNotJoinedStatus;
+	statusFgActive: groupCallMemberActiveStatus;
+}
 groupCallMembersList: PeerList(defaultPeerList) {
 	bg: groupCallMembersBg;
 	about: FlatLabel(defaultPeerListAbout) {
@@ -1157,8 +1162,8 @@ groupCallWideModeSize: size(960px, 580px);
 //	ripple: groupCallRipple;
 //}
 groupCallNarrowInactiveCrossLine: CrossLineAnimation {
-	fg: groupCallMemberInactiveStatus;
-	icon: icon {{ "calls/video_mini_mute", groupCallMemberInactiveStatus }};
+	fg: groupCallMemberNotJoinedStatus;
+	icon: icon {{ "calls/video_mini_mute", groupCallMemberNotJoinedStatus }};
 	startPosition: point(3px, 0px);
 	endPosition: point(13px, 12px);
 	stroke: 3px;
@@ -1169,8 +1174,8 @@ groupCallNarrowColoredCrossLine: CrossLineAnimation(groupCallNarrowInactiveCross
 	icon: icon {{ "calls/video_mini_mute", groupCallMemberActiveStatus }};
 }
 groupCallNarrowRaisedHand: icon {{ "calls/video_mini_speak", groupCallMemberInactiveStatus }};
-groupCallNarrowCameraIcon: icon {{ "calls/video_mini_video", groupCallMemberInactiveStatus }};
-groupCallNarrowScreenIcon: icon {{ "calls/video_mini_screencast", groupCallMemberInactiveStatus }};
+groupCallNarrowCameraIcon: icon {{ "calls/video_mini_video", groupCallMemberNotJoinedStatus }};
+groupCallNarrowScreenIcon: icon {{ "calls/video_mini_screencast", groupCallMemberNotJoinedStatus }};
 groupCallNarrowIconPosition: point(-4px, 2px);
 groupCallNarrowIconSkip: 15px;
 //groupCallVideoCrossLine: CrossLineAnimation(groupCallNarrowInactiveCrossLine) {

Telegram/SourceFiles/calls/group/calls_group_members.cpp

@@ -99,6 +99,7 @@ public:
 		int outerWidth,
 		not_null<MembersRow*> row,
 		const IconState &state) override;
+	bool rowIsNarrow() override;
 	//void rowPaintNarrowBackground(
 	//	Painter &p,
 	//	int x,
@@ -989,7 +990,7 @@ void Members::Controller::rowPaintIcon(
 		// Just green icon, no cross, no coloring.
 		greenIcon.paintInCenter(p, rect);
 		return;
-	} else if (state.speaking == 0.) {
+	} else if (state.speaking == 0. && (!narrow || !state.mutedByMe)) {
 		if (state.active == 1.) {
 			// Just gray icon, no cross, no coloring.
 			const auto &grayIcon = largeVideo
@@ -1051,7 +1052,7 @@ void Members::Controller::rowPaintIcon(
 	}
 	const auto activeInactiveColor = anim::color(
 		(narrow
-			? st::groupCallMemberInactiveStatus
+			? st::groupCallMemberNotJoinedStatus
 			: st::groupCallMemberInactiveIcon),
 		(narrow
 			? st::groupCallMemberActiveStatus
@@ -1107,19 +1108,56 @@ int Members::Controller::rowPaintStatusIcon(
 	rowPaintIcon(p, rect, state);
 	x += icon.width();
 	auto result = st::groupCallNarrowIconSkip;
-	if (_cameraActive.contains(row->peer())) {
-		st::groupCallNarrowCameraIcon.paint(p, x, y, outerWidth);
-		x += st::groupCallNarrowCameraIcon.width();
-		result += st::groupCallNarrowCameraIcon.width();
-	}
-	if (_screenActive.contains(row->peer())) {
-		st::groupCallNarrowScreenIcon.paint(p, x, y, outerWidth);
-		x += st::groupCallNarrowScreenIcon.width();
-		result += st::groupCallNarrowScreenIcon.width();
+	const auto participantPeer = row->peer();
+	const auto camera = _cameraActive.contains(participantPeer);
+	const auto screen = _screenActive.contains(participantPeer);
+	if (camera || screen) {
+		const auto activeInactiveColor = anim::color(
+			st::groupCallMemberNotJoinedStatus,
+			st::groupCallMemberActiveStatus,
+			state.speaking);
+		const auto iconColor = anim::color(
+			activeInactiveColor,
+			st::groupCallMemberNotJoinedStatus,
+			state.muted);
+		const auto other = state.mutedByMe
+			? st::groupCallMemberMutedIcon->c
+			: state.raisedHand
+			? st::groupCallMemberInactiveStatus->c
+			: iconColor;
+		const auto color = (state.speaking == 1. && !state.mutedByMe)
+			? st::groupCallMemberActiveStatus->c
+			: (state.speaking == 0.
+				? (state.active == 1.
+					? st::groupCallMemberNotJoinedStatus->c
+					: (state.active == 0.
+						? (state.muted == 1.
+							? (state.raisedHand
+								? st::groupCallMemberInactiveStatus->c
+								: st::groupCallMemberNotJoinedStatus->c)
+							: (state.muted == 0.
+								? st::groupCallMemberNotJoinedStatus->c
+								: other))
+						: other))
+				: other);
+		if (camera) {
+			st::groupCallNarrowCameraIcon.paint(p, x, y, outerWidth, other);
+			x += st::groupCallNarrowCameraIcon.width();
+			result += st::groupCallNarrowCameraIcon.width();
+		}
+		if (screen) {
+			st::groupCallNarrowScreenIcon.paint(p, x, y, outerWidth, other);
+			x += st::groupCallNarrowScreenIcon.width();
+			result += st::groupCallNarrowScreenIcon.width();
+		}
 	}
 	return result;
 }
 
+bool Members::Controller::rowIsNarrow() {
+	return (_mode == PanelMode::Wide);
+}
+
 //void Members::Controller::rowPaintNarrowBackground(
 //		Painter &p,
 //		int x,
@@ -1848,7 +1886,7 @@ void Members::refreshTilesGeometry() {
 	if (sizes.size() == 3) {
 		put(sizes.front().first, 2, 0);
 		put((sizes.begin() + 1)->first, 0, 1);
-		put((sizes.begin() + 1)->first, 1, 1);
+		put((sizes.begin() + 2)->first, 1, 1);
 	} else {
 		auto row = 0;
 		auto column = 0;

Telegram/SourceFiles/calls/group/calls_group_members_row.cpp

@@ -765,9 +765,13 @@ void MembersRow::paintComplexStatusText(
 			p.translate(-translatedWidth, 0);
 		});
 
+		const auto &style = (!narrowMode
+			|| (_state == State::RaisedHand && _raisedHandStatus))
+			? st
+			: st::groupCallNarrowMembersListItem;
 		PeerListRow::paintStatusText(
 			p,
-			st,
+			style,
 			x,
 			y,
 			availableWidth - translatedWidth,
@@ -799,7 +803,7 @@ void MembersRow::paintComplexStatusText(
 }
 
 QSize MembersRow::actionSize() const {
-	return QSize(
+	return _delegate->rowIsNarrow() ? QSize() : QSize(
 		st::groupCallActiveButton.width,
 		st::groupCallActiveButton.height);
 }

Telegram/SourceFiles/calls/group/calls_group_members_row.h

@@ -62,6 +62,7 @@ public:
 		int outerWidth,
 		not_null<MembersRow*> row,
 		const IconState &state) = 0;
+	virtual bool rowIsNarrow() = 0;
 	//virtual void rowPaintNarrowBackground(
 	//	Painter &p,
 	//	int x,

Telegram/SourceFiles/calls/group/calls_group_panel.cpp

@@ -2015,7 +2015,7 @@ void Panel::updateMembersGeometry() {
 			skip,
 			top,
 			membersWidth,
-			std::min(desiredHeight, widget()->height()));
+			std::min(desiredHeight, widget()->height() - top - skip));
 		_pinnedVideoWrap->setGeometry(
 			membersWidth + 2 * skip,
 			top,