Lovelace: Mini Media Player


Mini Media Player

A minimalistic yet customizable media player card for Home Assistant Lovelace UI.

Inspired by Custom UI: Mini media player and custom-lovelace.

NEW - Support for Sonos group arrangement


Please visit the GitHub repository for installation and usage instructions.


Let me know if you have any questions, issues or suggestions!

My latest Lovelace Screens [Updated]
Formatting of media player in dashboard without image and with volume control
Playstation 4/PS4 custom component
Lovelace media-control size?
Grouping Sonos Speakers
Clear Theme
Grouping Sonos Speakers
Palm Springs Theme

Thank you very much for this. Super easy to setup, instructions are nice and straight forward, and works perfectly.

lovelace%20media%201 lovelace%20media%202 lovelace%20media%203

Ignore the unavailable one, it’s just unplugged :wink:


Thank you so much, I really appreciate the feedback! :slight_smile:


Been looking for something like this, thank you!


I’ve updated this card a few times since first posting here. If you are using this card I recommend you to grab the latest version for much improved performance as well as new features.

Don’t forget to add the new version number to the end of the cards reference url in your ui-lovelace.yaml like below.

  - url: /local/mini-media-player.js?ver=0.4.1
    type: js


  • Fixed bug where attributes did not update when device state changed to off or unavailable


  • Major code rewrite with much improved rendering performance

  • Added new artwork option cover to display artwork as the cards background image

  • Added new option power_color for colored on/off button depending on power state

  • Added translation for unavailable string

  • Fixed bug with Text-To-Speech not working

  • Fixed duplicate top padding when title option was set


  • Added new option artwork_border to show a border around the artwork, border color changes depending on players state
  • Added translation support
  • Text-To-Speech input placeholder is now translated to the language of your Home Assistant instance
  • Minor style changes, Text-To-Speech input is now slightly transparent while not focused


  • Added support to show Text-To-Speech input with the show_tts option


very nice project!

One request if I may:- have 3 states of the icon colour so that there is another colour (perhaps red) if the device is ‘unavailable’. One thing that bugs me about HA’s integration with Google Home ‘groups’ is that they sometime become unavailable for extended periods and the only way I will know is to have the icon change to a different colour.

I hope I haven’t brought up something that already exists as a feature in your project since I wont know if the group is unavailable until it happens…


If I download the mini-media-player.js file from github. I only get the version 0.3?

/* mini-media-player - version: v0.3 */


Normal media_player entities change state to unavailable while they can’t be reached, I’m not sure if Google Home groups does this, but they should. I then use this state information to display Unavailable on the card instead of the on/off button, like below.

Do you think this will work for you? let me know!


I’m so stupid, I’ve completely forgot to change the version number in that comment of the code.
That is the latest version aka v0.4.1 so you’ll be fine!

Sorry about the confusion.


Now I get this Error: TypeError: this.createShadowRoot is not a function. (In 'this.createShadowRoot()', 'this.createShadowRoot' is undefined)


Sorry to hear that.
That is a browser compatibility issue and I think I’ve solved it with the latest release v0.5.
Please try updating, and make sure to change the version number in your ui-lovelace.yaml

  - url: /local/mini-media-player.js?ver=0.5

What browser are you using by the way?


I’m getting this now with latest.
Uncaught SyntaxError: Unexpected token {


Hmm… Make sure you have javascript_version: latest in your configuration.yaml under frontend:, then restart HA.
Is that the whole error output from the log? Can you click it and see if you get more information?



This is the whole thing, but doesn’t tell you much more I guess…
myip/local/lovelace/mini-media-player.js?1537452641.264382&v=0.5:2:8 Uncaught SyntaxError: Unexpected token {

And I’m getting the red square with “custom element doesnt exist”
I’m on latest Chrome and latest javascript version.


I think I’ve figured out the issue now!
The resource type should be set to module and not js, like below.

  - url: /local/mini-media-player.js
    type: module

I hope this will resolve your issue.


Now it works fine for me!
Thank you!!!


Very nice! This is exactly what I was looking for :grinning:

And which HA theme are you using? That is looking great as well.


BTW, your OP here still has

   type: js

Thank you so much for this card!

Unrelated: I see this module has the following on the first line. Will this cause it to not work when the internet is down? If so, is there a way around it?

import { LitElement, html } from '[email protected]^0.6.1/lit-element.js?module';


This is absolutely brilliant. Thanks a bunch


That’s great to hear.
Thank you for your help and patience