Thanks a lot for your quick response. Looking forward to the update.
1 Like
Karl,
Thank you for your pointer re template sensors, very handy. Wrote software for 30 years in maybe 15 languages, still getting into yaml.
Been trying out the latest, it works great. Some comments:
Noted the accent color comments above, good to hear fix is coming. Nice if on/off colors could be set.
Using conditional cards is working out to be better than state-switch for my needs. See https://github.com/thomasloven/lovelace-state-switch for more details.
Conditional card problems:
-
Left and right margins change (become smaller) when your player is used in a conditional card. That is, narrower than the Lovelace defaults (not at all sure this is the player). That means, to line up elements, every player instance must be in a conditional card (with sometimes always true condition), or the margins will not line up.
-
the simple âtype: sectionâ line throws an error if used. Really need something to break up various sub-menus. How about a âdraw_lineâ option, ânone, top, button, bothâ.
Would be really handy to be able to hide an entire player, in addition to the shortcuts.
Would be nice if the sound modes pick list could go left of the power buttonâŠ
The attribute is working for source and sound_mode. Tried âchannelâ not supported, correct?
I have seen the control buttons become spaced out far if the info line is short.
Still working on a few things, will post a few samples in a few days, âŠ
Again, sorry for the (endless) UI tweaks suggestions, does not matter what you do or not, still more to comeâŠ, as you well know.
GREAT PLAYER !
You can set the accent color by setting the theme variable mini-media-player-accent-color in your theme. The accent color defaults to the theme variable accent-color if not set.
I donât notice any difference in my setup, can you provide a screenshot?
Sorry, I donât get what you mean, is this related to the mini-media-player card?
The conditional card could be used to achieve this.
As discussed before, the space is very limited in the top row, especially in busy configurations.
Noticed as well, thanks for repoting will take a look!
Thanks once again for the feedback, appreciated!
Is it possible to apply card-modder styles to the mini-media-player itself?
I have the mini-media-player inside a card-modder, which is inside a conditional card (to display if the sonos source is âTVâ, which is inside a vertical-stack.
The border radius and shadow are appearing behind the artwork, but donât seem to be applied to the artwork itself.
card:
type: vertical-stack
cards:
- type: conditional # TV Media Player Display
conditions:
- entity: binary_sensor.sonos_playing_tv
state: "on"
card:
type: custom:card-modder
style:
border-radius: 20px
border: 2px solid rgb(55, 62, 68)
margin-left: 8px
margin-right: 8px
box-shadow: 0px 4px 5px 4px rgb(66, 74, 82) #x offset, y offset, blur size, spread size, color
card:
type: custom:mini-media-player
entity: media_player.living_room
more_info: false
icon: mdi:television
artwork: cover
source: full
hide:
power: true
volume: true
controls: true
Card modder styles only apply to the root element of the card, the mini-media-player has a few nested elements to get the artwork to display properly.
Anyway, you could utilize the border-radius theme variable ha-card-border-radius.
You could set that in your theme (apply to all cards) or in card-modder (apply to specific cards).
This should do the trick.
# card modder
...
style:
--ha-card-border-radius: 20px
...
Although, I found an issue where the border-radius would not apply to âcollapsed cardsâ (when controls and/or volume is hidden)
Fixed the issue and will roll out a new release tonight, and then the card-modder example above should work.
Awesome setup btw, digging it a lot!
1 Like
Wow, fantastic work, thank you!
It works great on my desktop if I remove the hidden elements so I look forward to the new release!
Interestingly it doesnât seem to render on my iPhone (Beta 2.0 app, original app or chrome app on the iphone). Donât suppose you know why?
Desktop:
iPhone:
1 Like
Yeah, seeing the same on Safari (macOS), will take another look and see if it can be fixed!
The developer of the HEOS component is working on integrating grouping into the component. What would it take to add support to Mini Media Player for grouping with HEOS?
Karl,
Here is an example of the conditional card margin issue; the top card is all conditional elements, the bottom just using plain mini-media-player:
In order to keep the margins consistent all elements are conditional in the top card.
The issue with â- type: sectionâ is related to conditional cards only. It simple gives âCustom element doesnât exist: hui-section-card.â when used inside a conditional card (even if that is the only item). Works fine if not using conditional card. Likely not your issue, the reason for the line suggestion inside mini-media-player, was to get the line capability back when using conditional cards. Similarly, if an entire player could be hidden, then the issues would go away as well, -along with the margin issue.
Re sound mode in top line: understand space limitations, but but butâŠ, if not using controls or source, then really a nice spot for itâŠ
Also, is channel attribute supported when used with the attribute option?
Thank you again for your quick responses. Do you accept donations/gratitudes for your contributions?
1 Like
Was apparently a known WebKit issue.
New version v1.1.1
Fixes various 
s and issues
Changelog
Fixed
-
Incorrect spacing between media buttons
-
Incorrect spacing between volume buttons
-
border-radius not applying when card was collapsed
-
icon colors not changing correctly with icon state
1 Like
Awesome! It really depends on how itâs implemented, if itâs implemented similar to Sonos or yamaha_musiccast it would be really easy to add.
Interesting, not able to recreate that, are you sure you arenât using the group option in the mini-media-player config (that would remove paddings), if not please pm me your whole configuration and Iâll see if I can recreate the issue & potentially fix it
Iâve actually not played around with the conditional card that much so not sure about the section issue, sorry.
Haha yes, itâs indeed the superior location, could probably add an option for it, similar to source, but leave it as false by default.
All attributes should work as long as the entity exposes the attribute, what kind of device is it?
Sure you could always PayPal me @ [email protected], but absolutely not necessary, I do this for fun 
Re âchannelâ and attribute
The source and sound_mode is working great. When I try to use the new attribute feature (shortcuts is using "type: âchannelâ along with âattribute: sourceâ), then I get the default label. The device is DirecTV (the largest satellite TV service in the US), per the entity info panel, it is called source and contains an integer. Here is the entity info:
And the lovelace:
- card:
cards:
- attribute: source
entity: media_player.erik_directv
group: true
hide:
controls: false
icon: true
power_state: false
progress: true
volume: true
info: scroll
name: DirecTV
shortcuts:
list:
- id: 4
name: KOMO
type: channel
- id: 5
name: KING
type: channel
- id: 7
name: KIRO
type: channel
- id: 202
name: CNN
type: channel
- id: 360
name: FOX
type: channel
columns: 3
hide_when_off: true
label: Favorite Channels
type: 'custom:mini-media-player'
type: 'custom:vertical-stack-in-card'
conditions:
- entity: sensor.erik_receiver_source
state: DirecTV
type: conditional@kalkih Thank you, Iâve modified the theme as you suggested. BTW this workaround fixed also the color of active shortcut button
1 Like
Karl,
Yes, the color of active shortcut button works, and the occasional control button spacing is now consistent.
Also, the report about channel not working is âfake newsâ. It does work just fine. The attribute was in the wrong place, sorry.
Now, for some configurations, I have implemented automatic power on/off based on what devices is being used, using scripts. No active button when using scripts, could the active button be highlighted using the ânameâ key when using scripts? I do realize this is a bit different than using an entity variable. (Edit: I can trigger automations off source changes and eliminate using scripts.)
Just like scripts above, when using a Sonos Connect to play a playlist, the name of the playlist does not show up as a Sonos entity attribute.
I can imagine other shortcut types have similar issues, the same hack suggested for scripts and Sonos could fix that. Do recognize that on startup, the state would not be obtainable from the entity, to bad.
1 Like
Hi Karl,
Are you willing to add min_volume as an optional setting? I have some music players that arenât audible until about 60% of my max_volume setting. I would really like to adjust the min_volume to use more of the slider bar.
Thanks
1 Like
Oh yeah, group option saves a lot of space 
Could you send me an example configuration that has the margin issue when nested/not nested inside conditional cards?
Yeah, the problem with scripts, in particular, is that they are different entities (as you said) and I really donât want to watch for changes in other entities (other than the card entity).
I would really recommend doing something like @lukenn a few posts above for more advanced button states.
As for the playlist, yeah Iâm not exactly sure how/if Sonos exposes the active playlist in its attributes, but I fear it might be similar to the Spotify component.
If I, for example, start a playlist from the Spotify component it wonât expose the playlist uri in its attributes but instead expose the current track uri, making it impossible to know if a playlist is active or not.
Edit: Wow, thank you for the donation/tip Erik, really 
Great!
Yes, all accent color was essentially gone 
Latest release should fix this and shouldnât require the theme variable (although, it can still be useful).
Sure, great suggestion.
Karl,
A simple layout, First is using conditional cards, 2x yaml follows:
cards:
- card:
cards:
- entity: media_player.erik_receiver
group: true
hide:
controls: true
icon: true
info: true
name: false
power_state: false
source: true
volume: true
info: short
type: 'custom:mini-media-player'
type: 'custom:vertical-stack-in-card'
conditions:
- entity: group.all_automations
state: 'on'
type: conditional
- card:
cards:
- entity: media_player.erik_receiver
group: true
hide:
controls: true
hide_when_off: true
icon: true
info: true
name: true
power: true
source: true
volume: true
name: Erik Receiver Sound
shortcuts:
attribute: sound_mode
columns: 2
list:
- id: ALL_ZONE_STEREO
name: All Zone Stereo
type: sound_mode
- id: AUTO
name: Auto
type: sound_mode
- id: DOLBY_DIGITAL
name: Dolby Digital
type: sound_mode
- id: DTS_SURROUND
name: DTS Surround
type: sound_mode
- id: GAME
name: Game
type: sound_mode
- id: MCH_STEREO
name: Multi Channel Stereo
type: sound_mode
- id: MOVIE
name: Movie
type: sound_mode
- id: MUSIC
name: Music
type: sound_mode
- id: PURE_DIRECT
name: Pure Direct
type: sound_mode
- id: STEREO
name: Stereo
type: sound_mode
- id: VIRTUAL
name: Virtual
type: sound_mode
type: 'custom:mini-media-player'
- entity: media_player.erik_receiver
group: true
hide:
controls: true
icon: true
info: short
name: true
power: true
source: true
source: icon
type: 'custom:mini-media-player'
- entity: media_player.erik_receiver
group: true
hide:
controls: true
icon: true
info: false
name: true
power: true
source: true
volume: true
info: short
name: Erik Receiver Source
shortcuts:
attribute: source
buttons:
- id: Chromecast
name: Chromecast
type: source
- id: DirecTV
name: DirecTV
type: source
- id: FireTV
name: FireTV
type: source
- id: Front
name: Front
type: source
- id: PC 1
name: PC 1
type: source
- id: PC 2
name: PC 2
type: source
columns: 3
type: 'custom:mini-media-player'
type: 'custom:vertical-stack-in-card'
conditions:
- entity: media_player.erik_receiver
state_not: 'off'
type: conditional
- card:
cards:
- entity: media_player.erik_directv
group: true
hide:
controls: false
icon: true
power: true
progress: true
volume: true
info: scroll
name: DirecTV
shortcuts:
attribute: source
buttons:
- id: 4
name: KOMO
type: channel
- id: 5
name: KING
type: channel
- id: 7
name: KIRO
type: channel
- id: 202
name: CNN
type: channel
- id: 360
name: FOX
type: channel
columns: 3
hide_when_off: false
label: Favorite Channels
type: 'custom:mini-media-player'
type: 'custom:vertical-stack-in-card'
conditions:
- entity: sensor.erik_receiver_source
state: DirecTV
type: conditional
type: 'custom:vertical-stack-in-card'
No conditional cards:
entities:
- entity: media_player.erik_receiver
group: true
hide:
controls: true
icon: true
info: false
name: false
power_state: false
source: false
volume: true
info: short
name: Erik Receiver Plain
type: 'custom:mini-media-player'
- entity: media_player.erik_receiver
group: true
hide:
controls: true
hide_when_off: true
icon: true
info: short
name: true
power: true
source: true
volume: true
shortcuts:
attribute: sound_mode
columns: 2
list:
- id: script.ui_erik_sound_all_zone_stereo
name: All Zone Stereo
type: script
- id: script.ui_erik_sound_auto
name: Auto
type: script
- id: script.ui_erik_sound_dolby_digital
name: Dolby Digital
type: script
- id: script.ui_erik_sound_dts_surround
name: DTS Surround
type: script
- id: script.ui_erik_sound_game
name: Game
type: script
- id: script.ui_erik_sound_mch_stereo
name: Mch Stereo
type: script
- id: script.ui_erik_sound_movie
name: Movie
type: script
- id: script.ui_erik_sound_music
name: Music
type: script
- id: script.ui_erik_sound_pure_direct
name: Pure Direct
type: script
- id: script.ui_erik_sound_stereo
name: Stereo
type: script
- id: script.ui_erik_sound_virtual
name: Virtual
type: script
hide_when_off: true
type: 'custom:mini-media-player'
- entity: media_player.erik_receiver
group: true
hide:
controls: true
icon: true
info: short
name: true
power: true
source: true
type: 'custom:mini-media-player'
- entity: media_player.erik_receiver
group: true
hide:
controls: true
icon: true
info: short
name: true
power: true
source: true
volume: true
info: short
shortcuts:
attribute: source
buttons:
- id: Chromecast
name: Chromecast
type: source
- id: DirecTV
name: DirecTV
type: source
- id: FireTV
name: FireTV
type: source
- id: Front
name: Front
type: source
- id: PC 1
name: PC 1
type: source
- id: PC 2
name: PC 2
type: source
columns: 3
hide_when_off: true
type: 'custom:mini-media-player'
- entity: media_player.erik_directv
group: true
hide:
controls: false
icon: true
power_state: false
progress: true
volume: true
shortcuts:
attribute: source
buttons:
- id: 3
name: KOMO
type: channel
- id: 5
name: KING
type: channel
- id: 7
name: KIRO
type: channel
- id: 202
name: CNN
type: channel
- id: 360
name: FOX
type: channel
columns: 3
hide_when_off: true
type: 'custom:mini-media-player'
type: entitiesOkay, the first example doesnât seem to be wrapped in an entities card while the second config is, could that be it? The entities card adds a padding of 16px (I believe?). I donât notice anything strange otherwise, but I might be blind, so you might have to point it out for me 
That would explain it, thank you for taking a look.