diff --git a/app/lib/components/Filmstrip.jsx b/app/lib/components/Filmstrip.jsx
index 9588442..86a3332 100644
--- a/app/lib/components/Filmstrip.jsx
+++ b/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) => (
this.handleSelectPeer(peerName)}
+ onClick={() => this.props.setSelectedPeer(peerName)}
className={classnames('film', {
selected : this.props.selectedPeerName === peerName,
active : this.state.lastSpeaker === peerName
diff --git a/app/lib/components/ParticipantList/ParticipantList.jsx b/app/lib/components/ParticipantList/ParticipantList.jsx
index a212509..cf38181 100644
--- a/app/lib/components/ParticipantList/ParticipantList.jsx
+++ b/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 (
-
-
- {
- peers.map((peer) =>
- {
- return (
- -
-
-
- );
- })
- }
-
-
- );
- }
-}
+const ParticipantList = ({ advancedMode, peers, setSelectedPeer, selectedPeerName }) => (
+
+
+ {peers.map((peer) => (
+ - setSelectedPeer(peer.name)}
+ >
+
+
+ ))}
+
+
+);
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(
diff --git a/app/lib/redux/reducers/room.js b/app/lib/redux/reducers/room.js
index 0856029..19872ec 100644
--- a/app/lib/redux/reducers/room.js
+++ b/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;
diff --git a/app/stylus/components/ParticipantList.styl b/app/stylus/components/ParticipantList.styl
index 5b2d1f6..31c9951 100644
--- a/app/stylus/components/ParticipantList.styl
+++ b/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;
+ }
}
}
}