But that isn’t what I need - want to supply the artwork, not set a background, they’re different things and display differently in the UI.
They display the same in my case, if I size the background appropriately.
But I see you’re not asking about a single, static image in case of no artwork, but instead artwork for whatever is playing.
I’m not aware of easy solutions for the latter. You’d need to make your own media player integration or use one of the available MQTT media players and inject a cover image on the right topic.
I think maybe I’m not explaining what I’m trying to do
Currently this is how MMP displays when TV is running in “Living Room”
Instead of this, I want to supply artwork image for the “Living Room” zone, so that it has the same size/appearance - if I just set a background, it wont change size.
If this isn’t possible, then maybe use card-mod to resize and do it?
Is what you’re showing two different cards?
Perhaps provide your current config for everyting we’re seeing there.
I think you’re confusing me with your terminology. Artwork is something dynamic. It depends on what’s playing.
Again, if you want to provide another source for artwork for a media player, you need to inject it somehow. I already gave my suggestions for what can be done on the backend, but if you want to use card-mod (if you have an ha-card element to target), you could see if you can manipulate the value of a tag (element) using the CSS content class. You cannot override existing content with this, because it uses pseudo classes to insert things before and after, but it would work for an existing but empty element.
Yes, these are two MMP cards, one for each zone - I want the TV zone to display an image as artwork
type: custom:mini-media-player
entity: media_player.living_room
artwork: full-cover
info: scroll
hide:
power: true
source: true
controls: true
group_button: true
volume: true
icon: true
type: custom:mini-media-player
entity: media_player.move
artwork: full-cover
info: scroll
hide:
power: true
source: true
controls: true
group_button: true
volume: true
icon: true
I think card-mod is probably the way to go, if I can supply the image and force it to display - but I’m not having much luck so far - this is what a normal zone with artwork looks like:
Edit: I’ve managed to get the artwork to change, but now I need to force that area to appear for the zone, it’s currently hidden
card_mod:
style: |
.cover {
background-image: url(/local/images/firetv.png) !important;
}
Looks like I need to change the setting for
ha-card
to include
–has-artwork
Is this possible in card_mod?
Worked it out - @parautenbach gave the hint I needed and set me on the right path - many thanks.
A MMP with a source that has no artwork, but displays same size as one that does. In addition the image is set depending on the TV source (from the Harmony integration)
type: custom:mini-media-player
entity: media_player.living_room
artwork: full-cover
background: /local/images/empty.png
info: scroll
hide:
power: true
source: true
controls: true
group_button: true
volume: true
icon: true
idle_view:
when_idle: false
when_paused: false
when_standby: false
card_mod:
style: |
.mmp__bg .cover.--bg {
background-image:
{% if states(config.entity) == 'playing' %}
{% if state_attr(config.entity, 'source') == 'TV' %}
{% if state_attr('remote.hublivingroom', 'current_activity') == 'Fire TV' %}
url('/local/images/firetv.png') !important;
{% elif state_attr('remote.hublivingroom', 'current_activity') == 'Virgin TV' %}
url('/local/images/virgin.jpg') !important;
{% elif state_attr('remote.hublivingroom', 'current_activity') == 'BluRay' %}
url('/local/images/bluray.png') !important;
{% elif state_attr('remote.hublivingroom', 'current_activity') == 'MAME' %}
url('/local/images/mame.png') !important;
{% elif state_attr('remote.hublivingroom', 'current_activity') == 'Nintendo' %}
url('/local/images/nintendo.png') !important;
{% endif %}
{% endif %}
{% endif %}
}
ha-card {
height: 200px;
width: 200px;
}
Note for this to work, there has to be a background image set - so I used a blank png from https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png
background: /local/images/empty.png
I then wrapped all this into an auto-entities card, so that it only displays zones/groups that are actually playing:
type: custom:auto-entities
show_empty: false
card:
type: entities
show_header_toggle: true
state_color: false
filter:
template: |
[
{% for player in states.media_player
| selectattr('state', 'eq', 'playing')
| selectattr('attributes.group_members', 'defined')
if player.attributes.group_members[0] == player.entity_id %}
{{
{
'type': 'custom:mini-media-player',
'entity' : player.entity_id,
'artwork' : 'full-cover',
'info' : 'scroll',
'background' : '/local/images/empty.png',
'hide': {
'power': true,
'source': true,
'controls': true,
'group_button': true,
'volume': true,
'icon': true
},
"card_mod": {
"style":
"ha-card { height: 200px !important; width: 200px }"
".mmp__bg .cover.--bg {
background-image:
{% if states(config.entity) == 'playing' %}
{% if state_attr(config.entity, 'source') == 'TV' %}
{% if state_attr('remote.hublivingroom', 'current_activity') == 'Fire TV' %}
url('/local/images/firetv.png') !important;
{% elif state_attr('remote.hublivingroom', 'current_activity') == 'Virgin TV' %}
url('/local/images/virgin.jpg') !important;
{% elif state_attr('remote.hublivingroom', 'current_activity') == 'BluRay' %}
url('/local/images/bluray.png') !important;
{% elif state_attr('remote.hublivingroom', 'current_activity') == 'MAME' %}
url('/local/images/mame.png') !important;
{% elif state_attr('remote.hublivingroom', 'current_activity') == 'Nintendo' %}
url('/local/images/nintendo.png') !important;
{% endif %}
{% endif %}
{% endif %}
}"
},
'speaker_group': {
'platform': 'sonos',
'show_group_count': true,
'entities': [
{
'entity_id': 'media_player.kitchen',
'name': 'Kitchen'
},
{
'entity_id': 'media_player.living_room',
'name': 'Living Room'
},
{
'entity_id': 'media_player.marcbed',
"name": "Marc"
},
{
'entity_id': 'media_player.mancave',
"name": "Mancave"
},
{
'entity_id': 'media_player.move',
'name': 'Move'
}
]
},
}
}},
{% endfor %}
]
grid_options:
columns: 7
rows: null
3 Likes
I’ve searched all over even asked ChatGPT. When I select source YouTube (media player is Apple TV) I don’t see an entity_picture update in the dev tools. it’s completely missing. Doesn’t YouTube provide a thumbnail? If not I was considering some sort of work around like setting the entity_picture when that source is selected. Any thoughts? Everything is updated to current running on an HA Green. While on this topic I was also curious if it’s possible to temporarily set a default channel image for entity_picture until a video is selected and playing. It can feel awkward when it’s displaying the last played music even though you’re browsing movies in Netflix.
I was going to suggest an IF statement! Glad you were able to figure it out! 
Hi all,
i have a short question:
ist it possible to hide somehow the “media_channel”, i want only to see the “media_series_title”
in this case: i’d like to hide “Sky Cinema Premiere HD” to see the full Movie name
would be happy if some of you have an idea
{{ state_attr('media_player.sky_q', 'media_channel') }}:
{{ state_attr('media_player.sky_q', 'media_series_title') }}
Thanks
I hope someone here may be able to assist me, i have been trying to figure this out for hours and I’m now pulling out my hair!
I’m attempting to use the tap_action service to open the spotify app by clicking on the player:
If I use that exact action call in a button card, or a custom mushroom badge, it opens spotify with no issues, yet, tapping on the player does nothing.
Hello,
I am finalizing the implementation in my dashboard and I would like to tweak it:
My code looks like this at the moment:
card_mod:
style: |
.entity__info__media {
opacity: 1 !important;
font-size: 22px;
}
:host {
--mini-media-player-scale: 1.2;
--mini-media-player-progress-height: 10px;
}
ha-card {
height: 120px;
}
Is there a way to:
- Change the color of the progress bar;
- Avoid the bottom part of the letters to be cut-off (see the g of ‘Chicago’) by what I suppose to be the background of controls;
Thanks
Add --mmp-accent-color: red; to change the progress bar color.
card_mod:
style: |
.entity__info__media {
opacity: 1 !important;
font-size: 22px;
}
:host {
--mini-media-player-scale: 1.2;
--mini-media-player-progress-height: 10px;
}
ha-card {
height: 120px;
--mmp-accent-color: red;
}
hi there.
i got my mini media player setup with my alexas at home
type: custom:mini-media-player
name: Wohnzimmer
shortcuts:
label: Radiosender
buttons:
- type: custom
name: Die neue Welle
id: spiele Die neue Welle auf tunein
- type: custom
name: Krone Hit
id: spiele Krone Hit auf tunein
- type: custom
name: Radio Regenbogen
id: spiele Radio Regenbogen auf tunein
- type: custom
name: Big FM
id: spiele Big FM auf tunein
artwork: material
entity: media_player.wohnzimmer
volume_stateless: false
group: false
sound_mode: full
info: scroll
now i would to like to add my other 3 alexa devices and maybe the speaker groups that i created with alexa.
is this possible and what would be the best way of doing this?
atm its looking like this
thx allot
That’s the favorites page from the Maxi media player punxaphil/maxi-media-player: Media card for Home Assistant UI with a focus on managing multiple media players, but not excluding single player setups.
I actually use that in combination with a mini media player button. The button toggles a helper, and then the visibility of the maxi media player page is set based on the helper. You can tell maxi to only show the favourites page, so it works quite nicely.
3 Likes
Really nobody know, or this is bot possible?
I believe the info you are trying to adjust is the streaming service data info. I would think that is a difficult prospect.
How do I set this up to use as a Kodi player, or does it just become the default player?
Just install Kodi through integrations and it will appear as a media player. It will then be selectable as an entity with the card.
For some reason, that player doesn’t show the Pause state. It only shows Play and Idle. I need Pause to trigger my lights to come on in HA. I was hoping this player would show the Pause state.