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

[jcwhite116]

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.

Expected Behavior

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

Steps To Reproduce

1. Create mushroom media card
2. Select volume buttons to show volume buttons
3. 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!

[piitaya]

Hello ! Can you provide the attributes of your entity? (available in dev tools)

[mechanarchy]

Duplicate of #471, see discussion there:

Hi :slightly_smiling_face: Sonos integration doesn't support VOLUME_STEP feature. That's why the controls are not displayed : https://github.com/home-assistant/core/blob/dev/homeassistant/components/sonos/media_player.py#L225-L241

The code has been updated since that comment was made, the current version is: https://github.com/home-assistant/core/blob/a205ba765641b1552879712b30c42a730db25084/homeassistant/components/sonos/media_player.py#L190-L205

[jcwhite116]

@piitaya

[piitaya]

That's it, sonos media player doesn't support volume step, buttons can not be displayed.

[jcwhite116]

Interesting. Using volume step buttons works on my Sonos speakers on the “Custom:mini-media-player” found here…. https://github.com/kalkih/mini-media-player

Here is a screenshot as well. The volume_stateless is the control that makes the slider into buttons.

I could use this card but I like the mushroom cards better lol.

On Sat, Oct 29, 2022 at 3:14 AM Paul Bottein @.***> wrote:

That's it, sonos media player doesn't support volume step, buttons can not be displayed.

— Reply to this email directly, view it on GitHub https://github.com/piitaya/lovelace-mushroom/issues/782#issuecomment-1295756892, or unsubscribe https://github.com/notifications/unsubscribe-auth/AR3INF6XUKCDDVNUSIWHQ5LWFTFGNANCNFSM6AAAAAARMI5EWI . You are receiving this because you authored the thread.Message ID: @.***>

[mikedrawback]

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.

[mikedrawback]

If I create a universal media player entity that exactly mimics my sonos media player, the mushroom media card correctly shows the volume buttons for the universal media player.

[michigan224]

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?

[justindotcloud]

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.

[jcwhite116]

This is what happens when I copy and paste the code you put above. Do you know why this would occur? @justindotcloud

[justindotcloud]

This is what happens when I copy and paste the code you put above. Do you know why this would occur? @justindotcloud

Do you have the stack-in-card and paper-buttons-row HACS add-ons installed @jcwhite116?

[jcwhite116]

I do and it is still saying "No Card Type Configured"

What type of card should I be pasting the code into? A manual card?

[justindotcloud]

Yes, use a manual card and replace all yaml with the above. On a side note which I forgot to mention. In my example I also use https://github.com/thomasloven/lovelace-card-mod to use CSS styling. It might be this is the one you are missing and throws an error because of that.

[giantorth]

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.

You're missing the first line of type: custom:stack-in-card

[giantorth]

I wanted a card with configurable volume stepping and a mute toggle, so I got a bit fancy. Also includes a fix for 0% volume display. Edit: Display is a little squished on mobile display with the extra button, may require some tweaking.

type: custom:stack-in-card
mode: horizontal
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.kitchen_speaker
        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: left
            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: script.step_volume
                  service_data:
                    step_size: 2
                    direction: down
                    target_player: media_player.kitchen_speaker
              - entity: media_player.kitchen_speaker
                layout: state
                state: >-
                  {{ (state_attr(config.entity, 'volume_level')|float(0) * 100)
                  | round(0) | int(0) }}%
                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: script.step_volume
                  service_data:
                    step_size: 2
                    direction: up
                    target_player: media_player.kitchen_speaker
              - icon: >-
                  {% if state_attr( 'media_player.kitchen_speaker',
                  'is_volume_muted') %}
                    mdi:volume-mute
                  {% else %}
                    mdi:volume-high
                  {% endif %}
                ripple: circle
                tap_action:
                  action: call-service
                  service: script.toggle_mute
                  service_data:
                    target_player: media_player.kitchen_speaker

I use the following scripts to get around template limitations in the tap_action:

alias: Step the volume of a media player
mode: parallel
fields:
  target_player:
    name: Target media player
    description: Target media player of volume fade.
    required: true
    example: media_player.lounge_sonos
    selector:
      entity:
        domain: media_player
  step_size:
    name: Step size
    description: How much % to step the volume
    required: true
    default: 2
    example: "2"
    selector:
      number:
        max: 100
        min: 1
        step: 1
        mode: slider
  direction:
    name: Step direction
    description: Direction to step volume
    required: true
    default: up
    example: up
    selector:
      select:
        options:
          - up
          - down
variables:
  volume_level: "{{ state_attr( target_player ,'volume_level')|float(0)}}"
  step_number: >-
    {{ iif( direction == "down", (step_size | float(0) / 100 * -1), (step_size |
    float(0) / 100) ) }}
  step_to: |-
    {% if( volume_level + step_number ) > 1 %}
     1
    {% elif( volume_level + step_number ) < 0 %}
     0 
    {% else %}
      {{ volume_level + step_number }}
    {% endif %}
sequence:
  - service: media_player.volume_set
    data_template:
      entity_id: "{{ target_player }}"
      volume_level: "{{ step_to }}"
icon: mdi:tune-vertical
max: 10

And a script for toggling mute:

alias: Toggle mute of a media player
mode: parallel
fields:
  target_player:
    name: Target media player
    description: Target media player
    required: true
    example: media_player.speaker
    selector:
      entity:
        domain: media_player
sequence:
  - choose:
      - conditions:
          - condition: template
            value_template: "{{ ( state_attr( target_player, 'is_volume_muted') ) is false }}"
        sequence:
          - service: media_player.volume_mute
            data_template:
              entity_id: "{{ target_player }}"
            data:
              is_volume_muted: true
    default:
      - service: media_player.volume_mute
        data_template:
          entity_id: "{{ target_player }}"
        data:
          is_volume_muted: false
max: 10
icon: mdi:volume-mute