Dashboard: Sonos card

Sonos card for Home Assistant’s Dashboard UI

Customized media player for sonos speakers!

Features:

  • Group/Ungroup speakers
  • Control multiple speaker
  • Play favorites from list
  • Media browser
  • Control individual volumes in a group
  • Artwork background
  • Possibility to override artwork
  • Shuffle and repeat mode
  • Theming
  • Configurable layout
  • Dynamic volume level slider
  • Track progress bar

and more!

Support the project

Do you like the Sonos Card? Support the project with a coffee :coffee:

BMC

Installation

HACS

This card is available in HACS (Home Assistant Community Store)

Manual

Download the resources, as you would do with all other modules.

Add the custom card as a module, like this:

resources:
  - url: /local/custom-sonos-card.js?v=1.0
    type: module

Usage

Full Sonos Card (all sections)

To get the full width of the Sonos Card, please make sure to use panel mode in your Dashboard view.
Read more here: Panel View - Home Assistant

After that add the “Custom: Sonos” card to the view (yaml mode: type: custom:sonos-card).

Individual sections

There are also cards available for the major sections of the Sonos Card. By using these you can utilise
the full power of Home Assistant’s layout capabilities and also drag in other cards in your Sonos Dashboard view.

For more flexibity in the layout, add each section as its own card. These are the options:

Card Name Yaml
Custom: Sonos (Groups section) type: custom:sonos-groups
Custom: Sonos (Player section) type: custom:sonos-player
Custom: Sonos (Media Browser section) type: custom:sonos-media-browser
Custom: Sonos (Grouping section) type: custom:sonos-grouping

Configuration in YAML

type: custom:sonos-card # or one of the individual sections mentioned above
# All settings below are optional

# common for all cards
entityId: media_player.sonos_bedroom # Forces this player to be the selected one on loading the card (overrides url param etc)
entityNameRegexToReplace: 'SONOS ' # Regex pattern to replace parts of the entity names
entityNameReplacement: ''
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

# sonos-card specific
name: ''

# sonos-groups specific
groupsTitle: ''
hideGroupCurrentTrack: true # default is false, which means song/track info for groups will be shown

# sonos-groupings specific
groupingTitle: ''
predefinedGroups: # defaults to empty
  - name: Inside
    entities:
      - media_player.matrum
      - media_player.hall
predefinedGroupsTitle: 'My predefined groups' # default is 'Predefined Groups'

# sonos-player specific
noMediaText: 'No media selected'
allVolumesText: 'All volumes'
mediaArtworkOverrides: # Show your own selected artwork if certain rules match
  - 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
  - mediaTitleEquals: p4malmo-aac-192
    imageUrl: >-
      https://mytuner.global.ssl.fastly.net/media/tvos_radios/2BDTPrpMbn_cTdteqo.jpg
  - ifMissing: true # ifMissing will only be used if none of the "Equals" overrides above resulted in a match 
    imageUrl: https://cdn-icons-png.flaticon.com/512/651/651758.png
customSources: # Main usecase is probably to set tv media player to play TV sound
  media_player.tv: # set this to 'all' to show the custom source for all players
    - title: TV
      thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png
skipAdditionalPlayerSwitches: true # default is false, which means additional switches will be shown in player if available (such as crossfade button)
disableDynamicVolumeSlider: true # default is false. See more in section further down.

# sonos-media-browser specific
mediaTitle: ''
shuffleFavorites: false
customThumbnailIfMissing:
  Ed Sheeran Radio: https://i.scdn.co/image/ab6761610000e5eb4d2f80ceffc6c70a432ccd7c
  Legendary: https://i.scdn.co/image/ab67706f000000027b2e7ee752dc222ff2fd466f
mediaBrowserTitlesToIgnore:
  - Local Media
  - My Bad Playlist
mediaBrowserItemsAsList: true # default is false, which means showing items as icons

Override artwork

Example:

Config:

...
mediaArtworkOverrides:
  - mediaTitleEquals: TV
    imageUrl: https://cdn-icons-png.flaticon.com/512/716/716429.png
    sizePercentage: 40
...

Layout

As seen in the yaml example below, layout can be controlled for the major sections. All of these only apply for when
using the full Sonos card (except for the mediaItem, which also is relevant when showing the Media Browser card).

layout:
  mobileThresholdPx: 500 # Default is 650
  groups:
    width: '20%' # Default 25%
    mobileWidth: '80%' # Default 100%
  players:
    width: '20%' # Default 25%
    mobileWidth: '80%' # Default 100%
  mediaBrowser:
    width: '20%' # Default 33%
    mobileWidth: '80%' # Default 100%
  mediaItem:
    width: '20%' # Default 33%
    mobileWidth: '25%' # Default 16%

Here is another example:

layout:
  mobileThresholdPx: 500
  groups:
    width: 20%
    mobileWidth: 80%
  players:
    width: 20%
    mobileWidth: 90%
  mediaBrowser:
    width: 60%
    mobileWidth: 70%
  mediaItem:
    width: 20%
    mobileWidth: 50%

Example using the config above for screens wider than 500px:

And for mobile:

img/layout_mobile.png

