Spotify Lovelace Card

  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,

The spotify integration in home assiatant and this card doesn’t share anything wrt to authorization. Please read the README for this card or search this forum thread for auth and redirect url configuration in spotify developer tools

Apps are not supported as they doesn’t handle redirects the same way as browsers dom there are no workarounds that I know of

Hmm… That’s too bad. Maybe it’s something the HA devs could look at at some point I suppose.

Howdy,
Having some issues getting this authenticated.

Spotify integration works fine. I can see the ‘media_player.spotify_chad’

callbacks are
image

Base http is

 http:
   base_url: http://192.168.20.40:8123/lovelace/media/

I’ve also tried

 http:
   base_url: http://192.168.20.40:8123/lovelace/media

and

 http:
   base_url: http://192.168.20.40:8123

When I click the card to authenticate I get the “INVALID_CLIENT: Invalid redirect URI”

Login - Spotify

Can anyone see if there is something wrong with my setup?

I had to set the base_url to the Nabu Casa address and the same in the redirect on Spotify and worked great. I could not get it to work for private addresses since they cannot route outside the network.

Anyone have a good lovelace design for using the new Spotify entity that is created in the new integration on HA v105? The basic media card blows and I tried to setup the custom Spotify card but no joy there.