feat(UserVolume): tap-to-mute, mute overlay, and overlapping avatar display

GrantAbell · GrantAbell · commit f6673f6c1ce6 · 2026-04-04T00:32:35.000-04:00
- Tap touchbar to toggle mute on the displayed user (self-mute uses
  mic mute; other users use local per-user mute)
- Mute state shown as dimmed overlay with red slash on avatar
- Both UserVolume and ChangeVoiceChannel now render avatars in an
  overlapping stack instead of a grid, with the active user (selected
  or speaking) moved to the centre front
- Detect current voice channel on startup so actions reflect state
  when StreamController launches mid-session
- Expose current user avatar hash from backend auth response so self
  avatars render correctly for users with profile pictures
diff --git a/actions/ChangeVoiceChannel.py b/actions/ChangeVoiceChannel.py
@@ -13,6 +13,7 @@
     make_circle_avatar,
     draw_speaking_ring,
     make_placeholder_avatar,
+    compose_overlapping_avatars,
 )
 from src.backend.PluginManager.EventAssigner import EventAssigner
 from src.backend.PluginManager.InputBases import Input
@@ -105,34 +106,15 @@ def _draw_speaking_ring(img: Image.Image, size: int) -> Image.Image:
 
 
 def _compose_avatars(avatars: list[tuple[Image.Image, bool]]) -> Image.Image:
