I agree… really good view!
Would even be better if you could choose the playlist from specific user 
I like this better:
but both offer a visibility improvement.
I will not die on this hill if others feel strongly in the other direction. Visual improvement is the primary goal in this circumstance and both solutions provide that.
Really appreciate you driving this forward, it’s the only complaint I have with the card and I know its because I use animated backgrounds 
We have an entire team of ui/ux guys and I just asked them to pick one based on the criteria we’re trying to solve. I’ll see what they say, its a nice non-work related enrichment activity.
1 Like
Both look terrible to me 
This is not my strong suit, so hoping for someone with design skills to jump in 
Ok well in that case, I can wait on a response from our ux/ui team. They literally went to school for this.
Didn’t know we had a ux team 
They said either of the proposals would solve the problem (thank you captain obvious).
Raised concerns about the opacity and when I looked at yours closer, I can see what they’re saying but I really think that’s a matter of user preference (some themes are more opaque than others). Personally, its distracting to me if its too transparent . My first thought was to crank it up to .9 like I did but if we did that and then put the frame completely around the groupings, my buttons would probably be lost.
So whatever we decide, the transparency of the buttons and the frame would have to be different and that might be up to the user to work it out (again, I kinda think this is preference).
I have gone back and re-reviewed the mockups and while I didn’t initially like the frame around everything, I can see how that would be visually better on mobile specifically. Right now, the buttons are just kinda floating in space (which is fine) but layering a backcolor behind each section might foster some sectional cohesion.
Great work! It makes it so much easier to quickly throw on some music in a room.
Is it possible to show the track list of the selected playlist?
Released Release v3.6.0 · johanfrick/custom-sonos-card · GitHub
With support for background behind button sections. Add this to yaml config:
backgroundBehindButtonSections: true
Example in README: GitHub - johanfrick/custom-sonos-card: Home Assistant custom lovelace sonos card
MUCH better visual experience on mobile
I appreciate the experience improvement on desktop as well. The frames made the size of things change slightly so I had to play with the ratios to eliminate the scrolling on the sonos panel.
I’m noticing its happening when multiple rooms have music queued or playing (because it increases the height of each of the groups because of the song information). This appears to be something specific to me because of the number of rooms I have. I need to give a solution some more thought or just deal with the scrolling.
You’ve absolutely solved the issue of losing the headers on animated backgrounds and improved the feel on mobile.
Edit: Keeping chrome at 80% zoom seems to give a perfect visual experience (no scrolling) at my ratios:
layout:
mobileThresholdPx: 500
groups:
width: 33%
mobileWidth: 100%
players:
width: 33%
mobileWidth: 100%
favorites:
width: 33%
mobileWidth: 100%
favorite:
width: 33%
mobileWidth: 25%
Turns out there was another setting in my display where I had everything zoomed in. Once I fixed that, all my scrolling issues on this card disappeared. I even have additional room for groupings/songs without it causing the scroll:
2 Likes
Looking fantastic, what a quick evolution this card has taken.
Desktop:
Phone:
I guess now the only thing is changing the colour and transparency of the new backing of Grouping, Devices etc. Unless I am missing something blatantly obvious?
Also, is there a way we could slow the shuffling of favourites down?
1 Like
Oops, missed to update the readme . This is the variable --sonos-button-section-background-color
What do you mean “slow it down”?
2 Likes
Yea, it’s a crazy feature 
You can disable it with a config
1 Like
And a color variable for texts?
I mean the title texts of players, favourites and devices.
Did you check the readme? 
Thanks, was looking for that
Related to my question?
Yes, there is a theme var for title color
1 Like
