diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx new file mode 100644 index 00000000..2c595802 --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx @@ -0,0 +1,42 @@ +import { Text } from '@/primitives' +import { useTranslation } from 'react-i18next' +import { useParticipantInfo } from '@livekit/components-react' +import { Participant } from 'livekit-client' + +export const ParticipantName = ({ + participant, + isScreenShare = false, +}: { + participant: Participant + isScreenShare: boolean +}) => { + const { t } = useTranslation('rooms', { keyPrefix: 'participantTile' }) + + const { identity, name } = useParticipantInfo({ participant }) + const displayedName = name != '' ? name : identity + + if (isScreenShare) { + return ( + + {t('screenShare', { name: displayedName })} + + ) + } + + return ( + + {displayedName} + + ) +} diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx index 4fbfce9c..4e5947e2 100644 --- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx +++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx @@ -2,7 +2,6 @@ import { AudioTrack, ConnectionQualityIndicator, LockLockedIcon, - ParticipantName, ParticipantTileProps, ScreenShareIcon, useEnsureTrackRef, @@ -29,6 +28,7 @@ import { MutedMicIndicator } from './MutedMicIndicator' import { ParticipantPlaceholder } from './ParticipantPlaceholder' import { ParticipantTileFocus } from './ParticipantTileFocus' import { FullScreenShareWarning } from './FullScreenShareWarning' +import { ParticipantName } from './ParticipantName' export function TrackRefContextIfNeeded( props: React.PropsWithChildren<{ @@ -97,6 +97,8 @@ export const ParticipantTile: ( participant: trackReference.participant, }) + const isScreenShare = trackReference.source != Track.Source.Camera + return (
@@ -129,45 +131,50 @@ export const ParticipantTile: ( {!disableMetadata && (
- + {!isScreenShare && ( + + )}
- {trackReference.source === Track.Source.Camera ? ( - <> - {isHandRaised && ( - - )} - {isEncrypted && ( - - )} - - - ) : ( - <> - - 's screen - + {isHandRaised && !isScreenShare && ( + )} + {isScreenShare && ( + + )} + {isEncrypted && !isScreenShare && ( + + )} +
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 3cff09c6..5c635806 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -363,5 +363,8 @@ "message": "", "stop": "", "ignore": "" + }, + "participantTile": { + "screenShare": "" } } diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 0e35f5af..d9fe4942 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -364,5 +364,8 @@ "message": "To avoid infinite loop display, do not share your entire screen. Instead, share a tab or another window.", "stop": "Stop presenting", "ignore": "Ignore" + }, + "participantTile": { + "screenShare": "{{name}}'s screen" } } diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 645f3d4b..fa7b6693 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -364,5 +364,8 @@ "message": "Pour éviter l'affichage en boucle infinie, ne partagez pas l'intégralité de votre écran. Partagez plutôt un onglet ou une autre fenêtre.", "stop": "Arrêter la présentation", "ignore": "Ignorer" + }, + "participantTile": { + "screenShare": "Écran de {{name}}" } } diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index 9ee85b85..dc44cdae 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -364,5 +364,8 @@ "message": "Om niet oneindige uw scherm in zichzelf te delen, kunt u beter niet het hele scherm delen. Deel in plaats daarvan een tab of een ander venster.", "stop": "Stop met presenteren", "ignore": "Negeren" + }, + "participantTile": { + "screenShare": "{{name}} scherm" } }