fix(quality-slider): prevent resizing by making p2p warning hidden (#1890)

* fix(quality-slider): prevent resizing by making p2p warning hidden

Instead of removing and appending the p2p warning, make it always
appended but toggle visibility so it always takes up space. This
should prevent resizing when the warning appears. Margin and
padding were adjusted to account for the empty space displayed
by a hidden p2p warning.

* let vertical size change
This commit is contained in:
virtuacoplenny 2017-08-15 13:22:32 -07:00 committed by yanas
parent 5e4d3de8fd
commit 3e3577766d
2 changed files with 9 additions and 1 deletions

View File

@ -1,6 +1,11 @@
.video-quality-dialog {
color: $modalTextColor;
.hide-warning {
height: 0;
visibility: hidden;
}
.video-quality-dialog-title {
margin-bottom: 10px;
}

View File

@ -115,13 +115,16 @@ class VideoQualityDialog extends Component {
render() {
const { _audioOnly, _p2p, t } = this.props;
const activeSliderOption = this._mapCurrentQualityToSliderValue();
const showP2PWarning = _p2p && !_audioOnly;
return (
<div className = 'video-quality-dialog'>
<h3 className = 'video-quality-dialog-title'>
{ t('videoStatus.callQuality') }
</h3>
{ !_audioOnly && _p2p ? this._renderP2PMessage() : null }
<div className = { showP2PWarning ? '' : 'hide-warning' }>
{ this._renderP2PMessage() }
</div>
<div className = 'video-quality-dialog-contents'>
<div className = 'video-quality-dialog-slider-container'>
{ /* FIXME: onChange and onMouseUp are both used for