Spotify Lovelace Card

Share your Projects! Dashboards & Frontend
,
153

This one, I use it on my home assistant dedicated tablet :grinning:

154

I had to enable the browser address bar.
When I click on the authenticate button an https://accounts.spotify.com/authorize Url is set but it’s not loading automatically, if I select it and manually launch it the spotify card loads correctly.
Without the address bar I couldn’t see this and clicking twice on the authenticate button causes the “response_type must be code or token” error

155

For me the syntax is not clear. I use the homeassistant cloud. On the homassistant page I have a main view “haushaltXXX” and subtabs per room e.g. “Wohnzimmer”. What should be the redirect URL?:

  1. HAcloud/lovelace/haushaltXXX/wohnzimmer
  2. HAcloud/lovelace/default_view/haushaltXXX/wohnzimmer
  3. ‘…’

I tried already a couple of permutations. Always a redirect error. The standard spotify app works seemlessly with the link HAcloud/api/spotify.

Regards,

Volker

156

Hello all,

I am still struggling with the redirecting url. I use the HA cloud and can setup the spotify app via the redirect url HA-cloud/api/spotify.
My lovelace overview has a main card (default the home tab I think) named “haushaltXXX” and subtabs “wohnzimmer”, etc. The redirect link should be then

  1. HA_cloud/haushaltXXX/wohnzimmer
  2. HA_cloud/lovelace/haushaltXXX/wohnzimmer
  3. HA_cloud/lovelace/wohnzimmer
  4. etc.

I tried these and other permutations. All the time I get an redirect URL after I logged on to the spotify account when clicking on activation.

Regards,

Volker

157

Spotify web api requires the browser to be able to to do redirects. This is part of the OATH specification so if the kiosk browser disallows redirects then it won’t work. And clicking it should not be needed. Especially twice which will cause all sorts of state problems

158

The redirect URL must be the same as the URL you see when the spotifycard authenticate button is seen, copy paste this into the dev console and make sure you have the correct client_id set in the card config in lovelace. Try first in an incognito window in chrome to rule out browser caches and stale data.

159

Thank you for the quick answer. I understand now the syntax. It did not solve my problem, but indeed I may have a browser (settings) problem.

160

Yeah, it is common to have plugins that disallow redirects which is a must for OATH

161

I had the same issue with redirect INVALID_CLIENT: Invalid redirect URI
did a little inspection with spotify web API, I have this set to my external HA address for obvious reasons.
I was trying to authenticate when connecting to HA from my internal address, hence the failure in redirection. When I accessed HA from my external address the authenticate button worked fine… But I still can’t get this to work when I access from my internal address, eg. 10.0.0.xx:8123. Is there a fix for this?

162

I don’t think spotify allows private networks in their OATH api (neither does Google, Facebook and a whole lot of others…) so there is no fix that can be made in this card.

163

Why i cannot see any of my chromecast devices in the devices list?

00

This is my configuration of the card:

  - icon: mdi:spotify
    panel: true
    background: border-box red
    cards:
      - type: 'custom:spotify-card'
        client_id: xxxxxxxxxxxxxxxxxxxxxx
        limit: 30

But if i add the device option selecting my chromecast audio device in this way:

device: media_player.salotto_audio

I still get the same dropdown menu without the selected device.

164

Great, will you share the code of the two cards?
Thanks in advance…

165

You need to add the CC called spotcast that is described in the documentation…

2 Likes
166

Thanks, this is a fantastic solution!

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

167

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

168

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

169

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.

170
171

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?

172

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