Merge branch 'feature-lastn' into develop

app/lib/components/Chat/Chat.jsx

@@ -34,6 +34,11 @@ class Chat extends Component
 						autoFocus={autofocus}
 						autoComplete='off'
 					/>
+					<input
+						type='submit'
+						className='send'
+						value='Send'
+					/>
 				</form>
 			</div>
 		);

app/lib/components/Chat/MessageList.jsx

@@ -30,7 +30,7 @@ class MessageList extends Component
 
 		return (
 			<div data-component='MessageList' id='messages'>
-				{
+				{ chatmessages.length > 0 ?
 					chatmessages.map((message, i) =>
 					{
 						const messageTime = new Date(message.time);
@@ -61,6 +61,9 @@ class MessageList extends Component
 							</div>
 						);
 					})
+					:<div className='empty'>
+						<p>No one has said anything yet...</p>
+					</div>
 				}
 			</div>
 		);

app/lib/components/FileSharing/SharedFilesList.jsx

@@ -13,14 +13,21 @@ class SharedFilesList extends Component
 {
 	render()
 	{
+		const { sharing } = this.props;
+
 		return (
 			<div className='shared-files'>
-				{this.props.sharing.map((entry, i) => (
-					<FileEntry
-						data={entry}
-						key={i}
-					/>
-				))}
+				{ sharing.length > 0 ?
+					sharing.map((entry, i) => (
+						<FileEntry
+							data={entry}
+							key={i}
+						/>
+					))
+					:<div className='empty'>
+						<p>No one has shared files yet...</p>
+					</div>
+				}
 			</div>
 		);
 	}

app/lib/components/Filmstrip.jsx

@@ -4,8 +4,9 @@ import ResizeObserver from 'resize-observer-polyfill';
 import { connect } from 'react-redux';
 import debounce from 'lodash/debounce';
 import classnames from 'classnames';
-import * as stateActions from '../redux/stateActions';
+import * as requestActions from '../redux/requestActions';
 import Peer from './Peer';
+import HiddenPeers from './HiddenPeers';
 
 class Filmstrip extends Component
 {
@@ -26,11 +27,11 @@ class Filmstrip extends Component
 	// person has spoken yet, the first peer in the list of peers.
 	getActivePeerName = () =>
 	{
-		if (this.props.selectedPeerName) 
+		if (this.props.selectedPeerName)
 		{
 			return this.props.selectedPeerName;
 		}
-		
+
 		if (this.state.lastSpeaker)
 		{
 			return this.state.lastSpeaker;
@@ -52,7 +53,7 @@ class Filmstrip extends Component
 	{
 		let ratio = 4 / 3;
 
-		if (this.isSharingCamera(this.getActivePeerName())) 
+		if (this.isSharingCamera(this.getActivePeerName()))
 		{
 			ratio *= 2;
 		}
@@ -70,11 +71,11 @@ class Filmstrip extends Component
 
 			let width = container.clientWidth;
 
-			if (width / ratio > container.clientHeight) 
+			if (width / ratio > container.clientHeight)
 			{
 				width = container.clientHeight * ratio;
 			}
-			
+
 			this.setState({
 				width
 			});
@@ -113,7 +114,7 @@ class Filmstrip extends Component
 
 	render()
 	{
-		const { peers, advancedMode } = this.props;
+		const { peers, advancedMode, spotlights, spotlightsLength } = this.props;
 
 		const activePeerName = this.getActivePeerName();
 
@@ -138,25 +139,40 @@ class Filmstrip extends Component
 
 				<div className='filmstrip'>
 					<div className='filmstrip-content'>
-						{Object.keys(peers).map((peerName) => (
-							<div
-								key={peerName}
-								onClick={() => this.props.setSelectedPeer(peerName)}
-								className={classnames('film', {
-									selected : this.props.selectedPeerName === peerName,
-									active   : this.state.lastSpeaker === peerName
-								})}
-							>
-								<div className='film-content'>
-									<Peer
-										advancedMode={advancedMode}
-										name={peerName}
-									/>
-								</div>
-							</div>
-						))}
+						{
+							Object.keys(peers).map((peerName) =>
+							{
+								return (
+									spotlights.find((spotlightsElement) => spotlightsElement === peerName)?
+										<div
+											key={peerName}
+											onClick={() => this.props.setSelectedPeer(peerName)}
+											className={classnames('film', {
+												selected : this.props.selectedPeerName === peerName,
+												active   : this.state.lastSpeaker === peerName
+											})}
+										>
+											<div className='film-content'>
+												<Peer
+													advancedMode={advancedMode}
+													name={peerName}
+												/>
+											</div>
+										</div>
+										:null
+								);
+							})
+						}
 					</div>
 				</div>
+				<div className='hidden-peer-container'>
+					{ (spotlightsLength<Object.keys(peers).length)?
+						<HiddenPeers
+							hiddenPeersCount={Object.keys(peers).length-spotlightsLength}
+						/>:null
+					}
+				</div>
+
 			</div>
 		);
 	}
@@ -169,19 +185,28 @@ Filmstrip.propTypes = {
 	consumers         : PropTypes.object.isRequired,
 	myName            : PropTypes.string.isRequired,
 	selectedPeerName  : PropTypes.string,
-	setSelectedPeer   : PropTypes.func.isRequired
+	setSelectedPeer   : PropTypes.func.isRequired,
+	spotlightsLength  : PropTypes.number,
+	spotlights        : PropTypes.array.isRequired
 };
 
-const mapStateToProps = (state) => ({
-	activeSpeakerName : state.room.activeSpeakerName,
-	selectedPeerName  : state.room.selectedPeerName,
-	peers             : state.peers,
-	consumers         : state.consumers,
-	myName            : state.me.name
-});
+const mapStateToProps = (state) =>
+{
+	const spotlightsLength = state.room.spotlights ? state.room.spotlights.length : 0;
+
+	return {
+		activeSpeakerName : state.room.activeSpeakerName,
+		selectedPeerName  : state.room.selectedPeerName,
+		peers             : state.peers,
+		consumers         : state.consumers,
+		myName            : state.me.name,
+		spotlights        : state.room.spotlights,
+		spotlightsLength
+	};
+};
 
 const mapDispatchToProps = {
-	setSelectedPeer : stateActions.setSelectedPeer
+	setSelectedPeer : requestActions.setSelectedPeer
 };
 
 export default connect(

app/lib/components/HiddenPeers.jsx

@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import * as stateActions from '../redux/stateActions';
+
+class HiddenPeers extends Component
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = { className: '' };
+	}
+
+	componentDidUpdate(prevProps)
+	{
+		const { hiddenPeersCount } = this.props;
+
+		if (hiddenPeersCount !== prevProps.hiddenPeersCount)
+		{
+			// eslint-disable-next-line react/no-did-update-set-state
+			this.setState({ className: 'pulse' }, () =>
+			{
+				if (this.timeout)
+				{
+					clearTimeout(this.timeout);
+				}
+
+				this.timeout = setTimeout(() =>
+				{
+					this.setState({ className: '' });
+				}, 2000);
+			});
+		}
+	}
+
+	render()
+	{
+		const {
+			hiddenPeersCount,
+			openUsersTab
+		} = this.props;
+
+		return (
+			<div
+				data-component='HiddenPeers'
+				className={this.state.className}
+				onMouseOver={this.handleMouseOver}
+				onMouseOut={this.handleMouseOut}
+			>
+				<div data-component='HiddenPeersView'>
+					<div className={classnames('view-container', this.state.className)} onClick={() => openUsersTab()}>
+						<p>+{hiddenPeersCount} <br /> participant
+							{(hiddenPeersCount === 1) ? null : 's'}
+						</p>
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
+
+HiddenPeers.propTypes =
+{
+	hiddenPeersCount : PropTypes.number,
+	openUsersTab     : PropTypes.func.isRequired
+};
+
+const mapDispatchToProps = (dispatch) =>
+{
+	return {
+		openUsersTab : () =>
+		{
+			dispatch(stateActions.openToolArea());
+			dispatch(stateActions.setToolTab('users'));
+		}
+	};
+};
+
+const HiddenPeersContainer = connect(
+	null,
+	mapDispatchToProps
+)(HiddenPeers);
+
+export default HiddenPeersContainer;

app/lib/components/ParticipantList/ListMe.jsx

@@ -35,4 +35,4 @@ const mapStateToProps = (state) => ({
 
 export default connect(
 	mapStateToProps
-)(ListMe);
+)(ListMe);

app/lib/components/ParticipantList/ListPeer.jsx

@@ -10,12 +10,9 @@ const ListPeer = (props) =>
 	const {
 		peer,
 		micConsumer,
-		webcamConsumer,
 		screenConsumer,
 		onMuteMic,
 		onUnmuteMic,
-		onDisableWebcam,
-		onEnableWebcam,
 		onDisableScreen,
 		onEnableScreen
 	} = props;
@@ -26,12 +23,6 @@ const ListPeer = (props) =>
 		!micConsumer.remotelyPaused
 	);
 
-	const videoVisible = (
-		Boolean(webcamConsumer) &&
-		!webcamConsumer.locallyPaused &&
-		!webcamConsumer.remotelyPaused
-	);
-
 	const screenVisible = (
 		Boolean(screenConsumer) &&
 		!screenConsumer.locallyPaused &&
@@ -61,6 +52,9 @@ const ListPeer = (props) =>
 					:null
 				}
 			</div>
+			<div className='volume-container'>
+				<div className={classnames('bar', `level${micEnabled && micConsumer ? micConsumer.volume:0}`)} />
+			</div>
 			<div className='controls'>
 				{ screenConsumer ?
 					<div
@@ -84,28 +78,12 @@ const ListPeer = (props) =>
 						off      : !micEnabled,
 						disabled : peer.peerAudioInProgress
 					})}
-					style={{ opacity : micEnabled && micConsumer ? (micConsumer.volume/10)
-						+ 0.2 :1 }}
 					onClick={(e) =>
 					{
 						e.stopPropagation();
 						micEnabled ? onMuteMic(peer.name) : onUnmuteMic(peer.name);
 					}}
 				/>
-
-				<div
-					className={classnames('button', 'webcam', {
-						on       : videoVisible,
-						off      : !videoVisible,
-						disabled : peer.peerVideoInProgress
-					})}
-					onClick={(e) =>
-					{
-						e.stopPropagation();
-						videoVisible ?
-							onDisableWebcam(peer.name) : onEnableWebcam(peer.name);
-					}}
-				/>
 			</div>
 		</div>
 	);

app/lib/components/ParticipantList/ParticipantList.jsx

@@ -2,37 +2,73 @@ import React from 'react';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
-import * as stateActions from '../../redux/stateActions';
+import * as requestActions from '../../redux/requestActions';
 import PropTypes from 'prop-types';
 import ListPeer from './ListPeer';
 import ListMe from './ListMe';
 
-const ParticipantList = ({ advancedMode, peers, setSelectedPeer, selectedPeerName }) => (
-	<div data-component='ParticipantList'>
-		<ul className='list'>
-			<ListMe />
+const ParticipantList =
+	({
+		advancedMode,
+		peers,
+		setSelectedPeer,
+		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={() => 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={() => setSelectedPeer(peer.name)}
+					>
+						<ListPeer name={peer.name} advancedMode={advancedMode} />
+					</li>
+				))}
+			</ul>
 
-			{peers.map((peer) => (
-				<li
-					key={peer.name}
-					className={classNames('list-item', {
-						selected : peer.name === selectedPeerName
-					})}
-					onClick={() => setSelectedPeer(peer.name)}
-				>
-					<ListPeer name={peer.name} advancedMode={advancedMode} />
-				</li>
-			))}
-		</ul>
-	</div>
-);
+		</div>
+	);
 
 ParticipantList.propTypes =
 {
 	advancedMode     : PropTypes.bool,
 	peers            : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
 	setSelectedPeer  : PropTypes.func.isRequired,
-	selectedPeerName : PropTypes.string
+	selectedPeerName : PropTypes.string,
+	spotlights       : PropTypes.array.isRequired
 };
 
 const mapStateToProps = (state) =>
@@ -41,12 +77,13 @@ const mapStateToProps = (state) =>
 
 	return {
 		peers            : peersArray,
-		selectedPeerName : state.room.selectedPeerName
+		selectedPeerName : state.room.selectedPeerName,
+		spotlights       : state.room.spotlights
 	};
 };
 
 const mapDispatchToProps = {
-	setSelectedPeer : stateActions.setSelectedPeer
+	setSelectedPeer : requestActions.setSelectedPeer
 };
 
 const ParticipantListContainer = connect(

app/lib/components/Peer.jsx

@@ -38,10 +38,6 @@ class Peer extends Component
 			screenConsumer,
 			onMuteMic,
 			onUnmuteMic,
-			onDisableWebcam,
-			onEnableWebcam,
-			onDisableScreen,
-			onEnableScreen,
 			toggleConsumerFullscreen,
 			style
 		} = this.props;
@@ -90,6 +86,13 @@ class Peer extends Component
 					:null
 				}
 
