Skip to content

Latest commit

 

History

History
110 lines (70 loc) · 4.71 KB

SetUp.md

File metadata and controls

110 lines (70 loc) · 4.71 KB

Spotify API

  • Create a Spotify Application
  • Take note of:
    • Client ID
    • Client Secret
  • Click on Edit Settings
  • In Redirect URIs:
    • Add http://localhost/callback/

Refresh Token

  • Navigate to the following URL:
https://accounts.spotify.com/authorize?client_id={SPOTIFY_CLIENT_ID}&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=http://localhost/callback/

  • After logging in, save the {CODE} portion of: http://localhost/callback/?code={CODE}

  • Create a string combining {SPOTIFY_CLIENT_ID}:{SPOTIFY_CLIENT_SECRET} (e.g. 5n7o4v5a3t7o5r2e3m1:5a8n7d3r4e2w5n8o2v3a7c5) and encode into Base64.

  • Then run a curl command in the form of:

curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorization: Basic {BASE64}" -d "grant_type=authorization_code&redirect_uri=http://localhost/callback/&code={CODE}" https://accounts.spotify.com/api/token
  • Save the Refresh token

Deployment

Deploy to Vercel

  • Register on Vercel

  • Fork this repo, then create a vercel project linked to it

  • Add Environment Variables:

    • https://vercel.com/<YourName>/<ProjectName>/settings/environment-variables
      • SPOTIFY_REFRESH_TOKEN
      • SPOTIFY_CLIENT_ID
      • SPOTIFY_SECRET_ID

  • Deploy!

Readme

You can now use the following in your readme:

[![Spotify](https://USER_NAME.vercel.app/api/spotify)](https://open.spotify.com/user/USER_NAME)

Customization

Hide the EQ bar

Remove the # in front of contentBar in line 109 of current master, then the EQ bar will be hidden when you're in not currently playing anything.

Status String

Have a string saying either "Vibing to:" or "Last seen playing:".

Theme Templates

If you want to change the widget theme, you can do so by the changing the current-theme property in the templates.json file.

Themes:

  • light
  • dark

If you wish to customize farther, you can add your own customized spotify.html.j2 file to the templates folder, and add the theme and file name to the templates dictionary in the templates.json file.

Color

You can customize the appearance of your Card however you wish with URL params.

Common Options:

  • background_color - Card's background color (hex color) without #
  • border_color - Card border color (hex color) without #

Use /?background_color=8b0000&border_color=ffffff parameter like so:
 
Spotify

Spotify Logo

You can add the spotify logo by removing the commented out code, seen below:

<a href="{{songURI}}" class="spotify-logo">
    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
</a>

Debugging

If you have issues setting up, try following this guide.

Followed the guide and still having problems? Try checking out the functions tab in vercel, linked as: https://vercel.com/{name}/spotify/{build}/functions

Which looks like-

image


You will see a log there, and most issues can be resolved by ensuring you have the correct variables from setup.