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

app/src/components/Containers/Me.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
 import VideoView from '../VideoContainers/VideoView';
+import Volume from './Volume';
 
 const styles = () =>
 	({
@@ -55,7 +56,6 @@ const Me = (props) =>
 		micProducer,
 		webcamProducer,
 		screenProducer,
-		volume,
 		classes
 	} = props;
 
@@ -87,8 +87,6 @@ const Me = (props) =>
 						advancedMode={advancedMode}
 						peer={me}
 						showPeerInfo
-						audioTrack={micProducer ? micProducer.track : null}
-						volume={volume}
 						videoTrack={webcamProducer ? webcamProducer.track : null}
 						videoVisible={videoVisible}
 						audioCodec={micProducer ? micProducer.codec : null}
@@ -97,7 +95,9 @@ const Me = (props) =>
 						{
 							roomClient.changeDisplayName(displayName);
 						}}
-					/>
+					>
+						<Volume name={me.name} />
+					</VideoView>
 				</div>
 			</div>
 			{ screenProducer ?
@@ -128,7 +128,6 @@ Me.propTypes =
 	micProducer    : appPropTypes.Producer,
 	webcamProducer : appPropTypes.Producer,
 	screenProducer : appPropTypes.Producer,
-	volume         : PropTypes.number,
 	style          : PropTypes.object,
 	classes        : PropTypes.object.isRequired
 };
@@ -138,12 +137,22 @@ const mapStateToProps = (state) =>
 	return {
 		me            : state.me,
 		...meProducersSelector(state),
-		volume        : state.peerVolumes[state.me.name],
 		activeSpeaker : state.me.name === state.room.activeSpeakerName
 	};
 };
 
 export default withRoomContext(connect(
 	mapStateToProps,
-	null
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.me === next.me &&
+				prev.producers === next.producers &&
+				prev.room.activeSpeakerName === next.room.activeSpeakerName
+			);
+		}
+	}
 )(withStyles(styles)(Me)));

app/src/components/Containers/Peer.js

@@ -14,6 +14,7 @@ import MicIcon from '@material-ui/icons/Mic';
 import MicOffIcon from '@material-ui/icons/MicOff';
 import NewWindowIcon from '@material-ui/icons/OpenInNew';
 import FullScreenIcon from '@material-ui/icons/Fullscreen';
+import Volume from './Volume';
 
 const styles = (theme) =>
 	({
@@ -125,7 +126,6 @@ const Peer = (props) =>
 		micConsumer,
 		webcamConsumer,
 		screenConsumer,
-		volume,
 		toggleConsumerFullscreen,
 		toggleConsumerWindow,
 		style,
@@ -134,9 +134,6 @@ const Peer = (props) =>
 		theme
 	} = props;
 
-	if (!peer)
-		return;
-
 	const micEnabled = (
 		Boolean(micConsumer) &&
 		!micConsumer.locallyPaused &&
@@ -289,13 +286,14 @@ const Peer = (props) =>
 							advancedMode={advancedMode}
 							peer={peer}
 							showPeerInfo
-							volume={volume}
 							videoTrack={webcamConsumer ? webcamConsumer.track : null}
 							videoVisible={videoVisible}
 							videoProfile={videoProfile}
 							audioCodec={micConsumer ? micConsumer.codec : null}
 							videoCodec={webcamConsumer ? webcamConsumer.codec : null}
-						/>
+						>
+							<Volume name={peer.name} />
+						</VideoView>
 					</div>
 					:null
 				}
@@ -419,7 +417,6 @@ Peer.propTypes =
 	micConsumer              : appPropTypes.Consumer,
 	webcamConsumer           : appPropTypes.Consumer,
 	screenConsumer           : appPropTypes.Consumer,
-	volume                   : PropTypes.number,
 	windowConsumer           : PropTypes.number,
 	activeSpeaker            : PropTypes.bool,
 	style                    : PropTypes.object,
@@ -438,7 +435,6 @@ const makeMapStateToProps = (initialState, props) =>
 		return {
 			peer           : state.peers[props.name],
 			...getPeerConsumers(state, props),
-			volume         : state.peerVolumes[props.name],
 			windowConsumer : state.room.windowConsumer,
 			activeSpeaker  : props.name === state.room.activeSpeakerName
 		};
@@ -465,5 +461,17 @@ const mapDispatchToProps = (dispatch) =>
 
 export default withRoomContext(connect(
 	makeMapStateToProps,
-	mapDispatchToProps
+	mapDispatchToProps,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.peers === next.peers &&
+				prev.consumers === next.consumers &&
+				prev.room.activeSpeakerName === next.room.activeSpeakerName &&
+				prev.room.windowConsumer === next.room.windowConsumer
+			);
+		}
+	}
 )(withStyles(styles, { withTheme: true })(Peer)));

