Spotify Lovelace Card

Pause is not implemetd (yet, PRs welcom) in the card

There are no dependencies or shared conf betweenb media_player.spotify and spotify-card. The only reason I mention it in the README is that this card requires a cliend-id which is well documented in the mediaplayer-spotify docs.

For the upper screenshot it seems you have logged in but don’t receive any playlists, are you sure you are running the paid premium Spotify account?

I don’t use nabu casa remote so I will let others answer you on this thread

There are some new features in the new version of the card. If you use spotcast custom component you can now choose to list the daily mixes playlists by adding dailyMixes=true as a property to the card in lovelace.yaml.

Since a couple of releases it is also possible to choose to choose featuredPlaylists instead (se README for instructions). dailyMixes and featuredPlaylists can not be configured at the same time.

1 Like

did you get this sorted? mines doing the same and its annoying…

Did you do anything special to get rid of the scroll bars? when i tap on a device to play it on it expands the card and creates an even bigger scrollbar where yours seems to pop out.

  1. Which browser and version of it are you using
  2. Are you using custome themes or custom layout components for lovelace?

Chromium 79(latest)
I’m using a theme called google dark theme, even when i switch back to default lovelace the scroll bars are still there.

And which device/OS?

Scrollbars are showing in Firefox, on all devices. It looks like it’s related to the overflow-y:auto setting. I’m not sure if it’s a problem with how display:flex or so, is handled in Firefox.

If i add overflow:hidden to .playlists, the scrollbars are gone.


Is there a good reason to have height and overflow-y defined for the .playlists-dom?

If i remove both of the styling-elements, my scrollbars are gone :slight_smile: (Aka. defining them as initial, which are the same)

I’ve also added height: auto; and overflow-y: auto; to .spotify_container, just to have the proper handle, for overflow.

Instead of adding position:absolute to dropdown-content, i would go with position: fixed.


Another issue, is that many sound devices are present in my “Device” list:

I can see it’s using the config/entity_registry/list-ressource, and using cast as filter.

I’m note sure if it’s related to some of my devices?

        async refreshCastEntities() {
            const e = (await this.props.hass.callWS({
                type: "config/entity_registry/list"
            })).filter(e => "cast" == e.platform).map(e => this.props.hass.states[e.entity_id]).filter(e => null != e);
            this.setState({
                castEntities: e
            })
        }

And, lastly… I saw that the Spotify-component is changed a bit. Does it means good news, for this plugin? Will we be able to use the token, or so? :slight_smile:

First I’ll answer the last question about the builtin spotify component, answer is no. The reason is that it doesn’t use the more powerful weblogin token.

Then wrt to your css digging: can you create a PR?

Regarding your devices. I didn’t really understand what the problem was. In hass returning too many devices and some are null? Feels like a bug in home assistant device registry…

Fair :slight_smile:

I’ll create a PR.

And yes, there many many empty lines, in my card with devices.

My devicelist generated by spotcast looks fine, btw;


EDIT: I’m not that sure about how you’ve compiled the Javascript… Hmm.

Not sure if this is my theme or an issue?

Overlay and my list scrolls

thank you very much for this card! it works when i access homeassistant through the browser on my pc (http://hassio.local:8123/). but when i access homeassistant through the ipad app iget an uri error. could you tell me what i have to add on the spotify side, so all my devices in my network can authenticate? i added my duckdns link.

I compiled the js with npm run build after installing deps using npm install

I don’t think the ipad app is supported as it relies in redirects and normal browser functionality.

It should work with chrome on iPad though

Can you please add a search playlist function? I have have over 200 playlists

There are many things that would be nice to have but as this is completely and free open source and I have limited time the best way is usually to create the feature and do a pull request.

I seem to be having issues authenticating on my mobile phone (galaxy s7). I keep getting invalid redirect, despite trying Samsung browser, chrome, and the android app. I’ve also tried both browsers in mobile and desktop mode and even typing the address for my Spotify view directly into the address bar as I have it set up in the Spotify developer app. It works fine on my PC though.

Any suggestions?

Edit: I managed to get it working on my mobile browser, but can’t get it to work in the Android app (which is what I use), since the authenticate button opens a browser window, so I guess it’s only authenticating the browser, not the app.

Maybe there’s a workaround to somehow manually authenticate the app through Spotify?

1 Like

Hey Niklas.

Great to make this looks really good !

At the moment i have de the problem with auth.
I hit the Auth login to spotify then ik get kicked out of Hassio and need to login to Hassio.
And the auth was not succesfull i did reproduce this on Edge, Firefox and chrome.

The standard Spotify Addon in Hassio had no Auth problems.
I can play music with it. But with your card i can’t get the Auth right.

Thanks Mate,