diff --git a/react/features/base/participants/functions.js b/react/features/base/participants/functions.js index a61cbbb2c..a5ade7154 100644 --- a/react/features/base/participants/functions.js +++ b/react/features/base/participants/functions.js @@ -185,6 +185,17 @@ export function getParticipantDisplayName( : 'Fellow Jitster'; } +/** + * Curried version of getParticipantDisplayName. + * + * @see {@link getParticipantDisplayName} + * @param {string} id - The ID of the participant's display name to retrieve. + * @returns {Function} + */ +export const getParticipantDisplayNameWithId = (id: string) => + (state: Object | Function) => + getParticipantDisplayName(state, id); + /** * Returns the presence status of a participant associated with the passed id. * diff --git a/react/features/participants-pane/components/ParticipantItem.js b/react/features/participants-pane/components/ParticipantItem.js index f65572c1c..8857d87d7 100644 --- a/react/features/participants-pane/components/ParticipantItem.js +++ b/react/features/participants-pane/components/ParticipantItem.js @@ -2,6 +2,7 @@ import React, { type Node } from 'react'; import { useTranslation } from 'react-i18next'; +import { useSelector } from 'react-redux'; import { Avatar } from '../../base/avatar'; import { @@ -11,6 +12,7 @@ import { IconMicrophoneEmpty, IconMicrophoneEmptySlash } from '../../base/icons'; +import { getParticipantDisplayNameWithId } from '../../base/participants'; import { ActionTrigger, MediaState } from '../constants'; import { RaisedHandIndicator } from './RaisedHandIndicator'; @@ -125,6 +127,7 @@ export const ParticipantItem = ({ }: Props) => { const ParticipantActions = Actions[actionsTrigger]; const { t } = useTranslation(); + const name = useSelector(getParticipantDisplayNameWithId(p.id)); return ( - { p.name } + { name } { p.local ?  ({t('chat.you')}) : null }