My media_player card

Configuration Frontend
1

mp22
mp22384×733 77.3 KB

type: custom:vertical-stack-in-card
cards:
  - clock_style: digital
    clock_size: small
    show_seconds: false
    no_background: true
    type: clock
    face_style: markers
  - type: entities
    entities:
      - entity: media_player.voice_mass_2
  - type: custom:button-card
    entity: media_player.voice_mass_2
    show_name: false
    show_state: false
    show_icon: false
    aspect_ratio: 1/1
    tap_action:
      action: navigate
      navigation_path: http://192.168.xx.xx:8123/xxxxxxxx_music_assistant
    hold_action:
      action: none
    styles:
      card:
        - border-radius: var(--ha-card-border-radius, 14px)
        - overflow: hidden
        - background-size: 100% 100%, contain
        - background-repeat: no-repeat, no-repeat
        - background-position: center, center
        - background-image: |
            [[[ 
              var url = states['media_player.voice_mass_2'].attributes.entity_picture_local
                || states['media_player.voice_mass_2'].attributes.entity_picture
                || '/local/images/playing.png';
              var gradient = 'linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%)';
              return gradient + ", url('" + url + "')";
            ]]]
  - type: custom:entity-attributes-card
    heading_name: []
    heading_state: []
    filter:
      include:
        - key: media_player.voice_mass_2.app_id
          name: aplikace
        - key: media_player.voice_mass_2.media_title
          name: název skladby
        - key: media_player.voice_mass_2.media_artist
          name: umělec
        - key: media_player.voice_mass_2.volume_level
          name: hlasitost
        - key: media_player.voice_mass_2.media_duration
          name: doba trvání
        - key: media_player.voice_mass_2.media_position
          name: stav
card_mod:
  prepend: true
  style: |
    ha-card {
       
      --ha-card-background: #36454F;
      
    }
2

mp23
mp23389×378 53.6 KB

type: custom:vertical-stack-in-card
cards:
  - type: media-control
    entity: media_player.voice_mass_2
  - type: custom:entity-attributes-card
    heading_name: []
    heading_state: []
    filter:
      include:
        - key: media_player.voice_mass_2.app_id
          name: aplikace
        - key: media_player.voice_mass_2.media_title
          name: název skladby
        - key: media_player.voice_mass_2.media_artist
          name: umělec
        - key: media_player.voice_mass_2.volume_level
          name: hlasitost
        - key: media_player.voice_mass_2.media_duration
          name: doba trvání
        - key: media_player.voice_mass_2.media_position
          name: stav
card_mod:
  prepend: true
  style: |
    ha-card {
       
      --ha-card-background: #36454F;
      
    }