haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(native-participants-pane) rendered participant name

This commit is contained in:
Calin Chitu 2021-06-02 18:27:50 +03:00 committed by Hristo Terezov
parent 24550777c6
commit cd05c34d19
4 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
react/features/participants-pane/components/native/LobbyParticipantItem.js
View File

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

9
react/features/participants-pane/components/native/MeetingParticipantItem.js
View File

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

16
react/features/participants-pane/components/native/ParticipantItem.js
View File

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

7
react/features/participants-pane/components/native/styles.js
View File

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