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 +{ + return ( + + ); +}; + +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 ( +
+ { + peers.map((peer) => + { + return ( + + ); + }) + } +
+ ); +}; + +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 ( +