Spotify Lovelace Card

Thanks, this is a fantastic solution!

Is there a way to add a scroll bar if you have loaded more than 10 playlists?

I believe that is feasable. Do you want to have a go at it? Otherwise you can maybe open a feature request in the repo so I can track it. I’m currently rewriting the card a bit because I want to get rid of the custom spotify sensor from spotcast but after that I can maybe have a look

Not sure if my limited coding skill did this properly, but I got a working scroll bar on my local version of the card by adding height: 500px and overflow-y: scroll in the style guide for .playlists.

Thanks again

I’m using nabu casa to access home assistant from outside of my network I don’t have anything like duckdns setup. After setting up the card it says authorize. If I’m currently on my local network it fails to authorize. But if I switch off my wifi and authorize it works. The problem I’m running into is how do I use it while I’m on my local network? It doesn’t seem reasonable to keep switching to my 4g to reauthorize everytime to then be able to play a playlist. What am I missing here?

I used

https://xxxxxxxxxxxxxxx.ui.nabu.casa/api/spotify

In the URI section is this what I’m supposed to use? Or am I supposed to be using duckdns with nabu casa?

Thanks for any help.

I’m sorry I used this in the redirect URI

https://xxxxxxxxxxxxxx.ui.nabu.casa/lovelace/4

Which is where the Lovelace card is when accessing it from outside of my network.

As I said before it works fine when I’m using external access to authenticate. But I have authenticate every single time. And how do I use it when I’m on local network?

You can add multiple redirect URIs in the spotify developer dashboard. Add one for your internal address.

Ok that worked I thought it said in the instructions that it had to be from an external source. Thanks!

Im going mad here. Really sorry to post this but I have tried everything, also local IP but nothing. Cant authenticate the card, and I have already setup spotify in HA.

What I have I done until now is to create a new spotify app and add the url where the card is https://xxxx.duckdns.org/lovelace/7 to the Redirect URIs

I config the card with the correct id:
spoty

So I click authenticate and it redirect me to the spotify login,

I fill my spotify information, log in and it redirect me to home assistant login like nothing happens.

login

Hope someone can enlighten me, I really want to use these card. Sorry for the long post

Fix it, the problem was that I have never save the login, so the only way to make this work was to press save login. But I dont really like to be logged all the time.
Now its time to play a bit with the card

a

EPIC - just what i needed! Thanks for building! Coffee on way!

EDIT: just added an issue on github. The card isnt able to authenticate on the HA iOS app.

hi,
it would be great to have white spotify card, its possible ?
thanks a lot for this great card !

This card originated outside HA and doesn’t follow the styles of the other lovelace cards so it is not so simple. I know very little about the internal styles of the hass polymer project but if someone with knowledge could do the work and create a PR they are welcome

New release 1.8 is finally out which fixes a lot of things.

  • security fixes for dependencies
  • fix auth problem and stop polling when browser tab/window is hidden
  • support transfer playback both for chromecast and spotify connect devices is something is playing
  • remove need for special sensor from spotcast (if you use this you should upgrade that as well because the latest version kicks ass wrt to speed)

See https://github.com/custom-cards/spotify-card for details.

can we install this using HACS? I’m getting an error but wasn’t sure if it was just me:

custom-cards/spotify-card - No acceptable js files found

Thanks!

I haven’t read up on what is needed so if someone can do the changes necessary or tell me exactly what is needed it would could work out…

here are the instructions:
https://custom-components.github.io/hacs/developer/plugin/

This will help you get more users, as HACS is the easiest way to install (and maintain) custom lovelace cards moving forward

I fixed it today. Added a PR to HACS to list it in the normal listing but in the meantime you can add the repo in the settings.

1 Like

Thanks!!!

Hi,

I have noticed that the playlists I use the most are collaborative playlists and these are not visible with this card. Can this be solved or am I doing something wrong?