Just wanted to share a design I made for my homepods.
In the screenshot example I have it nested inside of a pop-up bubble-card, but none of that code is below.
Required: Custom-State-Switch card for all the available states and Card-Mod for light styling and transparent backgrounds.
When in the state of: playing, paused
And in the state of: unavailable, off, standby, idle.
Feel free to customize.
(PS, I’m no coder, apologies for in-elegant, but working, code.)
type: custom:state-switch
entity: media_player.homepod
states:
unavailable:
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: media_player.homepod
group: true
info: scroll
idle_view:
when_idle: true
when_paused: true
when_standby: true
after: 5
hide:
name: true
power: true
controls: true
prev: true
next: true
play_pause: true
play_stop: true
jump: true
volume: true
volume_level: true
mute: true
progress: true
icon_state: true
state_label: true
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
'off':
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: media_player.homepod
group: true
name: HomePod Mini
idle_view:
when_idle: true
when_paused: true
when_standby: true
after: 5
hide:
name: false
power: false
controls: true
prev: true
next: true
play_pause: true
play_stop: true
jump: true
volume: true
volume_level: true
mute: true
progress: true
icon_state: false
state_label: false
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
standby:
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: media_player.homepod
group: true
name: HomePod Mini
idle_view:
when_idle: true
when_paused: true
when_standby: true
after: 5
hide:
power: true
controls: true
prev: true
next: true
play_pause: true
play_stop: true
jump: true
volume: true
volume_level: true
mute: true
progress: true
icon_state: false
state_label: false
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
idle:
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: media_player.homepod
group: true
name: HomePod Mini
idle_view:
when_idle: true
when_paused: true
when_standby: true
after: 5
hide:
power: true
controls: true
prev: true
next: true
play_pause: true
play_stop: true
jump: true
volume: true
volume_level: true
mute: true
progress: true
icon_state: false
state_label: false
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
paused:
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: media_player.homepod
group: true
artwork: full-cover-fit
scale: '1'
hide:
name: true
icon: true
info: true
power: true
source: true
sound_mode: true
controls: true
prev: true
next: true
play_pause: true
play_stop: true
jump: true
volume: true
volume_level: true
mute: true
progress: true
runtime: true
runtime_remaining: true
artwork_border: true
power_state: true
icon_state: true
shuffle: true
repeat: true
state_label: true
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
- type: custom:mini-media-player
entity: media_player.homepod
group: true
scale: '1.5'
hide:
name: true
icon: true
info: true
power: true
source: true
sound_mode: true
controls: true
prev: true
next: true
play_pause: true
play_stop: true
jump: true
volume: true
volume_level: true
mute: true
progress: false
runtime: true
runtime_remaining: true
artwork_border: true
power_state: true
icon_state: true
shuffle: true
repeat: true
state_label: true
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
- type: markdown
group: true
content: >
<center>
<b>{{ state_attr('media_player.homepod','media_title')
}}</b><br>
{{ state_attr('media_player.homepod','media_artist') }}<br>
</center>
card_mod:
style: |
ha-card { font-size: 1.25em !important;
--ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none;
--ha-card-border-width: 0; }
- type: custom:mini-media-player
entity: media_player.homepod
group: true
scale: 1.5
hide:
name: true
icon: true
info: true
power: true
source: true
sound_mode: true
jump: true
volume: true
volume_level: true
mute: true
progress: true
runtime: true
runtime_remaining: true
artwork_border: true
power_state: true
icon_state: true
shuffle: true
repeat: true
state_label: true
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
- type: custom:mini-media-player
entity: media_player.homepod
group: true
scale: 1
hide:
name: true
icon: true
info: true
power: true
source: true
sound_mode: true
prev: true
next: true
play_pause: true
play_stop: true
jump: true
progress: true
runtime: true
runtime_remaining: true
artwork_border: true
power_state: true
icon_state: true
shuffle: true
repeat: true
state_label: true
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
card_mod:
style: |
ha-card {
aspect-ratio: 1 / 1;
}
playing:
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: media_player.homepod
group: true
artwork: full-cover-fit
scale: '1'
hide:
name: true
icon: true
info: true
power: true
source: true
sound_mode: true
controls: true
prev: true
next: true
play_pause: true
play_stop: true
jump: true
volume: true
volume_level: true
mute: true
progress: true
runtime: true
runtime_remaining: true
artwork_border: true
power_state: true
icon_state: true
shuffle: true
repeat: true
state_label: true
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
- type: custom:mini-media-player
entity: media_player.homepod
group: true
scale: '1.5'
hide:
name: true
icon: true
info: true
power: true
source: true
sound_mode: true
controls: true
prev: true
next: true
play_pause: true
play_stop: true
jump: true
volume: true
volume_level: true
mute: true
progress: false
runtime: true
runtime_remaining: true
artwork_border: true
power_state: true
icon_state: true
shuffle: true
repeat: true
state_label: true
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
- type: markdown
group: true
content: >
<center>
<b>{{ state_attr('media_player.homepod','media_title')
}}</b><br>
{{ state_attr('media_player.homepod','media_artist') }}<br>
</center>
card_mod:
style: |
ha-card { font-size: 1.25em !important;
--ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none;
--ha-card-border-width: 0; }
- type: custom:mini-media-player
entity: media_player.homepod
group: true
scale: 1.5
hide:
name: true
icon: true
info: true
power: true
source: true
sound_mode: true
jump: true
volume: true
volume_level: true
mute: true
progress: true
runtime: true
runtime_remaining: true
artwork_border: true
power_state: true
icon_state: true
shuffle: true
repeat: true
state_label: true
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
- type: custom:mini-media-player
entity: media_player.homepod
group: true
scale: 1
hide:
name: true
icon: true
info: true
power: true
source: true
sound_mode: true
prev: true
next: true
play_pause: true
play_stop: true
jump: true
progress: true
runtime: true
runtime_remaining: true
artwork_border: true
power_state: true
icon_state: true
shuffle: true
repeat: true
state_label: true
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
card_mod:
style: |
ha-card {
aspect-ratio: 1 / 1;
}