Dashboard: Sonos card

maurizio53 · April 5, 2024, 7:35pm

Ok, just a question: Do i need to Premium Spotify to play spotify songs in Sonos devices? I am asking this as i have a free account and cannot play anything from Spotify on my sonos devices with sonos card.

prgeno · April 5, 2024, 8:48pm

@maurizio53 I would think a free would work, but I have a paid premium account so I can’t confirm this for you.

Are you able to play anything from Spotify from the Sonos App? If so, you should be able to do so from the Sonos Card within HA too.

maurizio53 · April 6, 2024, 11:07am

No, i can quietly play songs from spotify in sonos app, but with sonos card i get an error about upnp in the IP address of the device.

maurizio53 · April 6, 2024, 11:50am

I am still getting tons of errors like this…

2024-04-06 13:12:23.771 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:25:53.834 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:26:53.811 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:29:44.563 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:29:53.963 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:35:09.678 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:38:24.663 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:39:07.552 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:40:23.774 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:43:23.714 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:45:31.360 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:45:31.724 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
2024-04-06 13:47:31.587 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
ReferenceError: Cannot access ‘e’ before initialization
Object.callback (/hacsfiles/custom-sonos-card/custom-sonos-card.js:358:980)
callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33)
forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)

I don’t have spotifyplus integration installed!

thlucas · April 6, 2024, 12:11pm

@maurizio53
Do you have SoundTouchPlus installed? If so, you will need to update it to the latest version as well. It had the same issue as the SpotifyPlus integration when used with the Sonos Card.

maurizio53 · April 6, 2024, 12:11pm

No, not installed SoundTouchPlus and Spotifyplus integration…

thlucas · April 6, 2024, 12:17pm

@maurizio53
In that case it probably is something in the Sonos Card that is causing it, though I can’t be sure. @PunxsutawneyPhil will have to assess what those messages mean.

maurizio53 · April 6, 2024, 12:21pm

Ok, hope fix all…

maurizio53 · April 6, 2024, 12:34pm

How to make more transparent the title track and the volume slider?

thlucas · April 6, 2024, 2:46pm

@maurizio53
Adjust the background-color attribute in the card_mod definition. Note that the Card Mod Custom component must be installed for card_mod to take effect.
The .control is the bottom control deck (pause, next, etc).
The sonos-player-header is the top info area (song title, progress, etc).
Like so - the 0.4 controls transparency, range=0.0 (transparent) - 1.0 (solid):

card_mod:
  style:
    .: ''
    sonos-player$: |
      .controls {
        background-color: rgba(var(--rgb-card-background-color), 0.4) !important;
      }
      sonos-player-header {
        background-color: rgba(var(--rgb-card-background-color), 0.4) !important;
      }

Hope it helps!

maurizio53 · April 6, 2024, 3:09pm

Yes, it works… Thanks!

stingone · April 14, 2024, 6:48pm

Can anyone tell me how to make the padding smaller around the artwork of the thumnail and get rit of the white banner on the bottom of the thumnail. the screenshot is from the mediabrowser.

PunxsutawneyPhil · April 16, 2024, 5:41pm

Padding:

type: custom:sonos-card
card_mod:
  style:
    sonos-media-browser$: |
      .button {
        --control-button-padding: 4px;
      }

(you need the card_mod plugin, can be found in HACS)

White banner:

mediaBrowserHideTitleForThumbnailIcons: true
default is false. Only makes a difference if mediaBrowserItemsPerRow > 1. Will hide title for thumbnail artworks.

Kirtapp91 · April 26, 2024, 11:39am

First off thanks creator for the card! Really nice!

I’m trying to add a Google Home speaker to the group playing but get this error message:

Failed to call service media_player/join. Not a known Sonos entity_id: media_player.kitchen_speaker

Sonos Card v7.10.0
Core 2024.4.1
Supervisor 2024.04.0
Operating System 12.1

PunxsutawneyPhil · April 26, 2024, 12:26pm

Yes, you can’t mix different vendors when grouping

Kirtapp91 · May 3, 2024, 3:48pm

Is there a way to get this card shown, without the artwork?

Love the option to be able to make the volume relative. Our Sonos’ is usually working between 5-20%.
But we have a bunch of them spread out, and i want a central device to be able to control it. But the art work is making everything so big… Don’t need it.

Thorn · May 4, 2024, 3:48am

Edit: I should not answer at 5:00 in the morning - sorry got your question all wrong.

@Kirtapp91

You’ll need to install card-mod in HACS

And change the code accordingly

type: custom:sonos-card
sections:
  - volumes
  - grouping
mediaBrowserItemsPerRow: 2
showVolumeUpAndDownButtons: false
topFavorites:
  - ''
dynamicVolumeSliderThreshold: 19
dynamicVolumeSliderMax: 40
heightPercentage: auto
card_mod:
  style:
    sonos-player: |
      div {
        display: none;
      }

Kirtapp91 · May 7, 2024, 9:11am

Wonderful! Thanks!

It does however remove a bit to much. Haven’t understood the card-mod completely yet.
So i have no media control anymore.

Edit: “Kalle Blomkål” is the one with the adjusted code with card-mod according to

The “All Rounder” is unchanged and there it’s a bit to large with the art-work.

Thorn · May 7, 2024, 6:11pm

How about this

@thlucas is the creator of the following css brilliance …

type: custom:sonos-card
sections:
  - player
  - grouping
  - volumes
  - media browser
heightPercentage: 45
mediaBrowserItemsPerRow: 4
dynamicVolumeSlider: true

card_mod:
  style:
    sonos-player$ sonos-player-controls$ sonos-volume$: |
      ha-control-slider {
        height: 10px;        
      }
      ha-icon-button {
        --mdc-icon-button-size: 0.9rem !important;
        --mdc-icon-size: 0.8rem !important;
      }
      .volume-level, ha-icon-button {
        display:none !important;
      }
    sonos-player$: |
      .controls {
        background-color: rgba(var(--rgb-card-background-color), 0.4) !important;
        height: px;
        margin: 0 5rem !important;
      }
      sonos-player-header {
        background-color: rgba(var(--rgb-card-background-color), 0.4) !important;
      }
      .artwork {
        display: none !important;
      }
    sonos-player$ sonos-player-controls$: |
      .icons * {    
        --mdc-icon-button-size: 3rem !important;
        --mdc-icon-size: 2rem !important;
        color: orange;
      }
      .volume-level, ha-icon-button {
        display:none !important;
      }
      ha-icon-button {
        display: none !important;
      }
    sonos-player$ sonos-player-header$: |
      .entity {
        display: none;
      }
    sonos-player$ sonos-player-controls$ sonos-ha-player$ more-info-content$ more-info-media_player$: |
      ha-icon-button[action="shuffle_set"] {
        display: none !important;
      }
      ha-icon-button[action="media_previous_track"] {
        display: inline !important;
      }
      
    sonos-player$ sonos-player-controls$ sonos-ha-player+sonos-ha-player+sonos-ha-player$ more-info-content$ more-info-media_player$: |
      ha-icon-button[action="repeat_set"] {
        display: none !important;
      }
      ha-icon-button[action="media_next_track"] {
        display: inline !important;
      }

Removed the artwork
Reduced the slider
Removed repeat and shuffle

will look like this

grafik

thlucas · May 7, 2024, 6:51pm

@Thorn
To be clear, I did respond with that piece of CSS (after much trial and error).
The real magic is performed by @PunxsutawneyPhil, who is the author of the the Sonos card.