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.
Thank you very much for this. Super easy to setup, instructions are nice and straight forward, and works perfectly.
Ignore the unavailable one, it’s just unplugged 
Thank you so much, I really appreciate the feedback! 
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.
resources:
- url: /local/mini-media-player.js?ver=0.4.1
type: js
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
artwork_border to show a border around the artwork, border color changes depending on players stateshow_tts optionvery 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 */
Hey,
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:
https://xxx.duckdns.org/local/mini-media-player.js?ver=0.4.1:5:40 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
resources:
- 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?
Thanks!
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.
resources:
- 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 
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 'https://unpkg.com/@polymer/lit-element@^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