Remove HiddenPeers, added icon on AppBar

app/src/components/Containers/HiddenPeers.js

@@ -1,139 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import { FormattedMessage } from 'react-intl';
-import * as toolareaActions from '../../actions/toolareaActions';
-import BuddyImage from '../../images/buddy.svg';
-
-const styles = () =>
-	({
-		root :
-		{
-			width              : '12vmin',
-			height             : '9vmin',
-			position           : 'absolute',
-			bottom             : '3%',
-			right              : '3%',
-			color              : 'rgba(170, 170, 170, 1)',
-			cursor             : 'pointer',
-			backgroundImage    : `url(${BuddyImage})`,
-			backgroundColor    : 'rgba(42, 75, 88, 1)',
-			backgroundPosition : 'bottom',
-			backgroundSize     : 'auto 85%',
-			backgroundRepeat   : 'no-repeat',
-			border             : 'var(--peer-border)',
-			boxShadow          : 'var(--peer-shadow)',
-			textAlign          : 'center',
-			verticalAlign      : 'middle',
-			lineHeight         : '1.8vmin',
-			fontSize           : '1.7vmin',
-			fontWeight         : 'bolder',
-			animation          : 'none',
-			'&.pulse'          :
-			{
-				animation : 'pulse 0.5s'
-			}
-		},
-		'@keyframes pulse' :
-		{
-			'0%' :
-			{
-				transform : 'scale3d(1, 1, 1)'
-			},
-			'50%' :
-			{
-				transform : 'scale3d(1.2, 1.2, 1.2)'
-			},
-			'100%' :
-			{
-				transform : 'scale3d(1, 1, 1)'
-			}
-		}
-	});
-
-class HiddenPeers extends React.PureComponent
-{
-	constructor(props)
-	{
-		super(props);
-		this.state = { className: '' };
-	}
-
-	componentDidUpdate(prevProps)
-	{
-		const { hiddenPeersCount } = this.props;
-
-		if (hiddenPeersCount !== prevProps.hiddenPeersCount)
-		{
-			// eslint-disable-next-line react/no-did-update-set-state
-			this.setState({ className: 'pulse' }, () =>
-			{
-				if (this.timeout)
-				{
-					clearTimeout(this.timeout);
-				}
-
-				this.timeout = setTimeout(() =>
-				{
-					this.setState({ className: '' });
-				}, 500);
-			});
-		}
-	}
-
-	render()
-	{
-		const {
-			hiddenPeersCount,
-			openUsersTab,
-			classes
-		} = this.props;
-
-		return (
-			<div
-				className={classnames(classes.root, this.state.className)}
-				onClick={() => openUsersTab()}
-			>
-				<p>
-					+{hiddenPeersCount} <br />
-					<FormattedMessage
-						id='room.hiddenPeers'
-						defaultMessage={
-							`{hiddenPeersCount, plural,
-							one {participant}
-							other {participants}}`
-						}
-						values={{
-							hiddenPeersCount
-						}}
-					/>
-				</p>
-			</div>
-		);
-	}
-}
-
-HiddenPeers.propTypes =
-{
-	hiddenPeersCount : PropTypes.number,
-	openUsersTab     : PropTypes.func.isRequired,
-	classes          : PropTypes.object.isRequired
-};
-
-const mapDispatchToProps = (dispatch) =>
-{
-	return {
-		openUsersTab : () =>
-		{
-			dispatch(toolareaActions.openToolArea());
-			dispatch(toolareaActions.setToolTab('users'));
-		}
-	};
-};
-
-export default connect(
-	null,
-	mapDispatchToProps
-)(withStyles(styles)(HiddenPeers));

app/src/components/Controls/TopBar.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
-	lobbyPeersKeySelector
+	lobbyPeersKeySelector,
+	peersLengthSelector
 } from '../Selectors';
 import * as appPropTypes from '../appPropTypes';
 import { withRoomContext } from '../../RoomContext';
