pau1fitz/react-spotify

Spotify React / Redux 🎤🎺🎸🎷

React-Spotify 🎺🎸🎻🎤

This is React-Spotify - a React front end client that communicates with the Spotify API.

See it in action here

If you wish to run the code locally run the following.

npm
npm start
visit http://localhost:3000

You can also run as an electron app by running npm run electron-start.

Please note that the Spotify API only provides 30 second audio snippets. It may be possible to get the full track by using the Web Playback SDK.

License

Released under the MIT License.

Check LICENSE.md for more info.

react-spotify's Issues

Remove album <Image>

If no album is selected it is still showing empty image.

Can't login

I don't have a Spotify account and the credentials in readme do not work.

Error: "Incorrect username or password."

Make it an Application for All Users

Hey @Pau1fitz ... i want to make an executable app for react-spotify that can run in all os maybe
Do You Agree ?

Hi Paul. react-spotify questions. Many thanks in advance

I am writing my own Spotify player app and have seen quite a few online and am interested how are you getting access to peoples data yet I haven't granted your application access to my data following the link:- http://pau1fitz.github.io/react-spotify. It just asks me to sign into Spotify but I do not get the popup to grant you access that I see in other examples.

Also another question is are you using expressJS to get the bearer token I can only see the react front-end?

I cant seem to run the project locally but thats not a problem just trying to make sure I am going down the right path.

moment

Callback

I got it working with docker on a synology. The issue I know got is the callback when reauthorization begins.
I get redirected to http://localhost:3000
In the spotify dev section i set the callback to http://localhost:3000/callback/
Also tried http://{mylocalip}:{port}/callback/ both in spotify and in stat.js
The thing is I'm at http://{mylocalip}:{port} not localhost://3000 and it returns invalid redirect URI

Invalid element type

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of MainView.

./src/index.js
src/index.js:16
13 | applyMiddleware(thunk)
14 | );
15 |

16 | ReactDOM.render(
17 |
18 |
19 | ,

× Element type is invalid error when loading the MainView

×
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MainView`.

Is there a import or export default problem somewhere around the SongList component?

How audio playback works and some limitations

First let me thank you for the project. Having fun reading the excellent code.

Took me a while do understand how Spotify playback was made possible:

this.audio = new Audio(song.track.preview_url);

A new Audio instance (Web Audio API) receives a preview_url (which only has 30s of the song):

The app does not use the new Web Playback SDK which would enable a full playback experience.

I also couldn't find a refresh_token workflow in the code. Without background refreshing of the token the page would have to be reloaded from time to time (interrupting the experience).

If a developer is considering using this project to start another (like I am) I believe more details on the README.md would facilitate a more informed decision.

I'm I understanding correctly how the audio playback works?

Thanks!

CSS alignment with playlists with only a few songs

Hi! I was tinkering around your app when I noticed that short playlists (I think smaller than 3/4 songs) have an overlapping CSS problem. I suspect this is because if the playlist is too short, Spotify doesn't put any pictures. I think maybe a ternary operator of some sort would be able to fix the problem! Awesome project by the way. :)

Songs last 30 seconds

Hi!

Congrats for your project, I just found it and it is really cool :)

I have found weird that I can only listen 30s of the songs in my playlists. Since I have not seen any comment on this in the README file, I wonder - is it a Spotify limitation for third-party apps or is it a limitation in the react-spotify project?

Starting the server

I recieve this error:

node scripts/start.js

/volume2/web/react-spotify/scripts/start.js:23
const {
^

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:140:18)
at node.js:1043:3

npm ERR! Linux 3.10.102
npm ERR! argv "/volume2/@appstore/Node.js_v4/usr/local/bin/node" "/usr/local/bi
npm ERR! node v4.8.4
npm ERR! npm v2.15.11
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: node scripts/start.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node scripts/start.js'.
npm ERR! This is most likely a problem with the spotify package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node scripts/start.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs spotify
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls spotify
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /volume2/web/react-spotify/npm-debug.log