Spotify Lovelace Card

jost.arnaud · November 26, 2019, 9:20am

Thanks for the reply !
It’s been driving me nuts, how would you go about deleting the app data/spotify cookies ?

I tried to make a new fresh spotify app, and also access my spotify card in incognito mode?
Have you any idea to try out?

ASNNetworks · December 4, 2019, 4:34pm

Hi, I really love and appreciate your work! Greetings from the Nethderlands :)! The card and spotcast form a very important part of my home automation, so thanks for that!

I do come across one issue though. I have looked through all the comments and github changelogs, but couldn’t find anything.

From time to time (multiple times a day) I get the white screen with the redirect error. But this happens when I open HomeAssistant website or app. The URL directs to spotify forward with my domain in it. Seems like somehow HomeAssistant opens a link to that forward from time to time. When I hit back or reload the page, then I’m in Hassio again.

Any idea what this could be? It doesn’t seem to break anything, but kinda annoying to open a white error white page and be forced to reload / hit back. To be clear: this happens when not even viewing the Spotify card. Also when I’m just idling the Hassio page on Chrome (macOS), then suddenly something envokes that page.

I hope my problem is clear (typing on mobile).

Bluhme · December 5, 2019, 6:56am

Exactly same issue here. Looking forward to solution

Matt_Barnes · December 5, 2019, 7:47pm

Love this card! Can’t believe I’ve just found it. Only issue after installing it is my sonos are not available from the devices list.

I have the Spotify app on my Mac and all three Sonos are on there and if I select one from my Mac that one appears on my card in HA but none of the others.

Here you can see the “now playing” device on the card using the HA app. I selected the living room sonos using my Mac.

And here you can see none of the sonos devices are listed?

But on my Mac using the Spotify app they are listed:

fondberg · December 6, 2019, 8:20am

I’ve seen this too. I think the reason for this is that the card uses the Spotify API which requires OAuth login with a redirect and somehow this doesn’t work all the time. The card uses automatic logins (with redirects) if the token is stale which means it will call the Spotify web api with a redirect on success URL. Why it sometimes doesn’t actually redirect back is a mystery for me. Maybe someone else on the forum knows.

It should however only do this if the card is visible. If it doesn’t then it is a bug in the lovelace ui logic which should not mount any cards that are not on the current tab

DavidFW1960 · December 6, 2019, 8:22am

You have to whitelist the URL at Spotify. So if you use an IP address you need to add that, if you sometimes use a say duckdns URL you have to whitelist that. Basically any URL you access the Spotify from MUST be whitelisted. This is typically in my limited experience more than 1 URL.

fondberg · December 6, 2019, 8:27am

Sonos doesn’t implement the Spotify connect device api unfortunately which means support for sonos needs to be first implemented in HA and then added to the card.

Question, is it possible to start Spotify playback on a Sonos using HA service calls today?

fondberg · December 6, 2019, 8:29am

What do you mean by “I can’t go back”? Are you hitting the back button in the browser or are you clicking a tab in Lovelace?

Matt_Barnes · December 6, 2019, 11:21am

I have sonos integration in HA and yes I can see Spotify playlists using the media player card for a sonos
so its all kind of linking, but not sure how to add the sonos devices to your card, if thats possible

maurizio53 · December 6, 2019, 1:28pm

Here i try to add a spotify playlist to one of my sonos through the custom mini-media-player card in this way:

                - name: Daily Mix 1
                  type: playlist
                  id: spotify:user:spotify:playlist:37i9dQZF1E36buj8U8F3MT

But was unable to play music… Is there something wrong in my entry?

fondberg · December 8, 2019, 10:38am

What is needed are

Get a list using HA apis of sonoff devices
Be able to use a service call to start playback
Someone who can add it in the javascript card code and create a PR

mindtripper · December 11, 2019, 8:48am

Hi Niklas,

I’d like to test this. As most of my playlists are collaborative.
Is https://cdn.jsdelivr.net/gh/custom-cards/spotify-card@collaborate-playlists/dist/spotify-card.umd.js based on v1.9?

Thanks in advance,
M

fondberg · December 11, 2019, 7:01pm

I don’t think it is based in that as it is created w while back. It should work though if you want to give it a quick test.

treecamp · December 12, 2019, 11:38am

Hi Niklas,

I’m getting this error. Got it installed with HACS, and added it to the lovelace config, the script is also properly loaded, i see it in the network tab under the developer panel in chrome.
Took out the client id for obvious reasons.
Also added the redirect uri’s.

Any idea?

fondberg · December 18, 2019, 8:39am

You need to add the module to lovelace as a resource

fondberg · December 18, 2019, 8:40am

I have released a new version, v.1.10 with the following features:

Support for showing featured playlists instead of users playlists. Use configuration parameter featuredPlaylists and set it to true.
Define which account should be used when calling spotcast. This should be the account key name as defined in the configuration for spotcast. Default is to use default account.
Possibility to set height with scrolling. New configuration parameter height which takes an integer value and renders the playlist element that height in pixels.

treecamp · December 18, 2019, 9:23am

Thank you @fondberg, it is added and still getting the error, i created a issue, maybe you can help me there:
https://github.com/custom-cards/spotify-card/issues/35

Thank you.

Treecamp

fondberg · December 18, 2019, 5:23pm

See you fixed it yourself. I added a question in the issue though

maxime.vilmay · December 20, 2019, 10:47am

Hello,

thank you for this wonderfull card. It’s exactly how I would like to stream spotify using HA
nevertheless, I have an issue to connect to spotify with your card.

in the ressource of lovelace, I have added:

- type: module
    url: >-
      https://cdn.jsdelivr.net/gh/custom-cards/[email protected]/dist/spotify-card.umd.js

with 1.8 the card was not recognized. So, I changed to 1.10 and it’s ok.

I have now the button ‘Authenticate’ but when I click on it I have the following message:
INVALID_CLIENT: Invalid redirect URI

I do not understand because I have already setup Spotify as media player with an URL and it works fine with standard media player card.

I connect through nabu casa:
https://XXX.ui.nabu.casa/api/spotify

where can be the issue?

thank you,

rgds
Mixoum

pegatron89 · December 21, 2019, 3:06pm

hi, Installed the card thanks alot. Works fine except i get scroll bars that i cant actually move, Tried this on a couple of browsers but the same effect.

Thanks again

Edit: im now getting errors saying its an invalid redirect URL. havent changed anything on spotify website