Lovelace: Mini Media Player


Did you put the correct resource reference path in ui-lovelace.yaml, so that it points to the location where you saved mini-media-player-bundle.js.

Make sure you’ve cleared the cache.

Which OS/Browser are you running on?


what am i doing wrong here…

im trying to load this for the first time and following the instructions.

i have copied the mini-media-player-bundle.js into my www folder and the resource details into my lovelace raw editors. is that all there is to it? just go into the lovelace configure UI and create the card, thats what ive tried and cant get it to work.

i also have javascript_version: latest in my config.yaml

i checked the log and it had this:

019-01-10 21:41:27 ERROR (MainThread) [frontend.js.latest.201812112] https://xxxx/local/mini-media-player-bundle.js?v=0.9.8:1:53534 Uncaught NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

im a bit of a newbie so dont really have any idea!


Do you have more than one reference to mini-media-player.js or mini-media-player-bundle.js?


not that i can see? where else could/would i be referencing it?


In your lovelace raw configuration under resources.
The error seem to indicate that a custom element named mini-media-player already was defined.

Would be great if you could send me the complete raw configuration.


wasnt sure if there was anything too sensitive in there, so i PM’d you


What is the syntax to play a videofile as a media_button if I use kodi?


  • name: test
    type: video
    url: ?

Can I use smb instead of url? Or can I call a service or a script?


This is a truly awesome card, especially for grouping Sonos. Is there any way to create a dropdown for the “master” player so you can pick which player is master without having to create multiple cards?


First of all I want say thank you for making this card.

In my case I’m using it with Google Home and Kodi.
But there is a problem with Kodi.

No matter what I do, it always sends a turn_on request when using the power button.
It doesn’t matter if the device is already on, nor if I say “toggle_power: turn_off” in the config.

Using the “normal” media-player card works perfectly fine.
What am I doing wrong?


first thing first, excellent work!! :slight_smile:
it’s possible add a conditional option to hide a card of a media player if state is unavaible, i was thinking to use with chromecast attached to a tv, if the tv is switched off the card of the chromecast show as unavaible and it’s don’t look quite well!!


Just use the standard Lovelace conditional rule. I’m guessing that should work


The in parameters are basically fed directly into a media_player.play_media service call.

so type would translate to media_content_type & url/id (you can use either) translates to media_content_id.

There’s an example in the kodi component documentation utalizing media_player.play_media to switch channel but none for playing specific files. You could try setting url or id to the absolute path of the videofile, which might work, I don’t use Kodi myself so I’ve no experience of it.

  name: test
  type: video
  id: /absolute/path/to/video.mkv

But basically, if you can achieve it through media_player.play_media it is possible to do.

Thank you,
I decided against it when implementing the Sonos functionality, with the mindset of having each card only control itself and it’s own behaviour and not handle other entities/speakers.
It’s certainly possible to implement though, and might add it as an option in the future, if you open an issue in the github repo I won’t forget it.
Thanks for the feedback!

Thank you,
Hmm, I see the description for the toggle_power option is a bit unclear.
It actually only takes either true or false, if you set the option to true, pressing the power button will call media_player.toggle. Setting it to false or not specifying the option at all, pressing the power button will call media_player.turn_on if the entity state equals off otherwise media_player.turn_off.

Some media player platforms don’t really turn off and instead stay on with the state idle, The Spotify component and Sonos I believe. Is it possible Kodi has the same behaviour? If that’s the case, checkout the idle_view option.

As Dave said, this is possible with the use of a Conditional Card.


Ah I see.
Now it works.

Thanks a lot :heart:


Is there a way to adjust the text color? I have the cover art enabled and sometimes the text is dificult to read.


Yes, by applying/changing variables in your theme,
The color of the entity name is based on the primary-text-color variable and media information text is based on accent-color.


Is this suddenly not working for anyone else? I noticed it stopped working on my phone but was working on my desktop, but when I did a control-refresh (load without cache), it stopped working on my desktop, too. Instead, I get:

Custom element doesn't exist: mini-media-player

I have several other custom elements that work, except for dark-sky-weather-card and surveillance-card. The one thing that these three cards have in common, but that don’t appear in any of my other custom cards, is that they each import from


Unpkg seem to have problems at the moment. However, this card is no longer depending on these externally loaded dependencies, as long as you are using the bundle version available with each release.

If you haven’t made the switch to the bundle version yet I recommend you to make it now.
That will solve the issue and also make the card both load faster and available while offline.

Check out the instructions in the GitHub repo for up to date installation instructions.


Solved! Awesome. Now I need to see if the dark-sky card has a bundle…


i am still having this problem, tried to create the bundle from different version and it doesn’t work any more, before the unpkg problem i was using the regular mini-media-player (not the bundle ),
can someone please help me to solve this problem?


Same problem here: