Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
2792

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.

1 Like