Custom UI: Mini media player


Beta-release, please report bugs and tell me what to improve.
Check config for setup info ( is my real player)

known issues:

  • CSS fixes for too long text

cache issues?
clear browser cache, on Chrome mobile: settings -> Privacy -> Clear browsing data


Looks nice. Is that google mini your referring too? Would be nice for all media players

Oh Nice! thanks, Ill try it out and let you know. I use sonos btw

I’ve been meaning to do something exactly like this! Thank you so much, this is great! I’ll report back if I run into any issues.

Hmm, not working for me.

  name: Home
  latitude: !secret home_lat
  longitude: !secret home_lon
  elevation: 391
  unit_system: imperial
  time_zone: America/Chicago
      icon: mdi:cast
      custom_ui_state_card: state-card-mini-media-player
        player: media_player.office_home
  javascript_version: latest
    - /local/custom_ui/state-card-mini-media-player.html
    name: Office Home

Still have the standard state card and the Input Text card is blank. Copied state card .html to www/custom_ui

Running 0.60 on a RPi3

ctrl+f5 had it popup. derp. thanks. this is excellent

Looking into adding some RESTful Sensors using the local Google Home API now:

This is ace, thank you!

Just wish you’d done it a week ago, would have saved me an hour of coding template switches I no longer need :joy::joy:

Do you have to hit ctrl+f5 when switching between panels and tabs? It also seems to not work on iOS browsers :frowning:

I’m having the same issue here - every time I switch to a new tab I have to ctrl-f5 to get it to show.

@eddi89 ?

Also, it’s not applying the icons and friendly names for me, and is pulling mdi:cast icon from somewhere (presumably it’s a HA default??), even though I’ve set them to mdi:play - interestingly the player that I have currently disconnected is applying the name and icon :confused:


(note no capitalisation on Boys and Bedroom)

      icon: mdi:play
      custom_ui_state_card: state-card-mini-media-player
        player: media_player.boys

      icon: mdi:play
      custom_ui_state_card: state-card-mini-media-player
        player: media_player.girls

      icon: mdi:play
      custom_ui_state_card: state-card-mini-media-player
        player: media_player.bedroom

    name: Boys

    name: Girls

    name: Bedroom

…and a quick suggestion, if I may (for when you iron the bugs out :stuck_out_tongue: )

On the standard HA interface when you click on the media player it gives you a text-to-speech box - could this do that too?

Disabling cache works for one tab, but I have these on multiple tabs and it does not work. Which ever tab I hit ctrl + f5 on will stick.

I’ve tried clearing the cache before I posted. Haven’t had a chance to look at disabling the cache, but it looks like the opposite problem almost, as in its not caching it when it should be so you have to reload the page to get it.

Let’s say I have 3 tabs and one of these on each. I restart HA and none of them are there. I’m on tab 1 and I refresh, the one on tab 1 appears, go to tab 2 or 3 and they’re still missing, but if I go back to tab 1 it’s still there.

So I go to tab 2 and refresh, tab 2’s one appears, but tab 1’s is now gone.

1 Like

Same observations here

1 Like

In fact, just to add, they’re not appearing on my phone at all, just the desktop.

Your custom_ui_tiles continue to work perfectly FYI :+1:

OK, done on phone (definitely as I had to log back in), no change, still not appearing, just an empty card.

Will have to wait to update you on the laptop, cheers :+1:

OK - I have:

  • deleted the old files and commented out the media player
  • rebooted HA
  • cleared the cache and local storage/session storage on my laptop and phone
  • added the new custom_ui files you updated on your github page for standard and es5
  • un-commented the media players
  • restarted HA

Problem persists as before, except now I can see them on my phone, but the behaviour on phone and laptop is identical, I can only have these on one tab at a time for some reason :cry:

[edit] and clicking on them does not give me a TTS option FYI :+1:

@eddi89 - any further ideas on this issue a couple of us are having?

Happy to grab any information you need from my system if you tell me what you need (and possibly how to obtain it)

Tiles work perfectly, media centres have to be refreshed each time you need them to show on a different tab from the one you last refreshed.

Thanks in advance :+1:

Thanks for a great project. @eddi89

I have done all my speakers 2 of BOSE Soundtouch 10, Google Home and 2 Google Mini.
and of course the spotify media player.


I was wondering if you can put into the popup that has the playlist buttons on the Spotify player the source select.

And not sure why this works with the BOSE speakers but not the Google home.

Thanks again.


Safari requires me to manually refresh the page to see the players (even then the players appear only sometimes). On the iPhone, the players never appear.