From b73b8c1aa05612d2841d5f50e3c8e0d1fe166a29 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Sun, 26 Apr 2020 21:46:55 +0200 Subject: [PATCH 01/18] create component "NetworkIndicator" add to VideoView for Me, receive data from server / getTransportStats, estimate of connection/value [wip] show recv/send bitrate in advanced mode --- app/package.json | 1 + app/src/RoomClient.js | 17 ++ .../components/Controls/NetworkIndicator.js | 259 ++++++++++++++++++ .../components/VideoContainers/VideoView.js | 34 ++- 4 files changed, 297 insertions(+), 14 deletions(-) create mode 100644 app/src/components/Controls/NetworkIndicator.js diff --git a/app/package.json b/app/package.json index 1dab672..583dd08 100644 --- a/app/package.json +++ b/app/package.json @@ -32,6 +32,7 @@ "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "react-wakelock-react16": "0.0.7", + "react-wifi-indicator": "^1.0.1", "redux": "^4.0.4", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", diff --git a/app/src/RoomClient.js b/app/src/RoomClient.js index 630851a..5d6efad 100644 --- a/app/src/RoomClient.js +++ b/app/src/RoomClient.js @@ -257,6 +257,7 @@ export default class RoomClient this._startKeyListener(); this._startDevicesListener(); + } close() @@ -594,6 +595,21 @@ export default class RoomClient }); } + async getTransportStats(transportId) + { + + logger.debug('getTransportStats() [transportId: "%s"]', transportId); + + try + { + return await this.sendRequest('getTransportStats', { transportId: transportId }); + } + catch (error) + { + logger.error('getTransportStats() | failed: %o', error); + } + } + async changeDisplayName(displayName) { logger.debug('changeDisplayName() [displayName:"%s"]', displayName); @@ -1959,6 +1975,7 @@ export default class RoomClient { switch (notification.method) { + case 'enteredLobby': { store.dispatch(roomActions.setInLobby(true)); diff --git a/app/src/components/Controls/NetworkIndicator.js b/app/src/components/Controls/NetworkIndicator.js new file mode 100644 index 0000000..a888386 --- /dev/null +++ b/app/src/components/Controls/NetworkIndicator.js @@ -0,0 +1,259 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import { + peersLengthSelector +} from '../Selectors'; +import * as appPropTypes from '../appPropTypes'; +import { withRoomContext } from '../../RoomContext'; +import { withStyles } from '@material-ui/core/styles'; +import WifiIndicator from 'react-wifi-indicator'; +import Logger from '../../Logger'; + +const logger = new Logger('NetworkIndicator'); + +const styles = () => + ({ + root : { + verticalAlign : 'middle', + '& img' : { + display : 'inline', + width : '1.7em', + height : '1.7em', + margin : '10px' + } + }, + + label : { + color : 'white' + }, + + strength : + { + margin : 0, + padding : 0 + } + + }); + +class NetworkIndicator extends React.Component +{ + constructor(props) + { + super(props); + + this.state = { + strengthScale : { + 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 + }; + } + + // const intl = useIntl(); + async handleUpdateStrength() + { + // if (this.props.peersLength == 0) + // { + + const percent = this.state.percent; + + logger.warn('[percent: "%s"]', percent); + + switch (true) + { + case (percent <= 20): + + await this.setState({ strength: 5 }); + break; + + case (percent <= 40): + + await this.setState({ strength: 4 }); + break; + + case (percent <= 60): + + await this.setState({ strength: 3 }); + break; + + case (percent <= 80): + + await this.setState({ strength: 2 }); + break; + + case (percent <= 100): + + await this.setState({ strength: 1 }); + break; + + default: + break; + } + + // } + // else + // { + // this.setState({ strength: 6 }); + // } + } + + async handleGetData() + { + const rc = this.props.roomClient; + + const recv = await rc.getTransportStats(rc._recvTransport.id); + + const send = await rc.getTransportStats(rc._sendTransport.id); + + // current + const currBitrate = Math.round(send[0].recvBitrate / 1024 / 8); // in kb + + // probe + const probe = [ ...this.state.probe ]; // clone + + const sec = new Date().getSeconds() + .toString() + .split('') + .map(Number)[1]; + + probe[sec] = currBitrate; // add/update next element + + // median + const med = (arr) => + { + const mid = Math.floor(arr.length / 2); + const nums = [ ...arr ].sort((a, b) => a - b); + + return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2; + }; + + const medBitrate = med([ ...probe ]); + + // maximum + let maxBitrate = Math.max(...probe); + + maxBitrate = (currBitrate > maxBitrate) ? currBitrate : maxBitrate; + + // average + const avgBitrate = [ ...probe ] + .map((x, i, avgBitrate) => x/avgBitrate.length) + .reduce((a, b) => a + b); + + const percent = + await Math.round(this.state.currBitrate / this.state.medBitrate * 100); + + this.setState({ + recv : recv[0], + send : send[0], + probe, + currBitrate, + maxBitrate, + avgBitrate, + medBitrate, + percent + }); + + logger.warn('[currBitrate: "%s"]', currBitrate); + logger.warn('[maxBitrate: "%s"]', maxBitrate); + logger.warn('[medBitrate: "%s"]', medBitrate); + logger.warn('[avgBitrate: "%s"]', avgBitrate); + } + + componentDidMount() + { + this.update = setInterval(async () => + { + await this.handleGetData(); + await this.handleUpdateStrength(); + }, 1000); + } + + componentWillUnmount() + { + clearInterval(this.update); + } + + render() + { + const { + classes, + advancedMode + } = this.props; + + return ( + + + + + + {advancedMode && + + {/* rr:{ Math.round(this.state.recv.recvBitrate / 1024 /8) || 0}, */} + { Math.round(this.state.recv.sendBitrate / 1024 /8) || 0}kb ⇙ |  + { Math.round(this.state.send.recvBitrate / 1024 /8) || 0}kb ⇗ + {/* ss:{ Math.round(this.state.send.sendBitrate / 1024) /8 || 0} */} + + } + + ); + } +} + +NetworkIndicator.propTypes = + { + roomClient : PropTypes.object.isRequired, + room : appPropTypes.Room.isRequired, + peersLength : PropTypes.number, + theme : PropTypes.object.isRequired, + classes : PropTypes.object.isRequired, + me : PropTypes.object.isRequired, + advancedMode : PropTypes.bool.isRequired + }; + +const mapStateToProps = (state) => + ({ + room : state.room, + advancedMode : state.settings.advancedMode, + peersLength : peersLengthSelector(state), + me : state.me + }); + +const mapDispatchToProps = (dispatch) => + ({ + // toggleToolArea : () => + // { + // dispatch(toolareaActions.toggleToolArea()); + // } + }); + +export default withRoomContext(connect( + mapStateToProps, + mapDispatchToProps, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.room === next.room && + prev.peers === next.peers && + prev.settings.advancedMode === next.settings.advancedMode + ); + } + } +)(withStyles(styles, { withTheme: true })(NetworkIndicator))); diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index c978433..fec8779 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -10,6 +10,7 @@ import SignalCellular1BarIcon from '@material-ui/icons/SignalCellular1Bar'; import SignalCellular2BarIcon from '@material-ui/icons/SignalCellular2Bar'; import SignalCellular3BarIcon from '@material-ui/icons/SignalCellular3Bar'; import SignalCellularAltIcon from '@material-ui/icons/SignalCellularAlt'; +import NetworkIndicator from '../Controls/NetworkIndicator'; const styles = (theme) => ({ @@ -267,20 +268,25 @@ class VideoView extends React.PureComponent
{ isMe ? - onChangeDisplayName(newDisplayName)} - /> + + + onChangeDisplayName(newDisplayName)} + /> + + : {displayName} From 9a1646a39dfc202693781235c41d014e402a1215 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Wed, 6 May 2020 23:06:47 +0200 Subject: [PATCH 02/18] Change probe counting from sec to state inc --- app/src/components/Controls/NetworkIndicator.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/app/src/components/Controls/NetworkIndicator.js b/app/src/components/Controls/NetworkIndicator.js index a888386..886a97a 100644 --- a/app/src/components/Controls/NetworkIndicator.js +++ b/app/src/components/Controls/NetworkIndicator.js @@ -59,7 +59,8 @@ class NetworkIndicator extends React.Component currBitrate : 0, maxBitrate : 0, avgBitrate : 0, - medBitrate : 0 + medBitrate : 1, + probeCount : 0 }; } @@ -125,12 +126,12 @@ class NetworkIndicator extends React.Component // probe const probe = [ ...this.state.probe ]; // clone - const sec = new Date().getSeconds() - .toString() - .split('') - .map(Number)[1]; + if (this.state.probeCount < 5) + this.setState({ probeCount: this.state.probeCount + 1}); + else + this.setState({ probeCount: 1 }); - probe[sec] = currBitrate; // add/update next element + probe[this.state.probeCount] = currBitrate; // add/update next element // median const med = (arr) => @@ -171,6 +172,7 @@ class NetworkIndicator extends React.Component logger.warn('[maxBitrate: "%s"]', maxBitrate); logger.warn('[medBitrate: "%s"]', medBitrate); logger.warn('[avgBitrate: "%s"]', avgBitrate); + logger.warn('[probeCount: "%s"]', this.state.probeCount); } componentDidMount() From 71562cf57d80a76598402ed655e8a34cdb086d23 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Thu, 7 May 2020 02:39:23 +0200 Subject: [PATCH 03/18] Rebuild, fix null error with null --- .../components/Controls/NetworkIndicator.js | 44 ++++++++++++------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/app/src/components/Controls/NetworkIndicator.js b/app/src/components/Controls/NetworkIndicator.js index 886a97a..93bd9b0 100644 --- a/app/src/components/Controls/NetworkIndicator.js +++ b/app/src/components/Controls/NetworkIndicator.js @@ -59,8 +59,9 @@ class NetworkIndicator extends React.Component currBitrate : 0, maxBitrate : 0, avgBitrate : 0, - medBitrate : 1, - probeCount : 0 + medBitrate : 0, + probeCount : 1, + probeLimit : 3 }; } @@ -116,22 +117,19 @@ class NetworkIndicator extends React.Component { const rc = this.props.roomClient; - const recv = await rc.getTransportStats(rc._recvTransport.id); + var probe = [ ...this.state.probe ]; // clone + + var probeCount = this.state.probeCount - const send = await rc.getTransportStats(rc._sendTransport.id); + var probeLimit = this.state.probeLimit - // current - const currBitrate = Math.round(send[0].recvBitrate / 1024 / 8); // in kb + var currBitrate = this.state.currBitrate - // probe - const probe = [ ...this.state.probe ]; // clone + var recv = this.state.recv - if (this.state.probeCount < 5) - this.setState({ probeCount: this.state.probeCount + 1}); - else - this.setState({ probeCount: 1 }); + var send = this.state.send - probe[this.state.probeCount] = currBitrate; // add/update next element + probe[probeCount] = currBitrate; // add/update next element // median const med = (arr) => @@ -155,13 +153,25 @@ class NetworkIndicator extends React.Component .reduce((a, b) => a + b); const percent = - await Math.round(this.state.currBitrate / this.state.medBitrate * 100); + await Math.round(currBitrate / medBitrate * 100); + + var x = (rc._recvTransport) ? (await rc.getTransportStats(rc._recvTransport.id)) : null + + var y = (rc._sendTransport) ? (await rc.getTransportStats(rc._sendTransport.id)) : null + + if(x && y ) + { + + this.setState({ + recv : x[0], + send : y[0] + }); + } this.setState({ - recv : recv[0], - send : send[0], probe, - currBitrate, + probeCount: (probeCount < probeLimit) ? probeCount + 1 : 1 , + currBitrate : (send) ? Math.round(send.recvBitrate / 1024 / 8) : 0, maxBitrate, avgBitrate, medBitrate, From 49083376e2574d746ad0ae003d1d1d9138a85bdb Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Thu, 7 May 2020 03:06:45 +0200 Subject: [PATCH 04/18] Store probe from zero --- app/src/components/Controls/NetworkIndicator.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/components/Controls/NetworkIndicator.js b/app/src/components/Controls/NetworkIndicator.js index 93bd9b0..20f5f20 100644 --- a/app/src/components/Controls/NetworkIndicator.js +++ b/app/src/components/Controls/NetworkIndicator.js @@ -60,7 +60,7 @@ class NetworkIndicator extends React.Component maxBitrate : 0, avgBitrate : 0, medBitrate : 0, - probeCount : 1, + probeCount : 0, probeLimit : 3 }; } @@ -170,7 +170,7 @@ class NetworkIndicator extends React.Component this.setState({ probe, - probeCount: (probeCount < probeLimit) ? probeCount + 1 : 1 , + probeCount: (probeCount < probeLimit - 1) ? probeCount + 1 : 0 , currBitrate : (send) ? Math.round(send.recvBitrate / 1024 / 8) : 0, maxBitrate, avgBitrate, From 084e5ab665a1619334af4bc0b990e7464bff29fc Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Thu, 7 May 2020 03:53:19 +0200 Subject: [PATCH 05/18] Add highestBitrate --- app/src/components/Controls/NetworkIndicator.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/app/src/components/Controls/NetworkIndicator.js b/app/src/components/Controls/NetworkIndicator.js index 20f5f20..d02ce50 100644 --- a/app/src/components/Controls/NetworkIndicator.js +++ b/app/src/components/Controls/NetworkIndicator.js @@ -61,7 +61,8 @@ class NetworkIndicator extends React.Component avgBitrate : 0, medBitrate : 0, probeCount : 0, - probeLimit : 3 + probeLimit : 3, + highestBitrate: 0 }; } @@ -125,6 +126,8 @@ class NetworkIndicator extends React.Component var currBitrate = this.state.currBitrate + var highestBitrate = this.state.highestBitrate + var recv = this.state.recv var send = this.state.send @@ -145,6 +148,8 @@ class NetworkIndicator extends React.Component // maximum let maxBitrate = Math.max(...probe); + highestBitrate = (currBitrate > highestBitrate) ? currBitrate : highestBitrate; + maxBitrate = (currBitrate > maxBitrate) ? currBitrate : maxBitrate; // average @@ -175,7 +180,8 @@ class NetworkIndicator extends React.Component maxBitrate, avgBitrate, medBitrate, - percent + percent, + highestBitrate }); logger.warn('[currBitrate: "%s"]', currBitrate); From 2a4f6606916a402128771a3ed8ccca97e0246f6b Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Mon, 11 May 2020 08:55:05 +0200 Subject: [PATCH 06/18] Fix eslint errors --- .../components/Controls/NetworkIndicator.js | 79 +++++++++++-------- 1 file changed, 48 insertions(+), 31 deletions(-) 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 ); } } From 59d48253a33f5474042536c9ba905b3340c838b0 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Mon, 11 May 2020 21:10:08 +0200 Subject: [PATCH 07/18] remove graphical indicator, refactor only to statistics --- app/src/RoomClient.js | 32 +- app/src/actions/transportActions.js | 5 + app/src/components/Containers/Me.js | 14 +- .../components/Controls/NetworkIndicator.js | 294 ------------------ .../components/VideoContainers/VideoView.js | 130 ++++++-- app/src/reducers/rootReducer.js | 4 +- app/src/reducers/transports.js | 19 ++ 7 files changed, 173 insertions(+), 325 deletions(-) create mode 100644 app/src/actions/transportActions.js delete mode 100644 app/src/components/Controls/NetworkIndicator.js create mode 100644 app/src/reducers/transports.js diff --git a/app/src/RoomClient.js b/app/src/RoomClient.js index 5d6efad..b39b2b9 100644 --- a/app/src/RoomClient.js +++ b/app/src/RoomClient.js @@ -13,6 +13,7 @@ import * as lobbyPeerActions from './actions/lobbyPeerActions'; import * as consumerActions from './actions/consumerActions'; import * as producerActions from './actions/producerActions'; import * as notificationActions from './actions/notificationActions'; +import * as transportActions from './actions/transportActions'; let createTorrent; @@ -258,6 +259,8 @@ export default class RoomClient this._startDevicesListener(); + this._getTransportStats(); + } close() @@ -595,14 +598,33 @@ export default class RoomClient }); } - async getTransportStats(transportId) + async _getTransportStats() { - - logger.debug('getTransportStats() [transportId: "%s"]', transportId); - try { - return await this.sendRequest('getTransportStats', { transportId: transportId }); + setInterval(async () => + { + if (this._recvTransport) + { + logger.debug('getTransportStats() - recv [transportId: "%s"]', this._recvTransport.id); + + const recv = await this.sendRequest('getTransportStats', { transportId: this._recvTransport.id }); + + store.dispatch( + transportActions.addTransportStats(recv, 'recv')); + } + + if (this._sendTransport) + { + logger.debug('getTransportStats() - send [transportId: "%s"]', this._sendTransport.id); + + const send = await this.sendRequest('getTransportStats', { transportId: this._sendTransport.id }); + + store.dispatch( + transportActions.addTransportStats(send, 'send')); + } + + }, 1000); } catch (error) { diff --git a/app/src/actions/transportActions.js b/app/src/actions/transportActions.js new file mode 100644 index 0000000..46b901e --- /dev/null +++ b/app/src/actions/transportActions.js @@ -0,0 +1,5 @@ +export const addTransportStats = (transport, type) => + ({ + type : 'ADD_TRANSPORT_STATS', + payload : { transport, type } + }); \ No newline at end of file diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index b79c5d0..fb5b60a 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -141,7 +141,8 @@ const Me = (props) => webcamProducer, screenProducer, canShareScreen, - classes + classes, + transports } = props; const videoVisible = ( @@ -445,6 +446,7 @@ const Me = (props) => videoVisible={videoVisible} audioCodec={micProducer && micProducer.codec} videoCodec={webcamProducer && webcamProducer.codec} + netInfo={transports && transports} onChangeDisplayName={(displayName) => { roomClient.changeDisplayName(displayName); @@ -541,7 +543,9 @@ Me.propTypes = smallButtons : PropTypes.bool, canShareScreen : PropTypes.bool.isRequired, classes : PropTypes.object.isRequired, - theme : PropTypes.object.isRequired + theme : PropTypes.object.isRequired, + transports : PropTypes.object.isRequired + }; const mapStateToProps = (state) => @@ -553,7 +557,8 @@ const mapStateToProps = (state) => activeSpeaker : state.me.id === state.room.activeSpeakerId, canShareScreen : state.me.roles.some((role) => - state.room.permissionsFromRoles.SHARE_SCREEN.includes(role)) + state.room.permissionsFromRoles.SHARE_SCREEN.includes(role)), + transports : state.transports }; }; @@ -569,7 +574,8 @@ export default withRoomContext(connect( prev.me === next.me && prev.producers === next.producers && prev.settings === next.settings && - prev.room.activeSpeakerId === next.room.activeSpeakerId + prev.room.activeSpeakerId === next.room.activeSpeakerId && + prev.transports === next.transports ); } } diff --git a/app/src/components/Controls/NetworkIndicator.js b/app/src/components/Controls/NetworkIndicator.js deleted file mode 100644 index 694dd6e..0000000 --- a/app/src/components/Controls/NetworkIndicator.js +++ /dev/null @@ -1,294 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import { - peersLengthSelector -} from '../Selectors'; -import * as appPropTypes from '../appPropTypes'; -import { withRoomContext } from '../../RoomContext'; -import { withStyles } from '@material-ui/core/styles'; -import WifiIndicator from 'react-wifi-indicator'; -import Logger from '../../Logger'; - -const logger = new Logger('NetworkIndicator'); - -const styles = () => - ({ - root : { - verticalAlign : 'middle', - '& img' : { - display : 'inline', - width : '1.7em', - height : '1.7em', - margin : '10px' - } - }, - - label : { - color : 'white' - }, - - strength : - { - margin : 0, - padding : 0 - } - - }); - -class NetworkIndicator extends React.Component -{ - constructor(props) - { - super(props); - - this.state = { - strengthScale : { // text statuses prowived by the "react-wifi-indicator" - 1 : 'EXCELLENT', - 2 : 'GREAT', - 3 : 'OKAY', - 4 : 'WEAK', - 5 : 'UNUSABLE', - 6 : 'DISCONNECTED' - }, - strength : 6, - recv : {}, - send : {}, - probe : [], - currBitrate : 0, - maxBitrate : 0, - avgBitrate : 0, - medBitrate : 0, - probeCount : 0, - probeLimit : 3, - highestBitrate : 0, - resolution : '' - }; - } - - // const intl = useIntl(); - async handleUpdateStrength() - { - // if (this.props.peersLength == 0) - // { - - const percent = this.state.percent; - - logger.warn('[percent: "%s"]', percent); - - switch (true) - { - case (percent <= 20): - - await this.setState({ strength: 5 }); - break; - - case (percent <= 40): - - await this.setState({ strength: 4 }); - break; - - case (percent <= 60): - - await this.setState({ strength: 3 }); - break; - - case (percent <= 80): - - await this.setState({ strength: 2 }); - break; - - case (percent <= 100): - - await this.setState({ strength: 1 }); - break; - - default: - break; - } - - // } - // else - // { - // this.setState({ strength: 6 }); - // } - } - - async handleGetData() - { - const rc = this.props.roomClient; - - const probe = [ ...this.state.probe ]; // clone - - const probeCount = this.state.probeCount; - - const probeLimit = this.state.probeLimit; - - const currBitrate = this.state.currBitrate; - - let highestBitrate = this.state.highestBitrate; - - const recv = this.state.recv; - - const send = this.state.send; - - probe[probeCount] = currBitrate; // add/update next element - - // median - const med = (arr) => - { - const mid = Math.floor(arr.length / 2); - const nums = [ ...arr ].sort((a, b) => a - b); - - return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2; - }; - - const medBitrate = med([ ...probe ]); - - // 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, avg) => x/avg.length) - .reduce((a, b) => a + b); - - const percent = - await Math.round(currBitrate / medBitrate * 100); - - const x = (rc._recvTransport) - ? (await rc.getTransportStats(rc._recvTransport.id)) - : null; - - const y = (rc._sendTransport) - ? (await rc.getTransportStats(rc._sendTransport.id)) - : null; - - if (x && y) - { - - this.setState({ - recv : x[0], - send : y[0] - }); - } - - this.setState({ - probe, - probeCount : (probeCount < probeLimit - 1) ? probeCount + 1 : 0, - currBitrate : (send) ? Math.round(send.recvBitrate / 1024 / 8) : 0, - maxBitrate, - avgBitrate, - medBitrate, - percent, - highestBitrate - }); - - logger.warn('[currBitrate: "%s"]', currBitrate); - logger.warn('[maxBitrate: "%s"]', maxBitrate); - logger.warn('[medBitrate: "%s"]', medBitrate); - logger.warn('[avgBitrate: "%s"]', avgBitrate); - logger.warn('[probeCount: "%s"]', this.state.probeCount); - } - - componentDidMount() - { - this.update = setInterval(async () => - { - await this.handleGetData(); - await this.handleUpdateStrength(); - }, 1000); - } - - componentWillUnmount() - { - clearInterval(this.update); - } - - // componentDidUpdate(prevProps, prevState) { - // if (this.prevState.resolution !== this.state.resolution) { - // this.setState({ highestBitrate: 0}); - // } - // } - - render() - { - const { - classes, - advancedMode, - resolution - } = this.props; - - return ( - - - - - - {advancedMode && - - {/* rr:{ Math.round(this.state.recv.recvBitrate / 1024 /8) || 0}, */} - { Math.round(this.state.recv.sendBitrate / 1024 /8) || 0}kb ⇙ |  - { Math.round(this.state.send.recvBitrate / 1024 /8) || 0}kb ⇗ - {/* ss:{ Math.round(this.state.send.sendBitrate / 1024) /8 || 0} */} - - } - - ); - } -} - -NetworkIndicator.propTypes = - { - roomClient : PropTypes.object.isRequired, - room : appPropTypes.Room.isRequired, - peersLength : PropTypes.number, - theme : PropTypes.object.isRequired, - classes : PropTypes.object.isRequired, - me : PropTypes.object.isRequired, - advancedMode : PropTypes.bool.isRequired, - resolution : PropTypes.string.isRequired - }; - -const mapStateToProps = (state) => - ({ - room : state.room, - advancedMode : state.settings.advancedMode, - peersLength : peersLengthSelector(state), - me : state.me, - resolution : state.settings.resolution - }); - -const mapDispatchToProps = (dispatch) => - ({ - // toggleToolArea : () => - // { - // dispatch(toolareaActions.toggleToolArea()); - // } - }); - -export default withRoomContext(connect( - mapStateToProps, - mapDispatchToProps, - null, - { - areStatesEqual : (next, prev) => - { - return ( - prev.room === next.room && - prev.peers === next.peers && - prev.settings.advancedMode === next.settings.advancedMode && - prev.settings.resolution === next.settings.resolution - ); - } - } -)(withStyles(styles, { withTheme: true })(NetworkIndicator))); diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index fec8779..799d09e 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -10,7 +10,6 @@ import SignalCellular1BarIcon from '@material-ui/icons/SignalCellular1Bar'; import SignalCellular2BarIcon from '@material-ui/icons/SignalCellular2Bar'; import SignalCellular3BarIcon from '@material-ui/icons/SignalCellular3Bar'; import SignalCellularAltIcon from '@material-ui/icons/SignalCellularAlt'; -import NetworkIndicator from '../Controls/NetworkIndicator'; const styles = (theme) => ({ @@ -24,6 +23,7 @@ const styles = (theme) => flexDirection : 'column', overflow : 'hidden' }, + video : { flex : '100 100 auto', @@ -94,7 +94,43 @@ const styles = (theme) => { opacity : 0, transitionDuration : '0s' - } + }, + '& .netInfo' : + { + display : 'grid', + gap : '1px 5px', + gridTemplateAreas : '\ + "AcodL Acod Acod Acod Acod" \ + "VcodL Vcod Vcod Vcod Vcod" \ + "ResL Res Res Res Res" \ + "RecvL RecvBps RecvBps RecvSum RecvSum" \ + "SendL SendBps SendBps SendSum SendSum" \ + "IPlocL IPloc IPloc IPloc IPloc" \ + "IPsrvL IPsrv IPsrv IPsrv IPsrv" \ + "STLcurrL STLcurr STLcurr STLcurr STLcurr" \ + "STLprefL STLpref STLpref STLpref STLpref"', + + '& .AcodL' : { gridArea: 'AcodL' }, + '& .Acod' : { gridArea: 'Acod' }, + '& .VcodL' : { gridArea: 'VcodL' }, + '& .Vcod' : { gridArea: 'Vcod' }, + '& .ResL' : { gridArea: 'ResL' }, + '& .Res' : { gridArea: 'Res' }, + '& .RecvL' : { gridArea: 'RecvL' }, + '& .RecvBps' : { gridArea: 'RecvBps', justifySelf: 'flex-end' }, + '& .RecvSum' : { gridArea: 'RecvSum', justifySelf: 'flex-end' }, + '& .SendL' : { gridArea: 'SendL' }, + '& .SendBps' : { gridArea: 'SendBps', justifySelf: 'flex-end' }, + '& .SendSum' : { gridArea: 'SendSum', justifySelf: 'flex-end' }, + '& .IPlocL' : { gridArea: 'IPlocL' }, + '& .IPloc' : { gridArea: 'IPloc' }, + '& .IPsrvL' : { gridArea: 'IPsrvL' }, + '& .IPsrv' : { gridArea: 'IPsrv' }, + '& .STLcurrL' : { gridArea: 'STLcurrL' }, + '& .STLcurr' : { gridArea: 'STLcurr' }, + '& .STLprefL' : { gridArea: 'STLprefL' }, + '& .STLpref' : { gridArea: 'STLpref' } + } }, peer : { @@ -166,7 +202,8 @@ class VideoView extends React.PureComponent videoCodec, onChangeDisplayName, children, - classes + classes, + netInfo } = this.props; const { @@ -235,25 +272,76 @@ class VideoView extends React.PureComponent
- { audioCodec &&

{audioCodec}

} +

+ { audioCodec && + + Acod: + + {audioCodec} + + + } - { videoCodec && -

- {videoCodec} -

- } + { videoCodec && + + Vcod: + + {videoCodec} + + + } - { videoMultiLayer && -

- {`current spatial-temporal layers: ${consumerCurrentSpatialLayer} ${consumerCurrentTemporalLayer}`} -
- {`preferred spatial-temporal layers: ${consumerPreferredSpatialLayer} ${consumerPreferredTemporalLayer}`} -

- } + { (videoVisible && videoWidth !== null) && + + Res: + + {videoWidth}x{videoHeight} + + + } + + { isMe && + (netInfo.recv && netInfo.send && netInfo.send.iceSelectedTuple) && + + Recv: + + {(netInfo.recv.sendBitrate/8/1024/1024).toFixed(2)}MB/s + + + {(netInfo.recv.bytesSent/1024/1024).toFixed(2)}MB + + + Send: + + {(netInfo.send.recvBitrate/8/1024/1024).toFixed(2)}MB/s + + + {(netInfo.send.bytesReceived/1024/1024).toFixed(2)}MB + + + IPloc: + + {netInfo.send.iceSelectedTuple.remoteIp} + + + IPsrv: + + {netInfo.send.iceSelectedTuple.localIp} + + + } + + { videoMultiLayer && + + STLcurr: + {consumerCurrentSpatialLayer} {consumerCurrentTemporalLayer} + + STLpref: + {consumerPreferredSpatialLayer} {consumerPreferredTemporalLayer} + + } +

- { (videoVisible && videoWidth !== null) && -

{videoWidth}x{videoHeight}

- }
{ !isMe &&
@@ -285,7 +373,6 @@ class VideoView extends React.PureComponent ({ newDisplayName }) => onChangeDisplayName(newDisplayName)} /> - : @@ -412,7 +499,8 @@ VideoView.propTypes = videoCodec : PropTypes.string, onChangeDisplayName : PropTypes.func, children : PropTypes.object, - classes : PropTypes.object.isRequired + classes : PropTypes.object.isRequired, + netInfo : PropTypes.object.isRequired }; export default withStyles(styles)(VideoView); diff --git a/app/src/reducers/rootReducer.js b/app/src/reducers/rootReducer.js index d4025e7..036c6d0 100644 --- a/app/src/reducers/rootReducer.js +++ b/app/src/reducers/rootReducer.js @@ -11,14 +11,16 @@ import chat from './chat'; import toolarea from './toolarea'; import files from './files'; import settings from './settings'; +import transports from './transports'; export default combineReducers({ room, me, producers, + consumers, + transports, peers, lobbyPeers, - consumers, peerVolumes, notifications, chat, diff --git a/app/src/reducers/transports.js b/app/src/reducers/transports.js new file mode 100644 index 0000000..e8682f3 --- /dev/null +++ b/app/src/reducers/transports.js @@ -0,0 +1,19 @@ +const initialState = {}; + +const transports = (state = initialState, action) => +{ + switch (action.type) + { + case 'ADD_TRANSPORT_STATS': + { + const { transport, type } = action.payload; + + return { ...state, [type]: transport[0] }; + } + + default: + return state; + } +}; + +export default transports; From 972e74a00a44ac4da3fd77f8f0c6a2b8f2dabc35 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Tue, 12 May 2020 19:49:52 +0200 Subject: [PATCH 08/18] uninstall "wifi-network-indicator" package --- app/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/app/package.json b/app/package.json index 583dd08..1dab672 100644 --- a/app/package.json +++ b/app/package.json @@ -32,7 +32,6 @@ "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "react-wakelock-react16": "0.0.7", - "react-wifi-indicator": "^1.0.1", "redux": "^4.0.4", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", From 2c9d302d3c4267e1aa68b4a26e01f4d7b6a8ab52 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Tue, 12 May 2020 20:15:21 +0200 Subject: [PATCH 09/18] Remove "netInfo" class --- .../components/VideoContainers/VideoView.js | 82 +++++++++---------- 1 file changed, 38 insertions(+), 44 deletions(-) diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index 799d09e..065c108 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -74,42 +74,27 @@ const styles = (theme) => { padding : theme.spacing(0.5), borderRadius : 2, - '& p' : - { - userSelect : 'none', - margin : 0, - color : 'rgba(255, 255, 255, 0.7)', - fontSize : '0.8em' - }, + userSelect : 'none', + margin : 0, + color : 'rgba(255, 255, 255, 0.7)', + fontSize : '0.8em', + '&.left' : - { - backgroundColor : 'rgba(0, 0, 0, 0.25)' - }, - '&.right' : - { - marginLeft : 'auto', - width : 30 - }, - '&.hidden' : - { - opacity : 0, - transitionDuration : '0s' - }, - '& .netInfo' : { + backgroundColor : 'rgba(0, 0, 0, 0.25)', display : 'grid', gap : '1px 5px', gridTemplateAreas : '\ - "AcodL Acod Acod Acod Acod" \ - "VcodL Vcod Vcod Vcod Vcod" \ - "ResL Res Res Res Res" \ - "RecvL RecvBps RecvBps RecvSum RecvSum" \ - "SendL SendBps SendBps SendSum SendSum" \ - "IPlocL IPloc IPloc IPloc IPloc" \ - "IPsrvL IPsrv IPsrv IPsrv IPsrv" \ - "STLcurrL STLcurr STLcurr STLcurr STLcurr" \ - "STLprefL STLpref STLpref STLpref STLpref"', - + "AcodL Acod Acod Acod Acod" \ + "VcodL Vcod Vcod Vcod Vcod" \ + "ResL Res Res Res Res" \ + "RecvL RecvBps RecvBps RecvSum RecvSum" \ + "SendL SendBps SendBps SendSum SendSum" \ + "IPlocL IPloc IPloc IPloc IPloc" \ + "IPsrvL IPsrv IPsrv IPsrv IPsrv" \ + "STLcurrL STLcurr STLcurr STLcurr STLcurr" \ + "STLprefL STLpref STLpref STLpref STLpref"', + '& .AcodL' : { gridArea: 'AcodL' }, '& .Acod' : { gridArea: 'Acod' }, '& .VcodL' : { gridArea: 'VcodL' }, @@ -130,7 +115,18 @@ const styles = (theme) => '& .STLcurr' : { gridArea: 'STLcurr' }, '& .STLprefL' : { gridArea: 'STLprefL' }, '& .STLpref' : { gridArea: 'STLpref' } - } + + }, + '&.right' : + { + marginLeft : 'auto', + width : 30 + }, + '&.hidden' : + { + opacity : 0, + transitionDuration : '0s' + } }, peer : { @@ -272,35 +268,34 @@ class VideoView extends React.PureComponent
-

- { audioCodec && + { audioCodec && Acod: {audioCodec} - } + } - { videoCodec && + { videoCodec && Vcod: {videoCodec} - } + } - { (videoVisible && videoWidth !== null) && + { (videoVisible && videoWidth !== null) && Res: {videoWidth}x{videoHeight} - } + } - { isMe && + { isMe && (netInfo.recv && netInfo.send && netInfo.send.iceSelectedTuple) && Recv: @@ -329,9 +324,9 @@ class VideoView extends React.PureComponent {netInfo.send.iceSelectedTuple.localIp} - } + } - { videoMultiLayer && + { videoMultiLayer && STLcurr: {consumerCurrentSpatialLayer} {consumerCurrentTemporalLayer} @@ -339,8 +334,7 @@ class VideoView extends React.PureComponent STLpref: {consumerPreferredSpatialLayer} {consumerPreferredTemporalLayer} - } -

+ }
{ !isMe && From 052dabaf8db45a4646692e7e0d285fe5f29786f2 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Tue, 12 May 2020 21:40:47 +0200 Subject: [PATCH 10/18] Change "advanced mode" box info "bitrate" from MB/s to Mb/s --- app/src/components/VideoContainers/VideoView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index 78f56b6..9c83bc1 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -310,7 +310,7 @@ class VideoView extends React.PureComponent Recv: - {(netInfo.recv.sendBitrate/8/1024/1024).toFixed(2)}MB/s + {(netInfo.recv.sendBitrate/1024/1024).toFixed(2)}Mb/s {(netInfo.recv.bytesSent/1024/1024).toFixed(2)}MB @@ -318,7 +318,7 @@ class VideoView extends React.PureComponent Send: - {(netInfo.send.recvBitrate/8/1024/1024).toFixed(2)}MB/s + {(netInfo.send.recvBitrate/1024/1024).toFixed(2)}Mb/s {(netInfo.send.bytesReceived/1024/1024).toFixed(2)}MB From b430802b76281d2a5abecdd4476047bc542de050 Mon Sep 17 00:00:00 2001 From: Stefan Otto Date: Tue, 19 May 2020 12:04:09 +0200 Subject: [PATCH 11/18] fix my own fault --- app/src/components/Containers/Me.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 5c7bb7a..9d36576 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -176,7 +176,6 @@ const Me = (props) => screenProducer, extraVideoProducers, canShareScreen, - classes, transports, noiseVolume, classes From 014c80553007d583b5a402973b369b6c7260c454 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Wed, 20 May 2020 00:09:44 +0200 Subject: [PATCH 12/18] Fix crash when screen sharing is running --- app/src/components/Containers/Me.js | 2 +- app/src/components/VideoContainers/VideoView.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 9d36576..9145475 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -939,7 +939,7 @@ export default withRoomContext(connect( Math.round(next.peerVolumes[next.me.id]) && prev.peers === next.peers && prev.producers === next.producers && - prev.settings === next.settings, + prev.settings === next.settings && prev.transports === next.transports ); } diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index 9c83bc1..873674a 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -305,7 +305,7 @@ class VideoView extends React.PureComponent } - { isMe && + { isMe && !isScreen && (netInfo.recv && netInfo.send && netInfo.send.iceSelectedTuple) && Recv: From 3fc8f5683e26cf101c9974ec823930a7158183d8 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Wed, 20 May 2020 00:12:33 +0200 Subject: [PATCH 13/18] Update transport stats only when advancedMode is on --- app/src/RoomClient.js | 33 ++++++++++++----------------- app/src/components/Containers/Me.js | 18 ++++++++++++++-- 2 files changed, 29 insertions(+), 22 deletions(-) diff --git a/app/src/RoomClient.js b/app/src/RoomClient.js index 9e5b6ff..e22341c 100644 --- a/app/src/RoomClient.js +++ b/app/src/RoomClient.js @@ -260,9 +260,6 @@ export default class RoomClient this._startKeyListener(); this._startDevicesListener(); - - this._getTransportStats(); - } close() @@ -627,29 +624,25 @@ export default class RoomClient { try { - setInterval(async () => + if (this._recvTransport) { - if (this._recvTransport) - { - logger.debug('getTransportStats() - recv [transportId: "%s"]', this._recvTransport.id); + logger.debug('getTransportStats() - recv [transportId: "%s"]', this._recvTransport.id); - const recv = await this.sendRequest('getTransportStats', { transportId: this._recvTransport.id }); + const recv = await this.sendRequest('getTransportStats', { transportId: this._recvTransport.id }); - store.dispatch( - transportActions.addTransportStats(recv, 'recv')); - } + store.dispatch( + transportActions.addTransportStats(recv, 'recv')); + } - if (this._sendTransport) - { - logger.debug('getTransportStats() - send [transportId: "%s"]', this._sendTransport.id); + if (this._sendTransport) + { + logger.debug('getTransportStats() - send [transportId: "%s"]', this._sendTransport.id); - const send = await this.sendRequest('getTransportStats', { transportId: this._sendTransport.id }); + const send = await this.sendRequest('getTransportStats', { transportId: this._sendTransport.id }); - store.dispatch( - transportActions.addTransportStats(send, 'send')); - } - - }, 1000); + store.dispatch( + transportActions.addTransportStats(send, 'send')); + } } catch (error) { diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 9145475..bde4a5c 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { connect } from 'react-redux'; import { meProducersSelector, @@ -334,6 +334,20 @@ const Me = (props) => ); } + useEffect(() => + { + let poll; + + const interval = 1000; + + if (advancedMode) + { + poll = setInterval(() => roomClient._getTransportStats(), interval); + } + + return () => clearInterval(poll); + }, [ roomClient, advancedMode ]); + return (
From 90ef355fbf4663ff04ad47a01d0dbfc8b47e6de6 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Wed, 20 May 2020 15:34:29 +0200 Subject: [PATCH 14/18] Fix/Mute eslint Multiline support info --- app/src/components/VideoContainers/VideoView.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index 873674a..10aa1df 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -86,6 +86,8 @@ const styles = (theme) => backgroundColor : 'rgba(0, 0, 0, 0.25)', display : 'grid', gap : '1px 5px', + + // eslint-disable-next-line gridTemplateAreas : '\ "AcodL Acod Acod Acod Acod" \ "VcodL Vcod Vcod Vcod Vcod" \ From ce2e18f01aec53f0a0cf293cdb782c52b1e2c48c Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Wed, 20 May 2020 15:49:31 +0200 Subject: [PATCH 15/18] Fix lint --- app/src/components/VideoContainers/VideoView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index 10aa1df..7bbe6fa 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -83,9 +83,9 @@ const styles = (theme) => '&.left' : { - backgroundColor : 'rgba(0, 0, 0, 0.25)', - display : 'grid', - gap : '1px 5px', + backgroundColor : 'rgba(0, 0, 0, 0.25)', + display : 'grid', + gap : '1px 5px', // eslint-disable-next-line gridTemplateAreas : '\ From 407a7d699155f4e1997f4ef67e51af205c411cb5 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Wed, 20 May 2020 16:20:55 +0200 Subject: [PATCH 16/18] Set VideoView/netInfo prop as not required --- app/src/components/VideoContainers/VideoView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index 7bbe6fa..3237a9d 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -556,7 +556,7 @@ VideoView.propTypes = onChangeDisplayName : PropTypes.func, children : PropTypes.object, classes : PropTypes.object.isRequired, - netInfo : PropTypes.object.isRequired + netInfo : PropTypes.object }; export default withStyles(styles)(VideoView); From 81d4b015bcc6866c5861e2632df0da0a81617d47 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Wed, 20 May 2020 16:56:53 +0200 Subject: [PATCH 17/18] Fix lint --- app/src/RoomClient.js | 8 ++++---- app/src/components/Containers/Me.js | 4 ++-- app/src/components/VideoContainers/VideoView.js | 16 ++++++++-------- app/src/localAudioAnalyzer.js | 4 +--- 4 files changed, 15 insertions(+), 17 deletions(-) diff --git a/app/src/RoomClient.js b/app/src/RoomClient.js index 01e172c..66ebf92 100644 --- a/app/src/RoomClient.js +++ b/app/src/RoomClient.js @@ -642,9 +642,9 @@ export default class RoomClient } } catch (error) - { + { logger.error('getTransportStats() | failed: %o', error); - } + } } async sendRequest(method, data) @@ -1074,7 +1074,7 @@ export default class RoomClient { if (volume < this._hark.lastVolume) { - volume = this._hark.lastVolume - Math.pow((volume - this._hark.lastVolume)/(100 + this._hark.lastVolume),4)*2; + volume = this._hark.lastVolume - Math.pow((volume - this._hark.lastVolume)/(100 + this._hark.lastVolume), 4)*2; } this._hark.lastVolume = volume; store.dispatch(peerVolumeActions.setPeerVolume(this._peerId, volume)); @@ -3078,7 +3078,7 @@ export default class RoomClient { await this.enableMic(); let autoMuteThreshold = 4; - + if ('autoMuteThreshold' in window.config) { autoMuteThreshold = window.config.autoMuteThreshold; diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 0b32639..d64c30b 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -334,7 +334,7 @@ const Me = (props) => ); } - useEffect(() => + useEffect(() => { let poll; @@ -344,7 +344,7 @@ const Me = (props) => { poll = setInterval(() => roomClient._getTransportStats(), interval); } - + return () => clearInterval(poll); }, [ roomClient, advancedMode ]); diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index 39913ab..40dfba6 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -280,12 +280,12 @@ class VideoView extends React.PureComponent
- { audioCodec && + { audioCodec && Acod: {audioCodec} - + } @@ -313,7 +313,7 @@ class VideoView extends React.PureComponent Recv: {(netInfo.recv.sendBitrate/1024/1024).toFixed(2)}Mb/s - + {(netInfo.recv.bytesSent/1024/1024).toFixed(2)}MB @@ -325,24 +325,24 @@ class VideoView extends React.PureComponent {(netInfo.send.bytesReceived/1024/1024).toFixed(2)}MB - + IPloc: {netInfo.send.iceSelectedTuple.remoteIp} - + IPsrv: {netInfo.send.iceSelectedTuple.localIp} } - + { videoMultiLayer && STLcurr: {consumerCurrentSpatialLayer} {consumerCurrentTemporalLayer} - + STLpref: {consumerPreferredSpatialLayer} {consumerPreferredTemporalLayer} @@ -376,7 +376,7 @@ class VideoView extends React.PureComponent spellCheck : false }} onChange={ - ({ newDisplayName }) => + ({ newDisplayName }) => onChangeDisplayName(newDisplayName)} /> diff --git a/app/src/localAudioAnalyzer.js b/app/src/localAudioAnalyzer.js index 4f387c6..53da961 100644 --- a/app/src/localAudioAnalyzer.js +++ b/app/src/localAudioAnalyzer.js @@ -1,7 +1,5 @@ - - class AudioAnalyzer extends EventEmitter - + { constructor() { From 50a9733af16c10e4e24d362a1b2d88768b91319b Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Wed, 20 May 2020 17:01:30 +0200 Subject: [PATCH 18/18] Set RoomClient/_getTransportStats() as public --- app/src/RoomClient.js | 2 +- app/src/components/Containers/Me.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/RoomClient.js b/app/src/RoomClient.js index 66ebf92..048c46a 100644 --- a/app/src/RoomClient.js +++ b/app/src/RoomClient.js @@ -617,7 +617,7 @@ export default class RoomClient }); } - async _getTransportStats() + async getTransportStats() { try { diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index d64c30b..a302dad 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -342,7 +342,7 @@ const Me = (props) => if (advancedMode) { - poll = setInterval(() => roomClient._getTransportStats(), interval); + poll = setInterval(() => roomClient.getTransportStats(), interval); } return () => clearInterval(poll);