Add support for moderating rooms. Kick user, mute all users, stop all videos.

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { withRoomContext } from '../../../RoomContext';
+import { useIntl, FormattedMessage } from 'react-intl';
+import Button from '@material-ui/core/Button';
+
+const styles = (theme) =>
+	({
+		root :
+		{
+			padding  : theme.spacing(1),
+			width    : '100%',
+			overflow : 'hidden',
+			cursor   : 'auto',
+			display  : 'flex'
+		},
+		actionButtons :
+		{
+			display : 'flex'
+		},
+		divider :
+		{
+			marginLeft : theme.spacing(2)
+		}
+	});
+
+const ListModerator = (props) =>
+{
+	const intl = useIntl();
+
+	const {
+		roomClient,
+		room,
+		classes
+	} = props;
+
+	return (
+		<div className={classes.root}>
+			<Button
+				aria-label={intl.formatMessage({
+					id             : 'room.muteAll',
+					defaultMessage : 'Mute all'
+				})}
+				className={classes.actionButton}
+				variant='contained'
+				color='secondary'
+				disabled={room.muteAllInProgress}
+				onClick={() => roomClient.muteAllPeers()}
+			>
+				<FormattedMessage
+					id='room.muteAll'
+					defaultMessage='Mute all'
+				/>
+			</Button>
+			<div className={classes.divider} />
+			<Button
+				aria-label={intl.formatMessage({
+					id             : 'room.stopAllVideo',
+					defaultMessage : 'Stop all video'
+				})}
+				className={classes.actionButton}
+				variant='contained'
+				color='secondary'
+				disabled={room.stopAllVideoInProgress}
+				onClick={() => roomClient.stopAllPeerVideo()}
+			>
+				<FormattedMessage
+					id='room.stopAllVideo'
+					defaultMessage='Stop all video'
+				/>
+			</Button>
+		</div>
+	);
+};
+
+ListModerator.propTypes =
+{
+	roomClient : PropTypes.any.isRequired,
+	room       : PropTypes.object.isRequired,
+	classes    : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) => ({
+	room : state.room
+});
+
+export default withRoomContext(connect(
+	mapStateToProps,
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.room === next.room
+			);
+		}
+	}
+)(withStyles(styles)(ListModerator)));

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

@@ -12,6 +12,7 @@ import MicIcon from '@material-ui/icons/Mic';
 import MicOffIcon from '@material-ui/icons/MicOff';
 import ScreenIcon from '@material-ui/icons/ScreenShare';
 import ScreenOffIcon from '@material-ui/icons/StopScreenShare';
+import ExitIcon from '@material-ui/icons/ExitToApp';
 import EmptyAvatar from '../../../images/avatar-empty.jpeg';
 import HandIcon from '../../../images/icon-hand-white.svg';
 
@@ -91,40 +92,6 @@ const styles = (theme) =>
 			flexDirection  : 'row',
 			justifyContent : 'flex-start',
 			alignItems     : 'center'
-		},
-		button :
-		{
-			flex               : '0 0 auto',
-			margin             : '0.3rem',
-			borderRadius       : 2,
-			backgroundColor    : 'rgba(0, 0, 0, 0.5)',
-			cursor             : 'pointer',
-			transitionProperty : 'opacity, background-color',
-			transitionDuration : '0.15s',
-			width              : 'var(--media-control-button-size)',
-			height             : 'var(--media-control-button-size)',
-			opacity            : 0.85,
-			'&:hover'          :
-			{
-				opacity : 1
-			},
-			'&.unsupported' :
-			{
-				pointerEvents : 'none'
-			},
-			'&.disabled' :
-			{
-				pointerEvents   : 'none',
-				backgroundColor : 'var(--media-control-botton-disabled)'
-			},
-			'&.on' :
-			{
-				backgroundColor : 'var(--media-control-botton-on)'
-			},
-			'&.off' :
-			{
-				backgroundColor : 'var(--media-control-botton-off)'
-			}
 		}
 	});
 
@@ -134,6 +101,7 @@ const ListPeer = (props) =>
 
 	const {
 		roomClient,
+		isModerator,
 		peer,
 		micConsumer,
 		screenConsumer,
@@ -185,9 +153,8 @@ const ListPeer = (props) =>
 						})}
 						color={ screenVisible ? 'primary' : 'secondary'}
 						disabled={ peer.peerScreenInProgress }
