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 (