app/src/components/Containers/Volume.js

@@ -0,0 +1,162 @@
+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';
+
+const styles = () =>
+	({
+		volumeLarge :
+		{
+			position       : 'absolute',
+			top            : 0,
+			bottom         : 0,
+			right          : 2,
+			width          : 10,
+			display        : 'flex',
+			flexDirection  : 'column',
+			justifyContent : 'center',
+			alignItems     : 'center'
+		},
+		largeBar :
+		{
+			width              : 6,
+			borderRadius       : 6,
+			background         : 'rgba(yellow, 0.65)',
+			transitionProperty : 'height background-color',
+			transitionDuration : '0.25s',
+			'&.level0'         :
+			{
+				height          : 0,
+				backgroundColor : 'rgba(255, 255, 0, 0.65)'
+			},
+			'&.level1' :
+			{
+				height          : '10%',
+				backgroundColor : 'rgba(255, 255, 0, 0.65)'
+			},
+			'&.level2' :
+			{
+				height          : '20%',
+				backgroundColor : 'rgba(255, 255, 0, 0.65)'
+			},
+			'&.level3' :
+			{
+				height          : '30%',
+				backgroundColor : 'rgba(255, 255, 0, 0.65)'
+			},
+			'&.level4' :
+			{
+				height          : '40%',
+				backgroundColor : 'rgba(255, 165, 0, 0.65)'
+			},
+			'&.level5' :
+			{
+				height          : '50%',
+				backgroundColor : 'rgba(255, 165, 0, 0.65)'
+			},
+			'&.level6' :
+			{
+				height          : '60%',
+				backgroundColor : 'rgba(255, 0, 0, 0.65)'
+			},
+			'&.level7' :
+			{
+				height          : '70%',
+				backgroundColor : 'rgba(255, 0, 0, 0.65)'
+			},
+			'&.level8' :
+			{
+				height          : '80%',
+				backgroundColor : 'rgba(0, 0, 0, 0.65)'
+			},
+			'&.level9' :
+			{
+				height          : '90%',
+				backgroundColor : 'rgba(0, 0, 0, 0.65)'
+			},
+			'&.level10' :
+			{
+				height          : '100%',
+				backgroundColor : 'rgba(0, 0, 0, 0.65)'
+			}
+		},
+		volumeSmall :
+		{
+			float          : 'right',
+			display        : 'flex',
+			flexDirection  : 'row',
+			justifyContent : 'flex-start',
+			width          : '1vmin',
+			position       : 'relative',
+			backgroundSize : '75%'
+		},
+		smallBar :
+		{
+			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' }
+		}
+	});
+
+const Volume = (props) =>
+{
+	const {
+		small,
+		volume,
+		classes
+	} = props;
+
+	return (
+		<div className={small ? classes.volumeSmall : classes.volumeLarge}>
+			<div
+				className={classnames(
+					small ? classes.smallBar : classes.largeBar, `level${volume}`
+				)}
+			/>
+		</div>
+	);
+};
+
+Volume.propTypes =
+{
+	small   : PropTypes.bool,
+	volume  : PropTypes.number,
+	classes : PropTypes.object.isRequired
+};
+
+const makeMapStateToProps = (initialState, props) =>
+{
+	const mapStateToProps = (state) =>
+	{
+		return {
+			volume : state.peerVolumes[props.name]
+		};
+	};
+
+	return mapStateToProps;
+};
+
+export default connect(
+	makeMapStateToProps
+)(withStyles(styles)(Volume));

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}>
+			{children}
-				<div className={classnames(classes.bar, `level${volume}`)} />
-			</div>
 			<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],
