@PunxsutawneyPhil
Sorry, but I can’t supply the fix as I am not the owner of the original Spotify integration.
With that said, I opened issue #114454 on the HA GitHub page - not sure when it will be taken care of though.
Hope it helps!
Can’t you fork and open a pull request?
Playlists not having an image doesn’t appear to be the problem, at least not in my case. While I never explicitly assigned an image to any of my playlists, I did not find any playlist that didn’t already have an image (usually a cover of a track in the playlist) automatically assigned.
The only playlist that didn’t have an image was the automatically generated “Liked Songs” playlist, which I cleared out to get rid of it. I also took the time to weed out old playlists thinking maybe I had too many.
Unfortunately I’m still getting the same error using the Official Spotify Integration when accessing it through the Sonos Card.
While that is bad news for me, the good news for you is: I added your Spotify Plus integration and it lists my playlists just fine. So whatever the official integration is not doing correctly, you are.
If only your integration also worked with Sonos devices, which it apparently does not, and/or could be made to work with the Sono Card as a replacement for, or an addition to, the HA media browser.
Unfortunately, my situation is no better off than it was. I’ll keep poking around to see if I can find a common thread, but it’s at least nice to know something out there works, and that gives me some hope for the future.
Thanks again
@PunxsutawneyPhil
Per the integration owner …
“This has been fixed in 2024.4, will land next Wednesday”
Too much work and too many hoops to jump thru for a pull request. It’s an easy fix for the owner.
1 Like
@prgeno
Thanks for the info Paul. Unfortunately, I don’t have any Sonos gear to test with. I’m a Bose Soundtouch guy myself.
A question about Sonos if you have a second … can you reply with an example service call (or script, automation) that you use to power on the Sonos device and play a Spotify track / album / playlist?
Just curious if the Sonos has Spotify Connect built in to the speaker? Or does it use Google Cast api maybe? And do you have to use Spotcast to prepare it for play?
I ask, as the SpotifyPlus integration has a turn on script mechanism that can be used to power up the device that plays the Spotify content.
The Bose Sountouch has Spotify Connect support built in, so it handles it natively.
1 Like
Any messages in the System Log for the error? If it says something about ‘fetch_image_url’ then it’s still a missing image issue. I believe that method is used to fetch any type of media image (playlist, album, artist, etc).
And to verify, if you have multiple Spotify accounts, when you are verifying playlist images, you are logged into the online Spotify interface using the same account selected in the HA media browser?
Maybe this conversation should be moved to a different topic? It’s drifting away from the Sonos Card
@PunxsutawneyPhil @prgeno
Apologies Phil, you are correct; this is getting off topic from the Sonos card. Thanks for keeping us on point.
Paul - we can carry on the conversation in a private message if that works for you?
1 Like
Sorry for bringing this up in this thread. But I only use your Sonos Card for our whole house audio system, and I would guess that this Spotify Playlist issue must be affecting other Sonos Card users as well.
Hopefully the Official Spotify integration update next month will fix the issue. But maybe Sonos Card could use help from Spotify Plus to offer a more robust Spotify media browser from within Sonos Card?
@thlucas I’ll head over to the Spotify Plus thread to try and answer your questions. But as I stated above, I only use Sonos devices and the Sonos Card in my system. Spotify Plus on its own has very limited use in my situation, but I’m happy to try and help in any way I can.
Loving this card, thank you!
I’ve been playing around with some card-mod code to change what the card looks like, but I haven’t been able to find a few options. I’m not great at CSS and I can see what some elements are called, but my mods don’t seem to work.
This is what I have:
card_mod:
style:
sonos-player$ sonos-player-controls$: |
.icons * {
--mdc-icon-button-size: 3rem !important;
--mdc-icon-size: 2rem !important;
color: pink;
}
sonos-player$ sonos-player-controls$ sonos-volume$: |
ha-control-slider {
height: 10px;
}
.volume-level, ha-icon-button {
display:none !important;
}
I’m changing the size of the volume bar and hiding the mute button, and setting the icon and button sizes of the controls, plus setting a color.
I found mentions of setting transparency for the overlays, and they need to be in themes, I can look into that later.
Questions.
- How do I resize the bottom overlay? I’d like it to be probably 60-70% narrower, or even more in line with the top overlay. Since my buttons are small, I don’t need it to be this big
- How do I hide some of the buttons in the card? I never use repeat or shufflet, I’d like to only keep previous, pause and next.
- How do I hide the Entity/Group name? I use this card in my Office Dashboard so I don’t need to know what speakers are being used. Would help make it shorter without needing to scroll.
bottom overlay:
card_mod:
style:
sonos-player$: |
.controls {
margin: 0 3rem !important;
}
hide buttons: not possible as far as I know
hide entity group name:
sonos-player$ sonos-player-header$: |
.entity {
display: none;
}
1 Like
I am suddenly getting tons of these errors regarding, i suppose, the sonos card:
2024-04-03 21:24:50.451 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-03 21:30:05.055 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-03 21:31:20.484 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-03 21:31:50.604 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-03 21:35:50.553 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-03 21:43:11.674 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-03 21:43:11.723 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-03 21:49:41.809 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-03 21:49:41.859 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)
From what it depends and how to fix?
Thank you!
@motoridersd @PunxsutawneyPhil
Here’s the Sonos Card player yaml I have been testing with - see the card_mod section for selectors to show / hide any of the control deck buttons. It took me awhile to figure out the selectors, due to the whole #shadow-root thing documented here.
Adjust the sonos-player$ selector \ background-color \ 0.4 value to change the background alpha / opacity.
type: custom:sonos-card
sections:
- player
entities:
- media_player.spotifyplus_todd_l
showVolumeUpAndDownButtons: true
showNonSonosPlayers: true
showAudioInputFormat: true
artworkAsBackground: true
card_mod:
debug: false
style:
.: ''
sonos-player$: |
.controls {
background-color: rgba(var(--rgb-card-background-color), 0.4) !important;
}
sonos-player$ sonos-player-controls$: |
.icons * {
--mdc-icon-button-size: 3rem !important;
--mdc-icon-size: 2rem !important;
}
ha-icon-button {
display: none !important;
}
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;
}
sonos-player$ sonos-player-controls$ sonos-volume$: |
ha-control-slider {
height: 14px !important;
}
ha-icon-button {
--mdc-icon-button-size: 2rem !important;
--mdc-icon-size: 1.5rem !important;
}
Example:
3 Likes
Please file a bug on GitHub 
I just posted the issue…
maurizio53 - This may be due to an issue with the SpotifyPlus integration that you are working with.
The Problem
The issue is caused by the SpotifyPlus integration receiving a async_browse_media request with a media_content_type = favorites when using a Sonos Card with a media browser section. It appears the Sonos Card is trying to query some sort of favorites from the Sonos device. This does not work for non-Sonos media players (e.g. SpotifyPlus, SoundTouchPlus, etc). The SpotifyPlus integration processes the async_browse_media request and returns a null value. I believe the null value returned from async_browse_media is causing the issue.
The Fix
I updated the SpotifyPlus (and SoundTouchPlus) integration to return an empty BrowseMedia object, and that took care of the problem; at least there were no more Browse Media should use new BrowseMedia class or Cannot access ‘e’ before initialization entries showing up in the system log.
What To Do
Upgrade the SpotifyPlus integration to the latest (v1.0.15).
Upgrade the SoundTouchPlus integration to the latest version as well.
Apologies for the inconvenience. I am still trying to make the Sonos Card player work with SpotifyPlus (and SoundTouchPlus) integration, as I love the card UI.
1 Like
As a followup: I can confirm, at least in my case, the Spotify Playlist unknown error problem is fixed in the 2024.4.1 release of HA.
I have access to my Spotify playlists again from within the HA media browser, and as an extension, from Sonos Card.
Special thanks to @thlucas for identifying the issue, and reporting it to the official HA Core Spotify integration maintainer.
1 Like
What you mean with ‘extension’ in Sonos card?
@maurizio53
No extension required, just the official Spotify integration (not Spotify Plus) which is accessible from the standard HA media browser and accessible from within the Sonos Card