fix(audio-only): combine video status labels

Move the HD label into the newly renamed VideoStatusLabel
component. That way it cannot be possible for the audio only
label and the HD label to display simultaneously.

css/_videolayout_default.scss

@@ -517,19 +517,16 @@
     position: absolute;
     box-sizing: border-box;
 }
-.video-state-indicator {
-    height: 40px;
-}
 
 #videoResolutionLabel,
 .centeredVideoLabel {
-    display: none;
     z-index: $centeredVideoLabelZ;
 }
 
 .centeredVideoLabel {
     bottom: 45%;
     border-radius: 2px;
+    display: none;
     -webkit-transition: all 2s 2s linear;
     transition: all 2s 2s linear;
 

modules/UI/videolayout/ConnectionIndicator.js

@@ -1,5 +1,9 @@
 /* global $, APP, config */
 /* jshint -W101 */
+import {
+    setLargeVideoHDStatus
+} from '../../../react/features/base/conference';
+
 import JitsiPopover from "../util/JitsiPopover";
 import VideoLayout from "./VideoLayout";
 import UIUtil from "../util/UIUtil";
@@ -478,7 +482,7 @@ ConnectionIndicator.prototype.updateResolutionIndicator = function () {
                 });
         }
 
-        VideoLayout.updateResolutionLabel(showResolutionLabel);
+        APP.store.dispatch(setLargeVideoHDStatus(showResolutionLabel));
     }
 };
 

modules/UI/videolayout/VideoLayout.js

@@ -1080,16 +1080,6 @@ var VideoLayout = {
         return largeVideo;
     },
 
-    /**
-     * Updates the resolution label, indicating to the user that the large
-     * video stream is currently HD.
-     */
-    updateResolutionLabel(isResolutionHD) {
-        let id = 'videoResolutionLabel';
-
-        UIUtil.setVisible(id, isResolutionHD);
-    },
-
     /**
      * Sets the flipX state of the local video.
      * @param {boolean} true for flipped otherwise false;

react/features/base/conference/actionTypes.js

@@ -93,6 +93,17 @@ export const SET_AUDIO_ONLY = Symbol('SET_AUDIO_ONLY');
 export const _SET_AUDIO_ONLY_VIDEO_MUTED
     = Symbol('_SET_AUDIO_ONLY_VIDEO_MUTED');
 
+/**
+ * The type of (redux) action to set whether or not the displayed large video is
+ * in high-definition.
+ *
+ * {
+ *     type: SET_LARGE_VIDEO_HD_STATUS,
+ *     isLargeVideoHD: boolean
+ * }
+ */
+export const SET_LARGE_VIDEO_HD_STATUS = Symbol('SET_LARGE_VIDEO_HD_STATUS');
+
 /**
  * The type of redux action which sets the video channel's lastN (value).
  *

react/features/base/conference/actions.js

@@ -20,6 +20,7 @@ import {
     LOCK_STATE_CHANGED,
     SET_AUDIO_ONLY,
     _SET_AUDIO_ONLY_VIDEO_MUTED,
+    SET_LARGE_VIDEO_HD_STATUS,
     SET_LASTN,
     SET_PASSWORD,
     SET_PASSWORD_FAILED,
@@ -358,6 +359,23 @@ export function _setAudioOnlyVideoMuted(muted: boolean) {
     };
 }
 
+/**
+ * Action to set whether or not the currently displayed large video is in
+ * high-definition.
+ *
+ * @param {boolean} isLargeVideoHD - True if the large video is high-definition.
+ * @returns {{
+ *     type: SET_LARGE_VIDEO_HD_STATUS,
+ *     isLargeVideoHD: boolean
+ * }}
+ */
+export function setLargeVideoHDStatus(isLargeVideoHD) {
+    return {
+        type: SET_LARGE_VIDEO_HD_STATUS,
+        isLargeVideoHD
+    };
+}
+
 /**
  * Sets the video channel's last N (value) of the current conference. A value of
  * undefined shall be used to reset it to the default value.

react/features/base/conference/reducer.js

@@ -11,6 +11,7 @@ import {
     LOCK_STATE_CHANGED,
     SET_AUDIO_ONLY,
     _SET_AUDIO_ONLY_VIDEO_MUTED,
+    SET_LARGE_VIDEO_HD_STATUS,
     SET_PASSWORD,
     SET_ROOM
 } from './actionTypes';
@@ -43,6 +44,9 @@ ReducerRegistry.register('features/base/conference', (state = {}, action) => {
     case _SET_AUDIO_ONLY_VIDEO_MUTED:
         return _setAudioOnlyVideoMuted(state, action);
 
+    case SET_LARGE_VIDEO_HD_STATUS:
+        return _setLargeVideoHDStatus(state, action);
+
     case SET_PASSWORD:
         return _setPassword(state, action);
 
@@ -238,7 +242,10 @@ function _lockStateChanged(state, action) {
  * reduction of the specified action.
  */
 function _setAudioOnly(state, action) {
-    return set(state, 'audioOnly', action.audioOnly);
+    return assign(state, {
+        audioOnly: action.audioOnly,
+        isLargeVideoHD: action.audioOnly ? false : state.isLargeVideoHD
+    });
 }
 
 /**
@@ -256,6 +263,21 @@ function _setAudioOnlyVideoMuted(state, action) {
     return set(state, 'audioOnlyVideoMuted', action.muted);
 }
 
+/**
+ * Reduces a specific Redux action SET_LARGE_VIDEO_HD_STATUS of the feature
+ * base/conference.
+ *
+ * @param {Object} state - The Redux state of the feature base/conference.
+ * @param {Action} action - The Redux action SET_LARGE_VIDEO_HD_STATUS to
+ * reduce.
+ * @private
+ * @returns {Object} The new state of the feature base/conference after the
+ * reduction of the specified action.
+ */
+function _setLargeVideoHDStatus(state, action) {
+    return set(state, 'isLargeVideoHD', action.isLargeVideoHD);
+}
+
 /**
  * Reduces a specific Redux action SET_PASSWORD of the feature base/conference.
  *

react/features/conference/components/Conference.web.js

@@ -7,9 +7,9 @@ import { connect, disconnect } from '../../base/connection';
 import { DialogContainer } from '../../base/dialog';
 import { Watermarks } from '../../base/react';
 import { OverlayContainer } from '../../overlay';
-import { StatusLabel } from '../../status-label';
 import { Toolbox } from '../../toolbox';
 import { HideNotificationBarStyle } from '../../unsupported-browser';
+import { VideoStatusLabel } from '../../video-status-label';
 
 declare var $: Function;
 declare var APP: Object;
@@ -93,10 +93,7 @@ class Conference extends Component {
                                 muted = 'true' />
                         </div>
                         <span id = 'localConnectionMessage' />
-                        <span
+                        <VideoStatusLabel />
-                            className = 'video-state-indicator moveToCorner'
-                            id = 'videoResolutionLabel'>HD</span>
-                        <StatusLabel />
                         <span
                             className
                                 = 'video-state-indicator centeredVideoLabel'

react/features/status-label/components/StatusLabel.js

@@ -1,58 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-
-import AudioOnlyLabel from './AudioOnlyLabel';
-
-/**
- * Component responsible for displaying a label that indicates some state of the
- * current conference. The AudioOnlyLabel component will be displayed when the
- * conference is in audio only mode.
- */
-export class StatusLabel extends Component {
-    /**
-     * StatusLabel component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * The redux store representation of the current conference.
-         */
-        _conference: React.PropTypes.object
-    }
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement|null}
-     */
-    render() {
-        if (!this.props._conference.audioOnly) {
-            return null;
-        }
-
-        return (
-            <div className = 'moveToCorner'>
-                <AudioOnlyLabel />
-            </div>
-        );
-    }
-}
-
-/**
- * Maps (parts of) the Redux state to the associated StatusLabel's props.
- *
- * @param {Object} state - The Redux state.
- * @private
- * @returns {{
- *     _conference: Object,
- * }}
- */
-function _mapStateToProps(state) {
-    return {
-        _conference: state['features/base/conference']
-    };
-}
-
-export default connect(_mapStateToProps)(StatusLabel);

