Git Product home page Git Product logo

spotify-github-profile's Introduction

spotify-github-profile

Create Spotify now playing card on your github profile

Running on Vercel serverless function, store data in Firebase (store only access_token, refresh_token, token_expired_timestamp)

Table of Contents
Connect And Grant Permission
Example
Running for development locally
Setting up Vercel
Setting up Firebase
Setting up Spotify dev
Running locally
How to Contribute
Known Bugs
Features in Progress
Credit

Connect And Grant Permission

  • Click Connect with Spotify button below to grant permission

Example

  • Default theme

spotify-github-profile

  • Compact theme

spotify-github-profile

  • Natemoo-re theme

spotify-github-profile

  • Novatorem theme

spotify-github-profile

  • Karaoke theme

spotify-github-profile

Running for development locally

To develop locally, you need:

  • A fork of this project as your repository
  • A Vercel project connected with the forked repository
  • A Firebase project with Cloud Firestore setup
  • A Spotify developer account

Setting up Vercel

Setting up Firebase

  • Create a new Firebase project
  • Create a new Cloud Firestore in the project
  • Download configuration JSON file from Project settings > Service accounts > Generate new private key
  • Convert private key content as BASE64
    • You can use Encode/Decode extension in VSCode to do so
    • This key will be used in step explained below

Setting up Spotify dev

  • Login to developer.spotify.com
  • Create a new project
  • Edit settings to add Redirect URIs
    • add http://localhost:3000/api/callback

Running locally

  • Install Vercel command line with npm i -g vercel
  • Create .env file at the root of the project and paste your keys in SPOTIFY_CLIENT_ID, SPOTIFY_SECRET_ID, and FIREBASE
BASE_URL='http://localhost:3000/api'
SPOTIFY_CLIENT_ID='____'
SPOTIFY_SECRET_ID='____'
FIREBASE='__BASE64_FIREBASE_JSON_FILE__'
  • Run vercel dev
$ vercel dev
Vercel CLI 20.1.2 dev (beta) — https://vercel.com/feedback
> Ready! Available at http://localhost:3000

How to Contribute

  • Develop locally and submit a pull request!
  • Submit newly encountered bugs to the Issues page
  • Submit feature suggestions to the Issues page, with the label [Feature Suggestion]

Known Bugs

404/500 Error when playing local files

Features in Progress

Cross-platform support (Pandora, Apple Music, etc.)

Credit

Inspired by https://github.com/natemoo-re

spotify-github-profile's People

Contributors

bazwtf avatar bignuttawuts avatar bluenex avatar chrisin1 avatar dependabot[bot] avatar emmanuelmarianmat avatar kab1r avatar kittinan avatar masterhawk99 avatar matteomessmer avatar ntsd avatar realnethical avatar sebastianwd avatar sg5 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

spotify-github-profile's Issues

Current offline [Feature Request]

Overview

Hi! First of all, great work on this plugin!

I want to request a current offline template when nothing are being played. I made a simple template draft (screenshot one, also attached in the issue). Currently, I don't know if there is a url param to not throw an error if an advertising is playing, but actually, the server is throwing this error in my response (screenshot two).

Note that related error happens every time that an advertising is playing on my account.

Screenshots

Offline template draft

image

Error while advertising

image
image

Files

Offline template svg

offline.zip

[Feature Suggestion] Generic Music Services

