feat(native-participants-pane) rendered participant name

react/features/participants-pane/components/native/LobbyParticipantItem.js

@@ -29,6 +29,7 @@ export const LobbyParticipantItem = ({ participant: p }: Props) => {
     return (
         <ParticipantItem
             audioMuteState = { MediaState.Muted }
+            name = { p.name }
             participant = { p }
             videoMuteState = { MediaState.ForceMuted }>
             <View style = { styles.lobbyParticipantItem }>

react/features/participants-pane/components/native/MeetingParticipantItem.js

@@ -20,14 +20,15 @@ type Props = {
     participant: Object
 };
 
-export const MeetingParticipantItem = ({ participant }: Props) => {
-    const isAudioMuted = useSelector(getIsParticipantAudioMuted(participant));
-    const isVideoMuted = useSelector(getIsParticipantVideoMuted(participant));
+export const MeetingParticipantItem = ({ participant: p }: Props) => {
+    const isAudioMuted = useSelector(getIsParticipantAudioMuted(p));
+    const isVideoMuted = useSelector(getIsParticipantVideoMuted(p));
 
     return (
         <ParticipantItem
             audioMuteState = { isAudioMuted ? MediaState.Muted : MediaState.Unmuted }
-            participant = { participant }
+            name = { p.name }
+            participant = { p }
             videoMuteState = { isVideoMuted ? MediaState.Muted : MediaState.Unmuted } />
     );
 };

react/features/participants-pane/components/native/ParticipantItem.js

@@ -30,6 +30,11 @@ type Props = {
      */
     children?: Node,
 
+    /**
+     * The name of the participant. Used for showing lobby names.
+     */
+    name?: string,
+
     /**
      * Callback for when the mouse leaves this component
      */
@@ -52,13 +57,14 @@ type Props = {
  * @returns {React$Element<any>}
  */
 function ParticipantItem({
-    children,
     audioMuteState = MediaState.None,
-    videoMuteState = MediaState.None,
-    participant: p
+    children,
+    name,
+    participant: p,
+    videoMuteState = MediaState.None
 }: Props) {
+    const displayName = name || useSelector(getParticipantDisplayNameWithId(p.id));
     const { t } = useTranslation();
-    const name = useSelector(getParticipantDisplayNameWithId(p.id));
 
     return (
         <View style = { styles.participantContainer } >
@@ -69,7 +75,7 @@ function ParticipantItem({
             <View style = { styles.participantContent }>
                 <View style = { styles.participantNameContainer }>
                     <Text style = { styles.participantName }>
-                        { name }
+                        { displayName }
                     </Text>
                     { p.local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
                 </View>

react/features/participants-pane/components/native/styles.js

@@ -12,8 +12,8 @@ const participantState = {
  * The style for participant list.
  */
 const participantList = {
-    marginLeft: BaseTheme.spacing[4],
-    marginRight: BaseTheme.spacing[4],
+    marginLeft: BaseTheme.spacing[3],
+    marginRight: BaseTheme.spacing[3],
     position: 'relative'
 };
 
@@ -205,8 +205,7 @@ export default {
     },
 
     lobbyListActions: {
-        flexDirection: 'row',
-        right: BaseTheme.spacing[2]
+        flexDirection: 'row'
     },
 
     header: {