Sonos custom card

Is anyone using the custom-Sonos-card in HACS? I stumbled on it yesterday and am trying to figure out what all the options are. I checked GitHub but the example YAML is not very extensive.

I am not but I am new to HA and I’m just using what was immediately available and works well


but I’m definitely interested in learning about other SONOS cards.

1 Like

I had some trouble getting it to display like others with the same complaint on git but I got it. After dinner, I’ll go back and refine it with all my devices and then actually look at what it can do and report back.

1 Like

I went back and reconfigured it. It was as slow as everyone was saying on git for me. I could tell it was fighting the groupings back and forth and playback was miserable. My experience was laden with issues and I can’t consider this a viable solution for me.

Could you possibly provide some hints on how you got the card to show up? I am still struggling.

Hello, I’d like to introduce you to this forked, working, and actively being improved Sonos Card: Lovelace: Sonos card

If you have questions about THIS card, I’ll be happy to help you out but this is the one we’re all using as of a few weeks ago.

1 Like

Not that this is relavent to any conversation here but trying to learn this stuff is taxing… I realize some of you guys just zip zip and it’s done but I’ve been trying to get this working for 2 days… FINALLY after literally guessing it works.

SO I’m posting what I did so maybe if a new person needs help they have a reference to work from because it works… I also realize that there are a ton of programmers here that right stuff and it makes sense to them but let me tell what a NON programmer that just wants to get something working sees…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed augue lacus viverra vitae congue eu consequat ac.

Yeah makes about that much sense to a new fella or fellet. Compounded by the documentation is usually outdated to start with.

- type: custom:custom-sonos-card        
        shuffleFavorites: false
        
        noMediaText: 'No media selected'
        allVolumesText: 'All volumes'
        entityNameRegexToReplace: 'SONOS ' # Regex pattern to replace parts of the entity names
        entityNameReplacement: ''
        layout:
          mobileThresholdPx: 1000
          groups:
            width: 80%
            mobileWidth: 80%
          players:
            width: 70%
            mobileWidth: 90%
          mediaBrowser:
            width: 100%
            mobileWidth: 70%
          mediaItem:
            width: 20%
            mobileWidth: 50%'
        selectedPlayer: media_player.sonos_five
        backgroundBehindButtonSections: false # default is false, which means no background behind the different button sections
        skipAdditionalPlayerSwitches: false
        styles:
          button-section:
            backgroundColor: lightblue
            border: 1px solid blue
          ha-card:
            padding: 3rem
            background-size: contain
            #background-image: >-
            #  url(/local/images/circle.jpg)
          groups:
            order: 2
          players:
            order: 0
          player-body:
            border: 5px black
          player-song:
            color: '#005cbb'
          font-family: Times New Roman
          font-weight: 900
          mediaBrowser:
            order: 1
          member:
            background: '#005cbb'
            color: yellow
          title:
            fontSize: 30px
            fontWeight: lighter
            textTransform: uppercase
            color: darkblue

Now I realize that there may be some inconsistencies with this and a repeat of un-needed code here and there but it works… and a good starting point for someone who hasn’t got a clue. I literally pasted that together and guessed… but the result is… it’s working.

Hello, I’d like to introduce you to this forked, working, and actively being improved Sonos Card: Lovelace: Sonos card

This OTHER thread has tons of examples and folks willing to help you with the SONOS card. I’m glad you got it working, but a word to the wise: the 2022.5 beta version of HA has introduced breaking changes for this card which will render the display of your card useless. This has been reported and the author is aware. You’ll be fine as long as you don’t download 2022.5 before we get a fix for the card.

You can follow along with the state of that fix in the other thread. If you post questions about sonos in that other thread, you’re very likely to get an engaged response.

That’s pretty much the card I finally got working LOL

Thank you!

Not happy that the backgrounds don’t show up on the Media section… well they do then they don’t…
I think it depends on their mood LOL

My suggestion is that if someone only has 1 entity then the ‘Grouping’ should be an option in the config… a boolean… As you see it just sits there being all ugly LOL

