Custom:button-card + custom:mini-media-player

Configuration Frontend
1

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.

Button Card with external volume slider
Button Card with external volume slider789×228 9.41 KB

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.

Button card
Button card786×355 11.3 KB

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
2

Hey, I would like to try to help you with that…

If I understand correctly, then the top first card is the one from your layout. correct ?
if you now add a custom_field, it will be placed “under” the existing card.

I really like working with “grid_area” here. You already use these, but you have to define them differently (better).

please have a look at this page. it will help you a lot in the future if you want to include custom_fields.

there is of course a lot of information that you then want to display in this “narrow” map.
icon - name - state and slider ?!
without getting “higher” here, very difficult.
possibly one could say that one might get “double” as high?

Bildschirmfoto 2022-04-03 um 07.21.13
Bildschirmfoto 2022-04-03 um 07.21.13884×484 4.62 KB 

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: false
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
  grid:
    - grid-template-areas: '"i . ." "i n ." "i slider slider"'
    - grid-template-columns: 0.5fr min-content 1fr
    - grid-template-rows: min-content min-content
custom_fields:
  slider:
    card:
      full_row: true
      hide_state: true
      type: custom:slider-entity-row
      entity: media_player. sonos_keuken
      step: 1
    overflow: unset
3

Thanks for the reponse but already accomplished this a year ago. :slight_smile:

4

ohh sure ^^
well, at least someone answered ^^

I think you’ve answered your own question by now ^^

1 Like
5

But it has helped me. Thanks a lot, much appreciated. If you have any idea how to stop an item (string) overflowing in a grid cell I’d love to know. It’s driving me crazy.