Lovelace: Mini Media Player

I see this is a Github issue since 2026.03 beta and a fix is in the pipeline.

So seems to be an MMP problem that’s arisen due to changes in HA Core. Oh well these things happen.

Yes, the problem arose with 2026.3. The fix is available and works but hasn’t been released yet.

Yes, saw that. Any idea when it will be released? If it’s someway off, it’ll be worth manually copying in the updated .js, but if a new release with the fix is imminent, that might not be worth it.

No, but I saw that the original bug report was for 2026.3b0, the fix has been around for several days. So, I assumed that if it was going to get merged quickly, it would perhaps have been done by now, so just built and installed the fix, which works fine.

Edit: this is not necessary after 2026.3. See next comment below.

Hi. I wanted to have a floating player card for some time, but I never found anyone who did it. So I just did it and wanted to share, in case someone elase googles it in the future.

type: custom:mini-media-player
entity: media_player.spotify_antonio
artwork: cover
source: icon
hide:
  power: true
  source: true
  name: false
max_volume: 30
visibility:
  - condition: state
    entity: media_player.spotify_antonio
    state_not: idle
card_mod:
  style: |
    ha-card {
      position: fixed !important;
      bottom: 10px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 96.5% !important;
      max-width: 550px !important;
      margin: 0px !important;
    }
grid_options:
  columns: 12
  rows: 1

You can of course play with the size, width,… Mine is optimized for my iPhone 11 (it’s not the exact same size as shown in the video), so do yours.

How to deal with overlap at the bottom (player on top of the other cards):
I recommend putting it as the last card in the last section. Play with the layout (rows) size to help in full visibility of your other last card in mobile, or you might need to add some empty/header card at the end to help here too, eg:

type: heading
heading: " "
heading_style: subtitle
icon: " "
badges: []
visibility:
  - condition: state
    entity: media_player.spotify_antonio
    state_not: idle
  - condition: screen
    media_query: "(min-width: 0px) and (max-width: 767px)"

Cheers

In the latest version, you can now add a footer to the section layout.

1 Like

Oh gosh I totally missed that! That’s even better, thank you!

Well, it was a good exercise haha

The fix has been released this evening for the source dropdown problem with 2026.3.x

when the card is at the bottom of the screen it shows the source list at the bottom and not at the top of the card.

I’m up-to-date with the fix releases in 2026.3.x but still encounter this drop-down list issue. Do I have to something extra?

I have what I think is a similar problem with the shortcuts’ list. It is displayed at the very bottom of the card and since the card is at the bottom of the screen, the pop-up list disappears out of sight.

Although the screen can be scrolled to bring the list menu back into view, it would be better if the UI took notice of where it was and ensured the pop-up is displayed on the screen, so if at the bottom, make it a pop-up rather than a drop-down menu.

Is there anyway to make the list actually pop up?

Or if the list was placed above the buttons so more room for it to drop down. I tried but it always places the buttons above the list which is then at the very bottom, with the aforementioned problem.

Anyone found a way to avoid this issue?

Is there anyway to control the "status of color of a button"?

Example:

Here is my mini media player setup, and well it would be nice if one could for example highligt the selected source (Projector or Squeezebox Touch), or selected lamp mode of the projector (Dynamic or Natural). Also would be nice to do the same for the fixed volume buttons (as in, show which level it is currently at, so if it is between say 25 and 30 - no button is "marked", only when at matching levels, although I guess that might be harder). And just as the last two rows, which is radio stations (which are played over Squeezebox Touch).

Is there any way to control for example the background color of each button - and if so, is there anyway to have code that handles the logic behind (for example volume in this case)?

Is there a way to display the “media_album_name:” attribute from the media_player ?
My radio station of choice is Radio Paradise but I switch between the various options e.g. Radio Paradise Main Mix, Radio Paradise Mellow Mix etc. This is held in the “media album name” attribute but I can’t see a way to display it in the MMP.