custom-cards/spotify-card

Spotify playlist card for Home Assistant card

spotify-card's Issues

can't select from device list

Hello,

first of all great card!
Could see it for some seconds until something happen...
Despite the setting 'device' and 'player' it wan't me to select the device.

Problem is:
the dropdown contains

• spotify connect devices
• chromecast devices

none of them is selectable.
Hope you can help

Best

Support random_song: true from spotcast.start

according to the readme file the Spotcast service is already supported by this custom card.
Would it be possible to have a optional card attribute: "random_song: true" that would then use the spotcast.start service always with the aditional option "random_song: true".

In that way a playlist can be started at a random position instead of always the first song.

where i can find the "device" name?

where i can find the "device" name?

what i'm supposed to use? "media_player.living_room"?

Playlists from backend?

Have you thought about creating a component to handle the backend stuff? I would prefer that over having the frontend call Spotify direclty for all instances of my frontend

Draw order/Z order

Maybe this is a greater issue with HA, but I haven't seen it before. When hovering to select a mediaplayer, the menu is shown under the adjacent card.

Can't authenticate

After installation I only get the authenticate picture.

If I click on it the login window appears, then I will be forwarded to a page with the error message “INVALID_CLIENT: Invalid client”.

My configuration:

• Spotify Developer
  

• Home Assistant
  

What is wrong in my configuration?

PS:
The Spotify Player does work.

Thanks for help!

not all speakers appear on the list

ion my case sonos speakers do not appear on the list

Position of menu fixed when height is set

When setting a height on a larger list I'm seeing the dropdown menu fixed in its original position (along with the background remaining the same size). The iframe scrolls, but the menu falls on top of the playlists themselves.

Running Home Assistant 0.107.7 & 1.2.2 of spotify-card.

INVALID_CLIENT: Invalid redirect URI

Hi, when I press the Authorisation button in Hass.io I see this message: INVALID_CLIENT: Invalid redirect URI. Everything I have set by your actual instructions. Can you help me to solve this issue, please?

auth scope too wide

Hi,

Looking at your great card and I’m wondering a bit about the scopes that the .js file is requesting access to.
Why do you need access to all these scopes?
“user-read-private”, “user-read-email”, “playlist-read-private”, “user-read-birthdate”, “user-read-playback-state”, “user-modify-playback-state”

Why do you need access to “user-read-private”, “user-read-email” and “user-read-birthdate”?
Seems to me that you app should be able to do what it does(listing playlists and playing them on connected devices) without needing access to those scopes?

Please correct me if I’m wrong.

(Edit…)
Deleted my Spotify app on https://developer.spotify.com/ 1, edited your .js file to only include scopes “playlist-read-private”, “user-read-playback-state”, “user-modify-playback-state”, and then I re-authenticated with Spotify(The scopes requested now, was only the 3 from the .js file, so the changes was picked up).
All is working fine, I’m able to see my playlists and devices and start playing on the devices, so I’m still wondering why you need access to private account info like email, username and birthday?

ping @fondberg

Redirected to login page

Hi,
Seems I'm missing something...

Whenever I try to authorize, the login page is where i'm redirected to. After logging in I am not authorized. (the auth redirect URi is correct) and I have authorized the component using the api part of the url succesfully before.

Somhow using the same url but instead using the view url is not working. I even renamed the url for the view to mathc the example:

/lovelace/media

also added

/lovelace/media/

just to be sure

any ideas what is wrong?

once play is started , it cant be stopped

pause is missing from the interface , only play is available no stop, no pause .

INVALID_CLIENT: Invalid redirect URI

Hello!
After a while I keep the Home Assistant page open (not necessarily where the Spotify card is located), the page reloads on a Spotify link indicating "INVALID_CLIENT: Invalid redirect URI".
Home Assistant must always remain open on that client. If this happens, I have to remove the card!
Thanks

Doesn't work with all browsers

custom: spotify-card displays fine in Chrome and Vivaldi (Chromium), but not in Firefox or in Morph browser on Ubuntu Touch based on QtWebEngine. In the latter browsers I get “Custom element doesn’t exist: spotify-card”.

