diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx index e6763e8c..7553e100 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx @@ -7,7 +7,7 @@ import { Avatar } from '@/components/Avatar' import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor' import { Participant, Track } from 'livekit-client' import { isLocal } from '@/utils/livekit' -import { Button } from 'react-aria-components' +import { Button as RACButton } from 'react-aria-components' import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker' import { useIsSpeaking, @@ -16,6 +16,35 @@ import { import Source = Track.Source import { RiMicOffLine } from '@remixicon/react' import { TooltipWrapper } from '@/primitives/TooltipWrapper.tsx' +import { Button, Dialog, P } from '@/primitives' +import { useState } from 'react' + +const MuteAlertDialog = ({ + isOpen, + onClose, + onSubmit, + name, +}: { + isOpen: boolean + onClose: () => void + onSubmit: () => void + name: string +}) => { + const { t } = useTranslation('rooms') + return ( + +

{t('participants.muteParticipantAlert.description', { name })}

+ + + + +
+ ) +} type MicIndicatorProps = { participant: Participant @@ -29,38 +58,51 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => { }) const isSpeaking = useIsSpeaking(participant) const isDisabled = isLocal(participant) || (!isLocal(participant) && isMuted) + + const [isAlertOpen, setIsAlertOpen] = useState(false) + + const name = participant.name || participant.identity + return ( - - - + !isMuted && setIsAlertOpen(true)} + > + {isMuted ? ( + + ) : ( + + )} + + + setIsAlertOpen(false)} + onClose={() => setIsAlertOpen(false)} + name={name} + /> + ) } diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 9f0e8510..766fc3aa 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -51,6 +51,11 @@ "heading": "", "closeButton": "", "you": "", - "muteParticipant": "" + "muteParticipant": "", + "muteParticipantAlert": { + "description": "", + "confirm": "", + "cancel": "" + } } } diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 68358a71..d1f32332 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -51,6 +51,11 @@ "heading": "Participants", "closeButton": "Hide participants", "you": "You", - "muteParticipant": "Close the mic of {{name}}" + "muteParticipant": "Close the mic of {{name}}", + "muteParticipantAlert": { + "description": "Mute {{name}} for all participants? {{name}} is the only person who can unmute themselves.", + "confirm": "Mute", + "cancel": "Cancel" + } } } diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index aec0c7c5..54e6014d 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -51,6 +51,11 @@ "heading": "Participants", "closeButton": "Masquer les participants", "you": "Vous", - "muteParticipant": "Couper le micro de {{name}}" + "muteParticipant": "Couper le micro de {{name}}", + "muteParticipantAlert": { + "description": "Couper le micro de {{name}} pour tous les participants ? {{name}} est la seule personne habilitée à réactiver son micro", + "confirm": "Couper le micro", + "cancel": "Annuler" + } } }