feat(Labels): Redo video quality label

Video quality label now becomes "performance settings".
All CSS for labels is moved to JS.
Overflow menu button is also changed to "performance settings".

css/_labels.scss

@@ -1,37 +0,0 @@
-.label {
-    align-items: center;
-    background: #36383C;
-    border-radius: 3px;
-    color: #fff;
-    display: flex;
-    font-size: 12px;
-    font-weight: 600;
-    height: 28px;
-    margin: 0 0 4px 4px;
-    padding: 0 8px;
-
-    &--green {
-        background: #31B76A;
-    }
-
-    &--red {
-        background: #E34F56
-    }
-
-    &--white {
-        background: #fff;
-        color: #5e6d7a;
-
-        svg {
-            fill: #5e6d7a;
-        }
-    }
-}
-
-.label-text-with-icon {
-    margin-left: 8px;
-}
-
-.participants-count {
-    cursor: pointer;
-}

css/main.scss

@@ -78,7 +78,6 @@ $flagsImagePath: "../images/";
 @import 'filmstrip/tile_view_overrides';
 @import 'filmstrip/vertical_filmstrip';
 @import 'filmstrip/vertical_filmstrip_overrides';
-@import 'labels';
 @import 'unsupported-browser/main';
 @import 'modals/invite/add-people';
 @import 'deep-linking/main';

lang/main.json

@@ -1056,6 +1056,7 @@
         "ld": "LD",
         "ldTooltip": "Viewing low definition video",
         "lowDefinition": "Low definition",
+        "performanceSettings": "Performance settings",
         "sd": "SD",
         "sdTooltip": "Viewing standard definition video",
         "standardDefinition": "Standard definition"

