Lovelace: Mini Media Player


Solved it by changing

  - type: module
    url: /local/mini-media-player?v=0.9.8


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

Edit: It worked for a few minutes, then went back to ‘element doesn’t exist’ again


I think it should be

url: /local/mini-media-player-bundle.js?v=0.9.8

but I don’t think that make a difference.


@leranp @Remco_Timmer
Make sure you’ve downloaded the latest bundle from the release page and, placed it inside your HA www directory.

Resource reference should look like this:

# ui-lovelace.yaml
  - url: /local/mini-media-player-bundle.js?v=0.9.8
    type: module

Make the url actually matches with where you’ve placed mini-media-player-bundle.js.

Try clearing cache.

If you are having this problem on an older device or browser, you can try changing type: module to type: js, like below:

# ui-lovelace.yaml
  - url: /local/mini-media-player-bundle.js?v=0.9.8
    type: js

If nothing above helps, please check the browser developer console for errors and get back to me :wink:


it doesn’t work for me, what do i need to add to configuration.yaml to catch the errors?


Nothing. Press F12 in Chrome/Firefox and press the console tab then navigate to the page where you see the error card and watch for errors in the console.


Card suggestion for Sonos Grouping function.

When grouped have the friendly name change to reflect that the player is now in a group.

Pseudo code where SonosGroupNameOption is a ui-lovelace.yaml config option to turn on this group naming method.

 _computeName() {
    if ( this.entity.attributes.sonos_group.length > 1 && SonosGroupNameOption)
        // probably wrong way to get name         
        const newName = this.entity.attributes.friendly_name + " " + this.entity.attributes.sonos_group[1].friendly_name;
        return newName;
    return || this.entity.attributes.friendly_name;


Great suggestion.
There’s actually already an indication to see if the Sonos is grouped or not, the Sonos button is slightly faded when the entity isn’t grouped, and fully opaque when grouped.

What do you think the name should change to when grouped?
Looking at your pseudo code the name would be “friendly_name” + “master speakers friendly_name”.
“Sonos bedroom” would become “Sonos bedroom Sonos Kitchen” when grouped.

What about something like this: “Sonos bedroom (grouped)” or “Sonos bedroom (master)” if it’s the master.

What do you think?


Ya, I see that the group icon changes colour which is cool.
Any of those naming options make sense. I don’t have my sonos named with “sonos …” just the speaker’s name, so grouped it would look like “Kitchen + Office” or whatever. Obviously it would get ridiculous to list all in the group, so the latter options would make more sense in that case. Maybe include the number in the group? Sonos bedroom +1, +2, etc.


Love the idea of having “friendly_name +(number_of_group_members)”.
It’s both shorter and provides additional information, only thing you would miss out on is if it’s the master or not.


I’m working on a system to hide my speakers when they aren’t the master so hopefully I won’t have that problem.


Great, I opened an issue on GitHub to track this and will include this feature in the next version.



0:1 Active resource loading counts reached a per-frame limit while the tab was in background. Network requests will be delayed until a previous loading finishes, or the tab is brought to the foreground. See for more details localhost:5000/@polymer/[email protected]%5E3.0.2/lib/mixins/properties-mixin.js?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED /frontend_latest/f472ba3cb4559cb19acc.chunk.js:5759 Uncaught (in promise) /local/button-card.js localhost:5000/@polymer/[email protected]%5E3.0.2/lib/utils/case-map.js?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED localhost:5000/[email protected]%5E0.10.0/lib/shady-render.js?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED localhost:5000/[email protected]%5E0.10.0/lib/lit-extended.js?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED localhost:5000/[email protected]%5E1.0.0-rc.1?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED /frontend_latest/f472ba3cb4559cb19acc.chunk.js:5759 Uncaught (in promise) /local/mini-media-player.js?v=0.9.8 localhost:5000/[email protected]%5E1.0.0-rc.1/lib/shady-render?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED localhost:5000/[email protected]%5E1.0.0-rc.1/lit-html?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED /api/media_player_proxy/media_player.living_room_tv?token=XXXXXXXXXXX&cache=XXXXXXXX:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error) media_player.living_room_tv:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error) f472ba3cb4559cb19acc.chunk.js:5759 Uncaught (in promise) /local/mini-media-player.js?v=0.9.8


Did you followe the instructions properly? and downloaded mini-media-player-bundle.js and not mini-media-player.js?

Error shows /local/mini-media-player.js?v=0.9.8 on several places as well as “ERR_CONNECTION_REFUSED” which indicates that you are using mini-media-player.js.


i tried both of them , now i have change only to bundle and this is the error log:
" Uncaught (in promise) TypeError: Failed to execute ‘fetch’ on ‘ServiceWorkerGlobalScope’: ‘only-if-cached’ can be set only with ‘same-origin’ mode
at Object. (
at ()
at n (
at Uncaught (in promise) TypeError: Failed to execute ‘fetch’ on ‘ServiceWorkerGlobalScope’: ‘only-if-cached’ can be set only with ‘same-origin’ mode
at Object. (
at ()
at n (



Sorry, actually have no idea what the issue could be then, never seen that before.


How do you use this in the new Lovelace UI editor?


You’ll want to add the module first in the raw config editor. (Top right three dot menu, Configure UI, then go to that menu again to open the raw config editor)

Be sure to save that, Then when you add a card, skip the card selection. You can put you card config there.


@vidvisionify answered this nicely already, I’ll also quote a post from a few weeks back regarding this.


Thank you!


I love this custom media player card ! It looks really great.
I have just installed the custom ps4 media player component (, which displays a local image for each game (the online file does not seem to work).
The image displays properly with the “state UI view” (which does not use the mini-media player card), but nothing shows up in the lovelace UI view as you can see on the screenshot below. Still, when I click on the card to display more info, I can see a small thumbnail.

Here is my ui-lovelace.yaml config :

      - entity: media_player.playstation_4
        type: custom:mini-media-player
        artwork: full-cover
        show_source: true
        hide_controls: true
        hide_volume: true
        show_progress: false
        group: true

Is there a config option to display this local game image in the frontend ?

Thank you !