Add basic skeleton for a Filmstrip view

2018-07-19 13:47:14 +02:00
parent b25f2eb012
commit ef2d8a4105
3 changed files with 85 additions and 10 deletions
@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import * as appPropTypes from '../appPropTypes';
+import Peer from '../Peer';
+
+class Filmstrip extends Component
+{
+	state = {
+		selectedPeerName : null
+	};
+
+	handleSelectPeer = (selectedPeerName) =>
+	{
+		this.setState({
+			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;
+
+		// Find the remainding peer names, which will be shown in the filmstrip.
+		const remaindingPeerNames = Object.keys(peers).filter((peerName) =>
+			peerName !== activePeerName);
+
+		return (
+			<div>
+				{peers[activePeerName] && (
+					<div>
+						<Peer
+							advancedMode={advancedMode}
+							name={activePeerName}
+						/>
+					</div>
+				)}
+
+				<div>
+					{remaindingPeerNames.map((peerName) => (
+						<div
+							key={peerName}
+							onClick={() => this.handleSelectPeer(peerName)}
+						>
+							<Peer
+								advancedMode={advancedMode}
+								name={peerName}
+							/>
+						</div>
+					))}
+				</div>
+			</div>
+		);
+	}
+}
+
+Filmstrip.propTypes = {
+	activeSpeakerName : PropTypes.string,
+	advancedMode      : PropTypes.bool,
+	peers             : appPropTypes.peers
+};
+
+const mapStateToProps = (state) =>
+	({
+		activeSpeakerName : state.room.activeSpeakerName,
+		peers             : state.peers
+	});
+
+export default connect(
+	mapStateToProps
+)(Filmstrip);