Separated the audio from peers to their own components

app/lib/components/Peer.jsx

@@ -149,7 +149,6 @@ class Peer extends Component
 					<PeerView
 						advancedMode={advancedMode}
 						peer={peer}
-						audioTrack={micConsumer ? micConsumer.track : null}
 						volume={micConsumer ? micConsumer.volume : null}
 						videoTrack={webcamConsumer ? webcamConsumer.track : null}
 						videoVisible={videoVisible}

app/lib/components/PeerAudio/AudioPeer.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import * as appPropTypes from '../appPropTypes';
+import PeerAudio from './PeerAudio';
+
+const AudioPeer = ({ micConsumer }) =>
+{
+	return (
+		<PeerAudio
+			audioTrack={micConsumer ? micConsumer.track : null}
+		/>
+	);
+};
+
+AudioPeer.propTypes =
+{
+	micConsumer : appPropTypes.Consumer,
+	name        : PropTypes.string
+};
+
+const mapStateToProps = (state, { name }) =>
+{
+	const peer = state.peers[name];
+	const consumersArray = peer.consumers
+		.map((consumerId) => state.consumers[consumerId]);
+	const micConsumer =
+		consumersArray.find((consumer) => consumer.source === 'mic');
+
+	return {
+		micConsumer
+	};
+};
+
+const AudioPeerContainer = connect(
+	mapStateToProps
+)(AudioPeer);
+
+export default AudioPeerContainer;

app/lib/components/PeerAudio/AudioPeers.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import * as appPropTypes from '../appPropTypes';
+import AudioPeer from './AudioPeer';
+
+const AudioPeers = ({ peers }) =>
+{
+	return (
+		<div data-component='AudioPeers'>
+			{
+				peers.map((peer) =>
+				{
+					return (
+						<AudioPeer
+							key={peer.name}
+							name={peer.name}
+						/>
+					);
+				})
+			}
+		</div>
+	);
+};
+
+AudioPeers.propTypes =
+	{
+		peers : PropTypes.arrayOf(appPropTypes.Peer).isRequired
+	};
+
+const mapStateToProps = (state) =>
+{
+	const peers = Object.values(state.peers);
+
+	return {
+		peers
+	};
+};
+
+const AudioPeersContainer = connect(
+	mapStateToProps
+)(AudioPeers);
+
+export default AudioPeersContainer;

app/lib/components/PeerAudio/PeerAudio.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class PeerAudio extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+
+		// Latest received audio track.
+		// @type {MediaStreamTrack}
+		this._audioTrack = null;
+	}
+
+	render()
+	{
+		return (
+			<audio
+				ref='audio'
+				autoPlay
+			/>
+		);
+	}
+
+	componentDidMount()
+	{
+		const { audioTrack } = this.props;
+
+		this._setTrack(audioTrack);
+	}
+
+	componentWillReceiveProps(nextProps)
+	{
+		const { audioTrack } = nextProps;
+
+		this._setTrack(audioTrack);
+	}
+
+	_setTrack(audioTrack)
+	{
+		if (this._audioTrack === audioTrack)
+			return;
+
+		this._audioTrack = audioTrack;
+
+		const { audio } = this.refs;
+
+		if (audioTrack)
+		{
+			const stream = new MediaStream;
+
+			if (audioTrack)
+				stream.addTrack(audioTrack);
+
+			audio.srcObject = stream;
+		}
+		else
+		{
+			audio.srcObject = null;
+		}
+	}
+}
+
+PeerAudio.propTypes =
+{
+	audioTrack : PropTypes.any
+};

app/lib/components/Room.jsx

@@ -10,6 +10,7 @@ import * as stateActions from '../redux/stateActions';
 import { Appear } from './transitions';
 import Me from './Me';
 import Peers from './Peers';
+import AudioPeers from './PeerAudio/AudioPeers';
 import Notifications from './Notifications';
 import ToolAreaButton from './ToolArea/ToolAreaButton';
 import ToolArea from './ToolArea/ToolArea';
@@ -82,6 +83,8 @@ class Room extends React.Component
 					<div data-component='Room'>
 						<FullScreenView advancedMode={room.advancedMode} />
 						<div className='room-wrapper'>
+							<AudioPeers />
+
 							<Notifications />
 
 							<ToolAreaButton />

app/stylus/components/AudioPeers.styl

@@ -0,0 +1,6 @@
+[data-component='AudioPeers'] {
+	position: absolute;
+	left: 0;
+	top: 0;
+	opacity: 0;
+}

app/stylus/index.styl

@@ -57,6 +57,7 @@ body {
 @import './components/FullView';
 @import './components/Filmstrip';
 @import './components/FileSharing';
+@import './components/AudioPeers';
 
 // Hack to detect in JS the current media query
 #multiparty-meeting-media-query-detector {