From a7557e3e151adea6ddabfbca3afba7ab45991705 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Sun, 10 May 2020 23:08:43 +0200
Subject: [PATCH] Show quality indicator on me view. Fix "Me" text on me view
 on hover on extra videos and screen sharing.

---
 app/src/components/Containers/Me.js           |  86 ++++++++-------
 app/src/components/Containers/Peer.js         |   3 +
 .../components/VideoContainers/VideoView.js   | 103 ++++++++++--------
 3 files changed, 105 insertions(+), 87 deletions(-)

diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js
index 743c022..ea6e9e0 100644
--- a/app/src/components/Containers/Me.js
+++ b/app/src/components/Containers/Me.js
@@ -290,6 +290,28 @@ const Me = (props) =>
 		'margin' : spacing
 	};
 
+	let audioScore = null;
+
+	if (micProducer && micProducer.score)
+	{
+		audioScore =
+			micProducer.score.reduce(
+				(prev, curr) =>
+					(prev.score < curr.score ? prev : curr)
+			);
+	}
+
+	let videoScore = null;
+
+	if (webcamProducer && webcamProducer.score)
+	{
+		videoScore =
+			webcamProducer.score.reduce(
+				(prev, curr) =>
+					(prev.score < curr.score ? prev : curr)
+			);
+	}
+
 	return (
 		<React.Fragment>
 			<div
@@ -576,6 +598,7 @@ const Me = (props) =>
 
 					<VideoView
 						isMe
+						VideoView
 						advancedMode={advancedMode}
 						peer={me}
 						displayName={settings.displayName}
@@ -584,6 +607,8 @@ const Me = (props) =>
 						videoVisible={videoVisible}
 						audioCodec={micProducer && micProducer.codec}
 						videoCodec={webcamProducer && webcamProducer.codec}
+						audioScore={audioScore}
+						videoScore={videoScore}
 						onChangeDisplayName={(displayName) =>
 						{
 							roomClient.changeDisplayName(displayName);
@@ -627,6 +652,18 @@ const Me = (props) =>
 						style={spacingStyle}
 					>
 						<div className={classes.viewContainer} style={style}>
+							<p className={
+								classnames(
+									classes.meTag,
+									hover ? 'hover' : null,
+									smallContainer ? 'smallContainer' : null
+								)}
+							>
+								<FormattedMessage
+									id='room.me'
+									defaultMessage='ME'
+								/>
+							</p>
 							<div
 								className={classnames(
 									classes.controls,
@@ -653,13 +690,6 @@ const Me = (props) =>
 									}, 2000);
 								}}
 							>
-								<p className={hover ? 'hover' : null}>
-									<FormattedMessage
-										id='room.me'
-										defaultMessage='ME'
-									/>
-								</p>
-
 								<Tooltip title={webcamTip} placement='left'>
 									{ smallContainer ?
 										<IconButton
@@ -742,40 +772,18 @@ const Me = (props) =>
 					style={spacingStyle}
 				>
 					<div className={classes.viewContainer} style={style}>
-						<div
-							className={classnames(
-								classes.controls,
-								settings.hiddenControls ? 'hide' : null,
-								hover ? 'hover' : null
+						<p className={
+							classnames(
+								classes.meTag,
+								hover ? 'hover' : null,
+								smallContainer ? 'smallContainer' : null
 							)}
-							onMouseOver={() => setHover(true)}
-							onMouseOut={() => setHover(false)}
-							onTouchStart={() =>
-							{
-								if (touchTimeout)
-									clearTimeout(touchTimeout);
-			
-								setHover(true);
-							}}
-							onTouchEnd={() =>
-							{
-
-								if (touchTimeout)
-									clearTimeout(touchTimeout);
-			
-								touchTimeout = setTimeout(() =>
-								{
-									setHover(false);
-								}, 2000);
-							}}
 						>
-							<p className={hover ? 'hover' : null}>
-								<FormattedMessage
-									id='room.me'
-									defaultMessage='ME'
-								/>
-							</p>
-						</div>
+							<FormattedMessage
+								id='room.me'
+								defaultMessage='ME'
+							/>
+						</p>
 						
 						<VideoView
 							isMe
diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js
index ab90a13..9c2a6fa 100644
--- a/app/src/components/Containers/Peer.js
+++ b/app/src/components/Containers/Peer.js
@@ -394,6 +394,7 @@ const Peer = (props) =>
 					</div>
 
 					<VideoView
+						showQuality
 						advancedMode={advancedMode}
 						peer={peer}
 						displayName={peer.displayName}
@@ -589,6 +590,7 @@ const Peer = (props) =>
 							</div>
 		
 							<VideoView
+								showQuality
 								advancedMode={advancedMode}
 								peer={peer}
 								displayName={peer.displayName}
@@ -730,6 +732,7 @@ const Peer = (props) =>
 							</Tooltip>
 						</div>
 						<VideoView
+							showQuality
 							advancedMode={advancedMode}
 							videoContain
 							consumerSpatialLayers={
diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js
index f0e407b..0b01a22 100644
--- a/app/src/components/VideoContainers/VideoView.js
+++ b/app/src/components/VideoContainers/VideoView.js
@@ -152,6 +152,7 @@ class VideoView extends React.PureComponent
 	{
 		const {
 			isMe,
+			showQuality,
 			isScreen,
 			displayName,
 			showPeerInfo,
@@ -177,58 +178,63 @@ class VideoView extends React.PureComponent
 			videoHeight
 		} = this.state;
 
-		let quality = <SignalCellularOffIcon style={{ color: red[500] }}/>;
+		let quality = null;
 
-		if (videoScore || audioScore)
+		if (showQuality)
 		{
-			const score = videoScore ? videoScore : audioScore;
+			quality = <SignalCellularOffIcon style={{ color: red[500] }}/>;
 
-			switch (score.producerScore)
+			if (videoScore || audioScore)
 			{
-				case 0:
-				case 1:
+				const score = videoScore ? videoScore : audioScore;
+	
+				switch (isMe ? score.score : score.producerScore)
 				{
-					quality = <SignalCellular0BarIcon style={{ color: red[500] }}/>;
-
-					break;
-				}
-
-				case 2:
-				case 3:
-				{
-					quality = <SignalCellular1BarIcon style={{ color: red[500] }}/>;
-
-					break;
-				}
-
-				case 4:
-				case 5:
-				case 6:
-				{
-					quality = <SignalCellular2BarIcon style={{ color: orange[500] }}/>;
-
-					break;
-				}
-
-				case 7:
-				case 8:
-				case 9:
-				{
-					quality = <SignalCellular3BarIcon style={{ color: yellow[500] }}/>;
-
-					break;
-				}
-
-				case 10:
-				{
-					quality = null;
-
-					break;
-				}
-
-				default:
-				{
-					break;
+					case 0:
+					case 1:
+					{
+						quality = <SignalCellular0BarIcon style={{ color: red[500] }}/>;
+	
+						break;
+					}
+	
+					case 2:
+					case 3:
+					{
+						quality = <SignalCellular1BarIcon style={{ color: red[500] }}/>;
+	
+						break;
+					}
+	
+					case 4:
+					case 5:
+					case 6:
+					{
+						quality = <SignalCellular2BarIcon style={{ color: orange[500] }}/>;
+	
+						break;
+					}
+	
+					case 7:
+					case 8:
+					case 9:
+					{
+						quality = <SignalCellular3BarIcon style={{ color: yellow[500] }}/>;
+	
+						break;
+					}
+	
+					case 10:
+					{
+						quality = null;
+	
+						break;
+					}
+	
+					default:
+					{
+						break;
+					}
 				}
 			}
 		}
@@ -258,7 +264,7 @@ class VideoView extends React.PureComponent
 								<p>{videoWidth}x{videoHeight}</p>
 							}
 						</div>
-						{ !isMe && 
+						{ showQuality &&
 							<div className={classnames(classes.box, 'right')}>
 								{ 
 									quality
@@ -438,6 +444,7 @@ class VideoView extends React.PureComponent
 VideoView.propTypes =
 {
 	isMe                           : PropTypes.bool,
+	showQuality                    : PropTypes.bool,
 	isScreen                       : PropTypes.bool,
 	displayName                    : PropTypes.string,
 	showPeerInfo                   : PropTypes.bool,