Yet another example (with different config):

Using individual section cards

As mentioned earlier, use the individual section cards for more layout flexibility.

Here is an example:

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:sonos-groups
      - type: custom:sonos-media-browser
        layout:
          mediaItem:
            width: 15%
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: navigate
              navigation_path: /
            icon: mdi:arrow-left-circle
            name: Back to home
      - type: custom:sonos-player
      - type: custom:sonos-grouping

Theme variables

The following variables are available and can be set in your theme to change the appearance of the card.

Read more about using theme variables here: Home Assistant Frontend - Home Assistant

Name Default
--sonos-background-color var(--ha-card-background, var(--card-background-color, white))
--sonos-ha-card-background-color var(--ha-card-background, var(--card-background-color, white))
--sonos-player-section-background #ffffffe6
--sonos-color var(--secondary-text-color)
--sonos-artist-album-text-color var(--secondary-text-color)
--sonos-song-text-color var(--sonos-accent-color)
--sonos-accent-color var(--accent-color)
--sonos-title-color var(--secondary-text-color)
--sonos-border-radius 0.25rem
--sonos-border-width 0.125rem
--sonos-media-buttons-multiline nowrap
--sonos-button-section-background-color var(--card-background-color)

Default theme

Without changing any theme variables:

Example with rounded corners

  1. Add the following to your configuration.yaml
frontend:
  themes:
    rounded:
      sonos-border-radius: 20px
      sonos-background-color: white
      sonos-ha-card-background-color: '#eeeeee'
      sonos-color: black
      sonos-artist-album-text-color: gray
      sonos-song-text-color: black
      sonos-accent-color: green
      sonos-title-color: black
      sonos-border-width: 0rem
      sonos-button-section-background-color: '#ffffff00'
  1. Then select theme rounded
  2. This will give you:

Example with dark theme

sonos-background-color: var(--secondary-background-color)
sonos-ha-card-background-color: none
ha-card-box-shadow: none
sonos-artist-album-text-color: rgb(198, 203, 210)
sonos-title-color: rgb(198, 203, 210)
sonos-color: rgb(198, 203, 210)
sonos-player-section-background: rgb(32, 33, 36)
sonos-accent-color: rgb(198, 203, 210)

(Thanks to BeastHouse)

Dark theme with focus on favorites

“I’ve become more reliant on playlists/favorites. I spent some time playing with the settings today that give a more
‘favorites’ focused layout that still looks good on mobile while providing more usable screen real estate on desktop.” -
Sergeantpup

layout:
  mobileThresholdPx: 500
  groups:
    width: 20%
    mobileWidth: 100%
  players:
    width: 30%
    mobileWidth: 100%
  mediaBrowser:
    width: 50%
    mobileWidth: 100%
  mediaItem:
    width: 15%
    mobileWidth: 25%

CSS Styling

For maximum control of look and feel, define your style with CSS under styles.

Many elements in the card can be styled using this, but not all. Using your web browser’s developer console, inspect the
element and check the CSS. If the CSS contains
--sonos-card-style-name: [elementName];, then the element can be styled using the elementName.

Example:

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
  media-browser:
    order: 0
  member:
    background: '#005cbb'
    color: yellow
  title:
    fontSize: 30px
    fontWeight: lighter
    textTransform: uppercase
    color: darkblue

The above YAML renders the following:

Dynamic volume level slider

The volume level slider is dynamically adjusting its scale. If volume is below 20% it will show a scale up to 30%. Above
20% it will show a scale up to 100%. The color will also change from green to red clearly indicating which scale is
being used.

Disable it in config with disableDynamicVolumeSlider: true

Linking to specific player

Append #media_player.my_sonos_player to page URL to have that player selected.

If entityId is configured for the card, the url param will be ignored. See more in the Usage section above.

Media browser as list instead of icons

mediaBrowserItemsAsList: true

7 Likes

I plugged this in and my SONOS system had a complete meltdown 3 times. I had to stop my host to try to force control back of my system each time. I don’t know why but on this last time, I got a stable experience but I also intentionally didn’t push it to its limit.

So with that, I have some notes:
The first problem I encountered was some sort of scanning. When I selected a frequently used playlist, it just kept changing tracks quickly. To the point where no music was being played and I couldn’t regain control. While struggling to regain control through a HA reboot in the SONOS app, as fast I could clear out the song queue for a device, it was putting it right back. It was the correct music queue, it just kept forcing it in again and again.

The second problem I encountered was grouping. I have 9 rooms of SONOS and that’s kindof a lot even on a good day. Trying a select all players made the player and my sonos have a meltdown. Joining one at a time is slow but does work. Having all of them joined, while trying to regain control of my sonos system with a HA reboot, I kept trying to ungroup the rooms in the sonos app and it kept regrouping them.

The last time, I queued up a station instead from SONOS, then from the lovelace card pressed play. playback was beautiful. I added one room at a time to it, patiently waiting between and it worked (although grouping is slow). I know even running grouping automations can be slow so this might just be the cost of doing business.

I was afraid to push it any further after I got one successful playback. I can pick up additional testing later but trying to kill/regrain sonos control is a wild and time consuming process and I’ve had enough for tonight.

