Fix group mute icon and compatibility with protocol-synced players

- Pass isGroupMuted(player) explicitly to getVolumeIconComponent so the
  icon reflects aggregate group mute state correctly
- Pass individual child mute state (!!childPlayer.volume_muted) for
  child player icons instead of computing group state
- Skip members with null volume_muted in isGroupMuted (players that
  don't support mute control)
- Only disable mute button for non-group players when mute_control is
  PLAYER_CONTROL_NONE

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: scyto

src/components/VolumeControl.vue

@@ -45,13 +45,18 @@
           :disabled="
             !player.available ||
             player.powered == false ||
-            player.mute_control == PLAYER_CONTROL_NONE
+            (player.group_members.length === 0 &&
+              player.mute_control == PLAYER_CONTROL_NONE)
           "
           @click.stop="handlePlayerMuteToggle(player)"
         >
           <component
             :is="
-              getVolumeIconComponent(player, mainDisplayVolume)
+              getVolumeIconComponent(
+                player,
+                mainDisplayVolume,
+                isGroupMuted(player),
+              )
             "
             :size="22"
           />
@@ -187,6 +192,7 @@
                   getVolumeIconComponent(
                     childPlayer,
                     childDisplayVolumes[childPlayer.player_id],
+                    !!childPlayer.volume_muted,
                   )
                 "
                 :size="22"

src/layouts/default/PlayerOSD/PlayerControlBtn/VolumeBtn.vue

@@ -111,6 +111,7 @@ import { PlayerFeature } from "@/plugins/api/interfaces";
 import { getBreakpointValue } from "@/plugins/breakpoint";
 import { store } from "@/plugins/store";
 import { getVolumeIconComponent } from "@/helpers/utils";
+import { isGroupMuted } from "@/plugins/api/helpers";
 import { Volume2 } from "lucide-vue-next";
 import { computed, ref } from "vue";
 import PlayerVolume from "../PlayerVolume.vue";
@@ -147,7 +148,7 @@ const displayVolume = ref(
 const volumeIconComponent = computed(() => {
   const player = store.activePlayer;
   if (!player) return Volume2;
-  return getVolumeIconComponent(player, displayVolume.value);
+  return getVolumeIconComponent(player, displayVolume.value, isGroupMuted(player));
 });
 </script>
 

src/plugins/api/helpers.ts

@@ -177,14 +177,19 @@ export const isGroupMuted = function (player: Player): boolean {
   if (!player.group_members.length) {
     return !!player.volume_muted;
   }
-  // For group players, only show muted if ALL members are muted
+  // For group players, only show muted if ALL mute-capable members are muted.
+  // Members with volume_muted == null/undefined don't support mute and are skipped.
+  let hasMuteCapableMembers = false;
   for (const memberId of player.group_members) {
     const member = api?.players[memberId];
-    if (member && member.available && !member.volume_muted) {
+    if (!member || !member.available) continue;
+    if (member.volume_muted == null) continue;
+    hasMuteCapableMembers = true;
+    if (!member.volume_muted) {
       return false;
     }
   }
-  return true;
+  return hasMuteCapableMembers;
 };
 
 export const handlePlayerMuteToggle = function (player: Player) {