Lovelace: Mini Media Player


I’m using HA version 0.84.2 running on Windows 10. I installed some custom cards before & all works. However, now facing the error below when installing custom mini-meddia-player:
Custom element doesn’t exist: mini-media-player.
“entity”: “media_player.living_room_tv”,
“type”: “custom:mini-media-player”
Following the instruction, I did exactly the same every steps to install but eventually all end-up with the error Custom element doesn’t exist: mini-media-player. Anybody have same issue like me? :frowning:


That’s cool!
I don’t know how a potential integration would work, but you could certainly borrow some of the code when building your card.

Hey, what does your resource reference look like?


Hi, this is my resources looks like. I also did trying change type from ‘module’ to ‘js’ but no luck :frowning:

> resources:
>   - type: module
>     url: /local/button-card.js
>   - type: js
>     url: /local/slider-entity-row.js
>   - type: css
>     url: /local/my-webfont.css
>   - type: module
>     url: /local/mini-media-player-bundle.js?v=0.9.7

It’s really strange since I applied successfully custom plug-ins like slider-endity-row but failed for mini-media-player & button-card.
Thanks for your response!


That looks fine, except the “>” symbols, they shouldn’t be there? But maybe that’s just a format error when you posted it here.

Hmmm… Did you place the mini-media-player-bundle.js file directly inside your www folder or did you put it somewhere else?

Or are you possibly running a really old browser?


Can I use this card if I use the Lovelace GUI mode? There is no ui-lovelace.yaml file. Have I to create this file? Even if I use the storage lovelace mode?


I’m running it just fine using storage mode for the lovelace YAML file.


same problem all was working fine untill i updated hassio to 0.84.6 and configured my lovelace to use yaml file. all my other custom cards still work fine


New version v0.9.8

Replace mute option, media button icons & more…

And as usual, visit the Github repo for the updated readme, with instructions and examples.


  • Added: replace_mute option #43

  • Added: icon option to media object (media buttons/list)

  • Changed: made name option for media object (media buttons/list) optional

  • Changed: renamed media item object url option to id (you can still use url for now)

  • Changed: new shuffle icon style

  • Fixed: more_info not working when using card inside entities card #44

  • Fixed: animation improvements

  • Fixed: cleaned up & removed redundant code

  • Fixed: bumped dependencies



Yes you can, you just need to add the resource reference to mini-media-player-bundle.js in the auto generated lovelace file stored in /config/storage/lovelace instead of adding it in ui-lovelace.yaml.

I personally wasn’t able to use the “Raw config editor” in the GUI (left me with a blank file) so I had to open the file in a text editor to make the changes.

The beginning of the file should look something like this:

    "data": {
        "config": {
            "resources": [
                    "type": "module",
                    "url": "/local/mini-media-player/mini-media-player-bundle.js?v=0.9.8"
            "theme": "default",
            "title": "Home Assistant",
            "views": [

And when you want to add a mini-media-player card from the “Edit UI” GUI, just select media-control card (or any other card) and replace type: media-control with type: custom:mini-media-player, and then continue on with the rest of the options


Can you show an example about how to use the new options replace_mute and icon?


Here’s the yaml from the example screenshot.

# Example ui-lovelace.yaml entry
- entity: media_player.television
  type: custom:mini-media-player
  hide_controls: true
  replace_mute: play
    - icon: mdi:youtube
      name: YouTube
      type: ...
      id: ...
    - icon: mdi:google-play
      name: Google Play
      type: ...
      id: ...
    - icon: mdi:spotify
      type: ...
      id: ...



Thank you very much for your detailed explanation!
It works!


Can anyone show me a working example for the media_button for Sonos speaker?

  - name: RA-Heavy Metal
    type: music
    url: ''

I get this error:
ERROR (SyncWorker_1) [homeassistant.components.media_player.sonos] Error on play_media with UPnP Error 800 received: from



I have been trying to get the sonos_grouping to work in lovelace storage mode. Is this the only place where the groups need to be defined? I have added the configuration and made sure hide_power: true as it appears the grouping option is in the same location as power. However they never show up. just making sure I did not need additional configuration in another .yaml flie somewhere?

Here is the config I am using.
type: ‘custom:mini-media-player’
artwork: cover
hide_power: true
- entity_id:
name: Sonos Loft
- entity_id:
name: Sonos Kitchen



You don’t necessarily have to to hide the power button, the Sonos group button should show up either way as long as you got the latest version of the card and a valid config. And It should work the same in storage mode.

Since you didn’t post your config as a code block I can’t check if the indentation is correct.

Here is what it should look like:

- entity:
  type: ‘custom:mini-media-player’
  artwork: cover
  hide_power: true
    - entity_id:
      name: Sonos Loft
    - entity_id:
      name: Sonos Kitchen

If you recently updated your card from an older version, try clearing your browser cache and check if it works. If not, let me know.


I did clear the cache and I just grabbed the latest bundle as of today. I tried both safari and chrome with same result.



Very strange, if you are sure you are running version v0.9.6 or later of the card, I’m not sure what the issue could be.

I switched over to storage mode to check, and I don’t have the issue (see below)

Do you see any errors in the browser console log?


Well, You were correct I had an older version of the bundle that was loading. Thanks for all the help and sorry for not double checking it sooner.



This config is working for me.

  - name: 538
    type: music


@kalkih kudos to you!

This little plugin has seen some amazing progress the last few weeks! Very impressive - thank you for all your hard work!