diff --git a/src/frontend/src/features/participantTile/components/ParticipantMetadata.tsx b/src/frontend/src/features/participantTile/components/ParticipantMetadata.tsx
index 48365901..ec2624b3 100644
--- a/src/frontend/src/features/participantTile/components/ParticipantMetadata.tsx
+++ b/src/frontend/src/features/participantTile/components/ParticipantMetadata.tsx
@@ -3,7 +3,6 @@ import {
LockLockedIcon,
ScreenShareIcon,
useIsEncrypted,
- useParticipantInfo,
} from '@livekit/components-react'
import { HStack } from '@/styled-system/jsx'
import { Participant } from 'livekit-client'
@@ -12,13 +11,14 @@ import { ParticipantName } from './ParticipantName'
import { RaisedHandMetadataWrapper } from './RaisedHandMetadataWrapper'
export const ParticipantMetadata = ({
+ displayedName,
participant,
isScreenShare,
}: {
+ displayedName: string
participant: Participant
isScreenShare: boolean
}) => {
- const { identity, name } = useParticipantInfo({ participant })
const isEncrypted = useIsEncrypted(participant)
return (
@@ -42,7 +42,7 @@ export const ParticipantMetadata = ({
)}
diff --git a/src/frontend/src/features/participantTile/components/ParticipantTile.tsx b/src/frontend/src/features/participantTile/components/ParticipantTile.tsx
index c64786b2..ae2f0cd4 100644
--- a/src/frontend/src/features/participantTile/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/participantTile/components/ParticipantTile.tsx
@@ -9,6 +9,7 @@ import {
VideoTrack,
TrackRefContext,
ParticipantContextIfNeeded,
+ useParticipantInfo,
} from '@livekit/components-react'
import {
isEqualTrackRef,
@@ -19,7 +20,6 @@ import { Track } from 'livekit-client'
import { ParticipantPlaceholder } from './ParticipantPlaceholder'
import { ParticipantTileFocus } from './ParticipantTileFocus'
import { FullScreenShareWarning } from './FullScreenShareWarning'
-import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
import { useTranslation } from 'react-i18next'
import { getShortcutDescriptorById } from '@/features/shortcuts/catalog'
import { formatShortcutLabel } from '@/features/shortcuts/formatLabels'
@@ -93,7 +93,11 @@ export const ParticipantTile: (
const participantColor = getParticipantColor(trackReference.participant)
- const participantName = getParticipantName(trackReference.participant)
+ const { identity, name } = useParticipantInfo({
+ participant: trackReference.participant,
+ })
+ const participantName = name || identity || 'Unknown'
+
const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
const interactiveProps = {
@@ -145,14 +149,12 @@ export const ParticipantTile: (
{!disableMetadata && (