feat(video-quality): hide if recorder or interfaceConfig specified it (#2166)

interface_config.js

@@ -136,12 +136,20 @@ var interfaceConfig = {
      *
      * @type {number}
      */
-    CONNECTION_INDICATOR_AUTO_HIDE_TIMEOUT: 5000
+    CONNECTION_INDICATOR_AUTO_HIDE_TIMEOUT: 5000,
 
     /**
      * The name of the application connected to the "Add people" search service.
      */
-    // ADD_PEOPLE_APP_NAME: ""
+    // ADD_PEOPLE_APP_NAME: "",
+
+    /**
+     * If true, hides the video quality label indicating the resolution status
+     * of the current large video.
+     *
+     * @type {boolean}
+     */
+    VIDEO_QUALITY_LABEL_DISABLED: false
 };
 
 /* eslint-enable no-unused-vars, no-var, max-len */

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

@@ -31,6 +31,12 @@ class Conference extends Component<*> {
      * @static
      */
     static propTypes = {
+        /**
+         * Whether or not the current local user is recording the conference.
+         *
+         */
+        _isRecording: PropTypes.bool,
+
         dispatch: PropTypes.func
     };
 
@@ -92,14 +98,18 @@ class Conference extends Component<*> {
      * @returns {ReactElement}
      */
     render() {
-        const { filmStripOnly } = interfaceConfig;
+        const { filmStripOnly, VIDEO_QUALITY_LABEL_DISABLED } = interfaceConfig;
+        const hideVideoQualityLabel = filmStripOnly
+            || VIDEO_QUALITY_LABEL_DISABLED
+            || this.props._isRecording;
 
         return (
             <div
                 id = 'videoconference_page'
                 onMouseMove = { this._onShowToolbar }>
                 <div id = 'videospace'>
-                    <LargeVideo />
+                    <LargeVideo
+                        hideVideoQualityLabel = { hideVideoQualityLabel } />
                     <Filmstrip filmstripOnly = { filmStripOnly } />
                 </div>
 
@@ -132,4 +142,20 @@ class Conference extends Component<*> {
     }
 }
 
-export default reactReduxConnect()(Conference);
+/**
+ * Maps (parts of) the Redux state to the associated props for the
+ * {@code Conference} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _isRecording: boolean
+ * }}
+ */
+function _mapStateToProps(state) {
+    return {
+        _isRecording: state['features/base/config'].iAmRecorder
+    };
+}
+
+export default reactReduxConnect(_mapStateToProps)(Conference);

react/features/large-video/components/LargeVideo.web.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { Watermarks } from '../../base/react';
@@ -15,6 +16,13 @@ declare var interfaceConfig: Object;
  * @extends Component
  */
 export default class LargeVideo extends Component<*> {
+    static propTypes = {
+        /**
+         * True if the {@code VideoQualityLabel} should not be displayed.
+         */
+        hideVideoQualityLabel: PropTypes.bool
+    };
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -68,7 +76,8 @@ export default class LargeVideo extends Component<*> {
                     </div>
                 </div>
                 <span id = 'localConnectionMessage' />
-                { interfaceConfig.filmStripOnly ? null : <VideoQualityLabel /> }
+                { this.props.hideVideoQualityLabel
+                    ? null : <VideoQualityLabel /> }
                 <RecordingLabel />
             </div>
         );