Speaker artist card

[acesyde]

Preview

Description

Similar to the ‘Television source’ card, but more functional. Due to the use of song covers as thumbnails and a blurred background, we need to use two custom button-cards here. One as a container and the other for the content.

Todo

• translations
• editor
• card
• documentation

Button card code

type: custom:button-card
entity: media_player.sonos
show_entity_picture: true
show_name: false
tap_action:
  action: more-info
styles:
  grid:
    - grid-template-areas: '"info"'
    - grid-template-columns: 1fr
    - grid-template-rows: min-content
  card:
    - background: none
    - padding: 0
    - position: relative
    - '--mdc-ripple-press-opacity': 0
  img_cell:
    - position: absolute
  icon:
    - width: 150%
    - opacity: var(--color-tint)
    - '-webkit-filter': blur(20px)
    - '-moz-filter': blur(20px)
    - '-o-filter': blur(20px)
    - '-ms-filter': blur(20px)
    - filter: blur(20px)
custom_fields:
  info:
    card:
      type: custom:button-card
      entity: media_player.sonos
      show_entity_picture: true
      name: |
        [[[
          if (states['media_player.sonos'].attributes.media_title)
            return states['media_player.sonos'].attributes.media_title;
          else
            return "Nothing is playing";
        ]]]
      label: |
        [[[
          if (states['media_player.sonos'].attributes.media_artist)
            return states['media_player.sonos'].attributes.media_artist;
          else
            return "";
        ]]]
      show_label: true
      show_icon: true
      styles:
        grid:
          - grid-template-areas: '"i gutter n" "i gutter l"'
          - grid-template-columns: min-content 24px 1fr
          - grid-template-rows: min-content
        card:
          - font-family: hk nova medium
          - background: none
          - border-radius: 0
          - background: none
          - padding: 24px
          - '--mdc-ripple-press-opacity': 0
        img_cell:
          - height: 80px
          - width: 80px
          - border-radius: 16px
        icon:
          - height: 100%
          - width: 100%
        name:
          - font-size: 16px
          - color: var(--contrast20)
          - width: 100%
          - text-align: left
          - align-self: end
        label:
          - font-size: 12px
          - color: var(--contrast20)
          - opacity: 0.5
          - width: 100%
          - text-align: left
          - align-self: start
        custom_fields:
          image:
            - '--mdc-ripple-press-opacity': 0.5