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
1 Like
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 %} }
3 Likes
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
4 Likes
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
1 Like
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;
}
1 Like
What fixed it for me was actually restarting Home Assistant… except it wouldn’t let me. I had set up configuration.yaml for multiple accounts but I hadn’t yet configured all of them in the secrets.yaml with their keys.
Once I changed the default spotify keys [ming sp_dc here] and [ming sp_key here] to the actual keys for the input account, then I was able to restart HA and then it loaded right up.
Hi all, I’m having an issue where the visual editor will not allow me to save changes. The only buttons active at the bottom are “Show Code Editor” and “Cancel”, regardless of changes made in the visual editor.
If I go into the code editor, the second I type anything in there I get the “Cancel” and “Save” buttons.
The Spotify Card/Spotcast are otherwise working perfectly fine. I can select playlists and cast them to various google devices.
Has anyone had this issue before? Any ideas?
3 Likes
I am also having this issue, cannot change or save any settings at all …
3 Likes
I am also unable to save changes in card configuration. Is this a Lovelace bug or a bug with this card?