Testing some resolution changes.

app/lib/RoomClient.js

@@ -18,13 +18,6 @@ const ROOM_OPTIONS =
 	}
 };
 
-const VIDEO_CONSTRAINS =
-{
-	qvga : { width: { ideal: 320 }, height: { ideal: 240 }, aspectRatio: 1.334 },
-	vga  : { width: { ideal: 640 }, height: { ideal: 480 }, aspectRatio: 1.334 },
-	hd   : { width: { ideal: 800 }, height: { ideal: 600 }, aspectRatio: 1.334 }
-};
-
 export default class RoomClient
 {
 	constructor(
@@ -459,7 +452,7 @@ export default class RoomClient
 			})
 			.then(() =>
 			{
-				const { device, resolution } = this._webcam;
+				const { device } = this._webcam;
 
 				if (!device)
 					throw new Error('no webcam devices');
@@ -471,7 +464,20 @@ export default class RoomClient
 						video :
 						{
 							deviceId : { exact: device.deviceId },
-							...VIDEO_CONSTRAINS[resolution]
+							optional : [
+								{ minWidth: 160 },
+								{ minWidth: 176 },
+								{ minWidth: 320 },
+								{ minWidth: 352 },
+								{ minWidth: 640 },
+								{ minWidth: 800 },
+								{ minWidth: 1024 },
+								{ minWidth: 1280 },
+								{ minWidth: 1600 },
+								{ minWidth: 1920 },
+								{ minWidth: 2560 },
+								{ minWidth: 3840 }
+							]
 						}
 					});
 			})
@@ -540,7 +546,7 @@ export default class RoomClient
 			})
 			.then(() =>
 			{
-				const { device, resolution } = this._webcam;
+				const { device } = this._webcam;
 
 				logger.debug('changeWebcamResolution() | calling getUserMedia()');
 
@@ -549,7 +555,20 @@ export default class RoomClient
 						video :
 						{
 							deviceId : { exact: device.deviceId },
-							...VIDEO_CONSTRAINS[resolution]
+							optional : [
+								{ minWidth: 160 },
+								{ minWidth: 176 },
+								{ minWidth: 320 },
+								{ minWidth: 352 },
+								{ minWidth: 640 },
+								{ minWidth: 800 },
+								{ minWidth: 1024 },
+								{ minWidth: 1280 },
+								{ minWidth: 1600 },
+								{ minWidth: 1920 },
+								{ minWidth: 2560 },
+								{ minWidth: 3840 }
+							]
 						}
 					});
 			})
@@ -1447,7 +1466,7 @@ export default class RoomClient
 		return Promise.resolve()
 			.then(() =>
 			{
-				const { device, resolution } = this._webcam;
+				const { device } = this._webcam;
 
 				if (!device)
 					throw new Error('no webcam devices');
@@ -1459,7 +1478,20 @@ export default class RoomClient
 						video :
 						{
 							deviceId : { exact: device.deviceId },
-							...VIDEO_CONSTRAINS[resolution]
+							optional : [
+								{ minWidth: 160 },
+								{ minWidth: 176 },
+								{ minWidth: 320 },
+								{ minWidth: 352 },
+								{ minWidth: 640 },
+								{ minWidth: 800 },
+								{ minWidth: 1024 },
+								{ minWidth: 1280 },
+								{ minWidth: 1600 },
+								{ minWidth: 1920 },
+								{ minWidth: 2560 },
+								{ minWidth: 3840 }
+							]
 						}
 					});
 			})

app/lib/components/Peers.jsx

@@ -3,7 +3,6 @@ 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';
 
@@ -13,12 +12,17 @@ class Peers extends React.Component
 	{
 		super();
 		this.state = {
-			ratio : 1.334
+			peerWidth  : 400,
+			peerHeight : 300,
+			ratio      : 1.334
 		};
 	}
 
 	updateDimensions(nextProps = null)
 	{
+		if (!nextProps.peers && !this.props.peers)
+			return;
+
 		const n = nextProps ? nextProps.peers.length : this.props.peers.length;
 
 		if (n == 0)
@@ -47,9 +51,12 @@ class Peers extends React.Component
 				break;
 			}
 		}
-		if (Math.ceil(this.props.peerWidth) !== Math.ceil(0.9 * x))
+		if (Math.ceil(this.state.peerWidth) !== Math.ceil(0.9 * x))
 		{
-			this.props.onComponentResize(0.9 * x, 0.9 * y);
+			this.setState({
+				peerWidth  : 0.9 * x,
+				peerHeight : 0.9 * y
+			});
 		}
 	}
 
@@ -72,30 +79,28 @@ class Peers extends React.Component
 	{
 		const {
 			activeSpeakerName,
-			peers,
+			peers
-			peerWidth,
-			peerHeight
 		} = this.props;
 
 		const style =
 			{
-				'width'  : peerWidth,
+				'width'  : this.state.peerWidth,
-				'height' : peerHeight
+				'height' : this.state.peerHeight
 			};
 
 		return (
 			<div data-component='Peers' ref='peers'>
 				{
-					Object.keys(peers).map(function(key)
+					peers.map((peer) =>
 					{
 						return (
-							<Appear key={peers[key].name} duration={1000}>
+							<Appear key={peer.name} duration={1000}>
 								<div
 									className={classnames('peer-container', {
-										'active-speaker' : peers[key].name === activeSpeakerName
+										'active-speaker' : peer.name === activeSpeakerName
 									})} style={style}
 								>
-									<Peer name={peers[key].name} />
+									<Peer name={peer.name} />
 								</div>
 							</Appear>
 						);
@@ -108,36 +113,22 @@ class Peers extends React.Component
 
 Peers.propTypes =
 {
-	peers             : PropTypes.object.isRequired,
+	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) =>
 {
+	const peersArray = Object.values(state.peers);
+
 	return {
-		peers             : state.peers,
+		peers             : peersArray,
-		activeSpeakerName : state.room.activeSpeakerName,
+		activeSpeakerName : state.room.activeSpeakerName
-		peerHeight        : state.room.peerHeight,
-		peerWidth         : state.room.peerWidth
 	};
 };
 
 const PeersContainer = connect(
-	mapStateToProps,
+	mapStateToProps
-	mapDispatchToProps
 )(Peers);
 
 export default PeersContainer;