Please excuse my ignorance, still new to Home Assistant. How do I use this/set the custom source?
Please share what you have been trying, and what the error is. Alternatively report an issue on Github.
I’m not sure what you mean here really. More details needed. Maybe report an issue in Github, and we can discuss further there.
I don’t understand why this is needed. You can select player/zone in the groups section in the card.
Not sure about why that fails. Should be the same thing. Any errors in the web browser console?
I’m not sure how to do that actually 
Awesome card, but is there any way to remove/hide the volume slider? I’m trying to reduce the footprint of the card on my dashboard and while I can adjust the width/height, this seems to just shrink the artwork, while the icons and slider sizes remain unchanged. If I enable the +/- volume buttons, it would be great if I could then disable the volume slider to reduce the height of the card.
Thanks.
Use card-mod. There are lots of examples in this topic and on GitHub.
is it possible to fixate the order of rooms in the grouping tab? I really dislike the reordering when selecting a new entity to join to etc.
Also when I start casting from spotify to a speaker, the card will always be set to another room. I’d like the default room to display be my living room, but it defaults to the bathroom. Is there a way to change that?
Hey Phil, I am going to try an explain my use case
Currently for my multizone media player setup I heavily leverage the use of input_selects for both my media source and my media player zone output. I have it this way because my system is made up of sonos and non sonos devices. I use the the input_select.media.source to choose what music should play. I use the input_select.media.output to select one of my zones. This allows me to play music from sonos favorites on non-sonos devices. I don’t need to worry about the platform because I am pulling all my media browser favorites into input selects and then with some yaml magic I am telling it to play the selected source to the input selected zone. This currently requires a lot of work and duplicate cards because mini media player card does not support the use of input selects. Once I found both your Sonos and Maxi media player cards I tried to see it I could basically replicate the same function but with less cards and yaml.
This attempt has exposed some significant challenges when trying to build something simple and sleek.
Current challenges
- When the media browser is set to a sonos entity, but I want the play music to non-sonos speaker/zone. It only will plays to the entity the populates the media browser, not the entity that I have selected in the groups or player section.
- media browser only shows up if the is the entity platform supports it. If the source is a multizone amp, the media browser will not work with it and I get a blank section
This is where I see the input_select coming to the rescue. It does care about the source of the music or the output zone , as long as i can point it to play this song to the zone everything works.
The 2 set of picture i have shared should show the challenges. Let me know if you want to see me yaml as well.
I have some difficulties to enable Sonos Card. After the installation. It say the that it will be located in ‘/config/www/community/custom-sonos-card’.
Where do I need to add this information, in order to make Sonos Card work?
I’m pretty new to HA, so please bare with me 
Jan
Hi, awesome card, however I think that the browse media section could be improved by swapping the Media to Music Assistant. Any thoughts on this? In addition hiding unwanted services for example just have spotify listed if that’s the only one used or Plex etc?
Good suggestions. Not something I will find time to work on probably, but contributions are very welcome!
Hi,
I really like the way you changed the look of the card with card_mod (removed artwork, …). Unfortunately I have no clue of CSS- can you explain what I have to do to also change the size of the volume sliders on the volume section? They are so big.
Many thanks!
Very nice card and thanks a lot for that awesome work !
2 main questions I have, probably very easy to solve:
- How do you get these nice brand icons in front of your mediaplayers ?
- Is it possible to have the favorites divided in radio & playlists ?
Thanks !
Bart
- Install this one in HACS GitHub - elax46/custom-brand-icons: Custom brand icons for Home Assistant, then set icon on your entity in home assistant
- use topfavorites setting
HI,
How can I, in an horizontal-stack, be able to have the device part be 1/4the of the screen, the player have 2/4th of the screen and the favorites have 1/4th of the screen ???
If I set max width of device card, the player card doesn’t (obviously) fill up the gap, even when setting the card-width to 120%
This is the code I’m using:
theme: Adaptive Mushroom
title: Music
icon: mdi:home-assistant
path: music
visible:
- user: xxx
- user: xxx
- user: xxx
type: custom:grid-layout
layout:
grid-template-columns: 0em 74px 25% 25% 42% 25%
grid-template-rows: auto
grid-gap: 0.1em
grid-template-areas: |
". nav line1 line1 line1 ."
mediaquery:
"(max-width: 400px)":
grid-template-columns: 3% 94% 3%
grid-template-rows: auto
grid-gap: 0em
grid-template-areas: |
". title ."
". title2 ."
". people ."
". left1 ."
". center1 ."
". right1 ."
". line2 line2 line2 ."
"footer footer footer"
badges: []
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: " "
- type: custom:decluttering-card
template: side-nav
variables:
- dashboard-name: dashboard-view
- active-view: music
view_layout:
grid-area: nav
show:
mediaquery: "(min-width: 400px)"
- type: horizontal-stack
cards:
- type: custom:sonos-card
sections:
- groups
- volumes
- grouping
mediaBrowserItemsPerRow: 5
showVolumeUpAndDownButtons: false
showNonSonosPlayers: true
entities:
- media_player.keuken
- media_player.badkamer
- media_player.lounge
- media_player.livingroom
- media_player.nest_hub_bart
- media_player.nest_hub_jessie
- media_player.nest_hub_woonkamer
excludeItemsInEntitiesList: false
topFavorites:
- ""
dynamicVolumeSlider: true
hideGroupCurrentTrack: false
artworkAsBackground: true
title: Device
heightPercentage: 110
widthPercentage: 80
- type: custom:sonos-card
sections:
- player
widthPercentage: 120
title: Player
heightPercentage: 110
- type: custom:sonos-card
sections:
- media browser
widthPercentage: 100
title: Favorites
heightPercentage: 110
view_layout:
grid-area: line1
Thanks in advance !
Kr,
Bart
- title: Grid custom width
path: grid-custom-width
type: panel
cards:
- layout_type: custom:grid-layout
type: custom:layout-card
cards:
- type: custom:sonos-card
sections:
- groups
- grouping
- volumes
view_layout:
grid-area: left
- type: custom:sonos-card
sections:
- player
widthPercentage: 150
view_layout:
grid-area: mid
- type: custom:sonos-card
sections:
- media browser
- queue
view_layout:
grid-area: right
layout:
grid-template-areas: '"left mid right"'
grid-template-columns: 25% 50% 25%
grid-template-rows: auto
Renders:
1 Like
I have made a button that does that for me. Casts it to the Sonos.
This card takes care of the playback after that.
I used the code from above to show all 3 sections next to one another but they overlap. Any ideas why please?