Removed video mute from ParticipanyList, improved audio indicator in ParticipantList

app/lib/components/HiddenPeers.jsx

@@ -38,7 +38,9 @@ class HiddenPeers extends Component
 			>
 				<div data-component='HiddenPeersView'>
 					<div className='view-container' onClick={() => openUsersTab()}>
-						<p>+{lastNLength} <br /> participant(s)</p>
+						<p>+{lastNLength} <br /> participant
+							{(lastNLength === 1) ? null : 's'}
+						</p>
 					</div>
 				</div>
 			</div>

app/lib/components/ParticipantList/ListPeer.jsx

@@ -10,12 +10,9 @@ const ListPeer = (props) =>
 	const {
 		peer,
 		micConsumer,
-		webcamConsumer,
 		screenConsumer,
 		onMuteMic,
 		onUnmuteMic,
-		onDisableWebcam,
-		onEnableWebcam,
 		onDisableScreen,
 		onEnableScreen
 	} = props;
@@ -26,12 +23,6 @@ const ListPeer = (props) =>
 		!micConsumer.remotelyPaused
 	);
 
-	const videoVisible = (
-		Boolean(webcamConsumer) &&
-		!webcamConsumer.locallyPaused &&
-		!webcamConsumer.remotelyPaused
-	);
-
 	const screenVisible = (
 		Boolean(screenConsumer) &&
 		!screenConsumer.locallyPaused &&
@@ -61,6 +52,9 @@ const ListPeer = (props) =>
 					:null
 				}
 			</div>
+			<div className='volume-container'>
+				<div className={classnames('bar', `level${micEnabled && micConsumer ? micConsumer.volume:0}`)} />
+			</div>
 			<div className='controls'>
 				{ screenConsumer ?
 					<div
@@ -84,28 +78,12 @@ const ListPeer = (props) =>
 						off      : !micEnabled,
 						disabled : peer.peerAudioInProgress
 					})}
-					style={{ opacity : micEnabled && micConsumer ? (micConsumer.volume/10)
-						+ 0.2 :1 }}
 					onClick={(e) =>
 					{
 						e.stopPropagation();
 						micEnabled ? onMuteMic(peer.name) : onUnmuteMic(peer.name);
 					}}
 				/>
-
-				<div
-					className={classnames('button', 'webcam', {
-						on       : videoVisible,
-						off      : !videoVisible,
-						disabled : peer.peerVideoInProgress
-					})}
-					onClick={(e) =>
-					{
-						e.stopPropagation();
-						videoVisible ?
-							onDisableWebcam(peer.name) : onEnableWebcam(peer.name);
-					}}
-				/>
 			</div>
 		</div>
 	);

app/stylus/components/ParticipantList.styl

@@ -26,7 +26,6 @@
 
 [data-component='ListPeer'] {
 	display: flex;
-	align-items: center;
 
 	> .indicators {
 		left: 0;
@@ -76,6 +75,41 @@
 			}
 		}
 	}
+	> .volume-container {
+		float: right;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		width: 1vmin;
+		position: relative;
+		background-size: 75%;
+
+		> .bar {
+			flex: 0 0 auto;
+			margin: 0.3rem;
+			background-size: 75%;
+			background-repeat: no-repeat;
+			cursor: pointer;
+			transition-property: opacity, background-color;
+			width: 3px;
+			border-radius: 6px;
+			transition-duration: 0.25s;
+			position: absolute;
+			bottom: 0px;
+
+			&.level0  { height: 0;    background-color: rgba(#000, 0.8); }
+			&.level1  { height: 0.2vh;  background-color: rgba(#000, 0.8); }
+			&.level2  { height: 0.4vh;  background-color: rgba(#000, 0.8); }
+			&.level3  { height: 0.6vh;  background-color: rgba(#000, 0.8); }
+			&.level4  { height: 0.8vh;  background-color: rgba(#000, 0.8); }
+			&.level5  { height: 1.0vh;  background-color: rgba(#000, 0.8); }
+			&.level6  { height: 1.2vh;  background-color: rgba(#000, 0.8); }
+			&.level7  { height: 1.4vh;  background-color: rgba(#000, 0.8); }
+			&.level8  { height: 1.6vh;  background-color: rgba(#000, 0.8); }
+			&.level9  { height: 1.8vh;  background-color: rgba(#000, 0.8); }
+			&.level10 { height: 2.0vh;  background-color: rgba(#000, 0.8); }
+		}
+	}
 	> .controls {
 		float: right;
 		display: flex;