diff --git a/app/lib/components/Filmstrip.jsx b/app/lib/components/Filmstrip.jsx index 86a3332..5a86b69 100644 --- a/app/lib/components/Filmstrip.jsx +++ b/app/lib/components/Filmstrip.jsx @@ -21,9 +21,27 @@ class Filmstrip extends Component }; // Find the name of the peer which is currently speaking. This is either - // the latest active speaker, or the manually selected peer. + // the latest active speaker, or the manually selected peer, or, if no + // person has spoken yet, the first peer in the list of peers. getActivePeerName = () => - this.props.selectedPeerName || this.state.lastSpeaker; + { + if (this.props.selectedPeerName) + { + return this.props.selectedPeerName; + } + + if (this.state.lastSpeaker) + { + return this.state.lastSpeaker; + } + + const peerNames = Object.keys(this.props.peers); + + if (peerNames.length > 0) + { + return peerNames[0]; + } + }; isSharingCamera = (peerName) => this.props.peers[peerName] && this.props.peers[peerName].consumers.some((consumer) => diff --git a/app/lib/components/ParticipantList/ListMe.jsx b/app/lib/components/ParticipantList/ListMe.jsx new file mode 100644 index 0000000..6b86025 --- /dev/null +++ b/app/lib/components/ParticipantList/ListMe.jsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { Me } from '../appPropTypes'; + +const ListMe = ({ me }) => +{ + const picture = me.picture || 'resources/images/avatar-empty.jpeg'; + + return ( +