Fixes to performance. Moved volume out to new component to optimize rerenders.

app/src/components/MeetingDrawer/Chat/ChatInput.js

@@ -127,5 +127,18 @@ const mapStateToProps = (state) =>
 	});
 
 export default withRoomContext(
-	connect(mapStateToProps)(withStyles(styles)(ChatInput))
+	connect(
+		mapStateToProps,
+		null,
+		null,
+		{
+			areStatesEqual : (next, prev) =>
+			{
+				return (
+					prev.me.displayName === next.me.displayName &&
+					prev.me.picture === next.me.picture
+				);
+			}
+		}
+	)(withStyles(styles)(ChatInput))
 );

app/src/components/MeetingDrawer/MeetingDrawer.js

@@ -119,5 +119,16 @@ const mapDispatchToProps = {
 
 export default connect(
 	mapStateToProps,
-	mapDispatchToProps
+	mapDispatchToProps,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.toolarea.currentToolTab === next.toolarea.currentToolTab &&
+				prev.toolarea.unreadMessages === next.toolarea.unreadMessages &&
+				prev.toolarea.unreadFiles === next.toolarea.unreadFiles
+			);
+		}
+	}
 )(withStyles(styles, { withTheme: true })(MeetingDrawer));

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

@@ -111,5 +111,15 @@ const mapStateToProps = (state) => ({
 });
 
 export default connect(
-	mapStateToProps
+	mapStateToProps,
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.me === next.me
+			);
+		}
+	}
 )(withStyles(styles)(ListMe));

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

@@ -82,42 +82,6 @@ const styles = () =>
 				backgroundImage : `url(${HandIcon})`
 			}
 		},
-		volumeContainer :
-		{
-			float          : 'right',
-			display        : 'flex',
-			flexDirection  : 'row',
-			justifyContent : 'flex-start',
-			width          : '1vmin',
-			position       : 'relative',
-			backgroundSize : '75%'
-		},
-		bar :
-		{
-			flex               : '0 0 auto',
-			margin             : '0.3rem',
-			backgroundSize     : '75%',
-			backgroundRepeat   : 'no-repeat',
-			backgroundColor    : 'rgba(0, 0, 0, 1)',
-			cursor             : 'pointer',
-			transitionProperty : 'opacity, background-color',
-			width              : 3,
-			borderRadius       : 6,
-			transitionDuration : '0.25s',
-			position           : 'absolute',
-			bottom             : 0,
-			'&.level0'         : { height: 0 },
-			'&.level1'         : { height: '0.2vh' },
-			'&.level2'         : { height: '0.4vh' },
-			'&.level3'         : { height: '0.6vh' },
-			'&.level4'         : { height: '0.8vh' },
-			'&.level5'         : { height: '1.0vh' },
-			'&.level6'         : { height: '1.2vh' },
-			'&.level7'         : { height: '1.4vh' },
-			'&.level8'         : { height: '1.6vh' },
-			'&.level9'         : { height: '1.8vh' },
-			'&.level10'        : { height: '2.0vh' }
-		},
 		controls :
 		{
 			float          : 'right',
@@ -169,13 +133,10 @@ const ListPeer = (props) =>
 		peer,
 		micConsumer,
 		screenConsumer,
-		volume,
+		children,
 		classes
 	} = props;
 
-	if (!peer)
-		return;
-
 	const micEnabled = (
 		Boolean(micConsumer) &&
 		!micConsumer.locallyPaused &&
@@ -211,9 +172,7 @@ const ListPeer = (props) =>
 					:null
 				}
 			</div>
-			<div className={classes.volumeContainer}>
-				<div className={classnames(classes.bar, `level${volume}`)} />
-			</div>
+			{children}
 			<div className={classes.controls}>
 				{ screenConsumer ?
 					<div
@@ -271,7 +230,7 @@ ListPeer.propTypes =
 	micConsumer    : appPropTypes.Consumer,
 	webcamConsumer : appPropTypes.Consumer,
 	screenConsumer : appPropTypes.Consumer,
-	volume         : PropTypes.number,
+	children       : PropTypes.object,
 	classes        : PropTypes.object.isRequired
 };
 
@@ -282,9 +241,8 @@ const makeMapStateToProps = (initialState, props) =>
 	const mapStateToProps = (state) =>
 	{
 		return {
-			peer   : state.peers[props.name],
-			...getPeerConsumers(state, props),
-			volume : state.peerVolumes[props.name]
+			peer : state.peers[props.name],
+			...getPeerConsumers(state, props)
 		};
 	};
 
@@ -292,5 +250,16 @@ const makeMapStateToProps = (initialState, props) =>
 };
 
 export default withRoomContext(connect(
-	makeMapStateToProps
+	makeMapStateToProps,
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.peers === next.peers &&
+				prev.consumers === next.consumers
+			);
+		}
+	}
 )(withStyles(styles)(ListPeer)));

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import {
-	passivePeersSelector
+	passivePeersSelector,
+	spotlightPeersSelector
 } from '../../Selectors';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
@@ -9,6 +10,7 @@ import { withRoomContext } from '../../../RoomContext';
 import PropTypes from 'prop-types';
 import ListPeer from './ListPeer';
 import ListMe from './ListMe';
+import Volume from '../../Containers/Volume';
 
 const styles = (theme) =>
 	({
@@ -75,7 +77,7 @@ class ParticipantList extends React.PureComponent
 			advancedMode,
 			passivePeers,
 			selectedPeerName,
-			spotlights,
+			spotlightPeers,
 			classes
 		} = this.props;
 
@@ -88,15 +90,17 @@ class ParticipantList extends React.PureComponent
 				<br />
 				<ul className={classes.list}>
 					<li className={classes.listheader}>Participants in Spotlight:</li>
-					{ spotlights.map((peerName) => (
+					{ spotlightPeers.map((peer) => (
 						<li
-							key={peerName}
+							key={peer.name}
 							className={classNames(classes.listItem, {
-								selected : peerName === selectedPeerName
+								selected : peer.name === selectedPeerName
 							})}
-							onClick={() => roomClient.setSelectedPeer(peerName)}
+							onClick={() => roomClient.setSelectedPeer(peer.name)}
 						>
-							<ListPeer name={peerName} advancedMode={advancedMode} />
+							<ListPeer name={peer.name} advancedMode={advancedMode}>
+								<Volume small name={peer.name} />
+							</ListPeer>
 						</li>
 					))}
 				</ul>
@@ -126,16 +130,18 @@ ParticipantList.propTypes =
 	advancedMode     : PropTypes.bool,
 	passivePeers     : PropTypes.array,
 	selectedPeerName : PropTypes.string,
-	spotlights       : PropTypes.array.isRequired,
+	spotlightPeers   : PropTypes.array,
 	classes          : PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state) =>
-	({
+{
+	return {
 		passivePeers     : passivePeersSelector(state),
 		selectedPeerName : state.room.selectedPeerName,
-		spotlights       : state.room.spotlights
-	});
+		spotlightPeers   : spotlightPeersSelector(state)
+	};
+};
 
 const ParticipantListContainer = withRoomContext(connect(
 	mapStateToProps,