Apple like Player2

type: conditional
conditions:
  - entity: media_player.echo_dot_4_sala
    state: playing
card:
  type: custom:button-card
  entity: media_player.echo_dot_4_sala
  show_icon: false
  show_name: false
  show_state: false
  aspect_ratio: 1/1
  custom_fields:
    title: |
      [[[
        return entity?.attributes?.media_title || 'Música';
      ]]]
    artist: |
      [[[
        return entity?.attributes?.media_artist || '';
      ]]]
    prev:
      card:
        type: custom:button-card
        icon: mdi:skip-previous
        show_name: false
        styles:
          card:
            - width: 52px
            - height: 52px
            - border-radius: 50%
            - background: rgba(255,255,255,0.12)
            - backdrop-filter: blur(12px)
            - "-webkit-backdrop-filter": blur(12px)
            - border: 1px solid rgba(255,255,255,0.12)
            - box-shadow: none
          icon:
            - color: white
            - width: 26px
        tap_action:
          action: call-service
          service: media_player.media_previous_track
          target:
            entity_id: media_player.echo_dot_4_sala
    playpause:
      card:
        type: custom:button-card
        entity: media_player.echo_dot_4_sala
        icon: |
          [[[
            return entity.state === 'playing'
              ? 'mdi:pause'
              : 'mdi:play';
          ]]]
        show_name: false
        styles:
          card:
            - width: 68px
            - height: 68px
            - border-radius: 50%
            - background: rgba(255,255,255,0.18)
            - backdrop-filter: blur(12px)
            - "-webkit-backdrop-filter": blur(12px)
            - border: 1px solid rgba(255,255,255,0.15)
            - box-shadow: none
          icon:
            - color: white
            - width: 34px
        tap_action:
          action: call-service
          service: media_player.media_play_pause
          target:
            entity_id: media_player.echo_dot_4_sala
    next:
      card:
        type: custom:button-card
        icon: mdi:skip-next
        show_name: false
        styles:
          card:
            - width: 52px
            - height: 52px
            - border-radius: 50%
            - background: rgba(255,255,255,0.12)
            - backdrop-filter: blur(12px)
            - "-webkit-backdrop-filter": blur(12px)
            - border: 1px solid rgba(255,255,255,0.12)
            - box-shadow: none
          icon:
            - color: white
            - width: 26px
        tap_action:
          action: call-service
          service: media_player.media_next_track
          target:
            entity_id: media_player.echo_dot_4_sala
    volume:
      card:
        type: entities
        entities:
          - type: custom:slider-entity-row
            entity: media_player.echo_dot_4_sala
            full_row: true
            hide_state: true
        card_mod:
          style: |
            ha-card {
              background: transparent !important;
              border: none !important;
              box-shadow: none !important;
              padding: 0 !important;
              margin: 0 !important;
            }

            :host {
              --paper-item-icon-color: transparent;
            }

            ha-slider {
              width: 100%;

              --md-slider-active-track-color: rgba(255,255,255,0.85) !important;
              --md-slider-handle-color: rgba(255,255,255,0.85) !important;
              --md-slider-inactive-track-color: rgba(255,255,255,0.12) !important;

              --md-sys-color-primary: rgba(255,255,255,0.85) !important;
            }
  styles:
    grid:
      - grid-template-areas: |
          ". . ."
          ". title ."
          ". artist ."
          "prev playpause next"
          "volume volume volume"
      - grid-template-columns: 1fr auto 1fr
      - grid-template-rows: 1fr auto auto auto auto
    card:
      - border-radius: 18px
      - overflow: hidden
      - padding: 20px
      - height: 390px
      - background-image: |
          [[[
            const pic = entity?.attributes?.entity_picture;
            return pic ? `url(${pic})` : '';
          ]]]
      - background-size: cover
      - background-position: center
      - border: 1px solid rgba(255,255,255,0.08)
    custom_fields:
      title:
        - justify-self: center
        - color: white
        - font-size: 22px
        - font-weight: 700
        - text-align: center
        - text-shadow: 0 2px 8px rgba(0,0,0,0.80)
      artist:
        - justify-self: center
        - color: rgba(255,255,255,0.85)
        - font-size: 14px
        - text-align: center
        - margin-bottom: 4px
        - text-shadow: 0 2px 8px rgba(0,0,0,0.80)
      prev:
        - justify-self: end
        - margin-bottom: "-14px"
      playpause:
        - justify-self: center
        - margin-bottom: "-14px"
      next:
        - justify-self: start
        - margin-bottom: "-14px"
      volume:
        - width: 260px
        - justify-self: center
        - margin-top: "-6px"
        - margin-bottom: "-40px"
  card_mod:
    style: |
      ha-card {
        animation: playerfade 0.4s ease;
      }

      ha-card::before {
        content: "";
        position: absolute;
        inset: 0;

        background:
          linear-gradient(
            to top,
            rgba(0,0,0,0.88) 0%,
            rgba(0,0,0,0.55) 35%,
            rgba(0,0,0,0.15) 100%
          );

        pointer-events: none;
      }

      #container {
        z-index: 1;
      }

      @keyframes playerfade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }