Lovelace: Mini Media Player

Ok, so I’ve made some changes, and It would be great if you could try this version.

Don’t forget to change your card reference in ui-lovelace.yaml and add something like ?ver=0.8-beta at the end. Alternatively clear the browser cache

I run it with both default and custom theme but never seen the icons disappear.

I love this component!
Made some changes so that when a media player is paused, the media info text is grayed out (“disabled”) and the volume slider/buttons are removed. Found it easier to get an overview.

Feel free to use it, merge it, change it. Here is the committed changed:

(first time I change any home assistant component. Bear with a simple copy-paster)


That’s awesome! nice tweaks.
I actually did something similar with the artwork_border option, changes color if the player is playing


Here is what I did: I created a new file with your beta code and saved it as mini-media-player?ver=0.8-beta.js in www. Then I changed the resource in the ui-lovelace to the same name.

The answer I get is "Custom element doesn’t exist: mini-media-player.

If it works with the others on their default theme, then I guess it must be something on my end.

This is the code that I am using in ui-lovelace:

  - type: custom:mini-media-player
    entity: media_player.bad
    icon: 'mdi:cast'
    hide_power: true
    show_source: true
    title: Sonos Badezimmer
    more_info: false

Anything that may seem wrong here?

Your yaml code for the card looks good.
Try replacing your current mini-media-player.js with this version. and then change your reference as below (make sure the path matches the location of your mini-media-player.js):

  - url: /local/mini-media-player.js?ver=0.8-beta
    type: module

That should clear out the cache and let you try the fixes.

using those fixes above, still does not work.
I get the same error.


  • url: /local/mini-media-player.js?ver=0.8-beta
    type: module

Yep, same error here.

I’m sorry but I don’t know what to say more than to double check your files and paths. The only changes done to the card are style changes and can’t cause this error.

/local/mini-media-player.js equals /config/www/mini-media-player.js etc

Maybe try skipping the ?ver=* at the end, that is just to make sure you’re not loading the old version from cache.

1 Like

The funny thing is that is seems to have nothing to do with the background color. With the midnight theme, it still looks like this:

Ok, I think, I found a solution.


    artwork: color

does not show the cover as a background but it brings up the controls!

I have this code in my ui-lovelace.yaml:

  - type: custom:mini-media-player
    entity: media_player.bad
    icon: 'mdi:cast'
    artwork: color
    show_source: true
    more_info: false
    hide_power: true
    name: Badezimmer

This results in this view:

This is good. However, it would be nice to have the icon back with the cover thumbnail.

1 Like

Ok, that’s great, I’m still not sure what’s causing this issue though.
Thanks for all the information, hopefully I’ll figure this out sooner than later.

1 Like

2nd option for me too. Thanks

Available in the v0.7 release

Thank you for the hide_power. Looks better now. :slight_smile:

1 Like

hi @kalkih, I have artwork_border set to true, but I’m not seeing the border or I’m not understanding how to use it properly. Also, adding a title still leaves the old title on the card - is that by design?

Clear your browser cache perhaps?

Thanks, Works a charm.
Any way we could have an artwork for a group?
Trying to have a pic of a google mini for my GHM devices…

artwork_border doesn’t work with artwork: cover, that’s on purpose, I should clarify that in the instructions though.

As for the title, in your example it looks like you wrap mini-media-players inside an entities card with a title set. If you don’t want that outer title, remove it from your entities card.
The mini-media-player can’t alter things outside it’s own card, so this is by design.