Spotify Lovelace Card

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.

Screenshot_20221027_102417

8 Likes

hello can you share your map? thank you

it’s very nice ! can you share your code please ?

1 Like

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

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 :crazy_face:

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.*![Schermafbeelding 2022-12-01 075950|314x500](upload://kcdy0tsGOWRoQqVYU8JhwBTfqrT.jpeg)

Schermafbeelding 2022-12-01 080209

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