react/features/status-label/components/index.js

@@ -1 +0,0 @@
-export { default as StatusLabel } from './StatusLabel';

react/features/video-status-label/components/AudioOnlyLabel.js

@@ -66,7 +66,7 @@ export class AudioOnlyLabel extends Component {
     render() {
         return (
             <div
-                className = 'audio-only-label'
+                className = 'audio-only-label moveToCorner'
                 ref = { this._setRootElement }>
                 <i className = 'icon-visibility-off' />
             </div>

react/features/video-status-label/components/HDVideoLabel.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+/**
+ * A functional React {@code Component} for showing an HD status label.
+ *
+ * @returns {ReactElement}
+ */
+export default function HDVideoLabel() {
+    return (
+        <span
+            className = 'video-state-indicator moveToCorner'
+            id = 'videoResolutionLabel'>
+            HD
+        </span>
+    );
+}

react/features/video-status-label/components/VideoStatusLabel.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import AudioOnlyLabel from './AudioOnlyLabel';
+import HDVideoLabel from './HDVideoLabel';
+
+/**
+ * React {@code Component} responsible for displaying a label that indicates
+ * the displayed video state of the current conference. {@code AudioOnlyLabel}
+ * will display when the conference is in audio only mode. {@code HDVideoLabel}
+ * will display if not in audio only mode and a high-definition large video is
+ * being displayed.
+ */
+export class VideoStatusLabel extends Component {
+    /**
+     * {@code VideoStatusLabel}'s property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * Whether or not the conference is in audio only mode.
+         */
+        _audioOnly: React.PropTypes.bool,
+
+        /**
+         * Whether or not a high-definition large video is displayed.
+         */
+        _largeVideoHD: React.PropTypes.bool
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement|null}
+     */
+    render() {
+        if (this.props._audioOnly) {
+            return <AudioOnlyLabel />;
+        } else if (this.props._largeVideoHD) {
+            return <HDVideoLabel />;
+        }
+
+        return null;
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated {@code VideoStatusLabel}'s
+ * props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _audioOnly: boolean,
+ *     _largeVideoHD: boolean
+ * }}
+ */
+function _mapStateToProps(state) {
+    const { audioOnly, isLargeVideoHD } = state['features/base/conference'];
+
+    return {
+        _audioOnly: audioOnly,
+        _largeVideoHD: isLargeVideoHD
+    };
+}
+
+export default connect(_mapStateToProps)(VideoStatusLabel);

react/features/video-status-label/components/index.js

@@ -0,0 +1 @@
+export { default as VideoStatusLabel } from './VideoStatusLabel';