Trying it out now 
Thank you, works as expected !
Been using HA for about 2 weeks now and have learned a lot. I hit a brick wall with getting friendly names for speaker selections in all my media players. some of my Alexa devices show up as the friendly name and others look like ID names… This may be a simple fix but I am at a loss. Any help would be great.
3 Likes
Is it possible to adjust the height of the buttons?
I found:
{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: .2em 0;
}
I would like to add:
height: 70px;
to that css
My approch does not work:
[...]
- type: custom:mini-media-player
entity: media_player.forked_daapd_output_ug_keller
name: Sony Soundkegel UG
group: true
hide:
controls: true
style: |
.mmp-shortcuts__button > div {
height: 70px!important;
}
shortcuts:
columns: 4 # buttons per Row
buttons:
- id: "https://www.heise.de"
cover: /local/images/logos/1live.png
type: playlist
- id: "library:track:39026"
cover: /local/images/logos/wdr2.png
type: playlist
- id: "library:track:39027"
cover: /local/images/logos/wdr4.png
type: playlist
- id: "library:track:39028"
cover: /local/images/logos/1005.png
type: playlist
[...]
What i’am doing wrong here?
Another question: how can i call a url? I tried:
- type: custom:mini-media-player
entity: media_player.forked_daapd_output_ug_keller
name: Sony Soundkegel UG
group: true
hide:
controls: true
shortcuts:
columns: 4
buttons:
- id: "http://192.168.200.58:1880/select-id/?id=library:track:39024"
cover: /local/images/logos/1live.png
type: url
- id: "http://192.168.200.58:1880/select-id/?id=library:track:39025"
cover: /local/images/logos/wdr2.png
type: url
Pressing a button does nothing. Only the animation. I tried also with “channel” as Type. Did also not work.
Background: my player is daapd and i want to send REST calls (POST) to it (done by node-RED:1880).
Other solution may be to call the forked-dappd.mediaplayer entity with the correct id, but that did not work either (with my aproches).
I know. That’s the reason why i try to inject the css. I would like to know which place in the yaml (or if it is not the right position) and if the class is correct.
This is possible with any card.
Or i’am complete wrong here?
Could someone show an example with Google TTS in it please?
Im dumb and can’t follow the instructions
Is it possible to use and if template somehow for the icon? or any other possible way to fix it? 
shortcuts:
columns: 4
column_height: 1
buttons:
- type: service
icon: |
[[[
if (states['input_boolean.pausa_badrum_musik'].state == 'off') {
return 'mdi:speaker-off';
} else {
return 'mdi:speaker-on';
}
]]]
id: input_boolean.toggle
data:
entity_id: input_boolean.pausa_badrum_musik
i also tried with a template sensor but no icon appers… 
- icon: "{{ states('sensor.badrum_mute_icon') }}"
type: service
id: input_boolean.toggle
data:
entity_id: input_boolean.pausa_badrum_musik
- platform: template
sensors:
badrum_mute_icon:
friendly_name: ikea sensor mute icon
value_template: >
{% if is_state('input_boolean.pausa_badrum_musik', 'on') %}
'mdi:motion-sensor-off'
{% else %}
'mdi:motion-sensor'
{% endif %}
Hello everyone!
I’m new to the world of HA and it truly is amazing, coming over from a SmartThings and Philips Hue based system. I’m just getting to set everything up and been tinkering with this player and I almost got it to where I want it.
My questions are;
Is it possible to make the artwork go out to the edges on both sides and on the top? I don’t fancy that border.
In order to be able to control my Sonos speakers separate volume I had to group them in the Sonos app, but when I did that it added the ‘+2’ after all the names. How can I get rid of this?
Regarding the info of the song, is it possible to have the artist on top row and title of a second row intead of it all being on one row?
I think that’s all for now. It feels like these things are done in CSS, but I might be wrong?
Thanks in advance!
As @parautenbach explained, you need to use card-mod which can bring a CSS injection option into other cards. Here is a crude example of how I use it to style my own version of mini-media-player in combination with mediacontrol to browse my music. Don’t be confused, it’s overly complicated but illustrates the power of card-mod:
type: 'custom:stack-in-card'
cards:
- type: 'custom:mini-media-player'
entity: media_player.wohnzimmer_squeeze
artwork: none
icon: 'mdi:music'
hide:
volume: true
power: false
source: true
progress: true
info: true
card_mod:
style: |
ha-card div.mmp-player {
padding-bottom: 0px;
}
ha-card div.mmp-player__adds {
margin-left: 48px !important;
}
- type: media-control
entity: media_player.wohnzimmer_squeeze
card_mod:
style: |
paper-progress {
display: none;
}
div.media-info {
display: none;
}
div.top-info {
display: none;
}
div.background {
display: none;
}
ha-icon-button {
display: none;
}
mwc-icon-button {
margin-right: 12px;
}
div.title-controls {
padding: 0 0 0px;
}
div.player {
color: inherit !important;
}
div.off {
display: none;
}
- type: 'custom:mini-media-player'
entity: media_player.wohnzimmer_squeeze
hide:
volume: true
power: true
source: true
name: true
info: false
controls: true
progress: false
icon: true
state_label: true
card_mod:
style: |
ha-card.--inactive .mmp-player {
padding: 0px !important;
}
ha-card div.mmp-player {
padding-top: 0px;
}
ha-card div.entity__info__media {
color: var(--mmp-active-color);
padding-left: 48px;
}
mmp-powerstrip {
display: none;
}
- type: 'custom:mini-media-player'
entity: media_player.wohnzimmer_squeeze
name: Spotify
artwork: full-cover-fit
hide:
volume: true
power: true
source: true
name: true
info: true
controls: true
progress: true
icon: true
state_label: true
card_mod:
style: |
ha-card.--inactive .mmp-player {
padding: 0px !important;
}
ha-card .mmp-player {
padding: 0px;
}
results in the following for switched-off state:
and this while playing music:
P.S.: I feel tempted to use the power of button-card to overlay the media browse button with the title and progress display…
3 Likes
Thank you very much for you post and help! The is for sure the solution.
In the documentation on github it is stated:
source: Change source select appearance, icon for just an icon, full for the full source name.
Question: how do I define the icon for a source?! (not the entity!)
Second question: is it possible to change the displaying name of a (playing) source? The name of the radio station that I’m playing is very long and occupying too much real estate.
Thank you
First of all post your code properly, see here How to help us help you - or How to ask a good question
Sorry Nickrout,
My bad, I will try to post better next time!
People can maby help anyway and be nice?
/T
Maybe my configuration can help you to see how it is done. I have configured sources as icon + name:
type: 'custom:mini-media-player'
entity: media_player.spotify
name: Spotify
artwork: none
icon: 'mdi:spotify'
hide:
volume: true
power: true
source: true
progress: true
info: true
shortcuts:
label: null
hide_when_off: false
attribute: source
list:
- name: Wohnzimmer
type: service
id: spotcast.start
icon: 'mdi:speaker'
data:
device_name: Wohnzimmer
account: default
- name: Leo's Zimmer
type: service
id: spotcast.start
icon: 'mdi:speaker'
data:
device_name: Leo's Zimmer
account: default
- name: Alle Lautsprecher
type: service
id: spotcast.start
icon: 'mdi:speaker-multiple'
data:
device_name: Alle Lautsprecher
account: default
The sources drop-down then looks like this:
3 Likes
Thanks.
I think there’s a misunderstanding from my side. I wanted a custom icon for the radio station being played at the moment (thats my music source), but I think that is not possible…
Is that information available in Home Assistant?
yes it is. From my HEOS player, its available under the attribute:
source: radio_station_name
media_station: radio_station_name
actually I would like to rename the radio stadion in the frontend, but I’m not sure if this is possible, so the alternative would be to use a different icon for each radio station…
I had a similar challenge with a different media player, my Onkyo AV receiver. Using icons for the sources and only making a limited number of sources available (I never listen radio for example), I used the shortcuts feature like this:
type: 'custom:mini-media-player'
volume_stateless: false
hide:
controls: true
mute: true
source: true
power_state: false
shortcuts:
hide_when_off: true
attribute: source
columns: 6
buttons:
- icon: 'mdi:disc-player'
type: source
id: CD
- icon: 'mdi:monitor'
type: source
id: TV
- icon: 'mdi:sony-playstation'
type: source
id: PS3
- icon: 'mdi:cast'
type: source
id: Chromecast
- icon: 'mdi:amazon'
type: source
id: Amazon
- icon: 'mdi:dlna'
type: source
id: Net
artwork: material
toggle_power: true
entity: media_player.verstarker
The actual source selection is hidden and the list of shortcut items with type source reflects my choice with my individual icons. The id field lists the internal name that is matched with the entry of the source field to highlight which source is selected. In practice, this looks like this for my case:
You see my Chromecast source being active.
I have opted for buttons but this could as well be a dropdown list as shown in my last examples with the speakers. Same principle.