From abca6645a91b5fb305f0ce66e7a665aa802bd1a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Thu, 4 Apr 2019 00:03:57 +0200 Subject: [PATCH] Fixes to performance. Moved volume out to new component to optimize rerenders. --- app/src/components/Containers/Me.js | 23 ++- app/src/components/Containers/Peer.js | 26 ++- app/src/components/Containers/Volume.js | 162 ++++++++++++++++++ .../MeetingDrawer/Chat/ChatInput.js | 15 +- .../components/MeetingDrawer/MeetingDrawer.js | 13 +- .../MeetingDrawer/ParticipantList/ListMe.js | 12 +- .../MeetingDrawer/ParticipantList/ListPeer.js | 65 ++----- .../ParticipantList/ParticipantList.js | 28 +-- app/src/components/MeetingViews/Democratic.js | 14 +- .../components/Notifications/Notifications.js | 14 +- app/src/components/PeerAudio/AudioPeers.js | 12 +- app/src/components/Selectors.js | 31 ++-- app/src/components/Settings/Settings.js | 12 +- .../VideoContainers/FullScreenView.js | 13 +- .../components/VideoContainers/VideoView.js | 107 ++---------- app/src/components/VideoWindow/VideoWindow.js | 12 +- 16 files changed, 359 insertions(+), 200 deletions(-) create mode 100644 app/src/components/Containers/Volume.js diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 2934dee..e695aab 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -7,6 +7,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import * as appPropTypes from '../appPropTypes'; import VideoView from '../VideoContainers/VideoView'; +import Volume from './Volume'; const styles = () => ({ @@ -55,7 +56,6 @@ const Me = (props) => micProducer, webcamProducer, screenProducer, - volume, classes } = props; @@ -87,8 +87,6 @@ const Me = (props) => advancedMode={advancedMode} peer={me} showPeerInfo - audioTrack={micProducer ? micProducer.track : null} - volume={volume} videoTrack={webcamProducer ? webcamProducer.track : null} videoVisible={videoVisible} audioCodec={micProducer ? micProducer.codec : null} @@ -97,7 +95,9 @@ const Me = (props) => { roomClient.changeDisplayName(displayName); }} - /> + > + + { screenProducer ? @@ -128,7 +128,6 @@ Me.propTypes = micProducer : appPropTypes.Producer, webcamProducer : appPropTypes.Producer, screenProducer : appPropTypes.Producer, - volume : PropTypes.number, style : PropTypes.object, classes : PropTypes.object.isRequired }; @@ -138,12 +137,22 @@ const mapStateToProps = (state) => return { me : state.me, ...meProducersSelector(state), - volume : state.peerVolumes[state.me.name], activeSpeaker : state.me.name === state.room.activeSpeakerName }; }; export default withRoomContext(connect( mapStateToProps, - null + null, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.me === next.me && + prev.producers === next.producers && + prev.room.activeSpeakerName === next.room.activeSpeakerName + ); + } + } )(withStyles(styles)(Me))); diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js index 91d0db3..2c0c9dd 100644 --- a/app/src/components/Containers/Peer.js +++ b/app/src/components/Containers/Peer.js @@ -14,6 +14,7 @@ import MicIcon from '@material-ui/icons/Mic'; import MicOffIcon from '@material-ui/icons/MicOff'; import NewWindowIcon from '@material-ui/icons/OpenInNew'; import FullScreenIcon from '@material-ui/icons/Fullscreen'; +import Volume from './Volume'; const styles = (theme) => ({ @@ -125,7 +126,6 @@ const Peer = (props) => micConsumer, webcamConsumer, screenConsumer, - volume, toggleConsumerFullscreen, toggleConsumerWindow, style, @@ -134,9 +134,6 @@ const Peer = (props) => theme } = props; - if (!peer) - return; - const micEnabled = ( Boolean(micConsumer) && !micConsumer.locallyPaused && @@ -289,13 +286,14 @@ const Peer = (props) => advancedMode={advancedMode} peer={peer} showPeerInfo - volume={volume} videoTrack={webcamConsumer ? webcamConsumer.track : null} videoVisible={videoVisible} videoProfile={videoProfile} audioCodec={micConsumer ? micConsumer.codec : null} videoCodec={webcamConsumer ? webcamConsumer.codec : null} - /> + > + + :null } @@ -419,7 +417,6 @@ Peer.propTypes = micConsumer : appPropTypes.Consumer, webcamConsumer : appPropTypes.Consumer, screenConsumer : appPropTypes.Consumer, - volume : PropTypes.number, windowConsumer : PropTypes.number, activeSpeaker : PropTypes.bool, style : PropTypes.object, @@ -438,7 +435,6 @@ const makeMapStateToProps = (initialState, props) => return { peer : state.peers[props.name], ...getPeerConsumers(state, props), - volume : state.peerVolumes[props.name], windowConsumer : state.room.windowConsumer, activeSpeaker : props.name === state.room.activeSpeakerName }; @@ -465,5 +461,17 @@ const mapDispatchToProps = (dispatch) => export default withRoomContext(connect( makeMapStateToProps, - mapDispatchToProps + mapDispatchToProps, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.peers === next.peers && + prev.consumers === next.consumers && + prev.room.activeSpeakerName === next.room.activeSpeakerName && + prev.room.windowConsumer === next.room.windowConsumer + ); + } + } )(withStyles(styles, { withTheme: true })(Peer))); diff --git a/app/src/components/Containers/Volume.js b/app/src/components/Containers/Volume.js new file mode 100644 index 0000000..7488a30 --- /dev/null +++ b/app/src/components/Containers/Volume.js @@ -0,0 +1,162 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; + +const styles = () => + ({ + volumeLarge : + { + position : 'absolute', + top : 0, + bottom : 0, + right : 2, + width : 10, + display : 'flex', + flexDirection : 'column', + justifyContent : 'center', + alignItems : 'center' + }, + largeBar : + { + width : 6, + borderRadius : 6, + background : 'rgba(yellow, 0.65)', + transitionProperty : 'height background-color', + transitionDuration : '0.25s', + '&.level0' : + { + height : 0, + backgroundColor : 'rgba(255, 255, 0, 0.65)' + }, + '&.level1' : + { + height : '10%', + backgroundColor : 'rgba(255, 255, 0, 0.65)' + }, + '&.level2' : + { + height : '20%', + backgroundColor : 'rgba(255, 255, 0, 0.65)' + }, + '&.level3' : + { + height : '30%', + backgroundColor : 'rgba(255, 255, 0, 0.65)' + }, + '&.level4' : + { + height : '40%', + backgroundColor : 'rgba(255, 165, 0, 0.65)' + }, + '&.level5' : + { + height : '50%', + backgroundColor : 'rgba(255, 165, 0, 0.65)' + }, + '&.level6' : + { + height : '60%', + backgroundColor : 'rgba(255, 0, 0, 0.65)' + }, + '&.level7' : + { + height : '70%', + backgroundColor : 'rgba(255, 0, 0, 0.65)' + }, + '&.level8' : + { + height : '80%', + backgroundColor : 'rgba(0, 0, 0, 0.65)' + }, + '&.level9' : + { + height : '90%', + backgroundColor : 'rgba(0, 0, 0, 0.65)' + }, + '&.level10' : + { + height : '100%', + backgroundColor : 'rgba(0, 0, 0, 0.65)' + } + }, + volumeSmall : + { + float : 'right', + display : 'flex', + flexDirection : 'row', + justifyContent : 'flex-start', + width : '1vmin', + position : 'relative', + backgroundSize : '75%' + }, + smallBar : + { + flex : '0 0 auto', + margin : '0.3rem', + backgroundSize : '75%', + backgroundRepeat : 'no-repeat', + backgroundColor : 'rgba(0, 0, 0, 1)', + cursor : 'pointer', + transitionProperty : 'opacity, background-color', + width : 3, + borderRadius : 6, + transitionDuration : '0.25s', + position : 'absolute', + bottom : 0, + '&.level0' : { height: 0 }, + '&.level1' : { height: '0.2vh' }, + '&.level2' : { height: '0.4vh' }, + '&.level3' : { height: '0.6vh' }, + '&.level4' : { height: '0.8vh' }, + '&.level5' : { height: '1.0vh' }, + '&.level6' : { height: '1.2vh' }, + '&.level7' : { height: '1.4vh' }, + '&.level8' : { height: '1.6vh' }, + '&.level9' : { height: '1.8vh' }, + '&.level10' : { height: '2.0vh' } + } + }); + +const Volume = (props) => +{ + const { + small, + volume, + classes + } = props; + + return ( +
+
+
+ ); +}; + +Volume.propTypes = +{ + small : PropTypes.bool, + volume : PropTypes.number, + classes : PropTypes.object.isRequired +}; + +const makeMapStateToProps = (initialState, props) => +{ + const mapStateToProps = (state) => + { + return { + volume : state.peerVolumes[props.name] + }; + }; + + return mapStateToProps; +}; + +export default connect( + makeMapStateToProps +)(withStyles(styles)(Volume)); diff --git a/app/src/components/MeetingDrawer/Chat/ChatInput.js b/app/src/components/MeetingDrawer/Chat/ChatInput.js index f047c78..034a4d2 100644 --- a/app/src/components/MeetingDrawer/Chat/ChatInput.js +++ b/app/src/components/MeetingDrawer/Chat/ChatInput.js @@ -127,5 +127,18 @@ const mapStateToProps = (state) => }); export default withRoomContext( - connect(mapStateToProps)(withStyles(styles)(ChatInput)) + connect( + mapStateToProps, + null, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.me.displayName === next.me.displayName && + prev.me.picture === next.me.picture + ); + } + } + )(withStyles(styles)(ChatInput)) ); \ No newline at end of file diff --git a/app/src/components/MeetingDrawer/MeetingDrawer.js b/app/src/components/MeetingDrawer/MeetingDrawer.js index 7e31570..e46afa1 100644 --- a/app/src/components/MeetingDrawer/MeetingDrawer.js +++ b/app/src/components/MeetingDrawer/MeetingDrawer.js @@ -119,5 +119,16 @@ const mapDispatchToProps = { export default connect( mapStateToProps, - mapDispatchToProps + mapDispatchToProps, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.toolarea.currentToolTab === next.toolarea.currentToolTab && + prev.toolarea.unreadMessages === next.toolarea.unreadMessages && + prev.toolarea.unreadFiles === next.toolarea.unreadFiles + ); + } + } )(withStyles(styles, { withTheme: true })(MeetingDrawer)); diff --git a/app/src/components/MeetingDrawer/ParticipantList/ListMe.js b/app/src/components/MeetingDrawer/ParticipantList/ListMe.js index d8824e6..8f12648 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ListMe.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ListMe.js @@ -111,5 +111,15 @@ const mapStateToProps = (state) => ({ }); export default connect( - mapStateToProps + mapStateToProps, + null, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.me === next.me + ); + } + } )(withStyles(styles)(ListMe)); diff --git a/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js b/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js index e98d09c..59ab7ec 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js @@ -82,42 +82,6 @@ const styles = () => backgroundImage : `url(${HandIcon})` } }, - volumeContainer : - { - float : 'right', - display : 'flex', - flexDirection : 'row', - justifyContent : 'flex-start', - width : '1vmin', - position : 'relative', - backgroundSize : '75%' - }, - bar : - { - flex : '0 0 auto', - margin : '0.3rem', - backgroundSize : '75%', - backgroundRepeat : 'no-repeat', - backgroundColor : 'rgba(0, 0, 0, 1)', - cursor : 'pointer', - transitionProperty : 'opacity, background-color', - width : 3, - borderRadius : 6, - transitionDuration : '0.25s', - position : 'absolute', - bottom : 0, - '&.level0' : { height: 0 }, - '&.level1' : { height: '0.2vh' }, - '&.level2' : { height: '0.4vh' }, - '&.level3' : { height: '0.6vh' }, - '&.level4' : { height: '0.8vh' }, - '&.level5' : { height: '1.0vh' }, - '&.level6' : { height: '1.2vh' }, - '&.level7' : { height: '1.4vh' }, - '&.level8' : { height: '1.6vh' }, - '&.level9' : { height: '1.8vh' }, - '&.level10' : { height: '2.0vh' } - }, controls : { float : 'right', @@ -169,13 +133,10 @@ const ListPeer = (props) => peer, micConsumer, screenConsumer, - volume, + children, classes } = props; - if (!peer) - return; - const micEnabled = ( Boolean(micConsumer) && !micConsumer.locallyPaused && @@ -211,9 +172,7 @@ const ListPeer = (props) => :null }
-
-
-
+ {children}
{ screenConsumer ?
const mapStateToProps = (state) => { return { - peer : state.peers[props.name], - ...getPeerConsumers(state, props), - volume : state.peerVolumes[props.name] + peer : state.peers[props.name], + ...getPeerConsumers(state, props) }; }; @@ -292,5 +250,16 @@ const makeMapStateToProps = (initialState, props) => }; export default withRoomContext(connect( - makeMapStateToProps + makeMapStateToProps, + null, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.peers === next.peers && + prev.consumers === next.consumers + ); + } + } )(withStyles(styles)(ListPeer))); \ No newline at end of file diff --git a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js index 1b6655f..e1675ba 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js @@ -1,7 +1,8 @@ import React from 'react'; import { connect } from 'react-redux'; import { - passivePeersSelector + passivePeersSelector, + spotlightPeersSelector } from '../../Selectors'; import classNames from 'classnames'; import { withStyles } from '@material-ui/core/styles'; @@ -9,6 +10,7 @@ import { withRoomContext } from '../../../RoomContext'; import PropTypes from 'prop-types'; import ListPeer from './ListPeer'; import ListMe from './ListMe'; +import Volume from '../../Containers/Volume'; const styles = (theme) => ({ @@ -75,7 +77,7 @@ class ParticipantList extends React.PureComponent advancedMode, passivePeers, selectedPeerName, - spotlights, + spotlightPeers, classes } = this.props; @@ -88,15 +90,17 @@ class ParticipantList extends React.PureComponent
  • Participants in Spotlight:
    • - { spotlights.map((peerName) => ( + { spotlightPeers.map((peer) => (
  • roomClient.setSelectedPeer(peerName)} + onClick={() => roomClient.setSelectedPeer(peer.name)} > - + + +
    • ))}
@@ -126,16 +130,18 @@ ParticipantList.propTypes = advancedMode : PropTypes.bool, passivePeers : PropTypes.array, selectedPeerName : PropTypes.string, - spotlights : PropTypes.array.isRequired, + spotlightPeers : PropTypes.array, classes : PropTypes.object.isRequired }; const mapStateToProps = (state) => - ({ +{ + return { passivePeers : passivePeersSelector(state), selectedPeerName : state.room.selectedPeerName, - spotlights : state.room.spotlights - }); + spotlightPeers : spotlightPeersSelector(state) + }; +}; const ParticipantListContainer = withRoomContext(connect( mapStateToProps, diff --git a/app/src/components/MeetingViews/Democratic.js b/app/src/components/MeetingViews/Democratic.js index 14211d6..0bf6e8e 100644 --- a/app/src/components/MeetingViews/Democratic.js +++ b/app/src/components/MeetingViews/Democratic.js @@ -1,6 +1,7 @@ import React from 'react'; import { connect } from 'react-redux'; import { + spotlightPeersSelector, peersLengthSelector, videoBoxesSelector, spotlightsLengthSelector @@ -117,7 +118,7 @@ class Democratic extends React.PureComponent const { advancedMode, peersLength, - spotlights, + spotlightsPeers, spotlightsLength, classes } = this.props; @@ -134,13 +135,13 @@ class Democratic extends React.PureComponent advancedMode={advancedMode} style={style} /> - { spotlights.map((peerName) => + { spotlightsPeers.map((peer) => { return ( ); @@ -162,7 +163,7 @@ Democratic.propTypes = peersLength : PropTypes.number, boxes : PropTypes.number, spotlightsLength : PropTypes.number, - spotlights : PropTypes.array.isRequired, + spotlightsPeers : PropTypes.array.isRequired, classes : PropTypes.object.isRequired }; @@ -171,7 +172,7 @@ const mapStateToProps = (state) => return { peersLength : peersLengthSelector(state), boxes : videoBoxesSelector(state), - spotlights : state.room.spotlights, + spotlightsPeers : spotlightPeersSelector(state), spotlightsLength : spotlightsLengthSelector(state) }; }; @@ -184,6 +185,7 @@ export default connect( areStatesEqual : (next, prev) => { return ( + prev.peers === next.peers && prev.producers === next.producers && prev.consumers === next.consumers && prev.spotlights === next.spotlights diff --git a/app/src/components/Notifications/Notifications.js b/app/src/components/Notifications/Notifications.js index 105467c..60553f9 100644 --- a/app/src/components/Notifications/Notifications.js +++ b/app/src/components/Notifications/Notifications.js @@ -81,5 +81,17 @@ const mapDispatchToProps = (dispatch) => }); export default withSnackbar( - connect(mapStateToProps, mapDispatchToProps)(Notifications) + connect( + mapStateToProps, + mapDispatchToProps, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.notifications === next.notifications + ); + } + } + )(Notifications) ); diff --git a/app/src/components/PeerAudio/AudioPeers.js b/app/src/components/PeerAudio/AudioPeers.js index b9ffdcd..671f4a2 100644 --- a/app/src/components/PeerAudio/AudioPeers.js +++ b/app/src/components/PeerAudio/AudioPeers.js @@ -38,7 +38,17 @@ const mapStateToProps = (state) => }); const AudioPeersContainer = connect( - mapStateToProps + mapStateToProps, + null, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.consumers === next.consumers + ); + } + } )(AudioPeers); export default AudioPeersContainer; diff --git a/app/src/components/Selectors.js b/app/src/components/Selectors.js index 0497119..c21c21f 100644 --- a/app/src/components/Selectors.js +++ b/app/src/components/Selectors.js @@ -2,10 +2,15 @@ import { createSelector } from 'reselect'; const producersSelect = (state) => state.producers; const consumersSelect = (state) => state.consumers; - -export const spotlightsSelector = (state) => state.room.spotlights; - +const spotlightsSelector = (state) => state.room.spotlights; const peersSelector = (state) => state.peers; +const getPeerConsumers = (state, props) => + (state.peers[props.name] ? state.peers[props.name].consumers : null); +const getAllConsumers = (state) => state.consumers; +const peersKeySelector = createSelector( + peersSelector, + (peers) => Object.keys(peers) +); export const micProducersSelector = createSelector( producersSelect, @@ -54,13 +59,20 @@ export const screenConsumerSelector = createSelector( export const spotlightsLengthSelector = createSelector( spotlightsSelector, - (spotlights) => (spotlights ? spotlights.length : 0) + (spotlights) => spotlights.length ); export const spotlightPeersSelector = createSelector( spotlightsSelector, peersSelector, - (spotlights, peers) => spotlights.map((peerName) => peers[peerName]) + (spotlights, peers) => + spotlights.reduce((result, peerName) => + { + if (peers[peerName]) + result.push(peers[peerName]); + + return result; + }, []) ); export const peersLengthSelector = createSelector( @@ -68,11 +80,6 @@ export const peersLengthSelector = createSelector( (peers) => Object.values(peers).length ); -const peersKeySelector = createSelector( - peersSelector, - (peers) => Object.keys(peers) -); - export const passivePeersSelector = createSelector( peersKeySelector, spotlightsSelector, @@ -101,10 +108,6 @@ export const meProducersSelector = createSelector( } ); -const getPeerConsumers = (state, props) => - (state.peers[props.name] ? state.peers[props.name].consumers : null); -const getAllConsumers = (state) => state.consumers; - export const makePeerConsumerSelector = () => { return createSelector( diff --git a/app/src/components/Settings/Settings.js b/app/src/components/Settings/Settings.js index f251ea1..cdccb43 100644 --- a/app/src/components/Settings/Settings.js +++ b/app/src/components/Settings/Settings.js @@ -215,5 +215,15 @@ const mapDispatchToProps = { export default withRoomContext(connect( mapStateToProps, - mapDispatchToProps + mapDispatchToProps, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.me === next.me && + prev.room === next.room + ); + } + } )(withStyles(styles)(Settings))); \ No newline at end of file diff --git a/app/src/components/VideoContainers/FullScreenView.js b/app/src/components/VideoContainers/FullScreenView.js index 0e53a4a..85a9e0d 100644 --- a/app/src/components/VideoContainers/FullScreenView.js +++ b/app/src/components/VideoContainers/FullScreenView.js @@ -161,5 +161,16 @@ const mapDispatchToProps = (dispatch) => export default connect( mapStateToProps, - mapDispatchToProps + mapDispatchToProps, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.consumers[prev.room.fullScreenConsumer] === + next.consumers[next.room.fullScreenConsumer] && + prev.room.toolbarsVisible === next.room.toolbarsVisible + ); + } + } )(withStyles(styles)(FullScreenView)); diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index a8608c3..2d2852c 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -132,81 +132,6 @@ const styles = () => fontSize : 11, color : 'rgba(255, 255, 255, 0.55)' } - }, - volume : - { - position : 'absolute', - top : 0, - bottom : 0, - right : 2, - width : 10, - display : 'flex', - flexDirection : 'column', - justifyContent : 'center', - alignItems : 'center' - }, - volumeBar : - { - width : 6, - borderRadius : 6, - background : 'rgba(yellow, 0.65)', - transitionProperty : 'height background-color', - transitionDuration : '0.25s', - '&.level0' : - { - height : 0, - backgroundColor : 'rgba(255, 255, 0, 0.65)' - }, - '&.level1' : - { - height : '10%', - backgroundColor : 'rgba(255, 255, 0, 0.65)' - }, - '&.level2' : - { - height : '20%', - backgroundColor : 'rgba(255, 255, 0, 0.65)' - }, - '&.level3' : - { - height : '30%', - backgroundColor : 'rgba(255, 255, 0, 0.65)' - }, - '&.level4' : - { - height : '40%', - backgroundColor : 'rgba(255, 165, 0, 0.65)' - }, - '&.level5' : - { - height : '50%', - backgroundColor : 'rgba(255, 165, 0, 0.65)' - }, - '&.level6' : - { - height : '60%', - backgroundColor : 'rgba(255, 0, 0, 0.65)' - }, - '&.level7' : - { - height : '70%', - backgroundColor : 'rgba(255, 0, 0, 0.65)' - }, - '&.level8' : - { - height : '80%', - backgroundColor : 'rgba(0, 0, 0, 0.65)' - }, - '&.level9' : - { - height : '90%', - backgroundColor : 'rgba(0, 0, 0, 0.65)' - }, - '&.level10' : - { - height : '100%', - backgroundColor : 'rgba(0, 0, 0, 0.65)' - } } }); @@ -218,15 +143,10 @@ class VideoView extends React.PureComponent this.state = { - volume : 0, // Integer from 0 to 10., videoWidth : null, videoHeight : null }; - // Latest received video track. - // @type {MediaStreamTrack} - this._audioTrack = null; - // Latest received video track. // @type {MediaStreamTrack} this._videoTrack = null; @@ -240,7 +160,6 @@ class VideoView extends React.PureComponent const { isMe, peer, - volume, showPeerInfo, videoContain, advancedMode, @@ -249,6 +168,7 @@ class VideoView extends React.PureComponent audioCodec, videoCodec, onChangeDisplayName, + children, classes } = this.props; @@ -331,18 +251,16 @@ class VideoView extends React.PureComponent muted={isMe} /> -
-
-
+ {children}
); } componentDidMount() { - const { audioTrack, videoTrack } = this.props; + const { videoTrack } = this.props; - this._setTracks(audioTrack, videoTrack); + this._setTracks(videoTrack); } componentWillUnmount() @@ -352,18 +270,17 @@ class VideoView extends React.PureComponent componentWillReceiveProps(nextProps) { - const { audioTrack, videoTrack } = nextProps; + const { videoTrack } = nextProps; - this._setTracks(audioTrack, videoTrack); + this._setTracks(videoTrack); } - _setTracks(audioTrack, videoTrack) + _setTracks(videoTrack) { - if (this._audioTrack === audioTrack && this._videoTrack === videoTrack) + if (this._videoTrack === videoTrack) return; - this._audioTrack = audioTrack; this._videoTrack = videoTrack; clearInterval(this._videoResolutionTimer); @@ -371,13 +288,10 @@ class VideoView extends React.PureComponent const { video } = this.refs; - if (audioTrack || videoTrack) + if (videoTrack) { const stream = new MediaStream(); - if (audioTrack) - stream.addTrack(audioTrack); - if (videoTrack) stream.addTrack(videoTrack); @@ -425,14 +339,13 @@ VideoView.propTypes = showPeerInfo : PropTypes.bool, videoContain : PropTypes.bool, advancedMode : PropTypes.bool, - audioTrack : PropTypes.any, - volume : PropTypes.number, videoTrack : PropTypes.any, videoVisible : PropTypes.bool.isRequired, videoProfile : PropTypes.string, audioCodec : PropTypes.string, videoCodec : PropTypes.string, onChangeDisplayName : PropTypes.func, + children : PropTypes.object, classes : PropTypes.object.isRequired }; diff --git a/app/src/components/VideoWindow/VideoWindow.js b/app/src/components/VideoWindow/VideoWindow.js index f7bd796..7d19905 100644 --- a/app/src/components/VideoWindow/VideoWindow.js +++ b/app/src/components/VideoWindow/VideoWindow.js @@ -66,7 +66,17 @@ const mapDispatchToProps = (dispatch) => const VideoWindowContainer = connect( mapStateToProps, - mapDispatchToProps + mapDispatchToProps, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.consumers[prev.room.windowConsumer] === + next.consumers[next.room.windowConsumer] + ); + } + } )(VideoWindow); export default VideoWindowContainer;