[RN] Add indicator container

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

@@ -10,7 +10,6 @@ import { appNavigate } from '../../app';
 import { connect, disconnect } from '../../base/connection';
 import { DialogContainer } from '../../base/dialog';
 import { CalleeInfoContainer } from '../../base/jwt';
-import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet';
 import { getParticipantCount } from '../../base/participants';
 import { Container, LoadingIndicator, TintedView } from '../../base/react';
 import { TestConnectionInfo } from '../../base/testing';
@@ -18,10 +17,9 @@ import { createDesiredLocalTracks } from '../../base/tracks';
 import { ConferenceNotification } from '../../calendar-sync';
 import { Filmstrip } from '../../filmstrip';
 import { LargeVideo } from '../../large-video';
-import { RecordingLabel } from '../../recording';
 import { setToolboxVisible, Toolbox } from '../../toolbox';
-import { VideoQualityLabel } from '../../video-quality';
 
+import ConferenceIndicators from './ConferenceIndicators';
 import styles from './styles';
 
 /**
@@ -249,13 +247,11 @@ class Conference extends Component<Props> {
                       */}
                     <Filmstrip />
 
-                    <View style = { styles.indicatorContainer }>
-                        <RecordingLabel
-                            mode = { JitsiRecordingConstants.mode.FILE } />
-                        <RecordingLabel
-                            mode = { JitsiRecordingConstants.mode.STREAM } />
-                        <VideoQualityLabel />
-                    </View>
+                    {/*
+                      * A container that automatically renders indicators such
+                      * as VideoQualityLabel or RecordingLabel if need be.
+                      */}
+                    <ConferenceIndicators />
                 </View>
                 <TestConnectionInfo />
 

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

@@ -0,0 +1,81 @@
+// @flow
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { connect } from 'react-redux';
+
+import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet';
+import {
+    isNarrowAspectRatio,
+    makeAspectRatioAware
+} from '../../base/responsive-ui';
+import { RecordingLabel } from '../../recording';
+import { VideoQualityLabel } from '../../video-quality';
+
+import styles from './styles';
+
+type Props = {
+
+    /**
+     * The indicator which determines whether the filmstrip is visible.
+     */
+    _filmstripVisible: boolean
+};
+
+/**
+ * A container that renders the conference indicators, if any.
+ */
+class ConferenceIndicators extends Component<Props> {
+    /**
+     * Implements React {@code Component}'s render.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const _wide = !isNarrowAspectRatio(this);
+        const { _filmstripVisible } = this.props;
+
+        return (
+            <View
+                style = { [
+                    styles.indicatorContainer,
+                    _wide && _filmstripVisible && styles.indicatorContainerWide
+                ] }>
+                <RecordingLabel
+                    mode = { JitsiRecordingConstants.mode.FILE } />
+                <RecordingLabel
+                    mode = { JitsiRecordingConstants.mode.STREAM } />
+                <VideoQualityLabel />
+            </View>
+        );
+    }
+
+}
+
+/**
+ * Maps (parts of) the redux state to the associated
+ * {@code ConferenceIndicators}'s props.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {{
+ *     _filmstripVisible: boolean
+ * }}
+ */
+function _mapStateToProps(state) {
+    const { length: participantCount } = state['features/base/participants'];
+    const { visible } = state['features/filmstrip'];
+
+    return {
+        /**
+         * The indicator which determines whether the filmstrip is visible.
+         *
+         * @private
+         * @type {boolean}
+         */
+        _filmstripVisible: visible && participantCount > 1
+    };
+}
+
+export default connect(_mapStateToProps)(
+    makeAspectRatioAware(ConferenceIndicators)
+);

react/features/conference/components/styles.js

@@ -30,6 +30,13 @@ export default createStyleSheet({
         top: 0
     },
 
+    /**
+     * Indicator container for wide aspect ratio.
+     */
+    indicatorContainerWide: {
+        right: 80
+    },
+
     /**
      * The style of the {@link View} which expands over the whole
      * {@link Conference} area and splits it between the {@link Filmstrip} and