Added Me,Participants in Spotlight and Passive Participants in ParticipantList

app/lib/components/ParticipantList/ParticipantList.jsx

@@ -7,12 +7,27 @@ import PropTypes from 'prop-types';
 import ListPeer from './ListPeer';
 import ListMe from './ListMe';
 
-const ParticipantList = ({ advancedMode, peers, setSelectedPeer, selectedPeerName }) => (
+const ParticipantList =
+	({
+		advancedMode,
+		peers,
+		setSelectedPeer,
+		selectedPeerName,
+		spotlights
+	}) => (
 		<div data-component='ParticipantList'>
 			<ul className='list'>
+				<li className='list-header'>Me:</li>
 				<ListMe />
-
+			</ul>
-			{peers.map((peer) => (
+			<br />
+			<ul className='list'>
+				<li className='list-header'>Participants in Spotlight:</li>
+				{peers.filter((peer) =>
+				{
+					return (spotlights.find((spotlight) =>
+					{ return (spotlight === peer.name); }));
+				}).map((peer) => (
 					<li
 						key={peer.name}
 						className={classNames('list-item', {
@@ -24,15 +39,36 @@ const ParticipantList = ({ advancedMode, peers, setSelectedPeer, selectedPeerNam
 					</li>
 				))}
 			</ul>
+			<br />
+			<ul className='list'>
+				<li className='list-header'>Passive Participants:</li>
+				{peers.filter((peer) =>
+				{
+					return !(spotlights.find((spotlight) =>
+					{ return (spotlight === peer.name); }));
+				}).map((peer) => (
+					<li
+						key={peer.name}
+						className={classNames('list-item', {
+							selected : peer.name === selectedPeerName
+						})}
+						onClick={() => setSelectedPeer(peer.name)}
+					>
+						<ListPeer name={peer.name} advancedMode={advancedMode} />
+					</li>
+				))}
+			</ul>
+
 		</div>
-);
+	);
 
 ParticipantList.propTypes =
 {
 	advancedMode     : PropTypes.bool,
 	peers            : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
 	setSelectedPeer  : PropTypes.func.isRequired,
-	selectedPeerName : PropTypes.string
+	selectedPeerName : PropTypes.string,
+	spotlights       : PropTypes.array.isRequired
 };
 
 const mapStateToProps = (state) =>
@@ -41,7 +77,8 @@ const mapStateToProps = (state) =>
 
 	return {
 		peers            : peersArray,
-		selectedPeerName : state.room.selectedPeerName
+		selectedPeerName : state.room.selectedPeerName,
+		spotlights       : state.room.spotlights
 	};
 };
 

app/stylus/components/ParticipantList.styl

@@ -6,6 +6,10 @@
 					0 4px 20px 0 rgba(0,0,0,0.19);
 		background-color: #fff;
 
+		> .list-header {
+			padding: 0.5rem;
+			font-weight: bolder;
+		}
 		> .list-item {
 			padding: 0.5rem;
 			border-bottom: 1px solid #CBCBCB;