fix(rn, participants-pane) Show raised hand indicator (#10424)

Make name container limited width and add ellipsis text overflow

Show raise hand status live in participants pane

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

@@ -5,6 +5,7 @@ import React, { PureComponent } from 'react';
 import { translate } from '../../../base/i18n';
 import {
     getLocalParticipant,
+    getParticipantById,
     getParticipantDisplayName,
     hasRaisedHand,
     isParticipantModerator
@@ -178,6 +179,10 @@ function mapStateToProps(state, ownProps): Object {
     const audioMediaState = getParticipantAudioMediaState(participant, _isAudioMuted, state);
     const videoMediaState = getParticipantVideoMediaState(participant, _isVideoMuted, state);
     const { disableModeratorIndicator } = state['features/base/config'];
+    const raisedHand = hasRaisedHand(participant?.local
+        ? participant
+        : getParticipantById(state, participant.id)
+    );
 
     return {
         _audioMediaState: audioMediaState,
@@ -189,7 +194,7 @@ function mapStateToProps(state, ownProps): Object {
         _local: Boolean(participant?.local),
         _localVideoOwner: Boolean(ownerId === localParticipantId),
         _participantID: participant?.id,
-        _raisedHand: hasRaisedHand(participant),
+        _raisedHand: raisedHand,
         _videoMediaState: videoMediaState
     };
 }

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

@@ -101,12 +101,18 @@ function ParticipantItem({
                     displayName = { displayName }
                     participantId = { participantID }
                     size = { 32 } />
-                <View style = { styles.participantDetailsContainer }>
+                <View
+                    style = { [
+                        styles.participantDetailsContainer,
+                        raisedHand && styles.participantDetailsContainerRaisedHand
+                    ] }>
                     <View style = { styles.participantNameContainer }>
-                        <Text style = { styles.participantName }>
+                        <Text
+                            numberOfLines = { 1 }
+                            style = { styles.participantName }>
                             { displayName }
+                            {local && ` (${t('chat.you')})` }
                         </Text>
-                        { local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
                     </View>
                     {isModerator && !disableModeratorIndicator
                         && <Text style = { styles.moderatorLabel }>{t('videothumbnail.moderator')}</Text>
@@ -115,9 +121,7 @@ function ParticipantItem({
                 {
                     !isKnockingParticipant
                     && <>
-                        {
-                            raisedHand && <RaisedHandIndicator />
-                        }
+                        {raisedHand && <RaisedHandIndicator />}
                         <View style = { styles.participantStatesContainer }>
                             <View style = { styles.participantStateVideo }>{VideoStateIcons[videoMediaState]}</View>
                             <View>{AudioStateIcons[audioMediaState]}</View>

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

@@ -140,7 +140,11 @@ export default {
     participantDetailsContainer: {
         display: 'flex',
         flexDirection: 'column',
-        width: '100%'
+        width: '73%'
+    },
+
+    participantDetailsContainerRaisedHand: {
+        width: '65%'
     },
 
     participantNameContainer: {
@@ -163,12 +167,6 @@ export default {
         paddingTop: BaseTheme.spacing[1]
     },
 
-    isLocal: {
-        alignSelf: 'center',
-        color: BaseTheme.palette.text01,
-        marginLeft: BaseTheme.spacing[1]
-    },
-
     participantsPane: {
         backgroundColor: BaseTheme.palette.ui01,
         flex: 1,
@@ -190,8 +188,9 @@ export default {
         backgroundColor: BaseTheme.palette.warning02,
         borderRadius: BaseTheme.shape.borderRadius / 2,
         height: BaseTheme.spacing[4],
-        marginLeft: BaseTheme.spacing[2],
-        width: BaseTheme.spacing[4]
+        width: BaseTheme.spacing[4],
+        marginLeft: 'auto',
+        marginRight: BaseTheme.spacing[2]
     },
 
     raisedHandIcon: {