Uncaught TypeError: Failed to resolve module specifier "@babel/polyfill". Relative references must start with either "/", "./", or "../".

Noticed this error in the last few days:

Uncaught TypeError: Failed to resolve module specifier "@babel/polyfill". Relative references must start with either "/", "./", or "../".

No stacktrace and the location is first line of the HTML that i'm on.

Customize the amount?

I love this card, and got it to work, but can i make a request so that it only displays the top 5? I use it on an ipad and i can't have more then 2 columns

incorrect redirect URI from component

During the initial setup, I encountered an incorrect redirect URI. When you get to the step where you click "Authenticate" in the component, I had to alter a part of the redirect uri manually to "lovelace/media". By default it said "lovelace/default_view". After manually changing the URI, the authentication worked fine.

Display incorrect when using 2 cards in same view

When using this card twice on the same view the second instance shows big pictures instead of a list, making it hard to get an overview, see pcitures.
Reason for using 2 cards on same view? I want to have one list with my top playlist, and one with the featured playlists.

I am using:
homeassistant 0.107.7
Chrome 80.0.3987.149
ios dark theme for lovelace (but same problem for other themes as well)

Authenticate every time I open hass

Hi, thanks for the great card. It works fine now after understanding the URL I had to add in Spotify developer. However, I have to authenticate every time I open the page where my card is...
Is this normal behaviour?

Thanks!
Tom

check if we can use the mp.spotify state instead?

spotify-card/src/SpotifyCard.js

Lines 42 to 47 in 3eaf67a

	}, 5000); // TODO: check if we can use the mp.spotify state instead?
	}
	componentWillUnmount() {
	clearInterval(this.dataRefreshToken);
	}

---

This issue was generated by todo based on a TODO comment in 3eaf67a when #33 was merged. cc @custom-cards.

No card type configured.

Hi Niklas,

I’m still getting this error. Got it installed with HACS, latest version (1.10). And added it to the lovelace config:
resources:

• type: module
  url: /community_plugin/spotify-card/spotify-card.js

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.

cards:

• type: 'custom:spotify-card'
  client_id: asdfasdfasdfasdfasdfasdf
  limit: 10

Also added the redirect uri’s.

Any idea?

Mobile app force opening browser

Hi,
this is very nice plugin, however I have one issue. When I am using it on Android mobile app. It requires authentication, but it forces me to go to browser, where HA opens, there everything works fine. However when I go back to app, it is still showing autheticate button and the situation repeats. Do you plan to solve it somehow that It would be possible to use card in mobile app?

BTW is there any plan to maybe allow spotify search?

Thank you!

INVALID_CLIENT: Invalid redirect URI

Getting INVALID_CLIENT: Invalid redirect URI.

• Have https://myserver.duckdns.org/api/spotify as the redirect URI (which was working well to authorize default ha spotify component.). Added https://myserver.duckdns.org/lovelace/media as an additional redirect URI.
• Using HACS. Tried
• url: /community_plugin/spotify-card/spotify-card.js
  type: module
  AND
• type: module
  url: >-
  https://cdn.jsdelivr.net/gh/custom-cards/[email protected]/dist/spotify-card.umd.js
  Not working.
  Any advice?

Thanks

Question

Hi,

I've setup your'e awesome spotify card and you're spotcast plugin, know when i put the card in a lovelace view and if i click on that that i get redirected to a page with something about a login url....
You have any idea what i did wrong? Below is my config. '

spotify

spotify:
client_id: !secret spotify_user
client_secret: !secret spotify_passwd

spotcast