+			peer : state.peers[props.name],
-			...getPeerConsumers(state, props),
+			...getPeerConsumers(state, props)
-			volume : state.peerVolumes[props.name]
 		};
 	};
 
@@ -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,

app/src/components/MeetingViews/Democratic.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import {
+	spotlightPeersSelector,
 	peersLengthSelector,
 	videoBoxesSelector,
 	spotlightsLengthSelector
@@ -117,7 +118,7 @@ class Democratic extends React.PureComponent
 		const {
 			advancedMode,
 			peersLength,
-			spotlights,
+			spotlightsPeers,
 			spotlightsLength,
 			classes
 		} = this.props;
@@ -134,13 +135,13 @@ class Democratic extends React.PureComponent
 					advancedMode={advancedMode}
 					style={style}
 				/>
-				{ spotlights.map((peerName) =>
+				{ spotlightsPeers.map((peer) =>
 				{
 					return (
 						<Peer
-							key={peerName}
+							key={peer.name}
 							advancedMode={advancedMode}
-							name={peerName}
+							name={peer.name}
 							style={style}
 						/>
 					);
@@ -162,7 +163,7 @@ Democratic.propTypes =
 	peersLength      : PropTypes.number,
 	boxes            : PropTypes.number,
 	spotlightsLength : PropTypes.number,
-	spotlights       : PropTypes.array.isRequired,
+	spotlightsPeers  : PropTypes.array.isRequired,
 	classes          : PropTypes.object.isRequired
 };
 
@@ -171,7 +172,7 @@ const mapStateToProps = (state) =>
 	return {
 		peersLength      : peersLengthSelector(state),
 		boxes            : videoBoxesSelector(state),
-		spotlights       : state.room.spotlights,
+		spotlightsPeers  : spotlightPeersSelector(state),
 		spotlightsLength : spotlightsLengthSelector(state)
 	};
 };
@@ -184,6 +185,7 @@ export default connect(
 		areStatesEqual : (next, prev) =>
 		{
 			return (
+				prev.peers === next.peers &&
 				prev.producers === next.producers &&
 				prev.consumers === next.consumers &&
 				prev.spotlights === next.spotlights

app/src/components/Notifications/Notifications.js

@@ -81,5 +81,17 @@ const mapDispatchToProps = (dispatch) =>
 	});
 
 export default withSnackbar(
-	connect(mapStateToProps, mapDispatchToProps)(Notifications)
+	connect(
+		mapStateToProps,
+		mapDispatchToProps,
+		null,
+		{
+			areStatesEqual : (next, prev) =>
+			{
+				return (
+					prev.notifications === next.notifications
+				);
+			}
+		}
+	)(Notifications)
 );

app/src/components/PeerAudio/AudioPeers.js

@@ -38,7 +38,17 @@ const mapStateToProps = (state) =>
 	});
 
 const AudioPeersContainer = connect(
-	mapStateToProps
+	mapStateToProps,
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.consumers === next.consumers
+			);
+		}
+	}
 )(AudioPeers);
 
 export default AudioPeersContainer;

app/src/components/Selectors.js

@@ -2,10 +2,15 @@ import { createSelector } from 'reselect';
 
 const producersSelect = (state) => state.producers;
 const consumersSelect = (state) => state.consumers;
-
+const spotlightsSelector = (state) => state.room.spotlights;
-export const spotlightsSelector = (state) => state.room.spotlights;
-
 const peersSelector = (state) => state.peers;
