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?