Dashboard: Sonos card

V5.17.0 released

  • Feature: Use Home Assistant’s built-in slider for volume
    • Big rewrite was required for the player section, so some styles had to be changed. If you are using styles: configuration, you might need to update it.

Is it possible to have a shortcut/button inside the Sonos Player which will lead directly to the media browser?
Other question: Does the card support the tap and hold actions? If not could it be possible to add them?
EDIT: i asked this because i would like to use only the custom:sonos-player card and in this way a shortcut or a button will be useful to go directly to the favourites and media…

hello @PunxsutawneyPhil i tested today with the new feature i can get in my dashboard but get this if problem know how to fix it?

Square: false
columns: 1
type: grid
cards:
  - type: custom:sonos-player
    noMediaText: No media selected
    allVolumesText: 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
      - mediaTitleEquals: p4malmo-aac-192
        imageUrl: >-
          https://mytuner.global.ssl.fastly.net/media/tvos_radios/2BDTPrpMbn_cTdteqo.jpg
      - ifMissing: true
        imageUrl: https://cdn-icons-png.flaticon.com/512/651/651758.png
    customSources:
      media_player.tv:
        - title: TV
          thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png
    skipAdditionalPlayerSwitches: true
    disableDynamicVolumeSlider: true
  - type: custom:sonos-grouping
    groupingTitle: Sonos Slaapkamer
    predefinedGroups:
      - name: TV
        entities:
          - media_player.sonos_beam
          - media_player.sonos_ra
    predefinedGroupsTitle: My predefined groups
    predefinedGroupsNoSeparateSection: true
  - type: custom:sonos-media-browser
    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: false

¿Could you share with us the code? please.

The error message explains it. Do one of the following:

  • Add the Sonos Groups card to this dashboard
  • Configure entityId for the card
  • Replace this one with the Sonos card containing all sections

Right now you only have player, grouping and media browser cards. You are missing the groups card (or you hardcode entityId).

Hi, how to hardcode the entityId ?
Thanxx

Update: sorry i had a typo error

Check documentation on first post here, or on GitHub.

Thanks man

now I have another question so if I use the full config for the panel map then I get to see this in the media player

& if I enter it all I hope I don’t get to see that option how can I add it?

Any reason this config will not work inside the card? The image is inside the file

type: custom:custom-sonos-card
name: ‘’
groupsTitle: ‘’
groupingTitle: ‘’
favoritesTitle: ‘’
headerImage: ‘’
shuffleFavorites: false
noMediaText: No media selected
allVolumesText: All volumes
entityNameRegexToReplace: ‘SONOS ’
entityNameReplacement: ‘’
mediaBrowserItemsAsList: true
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)
lovelace-background: center / cover no-repeat fixed url(’/config/www/images/theme.jpeg’)

You can’t use theme variables like that. Please study the theming section of the description in the first post, or on GitHub.

i have also tried to put this into the themes sections, not sure how you select that inside HA or as part of the card… like below…

frontend:
themes:
rounded:
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)
lovelace-background: center / cover no-repeat fixed url(’/config/www/images/theme.jpeg’)

Theme is for entire HA. So go to your user/profile settings in HA and select the theme there. You might have to restart HA, before the theme can be selected.

Very nice! can you share the code please?

Anyone able to get youtube music as a media source? Any direction would be nice.

As long as there is an integration for it, it will show up in this card. You could try this maybe? Youtube Music - Media Browser

I’ve tried both with no success. I’ll try again but once I have ytube music set up do I need to add any yaml to the card?

Is it working with the built in media browser?

I installed the ytube music integration. Able to browse music in the media sidebar with ytube music selected.

I added the sonos card in lovelace but still not seeing any ytube music. Do I need to create a link between ytube music and my sonos player?

I may have the definition incorrect
ytube integration = media browser
sonos player is my sonos device=player

Could you start by creating an issue in my GitHub repo? Then we can dig deeper from there

Before posting in the GitHub repo I just want to ensure I’m understanding correctly.
image
image

This is my Media view. I looked at my Sonos app(android) and this media view is exactly as My Sonos within the app.

I do not see the ytube music browser. Should it appear here automatically?