fix(toolbar): video quality button shows current video quality (#2761)

react/features/toolbox/components/Toolbox.web.js

@@ -27,7 +27,10 @@ import { RECORDING_TYPES, toggleRecording } from '../../recording';
 import { toggleSharedVideo } from '../../shared-video';
 import { toggleChat, toggleProfile, toggleSettings } from '../../side-panel';
 import { SpeakerStats } from '../../speaker-stats';
-import { VideoQualityDialog } from '../../video-quality';
+import {
+    OverflowMenuVideoQualityItem,
+    VideoQualityDialog
+} from '../../video-quality';
 
 import { setFullScreen, setToolbarHovered } from '../actions';
 
@@ -974,12 +977,9 @@ class Toolbox extends Component<Props, State> {
                     key = 'profile'
                     onClick = { this._onToolbarToggleProfile } />,
             this._shouldShowButton('videoquality')
-                && <OverflowMenuItem
-                    accessibilityLabel = 'Call quality'
-                    icon = { 'icon-visibility' }
+                && <OverflowMenuVideoQualityItem
                     key = 'videoquality'
-                    onClick = { this._onToolbarOpenVideoQuality }
-                    text = { t('toolbar.callQuality') } />,
+                    onClick = { this._onToolbarOpenVideoQuality } />,
             this._shouldShowButton('fullscreen')
                 && <OverflowMenuItem
                     accessibilityLabel = 'Full screen'

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

@@ -0,0 +1,105 @@
+// @flow
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { VIDEO_QUALITY_LEVELS } from '../../base/conference';
+import { translate } from '../../base/i18n';
+
+/**
+ * A map of of selectable receive resolutions to corresponding icons.
+ *
+ * @private
+ * @type {Object}
+ */
+const VIDEO_QUALITY_TO_ICON = {
+    [VIDEO_QUALITY_LEVELS.HIGH]: 'icon-HD',
+    [VIDEO_QUALITY_LEVELS.STANDARD]: 'icon-SD',
+    [VIDEO_QUALITY_LEVELS.LOW]: 'icon-LD'
+};
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link OverflowMenuVideoQualityItem}.
+ */
+type Props = {
+
+    /**
+     * Whether or not audio only mode is currently enabled.
+     */
+    _audioOnly: boolean,
+
+    /**
+     * The currently configured maximum quality resolution to be received from
+     * remote participants.
+     */
+    _receiveVideoQuality: number,
+
+    /**
+     * Callback to invoke when {@link OverflowMenuVideoQualityItem} is clicked.
+     */
+    onClick: Function,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * React {@code Component} responsible for displaying a button in the overflow
+ * menu of the toolbar, including an icon showing the currently selected
+ * max receive quality.
+ *
+ * @extends Component
+ */
+class OverflowMenuVideoQualityItem extends Component<Props> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { _audioOnly, _receiveVideoQuality } = this.props;
+        const icon = _audioOnly || !_receiveVideoQuality
+            ? 'icon-AUD'
+            : VIDEO_QUALITY_TO_ICON[_receiveVideoQuality];
+
+        return (
+            <li
+                aria-label = 'Call quality'
+                className = 'overflow-menu-item'
+                onClick = { this.props.onClick }>
+                <span className = 'overflow-menu-item-icon'>
+                    <i className = { icon } />
+                </span>
+                <span className = 'profile-text'>
+                    { this.props.t('toolbar.callQuality') }
+                </span>
+            </li>
+        );
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated props for the
+ * {@code OverflowMenuVideoQualityItem} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _audioOnly: boolean,
+ *     _receiveVideoQuality: number
+ * }}
+ */
+function _mapStateToProps(state) {
+    return {
+        _audioOnly: state['features/base/conference'].audioOnly,
+        _receiveVideoQuality:
+            state['features/base/conference'].receiveVideoQuality
+    };
+}
+
+export default translate(
+    connect(_mapStateToProps)(OverflowMenuVideoQualityItem));

react/features/video-quality/components/index.js

@@ -1,2 +1,5 @@
+export {
+    default as OverflowMenuVideoQualityItem
+} from './OverflowMenuVideoQualityItem';
 export { default as VideoQualityDialog } from './VideoQualityDialog';
 export { default as VideoQualityLabel } from './VideoQualityLabel';