Dashboard: Sonos card

Share your Projects! Dashboards & Frontend
800

Hi, does anyone know what I am doing wrong, I am trying to hide some items from the browse media. I can’t see what I am doing wrong.

type: horizontal-stack
cards:
  - type: custom:sonos-card
    sections:
      - player
      - volumes
      - groups
      - grouping
      - media browser
    title: Office Sonos
    entityId: media_player.unnamed_room
    excludeItemsInEntitiesList: true
    customSources:
      media_player.lounge:
        - title: TV
          thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png
    mediaBrowserTitlesToIgnore:
      - My media
      - Camera
801

Hi!

I‘ve just started with HA. I have installed this very nice Sonos-card.

Now wanted to include the Sonos-icons… Followed the instruction and installed the „custom-brand-icons“. I am able to use these in a normal „entity-card“ but somehow do no manage to implement these into the Sonos-card…

Can someone just show Code-snippet so I see how to proceed? That would be great and very much appreciated.

Thanks!

802

Just add the icon to the entity in the home assistant settings. No code needed.

803

Aaah… sometimes thinking too complicated! Thanks, got it!

1 Like
804

For some reasons, nothing is displayed in media browser (there is no favorites showing up). When I can click on “browse media” and I can browse media appears. The pop-up works fine but after I close it nothing happens ie: media browser is still empty.

I definitely have something setup in my favorites in Sonos

image

I’m wondering if this is a Sonos integration issue. If I go to browse media, then select Sonos, it’s showing “no items”

image

Any advise/idea from anyone?

805

Have you added favorites inside the Sonos app on your phone?

1 Like
806

Yes, that is unfortunately not possible to ignore. You can only ignore favorites in the card directly. Nothing in the media browser popup can be configured, since that is controlled by home assistant, and not this card.

I’ve released v7.0.1 with a rename of the config field from mediaBrowserTitlesToIgnore to favoritesToIgnore.

PunxaPhil
image

807

For me I keep this:

Screenshot_20240218_172442_Home Assistant
Screenshot_20240218_172442_Home Assistant1080×2316 145 KB

808

That’s a mistake, thanks for reporting. I have fixed it now.

809

I love v7!! Thanks, coffe has been bought (a while ago)

1 Like
810

I have 3 sensors showing in my media player list. They are actually sensors I created from templates and not media players. How do I get this out of the list?

image
image851×846 23.6 KB

Here’s my card view code:

views:
  - title: Sonos Controller
    icon: mdi:speaker
    type: panel
    theme: rounded
    cards:
      - type: custom:sonos-card
        widthPercentage: 150
        heightPercentage: 150
        entityId: media_player.living_room
        mediaBrowserItemsPerRow: 1
        labelWhenNoMediaIsSelected: No media selected
        labelForTheAllVolumesSlider: All volumes
        mediaArtworkOverrides:
          - mediaTitleEquals: TV
            imageUrl: https://cdn-icons-png.flaticon.com/512/716/716429.png
            sizePercentage: 40
          - mediaContentIdEquals: x-sonos-htastream:RINCON_949F3EC2E15B01400:spdif
            imageUrl: https://cdn-icons-png.flaticon.com/512/4108/4108783.png
          - ifMissing: true
            imageUrl: https://cdn-icons-png.flaticon.com/512/651/651758.png
        customSources:
          media_player.bedroom:
            - title: TV
              thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png
          media_player.front_room:
            - title: TV
              thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png
          media_player.living_room:
            - title: TV
              thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png
        dynamicVolumeSlider: false
title: Sonos Controller
811 
entities: # Entities are automatically discovered if you don't supply this setting
  - media_player.sonos_kitchen
  - media_player.sonos_hallway
  - media_player.sonos_bedroom
  - media_player.sonos_livingroom

If you want to inverse the selection:

excludeItemsInEntitiesList: true
1 Like
812

