first working layout for democratic view

app/lib/components/Peers.jsx

@@ -3,37 +3,123 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import * as appPropTypes from './appPropTypes';
+import * as stateActions from '../redux/stateActions';
 import { Appear } from './transitions';
 import Peer from './Peer';
 
-const Peers = ({ peers, activeSpeakerName }) =>
+class Peers extends React.Component
 {
-	return (
-		<div data-component='Peers'>
+	constructor()
+	{
+		super();
+		this.state = {
+			ratio : 4 / 3
+		};
+		
+	}
+	updateDimensions()
+	{
+		const n = this.props.peers.length;
+
+		if (n == 0) 
+		{
+			return;
+		}
+
+		const width = this.refs.peers.clientWidth;
+		const height = this.refs.peers.clientHeight;
+		
+		let x, y, space;
+		
+		for (let rows = 1; rows < 100; rows = rows + 1)
+		{
+			x = width / Math.ceil(n / rows);
+			y = x / this.state.ratio;
+			if (height < (y * rows))
 			{
-				peers.map((peer) =>
-				{
-					return (
-						<Appear key={peer.name} duration={1000}>
-							<div
-								className={classnames('peer-container', {
-									'active-speaker' : peer.name === activeSpeakerName
-								})}
-							>
-								<Peer name={peer.name} />
-							</div>
-						</Appear>
-					);
-				})
+				y = height / rows;
+				x = this.state.ratio * y;
+				break;
 			}
-		</div>
-	);
-};
+			space = height - (y * (rows));
+			if (space < y)
+			{ 
+				break; 
+			}
+		}
+		if (Math.ceil(this.props.peerWidth) !== Math.ceil(0.9 * x))
+		{
+			this.props.onComponentResize(0.9 * x, 0.9 * y);
+		}
+	}
+	
+	componentDidMount()
+	{
+		window.addEventListener('resize', this.updateDimensions.bind(this));
+	}
+	
+	componentWillUnmount() 
+	{
+		window.removeEventListener('resize', this.updateDimensions.bind(this));
+	}
+	
+	render()
+	{
+		const {
+			activeSpeakerName,
+			peers,
+			peerWidth,
+			peerHeight
+		} = this.props;
+		
+		const style = 
+			{
+				'width'  : peerWidth,
+				'height' : peerHeight
+			};
+
+		this.updateDimensions();
+		
+		return (
+			<div data-component='Peers' ref='peers'>
+				{
+					peers.map((peer) =>
+					{
+						return (
+							<Appear key={peer.name} duration={1000}>
+								<div
+									className={classnames('peer-container', {
+										'active-speaker' : peer.name === activeSpeakerName
+									})} style={style}
+								>
+									<Peer name={peer.name} />
+								</div>
+							</Appear>
+						);
+					})
+				}
+			</div>
+		);
+	}
+}
 
 Peers.propTypes =
 {
 	peers             : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
-	activeSpeakerName : PropTypes.string
+	activeSpeakerName : PropTypes.string,
+	peerHeight        : PropTypes.number,
+	peerWidth         : PropTypes.number,
+	onComponentResize : PropTypes.func.isRequired
+};
+
+const mapDispatchToProps = (dispatch) =>
+{
+	return {
+		onComponentResize : (peerWidth, peerHeight) =>
+		{
+			dispatch(stateActions.onComponentResize(peerWidth, peerHeight));
+		}
+	};
 };
 
 const mapStateToProps = (state) =>
@@ -44,10 +130,15 @@ const mapStateToProps = (state) =>
 	
 	return {
 		peers             : peersArray,
-		activeSpeakerName : state.room.activeSpeakerName
+		activeSpeakerName : state.room.activeSpeakerName,
+		peerHeight        : state.room.peerHeight,
+		peerWidth         : state.room.peerWidth
 	};
 };
 
-const PeersContainer = connect(mapStateToProps)(Peers);
+const PeersContainer = connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(Peers);
 
 export default PeersContainer;

app/lib/redux/STATE.md

@@ -2,6 +2,8 @@
 
 ```js
 {
+	peerWidth : 200,
+	peerHeight : 150,
   room :
   {
     url               : 'https://example.io/?&roomId=d0el8y34',

app/lib/redux/reducers/room.js

@@ -2,7 +2,9 @@ const initialState =
 {
 	url               : null,
 	state             : 'new', // new/connecting/connected/disconnected/closed,
-	activeSpeakerName : null
+	activeSpeakerName : null,
+	peerHeight        : 300,
+	peerWidth         : 400
 };
 
 const room = (state = initialState, action) =>
@@ -33,6 +35,13 @@ const room = (state = initialState, action) =>
 			return { ...state, activeSpeakerName: peerName };
 		}
 
+		case 'SET_COMPONENT_SIZE':
+		{
+			const { peerWidth, peerHeight } = action.payload;
+
+			return { ...state, peerWidth: peerWidth, peerHeight: peerHeight };
+		}
+
 		default:
 			return state;
 	}

app/lib/redux/stateActions.js

@@ -22,6 +22,14 @@ export const setRoomActiveSpeaker = (peerName) =>
 	};
 };
 
+export const onComponentResize = (peerWidth, peerHeight) =>
+{
+	return {
+		type    : 'SET_COMPONENT_SIZE',
+		payload : { peerWidth, peerHeight }
+	};
+};
+
 export const setMe = ({ peerName, displayName, displayNameSet, device }) =>
 {
 	return {

app/stylus/components/Peers.styl

@@ -1,10 +1,11 @@
 [data-component='Peers'] {
 	min-height: 100%;
 	width: 100%;
+	height: 100%;
 
 	+desktop() {
 		width: 100%;
-		padding: 40px 0 140px 0;
+		padding: 0px 0 0px 0;
 		display: flex;
 		flex-direction: row;
 		flex-wrap: wrap;
@@ -29,8 +30,6 @@
 
 		+desktop() {
 			flex: 0 0 auto;
-			height: 382px;
-			width: 450px;
 			margin: 6px;
 			border: 1px solid rgba(#fff, 0.15);
 			box-shadow: 0px 5px 12px 2px rgba(#111, 0.5);

app/stylus/index.styl

@@ -48,7 +48,7 @@ body {
 #multiparty-meeting-media-query-detector {
 	position: relative;
 	z-index: -1000;
-	bottom: 0;
+	bottom: 1px;
 	left: 0;
 	height: 1px;
 	width: 1px;