diff --git a/app/lib/components/Filmstrip.jsx b/app/lib/components/Filmstrip.jsx index 54a46e1..9588442 100644 --- a/app/lib/components/Filmstrip.jsx +++ b/app/lib/components/Filmstrip.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import ResizeObserver from 'resize-observer-polyfill'; import { connect } from 'react-redux'; import classnames from 'classnames'; +import * as stateActions from '../redux/stateActions'; import Peer from './Peer'; class Filmstrip extends Component @@ -15,15 +16,14 @@ class Filmstrip extends Component } state = { - selectedPeerName : null, - lastSpeaker : null, - width : 400 + lastSpeaker : null, + width : 400 }; // Find the name of the peer which is currently speaking. This is either // the latest active speaker, or the manually selected peer. getActivePeerName = () => - this.state.selectedPeerName || this.state.lastSpeaker; + this.props.selectedPeerName || this.state.lastSpeaker; isSharingCamera = (peerName) => this.props.peers[peerName] && this.props.peers[peerName].consumers.some((consumer) => @@ -94,10 +94,8 @@ class Filmstrip extends Component handleSelectPeer = (selectedPeerName) => { - this.setState((oldState) => ({ - selectedPeerName : oldState.selectedPeerName === selectedPeerName ? - null : selectedPeerName - })); + this.props.setSelectedPeer(this.props.selectedPeerName === selectedPeerName ? + null : selectedPeerName); }; render() @@ -132,7 +130,7 @@ class Filmstrip extends Component key={peerName} onClick={() => this.handleSelectPeer(peerName)} className={classnames('film', { - selected : this.state.selectedPeerName === peerName, + selected : this.props.selectedPeerName === peerName, active : this.state.lastSpeaker === peerName })} > @@ -156,17 +154,24 @@ Filmstrip.propTypes = { advancedMode : PropTypes.bool, peers : PropTypes.object.isRequired, consumers : PropTypes.object.isRequired, - myName : PropTypes.string.isRequired + myName : PropTypes.string.isRequired, + selectedPeerName : PropTypes.string, + setSelectedPeer : PropTypes.func.isRequired }; -const mapStateToProps = (state) => - ({ - activeSpeakerName : state.room.activeSpeakerName, - peers : state.peers, - consumers : state.consumers, - myName : state.me.name - }); +const mapStateToProps = (state) => ({ + activeSpeakerName : state.room.activeSpeakerName, + selectedPeerName : state.room.selectedPeerName, + peers : state.peers, + consumers : state.consumers, + myName : state.me.name +}); + +const mapDispatchToProps = { + setSelectedPeer : stateActions.setSelectedPeer +}; export default connect( - mapStateToProps + mapStateToProps, + mapDispatchToProps )(Filmstrip); diff --git a/app/lib/redux/reducers/room.js b/app/lib/redux/reducers/room.js index 4a787de..0856029 100644 --- a/app/lib/redux/reducers/room.js +++ b/app/lib/redux/reducers/room.js @@ -7,7 +7,8 @@ const initialState = advancedMode : false, fullScreenConsumer : null, // ConsumerID toolbarsVisible : true, - mode : 'democratic' + mode : 'democratic', + selectedPeerName : null }; const room = (state = initialState, action) => @@ -70,6 +71,9 @@ const room = (state = initialState, action) => case 'SET_DISPLAY_MODE': return { ...state, mode: action.payload.mode }; + case 'SET_SELECTED_PEER': + return { ...state, selectedPeerName: action.payload.selectedPeerName }; + default: return state; } diff --git a/app/lib/redux/stateActions.js b/app/lib/redux/stateActions.js index 008d308..1d8d09f 100644 --- a/app/lib/redux/stateActions.js +++ b/app/lib/redux/stateActions.js @@ -472,4 +472,9 @@ export const setPeerPicture = (peerName, picture) => export const loggedIn = () => ({ type : 'LOGGED_IN' - }); \ No newline at end of file + }); + +export const setSelectedPeer = (selectedPeerName) => ({ + type : 'SET_SELECTED_PEER', + payload : { selectedPeerName } +});