aveek-saha / spotify-box

🎧 Update a pinned gist to show your top Spotify tracks/artists.

spotify-box

🎧 Update a pinned gist to show your top Spotify tracks/artists

---

📌✨ For more pinned-gist projects like this one, check out: https://github.com/matchai/awesome-pinned-gists

Setup

Prep work

GitHub

1. Create a new public GitHub Gist. (https://gist.github.com/)
2. Create an access token with the gist scope and copy it. (https://github.com/settings/tokens/new)

Spotify

1. Go to the Spotify Developer Dashboard and log in. (https://developer.spotify.com/dashboard/)

2. Create an app with a name and description.

3. Copy the Client ID and Client secret.

4. Click on edit settings and add http://localhost:5000/ as a redirect URI.

5. In your browser enter this URL and replace <client_id> in this url:

   https://accounts.spotify.com/authorize?client_id=<client_id>
   &response_type=code&redirect_uri=http://localhost:5000/
   &scope=user-top-read%20user-read-recently-played
   

6. After this you should see an url like this in your address bar: http://localhost:5000/?code=<code>. Copy this code query parameter.

7. Use this website to generate a base 64 string of the form client_id:client_secret. (https://www.base64encode.org/)

8. In a terminal, run the following command and use the base 64 encoded string and code from the previous steps.

   curl -H "Authorization: Basic <base 64 str>" -d grant_type=authorization_code -d code=<code> 
   -d redirect_uri=http://localhost:5000/ https://accounts.spotify.com/api/token 

9. A JSON response containing a refresh_token will be returned. Copy this value.

Project setup

1. Fork this repo
2. Go to the repo Settings > Secrets
3. Add the following environment variables:
   • GH_TOKEN: The GitHub access token generated above.
   • GIST_ID: The ID portion from your gist url: https://gist.github.com/Aveek-Saha/8335e85451541072dd25fda601129f7d.
   • CLIENT_ID: Your Spotify client_id.
   • CLIENT_SECRET: Your Spotify client_secret.
   • REFRESH_TOKEN: The refresh_token generated.
   • TYPE: The type of data generated on the gist. Can be one of top_tracks, top_artists or recently_played.
   • TIME_RANGE: The time frame for computing top_tracks or top_artists. Can be one of long_term, medium_term or short_term.

Credits

This code was inspired by @matchai's bird-box.

spotify-box's Issues

I see this issue, Any solution? or what possibly I am doing wrong?

recently_played is broken

Using top_tracks seems to work fine, but using recently_played breaks it:

Something went wrong! WebapiRegularError: An error occurred while communicating with Spotify's Web API.
Details: Insufficient client scope.
    at _toError (/home/runner/work/spotify-box/spotify-box/node_modules/spotify-web-api-node/src/http-manager.js:39:12)
    at /home/runner/work/spotify-box/spotify-box/node_modules/spotify-web-api-node/src/http-manager.js:71:25
    at Request.callback (/home/runner/work/spotify-box/spotify-box/node_modules/superagent/lib/node/index.js:905:3)
    at /home/runner/work/spotify-box/spotify-box/node_modules/superagent/lib/node/index.js:1127:20
    at IncomingMessage.<anonymous> (/home/runner/work/spotify-box/spotify-box/node_modules/superagent/lib/node/parsers/json.js:22:7)
    at Stream.emit (events.js:210:5)
    at Unzip.<anonymous> (/home/runner/work/spotify-box/spotify-box/node_modules/superagent/lib/node/unzip.js:53:12)
    at Unzip.emit (events.js:215:7)
    at endReadableNT (_stream_readable.js:1184:12)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  body: { error: { status: 403, message: 'Insufficient client scope' } },
  headers: {
    'content-type': 'application/json; charset=utf-8',
    'cache-control': 'private, max-age=0',
    'x-robots-tag': 'noindex, nofollow',
    'access-control-allow-origin': '*',
    'access-control-allow-headers': 'Accept, App-Platform, Authorization, Content-Type, Origin, Retry-After, Spotify-App-Version, X-Cloud-Trace-Context, client-token, content-access-token',
    'access-control-allow-methods': 'GET, POST, OPTIONS, PUT, DELETE, PATCH',
    'access-control-allow-credentials': 'true',
    'access-control-max-age': '604800',
    'content-encoding': 'gzip',
    'strict-transport-security': 'max-age=31536000',
    'x-content-type-options': 'nosniff',
    date: 'Sat, 09 Oct 2021 21:57:29 GMT',
    server: 'envoy',
    via: 'HTTP/2 edgeproxy, 1.1 google',
    'alt-svc': 'clear',
    connection: 'close',
    'transfer-encoding': 'chunked'
  },
  statusCode: 403
}
undefined
Unable to update gist
HttpError: Validation Failed: {"resource":"Gist","code":"missing_field","field":"files"}

Pretty Format only works in English

The picture is shown as follows indicates this issue:

▶ 怪美的 ............................... 🎵 Jolin Tsai
▶ 玫瑰少年 .............................. 🎵 Jolin Tsai
▶ Jungle ............................ 🎵 CIX
▶ Dingga ............................ 🎵 MAMAMOO
▶ Revolution ........................ 🎵 AleXa