79 lines
1.8 KiB
JavaScript
79 lines
1.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import classnames from 'classnames';
|
|
import Peer from './Peer';
|
|
|
|
class Filmstrip extends Component
|
|
{
|
|
state = {
|
|
selectedPeerName : null
|
|
};
|
|
|
|
handleSelectPeer = (selectedPeerName) =>
|
|
{
|
|
this.setState((oldState) => ({
|
|
selectedPeerName : oldState.selectedPeerName === selectedPeerName ?
|
|
null : selectedPeerName
|
|
}));
|
|
};
|
|
|
|
render()
|
|
{
|
|
const { activeSpeakerName, peers, advancedMode } = this.props;
|
|
|
|
// Find the name of the peer which is currently speaking. This is either
|
|
// the latest active speaker, or the manually selected peer.
|
|
const activePeerName = this.state.selectedPeerName || activeSpeakerName;
|
|
|
|
return (
|
|
<div data-component='Filmstrip'>
|
|
{peers[activePeerName] && (
|
|
<div className='active-peer'>
|
|
<Peer
|
|
advancedMode={advancedMode}
|
|
name={activePeerName}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className='filmstrip'>
|
|
{Object.keys(peers).map((peerName) => (
|
|
<div
|
|
key={peerName}
|
|
onClick={() => this.handleSelectPeer(peerName)}
|
|
className={classnames('film', {
|
|
selected : this.state.selectedPeerName === peerName,
|
|
active : activeSpeakerName === peerName
|
|
})}
|
|
>
|
|
<div className='film-content'>
|
|
<Peer
|
|
advancedMode={advancedMode}
|
|
name={peerName}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Filmstrip.propTypes = {
|
|
activeSpeakerName : PropTypes.string,
|
|
advancedMode : PropTypes.bool,
|
|
peers : PropTypes.object.isRequired
|
|
};
|
|
|
|
const mapStateToProps = (state) =>
|
|
({
|
|
activeSpeakerName : state.room.activeSpeakerName,
|
|
peers : state.peers
|
|
});
|
|
|
|
export default connect(
|
|
mapStateToProps
|
|
)(Filmstrip);
|