Move Labels to Conference

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

@@ -28,6 +28,7 @@ import { setToolboxVisible, Toolbox } from '../../../toolbox';
 import { shouldDisplayTileView } from '../../../video-layout';
 
 import DisplayNameLabel from './DisplayNameLabel';
+import Labels from './Labels';
 import styles from './styles';
 
 /**
@@ -282,6 +283,8 @@ class Conference extends Component<Props> {
                     pointerEvents = 'box-none'
                     style = { styles.toolboxAndFilmstripContainer }>
 
+                    <Labels />
+
                     <Captions onPress = { this._onClick } />
 
                     <DisplayNameLabel />

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

@@ -4,21 +4,21 @@ import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { connect } from 'react-redux';
 
-import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet';
-import {
-    RecordingExpandedLabel
-} from '../../recording';
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
 import {
     isNarrowAspectRatio,
     makeAspectRatioAware
-} from '../../base/responsive-ui';
-import { TranscribingExpandedLabel } from '../../transcribing';
-import { VideoQualityExpandedLabel } from '../../video-quality';
+} from '../../../base/responsive-ui';
+import {
+    RecordingExpandedLabel
+} from '../../../recording';
+import { TranscribingExpandedLabel } from '../../../transcribing';
+import { VideoQualityExpandedLabel } from '../../../video-quality';
 
 import AbstractLabels, {
     _abstractMapStateToProps,
     type Props as AbstractLabelsProps
-} from './AbstractLabels';
+} from '../AbstractLabels';
 import styles from './styles';
 
 /**

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

@@ -5,6 +5,8 @@ import {
     fixAndroidViewClipping
 } from '../../../base/styles';
 
+import { FILMSTRIP_SIZE } from '../../../filmstrip';
+
 /**
  * The styles of the feature conference.
  */
@@ -32,6 +34,30 @@ export default createStyleSheet({
         fontSize: 14
     },
 
+    /**
+     * View that contains the indicators.
+     */
+    indicatorContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        margin: BoxModel.margin
+    },
+
+    /**
+     * Indicator container for wide aspect ratio.
+     */
+    indicatorContainerWide: {
+        marginRight: FILMSTRIP_SIZE + BoxModel.margin
+    },
+
+    labelWrapper: {
+        flexDirection: 'column',
+        position: 'absolute',
+        right: 0,
+        top: 0
+    },
+
     /**
      * The style of the {@link View} which expands over the whole
      * {@link Conference} area and splits it between the {@link Filmstrip} and

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

@@ -29,6 +29,7 @@ import {
 
 import { maybeShowSuboptimalExperienceNotification } from '../../functions';
 
+import Labels from './Labels';
 import { default as Notice } from './Notice';
 
 declare var APP: Object;
@@ -217,8 +218,9 @@ class Conference extends Component<Props> {
                 onMouseMove = { this._onShowToolbar }>
                 <Notice />
                 <div id = 'videospace'>
-                    <LargeVideo
-                        hideVideoQualityLabel = { hideVideoQualityLabel } />
+                    <LargeVideo />
+                    { hideVideoQualityLabel
+                        || <Labels /> }
                     <Filmstrip filmstripOnly = { filmstripOnly } />
                 </div>
 

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

@@ -3,12 +3,12 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet';
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
 
 import AbstractLabels, {
     _abstractMapStateToProps as _mapStateToProps,
     type Props
-} from './AbstractLabels';
+} from '../AbstractLabels';
 
 /**
  * The type of the React {@code Component} state of {@link Labels}.

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

@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
 import { ParticipantView } from '../../base/participants';
 import { DimensionsDetector } from '../../base/responsive-ui';
 
-import Labels from './Labels';
 import styles, { AVATAR_SIZE } from './styles';
 
 /**
@@ -130,7 +129,6 @@ class LargeVideo extends Component<Props, State> {
                     useConnectivityInfoLabel = { useConnectivityInfoLabel }
                     zOrder = { 0 }
                     zoomEnabled = { true } />
-                <Labels />
             </DimensionsDetector>
         );
     }

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

@@ -5,28 +5,15 @@ import React, { Component } from 'react';
 import { Watermarks } from '../../base/react';
 import { Captions } from '../../subtitles/';
 
-import Labels from './Labels';
-
 declare var interfaceConfig: Object;
 
-/**
- * The type of the React {@code Component} props of {@link LargeVideo}.
- */
-type Props = {
-
-    /**
-     * True if the {@code VideoQualityLabel} should not be displayed.
-     */
-    hideVideoQualityLabel: boolean
-};
-
 /**
  * Implements a React {@link Component} which represents the large video (a.k.a.
  * the conference participant who is on the local stage) on Web/React.
  *
  * @extends Component
  */
-export default class LargeVideo extends Component<Props> {
+export default class LargeVideo extends Component<{}> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -74,8 +61,6 @@ export default class LargeVideo extends Component<Props> {
                 { interfaceConfig.DISABLE_TRANSCRIPTION_SUBTITLES
                     || <Captions /> }
                 <span id = 'localConnectionMessage' />
-                { this.props.hideVideoQualityLabel
-                    || <Labels /> }
             </div>
         );
     }

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

@@ -1,7 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
-import { FILMSTRIP_SIZE } from '../../filmstrip';
+import { ColorPalette, createStyleSheet } from '../../base/styles';
 
 /**
  * Size for the Avatar.
@@ -10,34 +9,6 @@ export const AVATAR_SIZE = 200;
 
 export default createStyleSheet({
 
-    /**
-     * View that contains the indicators.
-     */
-    indicatorContainer: {
-        flex: 1,
-        flexDirection: 'row',
-        justifyContent: 'flex-end',
-        margin: BoxModel.margin
-    },
-
-    /**
-     * Indicator container for wide aspect ratio.
-     */
-    indicatorContainerWide: {
-        marginRight: FILMSTRIP_SIZE + BoxModel.margin
-    },
-
-    labelWrapper: {
-        flexDirection: 'column',
-        position: 'absolute',
-        right: 0,
-
-        // Both on Android and iOS there is the status bar which may be visible.
-        // On iPhone X there is the notch. In the two cases BoxModel.margin is
-        // not enough.
-        top: BoxModel.margin * 3
-    },
-
     /**
      * Large video container style.
      */