Media Player

type: custom:button-card
entity: media_player.living_room_hifi
show_entity_picture: true
show_name: false
show_icon: false
custom_fields:
  info:
    card:
      type: vertical-stack
      cards:
        - type: custom:button-card
          entity: sensor.living_room_content
          name: >
            [[[return
            `<marquee>${states['media_player.living_room_hifi'].attributes.media_artist}
            <\marquee>`]]]
          show_label: true
          show_icon: false
          state:
            - value: radio
              styles:
                name:
                  - color: rgba(0,0,0,0)
          styles:
            card:
              - box-shadow: none
              - background: none
              - padding: 0px
              - border-radius: 0px
              - margin-bottom: '-15px'
            name:
              - justify-self: stretch
              - font-size: 24px
              - font-weight: bold
              - color: var(--primary-color)
        - type: custom:button-card
          entity: sensor.living_room_content
          name: >
            [[[return
            `<marquee>${states['media_player.living_room_hifi'].attributes.media_album_name}
            <\marquee>`]]]
          show_icon: false
          state:
            - value: radio
              styles:
                name:
                  - color: rgba(0,0,0,0)
          styles:
            card:
              - box-shadow: none
              - background: none
              - padding: 0px
              - border-radius: 0px
              - margin-bottom: '-13px'
            name:
              - justify-self: stretch
              - font-size: 19px
              - font-weight: 500
              - color: rgba(96,114,116,0.6)
        - type: custom:button-card
          entity: sensor.living_room_content
          name: >
            [[[return
            `<marquee>${states['media_player.living_room_hifi'].attributes.media_title}
            <\marquee>`]]]
          show_icon: false
          state:
            - value: radio
              styles:
                name:
                  - font-size: 24px
                  - margin-top: '-4px'
          styles:
            card:
              - box-shadow: none
              - background: none
              - padding: 0px
              - border-radius: 0px
            name:
              - justify-self: stretch
              - font-size: 19px
              - font-weight: 500
              - color: var(--primary-color)
  previous:
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: media_player.media_previous_track
        target:
          entity_id: media_player.living_room_hifi
      icon: mdi:skip-previous
      show_name: false
      styles:
        card:
          - width: 33px
          - height: 33px
          - border-radius: 99px
          - box-shadow: none
          - background: var(--button-background-color)
        icon:
          - width: 26px
          - color: var(--primary-color)
  play:
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: media_player.media_play_pause
        target:
          entity_id: media_player.living_room_hifi
      hold_action:
        action: call-service
        service: media_player.turn_off
        target:
          entity_id:
            - media_player.living_room_hifi
      entity: media_player.living_room_hifi
      icon: mdi:play
      state:
        - value: playing
          icon: mdi:pause
      show_name: false
      styles:
        card:
          - width: 33px
          - height: 33px
          - border-radius: 99px
          - box-shadow: none
          - background: var(--button-background-color)
        icon:
          - width: 26px
          - color: var(--primary-color)
  next:
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: media_player.media_next_track
        target:
          entity_id: media_player.living_room_hifi
      icon: mdi:skip-next
      show_name: false
      styles:
        card:
          - width: 33px
          - height: 33px
          - border-radius: 99px
          - box-shadow: none
          - background: var(--button-background-color)
        icon:
          - width: 26px
          - color: var(--primary-color)
  volumedown:
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: media_player.volume_down
        target:
          entity_id:
            - media_player.living_room_hifi
      icon: mdi:volume-medium
      show_name: false
      styles:
        card:
          - width: 33px
          - height: 33px
          - border-radius: 99px
          - box-shadow: none
          - background: var(--button-background-color)
        icon:
          - width: 26px
          - color: var(--primary-color)
  volumeup:
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: media_player.volume_up
        target:
          entity_id:
            - media_player.living_room_hifi
      icon: mdi:volume-high
      show_name: false
      styles:
        card:
          - width: 33px
          - height: 33px
          - border-radius: 99px
          - box-shadow: none
          - background: var(--button-background-color)
        icon:
          - width: 24px
          - color: var(--primary-color)
  wiki:
    card:
      type: custom:config-template-card
      variables:
        album_url: states['sensor.album_wiki_living_room'].state
      entities:
        - sensor.album_wiki_living_room
      card:
        type: custom:button-card
        entity: sensor.album_wiki
        icon: mdi:magnify
        show_name: false
        tap_action:
          action: url
          url_path: ${album_url}
        styles:
          icon:
            - width: 22px
            - color: var(--primary-color)
          card:
            - width: 33px
            - height: 33px
            - border-radius: 99px
            - box-shadow: none
            - background: var(--button-background-color)
styles:
  grid:
    - grid-template-areas: '"i info" "i buttons"'
    - grid-template-columns: max-content 1fr
    - grid-template-rows: min-content min-content
  card:
    - background: none
    - box-shadow: none
    - border-radius: 0px
    - padding: 0 0px 0 0px
    - margin: 10px 0 0px 7px
  custom_fields:
    previous:
      - position: absolute
      - bottom: 0%
      - left: 28%
      - margin: 0 0 0 14px
      - justify-self: start
    play:
      - position: absolute
      - bottom: 0%
      - left: 39.2%
      - margin: 0 0 0 14px
      - justify-self: start
    next:
      - position: absolute
      - bottom: 0%
      - left: 50.4%
      - margin: 0 0 0 14px
      - justify-self: start
    volumedown:
      - position: absolute
      - bottom: 0%
      - left: 61.6%
      - margin: 0 0 0 14px
      - justify-self: start
    volumeup:
      - position: absolute
      - bottom: 0%
      - left: 72.8%
      - margin: 0 0 0 14px
      - justify-self: start
    wiki:
      - position: absolute
      - bottom: 0%
      - left: 84%
      - margin: 0 0 0 14px
      - justify-self: start
  entity_picture:
    - width: 110px
    - height: 110px
    - border-radius: 15px