[RN] Add display name label to tile view

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

@@ -17,7 +17,7 @@ import { TestConnectionInfo } from '../../../base/testing';
 import { createDesiredLocalTracks } from '../../../base/tracks';
 import { ConferenceNotification } from '../../../calendar-sync';
 import { Chat } from '../../../chat';
-import { DisplayNameLabel } from '../../../display-name/components/native';
+import { DisplayNameLabel } from '../../../display-name';
 import {
     FILMSTRIP_SIZE,
     Filmstrip,
@@ -61,6 +61,11 @@ type Props = AbstractProps & {
      */
     _filmstripVisible: boolean,
 
+    /**
+     * The ID of the participant currently on stage (if any)
+     */
+    _largeVideoParticipantId: string,
+
     /**
      * Current conference's full URL.
      *
@@ -236,6 +241,7 @@ class Conference extends AbstractConference<Props, *> {
     render() {
         const {
             _connecting,
+            _largeVideoParticipantId,
             _reducedUI,
             _shouldDisplayTileView
         } = this.props;
@@ -282,7 +288,7 @@ class Conference extends AbstractConference<Props, *> {
 
                     <Captions onPress = { this._onClick } />
 
-                    <DisplayNameLabel />
+                    { _shouldDisplayTileView || <DisplayNameLabel participantId = { _largeVideoParticipantId } /> }
 
                     {/*
                       * The Toolbox is in a stacking layer bellow the Filmstrip.
@@ -497,6 +503,11 @@ function _mapStateToProps(state) {
          */
         _filmstripVisible: isFilmstripVisible(state),
 
+        /**
+         * The ID of the participant currently on stage.
+         */
+        _largeVideoParticipantId: state['features/large-video'].participantId,
+
         /**
          * Current conference's full URL.
          *

react/features/conference/index.js

@@ -1,3 +1,5 @@
+// @flow
+
 export * from './components';
 
 import './middleware';

react/features/display-name/components/native/DisplayNameLabel.js

@@ -9,7 +9,6 @@ import {
     shouldRenderParticipantVideo
 } from '../../../base/participants';
 import { connect } from '../../../base/redux';
-import { shouldDisplayTileView } from '../../../video-layout';
 
 import styles from './styles';
 
@@ -23,7 +22,12 @@ type Props = {
     /**
      * True of the label needs to be rendered. False otherwise.
      */
-    _render: boolean
+    _render: boolean,
+
+    /**
+     * The ID of the participant to render the label for.
+     */
+    participantId: string
 }
 
 /**
@@ -54,23 +58,24 @@ class DisplayNameLabel extends Component<Props> {
  * Maps part of the Redux state to the props of this component.
  *
  * @param {Object} state - The Redux state.
+ * @param {Props} ownProps - The own props of the component.
  * @returns {{
  * }}
  */
-function _mapStateToProps(state: Object) {
-    const largeVideoParticipantId = state['features/large-video'].participantId;
+function _mapStateToProps(state: Object, ownProps: Props) {
+    const { participantId } = ownProps;
     const localParticipant = getLocalParticipant(state);
 
     // Currently we only render the display name if it's not the local
-    // participant, we're not in tile view and there is no video rendered for
-    // the on-stage participant.
-    const _render = localParticipant.id !== largeVideoParticipantId
-        && !shouldDisplayTileView(state)
-        && !shouldRenderParticipantVideo(state, largeVideoParticipantId);
+    // participant and there is no video rendered for
+    // them.
+    const _render = Boolean(participantId)
+        && localParticipant.id !== participantId
+        && !shouldRenderParticipantVideo(state, participantId);
 
     return {
         _participantName:
-            getParticipantDisplayName(state, largeVideoParticipantId),
+            getParticipantDisplayName(state, participantId),
         _render
     };
 }

react/features/display-name/components/web/index.js

@@ -1,4 +1,5 @@
 // @flow
 
 export { default as DisplayName } from './DisplayName';
+export { default as DisplayNameLabel } from './DisplayNameLabel';
 export { default as DisplayNamePrompt } from './DisplayNamePrompt';

react/features/filmstrip/components/_.native.js

@@ -1 +1,3 @@
+// @flow
+
 export * from './native';

react/features/filmstrip/components/_.web.js

@@ -1 +1,3 @@
+// @flow
+
 export * from './web';

react/features/filmstrip/components/index.js

@@ -1 +1,3 @@
+// @flow
+
 export * from './_';

react/features/filmstrip/components/native/Thumbnail.js

@@ -17,7 +17,7 @@ import { Container } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { StyleType } from '../../../base/styles';
 import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
-
+import { DisplayNameLabel } from '../../../display-name';
 import { RemoteVideoMenu } from '../../../remote-video-menu';
 
 import AudioMutedIndicator from './AudioMutedIndicator';
@@ -90,6 +90,11 @@ type Props = {
      */
     participant: Object,
 
+    /**
+     * Whether to display or hide the display name of the participant in the thumbnail.
+     */
+    renderDisplayName: ?boolean,
+
     /**
      * Optional styling to add or override on the Thumbnail component root.
      */
@@ -119,7 +124,8 @@ class Thumbnail extends Component<Props> {
             _videoTrack: videoTrack,
             disablePin,
             disableTint,
-            participant
+            participant,
+            renderDisplayName
         } = this.props;
 
         // We don't render audio in any of the following:
@@ -163,6 +169,8 @@ class Thumbnail extends Component<Props> {
                     tintStyle = { _styles.activeThumbnailTint }
                     zOrder = { 1 } />
 
+                { renderDisplayName && <DisplayNameLabel participantId = { participantId } /> }
+
                 { participant.role === PARTICIPANT_ROLE.MODERATOR
                     && <View style = { styles.moderatorIndicatorContainer }>
                         <ModeratorIndicator />

react/features/filmstrip/components/native/TileView.js

@@ -302,6 +302,7 @@ class TileView extends Component<Props, State> {
                     disableTint = { true }
                     key = { participant.id }
                     participant = { participant }
+                    renderDisplayName = { true }
                     styleOverrides = { styleOverrides } />));
     }
 

react/features/filmstrip/components/native/index.js

@@ -1,3 +1,5 @@
+// @flow
+
 export { default as Filmstrip } from './Filmstrip';
 export { default as TileView } from './TileView';
 export { default as styles } from './styles';

react/features/filmstrip/components/web/index.js

@@ -1,3 +1,5 @@
+// @flow
+
 export { default as AudioMutedIndicator } from './AudioMutedIndicator';
 export { default as DominantSpeakerIndicator }
     from './DominantSpeakerIndicator';