My outcome was basically pasting two existing cards together but it’s working… ugly but working LOL

Now mind you I found a layout that spreads the entire “Media” across the bottom in a horizontal row but never got that working and I have this player on it’s own page so it should have all the space in the world.

They just updated the card to work with 2022.5. Now I can go in and play with it and tell you the settings you need. I have to redo mine because I wiped out my settings when I was troubleshooting why it wasn’t displaying.

Here is my exact card:

type: custom:custom-sonos-card
name: ''
groupsTitle: ''
groupingTitle: ''
favoritesTitle: ''
headerImage: ''
shuffleFavorites: false
noMediaText: No media selected
allVolumesText: All volumes
backgroundBehindButtonSections: true
entityNameRegexToReplace: SONOS
entityNameReplacement: ''
entities:
  - media_player.bedroom_sonos
  - media_player.bedroom_2_sonos
  - media_player.deck_sonos
  - media_player.dining_room_sonos
  - media_player.garage_sonos
  - media_player.living_room_sonos
  - media_player.media_room_sonos
  - media_player.office_sonos
  - media_player.stairway_sonos
layout:
  mobileThresholdPx: 500
  groups:
    width: 15%
    mobileWidth: 100%
  players:
    width: 25%
    mobileWidth: 100%
  favorites:
    width: 60%
    mobileWidth: 100%
  favorite:
    width: 10%
    mobileWidth: 25%

You gave feedback about the grouping should be optional if you only have 1 entity. I think that’s great feedback and totally a doable request based on the other requests I’ve seen. You should post that in the other thread there this card’s author is watching.

The cover images issue, yeah something definitely isn’t right with that (as you can see from my card). I know a few people had trouble getting custom things to show but as far as I know, all that is working. If you continue to have this issue, I’d encourage you to ask about it in the other thread. I’ve never had cover art issues so I can’t help there.

It does look like there’s some styling issues going on in your screenshot but those can easily be fixed a number of ways.

Here’s some CSS styling that you can use if you want to edit:

styles:
  button-section:
    backgroundColor: lightyellow
    border: 1px solid blue
  ha-card:
    padding: 3rem
    background-size: contain
    background-image: >-
      url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Flag_of_Ukraine.svg/1200px-Flag_of_Ukraine.svg.png)
  groups:
    order: 1
  players:
    order: 2
  player-body:
    border: 5px black dashed
  player-song:
    color: '#005cbb'
    font-family: Times New Roman
    font-weight: 900
  mediaBrowser:
    order: 0
  member:
    background: '#005cbb'
    color: yellow
  title:
    fontSize: 30px
    fontWeight: lighter
    textTransform: uppercase
    color: darkblue

The other thing this offers is a way to make the placement of the parts of the card in the order you want. You CAN use this to force the favorites to the bottom if you want. What I’ve noticed seems to work easiest for me is just adjusting the widths of all modules to exceed 100% and this pushes the favorites down. Like this:

layout:
  mobileThresholdPx: 500
  groups:
    width: 30%
    mobileWidth: 100%
  players:
    width: 30%
    mobileWidth: 100%
  favorites:
    width: 100%
    mobileWidth: 100%
  favorite:
    width: 10%
    mobileWidth: 25%
2 Likes

I like that!! Thank you! I’ll post the request in the other forum topic… I think it should be ‘hideable’ if you only have 1 entity.

I’ll make a github request too!

No matter what I set it to I cannot force it to the bottom… at this point I’d settle for putting them to the right of the player…

Thank you VERY much!

1 Like

Hey, how did you get this card?

Hello, I’d like to introduce you to this forked, working, and actively being improved Sonos Card: Lovelace: Sonos card The instructions are in the first post.

1 Like

I’ve been using this card for a while, but suddenly (yesterday) it broke. (I had just updated my Mac OS to Sonoma Beta and the latest version of Sonos software.) The media player part (card) seems OK, the but media browser is broken (see screen shot below). The original Sonos card is working fine.