Lots of performance fixes

app/src/components/Containers/Me.js

@@ -55,6 +55,7 @@ const Me = (props) =>
 		micProducer,
 		webcamProducer,
 		screenProducer,
+		volume,
 		classes
 	} = props;
 
@@ -87,7 +88,7 @@ const Me = (props) =>
 						peer={me}
 						showPeerInfo
 						audioTrack={micProducer ? micProducer.track : null}
-						volume={micProducer ? micProducer.volume : null}
+						volume={volume}
 						videoTrack={webcamProducer ? webcamProducer.track : null}
 						videoVisible={videoVisible}
 						audioCodec={micProducer ? micProducer.codec : null}
@@ -121,13 +122,13 @@ const Me = (props) =>
 Me.propTypes =
 {
 	roomClient     : PropTypes.any.isRequired,
-	connected      : PropTypes.bool.isRequired,
 	advancedMode   : PropTypes.bool,
 	me             : appPropTypes.Me.isRequired,
 	activeSpeaker  : PropTypes.bool,
 	micProducer    : appPropTypes.Producer,
 	webcamProducer : appPropTypes.Producer,
 	screenProducer : appPropTypes.Producer,
+	volume         : PropTypes.number,
 	style          : PropTypes.object,
 	classes        : PropTypes.object.isRequired
 };
@@ -135,9 +136,9 @@ Me.propTypes =
 const mapStateToProps = (state) =>
 {
 	return {
-		connected     : state.room.state === 'connected',
 		me            : state.me,
 		...meProducersSelector(state),
+		volume        : state.peerVolumes[state.me.name],
 		activeSpeaker : state.me.name === state.room.activeSpeakerName
 	};
 };

app/src/components/Containers/Peer.js

@@ -125,6 +125,7 @@ const Peer = (props) =>
 		micConsumer,
 		webcamConsumer,
 		screenConsumer,
+		volume,
 		toggleConsumerFullscreen,
 		toggleConsumerWindow,
 		style,
@@ -133,6 +134,9 @@ const Peer = (props) =>
 		theme
 	} = props;
 
+	if (!peer)
+		return;
+
 	const micEnabled = (
 		Boolean(micConsumer) &&
 		!micConsumer.locallyPaused &&
@@ -285,7 +289,7 @@ const Peer = (props) =>
 							advancedMode={advancedMode}
 							peer={peer}
 							showPeerInfo
-							volume={micConsumer ? micConsumer.volume : null}
+							volume={volume}
 							videoTrack={webcamConsumer ? webcamConsumer.track : null}
 							videoVisible={videoVisible}
 							videoProfile={videoProfile}
@@ -411,10 +415,11 @@ Peer.propTypes =
 {
 	roomClient               : PropTypes.any.isRequired,
 	advancedMode             : PropTypes.bool,
-	peer                     : appPropTypes.Peer.isRequired,
+	peer                     : appPropTypes.Peer,
 	micConsumer              : appPropTypes.Consumer,
 	webcamConsumer           : appPropTypes.Consumer,
 	screenConsumer           : appPropTypes.Consumer,
+	volume                   : PropTypes.number,
 	windowConsumer           : PropTypes.number,
 	activeSpeaker            : PropTypes.bool,
 	style                    : PropTypes.object,
@@ -424,15 +429,16 @@ Peer.propTypes =
 	theme                    : PropTypes.object.isRequired
 };
 
-const makeMapStateToProps = () =>
+const makeMapStateToProps = (initialState, props) =>
 {
 	const getPeerConsumers = makePeerConsumerSelector();
 
-	const mapStateToProps = (state, props) =>
+	const mapStateToProps = (state) =>
 	{
 		return {
 			peer           : state.peers[props.name],
 			...getPeerConsumers(state, props),
+			volume         : state.peerVolumes[props.name],
 			windowConsumer : state.room.windowConsumer,
 			activeSpeaker  : props.name === state.room.activeSpeakerName
 		};