Lovelace: Mini Media Player


Try like this:

- type: entity-filter
    - type: custom:mini-media-player
      entity: media_player.livingroom_directv
      icon: mdi:google-home
      group: true
      artwork: cover
    - playing
  show_empty: false

Let me know if it works :smiley:


That did the trick. Thanks!


Understood but manually updating it will then throw a red ‘update available’ in the custom card updater… I assume at some point you’ll update the version to this card.


Used the newest .9 beta, but still has the same token problem with .8
Error message from the source you linked, HA restartad, cache, cookie deleted.

http://localhost:8123/local/mini-media-player.js:293:27 Uncaught SyntaxError: Invalid or unexpected token

Put back the old 2~ months old js file and changed back to type:js and it works fine. No idea where it goes wrong.


Yes of course, when the code is ready a new version will be available.

If that is the case, I suspect you are running an old browser with no ES6 support. What browser are you using (including version)?

You could also try:


Oh, didn’t see anything about the need of ES6 support. I’m using Firefox 55.0.3.


You could try updating your browser and/or make sure you have javascript_version: latest in your configuration.yaml under frontend: .

The error is quite strange though, there shouldn’t really be any ES5/6 specific syntax on that line, If you are using the latest release.


@gerard33 & @Stewface
Ok guys, I made some changes with your feedback in mind.

  • When player is considered idle, progress/artwork/volume & media controls are hidden
  • When player is considered idle, media information (if available) is faded and restricted to one row
  • When player is considered idle and media is available/paused a play button is visible

Here is an example of the changes when the player switches to idle:


- entity: media_player.chromecast_sovrum
  type: "custom:mini-media-player"
  show_progress: true
  consider_idle_after: 10

Note that I renamed consider_off_after to consider_idle_after.

Once again, would be great if you can test run the code and give me feedback. :slightly_smiling_face:

  • You can grab the updated mini-media-player.js code here . replace your existing

  • Change your card reference to something like this (make sure the url path is correct)

    - url: /local/mini-media-player.js?v=0.8.9-beta2
      type: module
  • Add the new option consider_idle_after: x to your cards yaml, where x equals amount of minutes since media_position_updated_at

    - type: "custom:mini-media-player"
      consider_idle_after: 10


And where can I find the last non ES6 version?

Want to update Firefox but I cant, I’m using too much old addons for my work.


Alright, gotcha.
I think v0.4.1 should work.


Hi guys,

I tried to hide the player, when nothing is played:

- type: conditional
    - entity: media_player.spotify
      state: "playing"
    - type: custom:mini-media-player
      entity: media_player.spotify
      name: Spotify Player
      artwork: cover
      power_color: true
      hide_volume: true
      show_progress: true

But I get this error:

Did I config something wrong?


I do the same thing. Check out the snippet in this post…


Conditional cards are broken in 0.81.x releases. It is supposed to be fixed in 0.81.3 when it arrives…


Thanks for the awesome custom card @kalkih. I have it in my to-do list to make a video guide on different custom cards for Lovelace. Will definitely be covering your custom cards. :grinning:


Thanks you for the kinds words. :pray:
Love the videos man, have helped and inspired me a lot throughout my home automation journey!


Great card, use this with my Amazon Echos.
When playing specific artists it pulls down the cover artwork as expected, however I also use the Echo to play radio stations quite a bit.
It would be great to pick up the radio station and use a cover graphic for the radio station in question rather than staying blank as it does currently.


I know my Denon AVR show artwork from internet radio stations.

The artwork is grabbed from what’s reported by the players backend component. Sounds like either the echo or the echo component isn’t supporting artwork for radio stations.
If that’s the case I can’t really do anything about it.


Great card, love it!

I have a small problem though. This card uses ‘toggle’ on a power button press. The default ‘toggle’ behavior for a media player is like this:

if self.state in [STATE_OFF, STATE_IDLE]:
    return self.async_turn_on()
return self.async_turn_off()

I have a KODI player and it is often idle. You card shows a golden power button - and that is correct since it is really powered. When I press the button I expect the power to be turned off, but an attempt is made to turn it on again.
I do not know what is the best way to modify it and which component is responsible, probably the default media player behavior is wrong.
But could it be possible to modify your card as to use explicitly ‘turn_on’ and ‘turn_off’ services as a special option?


Thanks for the detailed explanation!
I see what you mean, and understand the issue.

I could add an option to use turn on / turn off services instead of toggle and consider idle as on.
I wonder what I should name the option though :thinking: :laughing:


What do you think about this #aeb990d?

Now you would be able to set toggle_power: false to have the card call turn_on / turn_off instead of toggle. Defaults to true.