Spotify Custom Tile

Hi James, thanks for creating this. This is awesome!

I had this installed last night and it was working wonderfully but today when I tried using it again, the token expired, so I went to get it authorized for a new refresh token. The demo loaded up fine but I cannot select any of my Amazon Echoes, even though they all show up. I get the message “No active device. Please select an available device first.”

One thing I’ve found out is that if I have pre-selected the device on my Spotify app on my PC, I can use the controls in the tile but still get the same device error message as above.

I think you’re running into the limitation of the Spotify API as noted further up in the thread. It’s really neuters the functionality of their Web API compared to their ‘app’ SDKs. :frowning:

Thank you for the reply, Josh.

I have reverted to testing out your other music player with album art with your latest update.

Thanks.

Bruce

1 Like

Is there a way to enable the Lyrics in this music player as a tile? TIA.

I don’t believe they make the lyrics available through their API. From a quick search, it looks like even Spotify is sourcing the lyrics from a third party.

Thank you very much for the information

Hi,
I made some modifications to the provided code in order to have the album art cover the entire tile:

  • Album art covers entire tile ( applied darkened filter and slight blur to improve lists readability) when playing song / device is selected.

  • When not playing / device is not selected elements stay transparent, song & artist section becomes hidden.

  • Moved the song & tittle to the left

  • Centered control buttons

  • Applied transparency to elements background ( artist/song, player controls / lists )

  • Works great in smaller tiles (3*3) or mega tile.

If someone is interested in the code PM me.

When nothing is played or no device is selected the tile stays transparent ( as there is no album cover to display ) this way it blends with your dashboard background, also the section where artist and song is becomes hidden.

Example in use with mega tile (really depends on how many tile number your dashboard is setup) I just left the first column to go back to main dashboard and the rest is used by the spotify tile.

3 Likes

Hi @James. I´m new in Sharptools. This Link https://spotify-demo-auth.glitch.me/ dont work for me. Can you help me?

What doesn’t work? Maybe a screenshot of what you are seeing would help?

Hi, The browser can´t find the Site.

1 Like

Have you tried on a different device on a different network? For example, on your mobile phone while disconnected from Wifi.

I just tried from my phone and it worked for me.

@josh Thank you. I tried it different times and now it worked. it´s possible that the Tile don´t show me my Sonos?

Nice layout, interested in the code

1 Like

Hi all,
I newbee in Sharptools and I just tried to create a full developer version of Spotify according to the instructions on SharpTools_custom_tile_poc on the Github and I can’t create the acces_token and refres_token in Postman in the last step.
I don’t know where I’m doing wrong.
Has anyone tried this procedure?
I am sorry for bothering.
Have a nice New Year.

Alex
P.S.: Sorry for my English.
Greetings from Czech Republic

Since I have several requests for the updated code, you can access it here:
https://github.com/brunocerq/custom-spotify-tile-sharptools

2 Likes

I suspect that most people use the standard setup instructions that simplifies the process of getting a valid token using the pre-built authorization page.

As for your question from Github about the headers for the developer approach, reading through the instructions it sounds like you need to include a header with the key Authorization and the value Basic {{your_base64_clientId:secret}}. If I’m reading the instructions right, you would need to have something like the following, but of course customized with your base64 encoded {{clientId}}:{{clientSecret}}

image

@josh , @James ,

Wonderful work and really useful. Is it possible to add also volume control to Spotify with this custom tile ?
I’m not using this tool, I’m trying to help my friends…

1 Like


I do not find how to enlarge the icon on the Spotify Button I created. The Icon is a user file and the tile is a Dashboard tile that calls the player in a full screen mode. (I am using a Galaxy TAB A7 lite and the screen is too small for the player controls…)

Also, could anyone teach me how to add volume controls? Is that even possible?

Most tiles have a fixed space for icons. I’ve marked it with a red outline in the following screenshot:

You could use a Super Tile if you wanted more control over the placement and size of the icon.

From a quick check of the Spotify Web API documentation, it looks like there is an option to set the player volume. You would need the requisite HTML + JavaScript skills to modify the custom tile if you wanted to implement it though.

If your player device is integrated with your smart home, you may be able to control it with the native music player tile. And there’s a Vertical Range Input (Slider/Dimmer) custom tile that can be used for dedicate volume control for player ‘things’.

Thank you Josh! I switched to Super tiles instead.