From 763d975445ae996815a53b69860e4258800f5584 Mon Sep 17 00:00:00 2001
From: Robert Pintilii <robert.pin9@gmail.com>
Date: Wed, 24 Nov 2021 09:46:01 +0200
Subject: [PATCH] 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
---
 .../components/native/MeetingParticipantItem.js |  7 ++++++-
 .../components/native/ParticipantItem.js        | 16 ++++++++++------
 .../components/native/styles.js                 | 17 ++++++++---------
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/react/features/participants-pane/components/native/MeetingParticipantItem.js b/react/features/participants-pane/components/native/MeetingParticipantItem.js
index 3bcc13e62..d100b03ad 100644
--- a/react/features/participants-pane/components/native/MeetingParticipantItem.js
+++ b/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
     };
 }
diff --git a/react/features/participants-pane/components/native/ParticipantItem.js b/react/features/participants-pane/components/native/ParticipantItem.js
index cb954238a..62f14cae2 100644
--- a/react/features/participants-pane/components/native/ParticipantItem.js
+++ b/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>
diff --git a/react/features/participants-pane/components/native/styles.js b/react/features/participants-pane/components/native/styles.js
index f1eb72e55..83db857c4 100644
--- a/react/features/participants-pane/components/native/styles.js
+++ b/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: {