Request: media player full album art

[Tedsterh]

Would it be possible to have the currently playing song art fill the card instead of the white background, maybe this could be an additional setting?

[DBuit]

Hi @Tedsterh it is possible but maybe it can already be done.

There are some nice media player card like https://community.home-assistant.io/t/lovelace-mini-media-player/68459 or default https://www.home-assistant.io/lovelace/media-control/ which show the album art.

So you could use the card as a tile function: https://github.com/DBuit/Homekit-panel-card#custom-card-as-a-tile

And load another lovelace card in a tile, overwrite some styles to make it fit. More people have done it

[Tedsterh]

Hi @DBuit I haven't used CSS before and I'm not sure where to start. Is there anyway of setting the height of the card to fill the parent card? At the minute it is only filling half the tile? I am using the mini-media-player inside a 1x2 tile.

[DBuit]

Hi @Tedsterh

you could try this:

                         - card: media-control
                            wider: true
                            higher: true
                            noPadding: true
                            cardOptions:
                              entity: media_player.keuken
                            cardStyle: |
                              ha-card {
                                height:100%;
                              }
                              .ratio {
                                padding-bottom: 70%!important;
                              }

[Tedsterh]

This works really well and I love the way it looks. Is there anyway to set the press and hold action to popup the media_player-popup-card so I can use the vertical slider for volume?

[DBuit]

Hi @Tedsterh ,

You cant use the popup from the homekit card because when you use the longpress action it won't trigger my card but it triggers the media-control card.

But what you can do is use browser_mod this component has popup_cards: that you can use to overwrite the default pop-up with a custom pop-up with the vertical volume slider.

[Freshhat]

Thanks, this is also working on my side. I only added additional stuff for the Title (current playing song) because the album art was overlaying that text:

cardStyle: | ha-card { height: 100%; } .ratio { padding-bottom: 70%!important; } .title-controls { width: 100%; height: 100%; }

Now everything is displayed in a correct way on my side:

[filikun]

I can't get this to work. By default with no CCS and default media card it looks like this. Tried adding CSS to it but would not get it. Any idea?

entities:
  - title: TEST
    entities:
      - card: media-control
        cardOptions:
          entity: media_player.apple_tv
        wider: true
        widerSize: 2
        noPadding: true

EDIT: For some reason this is only on bigger screen, on mobile it looks like it should

[Twours]

Hi,

Thank you for all this! Was exactly what I was looking for. It seems I can't change the name or the icon in the cadoption. How would I add an icon?