jonashcroft / nowify

A Spotify 'Now Playing' screen designed for Raspberry Pi

Nowify

A simple app to display your currently playing Spotify track on a Raspberry Pi, made with Vue.

Nowify will:

• ✅ - Use Spotify Web API to get your current track
• ✅ - Only access that and no other data
• ✅ - Use Access and Refresh Tokens to ensure that you're kept logged in between sessions
• ✅ - Display the current track artist, cover, and a matching vibrant background colour

Preview:

Nowify needs a webserver to run. The quickest way to get up and running is to use a Jamstack platform like Netlify or GitHub Pages.

• Fork this repository
• Connect your repo to your Jamstack platform
• Add your Spotify Client ID and Client Secret to the platforms environment variables
• Deploy!

---

How to use

Prerequisites: You will need:

• A GitHub account
• A Netlify account
• Spotify Client Keys
• A device to display Nowify

1. Fork this repository

On this page, click on the 'Fork' button in the top-right to create a copy of the repo as-is on your account. Alternatively, you can clone the repo and push to GitHub.

2. Create a new project on Netlify

Log in to Netlify and click 'New site from Git'.

If you're doing this for the first time, you will need to authorise your GitHub account with Netlify by following the instructions.

Once authorised, follow the on-screen instructions to connect your repository. You should be fine to leave the default settings here as-is.

Click on 'Deploy site'.

Note: Nowify should use Node 14. This has been set in the project environment. I've only ever attempted this Netlify, so cannot help you if you use another platform.

3. Create Spotify Client keys.

To allow authorisation to your track data, you'll need to generate Spotify API keys. You can do this by logging in to the Spotify Dashboard creating an app.

Call the application 'Nowify'.

Set the Redirect URI as the URL of your project in Netlify. This must be set else Spotify won't authorise Nowify.

Important: The Redirect URI entered in this field must match the URL of your Netlify site exactly, or you'll receive authorisation errors. A common issue is that Spotify will automatically add a trailing slash to the URL upon saving. For example: https://example.netlify.com vs https://example.netlify.com/.

You can leave the other settings (Callback URL, Bundle IDs etc) blank.

Copy down the Client Secret and Client ID and save your app in the Spotify Dashboard.

4. Add the Client ID and Client Secret to Netlify

Now that we have our Spotify API keys, we must let Nowify know that they exist.

To do this, navigate to Netlify > Site Settings > Build & Deploy > Environment

Under Environment variables, add two fields. The Keys can be found in the env.sample file and the values will be the Client ID and Client Secret, respectively.

Hit save.

5. View Nowify

Once the environment variables are in, you will have to navigate to your Netlify site overview > Deploys > Trigger Deploy drop-down > click 'Clear cache and deploy site' and wait for deployment to complete. You can now navigate to your Netlify site. You'll be prompted with a Spotify login button. Do that, and you're good to go!

---

Alternatively, you can clone the repo, compile the code offline, and upload to your own webserver (more advanced users only). If you're considering doing this, I'll assume that you somewhat know you're way around build tools.

---

Original Write up:

https://ashcroft.dev/blog/now-playing-screen-spotify-raspberry-pi-es6/

Brief About:

Nowify was a project that I originally made in 2017 when I wanted to learn more modern Javascript. Over the years, I've learned a lot more and had people contact me about Nowify, so I wanted to build a more modern version of it using modern tools. This is still a learning exercise, but hopefully one that's more usable. If you'd like to view the old repository, that can be found on the old branch.

nowify's Issues

INVALID_CLIENT: Invalid redirect URI

Really nice looking piece of work Jonashcroft!

Can't seem to get this to work:

I've updated my client ID and Secret as well as whitelisted my URL and repeatedly get the same error:

"INVALID_CLIENT: Invalid redirect URI"

Any assistance would be much appreciated.

Another invalid client issue

Hi. Fantastic app and hoping to resolve my INVALID_CLIENT issue. Have been trying to resolve using All the tips others have tried. I’m having exactly same issue as #28 (comment)
Was having. As he/she never replied beyond intial query I’m wondering if the issue for them was resolved or not? Any clues? ….as with their url client Id returned seems to be missing. Thanks for whatever comes my way.

In Spotify dashboard have used as redirect uri:
http://localhost:8888/callback/

And returned address at log in attempt:
https://accounts.spotify.com/authorize?client_id=undefined&response_type=code&redirect_uri=https%3A%2F%2F63b8444b0ed8000d52b4eae8--cozy-semifreddo-5e8689.netlify.app&state=5go6kn6sj5-7m3sl68793-696y244ik-ticv01lk&scope=user-read-currently-playing

Raspberry Pi Usage

I don't fully understand how to install gulp and this library onto my pi. Could you help?

[Feature Request] Add "Prev" "Play/pause" "Next" buttons

[deleted]

Can you help

Hey im trying to get this downloaded to my pi but i dont get it can you help maybe?

Node/Node Sass Out of Date

Project cannot compile on latest version of Node and Node-Sass. It seems in order to build the project, an older version of Node Sass has to be used, there is a conflict in src/styles/global/reset.scss that requires Node-Sass version 4, but that means Node also has to be downgraded.

