From cf0e313d58178a4d5a39af195928cd5f3e51ee39 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Thu, 2 Aug 2018 13:01:35 +0200
Subject: [PATCH] Select random peer if no peer has spoken yet

---
 app/lib/components/Filmstrip.jsx              | 22 ++++++++++-
 app/lib/components/ParticipantList/ListMe.jsx | 38 +++++++++++++++++++
 app/stylus/components/ParticipantList.styl    |  6 +++
 3 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 app/lib/components/ParticipantList/ListMe.jsx

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 (
+		<li className='list-item me'>
+			<div data-component='ListPeer'>
+				<img className='avatar' src={picture} />
+
+				<div className='peer-info'>
+					{me.displayName}
+				</div>
+
+				<div className='indicators'>
+					{me.raisedHand && (
+						<div className='icon raise-hand on' />
+					)}
+				</div>
+			</div>
+		</li>
+	);
+};
+
+ListMe.propTypes = {
+	me : Me.isRequired
+};
+
+const mapStateToProps = (state) => ({
+	me : state.me
+});
+
+export default connect(
+	mapStateToProps
+)(ListMe);
\ No newline at end of file
diff --git a/app/stylus/components/ParticipantList.styl b/app/stylus/components/ParticipantList.styl
index 31c9951..6dd24cc 100644
--- a/app/stylus/components/ParticipantList.styl
+++ b/app/stylus/components/ParticipantList.styl
@@ -12,6 +12,10 @@
 			overflow: hidden;
 			cursor: pointer;
 
+			&.me {
+				cursor: auto;
+			}
+
 			&.selected {
 				border-bottom-color: #377EFF;
 			}
@@ -21,6 +25,8 @@
 
 [data-component='ListPeer'] {
 	display: flex;
+	align-items: center;
+
 	> .indicators {
 		left: 0;
 		top: 0;