Thanks! I saw the discussion on this and going back and forth whether to include all entities or just those in the sonos domain. I guess I didn’t really pay attention to that discussion much as I was still on v6 of the card at that time and didn’t need to specify entities then.

813

You make a good point. I have reverted that behaviour to only show Sonos players (or if the info is not available only show players that support grouping).
It’s included in this release: v7.1.0

(To show all players without regard for platform use showNonSonosPlayers: true.)

2 Likes
814

@PunxsutawneyPhil - your card is amazing. Thank you.
I wanted to create a smaller version, and thought I’d share my two versions. For simplicity I’ll do it in two posts. This one is a pure card-mod on the sonos-card:

Main Screen:

image
image756×1288 107 KB

Favorites:

image
image751×727 91.6 KB

and here’s the full yaml. I’m sure it could be more efficient! let me know thoughts on how to do this better!

  - title: Home
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:sonos-card
            sections:
              - volumes
              - groups
              - grouping
              - media browser
              - player
            widthPercentage: 86
            selectedPlayer: media_player.sonos_basement
            customSources:
              media_player.family_room:
                - title: TV
                  thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png
              media_player.sonos_bedroom:
                - title: TV
                  thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png
            backgroundBehindButtonSections: true
            hideGroupCurrentTrack: true
            showVolumeUpAndDownButtons: true
            card_mod:
              style:
                sonos-volumes$:
                  .: |
                    .row:first-of-type {
                      margin-top: 1rem;
                    }
                    .row {
                      padding-right: 1.5rem;
                      padding-left: 1.5rem;
                    }
                  sonos-volume$:
                    .: |
                      ha-control-slider {
                        --control-slider-thickness: 16px;
                        margin-top: 12px;
                      }
                sonos-player$:
                  .: |
                    div.artwork {       
                      
                      }
                    div.container {
                      
                    }
                  sonos-player-header$:
                    .: |
                      div.entity {
                        font-size: 1.15rem !important;
                      }
                  sonos-player-controls$:
                    .: |
                      .big-icon {
                        border-radius: 50%;
                        margin: 1px,
                        --mdc-icon-button-size: 2.5rem !important;
                        --mdc-icon-size: 2.5rem !important;
                      }
                      .mdc-icon-button {
                        height: 48px !important;
                        --mdc-icon-button-size: 2.5rem !important;
                      }
                      div#mediaControls.main {
                        padding-top: 0px;
                      }
                    sonos-volume$:
                      .: |
                        ha-control-slider {
                          height: 16px;
                        }
                        div.volume {
                          width: 90%;
                          margin: auto;
                          padding-right: 1rem;
                        }
                        .percentage {
                          font-size: x-small !important;
                        }
                        ha-icon-button {
                          --mdc-icon-button-size: 2rem !important;
                          --mdc-icon-size: 1.5rem !important;
                          margin-top: -6.5px;
                          opacity: 75%;
                sonos-media-browser$:
                  .: |
                    sonos-media-browser-header {
                      height: 1.5rem;
                    }
                  sonos-media-browser-icons$:
                    .: |
                      div.icons {
                        margin-bottom: 16px;
                        overflow-y: auto;
                      }
                  sonos-media-browser-header$:
                    .: |
                      .title {
                        font-size: 1.25rem !important;
                        justify-content: left !important;
                        font-weight: 400 !important;
                        }
                      sonos-ha-player {
                        display: flex;
                        align-items: center;
                        justify-content: right;
                        padding-top: 3px;
                      }
                      div.icons {
                        height: 25rem !important;
                      }
                .: |
                  ha-card.type-custom-sonos-card {
                    height: 100% !important;
                    margin: auto;
                  }
                  div.content {
                    background: white;
                    height: 25rem !important;
                    overflow-y: auto !important;
                  }
                  div.volume-slider {
                    color: green !important;
                    --control-slider-thickness: 16px;
                    padding-top: 12px;
                  }
                  sonos-footer {
                    padding-bottom: 0px !important;
                    margin-top: -1rem !important;
                  }
          - type: entities
            entities:
              - entity: media_player.xantech8_z1
                group: true
                hide:
                  controls: true
                  volume_level: false
                type: custom:mini-media-player
              - entity: media_player.xantech8_z2
                group: true
                hide:
                  controls: true
                  volume_level: false
                type: custom:mini-media-player
              - entity: media_player.xantech8_z3
                group: true
                hide:
                  controls: true
                  volume_level: false
                type: custom:mini-media-player
              - entity: media_player.xantech8_z4
                group: true
                hide:
                  controls: true
                  volume_level: false
                type: custom:mini-media-player
              - entity: media_player.xantech8_z5
                group: true
                hide:
                  controls: true
                  volume_level: false
                type: custom:mini-media-player
              - entity: media_player.xantech8_z6
                group: true
                hide:
                  controls: true
                  volume_level: false
                type: custom:mini-media-player
              - entity: media_player.xantech8_z7
                group: true
                hide:
                  controls: true
                  volume_level: false
                type: custom:mini-media-player
              - entity: media_player.xantech8_z8
                group: true
                hide:
                  controls: true
                  volume_level: false
                type: custom:mini-media-player```
815

And here’s version 2. This one, uses a combo of the mini-media-player AND custom:sonos-card.
It’s even tighter and slimmer. Not sure which one I prefer!

Main Screen. mini-media-player on top…and underneath a stripped down sonos-card:

image
image750×568 125 KB

When we click on favorites, I expand the window accordingly:

image
image742×1030 149 KB

So we get kinda the best of both worlds. Favs, Grouping, device volumes are the remit of the sonos card and a tight media player is mini-media-player.

A lot of YAML here, and I know there must be an easier way.

views:
  - title: Home
    cards:
      - type: entities
        entities:
          - type: custom:state-switch
            entity: >-
              {% if is_state_attr('media_player.pioneer_receiver', 'source',
              'Spotify (Network)') %} open {% else %} close {% endif %}
            states:
              open:
                type: entities
                card_mod:
                  style: |
                    .card-content {
                      padding: 0px !important;
                    }
                    :host {
                      color: var(--primary-color);
                      --ha-card-border-width: 0px;
                    }
                entities:
                  - type: custom:mini-media-player
                    entity: media_player.spotify_suresh_kavan
                    group: true
                    artwork: cover
                    hide:
                      power: true
                      volume: false
                      source: true
                    info: short
                    source: icon
                    shortcuts:
                      columns: 8
                      buttons:
                        - name: Coffee House Alt
                          type: playlist
                          id: spotify:user:spotify:playlist:37i9dQZF1EIdB5cMiG2V9Z
                        - name: Release Radar
                          type: playlist
                          id: spotify:user:spotify:playlist:37i9dQZEVXbg1Rq9JGT06Z
                        - name: Discover Weekly
                          type: playlist
                          id: spotify:user:spotify:playlist:37i9dQZEVXcLfFHFjIa3mz
                        - name: Daily Mix 1
                          type: playlist
                          id: spotify:user:spotify:playlist:37i9dQZF1E37VWUN6PIVn6
                    card_mod:
                      style: |
                        div.mmp-player {
                        }
                        div.mmp-player__adds {
                          margin-left: 6px;
                          margin-right: 6px;
                        }
              close:
                type: entities
                card_mod:
                  style: |
                    .card-content {
                      padding: 0px !important;
                    }
                    :host {
                      color: var(--primary-color);
                      --ha-card-border-width: 0px;
                    }
                entities:
                  - type: custom:mini-media-player
                    entity: media_player.basement
                    group: true
                    artwork: cover
                    hide:
                      power: true
                      volume: false
                      source: true
                    info: short
                    source: icon
                    shortcuts:
                      columns: 8
                      buttons:
                        - name: Coffee House Alt
                          type: playlist
                          id: spotify:user:spotify:playlist:37i9dQZF1EIdB5cMiG2V9Z
                        - name: Release Radar
                          type: playlist
                          id: spotify:user:spotify:playlist:37i9dQZEVXbg1Rq9JGT06Z
                        - name: Discover Weekly
                          type: playlist
                          id: spotify:user:spotify:playlist:37i9dQZEVXcLfFHFjIa3mz
                        - name: Daily Mix 1
                          type: playlist
                          id: spotify:user:spotify:playlist:37i9dQZF1E37VWUN6PIVn6
                    card_mod:
                      style: |
                        div.mmp-player {
                        }
                        div.cover {
                        }
                        div.mmp-player__adds {
                          margin-left: 6px;
                          margin-right: 6px;
                        }
                  - entity: media_player.basement
                    type: custom:sonos-card
                    sections:
                      - volumes
                      - groups
                      - grouping
                      - media browser
                      - player
                    mediaBrowserItemsPerRow: 3
                    card_mod:
                      style:
                        sonos-volumes$:
                          .: |
                            .row:first-of-type {
                              margin-top: 1rem;
                            }
                            .row {
                              padding-right: 1.5rem;
                              padding-left: 1.5rem;
                            }
                          sonos-volume$:
                            .: |
                              ha-control-slider {
                                --control-slider-thickness: 16px;
                                margin-top: 12px;
                              }
                        sonos-player$:
                          .: |
                            div.artwork {       
                              
                              }
                            div.container {
                              display: none;
                            }
                        sonos-media-browser$:
                          .: |
                            sonos-media-browser-header {
                              height: 1.5rem;
                            }
                          sonos-media-browser-icons$:
                            .: |
                              div.icons {
                                height: 20rem;
                                overflow-y: auto;
                              }
                          sonos-media-browser-header$:
                            .: |
                              .title {
                                font-size: 1.25rem !important;
                                justify-content: left !important;
                                font-weight: 400 !important;
                                }
                              sonos-ha-player {
                                display: flex;
                                align-items: center;
                                justify-content: right;
                                padding-top: 3px;
                              }
                              div.icons {
                                height: 25rem !important;
                              }
                        .: |
                          ha-card.type-custom-sonos-card {
                            height: 100% !important;
                            margin: auto;
                            border-style: none;
                          }
                          div.content {
                            background: white;
                            height: auto !important;
                            overflow-y: auto !important;
                          }
                          sonos-footer {
                            height: 1.5rem !important;
                            padding-top: 0.5rem !important;
                            padding-bottom: 0.5rem !important;
                            display: flex;
                            align-items: center;
                            --mdc-icon-size: 1.5rem !important;
                          }
          - type: divider
          - entity: media_player.pioneer_receiver
            type: custom:mini-media-player
            name: Pioneer SC-LX704 Receiver
            group: true
            hide:
              play_pause: true
            card_mod:
              style:
                mmp-powerstrip$:
                  .: |
                    mmp-source-menu {
                      font-weight: 400 !important!;
                      max-width: 200px !important;
                    }
                .: |
                  div.mmp-player__adds {
                    margin-left: 6px;
                    margin-right: 6px;
                  }
816

Final thoughts.
Q1 - Which version is better in the communities eyes?
Q2 - Is there any way to display the currently playing playlist (it’s a sonos attribute).
Q3 - How the heck can I tidy up the crazy amount of card-mod stuff!
Q4 - Any other suggestions?

Thanks all.

817

Hay anyone ever successfully used the sonos card within an entity filtering card such as entity filter or custom auto-entities card?
My scenario is: I’m using a wall tablet with WallPanel custom component and I would like to see the sonos player on the screensaver when the state is playing.
However, this does not work with both entity card and auto-entities:

image
image617×720 6.15 KB

When filtering for the contemporary state of the corresponding media_player entity, it looks like above (although the card is working fine outside the filtering card).

Any Idea?
Many thanks in advance!

818

I solved this by using conditional card…

819

Beginners question:
How to realize the cover as background and the controls on top instead of the cover in between?