react/features/base/icons/svg/gauge.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.666687" y="1.5" width="18" height="16" fill="black">
+<rect fill="white" x="0.666687" y="1.5" width="18" height="16"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 4.01515C8.65151 4.01515 7.33329 4.41503 6.21204 5.16422C5.0908 5.91341 4.2169 6.97827 3.70084 8.22413C3.18479 9.46998 3.04977 10.8409 3.31285 12.1635C3.57593 13.4861 4.2253 14.701 5.17884 15.6545L4.10747 16.7259C2.94203 15.5604 2.14836 14.0756 1.82681 12.4591C1.50527 10.8426 1.6703 9.16702 2.30103 7.6443C2.93176 6.12159 3.99986 4.8201 5.37027 3.90442C6.74068 2.98874 8.35184 2.5 10 2.5C11.6482 2.5 13.2594 2.98874 14.6298 3.90442C16.0002 4.8201 17.0683 6.12159 17.699 7.6443C18.3297 9.16702 18.4948 10.8426 18.1732 12.4591C17.8517 14.0756 17.058 15.5604 15.8926 16.7259L14.8212 15.6545C15.7747 14.701 16.4241 13.4861 16.6872 12.1635C16.9503 10.8409 16.8152 9.46998 16.2992 8.22413C15.7831 6.97827 14.9092 5.91341 13.788 5.16422C12.6668 4.41503 11.3485 4.01515 10 4.01515ZM9.55624 12.0731L8.48487 11.0017L8.48486 11.0017L9.55623 12.0731L9.55624 12.0731ZM13.6591 7.83508L12.7229 6.89887L8.04131 10.9867L9.57123 12.5166L13.6591 7.83508Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 4.01515C8.65151 4.01515 7.33329 4.41503 6.21204 5.16422C5.0908 5.91341 4.2169 6.97827 3.70084 8.22413C3.18479 9.46998 3.04977 10.8409 3.31285 12.1635C3.57593 13.4861 4.2253 14.701 5.17884 15.6545L4.10747 16.7259C2.94203 15.5604 2.14836 14.0756 1.82681 12.4591C1.50527 10.8426 1.6703 9.16702 2.30103 7.6443C2.93176 6.12159 3.99986 4.8201 5.37027 3.90442C6.74068 2.98874 8.35184 2.5 10 2.5C11.6482 2.5 13.2594 2.98874 14.6298 3.90442C16.0002 4.8201 17.0683 6.12159 17.699 7.6443C18.3297 9.16702 18.4948 10.8426 18.1732 12.4591C17.8517 14.0756 17.058 15.5604 15.8926 16.7259L14.8212 15.6545C15.7747 14.701 16.4241 13.4861 16.6872 12.1635C16.9503 10.8409 16.8152 9.46998 16.2992 8.22413C15.7831 6.97827 14.9092 5.91341 13.788 5.16422C12.6668 4.41503 11.3485 4.01515 10 4.01515ZM9.55624 12.0731L8.48487 11.0017L8.48486 11.0017L9.55623 12.0731L9.55624 12.0731ZM13.6591 7.83508L12.7229 6.89887L8.04131 10.9867L9.57123 12.5166L13.6591 7.83508Z" fill="white"/>
+<path d="M6.21204 5.16422L6.10093 4.99793L6.21204 5.16422ZM3.70084 8.22413L3.88562 8.30066L3.70084 8.22413ZM3.31285 12.1635L3.50901 12.1245L3.31285 12.1635ZM5.17884 15.6545L5.32026 15.7959L5.46168 15.6545L5.32026 15.5131L5.17884 15.6545ZM4.10747 16.7259L3.96605 16.8673L4.10747 17.0087L4.24889 16.8673L4.10747 16.7259ZM1.82681 12.4591L1.63066 12.4981L1.82681 12.4591ZM2.30103 7.6443L2.11625 7.56777H2.11625L2.30103 7.6443ZM5.37027 3.90442L5.48138 4.07071V4.07071L5.37027 3.90442ZM14.6298 3.90442L14.5187 4.07071L14.6298 3.90442ZM17.699 7.6443L17.8838 7.56777L17.699 7.6443ZM18.1732 12.4591L18.3694 12.4981L18.1732 12.4591ZM15.8926 16.7259L15.7512 16.8673L15.8926 17.0087L16.034 16.8673L15.8926 16.7259ZM14.8212 15.6545L14.6798 15.5131L14.5384 15.6545L14.6798 15.7959L14.8212 15.6545ZM16.6872 12.1635L16.8833 12.2025L16.6872 12.1635ZM16.2992 8.22413L16.484 8.14759L16.2992 8.22413ZM13.788 5.16422L13.8991 4.99793L13.788 5.16422ZM8.48487 11.0017L8.62629 10.8603L8.39598 10.63L8.29477 10.9396L8.48487 11.0017ZM9.55624 12.0731L9.74634 12.1352L9.7845 12.0185L9.69766 11.9317L9.55624 12.0731ZM8.48486 11.0017L8.29476 10.9396L8.2566 11.0563L8.34344 11.1431L8.48486 11.0017ZM9.55623 12.0731L9.41481 12.2145L9.64512 12.4448L9.74633 12.1353L9.55623 12.0731ZM12.7229 6.89887L12.8643 6.75745L12.7321 6.62528L12.5913 6.74822L12.7229 6.89887ZM13.6591 7.83508L13.8097 7.96662L13.9327 7.82582L13.8005 7.69365L13.6591 7.83508ZM8.04131 10.9867L7.90977 10.8361L7.74857 10.9768L7.89989 11.1282L8.04131 10.9867ZM9.57123 12.5166L9.42981 12.6581L9.58113 12.8094L9.72188 12.6482L9.57123 12.5166ZM6.32316 5.33051C7.41151 4.6033 8.69107 4.21515 10 4.21515V3.81515C8.61195 3.81515 7.25506 4.22676 6.10093 4.99793L6.32316 5.33051ZM3.88562 8.30066C4.38653 7.09135 5.2348 6.05773 6.32316 5.33051L6.10093 4.99793C4.9468 5.76909 4.04726 6.86518 3.51607 8.14759L3.88562 8.30066ZM3.50901 12.1245C3.25364 10.8407 3.38471 9.50998 3.88562 8.30066L3.51607 8.14759C2.98488 9.42999 2.8459 10.8411 3.11669 12.2025L3.50901 12.1245ZM5.32026 15.5131C4.39469 14.5875 3.76437 13.4083 3.50901 12.1245L3.11669 12.2025C3.38749 13.5639 4.05591 14.8144 5.03742 15.7959L5.32026 15.5131ZM4.24889 16.8673L5.32026 15.7959L5.03742 15.5131L3.96604 16.5845L4.24889 16.8673ZM1.63066 12.4981C1.95992 14.1534 2.77264 15.6739 3.96605 16.8673L4.24889 16.5845C3.11142 15.447 2.3368 13.9978 2.02297 12.4201L1.63066 12.4981ZM2.11625 7.56777C1.47038 9.12703 1.3014 10.8428 1.63066 12.4981L2.02297 12.4201C1.70914 10.8424 1.87021 9.20701 2.4858 7.72084L2.11625 7.56777ZM5.25916 3.73813C3.85586 4.67578 2.76212 6.0085 2.11625 7.56777L2.4858 7.72084C3.1014 6.23467 4.14387 4.96441 5.48138 4.07071L5.25916 3.73813ZM10 2.3C8.31229 2.3 6.66246 2.80047 5.25916 3.73813L5.48138 4.07071C6.8189 3.17701 8.3914 2.7 10 2.7V2.3ZM14.7409 3.73813C13.3376 2.80047 11.6878 2.3 10 2.3V2.7C11.6086 2.7 13.1811 3.17701 14.5187 4.07071L14.7409 3.73813ZM17.8838 7.56777C17.2379 6.0085 16.1442 4.67578 14.7409 3.73813L14.5187 4.07071C15.8562 4.96441 16.8986 6.23467 17.5142 7.72084L17.8838 7.56777ZM18.3694 12.4981C18.6986 10.8428 18.5297 9.12703 17.8838 7.56777L17.5142 7.72084C18.1298 9.20701 18.2909 10.8424 17.9771 12.4201L18.3694 12.4981ZM16.034 16.8673C17.2274 15.6739 18.0401 14.1534 18.3694 12.4981L17.9771 12.4201C17.6632 13.9978 16.8886 15.447 15.7512 16.5845L16.034 16.8673ZM14.6798 15.7959L15.7512 16.8673L16.034 16.5845L14.9626 15.5131L14.6798 15.7959ZM16.491 12.1245C16.2357 13.4083 15.6053 14.5875 14.6798 15.5131L14.9626 15.7959C15.9441 14.8144 16.6125 13.5639 16.8833 12.2025L16.491 12.1245ZM16.1144 8.30066C16.6153 9.50998 16.7464 10.8407 16.491 12.1245L16.8833 12.2025C17.1541 10.8411 17.0152 9.42999 16.484 8.14759L16.1144 8.30066ZM13.6769 5.33051C14.7652 6.05773 15.6135 7.09135 16.1144 8.30066L16.484 8.14759C15.9528 6.86518 15.0532 5.76909 13.8991 4.99793L13.6769 5.33051ZM10 4.21515C11.309 4.21515 12.5885 4.6033 13.6769 5.33051L13.8991 4.99793C12.745 4.22676 11.3881 3.81515 10 3.81515V4.21515ZM8.34344 11.1431L9.41482 12.2145L9.69766 11.9317L8.62629 10.8603L8.34344 11.1431ZM8.67496 11.0639L8.67496 11.0639L8.29477 10.9396L8.29476 10.9396L8.67496 11.0639ZM9.69765 11.9317L8.62628 10.8603L8.34344 11.1431L9.41481 12.2145L9.69765 11.9317ZM9.36614 12.0109L9.36613 12.011L9.74633 12.1353L9.74634 12.1352L9.36614 12.0109ZM12.5815 7.04029L13.5177 7.9765L13.8005 7.69365L12.8643 6.75745L12.5815 7.04029ZM8.17286 11.1374L12.8544 7.04952L12.5913 6.74822L7.90977 10.8361L8.17286 11.1374ZM9.71265 12.3752L8.18273 10.8453L7.89989 11.1282L9.42981 12.6581L9.71265 12.3752ZM13.5084 7.70353L9.42058 12.3851L9.72188 12.6482L13.8097 7.96662L13.5084 7.70353Z" fill="white" mask="url(#path-1-outside-1)"/>
+</svg>

