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.

lang/main.json

@@ -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",

react/features/video-quality/components/VideoQualityLabel.web.js

@@ -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
     };
 }