Dashboard: Sonos card

suxlala · December 30, 2024, 9:24am

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;
      }

birkenhovf · December 30, 2024, 4:55pm

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!

GeoffaatMM · January 1, 2025, 2:41pm

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

GeoffaatMM · January 1, 2025, 3:02pm

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

sturgeo · January 5, 2025, 11:37am

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

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;
    }

suxlala · January 5, 2025, 2:38pm

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;
  }

sturgeo · January 5, 2025, 3:56pm

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;
      }

suxlala · January 5, 2025, 4:09pm

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;
      }

photis68 · January 11, 2025, 5:22pm

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.

Kelvin · January 11, 2025, 9:32pm

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

suxlala · January 12, 2025, 8:57am

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.

Kelvin · January 12, 2025, 6:05pm

thanks perfect

psjnr84 · January 13, 2025, 8:18pm

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.

PunxsutawneyPhil · January 13, 2025, 8:40pm

Sure! Please create a github issue with more details

psjnr84 · January 13, 2025, 10:24pm

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…

Rahaaas · January 14, 2025, 10:52am

Hi,

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

Am having two challenges:

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.

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!