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:
parent
a783939f12
commit
7e9a64d7c1
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
};
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue