Major cleanup. Moved a lot of CSS variables out too root of CSS for easier styling.

2018-12-18 12:13:47 +01:00
parent db9d423feb
commit 651cd6f737
44 changed files with 296 additions and 517 deletions
@@ -0,0 +1,38 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Me } from '../../appPropTypes';
+
+const ListMe = ({ me }) =>
+{
+	const picture = me.picture || 'resources/images/avatar-empty.jpeg';
+
+	return (
+		<li className='list-item me'>
+			<div data-component='ListPeer'>
+				<img className='avatar' src={picture} />
+
+				<div className='peer-info'>
+					{me.displayName}
+				</div>
+
+				<div className='indicators'>
+					{me.raisedHand && (
+						<div className='icon raise-hand on' />
+					)}
+				</div>
+			</div>
+		</li>
+	);
+};
+
+ListMe.propTypes = {
+	me : Me.isRequired
+};
+
+const mapStateToProps = (state) => ({
+	me : state.me
+});
+
+export default connect(
+	mapStateToProps
+)(ListMe);
@@ -0,0 +1,124 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import * as appPropTypes from '../../appPropTypes';
+import { withRoomContext } from '../../../RoomContext';
+
+const ListPeer = (props) =>
+{
+	const {
+		roomClient,
+		peer,
+		micConsumer,
+		screenConsumer
+	} = props;
+
+	const micEnabled = (
+		Boolean(micConsumer) &&
+		!micConsumer.locallyPaused &&
+		!micConsumer.remotelyPaused
+	);
+
+	const screenVisible = (
+		Boolean(screenConsumer) &&
+		!screenConsumer.locallyPaused &&
+		!screenConsumer.remotelyPaused
+	);
+
+	const picture = peer.picture || 'resources/images/avatar-empty.jpeg';
+
+	return (
+		<div data-component='ListPeer'>
+			<img className='avatar' src={picture} />
+
+			<div className='peer-info'>
+				{peer.displayName}
+			</div>
+			<div className='indicators'>
+				<If condition={peer.raiseHandState}>
+					<div className={
+						classnames(
+							'icon', 'raise-hand', {
+								on  : peer.raiseHandState,
+								off : !peer.raiseHandState
+							}
+						)
+					}
+					/>
+				</If>
+			</div>
+			<div className='volume-container'>
+				<div className={classnames('bar', `level${micEnabled && micConsumer ? micConsumer.volume:0}`)} />
+			</div>
+			<div className='controls'>
+				<If condition={screenConsumer}>
+					<div
+						className={classnames('button', 'screen', {
+							on       : screenVisible,
+							off      : !screenVisible,
+							disabled : peer.peerScreenInProgress
+						})}
+						onClick={(e) =>
+						{
+							e.stopPropagation();
+							screenVisible ?
+								roomClient.modifyPeerConsumer(peer.name, 'screen', true) :
+								roomClient.modifyPeerConsumer(peer.name, 'screen', false);
+						}}
+					/>
+				</If>
+				<div
+					className={classnames('button', 'mic', {
+						on       : micEnabled,
+						off      : !micEnabled,
+						disabled : peer.peerAudioInProgress
+					})}
+					onClick={(e) =>
+					{
+						e.stopPropagation();
+						micEnabled ?
+							roomClient.modifyPeerConsumer(peer.name, 'mic', true) :
+							roomClient.modifyPeerConsumer(peer.name, 'mic', false);
+					}}
+				/>
+			</div>
+		</div>
+	);
+};
+
+ListPeer.propTypes =
+{
+	roomClient     : PropTypes.any.isRequired,
+	advancedMode   : PropTypes.bool,
+	peer           : appPropTypes.Peer.isRequired,
+	micConsumer    : appPropTypes.Consumer,
+	webcamConsumer : appPropTypes.Consumer,
+	screenConsumer : appPropTypes.Consumer
+};
+
+const mapStateToProps = (state, { name }) =>
+{
+	const peer = state.peers[name];
+	const consumersArray = peer.consumers
+		.map((consumerId) => state.consumers[consumerId]);
+	const micConsumer =
+		consumersArray.find((consumer) => consumer.source === 'mic');
+	const webcamConsumer =
+		consumersArray.find((consumer) => consumer.source === 'webcam');
+	const screenConsumer =
+		consumersArray.find((consumer) => consumer.source === 'screen');
+
+	return {
+		peer,
+		micConsumer,
+		webcamConsumer,
+		screenConsumer
+	};
+};
+
+const ListPeerContainer = withRoomContext(connect(
+	mapStateToProps
+)(ListPeer));
+
+export default ListPeerContainer;
@@ -0,0 +1,89 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import * as appPropTypes from '../../appPropTypes';
+import { withRoomContext } from '../../../RoomContext';
+import PropTypes from 'prop-types';
+import ListPeer from './ListPeer';
+import ListMe from './ListMe';
+
+const ParticipantList =
+	({
+		roomClient,
+		advancedMode,
+		peers,
+		selectedPeerName,
+		spotlights
+	}) => (
+		<div data-component='ParticipantList'>
+			<ul className='list'>
+				<li className='list-header'>Me:</li>
+				<ListMe />
+			</ul>
+			<br />
+			<ul className='list'>
+				<li className='list-header'>Participants in Spotlight:</li>
+				{peers.filter((peer) =>
+				{
+					return (spotlights.find((spotlight) =>
+					{ return (spotlight === peer.name); }));
+				}).map((peer) => (
+					<li
+						key={peer.name}
+						className={classNames('list-item', {
+							selected : peer.name === selectedPeerName
+						})}
+						onClick={() => roomClient.setSelectedPeer(peer.name)}
+					>
+						<ListPeer name={peer.name} advancedMode={advancedMode} />
+					</li>
+				))}
+			</ul>
+			<br />
+			<ul className='list'>
+				<li className='list-header'>Passive Participants:</li>
+				{peers.filter((peer) =>
+				{
+					return !(spotlights.find((spotlight) =>
+					{ return (spotlight === peer.name); }));
+				}).map((peer) => (
+					<li
+						key={peer.name}
+						className={classNames('list-item', {
+							selected : peer.name === selectedPeerName
+						})}
+						onClick={() => roomClient.setSelectedPeer(peer.name)}
+					>
+						<ListPeer name={peer.name} advancedMode={advancedMode} />
+					</li>
+				))}
+			</ul>
+
+		</div>
+	);
+
+ParticipantList.propTypes =
+{
+	roomClient       : PropTypes.any.isRequired,
+	advancedMode     : PropTypes.bool,
+	peers            : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
+	selectedPeerName : PropTypes.string,
+	spotlights       : PropTypes.array.isRequired
+};
+
+const mapStateToProps = (state) =>
+{
+	const peersArray = Object.values(state.peers);
+
+	return {
+		peers            : peersArray,
+		selectedPeerName : state.room.selectedPeerName,
+		spotlights       : state.room.spotlights
+	};
+};
+
+const ParticipantListContainer = withRoomContext(connect(
+	mapStateToProps
+)(ParticipantList));
+
+export default ParticipantListContainer;