+				{!videoVisible ?
+					<div className='paused-video'>
+						<p>this video is paused</p>
+					</div>
+					:null
+				}
+
 				<div className={classnames('view-container', 'webcam')} style={style}>
 					<div className='indicators'>
 						{peer.raiseHandState ?
@@ -123,20 +126,6 @@ class Peer extends Component
 							}}
 						/>
 
-						<div
-							className={classnames('button', 'webcam', {
-								on       : videoVisible,
-								off      : !videoVisible,
-								disabled : peer.peerVideoInProgress
-							})}
-							onClick={(e) =>
-							{
-								e.stopPropagation();
-								videoVisible ?
-									onDisableWebcam(peer.name) : onEnableWebcam(peer.name);
-							}}
-						/>
-
 						<div
 							className={classnames('button', 'fullscreen')}
 							onClick={(e) =>
@@ -146,10 +135,10 @@ class Peer extends Component
 							}}
 						/>
 					</div>
+
 					<PeerView
 						advancedMode={advancedMode}
 						peer={peer}
-						audioTrack={micConsumer ? micConsumer.track : null}
 						volume={micConsumer ? micConsumer.volume : null}
 						videoTrack={webcamConsumer ? webcamConsumer.track : null}
 						videoVisible={videoVisible}
@@ -166,20 +155,6 @@ class Peer extends Component
 								visible : this.state.controlsVisible
 							})}
 						>
