Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
1

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

Preview Image
Preview Image1522×1337 236 KB

Instructions

Please visit the GitHub repository for installation and usage instructions.

Inspiration

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

98 Likes
2

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:

4 Likes
3

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

4

Been looking for something like this, thank you!

1 Like
5

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

v0.4.1

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

v0.4

  • 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

    v0.4 example
    v0.4 example1440×540 407 KB

v0.3

  • 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

v0.2

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

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


1 Like
7

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

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

1 Like
8

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.

example unavailable
example unavailable1038×212 8.4 KB

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

9

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.

10

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)

1 Like
12

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?

13

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

1 Like
14

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!

15

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.

1 Like
16

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.

2 Likes
17

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

1 Like
18

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

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

1 Like
19

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';
'''
1 Like
20

This is absolutely brilliant. Thanks a bunch

21

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