Spotify Lovelace Card

Tks, that was it! Let’s hope they update the pychromecast component! Magnificent card!!

hey!
Weird, can’t find a doc on the built-in editor for lovelace (the UI frontend for HASS) but this thread explains it: How do I add custom cards with the Lovelace UI?

I’ve got a family account for Spotify and I’d like to put a drop-down menu on my interface to select different family members and have the selected person’s playlists appear in the list. I’m assuming that the playlists displayed are based on the account connected to the secret configured in the client_id. Is there any way to accomplish what I’m trying to do?

Hi! This is not possible with the current functionally. I know of people using different tabs with different accounts which is possible. You can specify the account in the lovelace config for the card

Any possibility having the card available in HACS?

Hi,
I’ve an issue with this card running on Fully Kiosk Browser, when I click on the authenticate button I get a blank page with
“response_type must be code or token”

it’s running fine on my desktop pc with firefox/chrome

I don’t know what a full kiosk browser is…

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

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

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

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

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

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.

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.

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

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?

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.

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.

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

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

2 Likes