Merge branch 'feature-ptt' into develop

app/src/RoomClient.js

@@ -2486,7 +2486,11 @@ export default class RoomClient
 			{
 				if (this._mediasoupDevice.canProduce('audio'))
 					if (!this._muted)
-						this.enableMic();
+					{
+						await this.enableMic();
+						if (peers.length > 4) 
+							this.muteMic();
+					}
 
 				if (joinVideo && this._mediasoupDevice.canProduce('video'))
 					this.enableWebcam();

app/src/components/Containers/Me.js

@@ -71,12 +71,15 @@ const styles = (theme) =>
 			position        : 'absolute',
 			width           : '100%',
 			height          : '100%',
+			backgroundColor : 'rgba(0, 0, 0, 0.3)',
 			display         : 'flex',
 			flexDirection   : 'column',
 			justifyContent  : 'center',
 			alignItems      : 'flex-end',
 			padding         : theme.spacing(1),
 			zIndex          : 21,
+			opacity         : 1,
+			transition      : 'opacity 0.3s',
 			touchAction     : 'none',
 			pointerEvents   : 'none',
 			'& p' :
@@ -85,23 +88,22 @@ const styles = (theme) =>
 				float      : 'left',
 				top        : '50%',
 				left       : '50%',
-				opacity    : 0,
-				transition : 'opacity 0.3s',
 				transform  : 'translate(-50%, -50%)',
 				color      : 'rgba(255, 255, 255, 0.5)',
 				fontSize   : '7em',
 				margin     : 0,
+				opacity    : 0,
 				'&.hover' :
 				{
 					opacity : 1
-				}
+				},
 			}
 		},
 		ptt :
 		{
 			position        : 'absolute',
 			float           : 'left',
-			bottom          : '10%',
+			top             : '10%',
 			left            : '50%',
 			transform       : 'translate(-50%, 0%)',
 			color           : 'rgba(255, 255, 255, 0.7)',
@@ -291,7 +293,7 @@ const Me = (props) =>
 			>
 				<div className={classnames(classes.viewContainer)} style={style}>
 					<div
-						className={classnames(classes.controls, 'hover')}  
+						className={classnames(classes.controls)}  
 						onMouseOver={() => setHover(true)}
 						onMouseOut={() => setHover(false)}
 						onTouchStart={() =>
@@ -312,7 +314,7 @@ const Me = (props) =>
 							}, 2000);
 						}}
 					>
-						<p className={classnames(hover ? 'hover' : null)}>
+						<p className={classnames(hover && 'hover')}>
 							<FormattedMessage
 								id='room.me'
 								defaultMessage='ME'