This is not in the docs anywhere, is there a specific version of Node and Node-Sass that has to be used
?

[Request] Add Licensing Documentation

Is it possible to add a licensing file to this project or get some clarity as to what the appropriate licensing is? My intended use case is to create a non-commercial derivative work for personal use but the added clarity to this sure would help!

[Feature Request] Date/Time when no song playing

Hi!

This is a wonderful project, thanks for your work!
I'm not a champ with js and css, so I try to ask here if someone can help me to understand if there's a way too display the time+weekly day (like Google Nest Hub or Amazon Echo Show) when there's no song playing.

Thank you in advance!

cannot get it to compile (gulp)

because i was getting the invalid URI error (after getting a successful compile), I went back to the beginning, deleted/recreated. But now I'm struggling to get the /dist to auto-create when running gulp.

yes, i created a new js and scss file, no change.
i also did a non-destructive edit to existing js and scss files to force a save, but it just seems to be stuck and wont compile the /dist anymore.

this app has so much promise. I just can't get it to work! arrrgh. I've got a lot of learning to do i guess.

[Feature Request] Please Add Playback Progress Bar

Hey, first of all, thanks for this truly amazing app, I'm using it for live streaming, fetching now playing metadata from my site into OBS and adding CSS in OBS to only get the album art and song title and position/resize them however I want. I wonder if you'd be able to add a progress bar to the app, something like this:

I found that with this player endpoint you can get response progress_ms so I think it's possible? Idk I just do UI design and styling, first time using a Vue app, so please consider adding this if possible, Thanks.

API keys in `_config.js`

These aren't your actual API keys in the repo right?

INVALID_CLIENT: Invalid redirect URI

Hi,

Unfortunately I seem to be getting the INVALID_CLIENT: Invalid redirect URI error when clicking the Login with Spotify button.

I've had a look at a couple of other issues filed here, double checked what I have configured but I'm still getting this error so I'm hoping you might be able to spot something that I'm just not seeing! :)

Spotify Keys:

Spotify Redirect URI:

Netlify Environment Variables:

Netlify Site URL:

Regarding the Redirect URI, I've tried it with and without the /callout/ on the end and with/without a trailing /

If anyone is able to let me know if there's anything obvious I'm doing wrong or has any suggestions, that'd be awesome 🙇

"Task function must be specified" error on build (gulp)

Whenever I try to build this project by running 'gulp' , I always get this error:

[17:29:44] Requiring external module babel-register
assert.js:350
throw err;
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/Users/sethu/Downloads/Nowify-master/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/Users/sethu/Downloads/Nowify-master/node_modules/undertaker/lib/task.js:13:8)
at Object. (/Users/sethu/Downloads/Nowify-master/gulpfile.babel.js:49:6)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at loader (/Users/sethu/Downloads/Nowify-master/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/sethu/Downloads/Nowify-master/node_modules/babel-register/lib/node.js:154:7)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)

User authentication and permissions

Hi, there.
I was wondering how the user authentication will work on this.
If I were to give this to my mom, would she still need to login and approve app permissions on the Pi?

Another case of 'INVALID_CLIENT: Invalid client'

Hi,

I'm kind of new to some of this, so I may have made a dumb error.

I forked Nowify, deployed into Netlify, set up the spotify developer app, copied the client id and secret environment variables into Netlify environment settings. Also copied the URL of my app in Netlify into the redirect URI in the Spotify app. When I go to the Netlify URL I see the correct page

But every time I get this error after clicking login :-

It looks like I log in, authenticate and then fail.

The URL returned from Spotify is "https://accounts.spotify.com/authorize?client_id=undefined&response_type=code&redirect_uri=https%3A%2F%2F.netlify.app&state=uecd1nl93p6-o8fv91wagf-q3nxdwgkp-fsqelse9&scope=user-read-currently-playing

I looked at the other two issues where Invalid Client was mentioned and neither seemed to give a clue. Any ideas what I missed? I see that Client_Id is blank in the URL above.

All help always gratefully received!

Player returns 'Nothing playing' when there is

Issue

• Scenario is that music is playing on Spotify
• Nowify is authorised, connected, but returning a 'Nothing is playing'
• Network requests show that a 204 is being returned
• Investigation shows that a '204 No Content' is returned
• The app sees a successful response but doesn't notify you of 'No content'

Solution

• Seems like can happen when the actual Spotify Player version is out-of-date
• Consider adding a solution to display a message when 'No content' is returned.

INVALID_CLIENT: Invalid client

INVALID_CLIENT: Invalid clientt
If you click on Login with Spotify　you will see this.

What are Redirect URIs?

Background white on samsung tv

The background of the site is white on the authorisation and viewing page

Authenticated, redirected back but nothing happens.

I have deployed to netlify using the readme guide. I have added the keys, and redeployed with clearing the cache. I can login to spotify, authenticate the app and be redirected back . But I still see the same login page. In my authenticated spotify apps I can see Nowify. But on the user management page of the Nowify spotify app I don't see my login. So, something must be wrong with the authentication but what? Can you suspect anything?