-							<div
-								className={classnames('button', 'screen', {
-									on       : screenVisible,
-									off      : !screenVisible,
-									disabled : peer.peerScreenInProgress
-								})}
-								onClick={(e) =>
-								{
-									e.stopPropagation();
-									screenVisible ?
-										onDisableScreen(peer.name) : onEnableScreen(peer.name);
-								}}
-							/>
-
 							<div
 								className={classnames('button', 'fullscreen')}
 								onClick={(e) =>
@@ -213,12 +188,8 @@ Peer.propTypes =
 	screenConsumer           : appPropTypes.Consumer,
 	onMuteMic                : PropTypes.func.isRequired,
 	onUnmuteMic              : PropTypes.func.isRequired,
-	onEnableWebcam           : PropTypes.func.isRequired,
-	onDisableWebcam          : PropTypes.func.isRequired,
 	streamDimensions         : PropTypes.object,
 	style                    : PropTypes.object,
-	onEnableScreen           : PropTypes.func.isRequired,
-	onDisableScreen          : PropTypes.func.isRequired,
 	toggleConsumerFullscreen : PropTypes.func.isRequired
 };
 
@@ -253,23 +224,6 @@ const mapDispatchToProps = (dispatch) =>
 		{
 			dispatch(requestActions.unmutePeerAudio(peerName));
 		},
