Fixes to performance. Moved volume out to new component to optimize rerenders.
This commit is contained in:
Håvar Aambø Fosstveit
@@ -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);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Volume name={me.name} />
|
||||
</VideoView>
|
||||
</div>
|
||||
</div>
|
||||
{ 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)));
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
>
|
||||
<Volume name={peer.name} />
|
||||
</VideoView>
|
||||
</div>
|
||||
: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)));
|
||||
|
||||
@@ -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 (
|
||||
<div className={small ? classes.volumeSmall : classes.volumeLarge}>
|
||||
<div
|
||||
className={classnames(
|
||||
small ? classes.smallBar : classes.largeBar, `level${volume}`
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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));
|
||||
Reference in New Issue
Block a user