From 9deeef6e8de3bfd617bc3ac94f5758aa8c8ea09c Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Thu, 18 Jun 2026 19:23:12 -0400
Subject: [PATCH] fix(pip): correctly identify whose mic is muted in PiP
 overlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously PipMuteOverlay fired on useRemoteAllMuted (any remote
muted) and rendered in the bottom-left corner — the conventional
position for local-user mic status — causing users to think their
own mic was muted when it wasn't.

Fix: split into two distinct indicators
- Bottom-left: local mic muted only (from useCallControlState),
  labelled "You" so attribution is unambiguous
- Top-right: "All muted" warning (warning color, not critical) when
  all remote participants are muted

UNTESTED — verify in a real call at chat.lotusguild.org.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 LOTUS_BUGS.md                            | 13 ++++
 src/app/components/CallEmbedProvider.tsx | 79 ++++++++++++++++--------
 2 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/LOTUS_BUGS.md b/LOTUS_BUGS.md
index 86df42840..831661f1c 100644
--- a/LOTUS_BUGS.md
+++ b/LOTUS_BUGS.md
@@ -8,6 +8,19 @@ This document tracks identified bugs, edge cases, and architectural discrepancie
 
 ## 🚩 Critical & UI Bugs
 
+### 12. PiP Mute Icon Misidentifies Whose Mic Is Muted
+
+- **File:** `cinny/src/app/components/CallEmbedProvider.tsx`
+- **Status:** **FIXED ⚠️ UNTESTED** — needs verification in a live call with at least one other participant who mutes/unmutes
+- **Issue:** The muted-mic badge in the Picture-in-Picture window used `useRemoteAllMuted` (fires when ANY remote participant is muted) and rendered in the bottom-left corner — the conventional position for "YOUR" mic status. Users read it as their own mic being muted.
+- **Root Cause:** `PipMuteOverlay` was triggering on remote-mute events while displaying in a position that implies local-user status.
+- **Fix Applied:**
+  - **Bottom-left badge** now shows only when the LOCAL user's mic is muted (checked via `!controlState.microphone` from `useCallControlState`). Includes "You" label to make it unambiguous. Uses `color.Critical.Main`.
+  - **Top-right badge** (new) shows "All muted" in `color.Warning.Main` when all remote participants are muted — positioned and labeled so it's clearly about other people, not the local user.
+  - Both badges use `aria-label` / `title` for accessibility.
+
+---
+
 ### 1. No Camera Focus During Screenshare
 
 - **File:** `cinny/src/app/features/call/CallControls.tsx`
diff --git a/src/app/components/CallEmbedProvider.tsx b/src/app/components/CallEmbedProvider.tsx
index 058a991c5..fe11822ac 100644
--- a/src/app/components/CallEmbedProvider.tsx
+++ b/src/app/components/CallEmbedProvider.tsx
@@ -419,34 +419,61 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
   return null;
 }
 
-/** Shown inside the PiP window when the local microphone is muted. */
+/**
+ * PiP status indicators:
+ * - Bottom-left badge: local mic muted (matches Discord/Slack convention — bottom-left = "your" mic)
+ * - Top-right badge: all remote participants are muted (quiet room warning)
+ *
+ * Deliberately separated so users never mistake remote-mute state for their own.
+ */
 function PipMuteOverlay({ callEmbed }: { callEmbed: CallEmbed }) {
-  const allMuted = useRemoteAllMuted(callEmbed);
-  if (!allMuted) return null;
+  const mx = useMatrixClient();
+  const controlState = useCallControlState(callEmbed.control);
+  const allRemoteMuted = useRemoteAllMuted(callEmbed);
+
+  const localMicMuted = !controlState.microphone;
+  const localUserId = mx.getSafeUserId();
+  const localDisplayName = getMxIdLocalPart(localUserId) ?? localUserId;
+
+  const badgeStyle: React.CSSProperties = {
+    position: 'absolute',
+    zIndex: 3,
+    background: 'rgba(0,0,0,0.65)',
+    backdropFilter: 'blur(4px)',
+    borderRadius: '6px',
+    padding: '3px 7px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    pointerEvents: 'none',
+    fontSize: '12px',
+    lineHeight: 1,
+    userSelect: 'none',
+  };
+
   return (
-    <div
-      aria-label="Microphone muted"
-      style={{
-        position: 'absolute',
-        bottom: '8px',
-        left: '8px',
-        zIndex: 3,
-        background: 'rgba(0,0,0,0.60)',
-        backdropFilter: 'blur(4px)',
-        borderRadius: '6px',
-        padding: '3px 7px',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '4px',
-        pointerEvents: 'none',
-        color: color.Critical.Main,
-        fontSize: '13px',
-        lineHeight: 1,
-        userSelect: 'none',
-      }}
-    >
-      <Icon size="100" src={Icons.MicMute} filled />
-    </div>
+    <>
+      {localMicMuted && (
+        <div
+          aria-label={`Your microphone is muted (${localDisplayName})`}
+          title={`Your microphone is muted`}
+          style={{ ...badgeStyle, bottom: '8px', left: '8px', color: color.Critical.Main }}
+        >
+          <Icon size="100" src={Icons.MicMute} filled />
+          <span style={{ fontSize: '11px', fontWeight: 600 }}>You</span>
+        </div>
+      )}
+      {allRemoteMuted && (
+        <div
+          aria-label="All other participants are muted"
+          title="All other participants are muted"
+          style={{ ...badgeStyle, top: '8px', right: '8px', color: color.Warning.Main }}
+        >
+          <Icon size="50" src={Icons.MicMute} />
+          <span style={{ fontSize: '11px' }}>All muted</span>
+        </div>
+      )}
+    </>
   );
 }