Hi @ASNNetworks
Really cool concept. I have been looking for something like it (not having the skills to do it myself).
Can’t wait to try and implement it in my setup. 
Great work man! 
1 Like
Hi @ASNNetworks
Didn’t last long untill I needed a hint 
I want to make the icon “multiple speakers” into a popup for further media control. Volume, group/ungroup my Sonos, etc.
Shouldn’t this work as a tap_action button?
- type: picture-elements
image: local/overlay.svg
style: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
elements:
- aspect_ratio: 1/1
entity: media_player.alrum
icon: 'mdi:speaker-multiple'
label: Sonos Connect
name: Alrum
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: true
show_name: false
show_state: false
tap_action:
action: none
style:
height: 100%
width: 100%
top: 50%
left: 50%
state:
- styles:
entity_picture:
- filter: grayscale(100%) blur(4px)
- transition: all 0.5s ease
value: paused
styles:
card:
- padding: 0px
- background-color: var(--card-background-off) #the color when there is no artwork, change or remove to use own color
entity_picture:
- border-radius: 20px
- height: 100%
- width: 100%
- position: absolute
- transition: all 0.5s ease
type: 'custom:button-card'
- type: 'custom:mod-card'
style:
'--mini-media-player-icon-color': var(--text-color) #change or remove to use own color
'--mini-media-player-base-color': var(--text-color) #change or remove to use own color
'--mini-media-player-accent-color': var(--music-accent-color) #change or remove to use own color
border-top-left-radius: 0px !important
border-top-right-radius: 0px !important
width: 100%
transform: 'translate(0%, -100%'
card:
artwork: none
entity: media_player.alrum
group: false
hide:
controls: true
icon: false
name: false
power: true
runtime: false
source: true
volume: true
hold_action:
action: none
tap_action: !include popup/popup_media_card.yaml
icon: 'mdi:speaker-multiple'
info: scroll
source: true
# change the styling variable below to the color and width of scrolling info you want. Change height or remove line for default.
style: |
.mmp-player {
background: rgba(0, 0, 0, 0.75) !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
height: 95px;
}
.entity__info {
max-width: 60% !important;
}
type: 'custom:mini-media-player'
Another question: Is there a way to integrate the volume slider in a nice way? Turning it to false, doesn’t look nice at all.
Thanks in advance
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!