novatorem/SetUp.md

Set Up

Spotify API App

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

Refresh Token

Powershell

Script to complete this section

$ClientId = Read-Host "Client ID"
$ClientSecret = Read-Host "Client Secret"

Start-Process "https://accounts.spotify.com/authorize?client_id=$ClientId&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=http://localhost/callback/"

$Code = Read-Host "Please insert everything after 'https://localhost/callback/?code='"

$ClientBytes = [System.Text.Encoding]::UTF8.GetBytes("${ClientId}:${ClientSecret}")
$EncodedClientInfo =[Convert]::ToBase64String($ClientBytes)

curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorization: Basic $EncodedClientInfo" -d "grant_type=authorization_code&redirect_uri=http://localhost/callback/&code=$Code" https://accounts.spotify.com/api/token

Manual

• 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!

Deploy to Heroku

• Create a Heroku application via the Heroku CLI or via the Heroku Dashboard. Connect the app with your GitHub repository and enable automatic builds
  PS. automatic build means that everytime you push changes to remote, heroku will rebuild and redeploy the app.
  • To start the Flask server execute heroku ps:scale web=1 once the build is completed.
• Or click the Deploy to Heroku button above to automatically start the deployment process.

Run locally with Docker

• You need to have Docker installed.

• Add Environment Variables:

  • SPOTIFY_REFRESH_TOKEN
  • SPOTIFY_CLIENT_ID
  • SPOTIFY_SECRET_ID

• To run the service, open a terminal in the root folder of the repo:
  Execute:

  docker compose up
  

• When finished, navigate to http://localhost:5000/

• To stop the service, open a terminal in the root folder of the repo:
  Execute:

  docker compose down
  

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 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:".

• Change height to height + 40 (or whatever margin-top is set to)
• Uncomment .main's margin-top
• Uncomment currentStatus

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 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>

Requests

Customization requests can be submitted as an issue, like https://github.com/novatorem/novatorem/issues/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-

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