lock Dialog

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

@@ -1,132 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { withRoomContext } from '../../../RoomContext';
-import EmptyAvatar from '../../../images/avatar-empty.jpeg';
-import PromoteIcon from '@material-ui/icons/OpenInBrowser';
-
-const styles = (theme) =>
-	({
-		root :
-		{
-			padding  : theme.spacing(1),
-			width    : '100%',
-			overflow : 'hidden',
-			cursor   : 'auto',
-			display  : 'flex'
-		},
-		avatar :
-		{
-			borderRadius : '50%',
-			height       : '2rem'
-		},
-		peerInfo :
-		{
-			fontSize    : '1rem',
-			border      : 'none',
-			display     : 'flex',
-			paddingLeft : theme.spacing(1),
-			flexGrow    : 1,
-			alignItems  : 'center'
-		},
-		controls :
-		{
-			float          : 'right',
-			display        : 'flex',
-			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
-			},
-			'&.disabled' :
-			{
-				pointerEvents   : 'none',
-				backgroundColor : 'var(--media-control-botton-disabled)'
-			},
-			'&.promote' :
-			{
-				backgroundColor : 'var(--media-control-botton-on)'
-			}
-		}
-	});
-
-const ListLobbyPeer = (props) =>
-{
-	const {
-		roomClient,
-		peer,
-		classes
-	} = props;
-
-	const picture = peer.picture || EmptyAvatar;
-
-	return (
-		<div className={classes.root}>
-			<img alt='Peer avatar' className={classes.avatar} src={picture} />
-
-			<div className={classes.peerInfo}>
-				{peer.displayName}
-			</div>
-			<div className={classes.controls}>
-				<div
-					className={classnames(classes.button, 'promote', {
-						disabled : peer.promotionInProgress
-					})}
-					onClick={(e) =>
-					{
-						e.stopPropagation();
-						roomClient.promoteLobbyPeer(peer.id);
-					}}
-				>
-					<PromoteIcon />
-				</div>
-			</div>
-		</div>
-	);
-};
-
-ListLobbyPeer.propTypes =
-{
-	roomClient   : PropTypes.any.isRequired,
-	advancedMode : PropTypes.bool,
-	peer         : PropTypes.object.isRequired,
-	classes      : PropTypes.object.isRequired
-};
-
-const mapStateToProps = (state, { id }) =>
-{
-	return {
-		peer : state.lobbyPeers[id]
-	};
-};
-
-export default withRoomContext(connect(
-	mapStateToProps,
-	null,
-	null,
-	{
-		areStatesEqual : (next, prev) =>
-		{
-			return (
-				prev.lobbyPeers === next.lobbyPeers
-			);
-		}
-	}
-)(withStyles(styles)(ListLobbyPeer)));

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

@@ -2,15 +2,13 @@ import React from 'react';
 import { connect } from 'react-redux';
 import {
 	passivePeersSelector,
-	spotlightPeersSelector,
-	lobbyPeersKeySelector
+	spotlightPeersSelector
 } from '../../Selectors';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import { withRoomContext } from '../../../RoomContext';
 import PropTypes from 'prop-types';
 import ListPeer from './ListPeer';
-import ListLobbyPeer from './ListLobbyPeer';
 import ListMe from './ListMe';
 import Volume from '../../Containers/Volume';
 
@@ -80,7 +78,6 @@ class ParticipantList extends React.PureComponent
 			passivePeers,
 			selectedPeerId,
 			spotlightPeers,
-			lobbyPeers,
 			classes
 		} = this.props;
 
@@ -90,20 +87,6 @@ class ParticipantList extends React.PureComponent
 					<li className={classes.listheader}>Me:</li>
 					<ListMe />
 				</ul>
-				{ lobbyPeers.length > 0 ?
-					<ul className={classes.list}>
-						<li className={classes.listheader}>Participants in Lobby:</li>
-						{ lobbyPeers.map((peerId) => (
-							<li
-								key={peerId}
-								className={classes.listItem}
-							>
-								<ListLobbyPeer id={peerId} advancedMode={advancedMode} />
-							</li>
-						))}
-					</ul>
-					:null
-				}
 				<ul className={classes.list}>
 					<li className={classes.listheader}>Participants in Spotlight:</li>
 					{ spotlightPeers.map((peer) => (
@@ -146,7 +129,6 @@ ParticipantList.propTypes =
 	passivePeers   : PropTypes.array,
 	selectedPeerId : PropTypes.string,
 	spotlightPeers : PropTypes.array,
-	lobbyPeers     : PropTypes.array,
 	classes        : PropTypes.object.isRequired
 };
 
@@ -155,8 +137,7 @@ const mapStateToProps = (state) =>
 	return {
 		passivePeers   : passivePeersSelector(state),
 		selectedPeerId : state.room.selectedPeerId,
-		spotlightPeers : spotlightPeersSelector(state),
-		lobbyPeers     : lobbyPeersKeySelector(state)
+		spotlightPeers : spotlightPeersSelector(state)
 	};
 };
 
@@ -170,8 +151,7 @@ const ParticipantListContainer = withRoomContext(connect(
 			return (
 				prev.peers === next.peers &&
 				prev.room.spotlights === next.room.spotlights &&
-				prev.room.selectedPeerId === next.room.selectedPeerId &&
-				prev.lobbyPeers === next.lobbyPeers
+				prev.room.selectedPeerId === next.room.selectedPeerId
 			);
 		}
 	}