And here is the media card:
type: picture-elements
image: local/overlay.svg
style: |
ha-card {
--ha-card-background: var(--temp-background-color) !important;
--ha-card-border-width: 0px !important;
--ha-card-border-radius: 5px !important;
box-shadow: none !important;
}
elements:
- aspect_ratio: 1/1
entity: media_player.spotify_homeassistant
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: true
show_name: false
show_state: false
tap_action:
action: none
style:
height: 100%
width: 100%
top: 50%
left: 50%
state:
- styles:
entity_picture:
- filter: grayscale(100%) blur(4px)
- transition: all 0.5s ease
value: paused
styles:
card:
- padding: 0px
- background-color: rgba(255,255,255,0)
entity_picture:
- filter: grayscale(60%)
- border-radius: 5px
- height: 100%
- width: 100%
- position: absolute
- transition: all 0.5s ease
type: 'custom:button-card'
tap_action:
!include popup/media_popup.yaml
- type: 'custom:mod-card'
style:
'--mini-media-player-icon-color': var(--text-color) #change or remove to use own color
'--mini-media-player-base-color': var(--text-color) #change or remove to use own color
'--mini-media-player-accent-color': var(--music-accent-color) #change or remove to use own color
width: 100%
transform: 'translate(0%, -100%'
card:
artwork: none
entity: media_player.spotify_homeassistant
group: false
hide:
controls: true
icon: true
name: true
power: true
runtime: false
source: true
volume: true
hold_action:
action: none
icon: 'mdi:spotify'
info: scroll
card_mod:
style: |
ha-card {
height: 55px;
font-family: Mynerve;
{%- if states['media_player.spotify_homeassistant'].state == 'idle' -%}
--ha-card-background: rgba(0, 0, 0, 0);
{% else %}
--ha-card-background: rgba(0, 0, 0, 0.65);
{% endif %}
}
.entity__info {
max-width: 100% !important;
}
.mmp__bg,
.mmp-player,
.mmp__container {
border-radius: 0px !important;
}
type: 'custom:mini-media-player'
tap_action:
!include popup/media_popup.yaml
- aspect_ratio: 1/1
show_name: false
show_icon: true
show_entity_picture: true
entity_picture: /local/next.png
icon: 'mdi:circle'
type: 'custom:button-card' #next track
template:
- tilt
- media_button
size: 108%
entity: media_player.spotify_homeassistant
style:
right: '-5%'
top: 40%
height: 25%
width: 25%
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.spotify_homeassistant
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_icon: true
show_name: false
show_state: false
show_entity_picture: true
entity_picture: /local/prev.png
icon: 'mdi:circle' # prev track
type: 'custom:button-card'
template:
- tilt
- media_button
size: 108%
entity: media_player.spotify_homeassistant
style:
right: 55%
top: 40%
height: 25%
width: 25%
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: media_player.spotify_homeassistant
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_state: false
show_entity_picture: true
entity_picture: /local/pause.png
icon: 'mdi:circle'
type: 'custom:button-card' # PAUSE
template:
- tilt
- media_button
size: 108%
entity: media_player.spotify_homeassistant
style:
right: 10%
top: 40%
height: 40%
width: 40%
tap_action:
action: call-service
service: script.spotistart_main
haptic: medium
hold_action:
action: none
- show_name: false
entity: media_player.spotify_homeassistant
show_entity_picture: true
entity_picture: /local/down.png
icon: 'mdi:circle' # down vol
style:
left: 27.5%
top: 62.5%
height: 15%
width: 15%
tap_action:
action: call-service
service: media_player.volume_set
service_data:
volume_level: "[[[ return entity.attributes.volume_level - 0.050 ]]]"
entity_id: media_player.spotify_homeassistant
haptic: medium
type: 'custom:button-card'
size: 109%
template:
- tilt
- media_button
# VOLUME +
- show_name: false
show_entity_picture: true
entity_picture: /local/up.png
icon: 'mdi:circle' # up vol
entity: media_player.spotify_homeassistant
style:
left: 72.5%
top: 62.5%
height: 15%
width: 15%
tap_action:
action: call-service
service: media_player.volume_set
service_data:
volume_level: "[[[ return entity.attributes.volume_level + 0.050 ]]]"
entity_id: media_player.spotify_homeassistant
haptic: medium
type: 'custom:button-card'
size: 109%
template:
- tilt
- media_button
media_button template:
media_button:
state:
- styles:
card:
- padding: 0px
- border-radius: 50%
- background-color: rgba(0,0,0,0.5)
- border-width: 0px
- border-color: rgba(255,255,255,0.6)
icon:
- filter: opacity(0.5)
- transition: all 0.5s ease
- color: black #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
- background-color: rgba(0,0,0,0.5)
- border-width: 0px
- border-color: rgba(255,255,255,0.6)
icon:
- filter: opacity(0.5)
- transition: all 0.5s ease
- color: black