react/features/base/icons/svg/index.js

@@ -33,6 +33,7 @@ export { default as IconCloseX } from './close-x.svg';
 export { default as IconClosedCaption } from './closed_caption.svg';
 export { default as IconCloseSmall } from './close-small.svg';
 export { default as IconCodeBlock } from './code-block.svg';
+export { default as IconGauge } from './gauge.svg';
 export { default as IconConnectionActive } from './gsm-bars.svg';
 export { default as IconConnectionInactive } from './ninja.svg';
 export { default as IconCopy } from './copy.svg';

react/features/base/label/components/Label.web.js

@@ -1,8 +1,11 @@
 // @flow
-
+import { withStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
 import React from 'react';
 
 import Icon from '../../icons/components/Icon';
+import { withPixelLineHeight } from '../../styles/functions.web';
+import { COLORS } from '../constants';
 
 import AbstractLabel, {
     type Props as AbstractProps
@@ -11,23 +14,84 @@ import AbstractLabel, {
 type Props = AbstractProps & {
 
     /**
-     * Additional CSS class names to add to the root of {@code Label}.
+     * An object containing the CSS classes.
+     */
+    classes: Object,
+
+    /**
+     * Own CSS class name.
      */
     className: string,
 
+    /**
+     * The color of the label.
+     */
+    color: string,
+
+
     /**
      * HTML ID attribute to add to the root of {@code Label}.
      */
-    id: string
+    id: string,
+
+    /**
+     * Click handler if any.
+     */
+    onClick?: Function,
 
 };
 
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current UI theme.
+ *
+ * @returns {Object}
+ */
+const styles = theme => {
+    return {
+        label: {
+            ...withPixelLineHeight(theme.typography.labelRegular),
+
+            alignItems: 'center',
+            background: theme.palette.ui04,
+            borderRadius: theme.shape.borderRadius / 2,
+            color: theme.palette.text01,
+            display: 'flex',
+            height: 28,
+            margin: '0 0 4px 4px',
+            padding: '0 8px'
+        },
+        withIcon: {
+            marginLeft: 8
+        },
+        clickable: {
+            cursor: 'pointer'
+        },
+        [COLORS.white]: {
+            background: theme.palette.text01,
+            color: theme.palette.ui04,
+
+            '& svg': {
+                fill: theme.palette.ui04
+            }
+        },
+        [COLORS.green]: {
+            background: theme.palette.success02
+        },
+        [COLORS.red]: {
+            background: theme.palette.actionDanger
+        }
+    };
+};
+
+
 /**
  * React Component for showing short text in a circle.
  *
  * @extends Component
  */
-export default class Label extends AbstractLabel<Props, *> {
+class Label extends AbstractLabel<Props, *> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -35,23 +99,33 @@ export default class Label extends AbstractLabel<Props, *> {
      */
     render() {
         const {
+            classes,
             className,
+            color,
             icon,
             id,
+            onClick,
             text
         } = this.props;
-
-        const labelClassName = icon ? 'label-text-with-icon' : '';
+        const labelClassName = clsx(
+            classes.label,
+            onClick && classes.clickable,
+            color && classes[color],
+            className
+        );
 
         return (
             <div
-                className = { `label ${className}` }
-                id = { id }>
+                className = { labelClassName }
+                id = { id }
+                onClick = { onClick }>
                 { icon && <Icon
                     size = '16'
                     src = { icon } /> }
-                { text && <span className = { labelClassName }>{text}</span> }
+                { text && <span className = { icon && classes.withIcon }>{text}</span> }
             </div>
         );
     }
 }
+
+export default withStyles(styles)(Label);

react/features/base/label/constants.js

@@ -0,0 +1,7 @@
+// @flow
+
+export const COLORS = {
+    white: 'white',
+    green: 'green',
+    red: 'red'
+};

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

@@ -6,6 +6,7 @@ import React from 'react';
 import { translate } from '../../../base/i18n';
 import { IconWarning } from '../../../base/icons';
 import { Label } from '../../../base/label';
+import { COLORS } from '../../../base/label/constants';
 import { connect } from '../../../base/redux';
 import AbstractInsecureRoomNameLabel, { _mapStateToProps } from '../AbstractInsecureRoomNameLabel';
 
@@ -24,7 +25,7 @@ class InsecureRoomNameLabel extends AbstractInsecureRoomNameLabel {
                 content = { this.props.t('security.insecureRoomNameWarning') }
                 position = 'bottom'>
                 <Label
-                    className = 'label--red'
+                    color = { COLORS.red }
                     icon = { IconWarning } />
             </Tooltip>
         );

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

@@ -6,6 +6,7 @@ import type { Dispatch } from 'redux';
 import { openDialog } from '../../../base/dialog';
 import { IconUserGroups } from '../../../base/icons';
 import { Label } from '../../../base/label';
+import { COLORS } from '../../../base/label/constants';
 import { getParticipantCount } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { SpeakerStats } from '../../../speaker-stats';
@@ -79,14 +80,11 @@ class ParticipantsCount extends PureComponent<Props> {
         }
 
         return (
-            <div
-                className = 'participants-count'
-                onClick = { this._onClick }>
-                <Label
-                    className = 'label--white'
-                    icon = { IconUserGroups }
-                    text = { count } />
-            </div>
+            <Label
+                color = { COLORS.white }
+                icon = { IconUserGroups }
+                onClick = { this._onClick }
+                text = { count } />
         );
     }
 }

react/features/e2ee/components/E2EELabel.js

@@ -5,6 +5,7 @@ import React, { Component } from 'react';
 import { translate } from '../../base/i18n';
 import { IconE2EE } from '../../base/icons';
 import { Label } from '../../base/label';
+import { COLORS } from '../../base/label/constants';
 import { connect } from '../../base/redux';
 import { Tooltip } from '../../base/tooltip';
 
@@ -36,7 +37,7 @@ class E2EELabel extends Component<Props> {
                 content = { content }
                 position = { 'bottom' }>
                 <Label
-                    className = 'label--green'
+                    color = { COLORS.green }
                     icon = { IconE2EE } />
             </Tooltip>
         );

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

@@ -1,29 +1,8 @@
 // @flow
 
 import { translate } from '../../base/i18n';
-import {
-    IconVideoQualityAudioOnly,
-    IconVideoQualityHD,
-    IconVideoQualityLD,
-    IconVideoQualitySD
-} from '../../base/icons';
-import { connect } from '../../base/redux';
+import { IconGauge } from '../../base/icons';
 import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
-import { VIDEO_QUALITY_LEVELS } from '../constants';
-import { findNearestQualityLevel } from '../functions';
-
-/**
- * A map of of selectable receive resolutions to corresponding icons.
- *
- * @private
- * @type {Object}
- */
-const VIDEO_QUALITY_TO_ICON = {
-    [VIDEO_QUALITY_LEVELS.ULTRA]: IconVideoQualityHD,
-    [VIDEO_QUALITY_LEVELS.HIGH]: IconVideoQualityHD,
-    [VIDEO_QUALITY_LEVELS.STANDARD]: IconVideoQualitySD,
-    [VIDEO_QUALITY_LEVELS.LOW]: IconVideoQualityLD
-};
 
 /**
  * The type of the React {@code Component} props of
@@ -57,32 +36,10 @@ type Props = AbstractButtonProps & {
  */
 class VideoQualityButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.callQuality';
-    label = 'toolbar.callQuality';
-    tooltip = 'toolbar.callQuality';
+    label = 'videoStatus.performanceSettings';
+    tooltip = 'videoStatus.performanceSettings';
+    icon = IconGauge;
 
-    /**
-     * Dynamically retrieves the icon.
-     */
-    get icon() {
-        const { _audioOnly, _videoQuality } = this.props;
-
-        const videoQualityLevel = findNearestQualityLevel(_videoQuality);
-
-        const icon = _audioOnly || !videoQualityLevel
-            ? IconVideoQualityAudioOnly
-            : VIDEO_QUALITY_TO_ICON[videoQualityLevel];
-
-        return icon;
-    }
-
-    /**
-     * Required by linter due to AbstractButton overwritten prop being writable.
-     *
-     * @param {string} value - The icon value.
-     */
-    set icon(value) {
-        return value;
-    }
 
     /**
      * Handles clicking / pressing the button.
@@ -102,23 +59,4 @@ class VideoQualityButton extends AbstractButton<Props, *> {
     }
 }
 
-/**
- * Maps (parts of) the Redux state to the associated props for the
- * {@code VideoQualityButton} component.
- *
- * @param {Object} state - The Redux state.
- * @private
- * @returns {{
- *     _audioOnly: boolean,
- *     _videoQuality: number
- * }}
- */
-function _mapStateToProps(state) {
-    return {
-        _audioOnly: state['features/base/audio-only'].enabled,
-        _videoQuality: state['features/video-quality'].preferredVideoQuality
-    };
-}
-
-export default translate(
-    connect(_mapStateToProps)(VideoQualityButton));
+export default translate(VideoQualityButton);

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

@@ -53,22 +53,4 @@ class VideoQualityLabel extends AbstractVideoQualityLabel<Props> {
     }
 }
 
-/**
- * Maps (parts of) the Redux state to the associated
- * {@code VideoQualityLabel}'s props.
- *
- * NOTE: This component has no props other than the abstract ones but keeping
- * the coding style the same for consistency reasons.
- *
- * @param {Object} state - The Redux state.
- * @private
- * @returns {{
- * }}
- */
-function _mapStateToProps(state: Object) {
-    return {
-        ..._abstractMapStateToProps(state)
-    };
-}
-
-export default translate(connect(_mapStateToProps)(VideoQualityLabel));
+export default translate(connect(_abstractMapStateToProps)(VideoQualityLabel));

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

@@ -2,71 +2,40 @@
 
 import React from 'react';
 
+import { openDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
+import { IconGauge } from '../../base/icons';
 import { Label } from '../../base/label';
-import { MEDIA_TYPE } from '../../base/media';
 import { connect } from '../../base/redux';
 import { Tooltip } from '../../base/tooltip';
-import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';
 import { shouldDisplayTileView } from '../../video-layout';
 
 import AbstractVideoQualityLabel, {
     _abstractMapStateToProps,
     type Props as AbstractProps
 } from './AbstractVideoQualityLabel';
+import VideoQualityDialog from './VideoQualityDialog.web';
 
 declare var interfaceConfig: Object;
 
 type Props = AbstractProps & {
 
     /**
-     * The message to show within the label.
+     * The redux dispatch function.
      */
-    _labelKey: string,
-
-    /**
-     * Whether to show video quality label or not.
-     */
-     _showVideoQualityLabel: boolean,
+    dispatch: Function,
 
     /**
      * The message to show within the label's tooltip.
      */
     _tooltipKey: string,
 
-    /**
-     * The redux representation of the JitsiTrack displayed on large video.
-     */
-    _videoTrack: Object,
-
     /**
      * Flag controlling visibility of the component.
      */
     _visible: boolean,
 };
 
-/**
- * A map of video resolution (number) to translation key.
- *
- * @type {Object}
- */
-const RESOLUTION_TO_TRANSLATION_KEY = {
-    '720': 'videoStatus.hd',
-    '360': 'videoStatus.sd',
-    '180': 'videoStatus.ld'
-};
-
-/**
- * Expected video resolutions placed into an array, sorted from lowest to
- * highest resolution.
- *
- * @type {number[]}
- */
-const RESOLUTIONS
-    = Object.keys(RESOLUTION_TO_TRANSLATION_KEY)
-        .map(resolution => parseInt(resolution, 10))
-        .sort((a, b) => a - b);
-
 /**
  * React {@code Component} responsible for displaying a label that indicates
  * the displayed video state of the current conference. {@code AudioOnlyLabel}
@@ -85,10 +54,8 @@ export class VideoQualityLabel extends AbstractVideoQualityLabel<Props> {
     render() {
         const {
             _audioOnly,
-            _labelKey,
-            _tooltipKey,
-            _videoTrack,
             _visible,
+            dispatch,
             t
         } = this.props;
 
@@ -97,20 +64,17 @@ export class VideoQualityLabel extends AbstractVideoQualityLabel<Props> {
             return null;
         }
 
-        let className, labelContent, tooltipKey;
+        let className, icon, labelContent, onClick, tooltipKey;
 
         if (_audioOnly) {
             className = 'audio-only';
             labelContent = t('videoStatus.audioOnly');
             tooltipKey = 'videoStatus.labelTooltipAudioOnly';
-        } else if (!_videoTrack || _videoTrack.muted) {
-            className = 'no-video';
-            labelContent = t('videoStatus.audioOnly');
-            tooltipKey = 'videoStatus.labelTooiltipNoVideo';
         } else {
             className = 'current-video-quality';
-            labelContent = t(_labelKey);
-            tooltipKey = _tooltipKey;
+            icon = IconGauge;
+            onClick = () => dispatch(openDialog(VideoQualityDialog));
+            tooltipKey = 'videoStatus.performanceSettings';
         }
 
 
@@ -120,47 +84,15 @@ export class VideoQualityLabel extends AbstractVideoQualityLabel<Props> {
                 position = { 'bottom' }>
                 <Label
                     className = { className }
+                    icon = { icon }
                     id = 'videoResolutionLabel'
+                    onClick = { onClick }
                     text = { labelContent } />
             </Tooltip>
         );
     }
 }
 
-/**
- * Matches the passed in resolution with a translation keys for describing
- * the resolution. The passed in resolution will be matched with a known
- * resolution that it is at least greater than or equal to.
- *
- * @param {number} resolution - The video height to match with a
- * translation.
- * @private
- * @returns {Object}
- */
-function _mapResolutionToTranslationsKeys(resolution) {
-    // Set the default matching resolution of the lowest just in case a match is
-    // not found.
-    let highestMatchingResolution = RESOLUTIONS[0];
-
-    for (let i = 0; i < RESOLUTIONS.length; i++) {
-        const knownResolution = RESOLUTIONS[i];
-
-        if (resolution >= knownResolution) {
-            highestMatchingResolution = knownResolution;
-        } else {
-            break;
-        }
-    }
-
-    const labelKey
-        = RESOLUTION_TO_TRANSLATION_KEY[highestMatchingResolution];
-
-    return {
-        labelKey,
-        tooltipKey: `${labelKey}Tooltip`
-    };
-}
-
 /**
  * Maps (parts of) the Redux state to the associated {@code VideoQualityLabel}'s
  * props.
@@ -168,28 +100,13 @@ function _mapResolutionToTranslationsKeys(resolution) {
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
- *     _labelKey: string,
- *     _tooltipKey: string,
- *     _videoTrack: Object
+ *     _audioOnly: boolean,
+ *     _visible: boolean
  * }}
  */
 function _mapStateToProps(state) {
-    const { enabled: audioOnly } = state['features/base/audio-only'];
-    const { resolution, participantId } = state['features/large-video'];
-    const videoTrackOnLargeVideo = getTrackByMediaTypeAndParticipant(
-        state['features/base/tracks'],
-        MEDIA_TYPE.VIDEO,
-        participantId
-    );
-
-    const translationKeys
-        = audioOnly ? {} : _mapResolutionToTranslationsKeys(resolution);
-
     return {
         ..._abstractMapStateToProps(state),
-        _labelKey: translationKeys.labelKey,
-        _tooltipKey: translationKeys.tooltipKey,
-        _videoTrack: videoTrackOnLargeVideo,
         _visible: !(shouldDisplayTileView(state) || interfaceConfig.VIDEO_QUALITY_LABEL_DISABLED)
     };
 }