You can hide the icon on mini media player card, and add a button card on that location. The ‘more’ button I created (the circle with dots in them) opens the more-info dialogue. You can also envoke a popup using browser mod.
Thanks. I’ve gotten browser_mod popup to work, but do you know why it doesn’t accepts “this” as entity_id?
action: call-service
service: browser_mod.popup
service_data:
deviceID: this
style: |
:host .content {
width: calc(400px + 555px);
}
card:
type: custom:media_player-popup-card
actions:
- service: media_player.media_previous_track
service_data:
entity_id: this
name: previous
icon: mdi:skip-previous
- service: media_player.media_play_pause
service_data:
entity_id: this
name: play/pause
icon: mdi:play-pause
- service: media_player.media_next_track
service_data:
entity_id: this
name: next
icon: mdi:skip-next
You’re mixing up the commands and components. this command is for browser mod service calls. Where you need to use it as deviceID: this. You have that as well, so I believe you understand how browser mod works.
But in your code, you’re trying to use this inside media_player-popup-card. That card doesn’t support the this option. More info on media_player-popup-card and all the options see GitHub - DBuit/media_player-popup-card
Thanks for explaining. Put in entity: media_player.abdc. Now the popup works, but I get this?
How would you style it, to give it a clean look like in DBuit’s example?
It’s implemented in Matthias Persson’s setup, in a swipe card on your mini_media_player setup.
Thanks in advance
You’re missing the syle options. Since a few versions ago HA and browser mod changed, which change styling of popup cards. You can use DBuit’s example of his light popup-card. Change the settings to your liking 
GitHub - DBuit/light-popup-card: Lovelace card to use as custom pop-up for light in homekit style
Scroll below for his style codes.
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
Cool, thanks man!
Works perfectly.
Do you know if it’s possible to fully remove the “popup background” or make it fit the full screen?
Another question:
Have you found a nice way to use the built-in speaker group management. It looks like this for me…
1 Like
Hi , i tried to use your card and on the 3 dots placing the popup… but nothing show up.
any idea?
i actually have card mod but no configutation at all, shall i configure something in specific ?
thanks
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:dots-horizontal-circle'
type: 'custom:button-card'
size: 90%
style:
right: 18%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: browser_mod.popup
service_data:
deviceID: this
style: |
:host .content {
width: calc(400px + 555px);
}
card:
type: custom:media_player-popup-card
actions:
- service: media_player.media_previous_track
service_data:
entity_id: media_player.pi1
name: previous
icon: mdi:skip-previous
- service: media_player.media_play_pause
service_data:
entity_id: media_player.pi1
name: play/pause
icon: mdi:play-pause
- service: media_player.media_next_track
service_data:
entity_id: media_player.pi1
name: next
icon: mdi:skip-next
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
Hi @Umbe
Just made the exact same thing. I can see that you are trying to style the media_player-popup-card. It should be on the styling you have under browser_mod.popup.
See my config below.
action: call-service
service: browser_mod.popup
service_data:
title: Sonos Alrum
hide_header: true
deviceID: this
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: custom:media_player-popup-card
entity: media_player.alrum
icon: none
fullscreen: false
actions:
- service: media_player.media_previous_track
service_data:
entity_id: this
name: previous
icon: mdi:skip-previous
- service: media_player.media_play_pause
service_data:
entity_id: this
name: play/pause
icon: mdi:play-pause
- service: media_player.media_next_track
service_data:
entity_id: this
name: next
icon: mdi:skip-next
Hope it works
1 Like
thanks so much!!
just a question , you know why is on the left instead in the middle ?
and also how to fix the dot instead of the line of the volume ?
anyway… thanks!
Hi
Yes, just change to fullscreen: true.
Sorry no. That seems strange. Works fine for me
Hi , yes was that
fullscreen: false
thank you
Hello, I am curious to know what is your LMS setup and especially your card/lovelace setup.
I have a 3 RPi setup with PicorePlayer and a LMS server on MAC.but my lovelace setup sucks, I need inspiration and guidance. I am kinda new to the Home assistant world. Would you be kind enough to show your current setup, I would really like to be able to learn from you, I sould say learn MORE from you because you’ve been helping me learn a whole lot already.
Please please please 
I second that. 
s’il te plait tu rendrait un petit quebecois bien heureux!
Mais, je ne parle pas Francais.
If this help, you can look at “Burningstone91” Setup he is on Git:
2 Likes
Hi, a user recreated my previous setup and has shared his code. So you can use that
I now use a LMS webview in fullscreen, which I can access through Lovelace with webcard. There is not much to share about that, since its just my LMS server (with material skin) which I added the volume popup sliders to.
But that is a separate thing, this thread is only about the media player card, which I use on my dashboard as media entities.
This was my previous music setup: Show off your picture-elements uses - #259 by ASNNetworks
Now using this: Show off your picture-elements uses - #290 by ASNNetworks Which is LMS material skin (inside Lovelace and addes volume sliders).
1 Like
Thats also what Ive been using with my rpi4 + khadas LeTone 2 DAC. I am really digging this little DAC… its the best sounding thing i’ve bought… you should check it out its cheap for the sound quality… anyways im off topic. thanks for this answer ill go check it out. Ill let you know what ive ended up doing… thanks for answering!
Hi. How can i do to make this card fit in a swiper card? because of the multiple button card entity, it will not work.
Thxs
EDIT: Ok, i managed to do it by setting all the button card inside a picture element
How you make this ? Can you config delen whit me ?