lovelace-mushroom: [Bug]: Media player card using Sonos entity doesn’t show volume buttons

Current Behavior

When selecting “Show button” to make the volume buttons appear on the media card. The volume buttons do not appear for the Sonos speaker control.

2A3FF683-7646-459B-B88B-4ACA6EC62B38

Expected Behavior

I would like to have volume buttons to control the Sonos speaker volume.

Steps To Reproduce

Create mushroom media card
Select volume buttons to show volume buttons
The volume buttons do not appear for Sonos speakers

Environment

- OS: iPad OS
- Using the Home assistant app
- Hassio: 2022.10.5

Anything else?

Thank you!

About this issue

Original URL
State: open
Created 2 years ago
Comments: 15 (2 by maintainers)

Most upvoted comments

Calling service media_player.volume_up and media_player.volume_down does work on Sonos speakers. I too am wanting to switch from mini-media-player to mushroom media card, but for now I have hacked together my own using stack-in-card and paper-buttons-row.

This looks great for the time being. Care to share the yaml @mikedrawback?

I really liked the idea of @mikedrawback, so I recreated his card solution. If anyone wants something similar, here’s how:

title: Media
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.bedroom
        show_volume_level: false
        use_media_info: false
        fill_container: false
        volume_controls: []
        layout: horizontal
        media_controls: []
        icon_type: icon
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0px;
            }
      - type: entities
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0px;
            }
        entities:
          - type: custom:paper-buttons-row
            preset: mushroom
            styles:
              justify-content: flex-start
            base_config:
              preset: mushroom
            buttons:
              - icon: mdi:volume-minus
                styles:
                  button:
                    border-top-right-radius: 0px
                    border-bottom-right-radius: 0px
                tap_action:
                  action: call-service
                  service: media_player.volume_down
                  service_data: {}
                  target:
                    entity_id: media_player.bedroom
              - entity: media_player.bedroom
                layout: state
                state: >-
                  {{ (state_attr(config.entity, 'volume_level') * 100) |
                  round(0) | int }}%
                styles:
                  button:
                    border-radius: 0px
                    width: 100px
              - icon: mdi:volume-plus
                styles:
                  button:
                    border-top-left-radius: 0px
                    border-bottom-left-radius: 0px
                tap_action:
                  action: call-service
                  service: media_player.volume_up
                  service_data: {}
                  target:
                    entity_id: media_player.bedroom

Hope you can use this @michigan224.

justindotcloud on Mar 14, 2023