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 (