This is better than any Sonos card I’ve touched so far but I think there’s still some unexplained behavior. There’s definitely something that it persistently isn’t liking but I’ll need to play with it more to articulate it.

1 Like

Thanks for taking the time to give this feedback!

I very much agree that there is something strange going on here. I see similar behaviour, but not as bad as you state it. Many times it works fine for me, but every now and then it becomes unstable.

As I wrote above, the code is forked from another repo and the parts we are talking about here have not been built with me.

Looking at the code for these parts, it looks straight forward (and correct), so it would be really interesting to understand what is wrong with it.
I hope I can find time to investigate it. Meanwhile, please let me know if you have any ideas on how to improve it!

@Sergeantpup I did some debugging last night, and could notice that many duplicate calls were being made to Home Assistant for a single click in the card.
Finally I found that the original author had used the updated() method to add event handlers, instead of using the @click functionality.
As soon as I changed the code to instead use @click everywhere, it started behaving as expected.

Could you please have another go at this? The new release should be available in HACS.
On github you can see it here: https://github.com/johanfrick/custom-sonos-card/releases/tag/v1.2.0

This is absolutely hilarious. Thank you for this great laugh this morning. Yes, I will try it again and see what I get!

1 Like

I plugged it in and it works beautifully. The grouping timing has even improved immensely (I’m sure from not fighting itself anymore). Ungroup all is a nice button, wish the sonos app had that.

I WAS a little concerned when I saw a button available to add a device that’s already part of the group and I was terrified to press it but I pressed it and nothing happened. I’m ok with nothing happening, I was just afraid of bad stuff happening. My only note would be to not display the main as an addable room if it’s already part of the group but that’s purely cosmetic at this point (it doesn’t alter functionality).

Somebody suggested this card to me recently (I’m not sure if it was you) before the fork and I know it wasn’t an acceptable solution at that time. THIS is now an acceptable replacement for what I’ve been using:


I will likely keep the sonos card now permanently

One weird question that doesn’t really have anything to do with the card but there’s not an MDI icon for SONOS? Even Hubitat had SONOS icons. I saw amazon, google, all the social medias but the only icon I could find is the lame casting icon. It just seemed like something that was ubiquitous enough to be in everybodys icon db. Do you know of any magical way I can get a sonos icon?

Thanks for testing it, and I’ve totally missed that bug about current master being displayed under grouping.

That is now fixed: https://github.com/johanfrick/custom-sonos-card/releases/tag/v1.2.2

For icons, you can use this one in HACS which has Sonos (and lot’s of other brands): https://github.com/elax46/custom-brand-icons#sonos-device

Well you’ve certainly fulfilled my wildest fantasies with icons today. Thank you for introducing me to that resource. I have already configured all my device icons.

Thanks for the update to the code. I plugged it in and it definitely handles the removal of the master smoothly. Just as fast as you can click a primary, it removes the appropriate entity from the grouping list. The only weird thing I saw was a truncating thing that happens sometimes based on room name length. This is probably based on a zillion factors like screen size, resolution, dashboard layout but it is just a cosmetic quirk I noticed. Maybe you can force the group/ungroup buttons to their own line permanently?


Functionally, I think you hit the jackpot.

I cannot seem to get this working. Followed the instructions on HACS, used the example yaml for card config, with my entities in it, reduced to only the required fields, and no luck. Any pointers?

Is it just not displaying? Because I get that sometimes. Or are you getting an error in your custom card?

here is my exact card:

type: custom:custom-sonos-card
name: ''
groupsTitle: ''
groupingTitle: ''
favoritesTitle: ''
headerImage: ''
shuffleFavorites: false
noMediaText: No media selected
allVolumesText: All volumes
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

Love the card, I dont know if I’m doing something wrong, or need to wrap the card in another card like css mod, but mine just does not seem to display like the images I see. The favorites and media player column is too condensed.

Here is my card

type: custom:custom-sonos-card
name: Sonos Card
groupsTitle: Devices
groupingTitle: ''
favoritesTitle: ' Favorites'
headerImage: ''
shuffleFavorites: false
noMediaText: No media selected
allVolumesText: All volumes
entities:
  - media_player.house_speakers_sonos
  - media_player.great_room_sonos
  - media_player.living_room_sonos
1 Like

Glad you like it!
To make it wider, please use panel mode. Read more here Views - Home Assistant

I’m really liking the functionality in this card, thanks for making it!

Is it/will it be “themable”? I don’t do much with my HA front-end, so if I’m just missing something obvious, be gentle :wink:

Thanks again!

1 Like

Theming support added with v2.0.0. Read more here: https://github.com/johanfrick/custom-sonos-card#theme-variables

Last night it was nothing, this morning it’s an error…

Please try again with v2.0.1

1 Like

I was too afraid to ask for something other than white backgrounds lol. I’m happy with what I got but to tone down all the white on the screen at night would be great!

Yes, now you can control it yourself, since theming support has been added.

Thanks working now!

1 Like

I am over the moon thrilled with this

What do you think about adding a clear playlist button? Doesn’t have to be for all but a way to clear out the playlist of any room

1 Like