Auto-populated Full Screen Media Player

Hello everyone,

I just started HA about a month ago and couldn’t stop tinkering it. Here’s a config that can show the currently playing Media Player in full panel size:

It uses swipe-card, card-mod, auto-entities, decluttering-card and button-card. It automatically populates itself with any media players that are playing or paused.

views:
  - theme: Backend-selected
    title: Now Playing
    path: media
    type: custom:grid-layout
    layout:
      grid-template-columns: calc( 100% - 8px )
      grid-template-rows: auto
      grid-template-areas: '"info"'
      grid-column-gap: 16px
      margin: 0 16px
    badges: []
    cards:
      - type: custom:auto-entities
        filter:
          include:
            - domain: media_player
              state: playing
              options:
                type: custom:decluttering-card
                template: metro_media_player_page
                variables:
                  - entity: this.entity_id
            - domain: media_player
              state: paused
              options:
                type: custom:decluttering-card
                template: metro_media_player_page
                variables:
                  - entity: this.entity_id
          exclude: []
        sort:
          method: friendly_name
          reverse: false
        show_empty: true
        card:
          type: custom:swipe-card
          parameters:
            slidesPerView: 1
        card_param: cards
        view_layout:
          grid-area: info
decluttering_templates:
  metro_media_player_page:
    card:
      type: vertical-stack
      card_mod:
        style: |
          ha-card {background: red;}
      cards:
        - type: custom:button-card
          entity: '[[entity]]'
          color_type: card
          size: 20px
          show_state: true
          show_label: true
          show_icon: false
          state_display: '[[[ return entity.attributes.media_title ]]]'
          label: |-
            [[[ if (entity.attributes.media_content_type == "music") {
                return entity.attributes.media_album_name + "<br><span style='font-weight: 500;'>" + entity.attributes.media_artist + "</span>"
              } else if (entity.attributes.media_content_type == "tvshow") {
                return entity.attributes.media_series_title
              }
            ]]]
          custom_fields:
            picture: ' '
            space: ' '
          color: transparent
          styles:
            card:
              - aspect-ratio: 5/2
              - padding: 16px
            grid:
              - grid-template-areas: |
                  "picture space"
                  "picture n"
                  "picture s"
                  "picture l"
              - grid-template-columns: calc( 40% - 16px ) 1fr
              - grid-template-rows: 1fr min-content min-content min-content
            name:
              - font-size: 12pt
              - font-weight: 500
              - letter-spacing: .05em
              - padding: 16px 0 8px 0
              - white-space: normal
              - text-align: left
              - justify-self: start
              - align-self: end
              - text-transform: uppercase
              - opacity: 0.67
            state:
              - font-size: 48pt
              - justify-self: start
              - padding: 0 0 8px 0
              - font-weight: 500
              - align-self: start
              - text-overflow: clip
              - white-space: normal
              - line-height: 1.1
              - text-align: left
            label:
              - font-size: 24pt
              - justify-self: start
              - padding: 0 0 32px 0
              - align-self: start
              - white-space: normal
              - text-align: left
              - height: 100%
            custom_fields:
              picture:
                - background: |-
                    [[[ 
                      if (entity.attributes.entity_picture != '') {
                        return "url(" + entity.attributes.entity_picture + ")"
                      } else if (entity.attributes.entity_picture_local != '') {
                        return "url(" + entity.attributes.entity_picture_local + ")"
                      }
                    ]]]
                - background-size: cover
                - xbackground-position: center center
                - height: calc( 100% - 32px )
                - aspect-ratio: 1/1
                - position: relative
                - xwidth: 100%
        - type: media-control
          entity: '[[entity]]'
          card_mod:
            style: >
              ha-card { background: none; }

              .media-info, .top-info, .background { display: none !important; }

              .title-controls { padding: 0 !important; }

              .player { padding-top: 0 !important; color: rgb(255,255,255)
              !important;} mwc-linear-progress { --mdc-theme-primary: inherit
              !important; }

P.S. What’s the best way to share the code?

13 Likes

I am new to HA but how do I implement that?

In case anyone has the same question on how to install…

  1. Create a new dashboard (chose SETTINGS->DASHBOARDS->ADD NEW DASHBOARD) and choose NEW DASHBOARD FROM SCRATCH
  2. Choose Title and Icon and press CREATE
  3. From Dashboard list, OPEN dashboard you just created
  4. Select Pencil from top right to EDIT, select 3 dots and select RAW CONFIGURATION EDITOR
  5. Replace code with what madelena has supplied in snippet and save
  6. Install any missing frontend cards through HACS->Frontend->Explore&Download Repositories

I followed these steps and it worked immediately.

Thanks @madelena !