From 5f4be29d40c10178da02c07dd67703458dede6de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Wed, 24 Oct 2018 11:23:53 +0200
Subject: [PATCH] Separated the audio from peers to their own components

---
 app/lib/components/Peer.jsx                 |  1 -
 app/lib/components/PeerAudio/AudioPeer.jsx  | 39 ++++++++++++
 app/lib/components/PeerAudio/AudioPeers.jsx | 44 ++++++++++++++
 app/lib/components/PeerAudio/PeerAudio.jsx  | 67 +++++++++++++++++++++
 app/lib/components/Room.jsx                 |  3 +
 app/stylus/components/AudioPeers.styl       |  6 ++
 app/stylus/index.styl                       |  1 +
 7 files changed, 160 insertions(+), 1 deletion(-)
 create mode 100644 app/lib/components/PeerAudio/AudioPeer.jsx
 create mode 100644 app/lib/components/PeerAudio/AudioPeers.jsx
 create mode 100644 app/lib/components/PeerAudio/PeerAudio.jsx
 create mode 100644 app/stylus/components/AudioPeers.styl

diff --git a/app/lib/components/Peer.jsx b/app/lib/components/Peer.jsx
index 2aec88a..a49a688 100644
--- a/app/lib/components/Peer.jsx
+++ b/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}
diff --git a/app/lib/components/PeerAudio/AudioPeer.jsx b/app/lib/components/PeerAudio/AudioPeer.jsx
new file mode 100644
index 0000000..ad1a3b6
--- /dev/null
+++ b/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;
diff --git a/app/lib/components/PeerAudio/AudioPeers.jsx b/app/lib/components/PeerAudio/AudioPeers.jsx
new file mode 100644
index 0000000..3dce02e
--- /dev/null
+++ b/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;
diff --git a/app/lib/components/PeerAudio/PeerAudio.jsx b/app/lib/components/PeerAudio/PeerAudio.jsx
new file mode 100644
index 0000000..871c8c4
--- /dev/null
+++ b/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
+};
diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx
index cf394ef..4a0b145 100644
--- a/app/lib/components/Room.jsx
+++ b/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 />
diff --git a/app/stylus/components/AudioPeers.styl b/app/stylus/components/AudioPeers.styl
new file mode 100644
index 0000000..99e9c0a
--- /dev/null
+++ b/app/stylus/components/AudioPeers.styl
@@ -0,0 +1,6 @@
+[data-component='AudioPeers'] {
+	position: absolute;
+	left: 0;
+	top: 0;
+	opacity: 0;
+}
diff --git a/app/stylus/index.styl b/app/stylus/index.styl
index ce004c2..8de11ad 100644
--- a/app/stylus/index.styl
+++ b/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 {