Support selecting Peers from ParticipantList

app/lib/components/Filmstrip.jsx

@@ -92,12 +92,6 @@ class Filmstrip extends Component
 		}
 	}
 
-	handleSelectPeer = (selectedPeerName) =>
-	{
-		this.props.setSelectedPeer(this.props.selectedPeerName === selectedPeerName ?
-			null : selectedPeerName);
-	};
-
 	render()
 	{
 		const { peers, advancedMode } = this.props;
@@ -128,7 +122,7 @@ class Filmstrip extends Component
 						{Object.keys(peers).map((peerName) => (
 							<div
 								key={peerName}
-								onClick={() => this.handleSelectPeer(peerName)}
+								onClick={() => this.props.setSelectedPeer(peerName)}
 								className={classnames('film', {
 									selected : this.props.selectedPeerName === peerName,
 									active   : this.state.lastSpeaker === peerName

app/lib/components/ParticipantList/ParticipantList.jsx

@@ -1,48 +1,35 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import classNames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
-import * as requestActions from '../../redux/requestActions';
 import * as stateActions from '../../redux/stateActions';
 import PropTypes from 'prop-types';
 import ListPeer from './ListPeer';
 
-class ParticipantList extends React.Component
-{
-	constructor(props)
-	{
-		super(props);
-	}
-
-	render()
-	{
-		const {
-			advancedMode,
-			peers
-		} = this.props;
-
-		return (
-			<div data-component='ParticipantList'>
-				<ul className='list'>
-					{
-						peers.map((peer) =>
-						{
-							return (
-								<li key={peer.name} className='list-item'>
-									<ListPeer name={peer.name} advancedMode={advancedMode} />
-								</li>
-							);
-						})
-					}
-				</ul>
-			</div>
-		);
-	}
-}
+const ParticipantList = ({ advancedMode, peers, setSelectedPeer, selectedPeerName }) => (
+	<div data-component='ParticipantList'>
+		<ul className='list'>
+			{peers.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
+	advancedMode     : PropTypes.bool,
+	peers            : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
+	setSelectedPeer  : PropTypes.func.isRequired,
+	selectedPeerName : PropTypes.string
 };
 
 const mapStateToProps = (state) =>
@@ -50,26 +37,13 @@ const mapStateToProps = (state) =>
 	const peersArray = Object.values(state.peers);
 
 	return {
-		peers : peersArray
+		peers            : peersArray,
+		selectedPeerName : state.room.selectedPeerName
 	};
 };
 
-const mapDispatchToProps = (dispatch) =>
-{
-	return {
-		handleChangeWebcam : (device) =>
-		{
-			dispatch(requestActions.changeWebcam(device.value));
-		},
-		handleChangeAudioDevice : (device) =>
-		{
-			dispatch(requestActions.changeAudioDevice(device.value));
-		},
-		onToggleAdvancedMode : () =>
-		{
-			dispatch(stateActions.toggleAdvancedMode());
-		}
-	};
+const mapDispatchToProps = {
+	setSelectedPeer : stateActions.setSelectedPeer
 };
 
 const ParticipantListContainer = connect(

app/lib/redux/reducers/room.js

@@ -72,7 +72,16 @@ const room = (state = initialState, action) =>
 			return { ...state, mode: action.payload.mode };
 
 		case 'SET_SELECTED_PEER':
-			return { ...state, selectedPeerName: action.payload.selectedPeerName };
+		{
+			const { selectedPeerName } = action.payload;
+
+			return {
+				...state,
+
+				selectedPeerName : state.selectedPeerName === selectedPeerName ?
+					null : selectedPeerName
+			};
+		}
 
 		default:
 			return state;

app/stylus/components/ParticipantList.styl

@@ -7,9 +7,14 @@
 
 		> .list-item {
 			padding: 0.5vmin;
-			border-bottom: 1px solid #ddd;
+			border-bottom: 1px solid #CBCBCB;
 			width: 100%;
 			overflow: hidden;
+			cursor: pointer;
+
+			&.selected {
+				border-bottom-color: #377EFF;
+			}
 		}
 	}
 }