-						onClick={(e) =>
+						onClick={() =>
 							{
-								e.stopPropagation();
 								screenVisible ?
 									roomClient.modifyPeerConsumer(peer.id, 'screen', true) :
 									roomClient.modifyPeerConsumer(peer.id, 'screen', false);
@@ -207,9 +174,8 @@ const ListPeer = (props) =>
 					})}
 					color={ micEnabled ? 'primary' : 'secondary'}
 					disabled={ peer.peerAudioInProgress }
-					onClick={(e) =>
+					onClick={() =>
 						{
-							e.stopPropagation();
 							micEnabled ?
 								roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
 								roomClient.modifyPeerConsumer(peer.id, 'mic', false);
@@ -221,6 +187,21 @@ const ListPeer = (props) =>
 						<MicOffIcon />
 					}
 				</IconButton>
+				{ isModerator &&
+					<IconButton
+						aria-label={intl.formatMessage({
+							id             : 'tooltip.kickParticipant',
+							defaultMessage : 'Kick out participant'
+						})}
+						disabled={ peer.peerKickInProgress }
+						onClick={() =>
+							{
+								roomClient.kickPeer(peer.id);
+							}}
+					>
+						<ExitIcon />
+					</IconButton>
+				}
 			</div>
 		</div>
 	);
@@ -230,6 +211,7 @@ ListPeer.propTypes =
 {
 	roomClient     : PropTypes.any.isRequired,
 	advancedMode   : PropTypes.bool,
+	isModerator    : PropTypes.bool,
 	peer           : appPropTypes.Peer.isRequired,
 	micConsumer    : appPropTypes.Consumer,
 	webcamConsumer : appPropTypes.Consumer,

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

@@ -11,7 +11,9 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import ListPeer from './ListPeer';
 import ListMe from './ListMe';
+import ListModerator from './ListModerator';
 import Volume from '../../Containers/Volume';
+import * as userRoles from '../../../reducers/userRoles';
 
 const styles = (theme) =>
 	({
@@ -76,6 +78,7 @@ class ParticipantList extends React.PureComponent
 		const {
 			roomClient,
 			advancedMode,
+			isModerator,
 			passivePeers,
 			selectedPeerId,
 			spotlightPeers,
@@ -84,6 +87,17 @@ class ParticipantList extends React.PureComponent
 
 		return (
 			<div className={classes.root} ref={(node) => { this.node = node; }}>
+				{ isModerator &&
+					<ul className={classes.list}>
+						<li className={classes.listheader}>
+							<FormattedMessage
+								id='room.moderatoractions'
+								defaultMessage='Moderator actions'
+							/>
+						</li>
+						<ListModerator />
+					</ul>
+				}
 				<ul className={classes.list}>
 					<li className={classes.listheader}>
 						<FormattedMessage
@@ -108,7 +122,7 @@ class ParticipantList extends React.PureComponent
 							})}
 							onClick={() => roomClient.setSelectedPeer(peerId)}
 						>
-							<ListPeer id={peerId} advancedMode={advancedMode}>
+							<ListPeer id={peerId} advancedMode={advancedMode} isModerator={isModerator}>
 								<Volume small id={peerId} />
 							</ListPeer>
 						</li>
@@ -129,7 +143,7 @@ class ParticipantList extends React.PureComponent
 							})}
 							onClick={() => roomClient.setSelectedPeer(peerId)}
 						>
-							<ListPeer id={peerId} advancedMode={advancedMode} />
+							<ListPeer id={peerId} advancedMode={advancedMode} isModerator={isModerator} />
 						</li>
 					))}
 				</ul>
@@ -142,6 +156,7 @@ ParticipantList.propTypes =
 {
 	roomClient     : PropTypes.any.isRequired,
 	advancedMode   : PropTypes.bool,
+	isModerator    : PropTypes.bool,
 	passivePeers   : PropTypes.array,
 	selectedPeerId : PropTypes.string,
 	spotlightPeers : PropTypes.array,
@@ -150,7 +165,12 @@ ParticipantList.propTypes =
 
 const mapStateToProps = (state) =>
 {
+	const isModerator =
+		state.me.roles.includes(userRoles.MODERATOR) ||
+		state.me.roles.includes(userRoles.ADMIN);
+
 	return {
+		isModerator,
 		passivePeers   : passivePeersSelector(state),
 		selectedPeerId : state.room.selectedPeerId,
 		spotlightPeers : spotlightPeersSelector(state)
@@ -165,6 +185,7 @@ const ParticipantListContainer = withRoomContext(connect(
 		areStatesEqual : (next, prev) =>
 		{
 			return (
+				prev.me.roles === next.me.roles &&
 				prev.peers === next.peers &&
 				prev.room.spotlights === next.room.spotlights &&
 				prev.room.selectedPeerId === next.room.selectedPeerId