diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts index 73328cfc..1b8f9b27 100644 --- a/src/frontend/panda.config.ts +++ b/src/frontend/panda.config.ts @@ -81,6 +81,11 @@ const config: Config = { '80%': { transform: 'rotate(20deg)' }, '100%': { transform: 'rotate(0)' }, }, + pulse_mic: { + '0%': { color: 'primary', opacity: '1' }, + '50%': { color: 'primary', opacity: '0.8' }, + '100%': { color: 'primary', opacity: '1' }, + }, }, tokens: defineTokens({ /* we take a few things from the panda preset but for now we clear out some stuff. 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 9e2ceace..0d9471fa 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 @@ -13,7 +13,12 @@ import { useTrackMutedIndicator, } from '@livekit/components-react' import Source = Track.Source -import { RiMicOffLine } from '@remixicon/react' +import { + RiMicFill, + RiMicLine, + RiMicOffFill, + RiMicOffLine, +} from '@remixicon/react' import { Button, Dialog, P } from '@/primitives' import { useState } from 'react' import { useMuteParticipant } from '@/features/rooms/livekit/api/muteParticipant' @@ -57,10 +62,7 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => { source: Source.Microphone, }) const isSpeaking = useIsSpeaking(participant) - const isDisabled = isLocal(participant) || (!isLocal(participant) && isMuted) - const [isAlertOpen, setIsAlertOpen] = useState(false) - const name = participant.name || participant.identity return ( @@ -69,16 +71,28 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => { square invisible size="sm" - tooltip={t('participants.muteParticipant', { - name, - })} - isDisabled={isDisabled} - onPress={() => !isMuted && setIsAlertOpen(true)} + tooltip={ + isLocal(participant) + ? t('participants.muteYourself') + : t('participants.muteParticipant', { + name, + }) + } + isDisabled={isMuted} + onPress={() => + !isMuted && isLocal(participant) + ? muteParticipant(participant) + : setIsAlertOpen(true) + } > {isMuted ? ( - + ) : ( - + )} { const { t } = useTranslation('rooms') const name = participant.name || participant.identity - return (