diff --git a/app/lib/RoomClient.js b/app/lib/RoomClient.js index 8e824ba..3797b49 100644 --- a/app/lib/RoomClient.js +++ b/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 } + ] } }); }) diff --git a/app/lib/components/Peers.jsx b/app/lib/components/Peers.jsx index d13745a..229991e 100644 --- a/app/lib/components/Peers.jsx +++ b/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, - peerWidth, - peerHeight + peers } = this.props; const style = { - 'width' : peerWidth, - 'height' : peerHeight + 'width' : this.state.peerWidth, + 'height' : this.state.peerHeight }; return (
{ - Object.keys(peers).map(function(key) + peers.map((peer) => { return ( - +
- +
); @@ -108,36 +113,22 @@ class Peers extends React.Component Peers.propTypes = { - peers : PropTypes.object.isRequired, - 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)); - } - }; + peers : PropTypes.arrayOf(appPropTypes.Peer).isRequired, + activeSpeakerName : PropTypes.string }; const mapStateToProps = (state) => { + const peersArray = Object.values(state.peers); + return { - peers : state.peers, - activeSpeakerName : state.room.activeSpeakerName, - peerHeight : state.room.peerHeight, - peerWidth : state.room.peerWidth + peers : peersArray, + activeSpeakerName : state.room.activeSpeakerName }; }; const PeersContainer = connect( - mapStateToProps, - mapDispatchToProps + mapStateToProps )(Peers); export default PeersContainer;