Skip to content

Latest commit

 

History

History
98 lines (60 loc) · 3.71 KB

SetUp.md

File metadata and controls

98 lines (60 loc) · 3.71 KB
Raw

Set Up Guide

Spotify

  • 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

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

If you want a distinction between the widget showing your currently playing, and your recently playing:

Hide the EQ bar

Remove the # in front of contentBar in line 81 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.

Requests

Customization requests can be submitted as an issue, like novatorem#2

If you want to share your own customization options, open a PR if it's done or open an issue if you want it implemented by someone else.

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.