[RN] Add VideoQualityLabel indicator for mobile

react/features/base/styles/components/styles/ColorPalette.js

@@ -22,6 +22,7 @@ export const ColorPalette = {
     blueHighlight: '#1081b2',
     buttonUnderlay: '#495258',
     darkGrey: '#555555',
+    green: '#40b183',
     red: '#D00000',
     white: 'white'
 };

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

@@ -18,6 +18,7 @@ import { ConferenceNotification } from '../../calendar-sync';
 import { Filmstrip } from '../../filmstrip';
 import { LargeVideo } from '../../large-video';
 import { setToolboxVisible, Toolbox } from '../../toolbox';
+import { VideoQualityLabel } from '../../video-quality';
 
 import styles from './styles';
 
@@ -245,6 +246,7 @@ class Conference extends Component<Props> {
                       * participants.
                       */}
                     <Filmstrip />
+                    <VideoQualityLabel style = { styles.videoQualityLabel } />
                 </View>
                 <TestConnectionInfo />
 

react/features/conference/components/styles.js

@@ -35,5 +35,11 @@ export default createStyleSheet({
         // On iPhone X there is the notch. In the two cases BoxModel.margin is
         // not enough.
         top: BoxModel.margin * 3
+    },
+
+    videoQualityLabel: {
+        right: 0,
+        top: 0,
+        position: 'absolute'
     }
 });

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

@@ -0,0 +1,41 @@
+// @flow
+
+import { Component } from 'react';
+
+export type Props = {
+
+    /**
+     * Whether or not the conference is in audio only mode.
+     */
+    _audioOnly: boolean,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * Abstract class for the {@code VideoQualityLabel} component.
+ */
+export default class AbstractVideoQualityLabel<P: Props> extends Component<P> {
+
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated
+ * {@code AbstractVideoQualityLabel}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _audioOnly: boolean
+ * }}
+ */
+export function _abstractMapStateToProps(state: Object) {
+    const { audioOnly } = state['features/base/conference'];
+
+    return {
+        _audioOnly: audioOnly
+    };
+}

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

@@ -0,0 +1,76 @@
+// @flow
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../base/i18n';
+import { CircularLabel } from '../../base/label';
+import { combineStyles, type StyleType } from '../../base/styles';
+
+import AbstractVideoQualityLabel, {
+    _abstractMapStateToProps,
+    type Props as AbstractProps
+} from './AbstractVideoQualityLabel';
+import styles from './styles';
+
+type Props = AbstractProps & {
+
+    /**
+     * Style of the component passed as props.
+     */
+    style: ?StyleType
+};
+
+/**
+ * React {@code Component} responsible for displaying a label that indicates
+ * the displayed video state of the current conference.
+ *
+ * NOTE: Due to the lack of actual video quality information on mobile side,
+ * this component currently only displays audio only indicator, but the naming
+ * is kept consistent with web and in the future we may introduce the required
+ * api and extend this component with actual quality indication.
+ */
+class VideoQualityLabel extends AbstractVideoQualityLabel<Props> {
+
+    /**
+     * Implements React {@link Component}'s render.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { _audioOnly, style, t } = this.props;
+
+        if (!_audioOnly) {
+            // We don't have info about the quality so no need for the indicator
+            return null;
+        }
+
+        return (
+            <CircularLabel
+                label = { t('videoStatus.audioOnly') }
+                style = {
+                    combineStyles(styles.indicatorAudioOnly, style)
+                } />
+        );
+    }
+}
+
+/**
+ * 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));

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

@@ -1,6 +1,7 @@
+// @flow
+
 import Tooltip from '@atlaskit/tooltip';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
@@ -8,15 +9,38 @@ import { CircularLabel } from '../../base/label';
 import { MEDIA_TYPE } from '../../base/media';
 import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';
 
+import AbstractVideoQualityLabel, {
+    _abstractMapStateToProps,
+    type Props as AbstractProps
+} from './AbstractVideoQualityLabel';
+
+type Props = AbstractProps & {
+
+    /**
+     * The message to show within the label.
+     */
+    _labelKey: string,
+
+    /**
+     * The message to show within the label's tooltip.
+     */
+    _tooltipKey: string,
+
+    /**
+     * The redux representation of the JitsiTrack displayed on large video.
+     */
+    _videoTrack: Object
+};
+
 /**
  * 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'
+    '720': 'videoStatus.hd',
+    '360': 'videoStatus.sd',
+    '180': 'videoStatus.ld'
 };
 
 /**
@@ -37,38 +61,7 @@ const RESOLUTIONS
  * will display if not in audio only mode and a high-definition large video is
  * being displayed.
  */
-export class VideoQualityLabel extends Component {
-    /**
-     * {@code VideoQualityLabel}'s property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * Whether or not the conference is in audio only mode.
-         */
-        _audioOnly: PropTypes.bool,
-
-        /**
-         * The message to show within the label.
-         */
-        _labelKey: PropTypes.string,
-
-        /**
-         * The message to show within the label's tooltip.
-         */
-        _tooltipKey: PropTypes.string,
-
-        /**
-         * The redux representation of the JitsiTrack displayed on large video.
-         */
-        _videoTrack: PropTypes.object,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+export class VideoQualityLabel extends AbstractVideoQualityLabel<Props> {
 
     /**
      * Implements React's {@link Component#render()}.
@@ -157,7 +150,6 @@ function _mapResolutionToTranslationsKeys(resolution) {
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
- *     _audioOnly: boolean,
  *     _labelKey: string,
  *     _tooltipKey: string,
  *     _videoTrack: Object
@@ -176,7 +168,7 @@ function _mapStateToProps(state) {
         = audioOnly ? {} : _mapResolutionToTranslationsKeys(resolution);
 
     return {
-        _audioOnly: audioOnly,
+        ..._abstractMapStateToProps(state),
         _labelKey: translationKeys.labelKey,
         _tooltipKey: translationKeys.tooltipKey,
         _videoTrack: videoTrackOnLargeVideo

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

@@ -0,0 +1,16 @@
+// @flow
+
+import { ColorPalette, createStyleSheet } from '../../base/styles';
+
+/**
+ * The styles of the React {@code Components} of the feature video-quality.
+ */
+export default createStyleSheet({
+
+    /**
+     * Style for the audio-only indicator.
+     */
+    indicatorAudioOnly: {
+        backgroundColor: ColorPalette.green
+    }
+});