Hi, today Saturday afternoon I was bored and I spent the time playing with custom button card and custom media player. My knowledge is limited and I’m sure it can be done better so I feel free to improve it and used it.
You could add it inside a conditional card and show the custom button only when the media player is playing
type: custom:button-card
aspect_ratio: 1/1
custom_fields:
card1:
card:
type: custom:button-card
entity: media_player.homepod_del_salon
show_entity_picture: true
show_name: false
entity_picture: /local/cd_image.png
state:
- value: paused
styles:
icon:
- animation: null
- value: stop
styles:
icon:
- animation: null
- value: playing
styles:
icon:
- animation: rotating 2s linear infinite
styles:
card:
- width: 100%
- border: none
- background: none
entity_picture:
- width: 98%
card2:
card:
type: custom:mini-media-player
entity: media_player.homepod_del_salon
artwork: full-cover-fit
hide:
power: true
icon: true
source: true
progress: true
volume: true
controls: true
name: true
info: true
styles:
card:
- border: none
- background: none
custom_fields:
card1:
- position: absolute
- left: 30%
- width: 70%
card2:
- position: absolute
- border: none
- background: none
- width: 80%
- height: 80%
- filter: drop-shadow(5px 5px 5px '#4444dd')
- '--mini-media-player-overlay-color': rgba(0,0,0,0)
The gif is not smooth as the card sorry
type: custom:button-card
custom_fields:
card1:
card:
type: custom:mini-media-player
entity: media_player.homepod_del_salon
artwork: full-cover-fit
hide:
power: true
icon: true
source: true
progress: true
volume: true
controls: true
name: true
info: true
styles:
card:
- border: none
- background: none
- padding: 0
- width: 380px
- height: 400px
- background-size: cover
- background-image: url('local/cd_image_trans.png')
- filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75))
custom_fields:
card1:
- position: absolute
- border: none
- width: 100%
- '--mini-media-player-overlay-color': rgba(0,0,0,0)
- mask-image: url('/local/cd_image_trans.png')
- mask-repeat: no-repeat
- mask-size: 100%
- animation: |
[[[
if (states['media_player.homepod_del_salon'].state == 'playing')
return 'rotating 2s linear infinite';
else
return 'null';
]]]
The needed images:
Mask Image
https://drive.google.com/file/d/1qwS4twUGR0VxCeRevL5WVlPlu8gYEzuW/view?usp=sharing
CD image
https://drive.google.com/file/d/1SRRKX0rgkqCmjs_Qx6PBt_QTX5lh1aXg/view?usp=sharing
