fix(thumbnails, rn) Hide empty indicators container on native (#11019)

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

@@ -69,12 +69,12 @@ class DisplayNameLabel extends Component<Props> {
  * }}
  */
 function _mapStateToProps(state: Object, ownProps: Props) {
-    const { participantId } = ownProps;
+    const { participantId, contained } = ownProps;
     const participant = getParticipantById(state, participantId);
 
     return {
         _participantName: getParticipantDisplayName(state, participantId),
-        _render: participant && !participant?.local && !participant?.isFakeParticipant
+        _render: participant && (!participant?.local || contained) && !participant?.isFakeParticipant
     };
 }
 

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

@@ -12,8 +12,8 @@ export default {
     },
 
     displayNamePadding: {
-        paddingHorizontal: BaseTheme.spacing[2],
+        padding: BaseTheme.spacing[1],
-        paddingVertical: BaseTheme.spacing[1]
+        paddingRight: 6
     },
 
     displayNameText: {

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

@@ -224,8 +224,10 @@ class Thumbnail extends PureComponent<Props> {
             indicators.push(<Container
                 key = 'bottom-indicators'
                 style = { styles.thumbnailIndicatorContainer }>
-                { audioMuted && <AudioMutedIndicator /> }
+                <Container style = { (audioMuted || renderModeratorIndicator) && styles.bottomIndicatorsContainer }>
-                { renderModeratorIndicator && <ModeratorIndicator />}
+                    { audioMuted && <AudioMutedIndicator /> }
+                    { renderModeratorIndicator && <ModeratorIndicator />}
+                </Container>
                 {
                     renderDisplayName && <DisplayNameLabel
                         contained = { true }

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

@@ -134,7 +134,13 @@ export default {
         position: 'absolute',
         maxWidth: '95%',
         overflow: 'hidden',
-        ...indicatorContainer
+        ...indicatorContainer,
+        padding: 0
+    },
+
+    bottomIndicatorsContainer: {
+        padding: 2,
+        flexDirection: 'row'
     },
 
     thumbnailTopIndicatorContainer: {