spotcast:
client_id: !secret spotify_user
client_sectet: !secret spotify_passwd `

how to add to dashboard?

i tried to add it to my dashboard but cant figure out how to...
can someone help me?
or share there customcard text?

can't male device: working

Hi I try to pre-select a device but it does not seams to work ..

this is my code :

      - type: 'custom:spotify-card'
        client_id: sodiujsodlsaiujo8u29ajkof9oujd9fafp9a3jokdpa2
        limit: 5
        device: Salon GoogleHome

No media players present

After adding the resource to lovelace-ui and the card, I'm seeing the following:

Note - I've tried clicking all around the card without any change)

Even though, checking the network tab in browsers console shows that the API request was successful and I have several active devices and playlists, e.g.:

I tried clearing the browser cache and several browsers: Chrome, Firefox.

FYI, I'm using other Spotify integrations:

• SpotifyPlaylist Sensor - works fine, returns all playlists.
• Spotify media_player - works fine, detects media and can play media on active devices.

Each integration has a separate application created in the Spotify dev console and non of them share credentials.

Any ideas?

transfer_playback no longer available in spotcast

As per https://github.com/fondberg/spotcast, transfer_playback is no longer available thus the spotify-card return the following error:
extra keys not allowed @ data['transfer_playback']
Could you make a small tweak to fix this? Thank you

HA iOS app doesnt work

Hey there,
I have it working on chrome and edge:chromium - and its great.

However, its not authenticated in the mobile app (the newer iOS app). I'm assuming as there is no URI to return to?

Player command failed: Restriction violated

Its currently not possible to choose player on my Spotify-card then music isnt playing on any device. I'm on version 1.9 of Spotify-Card and HA version is 0.100.2.

Log Details (ERROR)
Sat Oct 19 2019 17:20:15 GMT+0200 (centraleuropeisk sommartid)
http status: 403, code:-1 - https://api.spotify.com/v1/me/player/play?device_id=2f75e60ce0f248e0b9df03415ad95ebd:
 Player command failed: Restriction violated
Traceback (most recent call last):
  File "/usr/local/lib/python3.7/site-packages/spotipy/client.py", line 121, in _internal_call
    r.raise_for_status()
  File "/usr/local/lib/python3.7/site-packages/requests/models.py", line 940, in raise_for_status
    raise HTTPError(http_error_msg, response=self)
requests.exceptions.HTTPError: 403 Client Error: Forbidden for url: https://api.spotify.com/v1/me/player/play?device_id=2f75e60ce0f248e0b9df03415ad95ebd

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/components/websocket_api/commands.py", line 133, in handle_call_service
    connection.context(msg),
  File "/usr/src/homeassistant/homeassistant/core.py", line 1233, in async_call
    await asyncio.shield(self._execute_service(handler, service_call))
  File "/usr/src/homeassistant/homeassistant/core.py", line 1260, in _execute_service
    await self._hass.async_add_executor_job(handler.func, service_call)
  File "/usr/local/lib/python3.7/concurrent/futures/thread.py", line 57, in run
    result = self.fn(*self.args, **self.kwargs)
  File "/config/custom_components/spotcast/__init__.py", line 206, in start_casting
    play(client, spotify_device_id, uri, random_song, repeat)
  File "/config/custom_components/spotcast/__init__.py", line 116, in play
    client.start_playback(**kwargs)
  File "/usr/local/lib/python3.7/site-packages/spotipy/client.py", line 948, in start_playback
    return self._put(self._append_device_id("me/player/play", device_id), payload=data)
  File "/usr/local/lib/python3.7/site-packages/spotipy/client.py", line 190, in _put
    return self._internal_call('PUT', url, payload, kwargs)
  File "/usr/local/lib/python3.7/site-packages/spotipy/client.py", line 126, in _internal_call
    headers=r.headers)
spotipy.client.SpotifyException: http status: 403, code:-1 - https://api.spotify.com/v1/me/player/play?device_id=2f75e60ce0f248e0b9df03415ad95ebd:
 Player command failed: Restriction violated

Callback to Home Assistant App

Hi, i'm enjoying the spotify-card since a few days. Great work!

Now I got a little question, is it possible to add a redrirect URL to the Home Assistant App?
Everytime after i press the Authentication-Button in the App, Home Assistant starts in a new browser tab after the successfull authentication and can start to play the songs there. But unfortunately not in the App.

Thanks for your reply.
Manuel

transfer playback ? i got this error ?

Device parameter doesn't pre-select but single select

What I mean is if I pre-select my MacBooks Spotify I cannot switch to the chromecasts. If I drop the device line, I can freely chose between the MacBook and the chromecasts.

Device drop down menu won't work; a vertical scroll is displayed instead

Hello;

First of all, thank you for your card.
Unfortunately, I have an issue with it. I am using Opera 63.0.3368.94 and the dropdown menu used to select the spotify devices doesn't work as it should do.

When I try to change the current device, the menu shows up bellow but a vertical scroll bar appears on the right (see screenshots bellow). It looks like the dropdown is not a html one but more a div with display:none which could cause the issue.

Let me know if you need more details.
Regards

auto refresh of state fails after token expires

auto refresh of state fails after token expires
refreshPlayData needs to check for 401 and do a reauth

Two accounts

Is there anyway to have two accounts set up with a card? My wife wants her own card for her own account. Seems like only 1 log in per instance I guess. Just wanting to confirm or maybe I am missing a work around.

Devices droplist should open UPWARDS

Right now my Spotify card is at the bottom edge of the screen. When you open the devices list, it creates a box that requires me to scroll down beyond the bottom edge of the dashboard to see the list of options.

I think the UX should be changed for the popup menu to be bottom-edge aligned with the bottom of the card

Spotify won't start, errors with: Failed to call service spotcast/start. "name='wp_access_token', domain=None, path=None"

Hello,

I'm having issues connecting to any chromecast devices (that are not previously connected), they appear listed but when I click on them it fails to callthe service. For example if I click on "Home Group" for the google chromecasts group it just errors out and this comes up in the homeassistant.log

2019-10-01 17:53:45 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.1871198480] "name='wp_access_token', domain=None, path=None"
Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/components/websocket_api/commands.py", line 130, in handle_call_service
    connection.context(msg),
  File "/usr/src/homeassistant/homeassistant/core.py", line 1234, in async_call
    await asyncio.shield(self._execute_service(handler, service_call))
  File "/usr/src/homeassistant/homeassistant/core.py", line 1261, in _execute_service
    await self._hass.async_add_executor_job(handler.func, service_call)
  File "/usr/local/lib/python3.7/concurrent/futures/thread.py", line 57, in run
    result = self.fn(*self.args, **self.kwargs)
  File "/config/custom_components/spotcast/__init__.py", line 162, in start_casting
    access_token, expires = get_spotify_token(username=user, password=pwd)
  File "/config/custom_components/spotcast/__init__.py", line 85, in get_spotify_token
    data = st.start_session(username, password)
  File "/usr/local/lib/python3.7/site-packages/spotify_token.py", line 70, in start_session
    access_token, expiration_date = _get_access_token(session, cookies)
  File "/usr/local/lib/python3.7/site-packages/spotify_token.py", line 42, in _get_access_token
    access_token = response.cookies['wp_access_token']
  File "/usr/local/lib/python3.7/site-packages/requests/cookies.py", line 328, in __getitem__
    return self._find_no_duplicates(name)
  File "/usr/local/lib/python3.7/site-packages/requests/cookies.py", line 399, in _find_no_duplicates
    raise KeyError('name=%r, domain=%r, path=%r' % (name, domain, path))
KeyError: "name='wp_access_token', domain=None, path=None"

FEATURE REQUEST: Scrollable List

Release numbers are all over the place

I am trying to build a well-formed PR to fix #56 and I don't get what your logic is with these versions:

1.11 -> 1.20 (instead of 1.12?)

Your package.json is still 1.11 (and your package-lock.json is 1.10)

https://github.com/custom-cards/spotify-card/releases shows you actually are up to 1.22?

I think you need to follow some consistent process when you cut a new release. I'm assuming you mark the version and tag when you merge to master.

wrong position of scrollbar on firefox

In firefox since the last version release (1.22) the overflow on the list of playlists is broken (see picture)
In the previous version it did work (1.20).

(I have blanked out my playlists)

The scrollbar should not be at the outside along the whole thing but on the inside in the black squire to only scroll the playlist and not the whole card.
Now if you scroll the Spotify logo and selection of media player also scroll "away"

configuration:

      - client_id: ???
        height: 170
        limit: 25
        type: 'custom:spotify-card'

Authentication issue

I receive the following message after i try to log in:
“INVALID_CLIENT: Invalid redirect URI”

I have added the URI to the list in spotify.

Login not shared through HA among devices

It might not be an issue but unfortunately it is annoying.
Wherever this issue falls to, it can be so reproduced:

1. After following the installation guide, the user is presented with this below picture:
   https://github.com/custom-cards/spotify-card/blob/master/spotify-card-authenicate.png
2. The user Logs in. His playlists (if any) appear.
3. The user has other devices. He wants to use this same HA card.

Expected behaviour:
For each device he has, he is presented the same HA Lovelace dashboard (therefore Spotify card) whose user is logged in.

Example:
Home Assistant has a user "tablet". User tablet is logged in on a tablet device. He logs in for the first time to Spotify through spotify-card. User tablet logs in on another device. He is presented the same spotify-card already logged in.

Current behaviour:
For each device he has, he must log in to Spotify.

Example:
Home Assistant has a user "tablet". User tablet is logged in on a tablet device. He logs in for the first time to Spotify through spotify-card. User tablet logs in on another device. He has to repeat the login.

Notes not part of the issue:
Thanks for your work! It is a wonderful project.

still asking for spotcast

Hi,
when trying to push stream to idle cast device (any of them) error is raised:

Fallita chiamata a servizio spotcast/start . Service not found.

Failed call to spot cast/start service. Service not found.

Everything perfect with spot cast in place.

tried both
dist download versions 3170aac
and
https://cdn.jsdelivr.net/gh/custom-cards/[email protected]/dist/spotify-card.umd.js

(even @1.9 just in case)

great job anyways!!
cheers.

Chromecast: failed to call service spotcast/start

Hi,

I am unable to start a playlist on a chromecast device. The devices are listed, but when I click on any of them, I get the message "Failed to call service spotcast/start. Service not found"

Traceback (most recent call last):
File "/usr/src/homeassistant/homeassistant/components/websocket_api/commands.py", line 133, in handle_call_service
connection.context(msg),
File "/usr/src/homeassistant/homeassistant/core.py", line 1235, in async_call
await asyncio.shield(self._execute_service(handler, service_call))
File "/usr/src/homeassistant/homeassistant/core.py", line 1260, in _execute_service
await handler.func(service_call)
File "/usr/src/homeassistant/homeassistant/helpers/entity_component.py", line 205, in handle_service
self._platforms.values(), func, call, service_name, required_features
File "/usr/src/homeassistant/homeassistant/helpers/service.py", line 336, in entity_service_call
future.result() # pop exception if have
File "/usr/src/homeassistant/homeassistant/helpers/service.py", line 358, in _handle_service_platform_call
await getattr(entity, func)(**data)
File "/usr/local/lib/python3.7/concurrent/futures/thread.py", line 57, in run
result = self.fn(*self.args, **self.kwargs)
File "/usr/src/homeassistant/homeassistant/components/spotify/media_player.py", line 280, in media_play
self._player.start_playback()
File "/usr/local/lib/python3.7/site-packages/spotipy/client.py", line 913, in start_playback
return self._put(self._append_device_id("me/player/play", device_id), payload=data)
File "/usr/local/lib/python3.7/site-packages/spotipy/client.py", line 190, in _put
return self._internal_call('PUT', url, payload, kwargs)
File "/usr/local/lib/python3.7/site-packages/spotipy/client.py", line 126, in _internal_call
headers=r.headers)
spotipy.client.SpotifyException: http status: 404, code:-1 - https://api.spotify.com/v1/me/player/play:
Player command failed: No active device found

Integration of this Card with new HA Integration?

Love this card but I was unable to get it to work but I was able to get the new integration of Spotify to work in the new HA v105. Is there a way to make this card using the entity it creates to do the same thing?

Spotify connect devices not showing up

I've tried Shift F5, I've trued restarting the server, I've tried refreshing lovelace after I've started music on spotify from the web player. I don't know what else to try. It is showing me my googlecast devices, but it won't even let me select them, and isn't showing any of my spotify connect devices (all of my Echo Dot's)

Wallpanel support

I'm trying to authenticate this card on my tablet with WallPanel from thanksmister but nothing happens. Except I double click it then it shows this error: "response_type must be code or token"

daily mixes

would it be possible to retrieve the infinite playlists spotify creates (daily mix 1 - 2 - 3 etc ) and start them from card?

Can't authenticate in the android app

When press the authenticate button in the android app, the link opens in the default browser so doesn't authenticate the app.