So, I have figured it out and updated my code! I managed to get the positioning right on all screen sizes. I don’t know if you still use my card, but I figured I’d share this.
The new and improved code uses better/less code and alters mini media player directly. You DON’T need the input_boolean anymore for the media bar on the bottom. I have also changed the size of the scrolling info to not go behind the side buttons.Also added some lines so the play/pause buttons have a different color when playing vs paused (for better readbility with white backgrounds. You can change this yourself to whatever you like. Basically change all the color codes to whatever you want or use your theme veriables.
And most importantly: if there is no artwork, the media info will still remain at the bottom !
Let me know if you have other questions. If you no longer use this card, that’s fine too!
Updated code
type: picture-elements
image: local/tablet/overlay.svg
style: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
elements:
- aspect_ratio: 1/1
entity: media_player.multispeakers_cast
icon: 'mdi:speaker-multiple'
label: Google Cast
name: Badkamer
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.multispeakers_cast
group: false
hide:
controls: true
icon: false
name: false
power: true
runtime: false
source: true
volume: true
hold_action:
action: none
tap_action:
action: none
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.
card_mod:
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'
#This here below is if you want to have the option to tap_hold anywhere on the card for more-info popup. Remove this part if not needed.
- aspect_ratio: 1.2/1
entity: media_player.multispeakers_cast
icon: 'mdi:speaker-multiple'
label: Google Cast
name: Badkamer
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: false
show_name: false
show_state: false
tap_action:
action: none
hold_action:
action: more-info
style:
height: 80%
width: 100%
top: 40%
left: 50%
styles:
card:
- filter: opacity(0%)
type: 'custom:button-card'
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-next-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.multispeakers_cast
style:
right: '-5%'
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.multispeakers_cast
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-previous-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.multispeakers_cast
style:
right: 55%
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: media_player.multispeakers_cast
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:pause-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.multispeakers_cast
style:
right: 10%
top: 50%
height: 40%
width: 40%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
icon: 'mdi:play-circle'
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.multispeakers_cast
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:heart-plus'
type: 'custom:button-card'
size: 90%
style:
right: 10%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: script.add_to_playlist_multispeakers_cast
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:power-standby'
type: 'custom:button-card'
size: 90%
style:
right: 2%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: media_player.turn_off
service_data:
entity_id: media_player.multispeakers_cast
haptic: medium
hold_action:
action: none
- 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.more_info
service_data:
entity_id: media_player.multispeakers_cast
deviceID: this
haptic: medium
hold_action:
action: none
Nice job! I wanted to do a pop-ip with your project, but, because I use instead of icons entity pictures, it doesn`t show the artwork.
I tried to modify to show entity_picture_local, but with no chance!
@ASSNetworks, my problem was that I use button card for a google mini and I dont use icon: , I use entity_picture. When I open a pop-up with your card, instead of the artcover it shows my customised entity_picture.
I attach a screenshot to see exactly.
But I for the media players I will not use anymore entity_picture.
Can you please show your pop-up for ispiration, maybe with the code also? Please
Though that one is with my older media card version (it’s updated now with the card you see in this thread).
I used Bob_NL’s code as inspiration for the music selector and script, but applied it to Spotify. In that thread you will find a guide of Bob_NL and others you can use to create that. My popup is basically that + my media player card inside a vertical-stack.
Currently I cannot post my exact code, because I have split it up in different .yaml files and decluttering variables. This will cost a lot of time for me to put them together. But the code is essentially the same as what I linked + my media card inside a vertical-stack. If you’re stuck you can poste your code and I’ll try my best to help you
Hi
Great job Indeed !
But i tried your code (updated)and got an error at gui stage
Cut / paste after using my entity player, removed comments
" config.style.forEach is not a fonction "
Any Idea ?
The code itself is fine, I copy/pasted your code in my test view in GUI and have no errors. Make sure you have everything setup before you try this code. This isn’t something you can just copy and paste and expect it to work. You need the custom cards that are used installed as well.
I see you use the exact same code for the image (with even the same location as me). Do you have the overlay.svg in that same folder? Do you have card-mod and mini-media-player card installed? Also the ‘add_to_playlist’ function is a script as you can see in the code. Do you have that script yourself? That script is inspired by this post: Save currently-playing song to Spotify playlist
Make sure you have everything setup properly before trying this card.
So you can confirm you have custom-button-card, mini-media-player and card-mod installed and working? And you have the overlay.svg in that location stored that you have in your code?
Please first check you have all the components needed installed ánd working. Otherwise I’m just wasting time trying to figure out what the issue is if that’s not certain.
Mod-card isn’t a patch. You can use that by simply using the code. Card mod needs to be fully installed and working ofcourse. Then you can just use the ‘mod-card’ part of my code, no patch needed.
Hi again me
I finally know hos to solve the problem and I would like to share it with you in case of other diag from you.
I opened an issue at card-mod and at hacs without succes
AND I finally found what was wrong from my side :
Each style block have been change to fix it on my installation :
style:
height: 80%
width: 100%
top: 40%
left: 50%
instead of 2 spaces in front of each attribute for style
Now I have no error but i dont have the miniplayer occupying the whole overlaping
What should be change to have the size of mini player alligne with overlay ?
I tried to change height without success
The card is already setup properly to have the mini player alligne with the overlay, that’s the whole point of the syling I experimented with myself. Honestly I have no clue what you’re doing and why it doesn’t work for you. Other users have copied the code, pasted it and edited the entities and variables. And have it working. Theres nothing I can do to check, because the code works for me everytime. Even the code you gave me which gave you issues, works fine on my system.
Edit: Judging by your code you are not using card mod correctly. You say:
instead of 2 spaces in front of each attribute for style
You left out the indentations (the 2 spaces), which simply removes the whole style. That’s why your card is not alligned, because you have NO style setup. Your issue is card mod and how to use it. I honestly think you’re not totally sure how card-mod works, which gives you issues.
So you didn’t ‘fix’ anything and you didn’t find out what was wrong on your side. You simply changed the code of style, which made the code become empty. Removing the spaces literally takes out the style. It HAS to have the spaces in order for card mod to even function.
Edit 2: reading your Github ticket now and I think you are confused about card-mod and mod-card. Which are part of the same component, but used very differently. If you have card-mod installed and you have succesfully styled something (like on Github screenshot), then my code should work for you now. Just copy it, edit the parts and save it. USE the indentations, do NOT remove the spaces under style.
!