Would it be interesting to leave something more generic for music services in general? Something like not only Spotify but Tidal, Deezer, Apple Music (I'm asking to see the interest and maybe contribute to the project with this feature).

How to center it?

How do I center the my spotify activity in my readme? Ive tried using img, p, a tags but none of this helped.
Any leads?

Suggestion

I think in novatorem and novatorem themes you could have the option to choose one with background color and the other transparent.

well it's just an idea of mine that i would like.

When nothing is being played, it will show random songs on your playlist

I have been having this issue on which it will show random songs from the playlist I left Spotify with, while I'm not listening to anything.

This is kind of annoying since you can't confirm if someone is actually listening to that song or not.

Not sure if this is an issue on my part but I don't think so? This doesn't seem to handle it properly when you're not listening to anything, adding support for that would be great! I would love to see support for it! :)

Better Support for Dark Mode

Hey there!

I'm currently using the github dark theme and I found that it was impossible to see the artist name and very difficult to see the song name on the dark theme (whether the default dark theme, the dimmed dark theme, or the high-contrast theme). Would it be possible to add a version or toggle for dark mode?

Here is a better example of what I'm talking about.

refresh_token token not found

Error log

16:19:20:91
1596187161 1596186860
Refresh token
[ERROR]	2020-07-31T09:19:21.16Z	385ee52d-406e-4db0-932f-206594d6bea5	Exception on /api/view [GET]
Traceback (most recent call last):
  File "/var/task/flask/app.py", line 2447, in wsgi_app
    response = self.full_dispatch_request()
  File "/var/task/flask/app.py", line 1952, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "/var/task/flask/app.py", line 1821, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "/var/task/flask/_compat.py", line 39, in reraise
    raise value
  File "/var/task/flask/app.py", line 1950, in full_dispatch_request
    rv = self.dispatch_request()
  File "/var/task/flask/app.py", line 1936, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "./api/view.py", line 171, in catch_all
    item, is_now_playing = get_song_info(uid)
  File "./api/view.py", line 148, in get_song_info
    access_token = get_access_token(uid)
  File "./api/view.py", line 129, in get_access_token
    refresh_token = token_info["refresh_token"]
KeyError: 'refresh_token'

Spotify Ads

If you have a Spotify Ad, it shows don't an Image. I would suggest showing "Hearing Ads" If you want, I can code that and make a Pull Request for this

Spotiflyer not working

java.lang.Exception: Client request(https://aac.saavncdn.com/947/o0zfOqXYz4Ng2oM1BX9zCa6L1PjvOKOYvVhnoVg_320.mp4) invalid: 404 Not Found. Text: "BlobNotFoundThe specified blob does not exist.
RequestId:cf443573-e01e-0017-64cb-849477000000
Time:2023-05-12T12:14:03.8580093Z"
at com.shabinder.spotiflyer.service.ForegroundService$enqueueDownload$2.emit(ForegroundService.kt:6)
at com.shabinder.spotiflyer.service.ForegroundService$enqueueDownload$2.emit(ForegroundService.kt:1)
at com.shabinder.common.core_components.file_manager.FileManagerKt$downloadFile$4.invokeSuspend(FileManager.kt:54)
at com.shabinder.common.core_components.file_manager.FileManagerKt$downloadFile$4.invoke(Unknown Source:11)
at com.shabinder.common.core_components.file_manager.FileManagerKt$downloadFile$4.invoke(Unknown Source:6)
at kotlinx.coroutines.flow.FlowKt__ErrorsKt$catch$$inlined$unsafeFlow$1.collect(SafeCollector.common.kt:94)
at kotlinx.coroutines.flow.FlowKt__ErrorsKt$catch$$inlined$unsafeFlow$1$1.invokeSuspend(Unknown Source:12)
at h7.a.resumeWith(ContinuationImpl.kt:10)
at io.ktor.util.pipeline.SuspendFunctionGun.resumeRootWith(SuspendFunctionGun.kt:74)
at io.ktor.util.pipeline.SuspendFunctionGun.access$resumeRootWith(SuspendFunctionGun.kt:0)
at io.ktor.util.pipeline.SuspendFunctionGun$continuation$1.resumeWith(SuspendFunctionGun.kt:17)
at h7.a.resumeWith(ContinuationImpl.kt:33)
at io.ktor.util.pipeline.SuspendFunctionGun.resumeRootWith(SuspendFunctionGun.kt:74)
at io.ktor.util.pipeline.SuspendFunctionGun.access$resumeRootWith(SuspendFunctionGun.kt:0)
at io.ktor.util.pipeline.SuspendFunctionGun$continuation$1.resumeWith(SuspendFunctionGun.kt:17)
at h7.a.resumeWith(ContinuationImpl.kt:33)
at io.ktor.util.pipeline.SuspendFunctionGun.resumeRootWith(SuspendFunctionGun.kt:74)
at io.ktor.util.pipeline.SuspendFunctionGun.access$resumeRootWith(SuspendFunctionGun.kt:0)
at io.ktor.util.pipeline.SuspendFunctionGun$continuation$1.resumeWith(SuspendFunctionGun.kt:17)
at h7.a.resumeWith(ContinuationImpl.kt:33)
at io.ktor.util.pipeline.SuspendFunctionGun.resumeRootWith(SuspendFunctionGun.kt:55)
at io.ktor.util.pipeline.SuspendFunctionGun.loop(SuspendFunctionGun.kt:17)
at io.ktor.util.pipeline.SuspendFunctionGun.access$loop(SuspendFunctionGun.kt:0)
at io.ktor.util.pipeline.SuspendFunctionGun$continuation$1.resumeWith(SuspendFunctionGun.kt:24)
at h7.a.resumeWith(ContinuationImpl.kt:33)
at io.ktor.util.pipeline.SuspendFunctionGun.resumeRootWith(SuspendFunctionGun.kt:55)
at io.ktor.util.pipeline.SuspendFunctionGun.loop(SuspendFunctionGun.kt:17)
at io.ktor.util.pipeline.SuspendFunctionGun.access$loop(SuspendFunctionGun.kt:0)
at io.ktor.util.pipeline.SuspendFunctionGun$continuation$1.resumeWith(SuspendFunctionGun.kt:24)
at h7.a.resumeWith(ContinuationImpl.kt:33)
at kotlinx.coroutines.DispatchedTask.run(DispatchedTask.kt:100)
at kotlinx.coroutines.internal.LimitedDispatcher.run(LimitedDispatcher.kt:12)
at kotlinx.coroutines.scheduling.TaskImpl.run(Tasks.kt:2)
at kotlinx.coroutines.scheduling.CoroutineScheduler.runSafely(CoroutineScheduler.kt:0)
at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.executeTask(CoroutineScheduler.kt:14)
at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.runWorker(CoroutineScheduler.kt:28)
at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.run(CoroutineScheduler.kt:0)

Any way to make it function in html?

hi! im not super tech versed, but id like to add this to my website, but i cant get it to funciton without the markdown. is there any way to make it functional or is it not possible yet?

Add textbox to copy html version

Hey,

Additionally to the markdown, adding a textbox to copy an HTML centered version could be nice

<p align="center">
  <a href="https://spotify-github-profile.vercel.app/api/view?uid=11147618695&redirect=true">
    <img src="https://spotify-github-profile.vercel.app/api/view?uid=11147618695&cover_image=true&theme=default&bar_color=e3e3e3&bar_color_cover=true">
  </a>
</p>

Can you possibly add auto refresh? or auto update.

Hello basically as you know when the songs finish unless the page is refreshed the song doesn't update.

Can you add some sort of auto refresh on the element so it automatically updates on new song playing.

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.