-		onEnableWebcam : (peerName) =>
-		{
-
-			dispatch(requestActions.resumePeerVideo(peerName));
-		},
-		onDisableWebcam : (peerName) =>
-		{
-			dispatch(requestActions.pausePeerVideo(peerName));
-		},
-		onEnableScreen : (peerName) =>
-		{
-			dispatch(requestActions.resumePeerScreen(peerName));
-		},
-		onDisableScreen : (peerName) =>
-		{
-			dispatch(requestActions.pausePeerScreen(peerName));
-		},
 		toggleConsumerFullscreen : (consumer) =>
 		{
 			if (consumer)

app/lib/components/PeerAudio/AudioPeer.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import * as appPropTypes from '../appPropTypes';
+import PeerAudio from './PeerAudio';
+
+const AudioPeer = ({ micConsumer }) =>
+{
+	return (
+		<PeerAudio
+			audioTrack={micConsumer ? micConsumer.track : null}
+		/>
+	);
+};
+
+AudioPeer.propTypes =
+{
+	micConsumer : appPropTypes.Consumer,
+	name        : PropTypes.string
+};
+
+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');
+
+	return {
+		micConsumer
+	};
+};
+
+const AudioPeerContainer = connect(
+	mapStateToProps
+)(AudioPeer);
+
+export default AudioPeerContainer;

