Dashboard: Sonos card

Sure. I tried to replicate the look and feel of the player in the Sonos app, and rearranged the order of the artwork, song title and controls accordingly. Also tweaked some aspects of the media browser, group, grouping and queue sections.
Change the media player entity to yours in the code below.

type: custom:sonos-card
heightPercentage: auto
artworkMinHeight: 25
sectionButtonIcons:
  player: mdi:play
  volumes: mdi:volume-high
entityId: media_player.kitchen
card_mod:
  style:
    sonos-player: |
      ha-card {  /* Blurred color background */
        position: relative;
        overflow: hidden;
        border-radius:20px; /* Optional rounded corners */     
      } ha-card::before {
        content: "";
        background-image: url('{{ state_attr("media_player.kitchen", "entity_picture") }}');
        background-size: cover;
        background-position: left;
        filter: blur(70px) brightness(40%) saturate(2); 
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
      }    ha-card > * {
        position: relative;
        z-index: 2;
      }  :host {
        --secondary-text-color: white !important;
      }
    sonos-player$ sonos-player-controls$ sonos-volume$: |
      ha-control-slider {  /* Narrower volume slider */
        height: 15px;     
        --control-slider-color: var(--accent-color) !important;
        margin-top: 2.5rem;
        margin-bottom: -20px;
      }
      ha-icon-button {
        --mdc-icon-button-size: rem !important;
        --mdc-icon-size: 2.3rem !important;
        margin-top: 25px;
        margin-right: 10px;
        margin-left: 3px;
      } 
      .percentage {  /* Remove 0-100 from volume slider */
        font-size: 16px !important;
        color: lightgrey;
        padding-top: 20px;
      }
      .volume-level {
        font-size: x-small !important;
        color: transparent;
      }  
    sonos-player$ sonos-player-controls$: |
      .icons * {    /* Size of media control buttons */
        --mdc-icon-button-size: rem !important;
        --mdc-icon-size: 2.5rem !important;
        padding: 8px !important;
        color: lightgrey;
      }        
      .big-icon {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50px !important;
        --mdc-icon-button-size: 3.5rem !important;
        --mdc-icon-size: 4.5rem !important;
        color: white;
      }  
    sonos-player$: |
      .container {   /* Change order of artwork, song title and controls */     
        grid-template-areas:
            'artwork'
            'header' 
            'controls' !important;
        grid-template-columns: 1fr !important;
        margin-right: 10px !important;
      }
       .artwork {
         margin-right: 0px !important;
         margin-top: 30px !important;
         min-width: 25rem !important;
         border-radius: !important;
         height: 95% !important;
      }  
      sonos-player-header {
        margin: 0.75rem  !important;
        margin-right: 1.5rem  !important;
        margin-bottom: 0rem !important;
      }  
      .controls {
        margin-left: 0.75rem !important;
        margin-right: 0.25rem  !important;
        margin-top: 35px;
        margin-bottom: 2rem !important;
        margin: 0rem !important;
        --primary-text-color: black !important;
      }  
    sonos-player$ sonos-player-header$: |
      .song {  /* Song title font size */
        font-size: 1.5em !important;
        text-align: left;
        width: auto;
      } 
      .artist-album { /* Album name font size and color */
        font-size: 1.1rem !important;
        color: lightgrey !important;
        text-align: left;
      }  
    sonos-player$ sonos-player-header$ sonos-progress$: |
      .progress {  /* Progress time font size  */
        font-size: medium !important;
      }  
    sonos-groups$ sonos-group$: |
      mwc-list-item {  /* Groups items sizing */
        margin: 15px !important;
      }
      .speakers {
        font-size: 1.4rem !important;
      }  
      .row {
        margin: 0 !important;
      } 
    sonos-media-browser$ sonos-media-browser-icons$: |
      .title {   /* Favorites styling */      
        color: var(--primary-color) !important;
        background: transparent !important;  
      } 
      div > ha-control-button {
        --control-button-padding: 0px 0px 17px 0px;
        --control-button-background-color: transparent !important;
        --control-button-background-opacity: 0 !important;
        color: var(--primary-color) !important;
      }  
      .icons {
        height: 43rem;
        background: linear-gradient(180deg, rgb(50,96,95), rgb(27,57,88));
      }
    sonos-grouping$: |
      sonos-grouping-button {  /* Grouping font size and color */
        font-size: 16px;
      }
      :host {
        --secondary-text-color: white !important;
      } 
      .item {
        color: var(--accent-color) !important;
      }       
    sonos-queue$: |
      :host {   /* Text and background colors in Queue */
        --secondary-text-color: lightgrey !important;
      } 
      .list {
        --mdc-theme-primary: var(--accent-color) !important;
      } 

Iā€™m pretty new to using integrations from GitHub. I read the manual many times, but however I missed the specific setting that you mentioned.

I really appreciate the help, thank you! :slight_smile:

HI,

I am new to HA and am trying to get my Sonos system to work with it. I have followed your instructions (I do not use yaml) but for the life of me I cannot get a card to show up anywhere.

What am I doing wrong? What do you need from me to help you help me please?

Geoff

Please forgive me. It was just a matter of adding the card to the view. I could not find it as I looked under S (alphabetically) but it is actually under the second section of Custom Cards.

You might want to add an idiot line in to the instructions to explain how to make the card visible for others as challenged as I am!

Geoff

How can I remove the background from each queue entity and have the current song in the primary colour?

image

Iā€™ve tried removing the background with the following but havenā€™t had any luck

card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;
    }
    sonos-queue$ sonos-media-row$:
      .button {
        background: none !important;
    }

To remove or color the background, just add a ā€œ|ā€ to the selector line, such as:

sonos-queue$ sonos-media-row$: |

And you may also need to move the last ā€œ}ā€ by 2 steps to the right to align with ā€œ.buttonā€.

  sonos-queue$ sonos-media-row$: | 
    .button {
      background: none !important;
    } 

Current song highlighted with the primary color:

sonos-queue$: |
  .list {
    --mdc-theme-primary: var(--primary-color) !important;
  }

And you can add a bit more opacity to that highlight color as well:

sonos-queue$ sonos-media-row$: |
  :host {
    --mdc-ripple-activated-opacity: 0.4 !important;
  }

Unfortunately it still isnā€™t working. Here is the code for the entire card:

type: custom:sonos-card
sections:
  - queue
  - volumes
  - grouping
  - groups
  - media browser
entityId: media_player.kitchen
startSection: queue
showVolumeUpAndDownButtons: false
topFavorites:
  - ""
hideBrowseMediaButton: false
hideGroupCurrentTrack: false
card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;
    }
    sonos-queue$ sonos-media-row$: | 
      .button {
        background: none !important;
      }
    sonos-queue$: |
      .list {
        --mdc-theme-primary: var(--primary-color) !important;
      }

It will work if you remove the vertical line after ā€œstyle:ā€ and put ā€œsonos-player: >ā€ before ā€œha-cardā€:

card_mod:
  style:
    sonos-player: >  
      ha-card {
        background: none;
        box-shadow: none;
      }

Guys I am desperate for your help. I have the Sonos card and a number of playlists, stored locally on my laptop, which are added in my Sonos Favorites. I have tried everything but the artwork of each playlist is not visible under Favorites on the Sonos card. Do you have any idea why? Thank you.

Can you change the size of the card?
or am I being dumb

From the description:

widthPercentage: 75 # default is 100. Use this to change the width of the card.
heightPercentage: 75 # default is 100. Use this to change the height of the card. Set to 'auto' to make the card height adjust to the content.
footerHeight: 4 # default is 5. Unit is 'rem'. Use this to change the height of the footer.
1 Like

thanks perfect

Hi All,

I absolutely love this card and use this extensively in my projects across tablets / mobile devices and computers.

I have done the following with my master sonos control on my wall mounted tablet dashboard and made changes to the card via Card Mod to make text items larger across the board:

The only thing I wish is that the HA Spotify integration was a little richer in terms of feature set, for example like SpotifyPlus integration (but that has limitations in that it can only play to one speaker at any time). I wish there was a blend of this card and that integrationā€¦ one can dream!

Anyway, if you like this or have any questions, do let me know.

Sure! Please create a github issue with more details

Iā€™ve spoken to the developer of the SpotifyPlus card and he isnā€™t sure he would like to extend his functionality to allow multiple streaming to different speakers. Heā€™s holding true to the Spotify Web API control of single speaker streamingā€¦

Iā€™d love to use the functionality of his card within yours to be able to search Spotify and be able to send playback to any of the Sonos Speakers in my configuration. Have a look at his functionality and see what you think of it. I was really impressed, but the lack of multi streaming support stopped me in my tracksā€¦

Hi,

Loving the card, so thank you for all the work that goes into it.

Am having two challenges:

  1. Am using Fully Kiosk on several Android tablets, and album art (mostly from Spotify) is not showing in the Favourites view, or Browse Media > Favourites. Shows in the player fine once selected. Viewed on Safari (Mac OS and iOS), it all looks good (apart from Media Library albums, which are also blank).

They did initially show, until I cleared the cache, and now nothing. Have tried every option around caching I can think of within Fully, but it just wonā€™t load the thumbnails back again.

  1. As mentioned above, no album artwork from Sonos Music Library (local, albeit on a NAS) doesnā€™t shows in the Favourites view on Sonos card. It DOES show in Browse Media > Albums. So that feels quite inconsistent, and makes me wonder if thereā€™s some difference in the way that thumbnails are rendered hereā€¦

All is fine within the Sonos app itself. Have tried re-embedding the local files with Picard. Have also put a ā€˜missing thumbnailsā€™ proxy in place, but it doesnā€™t get used, leading me to think that the thumbnails arenā€™t considered ā€˜missingā€™. But they still donā€™t show.

Would love any thoughts on what else to try, as the card is looking and working great aside from this.

(Above: As it appears on Safari. The blank thumbnails are in the Sonos Music Library (stored on a NAS)

(Above: As it appears on a Fire tablet. Same on a Galaxy Tab, and a generic non-name Android tablet)

(Above: Notable that the icons are also missing hereā€¦?)

(Above: And curiously, all the local Media Library album art shows happily hereā€¦)

Am sure Iā€™m missing something really silly, so thanks in advance for pointing whatever that is out!