Lovelace: Mini Media Player


@kalkih Is it possible to have the new background image go full background without the border? It was when I first loaded the card



Looks like you are nesting the mini-media-player inside an entities card?
The card can’t change/manipulate stuff higher up in the hierarchy (like the margins of the entities card in this case).

It will look better if you don’t nest it:


It’s part of a vertical stack but I wouldn’t think that should effect it. Could it be that it is grouped but the only media player in the group?

You’re right it was in entities card think this was when I used to have multiple media_players in the same card.



have you tried group: false ?


No, that can’t be it, the vertical stack does not add margins or paddings and doesn’t have a background.
It looks like the mini media player is wrapped inside something that has margins/paddings.

Would be awesome if you could (right click -> inspect) on the padding to bring up the html to easier figure out what it could be.



I added this line to my configuration file


But when I open my lovelace ui, its not showing under my tracker?

What am I missung?


Try this:

    - cards


Hi, it was working fine until yesterday, now something happened which I am not sure what it is.

On Chrome desktopo everything is fine, on Chrome Android the mini media player disappeared, I see at the bottom a popup service system_log/write called


Please check the system log for the error message, you can access it by pressing the icon in the lower right corner of the sidebar.


on my mobile[email protected]/lib/utils/async.js?module:42:11 Uncaught Error: _render() not implemented

16:53 components/system_log/ (ERROR)


Ugghh, seems to be an issue with the external dependency? Strange that it was working before, nothing should’ve changed in the last week.
Try clearing the browser cache or restart HA.


New Update: v0.8.8

  • .Added: hide_icon option to optionally hide the entity icon

  • Added: ellipsis instead of clipping the entity name if text overflows

  • Added: fade in/out effect for media info text when scroll_info is enabled

  • Added: various minimalistic transitions

  • Fixed: made ellipsis for media info or entity name text overflow work in more browsers

  • Fixed: Improved responsive design for small screens

  • Fixed: minor alignment issue of the mute button while using hide_controls

  • Removed: source select dropdown animation

    v0.8.8 example 2


Thanks man! Right on!


Great job.
Tusen tack!
It is possible to add an option name_from_source: true ?
Now I can do this by changing in the file mini-media-player.js
_computeName() { return || this.entity.attributes.source; }


Amazing to see this plugin getting further developed! It was amazing how easy it was to implement and how perfectly polished it was for my requirements off the bat.

Not sure if anyone else is using this with sonos and finds that players always remain with the last paused track on the front end (its a great feature on the actual devices - as I always just hit pause / play and get music cranking) however on the front end it bloats me with non-active players.

Might just be a sonos only issue - not sure if anyone else ran into it, they dont really have a “power” button on the unit when you finish listening.


Yes, I understand the problem, I think it’s mostly relevant to Sonos but could be relevant for various other players that doesn’t turn off (like the Spotify component).
I don’t own Sonos myself but I know Sonos doesn’t turn off like most other devices do, and as you said that it keeps the last played media available, to be able to quickly resume playback at a later point.
This is also the information the HA Sonos component is providing the frontend and also why the card think the Sonos is “active” even though you might consider it not.

I’m not sure how we best could solve this. The first idea that comes to my mind is to add an option to have the state paused & idle treated as off. That would have it’s downsides though as you wouldn’t be able to control the Sonos if it’s paused.
I’m not sure when the state idle is reported instead of paused, if for example the player reports idle after being paused for a certain amount of time we could potentially treat it as off. This would be a better solution imo (if it works).

Would be great if you could investigate when / what triggers the Sonos state change from paused to idle.


Thanks! :smiley:
That could certainly be added, however I don’t want to over saturate with configuration options.
I don’t think I’m going to add this, at least not now, unless I get more requests.


Looks like it state is left is “paused”

And my daughter always loves listening to Dora on our deck :wink:

It does have the date it was last updated at though… (2 days ago)

“volume_level”: 0.41,
“is_volume_muted”: false,
“media_content_type”: “music”,
“media_duration”: 84,
“media_position”: 82,
“media_position_updated_at”: “2018-10-24T07:59:25.395385+00:00”,
“media_title”: “Chasing A Ball Of String”,
“media_artist”: “Dora The Explorer”,
“media_album_name”: “Dora Rocks! Music From The Special & More!”,
“source_list”: [
“BBC Radio 1Xwtra”,
“Costa Del Mar (Chillout)”,
“Dora The Explorer Radio”,
“Flight Facilities Radio”,
“Hot Hits Australia”,
“Ibiza Global Radio”,
“Jazz Classics”,
“Late Night Jazz”,
“Ministry Of Sound: Chillout Sessions XI”,
“Monster Dance Hits”,
“Nova 969 96.9 (Top 40/Pop)”,
“Ocean Sounds — Ocean Waves Sounds”,
“Oldskool Radio”,
“Paul Kalkbrenner Radio”,
“Spanish Music”,
“Stew’s Birthday”,
“Stewart’s 2016 September Playlist”,
“Stews Playlist Oct 2015”,
“Ultimate Covers”,
“shuffle”: false,
“sonos_group”: [
“friendly_name”: “Deck”,
“entity_picture”: “/api/media_player_proxy/media_player.amp_deck?token=bfdae3ecc4758ab39861f260c1170d361aedd4f52e4914a649fefc91b89971c8&cache=c35bc081ed1c141e”,
“supported_features”: 64063


Haha :wink:

Alright, that’s unfortunate.

That’s interesting, perhaps we could use the media_position_updated_at to determine if the Sonos should be considered off? Hopefully it’s always present. What do you think?


Where do you specify those nice icons you use and are they somehow default?