Hi,
I’m trying to combine a custom:mini-media-player and custom:button-card into one card, It’s partly working but the output is not what i was hoping for. I’m trying to keep the layout of my button-card the same and have the volume slider inside it. For some reason i can’t figure it out or don’t know if it’s actually possible.
After trying different things i ended with the card below, but like you see it’s total different card than the one i had before.
So my question is if it will be possible wat i’m trying to accomplish and how the code will look. I added the code of the two cards below so hopefully there is someone that can help me with it.
First cards (button-card + mini-media-player):
type: 'custom:button-card'
entity: media_player.sonos_keuken
hold_action:
action: more-info
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.sonos_keuken
icon: 'mdi:speaker'
name: Play One keuken
color: 'rgb(255, 197, 64)'
state:
- value: paused
icon: 'mdi:speaker-off'
color: 'rgb(85, 145, 194)'
layout: icon_name_state2nd
show_state: true
label: |
[[[
var bri = states['media_player.sonos_keuken'].attributes.volume_level;
return 'Volume: ' + (bri ? Math.round(bri / 2.55) : '0') + '%';
]]]
styles:
card:
- height: 80px
- justify-self: start
- font-size: 20px
- padding: 0px 10px
type: 'custom:mini-media-player'
hide:
name: true
icon: true
info: true
power: true
source: true
mute: true
controls: true
scale: '0.1'
entity: media_player.sonos_keuken
Second card:
type: 'custom:button-card'
styles:
card:
- justify-self: start
- font-size: 20px
- padding: 0px 30px
grid:
- grid-template-areas: '"n" "i" "l" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: min-content fr min-content min-content
size: 20%
layout: icon_name_state
show_state: true
icon: 'mdi:speaker'
name: Play One keuken
color: 'rgb(255, 197, 64)'
hold_action:
action: more-info
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.sonos_keuken
state:
- value: paused
icon: 'mdi:speaker-off'
color: 'rgb(85, 145, 194)'
custom_fields:
slider:
card:
full_row: true
hide_state: true
type: 'custom:slider-entity-row'
step: 1
entity: media_player.sonos_keuken
entity: media_player.sonos_keuken