Lovelace: Mini Media Player


consider_idle_after checks the media_position_updated_at attribute reported by the media player. It then compares that time with current time and if the time difference is larger than what’s specified in consider_idle_after, the card will render as “idle”.

  • 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

The following example would render the player idle after 0.5 minutes (30 sec) if media_position_updated_at isn’t updated, given the media player has media_position_updated_at set.

- type: "custom:mini-media-player"
  entity: ...
  consider_idle_after: 0.5

Here is what it should look like (sped up).


Thanks for explaining it a bit more. Now I understand why this is not working for me. When playing Tunein radio trough my Sonos speaker, there is no “media_position_updated_at:” available. Same goes for selecting TV as a source.

Would love an option “consider paused as idle”

When playing some random mp3, this is working as intended.


Okay I see, that’s unfortunate.
I could really only try this option with my Chromecasts and they seem to report media_position_updated_at for all types of playback.
Unfortunately the backend components differ quite a bit in their implementations.

I will add a consider_pause_idle option in the next release


New version: v0.9.1

  • Added: hide_media_info option #23

  • Added: consider_pause_idle option, to render the player idle while it’s paused

  • Added: parameter full for show_source, to display full source name

  • Added: (scroll_info) dynamic scroll speed, based on media information length

  • Changed: made shuffle button slightly larger

  • Fixed: alignment issue when group was set to true and artwork cover was present

@Patrick_HA @jacoblo


Works like a charm! Thanks!


Works great! Thanks a lot :slight_smile:


One thing is still not clear to me: can i delete mini-media-player.js or it must be still used in conjunction with mini-media-player-bundle.js. And in the ui-lovelace which one of the two i must use?

And why this difference between the two screenshots: The card says the audio cast in inactive while the more infos says playing?


You only need the mini-media-player-bundle.js.
That’s also what you should reference in ui-lovelace.yaml.

Did you set name: Audio Cast in the card configuration? Because that will only apply to the card itself. The more info dialog is part of core HA and nothing I can control.

If you want to change the name everywhere I would recommend you to look into Customizing entities.


I have the same issue with other streams, not just TuneIn. Think it’s possibly a HA limitation, which is why I would love to be able to set artist, track and album art data to a media_player…


Can you share your custom updater code please?

    - cards

Make sure you have the latest custom_updater, also press the “check” button on the tracker-card if you haven’t.


Is this correct:
type: custom:mini-media-player-bundle

As after changing this in ui-lovelace.yaml i get this?


And i have mini-media-player-bundle.js inside www folder.


No, you should use custom:mini-media-player in your card configs. However, you should reference to the mini-media-player-bundle.js file under resources: in ui-lovelace.yaml.

Go through the instructions in the initial post again if you are unsure.


Ah ok, now it’s clear… Thanks…


I’ve just updated to v0.9.1 and I’m seeing this:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry


This mini media card is the only one I use that refuses to update - it copies the js file but can’t update the Lovelace version. Other cards update fine. No idea why.


it updates for me. cut down sections of my files are below if it helps


custom_updater:   #
    - components
    - cards
    - python_scripts


  - url: /local/custom_ui/mini-media-player.js?v=0.9.1
    type: module


This seems to be a caching issue that sometimes occur after updates.
Restarting HA and/or clear browser cache should solve it.

If that doesn’t help, make sure you only got one reference to mini-media-player.js or mini-media-player-bundle.js under resources: in ui-lovelace.yaml.

  - url: /local/mini-media-player-bundle.js?v=0.9.1
    type: module

Try updating to the latest version of custom_updater if you haven’t already.


I have that but when there is an update, I click update and it copies the new js file but it doesn’t update lovelave version so I manually edit that and restart and all good. Other custom cards work.


  - url: /local/mini-media-player-bundle.js?ver=0.9.1
    type: module

as I’m using the bundle and it’s in the www folder, not custom_ui


Custom updater is up-to-date

My other custom cards are type js, not module…? Maybe that is the difference.