I am looking at ways to improve my interface and found this thread. I have sliders that show up depending on whether each Sonos media player is grouped. If grouped, the volume slider is there; if not, it just shows some text. See this thread. I’ve posted some sample YAML below:
For the button, conditional based on join state:
type: vertical-stack
cards:
- type: conditional
conditions:
- entity: binary_sensor.sonos_living_room_joined_kitchen
state: 'on'
card:
type: custom:button-card
aspect_ratio: 2/1
entity: media_player.sonos_living_room
name: Living Room
color_type: card
show_name: true
tap_action:
action: call-service
service: sonos.unjoin
service_data:
entity_id: media_player.sonos_living_room
show_state: false
state:
- value: playing
icon: mdi:speaker-wireless
color: rgba(0,128,0,0.7)
- value: paused
color: rgba(0, 128, 0, .7)
icon: mdi:speaker
- value: idle
color: rgba(0, 200, 0, .7)
icon: mdi:speaker
- value: unavailable
color: rgba(200, 0, 0, .7)
icon: mdi:close-circle-outline
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 2fr 20%
icon:
- color: white
- height: 35px
- padding-top: 5px
card:
- height: 80px
name:
- font-size: 14px
- color: white
- type: conditional
conditions:
- entity: binary_sensor.sonos_living_room_joined_kitchen
state: 'off'
card:
type: custom:button-card
aspect_ratio: 2/1
entity: media_player.sonos_living_room
name: Living Room
color_type: card
show_name: true
tap_action:
action: call-service
service: sonos.join
service_data:
entity_id: media_player.sonos_living_room
master: media_player.sonos_kitchen
show_state: false
state:
- value: idle
color: rgba(169, 169, 169, .7)
icon: mdi:speaker
- value: playing
icon: mdi:speaker-wireless
color: rgba(200, 200, 0, .7)
- value: paused
color: rgba(169, 169, 169, .7)
icon: mdi:speaker
- value: unavailable
color: rgba(200, 0, 0, .7)
icon: mdi:close-circle-outline
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 2fr 20%
icon:
- color: white
- height: 35px
- padding-top: 5px
card:
- height: 80px
name:
- font-size: 14px
- color: white
view_layout:
grid-area: button1
For the slider, based on the same conditions:
type: conditional
conditions:
- entity: binary_sensor.sonos_living_room_joined_kitchen
state: 'on'
card:
hide:
controls: true
source: true
icon: true
power: true
info: true
progress: true
name: true
mute: true
group: true
type: custom:mini-media-player
hide-if-unavailable: true
artwork: none
entity: media_player.sonos_living_room
view_layout:
grid-area: volume1
When pressed, the buttons run a script that either joins or unjoins based on current join state. That changes the state of the condition and the color of the button/visibility of the slider.
EDIT: I’m coming back to this because I changed the way this worked a long time ago, and I no longer use a script. The purpose of the script was to evaluate the grouped state of the speaker before executing a join or unjoin. But since I’m using a conditional to display the button card… I already know whether it’s joined or unjoined, so the script is no longer necessary. The YAML above is correct.