app/lib/components/PeerAudio/AudioPeers.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import * as appPropTypes from '../appPropTypes';
+import AudioPeer from './AudioPeer';
+
+const AudioPeers = ({ peers }) =>
+{
+	return (
+		<div data-component='AudioPeers'>
+			{
+				peers.map((peer) =>
+				{
+					return (
+						<AudioPeer
+							key={peer.name}
+							name={peer.name}
+						/>
+					);
+				})
+			}
+		</div>
+	);
+};
+
+AudioPeers.propTypes =
+	{
+		peers : PropTypes.arrayOf(appPropTypes.Peer).isRequired
+	};
+
+const mapStateToProps = (state) =>
+{
+	const peers = Object.values(state.peers);
+
+	return {
+		peers
+	};
+};
+
+const AudioPeersContainer = connect(
+	mapStateToProps
+)(AudioPeers);
+
+export default AudioPeersContainer;

app/lib/components/PeerAudio/PeerAudio.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class PeerAudio extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+
+		// Latest received audio track.
+		// @type {MediaStreamTrack}
+		this._audioTrack = null;
+	}
+
+	render()
+	{
+		return (
+			<audio
+				ref='audio'
+				autoPlay
+			/>
+		);
+	}
+
+	componentDidMount()
+	{
+		const { audioTrack } = this.props;
+
+		this._setTrack(audioTrack);
+	}
+
+	componentWillReceiveProps(nextProps)
+	{
+		const { audioTrack } = nextProps;
+
+		this._setTrack(audioTrack);
+	}
+
+	_setTrack(audioTrack)
+	{
+		if (this._audioTrack === audioTrack)
+			return;
+
+		this._audioTrack = audioTrack;
+
+		const { audio } = this.refs;
+
+		if (audioTrack)
+		{
+			const stream = new MediaStream;
+
+			if (audioTrack)
+				stream.addTrack(audioTrack);
+
+			audio.srcObject = stream;
+		}
+		else
+		{
+			audio.srcObject = null;
+		}
+	}
+}
+
+PeerAudio.propTypes =
+{
+	audioTrack : PropTypes.any
+};

app/lib/components/Peers.jsx

@@ -6,6 +6,7 @@ import debounce from 'lodash/debounce';
 import * as appPropTypes from './appPropTypes';
 import { Appear } from './transitions';
 import Peer from './Peer';
+import HiddenPeers from './HiddenPeers';
 import ResizeObserver from 'resize-observer-polyfill';
 
 const RATIO = 1.334;
@@ -26,7 +27,7 @@ class Peers extends React.Component
 
 	updateDimensions = debounce(() =>
 	{
-		if (!this.peersRef.current) 
+		if (!this.peersRef.current)
 		{
 			return;
 		}
@@ -91,7 +92,9 @@ class Peers extends React.Component
 		const {
 			advancedMode,
 			activeSpeakerName,
-			peers
+			peers,
+			spotlights,
+			spotlightsLength
 		} = this.props;
 
 		const style =
@@ -106,22 +109,35 @@ class Peers extends React.Component
 					peers.map((peer) =>
 					{
 						return (
-							<Appear key={peer.name} duration={1000}>
-								<div
-									className={classnames('peer-container', {
-										'active-speaker' : peer.name === activeSpeakerName
-									})}
-								>
-									<Peer
-										advancedMode={advancedMode}
-										name={peer.name}
-										style={style}
-									/>
-								</div>
-							</Appear>
+							(spotlights.find(function(spotlightsElement)
+							{ return spotlightsElement == peer.name; }))?
+								<Appear key={peer.name} duration={1000}>
+									<div
+										className={classnames('peer-container', {
+											'selected'       : this.props.selectedPeerName === peer.name,
+											'active-speaker' : peer.name === activeSpeakerName
+										})}
+									>
+										<div className='peer-content'>
+											<Peer
+												advancedMode={advancedMode}
+												name={peer.name}
+												style={style}
+											/>
+										</div>
+									</div>
+								</Appear>
+								:null
 						);
 					})
 				}
+				<div className='hidden-peer-container'>
+					{ (spotlightsLength<peers.length)?
+						<HiddenPeers
+							hiddenPeersCount={peers.length-spotlightsLength}
+						/>:null
+					}
+				</div>
 			</div>
 		);
 	}