-    """Compose up to 4 avatar images (with optional speaking ring) onto a button canvas.
-
-    *avatars* is a list of ``(image, is_speaking)`` tuples.
-    """
-    canvas = Image.new("RGBA", (BUTTON_SIZE, BUTTON_SIZE), (0, 0, 0, 255))
-    n = min(len(avatars), 4)
-    if n == 0:
-        return canvas
-
-    # Determine grid: 1→full, 2→side-by-side, 3-4→2×2
-    if n == 1:
-        size = BUTTON_SIZE
-        positions = [(0, 0)]
-    elif n == 2:
-        size = BUTTON_SIZE // 2
-        positions = [(0, size // 2), (size, size // 2)]  # centred vertically
-    else:
-        size = BUTTON_SIZE // 2
-        positions = [(0, 0), (size, 0), (0, size), (size, size)]
-
-    for i, (img, speaking) in enumerate(avatars[:n]):
-        avatar = make_circle_avatar(img, size)
+    """Compose avatar images in an overlapping stack, speaking user in front."""
+    # Find the last speaking user to bring to front
+    front = -1
+    avatars_3 = []
+    for i, (img, speaking) in enumerate(avatars):
         if speaking:
-            avatar = draw_speaking_ring(avatar, size)
-        x, y = positions[i]
-        canvas.paste(avatar, (x, y), avatar)
-
-    return canvas
+            front = i
+        avatars_3.append((img, speaking, False))
+    return compose_overlapping_avatars(avatars_3, BUTTON_SIZE, front_index=front)
 
 
 class ChangeVoiceChannel(DiscordCore):
@@ -190,6 +172,11 @@ def on_ready(self):
         # Subscribe to the configured channel and fetch initial state
         self._start_watching_configured_channel()
 
+        # Request current voice channel so _connected_channel_id is set if
+        # we're already in a channel when StreamController starts.
+        if self.backend:
+            self.backend.request_current_voice_channel()
+
 
     def _start_watching_configured_channel(self):
         """Subscribe to voice state events and fetch fresh data for the configured channel.
diff --git a/actions/UserVolume.py b/actions/UserVolume.py
@@ -9,7 +9,9 @@
     BUTTON_SIZE,
     make_circle_avatar,
     draw_speaking_ring,
+    draw_mute_overlay,
     make_placeholder_avatar,
+    compose_overlapping_avatars,
 )
 from src.backend.PluginManager.EventAssigner import EventAssigner
 from src.backend.PluginManager.InputBases import Input
@@ -82,6 +84,18 @@ def on_ready(self):
                 event_id=f"{self.plugin_base.get_plugin_id()}::{GET_CHANNEL}",
                 callback=self._on_get_channel,
                 )
+        self.plugin_base.connect_to_event(
+                event_id=f"{self.plugin_base.get_plugin_id()}::{VOICE_STATE_CREATE}",
+                callback=self._on_voice_state_create,
+                )
+        self.plugin_base.connect_to_event(
+                event_id=f"{self.plugin_base.get_plugin_id()}::{VOICE_STATE_DELETE}",
+                callback=self._on_voice_state_delete,
+                )
+        self.plugin_base.connect_to_event(
+                event_id=f"{self.plugin_base.get_plugin_id()}::{VOICE_STATE_UPDATE}",
+                callback=self._on_voice_state_update,
+                )
         self.plugin_base.connect_to_event(
                 event_id=f"{self.plugin_base.get_plugin_id()}::{SPEAKING_START}",
                 callback=self._on_speaking_start,
@@ -95,7 +109,8 @@ def on_ready(self):
         self._update_display()
 
         # Request current voice channel state (in case we're already in a channel)
-        self.backend.request_current_voice_channel()
+        if self.backend:
+            self.backend.request_current_voice_channel()
 
     def create_event_assigners(self):
         # Dial rotation: adjust volume
@@ -136,6 +151,16 @@ def create_event_assigners(self):
             )
         )
 
+        # Touchscreen tap: toggle mute on current user
+        self.event_manager.add_event_assigner(
+            EventAssigner(
+                id="toggle-mute",
+                ui_label="toggle-mute",
+                default_event=Input.Dial.Events.SHORT_TOUCH_PRESS,
+                callback=self._on_toggle_mute,
+            )
+        )
+
     # === Event Handlers ===
 
     def _on_volume_up(self, _):
@@ -153,6 +178,24 @@ def _on_cycle_user(self, _):
         self._current_user_index = (self._current_user_index + 1) % len(self._users)
         self._update_display()
 
+    def _on_toggle_mute(self, _):
+        """Toggle mute on the currently displayed user."""
+        if not self._users or self._current_user_index >= len(self._users):
+            return
+        user = self._users[self._current_user_index]
+        new_muted = not user.get("muted", False)
+        try:
+            if user.get("is_self"):
+                self.backend.set_mute(new_muted)
+            else:
+                if not self.backend.set_user_mute(user["id"], new_muted):
+                    return
+            user["muted"] = new_muted
+            self._update_display()
+        except Exception as ex:
+            log.error(f"Failed to toggle mute for {user['id']}: {ex}")
+            self.show_error(3)
+
     def _adjust_volume(self, delta: int):
         """Adjust current user's volume by delta."""
         if not self._users or self._current_user_index >= len(self._users):
@@ -221,11 +264,6 @@ def _on_voice_channel_select(self, *args, **kwargs):
                 self._current_channel_id = new_channel_id
                 self._current_channel_name = data.get("name", "Voice")
 
-                # Register frontend callbacks for voice state events
-                self.plugin_base.add_callback(VOICE_STATE_CREATE, self._on_voice_state_create)
-                self.plugin_base.add_callback(VOICE_STATE_DELETE, self._on_voice_state_delete)
-                self.plugin_base.add_callback(VOICE_STATE_UPDATE, self._on_voice_state_update)
-
                 # Subscribe to voice state and speaking events via backend (with channel_id)
                 self.backend.subscribe_voice_states(self._current_channel_id)
                 self.backend.subscribe_speaking(self._current_channel_id)
@@ -272,7 +310,7 @@ def _on_get_channel(self, *args, **kwargs):
                         "nick": vs.get("nick"),
                         "volume": self._self_input_volume,
                         "muted": False,
-                        "avatar_hash": user_data.get("avatar"),
+                        "avatar_hash": user_data.get("avatar") or self.backend.current_user_avatar,
                         "avatar_img": None,
                         "is_self": True,
                     }
@@ -306,8 +344,9 @@ def _on_get_channel(self, *args, **kwargs):
 
         self._update_display()
 
-    def _on_voice_state_create(self, data: dict):
+    def _on_voice_state_create(self, *args, **kwargs):
         """Handle user joining voice channel."""
+        data = args[1] if len(args) > 1 else None
         if not data:
             return
 
@@ -346,8 +385,9 @@ def _on_voice_state_create(self, data: dict):
 
         self._update_display()
 
-    def _on_voice_state_delete(self, data: dict):
+    def _on_voice_state_delete(self, *args, **kwargs):
         """Handle user leaving voice channel."""
+        data = args[1] if len(args) > 1 else None
         if not data:
             return
 
@@ -370,8 +410,9 @@ def _on_voice_state_delete(self, data: dict):
 
         self._update_display()
 
-    def _on_voice_state_update(self, data: dict):
+    def _on_voice_state_update(self, *args, **kwargs):
         """Handle user voice state change (volume, mute, etc)."""
+        data = args[1] if len(args) > 1 else None
         if not data:
             return
 
@@ -385,7 +426,7 @@ def _on_voice_state_update(self, data: dict):
             if user["id"] == user_id:
                 if "volume" in data:
                     user["volume"] = data.get("volume")
-                if "mute" in data:
+                if "mute" in data and not user.get("is_self"):
                     user["muted"] = data.get("mute")
                 if "nick" in data:
                     user["nick"] = data.get("nick")
@@ -470,19 +511,21 @@ def _update_display(self):
             user = self._users[self._current_user_index]
             display_name = user.get("nick") or user.get("username", "Unknown")
             volume = user.get("volume", 100)
-            is_speaking = user["id"] in self._speaking
 
-            # Build avatar image
-            avatar_src = user.get("avatar_img")
-            if avatar_src is not None:
-                avatar = make_circle_avatar(avatar_src, BUTTON_SIZE)
-            else:
-                avatar = make_placeholder_avatar(display_name, user["id"], BUTTON_SIZE)
-                # Kick off a fetch if not already in-flight
-                self._submit_avatar_fetch(user["id"])
-            if is_speaking:
-                avatar = draw_speaking_ring(avatar, BUTTON_SIZE)
-            self.set_media(image=avatar)
+            # Build overlapping avatar stack with selected user in front
+            avatar_list = []
+            for u in self._users:
+                src = u.get("avatar_img")
+                name = u.get("nick") or u.get("username", "?")
+                if src is not None:
+                    img = src
+                else:
+                    img = make_placeholder_avatar(name, u["id"], BUTTON_SIZE)
+                    self._submit_avatar_fetch(u["id"])
+                avatar_list.append((img, u["id"] in self._speaking, u.get("muted", False)))
+            self.set_media(image=compose_overlapping_avatars(
+                avatar_list, BUTTON_SIZE, front_index=self._current_user_index,
+            ))
 
             # Truncate name for label overlay
             display_name = display_name[:10] if len(display_name) > 10 else display_name
diff --git a/actions/avatar_utils.py b/actions/avatar_utils.py
@@ -85,3 +85,113 @@ def draw_speaking_ring(img: Image.Image, size: int) -> Image.Image:
     result = img.copy()
     result.paste(overlay, mask=overlay)
     return result
+
+
+# Mute indicator: semi-transparent dark overlay with a red diagonal slash.
+MUTE_OVERLAY_COLOR = (0, 0, 0, 140)
+MUTE_SLASH_COLOR = (237, 66, 69, 255)  # Discord red
+MUTE_SLASH_WIDTH = 4
+
+
+def draw_mute_overlay(img: Image.Image, size: int) -> Image.Image:
+    """Overlay a mute indicator (dimmed circle + red slash) onto *img*."""
+    overlay = Image.new("RGBA", (size, size), (0, 0, 0, 0))
+    draw = ImageDraw.Draw(overlay)
+    draw.ellipse((0, 0, size - 1, size - 1), fill=MUTE_OVERLAY_COLOR)
+    pad = size // 6
+    draw.line(
+        (pad, pad, size - 1 - pad, size - 1 - pad),
+        fill=MUTE_SLASH_COLOR,
+        width=MUTE_SLASH_WIDTH,
+    )
+    result = img.copy()
+    result.paste(overlay, mask=overlay)
+    return result
+
+
+# Border drawn around each avatar in the overlapping stack so circles
+# are visually distinct against each other.
+_AVATAR_BORDER_COLOR = (0, 0, 0, 255)
+_AVATAR_BORDER_WIDTH = 2
+
+
+def _avatar_with_border(img: Image.Image, size: int) -> Image.Image:
+    """Add a thin black circular border around a circle-clipped avatar."""
+    result = img.copy()
+    draw = ImageDraw.Draw(result)
+    half = _AVATAR_BORDER_WIDTH // 2
+    draw.ellipse(
+        (half, half, size - 1 - half, size - 1 - half),
+        outline=_AVATAR_BORDER_COLOR,
+        width=_AVATAR_BORDER_WIDTH,
+    )
+    return result
+
+
+def compose_overlapping_avatars(
+    avatars: list[tuple[Image.Image, bool, bool]],
+    canvas_size: int,
+    front_index: int = -1,
+) -> Image.Image:
+    """Compose avatars in an overlapping stack, with *front_index* on top.
+
+    *avatars* is a list of ``(image, is_speaking, is_muted)`` tuples.
+    *front_index* is the index of the avatar to place in front.  When -1
+    (the default), no reordering is done and the last avatar is on top.
+    """
+    canvas = Image.new("RGBA", (canvas_size, canvas_size), (0, 0, 0, 255))
+    n = len(avatars)
+    if n == 0:
+        return canvas
+
+    # Single avatar — render full size, centred.
+    if n == 1:
+        img, speaking, muted = avatars[0]
+        av = make_circle_avatar(img, canvas_size)
+        if speaking:
+            av = draw_speaking_ring(av, canvas_size)
+        if muted:
+            av = draw_mute_overlay(av, canvas_size)
+        canvas.paste(av, (0, 0), av)
+        return canvas
+
+    # Avatar diameter: large enough to be readable, small enough to overlap.
+    avatar_size = int(canvas_size * 0.65)
+
+    # Build a display order where the front avatar is placed at the centre
+    # position and the remaining avatars fill the other slots, preserving
+    # their relative order.  The front avatar is painted last (on top).
+    if 0 <= front_index < n:
+        others = [i for i in range(n) if i != front_index]
+        centre = n // 2
+        display_order = others[:centre] + [front_index] + others[centre:]
+    else:
+        display_order = list(range(n))
+
+    # Spread slots horizontally across the canvas with even overlap.
+    total_width = avatar_size + (n - 1) * (avatar_size // 2)
+    x_start = (canvas_size - total_width) // 2
+    y = (canvas_size - avatar_size) // 2
+
+    # Map each original avatar index to the x position of its assigned slot.
+    positions = {}
+    for slot, orig_idx in enumerate(display_order):
+        positions[orig_idx] = x_start + slot * (avatar_size // 2)
+
+    # Paint order: everything except front first, then front on top.
+    paint_order = [i for i in display_order if i != front_index] + (
+        [front_index] if 0 <= front_index < n else []
+    )
+    if not paint_order:
+        paint_order = display_order
+
+    for idx in paint_order:
+        img, speaking, muted = avatars[idx]
+        av = make_circle_avatar(img, avatar_size)
+        if speaking:
+            av = draw_speaking_ring(av, avatar_size)
+        if muted:
+            av = draw_mute_overlay(av, avatar_size)
+        canvas.paste(av, (positions[idx], y), av)
+
+    return canvas
diff --git a/backend.py b/backend.py
@@ -22,6 +22,7 @@ def __init__(self):
         self._is_reconnecting: bool = False
         self._voice_channel_users: dict = {}  # {user_id: {username, nick, volume, muted}}
         self._current_user_id: str = None  # Current user's ID (for filtering)
+        self._current_user_avatar: str = None  # Current user's avatar hash
 
     def discord_callback(self, code, event):
         if code == 0:
@@ -67,15 +68,20 @@ def discord_callback(self, code, event):
                 user = data.get("user", {})
                 self._register_callbacks()
                 self._current_user_id = user.get("id")
+                self._current_user_avatar = user.get("avatar")
                 self._get_current_voice_channel()
             case commands.DISPATCH:
                 evt = event.get("evt")
                 self.frontend.trigger_event(evt, event.get("data"))
             case commands.GET_SELECTED_VOICE_CHANNEL:
-                self._current_voice_channel = (
-                    event.get("data").get("channel_id") if event.get("data") else None
+                data = event.get("data")
+                channel_id = data.get("id") if data else None
+                self._current_voice_channel = channel_id
+                # Normalize to match VOICE_CHANNEL_SELECT dispatch format
+                self.frontend.trigger_event(
+                    commands.VOICE_CHANNEL_SELECT,
+                    {"channel_id": channel_id},
                 )
-                self.frontend.trigger_event(commands.VOICE_CHANNEL_SELECT, event.get("data"))
             case commands.GET_CHANNEL:
                 self.frontend.trigger_event(commands.GET_CHANNEL, event.get("data"))
             case commands.GET_GUILD:
@@ -183,6 +189,10 @@ def current_voice_channel(self):
     def current_user_id(self):
         return self._current_user_id
 
+    @property
+    def current_user_avatar(self):
+        return self._current_user_avatar
+
     def _get_current_voice_channel(self):
         if not self._ensure_connected():
             log.warning(
diff --git a/main.py b/main.py
diff --git a/settings.py b/settings.py