@@ -22,6 +23,7 @@ import FullScreenIcon from '@material-ui/icons/Fullscreen';
 import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
 import SettingsIcon from '@material-ui/icons/Settings';
 import SecurityIcon from '@material-ui/icons/Security';
+import PeopleIcon from '@material-ui/icons/People';
 import LockIcon from '@material-ui/icons/Lock';
 import LockOpenIcon from '@material-ui/icons/LockOpen';
 import Button from '@material-ui/core/Button';
@@ -115,6 +117,7 @@ const TopBar = (props) =>
 	const {
 		roomClient,
 		room,
+		peersLength,
 		lobbyPeers,
 		stickyAppBar,
 		myPicture,
@@ -126,6 +129,7 @@ const TopBar = (props) =>
 		setSettingsOpen,
 		setLockDialogOpen,
 		toggleToolArea,
+		openUsersTab,
 		unread,
 		classes
 	} = props;
@@ -247,6 +251,28 @@ const TopBar = (props) =>
 							</IconButton>
 						</Tooltip>
 					}
+					<Tooltip 
+						title={intl.formatMessage({
+							id             : 'tooltip.participants',
+							defaultMessage : 'Show participants'
+						})}
+					>
+						<IconButton
+							aria-label={intl.formatMessage({
+								id             : 'tooltip.participants',
+								defaultMessage : 'Show participants'
+							})}
+							color='inherit'
+							onClick={() => openUsersTab()}
+						>
+							<Badge
+								color='primary'
+								badgeContent={peersLength + 1}
+							>
+								<PeopleIcon />
+							</Badge>
+						</IconButton>
+					</Tooltip>
 					{ fullscreenEnabled &&
 						<Tooltip title={fullscreenTooltip}>
 							<IconButton
@@ -331,6 +357,7 @@ TopBar.propTypes =
 {
 	roomClient         : PropTypes.object.isRequired,
 	room               : appPropTypes.Room.isRequired,
+	peersLength        : PropTypes.number,
 	lobbyPeers         : PropTypes.array,
 	stickyAppBar       : PropTypes.bool,
 	myPicture          : PropTypes.string,
@@ -343,6 +370,7 @@ TopBar.propTypes =
 	setSettingsOpen    : PropTypes.func.isRequired,
 	setLockDialogOpen  : PropTypes.func.isRequired,
 	toggleToolArea     : PropTypes.func.isRequired,
+	openUsersTab       : PropTypes.func.isRequired,
 	unread             : PropTypes.number.isRequired,
 	classes            : PropTypes.object.isRequired,
 	theme              : PropTypes.object.isRequired
@@ -351,6 +379,7 @@ TopBar.propTypes =
 const mapStateToProps = (state) =>
 	({
 		room         : state.room,
+		peersLength  : peersLengthSelector(state),
 		lobbyPeers   : lobbyPeersKeySelector(state),
 		stickyAppBar : state.settings.stickyAppBar,
 		loggedIn     : state.me.loggedIn,
@@ -377,6 +406,11 @@ const mapDispatchToProps = (dispatch) =>
 		toggleToolArea : () =>
 		{
 			dispatch(toolareaActions.toggleToolArea());
+		},
+		openUsersTab : () =>
+		{
+			dispatch(toolareaActions.openToolArea());
+			dispatch(toolareaActions.setToolTab('users'));
 		}
 	});
 
@@ -389,6 +423,7 @@ export default withRoomContext(connect(
 		{
 			return (
 				prev.room === next.room &&
+				prev.peers === next.peers &&
 				prev.lobbyPeers === next.lobbyPeers &&
 				prev.settings.stickyAppBar === next.settings.stickyAppBar &&
 				prev.me.loggedIn === next.me.loggedIn &&

app/src/components/MeetingViews/Democratic.js

@@ -2,16 +2,13 @@ import React from 'react';
 import { connect } from 'react-redux';
 import {
 	spotlightPeersSelector,
-	peersLengthSelector,
+	videoBoxesSelector
-	videoBoxesSelector,
-	spotlightsLengthSelector
 } from '../Selectors';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Peer from '../Containers/Peer';
 import Me from '../Containers/Me';
-import HiddenPeers from '../Containers/HiddenPeers';
 
 const RATIO = 1.334;
 const PADDING_V = 50;
@@ -130,9 +127,7 @@ class Democratic extends React.PureComponent
 	{
 		const {
 			advancedMode,
-			peersLength,
 			spotlightsPeers,
-			spotlightsLength,
 			toolbarsVisible,
 			stickyAppBar,
 			classes
@@ -169,11 +164,6 @@ class Democratic extends React.PureComponent
 						/>
 					);
 				})}
-				{ spotlightsLength < peersLength &&
-					<HiddenPeers
-						hiddenPeersCount={peersLength - spotlightsLength}
-					/>
-				}
 			</div>
 		);
 	}
@@ -182,9 +172,7 @@ class Democratic extends React.PureComponent
 Democratic.propTypes =
 {
 	advancedMode     : PropTypes.bool,
-	peersLength      : PropTypes.number,
 	boxes            : PropTypes.number,
-	spotlightsLength : PropTypes.number,
 	spotlightsPeers  : PropTypes.array.isRequired,
 	toolbarsVisible  : PropTypes.bool.isRequired,
 	stickyAppBar     : PropTypes.bool,
@@ -194,12 +182,10 @@ Democratic.propTypes =
 const mapStateToProps = (state) =>
 {
 	return {
-		peersLength      : peersLengthSelector(state),
+		boxes           : videoBoxesSelector(state),
-		boxes            : videoBoxesSelector(state),
+		spotlightsPeers : spotlightPeersSelector(state),
-		spotlightsPeers  : spotlightPeersSelector(state),
+		toolbarsVisible : state.room.toolbarsVisible,
-		spotlightsLength : spotlightsLengthSelector(state),
+		stickyAppBar    : state.settings.stickyAppBar
-		toolbarsVisible  : state.room.toolbarsVisible,
-		stickyAppBar     : state.settings.stickyAppBar
 	};
 };
 

app/src/components/MeetingViews/Filmstrip.js

@@ -4,14 +4,12 @@ import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
 import {
-	spotlightsLengthSelector,
 	videoBoxesSelector
 } from '../Selectors';
 import { withRoomContext } from '../../RoomContext';
 import Me from '../Containers/Me';
 import Peer from '../Containers/Peer';
 import SpeakerPeer from '../Containers/SpeakerPeer';
-import HiddenPeers from '../Containers/HiddenPeers';
 import Grid from '@material-ui/core/Grid';
 
 const styles = () =>
@@ -207,7 +205,6 @@ class Filmstrip extends React.PureComponent
 			myId,
 			advancedMode,
 			spotlights,
-			spotlightsLength,
 			classes
 		} = this.props;
 
@@ -284,12 +281,6 @@ class Filmstrip extends React.PureComponent
 						})}
 					</Grid>
 				</div>
-
-				{ spotlightsLength<Object.keys(peers).length &&
-					<HiddenPeers
-						hiddenPeersCount={Object.keys(peers).length-spotlightsLength}
-					/>
-				}
 			</div>
 		);
 	}
@@ -303,7 +294,6 @@ Filmstrip.propTypes = {
 	consumers        : PropTypes.object.isRequired,
 	myId             : PropTypes.string.isRequired,
 	selectedPeerId   : PropTypes.string,
-	spotlightsLength : PropTypes.number,
 	spotlights       : PropTypes.array.isRequired,
 	boxes            : PropTypes.number,
 	classes          : PropTypes.object.isRequired
@@ -318,7 +308,6 @@ const mapStateToProps = (state) =>
 		consumers        : state.consumers,
 		myId             : state.me.id,
 		spotlights       : state.room.spotlights,
-		spotlightsLength : spotlightsLengthSelector(state),
 		boxes            : videoBoxesSelector(state)
 	};
 };