diff --git a/app/src/components/Controls/NetworkIndicator.js b/app/src/components/Controls/NetworkIndicator.js index d02ce50..694dd6e 100644 --- a/app/src/components/Controls/NetworkIndicator.js +++ b/app/src/components/Controls/NetworkIndicator.js @@ -43,26 +43,26 @@ class NetworkIndicator extends React.Component super(props); this.state = { - strengthScale : { - 1 : 'EXCELLENT', + strengthScale : { // text statuses prowived by the "react-wifi-indicator" + 1 : 'EXCELLENT', 2 : 'GREAT', 3 : 'OKAY', 4 : 'WEAK', 5 : 'UNUSABLE', 6 : 'DISCONNECTED' }, - strength : 6, - bitrate : null, - recv : {}, - send : {}, - probe : [], - currBitrate : 0, - maxBitrate : 0, - avgBitrate : 0, - medBitrate : 0, - probeCount : 0, - probeLimit : 3, - highestBitrate: 0 + strength : 6, + recv : {}, + send : {}, + probe : [], + currBitrate : 0, + maxBitrate : 0, + avgBitrate : 0, + medBitrate : 0, + probeCount : 0, + probeLimit : 3, + highestBitrate : 0, + resolution : '' }; } @@ -118,19 +118,19 @@ class NetworkIndicator extends React.Component { const rc = this.props.roomClient; - var probe = [ ...this.state.probe ]; // clone + const probe = [ ...this.state.probe ]; // clone - var probeCount = this.state.probeCount + const probeCount = this.state.probeCount; - var probeLimit = this.state.probeLimit + const probeLimit = this.state.probeLimit; - var currBitrate = this.state.currBitrate + const currBitrate = this.state.currBitrate; - var highestBitrate = this.state.highestBitrate + let highestBitrate = this.state.highestBitrate; - var recv = this.state.recv + const recv = this.state.recv; - var send = this.state.send + const send = this.state.send; probe[probeCount] = currBitrate; // add/update next element @@ -148,23 +148,30 @@ class NetworkIndicator extends React.Component // maximum let maxBitrate = Math.max(...probe); + // highest + this.setState({ resolution: this.props.resolution }); + highestBitrate = (currBitrate > highestBitrate) ? currBitrate : highestBitrate; maxBitrate = (currBitrate > maxBitrate) ? currBitrate : maxBitrate; // average const avgBitrate = [ ...probe ] - .map((x, i, avgBitrate) => x/avgBitrate.length) + .map((x, i, avg) => x/avg.length) .reduce((a, b) => a + b); const percent = await Math.round(currBitrate / medBitrate * 100); - var x = (rc._recvTransport) ? (await rc.getTransportStats(rc._recvTransport.id)) : null + const x = (rc._recvTransport) + ? (await rc.getTransportStats(rc._recvTransport.id)) + : null; - var y = (rc._sendTransport) ? (await rc.getTransportStats(rc._sendTransport.id)) : null + const y = (rc._sendTransport) + ? (await rc.getTransportStats(rc._sendTransport.id)) + : null; - if(x && y ) + if (x && y) { this.setState({ @@ -175,7 +182,7 @@ class NetworkIndicator extends React.Component this.setState({ probe, - probeCount: (probeCount < probeLimit - 1) ? probeCount + 1 : 0 , + probeCount : (probeCount < probeLimit - 1) ? probeCount + 1 : 0, currBitrate : (send) ? Math.round(send.recvBitrate / 1024 / 8) : 0, maxBitrate, avgBitrate, @@ -205,11 +212,18 @@ class NetworkIndicator extends React.Component clearInterval(this.update); } + // componentDidUpdate(prevProps, prevState) { + // if (this.prevState.resolution !== this.state.resolution) { + // this.setState({ highestBitrate: 0}); + // } + // } + render() { const { classes, - advancedMode + advancedMode, + resolution } = this.props; return ( @@ -240,8 +254,9 @@ NetworkIndicator.propTypes = peersLength : PropTypes.number, theme : PropTypes.object.isRequired, classes : PropTypes.object.isRequired, - me : PropTypes.object.isRequired, - advancedMode : PropTypes.bool.isRequired + me : PropTypes.object.isRequired, + advancedMode : PropTypes.bool.isRequired, + resolution : PropTypes.string.isRequired }; const mapStateToProps = (state) => @@ -249,7 +264,8 @@ const mapStateToProps = (state) => room : state.room, advancedMode : state.settings.advancedMode, peersLength : peersLengthSelector(state), - me : state.me + me : state.me, + resolution : state.settings.resolution }); const mapDispatchToProps = (dispatch) => @@ -270,7 +286,8 @@ export default withRoomContext(connect( return ( prev.room === next.room && prev.peers === next.peers && - prev.settings.advancedMode === next.settings.advancedMode + prev.settings.advancedMode === next.settings.advancedMode && + prev.settings.resolution === next.settings.resolution ); } }