diff --git a/tauri/src/components/ui/call-center.tsx b/tauri/src/components/ui/call-center.tsx index a183328..3de57d0 100644 --- a/tauri/src/components/ui/call-center.tsx +++ b/tauri/src/components/ui/call-center.tsx @@ -89,6 +89,13 @@ export function ConnectedActions() { const callParticipant = teammates?.find((user) => user.id === callTokens?.participant); const [controllerCursorState, setControllerCursorState] = useState(true); const [accessibilityPermission, setAccessibilityPermission] = useState(true); + const remoteParticipants = useRemoteParticipants(); + + // Find the remote audio participant and check if they have microphone enabled + const remoteAudioParticipant = remoteParticipants.find( + (p) => p.identity.includes("audio") && callParticipant && p.identity.includes(callParticipant.id), + ); + const isRemoteMuted = remoteAudioParticipant ? !remoteAudioParticipant.isMicrophoneEnabled : false; useScreenShareListener(); const handleEndCall = useEndCall(); @@ -137,6 +144,7 @@ export function ConnectedActions() { src={callParticipant?.avatar_url || undefined} firstName={callParticipant?.first_name} lastName={callParticipant?.last_name} + isMuted={isRemoteMuted} /> )} diff --git a/tauri/src/components/ui/hopp-avatar.tsx b/tauri/src/components/ui/hopp-avatar.tsx index 8d94f11..0374a2c 100644 --- a/tauri/src/components/ui/hopp-avatar.tsx +++ b/tauri/src/components/ui/hopp-avatar.tsx @@ -1,5 +1,6 @@ import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar"; import { clsx } from "clsx"; +import { LuMicOff } from "react-icons/lu"; type Status = "online" | "offline"; @@ -9,9 +10,10 @@ interface HoppAvatarProps { lastName: string; status?: Status; className?: string; + isMuted?: boolean; } -export const HoppAvatar = ({ src, firstName, lastName, status, className }: HoppAvatarProps) => { +export const HoppAvatar = ({ src, firstName, lastName, status, className, isMuted }: HoppAvatarProps) => { return (
+ {/* Absolute gray blanket for muted indicator */} + {isMuted && ( +
+ {isMuted && } +
+ )} {status && (
{ participantId, user: foundUser, isLocal: participant.isLocal, + isMicrophoneEnabled: participant.isMicrophoneEnabled, }; }); }, [participants, teammates, user]); @@ -597,6 +599,12 @@ const SelectedRoom = ({ room }: { room: Room }) => { {participant.user.first_name} {participant.user.last_name} {participant.isLocal && " (You)"} + {!participant.isMicrophoneEnabled && ( + + + Muted + + )}
: <>