Add option for muting remote videos, fixes #204

app/src/components/MeetingDrawer/ParticipantList/ListPeer.js

@@ -8,6 +8,8 @@ import * as appPropTypes from '../../appPropTypes';
 import { withRoomContext } from '../../../RoomContext';
 import { useIntl } from 'react-intl';
 import IconButton from '@material-ui/core/IconButton';
+import VideocamIcon from '@material-ui/icons/Videocam';
+import VideocamOffIcon from '@material-ui/icons/VideocamOff';
 import MicIcon from '@material-ui/icons/Mic';
 import MicOffIcon from '@material-ui/icons/MicOff';
 import ScreenIcon from '@material-ui/icons/ScreenShare';
@@ -104,11 +106,18 @@ const ListPeer = (props) =>
 		isModerator,
 		peer,
 		micConsumer,
+		webcamConsumer,
 		screenConsumer,
 		children,
 		classes
 	} = props;
 
+	const webcamEnabled = (
+		Boolean(webcamConsumer) &&
+		!webcamConsumer.locallyPaused &&
+		!webcamConsumer.remotelyPaused
+	);
+
 	const micEnabled = (
 		Boolean(micConsumer) &&
 		!micConsumer.locallyPaused &&
@@ -153,8 +162,10 @@ const ListPeer = (props) =>
 						})}
 						color={screenVisible ? 'primary' : 'secondary'}
 						disabled={peer.peerScreenInProgress}
-						onClick={() =>
+						onClick={(e) =>
 						{
+							e.stopPropagation();
+
 							screenVisible ?
 								roomClient.modifyPeerConsumer(peer.id, 'screen', true) :
 								roomClient.modifyPeerConsumer(peer.id, 'screen', false);
@@ -167,6 +178,28 @@ const ListPeer = (props) =>
 						}
 					</IconButton>
 				}
+				<IconButton
+					aria-label={intl.formatMessage({
+						id             : 'tooltip.muteParticipantVideo',
+						defaultMessage : 'Mute participant video'
+					})}
+					color={webcamEnabled ? 'primary' : 'secondary'}
+					disabled={peer.peerVideoInProgress}
+					onClick={(e) =>
+					{
+						e.stopPropagation();
+
+						webcamEnabled ?
+							roomClient.modifyPeerConsumer(peer.id, 'webcam', true) :
+							roomClient.modifyPeerConsumer(peer.id, 'webcam', false);
+					}}
+				>
+					{ webcamEnabled ?
+						<VideocamIcon />
+						:
+						<VideocamOffIcon />
+					}
+				</IconButton>
 				<IconButton
 					aria-label={intl.formatMessage({
 						id             : 'tooltip.muteParticipant',
@@ -174,8 +207,10 @@ const ListPeer = (props) =>
 					})}
 					color={micEnabled ? 'primary' : 'secondary'}
 					disabled={peer.peerAudioInProgress}
-					onClick={() =>
+					onClick={(e) =>
 					{
+						e.stopPropagation();
+
 						micEnabled ?
 							roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
 							roomClient.modifyPeerConsumer(peer.id, 'mic', false);
@@ -194,8 +229,10 @@ const ListPeer = (props) =>
 							defaultMessage : 'Kick out participant'
 						})}
 						disabled={peer.peerKickInProgress}
-						onClick={() =>
+						onClick={(e) =>
 						{
+							e.stopPropagation();
+
 							roomClient.kickPeer(peer.id);
 						}}
 					>