Cheers all, I use this card in a stack for my mobile view but the player selection is not very smooth on an iOS device. Is there any workaround for this? On Desktop it is working fine with mouseover. Maybe someone has an advice. Thanks. Here also a pic from my card.
hello can you share your map? thank you
it’s very nice ! can you share your code please ?
Getting the same loading message as users above. Can play media through mediaplayer, Spotify integration, just unable to load any players in this card.
Have reinstalled Spotify integration, spotcast and this card and refreshed all keys in all relevant configs.
Above “loading” the card shows the current artist playing.
Is there any suggested actions to take or updates on a resolution?
Really nice looking! Care to share the code for this one?
It’s a mix of mushroom / minimalist ui and this spotify card
If you have mushroom installed you can start here:
this look is made by @rhysb
and add this Spotify card into a stack with the custom:stack-in-card
Big thanks!
I just had the same thing happen. Checked my sp_dc and sp_key and they did not match what was in my YAML. Made the change, restarted HA and now it works.
Would also love to get the code for this, looks great!
Here the code but be careful you need:
minimalist UI installed for that / Template Card Scenes *note i have modified for my own to have it more transparent
mushroom
and this spotify card
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: entity.entity
icon: mdi:spotify
icon_color: green
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
ha-card {
--rgb-state-media-player: var(--rgb-green);
}
- type: "custom:button-card"
template: "card_scenes_transparent"
variables:
entity_1:
entity_id: entity.entity
icon: #OPTIONAL
name: #OPTIONAL
color: "blue"
entity_2:
entity_id: entity.entity
icon: #OPTIONAL
name: #OPTIONAL
color: "red"
entity_3:
entity_id: entity.entity
icon: #OPTIONAL
name: #OPTIONAL
color: "yellow"
entity_4:
entity_id: entity.entity
icon: #OPTIONAL
name: #OPTIONAL
color: "pink"
entity_5:
entity_id: entity.entity
icon: #OPTIONAL
name: #OPTIONAL
color: "yellow"
- type: 'custom:spotify-card'
always_play_random_song: true
hide_currently_playing: true
hide_playback_controls: true
hide_top_header: true
hide_warning: true
hide_chromecast_devices: true
display_style: Grid
grid_covers_per_row: 5
card_mod:
style: |
ha-card {
{% if not is_state('entity.entity', 'off') and not is_state('entity.entity', 'idle') %}
background: url( '{{ state_attr("entity.entity", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('entity.entity', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 115% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}thanks for sharing the code. I have it working, except for the button-card part. I replaced the variables with standard buttons for my entities, and I replaced each entity.entity with the ones of my media players I want to present.
If I understood correctly, the function of that button card is to select the media player to use for spotify, but when I click the entity button it doesn’t switch.
Probably I misunderstood the function of that button card, any hint is appreciated. Thanks.
they collapse when the status is playing just to see which media players are playing at my home and they turn off when I tap on it. For changing the source of Spotify content I use the Minimalism Popup
Hello,
I want to remove the “choose player” so I added “default_device” and “device”… but it still there 
Here is my card :
type: conditional
conditions:
- entity: input_select.select_speaker
state: Pioneer
card:
type: custom:spotify-card
limit: 10
always_play_random_song: true
grid_covers_per_row: 5
account: default
spotify_entity: media_player.spotify_christian_bostoen
hide_warning: true
hide_top_header: true
hide_playback_controls: true
hide_connect_devices: true
hide_currently_playing: true
display_style: grid
default_device: ChromecastAudioLiving
device: ChromecastAudioLiving
filter_devices:
- .*Nest.*
- .*ChromecastUltra.*
- .*ChromecastAudioSauna.*
What am I missing ?
Nobody sees the problem ?
Brilliant card, however I’m getting a persistent issue where the card decides to change (fairly sporadically) between coloured and chrome. Is this a specific setting I can change or a symptom of another issue - if so what?
It can be temperamental (ish) but I use Sonos and understand this is an issue with Spotify more than anything HA end, the colour is what’s bothering me more! Example below;
My yaml config for the card:
- type: custom:spotify-card
limit: 12
height: 377
hide_chromecast_devices: true
hide_warning: false
hide_currently_playing: true
hide_top_header: true
hide_playback_controls: true
always_play_random_song: true
default_device: Kitchen Sonos
known_connect_devices:
- id: [REMOVED]
name: Kitchen Speaker
entity_id: media_player.kitchen_2
- id: [REMOVED]
name: Living Room Speaker
entity_id: media_player.living_room_2
The color returns when the player is connected to spotify. I don’t know in which specific case, but that’s what you have to look for.
a solution found? I am also in this case.
Is there anyway to grab my most recent playlists though the Spotify integration and add it to the lovelace card? Just setting the card to show the most recently saved playlists isn’t as helpful if that’s not how you would naturally interact with Spotify.
i use the Minimalism Popup, how can i add this ?
can u show the custom-card?
Also looked for a way to hide the footer of the custom:spotify-card.
Solution posted by @alnavasa works, but required intalling the “card-mod” Frontend addon through HACS.
Working card snippet:
type: custom:spotify-card
hide_top_header: false
hide_currently_playing: true
hide_playback_controls: true
grid_show_title: true
always_play_random_song: true
display_style: grid
limit: 6
playlist_type: discover-weekly
spotify_entity: media_player.wohnzimmer
style: |
#footer {
display: none !important;
}