Sure, just configure the card to use relative volumes. More details in the readme on GitHub GitHub - punxaphil/custom-sonos-card: Home Assistant custom lovelace sonos card
1 Like
Thanks! Now the card is perfect! Great job!
Iâm quit a noob⌠I didnât add it via my configuration.yaml, but with HACS. Is there an easy way to change it? When I try to add it to my configuration.yaml, I get the notification in the pictures below.
No problem if you canât help me, then Iâll find someone else who can help me.
Great!! Thank you!
Remove it from configuration.yaml.
You need to add it to a Lovelace ui dashboard. Googling will help you.
That was stupid. It works, thanks!
Is there a way with CSS to reduce the height of the volume section?
I mean this:
type: custom:sonos-card
card_mod:
style:
.: |
sonos-player$ sonos-player-controls$ sonos-volume$: |
ha-control-slider {
height: 10px;
}
ha-icon-button {
--mdc-icon-button-size: 2rem !important;
--mdc-icon-size: 1.5rem !important;
}
PunxaPhil
1 Like
Thanks a lot⌠and what about the various buttons? are they editable with CSS?
1 Like
What is the variable to change the background color of the controls (from transparent black to transparent White)? Thank you!
--rgb-card-background-color
⌠and in the post above the top screenshot is using HA default theme - dark mode, bottom screenshot is using HA default theme - light mode.
Thank you!
Whenever I try to set this variable it comes changes the background to transparent instead of the set color. This was already the case for me when I tried to set this for the covers in the favorites (earlier posts).
Does this only happen for me?
No idea if this is the best place to post but here we go.
I have spent a few days, with a lot of brain damage to create my sonos player and thought Iâd share my learnings. Hereâs the punchline (yaml mode):
The top element is a modded custom:mini-media-player. Why? I like itâs compact media friendly style.
The next block is my own grid of custom:button-cardâs. Each launches the displayed shortcut. Figuring out how to get the sonos entity to accept all these shortcuts took forever. Iâm gonna do a follow up post on that.
The next block is sonos card, stripped of everything except the launch button bar. So I can access favorites, grouping and so on.
Hereâs what that looks like (it auto expands):
Finally, we have another mini-media-player, that controls the receiver that the sonos is playing through. My sonos feeds multiple destinations, so I like to be able to control the master sonos volume (first media player) and the specific area Iâm in (second media-player).
Hereâs the code (excluding the !includes):
# lovelace_gen
{% set sonos_shortcut_data = [
{"label": "Discover Weekly", "command": "spotify:user:spotify:playlist:37i9dQZEVXcLfFHFjIa3mz", "source_id": "Discover Weekly", "icon": "si:spotify", "color": "rgb(29, 185, 84)"},
{"label": "Release Radar", "command": "spotify:user:spotify:playlist:37i9dQZF1E37VWUN6PIVn6", "source_id": "Release Radar", "icon": "si:spotify", "color": "rgb(29, 185, 84)"},
{"label": "The Coffee House-17", "command": "x-sonosapi-hls-static:channel-linear%3a41f8b174-fb06-1707-aaa7-e74e109c2ee9?sid=37&flags=8232&sn=2", "source_id": "CH 17 - The Coffee House", "icon": "fapro:sirius-xm#fullcolor"},
{"label": "Daily Mix 1", "content_type": "playlist", "command": "spotify:user:spotify:playlist:37i9dQZF1E37VWUN6PIVn6", "icon": "si:spotify", "source_id": "Daily Mix 1", "color": "rgb(29, 185, 84)"},
{"label": "Indie Folk", "command": "https://www.deezer.com/en/playlist/1750314842", "source_id": "Firepit Singalong", "icon": "fapro:deezer-2023#fullcolor"},
{"label": "Firepit Music Classics", "command": "Firepit Music Classics", "icon": "si:sonos", "content_type": "playlist"},
{"label": "Feel Good Alt", "command": "x-sonosapi-radio:catalog%2fstations%2fA1GCD4WZPYK96P%2f%23chunk-hoqkntnFRCCXcdBau70Evg?sid=201&flags=8300&sn=7", "icon": "fapro:amazonmusic", "color": "#46C3D0", "size":'44px'},
{"label": "My 2024 Favs #1","command": "spotify:user:spotify:playlist:63yn3W32lQKYIdzBdpdTpr", "icon": "si:spotify", "color": "rgb(29, 185, 84)"},
{"label": "AC/DC Back in Black","command": "x-rincon-playlist:RINCON_B8E9379F2D7A01400#A:ALBUMARTIST/AC%2fDC/Back%20in%20Black", "source_id":"Back in Black", "icon": "si:sonos"},
{"label": "Pure Unplugged", "command": "FV:2/19", "content_type": "favorite_item_id", "source_id": "Pure Unplugged", "icon": "si:sonos"},
] %}
{% set sonos_shortcut_entity = " media_player.basement" %}
{% set sonos_shortcut_service = "media_player.play_media" %}
{% set sonos_shortcut_source_attribute = "media_playlist" %}
title: Sonos
views:
- title: Sonos View
type: masonry
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
max-width: 388px;
}
cards:
- type: custom:mini-media-player
entity: {{sonos_shortcut_entity}}
group: true
artwork: cover
hide:
jump: false
power: true
volume: false
source: true
info: short
source: icon
card_mod:
style: |
div.mmp-player {
}
div.mmp-player__adds {
margin-left: 6px;
margin-right: 6px;
}
- !include
- includes/components/shortcut_menu_custom_button.yaml
- shortcut_service: {{sonos_shortcut_service}}
shortcut_entity: {{sonos_shortcut_entity}}
shortcut_data: {{sonos_shortcut_data}}
service_type: "music"
shortcut_source_attribute: {{sonos_shortcut_source_attribute}} #optional
shortcut_grid_columns: "160px 160px"
shortcut_grid_rows: "34px 34px 34px 34px"
display_mode: "text"
button_bg: {{button_bg}} #optional
button_hover_bg: {{button_hover_bg}} #optional
button_selected_bg: {{button_selected_bg}} #optional
button_type: custom:mushroom-template-card #optional
max_icon_height: 24px
icon_size: 24px
layout_margin: "0px 0 0px 0"
- entity: media_player.basement
type: custom:sonos-card
sections:
- volumes
- groups
- grouping
- media browser
- player
mediaBrowserItemsPerRow: 3
card_mod:
style:
sonos-volumes$:
.: |
.row:first-of-type {
margin-top: 1rem;
}
.row {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
sonos-volume$:
.: |
ha-control-slider {
--control-slider-thickness: 16px;
margin-top: 12px;
}
sonos-player$:
.: |
div.artwork {
}
div.container {
display: none;
}
sonos-media-browser$:
.: |
sonos-media-browser-header {
height: 1.5rem;
}
sonos-media-browser-icons$:
.: |
div.icons {
height: 20rem;
overflow-y: auto;
}
sonos-media-browser-header$:
.: |
.title {
font-size: 1.25rem !important;
justify-content: left !important;
font-weight: 400 !important;
}
sonos-ha-player {
display: flex;
align-items: center;
justify-content: right;
padding-top: 3px;
}
div.icons {
height: 25rem !important;
}
.: |
ha-card.type-custom-sonos-card {
height: 100% !important;
margin: auto;
border-style: none;
}
div.content {
background: white;
height: auto !important;
overflow-y: auto !important;
}
sonos-footer {
height: 1.5rem !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
display: flex;
align-items: center;
--mdc-icon-size: 1.5rem !important;
}
- entity: media_player.pioneer_receiver
type: custom:mini-media-player
name: Pioneer SC-LX704 Receiver
group: true
hide:
play_pause: true
card_mod:
style:
mmp-powerstrip$:
.: |
mmp-source-menu {
font-weight: 400 !important!;
max-width: 200px !important;
}
.: |
div.mmp-player {
padding: 12px !important;
}
div.mmp-player__adds {
margin-left: 12px !important;
margin-right: 12px !important;
}
3 Likes
Is there now a function that allows you to start all (e.g. Spotify) playlists in Shuffle? That would be a great function, so you wouldnât always have to make 2 clicks. 
I know this isnât specifically an issue with the Sonos card, but certainly must affect a good number of Sonos users here who use Spotify. I (and apparently others) have found the HA media browser is unable to browser and/or play Spotify playlists on a Sonos device.
I am able to use the Spotify app and Spotify Connect to play playlists on the Sonos and HA & this Sonos card displays everything correctly, but cannot browse playlists from within HA and Sonos card using the HA media browser.
I know the HA Spotify integration states: âAlthough Sonos is a Spotify Connect device, it is not supported by the official Spotify APIâ but was hoping someone here might know of a magic bullet that slays this dragon.
Describing the problem in more detail - Iâm able to browse and play everything else from Spotify (artists, albums, songs, etc) as well as from other sources with the HA Sonos integration using the media browser, except Spotify playlists. When I try to browse playlists I get a âMedia Browsing Error - Unknown Errorâ message. The HA log shows the following:
File â/usr/src/homeassistant/homeassistant/components/websocket_api/decorators.pyâ, line 26, in _handle_async_response
await func(hass, connection, msg)
File â/usr/src/homeassistant/homeassistant/components/media_player/init.pyâ, line 1310, in websocket_browse_media
payload = await player.async_browse_media(media_content_type, media_content_id)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File â/usr/src/homeassistant/homeassistant/components/spotify/media_player.pyâ, line 472, in async_browse_media
return await async_browse_media_internal(
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File â/usr/src/homeassistant/homeassistant/components/spotify/browse_media.pyâ, line 225, in async_browse_media_internal
response = await hass.async_add_executor_job(
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File â/usr/local/lib/python3.12/concurrent/futures/thread.pyâ, line 58, in run
result = self.fn(*self.args, **self.kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File â/usr/src/homeassistant/homeassistant/components/spotify/browse_media.pyâ, line 390, in build_item_response
item_payload(item, can_play_artist=can_play_artist)
File â/usr/src/homeassistant/homeassistant/components/spotify/browse_media.pyâ, line 439, in item_payload
browse_media.thumbnail = fetch_image_url(item)
^^^^^^^^^^^^^^^^^^^^^
File â/usr/src/homeassistant/homeassistant/components/spotify/util.pyâ, line 24, in fetch_image_url
return item.get(key, )[0].get(âurlâ)
~~~~~~~~~~~~~~~~~^^^
TypeError: âNoneTypeâ object is not subscriptable
@prgeno
Based on the logs you provided, it appears that one or more of your playlists are missing a cover image; the fetch_image_url method is failing because it assumes there is an images item at the zero index position, and there is not (proven by the TypeError: 'NoneType' object is not subscriptable exception).
Go to the Spotify web site and display your playlists there. Assign an image to any playlist that does not have an image.
The problem is that the fetch_image_url method only traps IndexError exceptions; the exception being raised is a TypeError so it doesnât catch it, and it bubbles back up the chain of events.
def fetch_image_url(item: dict[str, Any], key="images") -> str | None:
"""Fetch image url."""
try:
return item.get(key, [])[0].get("url") # <- this is the problem
except IndexError:
return None
That function should be updated to this:
def fetch_image_url(item: dict[str, Any], key="images") -> str | None:
"""Fetch image url."""
try:
return item.get(key, [])[0].get("url")
except Exception:
return None
The function change is not something that you can correct though. But adding an image to playlists that donât have an image should fix your issue.
Hope it helps!
@prgeno
FYI ⌠I just verified that was the issue. I created an empty playlist with no cover image, and the built-in Spotify integration returned the âUnknown Errorâ dialog and the TypeError: 'NoneType' object is not subscriptable log message.
I wanted to make sure my SpotifyPlus integration could handle it (and it did). 
Also, you are not the only one with this issue - check out this community thread for more details.
Todd,
Thank you so much for digging into this. I will verify my playlists later today and report back here.
Also, I canât wait to check out your Spotify Plus integration. I know the HA devs and addon/integration devs like yourself donât hear it nearly often enough, but HA users like myself are incredibly appreciative for what you folks add to HA for all of our benefit.
So a big thank you for your efforts
1 Like
Could you contribute this fix to the standard Spotify integration?