Lovelace: Mini Media Player


It’s not possible with this card. This cards does only support tts through the tts component.
You could however fork the source code and modify a few lines of code in the _handleTts function to make it work for your use case.


WHat’s the difference between the mini-media-player and the one that is in the latest release (bundle)?

Should I change my old config to the new one using the new js file and resource?


Yes, I recommend you to change over to the bundle version. Here’s a quote from earlier regarding this.


Thanks - sorry I didn’t catch that part during the reading :slight_smile:


No worries, just happy to help! :slight_smile:


Thanks @kalkih! Nice trick, I wouldn’t have thought about this! Will keep that in mind. :slight_smile:
I managed to use the universal media player component to do what I want and it’s perfect now!


For some reason when using: show_progress it doesn’t seem to display?
Am I the only one experiencing this?


It’s not supported by all media players.
The players backend component need to expose the following attributes:

  • media_duration
  • media_position
  • media_position_updated_at

You can check if the media player exposes these attributes in the dev panel while playing something on the media player.


HA is still new to me. But I already love lovelace and Mini Media Player.
Is there a way to make media players always visible. Almost all of them disappear when I turn the device off.


I’m only using it on the spotify media player, which I thought would work.
I just noticed it on the pictures you had in your examples, so I assumed it work on that :blush:


Sounds strange, I don’t think it’s an issue related to this card though.
What type of media players are the ones that disappear?

Yeah, the Spotify component doesn’t report media progress unfortunately.
The example pictures are actually just mock-ups made in Sketch. :wink:


Hi Guys,

H E L P … getting the same error that a few others reported and I can’t figure out what I am doing wrong


In ui-lovelace.yaml:
- url: /local/mini-media-player-bundle.js?v=0.9.2
type: module

I have all the files in my config/www folder and also dowloaded the directory from GIThub in this folder

Cleared my cache, rebooted HA and my desktop computer, tried different browsers, operating systems.

Appreciate any help.

Thanks Hermen


Looks like you are missing the mini-media-player-bundle.js file in the www folder.
You can grab it from here.

That’s the only file you need, you can delete all other files related to mini media player. :slight_smile:


I’m sorry… thought that with ‘bundle’ you meant all the files in the zip-file. Thank you very much… up and running. Awesome development Kalkih!!


Awesome, happy to help, thank you!


New version v0.9.3

Including full artwork cover, responsive design improvements and new idle view option


  • Added: artwork: full-cover option to display the full artwork #31

  • Added: idle_view option to render an alternate view while player state is idle

  • Fixed: issue where power button color would not display correctly in idle view and power_color enabled

  • Fixed: responsive design improvements #30


Ignore this (A browser restart seems to have cleared the problem)


full-cover isn’t working and it’s giving me lovelace errors in the log

Log Details (ERROR)
Tue Nov 20 2018 10:15:16 GMT+1100 (Australian Eastern Daylight Time) Uncaught 

Actually the error might be because 2 media players aren’t available but it’s not displaying the full cover whereas the regular card is showing it.


Since the update, I keep getting those Uncaught


yep, same error here whenever a lovelace tab which contains the mini-media-player opens / is refreshed