+const getPeerConsumers = (state, props) =>
+	(state.peers[props.name] ? state.peers[props.name].consumers : null);
+const getAllConsumers = (state) => state.consumers;
+const peersKeySelector = createSelector(
+	peersSelector,
+	(peers) => Object.keys(peers)
+);
 
 export const micProducersSelector = createSelector(
 	producersSelect,
@@ -54,13 +59,20 @@ export const screenConsumerSelector = createSelector(
 
 export const spotlightsLengthSelector = createSelector(
 	spotlightsSelector,
-	(spotlights) => (spotlights ? spotlights.length : 0)
+	(spotlights) => spotlights.length
 );
 
 export const spotlightPeersSelector = createSelector(
 	spotlightsSelector,
 	peersSelector,
-	(spotlights, peers) => spotlights.map((peerName) => peers[peerName])
+	(spotlights, peers) =>
+		spotlights.reduce((result, peerName) =>
+		{
+			if (peers[peerName])
+				result.push(peers[peerName]);
+
+			return result;
+		}, [])
 );
 
 export const peersLengthSelector = createSelector(
@@ -68,11 +80,6 @@ export const peersLengthSelector = createSelector(
 	(peers) => Object.values(peers).length
 );
 
-const peersKeySelector = createSelector(
-	peersSelector,
-	(peers) => Object.keys(peers)	
-);
-
 export const passivePeersSelector = createSelector(
 	peersKeySelector,
 	spotlightsSelector,
@@ -101,10 +108,6 @@ export const meProducersSelector = createSelector(
 	}
 );
 
-const getPeerConsumers = (state, props) =>
-	(state.peers[props.name] ? state.peers[props.name].consumers : null);
-const getAllConsumers = (state) => state.consumers;
-
 export const makePeerConsumerSelector = () =>
 {
 	return createSelector(

app/src/components/Settings/Settings.js

@@ -215,5 +215,15 @@ const mapDispatchToProps = {
 
 export default withRoomContext(connect(
 	mapStateToProps,
-	mapDispatchToProps
+	mapDispatchToProps,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.me === next.me &&
+				prev.room === next.room
+			);
+		}
+	}
 )(withStyles(styles)(Settings)));

app/src/components/VideoContainers/FullScreenView.js

@@ -161,5 +161,16 @@ const mapDispatchToProps = (dispatch) =>
 
 export default connect(
 	mapStateToProps,
-	mapDispatchToProps
+	mapDispatchToProps,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.consumers[prev.room.fullScreenConsumer] ===
+					next.consumers[next.room.fullScreenConsumer] &&
+				prev.room.toolbarsVisible === next.room.toolbarsVisible
+			);
+		}
+	}
 )(withStyles(styles)(FullScreenView));

app/src/components/VideoContainers/VideoView.js

@@ -132,81 +132,6 @@ const styles = () =>
 				fontSize      : 11,
 				color         : 'rgba(255, 255, 255, 0.55)'
 			}
-		},
-		volume :
-		{
-			position       : 'absolute',
-			top            : 0,
-			bottom         : 0,
-			right          : 2,
-			width          : 10,
-			display        : 'flex',
-			flexDirection  : 'column',
-			justifyContent : 'center',
-			alignItems     : 'center'
-		},
-		volumeBar :
-		{
-			width              : 6,
-			borderRadius       : 6,
-			background         : 'rgba(yellow, 0.65)',
-			transitionProperty : 'height background-color',
-			transitionDuration : '0.25s',
-			'&.level0'         :
-			{
-				height          : 0,
-				backgroundColor : 'rgba(255, 255, 0, 0.65)'
-			},
-			'&.level1' :
-			{
-				height          : '10%',
-				backgroundColor : 'rgba(255, 255, 0, 0.65)'
-			},
-			'&.level2' :
-			{
-				height          : '20%',
-				backgroundColor : 'rgba(255, 255, 0, 0.65)'
-			},
-			'&.level3' :
-			{
-				height          : '30%',
-				backgroundColor : 'rgba(255, 255, 0, 0.65)'
-			},
-			'&.level4' :
-			{
-				height          : '40%',
-				backgroundColor : 'rgba(255, 165, 0, 0.65)'
-			},
-			'&.level5' :
-			{
-				height          : '50%',
-				backgroundColor : 'rgba(255, 165, 0, 0.65)'
-			},
-			'&.level6' :
-			{
-				height          : '60%',
-				backgroundColor : 'rgba(255, 0, 0, 0.65)'
-			},
-			'&.level7' :
-			{
-				height          : '70%',
-				backgroundColor : 'rgba(255, 0, 0, 0.65)'
-			},
-			'&.level8' :
-			{
-				height          : '80%',
-				backgroundColor : 'rgba(0, 0, 0, 0.65)'
-			},
-			'&.level9' :
-			{
-				height          : '90%',
-				backgroundColor : 'rgba(0, 0, 0, 0.65)'
-			},
-			'&.level10' :
-			{
-				height          : '100%',
-				backgroundColor : 'rgba(0, 0, 0, 0.65)'
-			}
 		}
 	});
 
@@ -218,15 +143,10 @@ class VideoView extends React.PureComponent
 
 		this.state =
 		{
-			volume      : 0, // Integer from 0 to 10.,
 			videoWidth  : null,
 			videoHeight : null
 		};
 
-		// Latest received video track.
-		// @type {MediaStreamTrack}
-		this._audioTrack = null;
-
 		// Latest received video track.
 		// @type {MediaStreamTrack}
 		this._videoTrack = null;
@@ -240,7 +160,6 @@ class VideoView extends React.PureComponent
 		const {
 			isMe,
 			peer,
-			volume,
 			showPeerInfo,
 			videoContain,
 			advancedMode,
@@ -249,6 +168,7 @@ class VideoView extends React.PureComponent
 			audioCodec,
 			videoCodec,
 			onChangeDisplayName,
+			children,
 			classes
 		} = this.props;
 
@@ -331,18 +251,16 @@ class VideoView extends React.PureComponent
 					muted={isMe}
 				/>
 
-				<div className={classes.volume}>
+				{children}
-					<div className={classnames(classes.volumeBar, `level${volume}`)} />
-				</div>
 			</div>
 		);
 	}
 
 	componentDidMount()
 	{
-		const { audioTrack, videoTrack } = this.props;
+		const { videoTrack } = this.props;
 
-		this._setTracks(audioTrack, videoTrack);
+		this._setTracks(videoTrack);
 	}
 
 	componentWillUnmount()
@@ -352,18 +270,17 @@ class VideoView extends React.PureComponent
 
 	componentWillReceiveProps(nextProps)
 	{
-		const { audioTrack, videoTrack } = nextProps;
+		const { videoTrack } = nextProps;
 
-		this._setTracks(audioTrack, videoTrack);
+		this._setTracks(videoTrack);
 
 	}
 
-	_setTracks(audioTrack, videoTrack)
+	_setTracks(videoTrack)
 	{
-		if (this._audioTrack === audioTrack && this._videoTrack === videoTrack)
+		if (this._videoTrack === videoTrack)
 			return;
 
-		this._audioTrack = audioTrack;
 		this._videoTrack = videoTrack;
 
 		clearInterval(this._videoResolutionTimer);
@@ -371,13 +288,10 @@ class VideoView extends React.PureComponent
 
 		const { video } = this.refs;
 
-		if (audioTrack || videoTrack)
+		if (videoTrack)
 		{
 			const stream = new MediaStream();
 
-			if (audioTrack)
-				stream.addTrack(audioTrack);
-
 			if (videoTrack)
 				stream.addTrack(videoTrack);
 
@@ -425,14 +339,13 @@ VideoView.propTypes =
 	showPeerInfo        : PropTypes.bool,
 	videoContain        : PropTypes.bool,
 	advancedMode        : PropTypes.bool,
-	audioTrack          : PropTypes.any,
-	volume              : PropTypes.number,
 	videoTrack          : PropTypes.any,
 	videoVisible        : PropTypes.bool.isRequired,
 	videoProfile        : PropTypes.string,
 	audioCodec          : PropTypes.string,
 	videoCodec          : PropTypes.string,
 	onChangeDisplayName : PropTypes.func,
+	children            : PropTypes.object,
 	classes             : PropTypes.object.isRequired
 };
 

app/src/components/VideoWindow/VideoWindow.js

@@ -66,7 +66,17 @@ const mapDispatchToProps = (dispatch) =>
 
 const VideoWindowContainer = connect(
 	mapStateToProps,
-	mapDispatchToProps
+	mapDispatchToProps,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.consumers[prev.room.windowConsumer] ===
+					next.consumers[next.room.windowConsumer]
+			);
+		}
+	}
 )(VideoWindow);
 
 export default VideoWindowContainer;