fix(quality-label): show eye icon when for muted video

Instead of continuing with HD/SD/LD, show the eye icon
for when the participant on large video is muted or has
no video.
This commit is contained in:
Leonard Kim 2018-04-03 09:42:59 -07:00 committed by Saúl Ibarra Corretgé
parent a783939f12
commit 7e9a64d7c1
2 changed files with 36 additions and 9 deletions

View File

@ -452,8 +452,9 @@
"callQuality": "Call Quality",
"hd": "HD",
"highDefinition": "High definition",
"labelTooltipVideo": "Current video quality",
"labelTooltipAudioOnly": "Audio-only mode enabled",
"labelTooiltipNoVideo": "No video",
"labelTooltipVideo": "Current video quality",
"ld": "LD",
"lowDefinition": "Low definition",
"onlyAudioAvailable": "Only audio is available",

View File

@ -4,6 +4,8 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import { translate } from '../../base/i18n';
import { MEDIA_TYPE } from '../../base/media';
import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';
/**
* A map of video resolution (number) to translation key.
@ -62,6 +64,11 @@ export class VideoQualityLabel extends Component {
*/
_resolution: PropTypes.number,
/**
* The redux representation of the JitsiTrack displayed on large video.
*/
_videoTrack: PropTypes.object,
/**
* Invoked to obtain translated strings.
*/
@ -116,6 +123,7 @@ export class VideoQualityLabel extends Component {
_conferenceStarted,
_filmstripVisible,
_resolution,
_videoTrack,
t
} = this.props;
@ -134,8 +142,21 @@ export class VideoQualityLabel extends Component {
const opening = this.state.togglingToVisible ? 'opening' : '';
const classNames
= `${baseClasses} ${filmstrip} ${opening}`;
const tooltipKey
= `videoStatus.labelTooltip${_audioOnly ? 'AudioOnly' : 'Video'}`;
let labelContent;
let tooltipKey;
if (_audioOnly) {
labelContent = <i className = 'icon-visibility-off' />;
tooltipKey = 'videoStatus.labelTooltipAudioOnly';
} else if (!_videoTrack || _videoTrack.muted) {
labelContent = <i className = 'icon-visibility-off' />;
tooltipKey = 'videoStatus.labelTooiltipNoVideo';
} else {
labelContent = this._mapResolutionToTranslation(_resolution);
tooltipKey = 'videoStatus.labelTooltipVideo';
}
return (
<div
@ -145,9 +166,7 @@ export class VideoQualityLabel extends Component {
description = { t(tooltipKey) }
position = { 'left' }>
<div className = 'video-quality-label-status'>
{ _audioOnly
? <i className = 'icon-visibility-off' />
: this._mapResolutionToTranslation(_resolution) }
{ labelContent }
</div>
</Tooltip>
</div>
@ -194,19 +213,26 @@ export class VideoQualityLabel extends Component {
* _audioOnly: boolean,
* _conferenceStarted: boolean,
* _filmstripVisible: true,
* _resolution: number
* _resolution: number,
* _videoTrack: Object
* }}
*/
function _mapStateToProps(state) {
const { audioOnly, conference } = state['features/base/conference'];
const { visible } = state['features/filmstrip'];
const { resolution } = state['features/large-video'];
const { resolution, participantId } = state['features/large-video'];
const videoTrackOnLargeVideo = getTrackByMediaTypeAndParticipant(
state['features/base/tracks'],
MEDIA_TYPE.VIDEO,
participantId
);
return {
_audioOnly: audioOnly,
_conferenceStarted: Boolean(conference),
_filmstripVisible: visible,
_resolution: resolution
_resolution: resolution,
_videoTrack: videoTrackOnLargeVideo
};
}