@@ -132,20 +148,27 @@ Peers.propTypes =
 		advancedMode      : PropTypes.bool,
 		peers             : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
 		boxes             : PropTypes.number,
-		activeSpeakerName : PropTypes.string
+		activeSpeakerName : PropTypes.string,
+		selectedPeerName  : PropTypes.string,
+		spotlightsLength  : PropTypes.number,
+		spotlights        : PropTypes.array.isRequired
 	};
 
 const mapStateToProps = (state) =>
 {
 	const peers = Object.values(state.peers);
-
-	const boxes = peers.length + Object.values(state.consumers)
+	const spotlights = state.room.spotlights;
+	const spotlightsLength = spotlights ? state.room.spotlights.length : 0;
+	const boxes = spotlightsLength + Object.values(state.consumers)
 		.filter((consumer) => consumer.source === 'screen').length;
 
 	return {
 		peers,
 		boxes,
-		activeSpeakerName : state.room.activeSpeakerName
+		activeSpeakerName : state.room.activeSpeakerName,
+		selectedPeerName  : state.room.selectedPeerName,
+		spotlights,
+		spotlightsLength
 	};
 };
 

app/lib/components/Room.jsx

@@ -4,12 +4,14 @@ import ReactTooltip from 'react-tooltip';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import CookieConsent from 'react-cookie-consent';
 import * as appPropTypes from './appPropTypes';
 import * as requestActions from '../redux/requestActions';
 import * as stateActions from '../redux/stateActions';
 import { Appear } from './transitions';
 import Me from './Me';
 import Peers from './Peers';
+import AudioPeers from './PeerAudio/AudioPeers';
 import Notifications from './Notifications';
 import ToolAreaButton from './ToolArea/ToolAreaButton';
 import ToolArea from './ToolArea/ToolArea';
@@ -32,16 +34,16 @@ class Room extends React.Component
 	 * given amount of time has passed since the
 	 * last time the cursor was moved.
 	 */
-	waitForHide = idle(() => 
+	waitForHide = idle(() =>
 	{
 		this.props.setToolbarsVisible(false);
 	}, TIMEOUT);
 
-	handleMovement = () => 
+	handleMovement = () =>
 	{
 		// If the toolbars were hidden, show them again when
 		// the user moves their cursor.
-		if (!this.props.room.toolbarsVisible) 
+		if (!this.props.room.toolbarsVisible)
 		{
 			this.props.setToolbarsVisible(true);
 		}
@@ -80,9 +82,16 @@ class Room extends React.Component
 
 				<Appear duration={300}>
 					<div data-component='Room'>
+						<CookieConsent>
+							This website uses cookies to enhance the user experience.
+						</CookieConsent>
+
 						<FullScreenView advancedMode={room.advancedMode} />
+
 						<div className='room-wrapper'>
 							<div data-component='Logo' />
+							<AudioPeers />
+
 							<Notifications />
 
 							<ToolAreaButton />
@@ -94,7 +103,7 @@ class Room extends React.Component
 								</div>
 								:null
 							}
-										
+
 							<div
 								className={classnames('room-link-wrapper room-controls', {
 									'visible' : this.props.room.toolbarsVisible
@@ -123,7 +132,7 @@ class Room extends React.Component
 												{
 													return;
 												}
-			
+
 												event.preventDefault();
 											}}
 										>