Change quality indicator for peers

app/src/components/VideoContainers/VideoView.js

@@ -3,6 +3,13 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import EditableInput from '../Controls/EditableInput';
+import { green, yellow, orange, red } from '@material-ui/core/colors';
+import SignalCellularOffIcon from '@material-ui/icons/SignalCellularOff';
+import SignalCellular0BarIcon from '@material-ui/icons/SignalCellular0Bar';
+import SignalCellular1BarIcon from '@material-ui/icons/SignalCellular1Bar';
+import SignalCellular2BarIcon from '@material-ui/icons/SignalCellular2Bar';
+import SignalCellular3BarIcon from '@material-ui/icons/SignalCellular3Bar';
+import SignalCellular4BarIcon from '@material-ui/icons/SignalCellular4Bar';
 
 const styles = (theme) =>
 	({
@@ -88,69 +95,6 @@ const styles = (theme) =>
 				transitionDuration : '0s'
 			}
 		},
-		qualityBar :
-		{
-			height             : 6,
-			borderRadius       : 2,
-			background         : 'rgba(green, 0.65)',
-			transitionProperty : 'height background-color',
-			transitionDuration : '0.25s',
-			'&.score0'         :
-			{
-				width           : 0,
-				backgroundColor : 'rgba(246, 58, 15, 0.65)'
-			},
-			'&.score1' :
-			{
-				width           : '10%',
-				backgroundColor : 'rgba(246, 58, 15, 0.65)'
-			},
-			'&.score2' :
-			{
-				width           : '20%',
-				backgroundColor : 'rgba(246, 58, 15, 0.65)'
-			},
-			'&.score3' :
-			{
-				width           : '30%',
-				backgroundColor : 'rgba(246, 58, 15, 0.65)'
-			},
-			'&.score4' :
-			{
-				width           : '40%',
-				backgroundColor : 'rgba(246, 58, 15, 0.65)'
-			},
-			'&.score5' :
-			{
-				width           : '50%',
-				backgroundColor : 'rgba(242, 176, 30, 0.65)'
-			},
-			'&.score6' :
-			{
-				width           : '60%',
-				backgroundColor : 'rgba(242, 176, 30, 0.65)'
-			},
-			'&.score7' :
-			{
-				width           : '70%',
-				backgroundColor : 'rgba(242, 211, 27, 0.65)'
-			},
-			'&.score8' :
-			{
-				width           : '80%',
-				backgroundColor : 'rgba(242, 211, 27, 0.65)'
-			},
-			'&.score9' :
-			{
-				width           : '90%',
-				backgroundColor : 'rgba(134, 224, 30, 0.65)'
-			},
-			'&.score10' :
-			{
-				width           : '100%',
-				backgroundColor : 'rgba(134, 224, 30, 0.65)'
-			}
-		},
 		peer :
 		{
 			display : 'flex'
@@ -229,6 +173,62 @@ class VideoView extends React.PureComponent
 			videoHeight
 		} = this.state;
 
+		let quality = <SignalCellularOffIcon style={{ color: red[500] }}/>;
+
+		if (videoScore || audioScore)
+		{
+			const score = videoScore ? videoScore : audioScore;
+
+			switch (score.producerScore)
+			{
+				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:
+				{
+					quality = <SignalCellular3BarIcon style={{ color: yellow[500] }}/>;
+
+					break;
+				}
+
+				case 9:
+				case 10:
+				{
+					quality = <SignalCellular4BarIcon style={{ color: green[500] }}/>;
+
+					break;
+				}
+
+				default:
+				{
+					break;
+				}
+			}
+		}
+
 		return (
 			<div className={classes.root}>
 				<div className={classes.info}>
@@ -254,15 +254,11 @@ class VideoView extends React.PureComponent
 								<p>{videoWidth}x{videoHeight}</p>
 							}
 						</div>
-						{ (audioScore || videoScore) &&
+						{ !isMe &&
 							<div className={classnames(classes.box, 'right')}>
-								<div className={
+								{ 
-									classnames(
+									quality
-										classes.qualityBar,
-										`score${videoScore ? videoScore.producerScore : audioScore.producerScore}`
-									)
 								}
-								/>
 							</div>
 						}
 					</div>