andrewngu / sound-redux

A Soundcloud client built with React / Redux

SoundRedux

NOTE It seems that SoundCloud has revoked my api client keys without any explanation or warning. Running the app locally no longer works unless you have a working SoundCloud API client id (SoundCloud has disabled registration of new apps for quite some time now). The live demo is also not working at the moment.

In an effort to learn es6 and redux, this is SoundRedux, a simple Soundcloud client

See it in action at https://soundredux.io

Uses normalizr

1. npm install
2. npm run start
3. visit http://localhost:8080

Feedback, issues, etc. are more than welcome!

sound-redux's Issues

[Mobile Feat] Authentication?

Heyo. I think it's awesome that this webapp is complete enough that I can start a song on mobile, continue working, and forget that I'm not even using the native app. Great work!

I don't see a way to log in from mobile. Can you confirm this?
If so, I'm also learning React/Redux, and interested in implementing.

Starting Go server

@gusaiani Creating a new issue here so we can avoid spamming a few people. To answer your question about auth, it's actually being handled using a go server (which is in the same repo in the server folder). To get auth running locally you need to compile the go app and run it.

If the sound-redux folder is in your $GOPATH you can just do this
$ cd server
$ go get .
$ go install .
$ server

Mistake in styles/custom/components/comments.scss

.comments-body is no-used, which should be deleted.

Not an issue, but...

Just wanted to say, beautiful app man. Really nicely done.

And you're just learning this? That's incredible. Very humbling to me.

Better way to show currently playing song

While the current UI is very nice I find it has 1 drawback: being able to quickly identify which track is currently playing...

Can you find which track is currently playing in less than 5 seconds?

Maybe changing the background of the track to a green-ish color might help?

normalizr question

How did your reducer became looks like that?

const initialState = {
    playlists: {},
    songs: {},
    users: {}
};

export default function entities(state = initialState, action) {
    if (action.entities) {
        return merge({}, state, action.entities);
    }

    return state;
}

Can you explain it with some examples, because i don't understand it 😞

Query on reducer/store structure

How do you decide whether or not to nest data in your store. For example you have a player that stores information like the song that's currently playing, current time, selected playlist.

This makes sense, but from pretty much everything I have read and listened to, you should keep your data as flat as possible. You could have rather had currentSongIndex at the top level instead of nested within player.

Note I am not saying you are wrong, quite the opposite :), just trying to understand your thought process for stopping yourself from nesting stuff any further.

Would it be fair to say that you store any data from the server in entities (domain data) and any other data related to app state or ui state grouped at the root level?

Thanks!

Fade in/out when changing songs

Hey dude, great work there! Is it on the stack to do a fade in/out feature for changing songs?
if not i would be happy to maybe try contribute this kind of functionality :)

Add queueing functionality

It'd be nice if there was a '+' button which would add the song to a queue.

Plans for GraphQL?

Awesome sample project. Would be really nice to see GraphQL playing around with cool kids React and Redux. Any plans?

hot-loader

When "Load new songs" is clicked, starts playing song in current position

1. Start playing any song in your Stream - take note of its position ("playing-position")
2. Wait for "Load new songs" to come up - click it
3. The new song will be added to the feed, and now the song in playing-position is played - not the "current" song

I'd have a look at this but too busy ATM!

Unexpected Token Import for ES6 modules

Firstly, I installed: yarn install.

When I ran yarn test I get this error in terminal:

SyntaxError: Unexpected token import

I saw that you doesn't have configured preset in a file like .babelrc or package.json.

I'm making a pull request to fix this.

Suggestion: save volume value to localStorage

Right now volume retains its value to 100% after page refresh. Would be nice to remember the previous volume level. If it is okay I may take this issue

Use mapDispatchToProps in react-redux#connect

Instead of relying on the implicit dispatch prop being passed from a container to a component, utilize mapDispatchToProps to automatically bind actions to dispatch. For example, in PlayerContainer:

function mapStateToProps(state) {
  ...
  return {...};
}

export default connect(mapStateToProps)(PlayerContainer);

becomes

...
import { changeCurrentTime, changeSong, toggleIsPlaying } from '../actions/PlayerActions';
...

function mapStateToProps(state) {
  ...
  return {...};
}

const mapDispatchToProps = {
  changeSong,
  changeCurrentTime,
  toggleIsPlaying,
};

export default connect(mapStateToProps, mapDispatchToProps)(PlayerContainer);

And then inside Player:

  changeSong(changeType) {
    const { dispatch } = this.props;
    dispatch(changeSong(changeType));
  }

becomes

  changeSong(changeType) {
    this.props.changeSong(changeType);
  }

With redux-sound being my goto repo for inspiration when starting new react-redux projects, and very much being started as a learning project, I think it would be beneficial for there to be some examples like this within the code.

add arrow keys for next and previous track

I feel that it is more intuitive to use the right and left arrows to change the music, are mostly used in the majority of players.

I was watching that using keypress and therefore cannot capture the arrows key events. I see that you use keypress instead of keydown therefore can not capture the events of the arrows.

Another solution would be to use mousetrap for keyboard events, being a way to capture more easy to maintain in the development, just add 2kbs to the project

[Improvements] Fadein images

I think it could be a great improvement to make the image to fade in after they are loaded. Here is a demo: https://sound-redux-fadein-image-demo.herokuapp.com/

I'll create a pull request if you guys like it.

best redux example ever

hey, @andrewngu, I really like work you've done with soundredux. it looks amazing!
do you have a plans to add some authentication and error handling to your app?
be cause if you'll add it, this is will be the best redux example ever!

Add License

Awesome project. Add the license of you project please, with the license the user know the limit usage of the repo, etc 💯

Scrollable likes

The stream is scrollable and musics load in when the bottom of the page is reached. Could this behaviour be added to likes?

I have more than 750 likes and when I go back in my like history, the official client lags. SoundRedux is a lot more efficient as it doesn't load a player for each track, I have noted this with the stream tab.

I have looked a bit at the code but I can't seem to orient myself in redux code.

Great app BTW!

Start script fails

Output:

/Users/cyril/sound-redux (master) $ npm run start

> [email protected] start /Users/cyril/sound-redux
> webpack-dev-server --progress --colors --hot --content-base ./server/public --config ./webpack.config.js

 70% 1/1 build modules[HPM] Proxy created: /api  ->  http://localhost:8081
events.js:154
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 0.0.0.0:8080
    at Object.exports._errnoException (util.js:856:11)
    at exports._exceptionWithHostPort (util.js:879:20)
    at Server._listen2 (net.js:1227:14)
    at listen (net.js:1263:10)
    at net.js:1372:9
    at nextTickCallbackWith3Args (node.js:486:9)
    at process._tickCallback (node.js:392:17)
    at Function.Module.runMain (module.js:449:11)
    at startup (node.js:140:18)
    at node.js:1001:3

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/Cellar/node/5.6.0/bin/node" "/usr/local/bin/npm" "run" "start"
npm ERR! node v5.6.0
npm ERR! npm  v3.6.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `webpack-dev-server --progress --colors --hot --content-base ./server/public --config ./webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --progress --colors --hot --content-base ./server/public --config ./webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the sound-redux package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --progress --colors --hot --content-base ./server/public --config ./webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs sound-redux
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls sound-redux
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/cyril/sound-redux/npm-debug.log

Any ideas?

Mistake in line 6 of script/component/Followings.js

Line 6 should be replaced with dispatch: PropTypes.func.isRequired,

Automatically load next tracks

It would be awesome for the player to automatically load the next page of tracks when it's playing one of the latest currently loaded tracks. Currently, it either stops, or loops back to the first loaded track.

Note: this doesn't (and shouldn't) have to work in random mode.

Last.fm login + scrobbling

Hi @andrewngu! Would you be interested in including Last.fm into your application?

I had a similar (but barely coded) idea to sound-redux but the intention with mine was to be able to scrobble from likes or playlists to Last.fm since the Scroblr browser extension is always broken. It makes more sense, now that I found this project, to contribute to what seems to be a great application already and not start from scratch!

Play/Pause song by clicking in the logo

Hi!,

Really cool app, been using it for a couple of days while working :-).
It would be nice to be able to play/pause a use by clicking in it's logo. Currently you can play it, but to pause you have to go to the player, I can submit a PR if I have some time later in the week if you find this appropriate.

Desktop App (Electron)

I am personally interested in having a desktop version of this app.
You get some nice things like media button support (play, forward, backward).

Anyone interested? I can probably devote a bit of time adding in support.

API key exposed, reverse proxy needed?

Are you planning on adding a reverse proxy of some sort to forward your soundcloud api requests to?

Or is it a non-issue since this project was meant to be a non-trivial educational project at learning react/redux?

I'm asking since i'm trying to do a similar project but I'm getting caught up on trying to not expose the api key myself.

Error on npm install command

Hi guys!

congrats, nice job with this repository!
I'm studying Redux/React and i'm trying to install your project locally, but i get an error on
npm install command.

It seems is fault of eslint version. Can you help me?

Thanks to all,
Dan

Ability to like tracks

I listen to music all day and I always need new music. I discovered this project a week ago and I ❤️ so much! Thanks a lot for it 👍

Currently, the only feature I'm missing is the ability to like a track so that I can create a playlist of tracks I enjoy.

Refactor: remove cookies and replace for localStorage

use modal

not issue but i have a questions. how am gonna use modal? for example i want to change sign-in button and open modal when it's clicked.
i don't need to import modal component because it's already imported right?
should i pass to redux or ?

thanks in advance.

Always show a vertical scrollbar

The app jumps to the side when the data is loaded and the scrollbar is shown. It can be resolved by always showing the vertical scrollbar. Just add overflow-y: scroll; to the body or something similar.

Query regarding syntax for creating store using redux-thunk

I was trying to understand the code of sound-redux app. First of all I must amazing work and very clean code.

I was able to get most of the code but I had a doubt regarding the way the store was created.

From the code I can see the following:-

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/index';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);  

export default function configureStore(initialState) {
  const store = createStore(rootReducer, applyMiddleware(thunk));
  return store;
}

But after going through redux-thunk documentation I tried implementing it as mentioned in the way it was in the documentation. So I tried following code which seems to work fine. So I was trying to understand what was the logic behind writing the code as above. Can you please help me?

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/index';

export default function configureStore(initialState) {
  const store=createStore(rootReducer,applyMiddleware(thunk))
  return store
}

Mistake in line 21 of scripts/components/NavSearch.js

Line 21 should be replaced with document.removeEventListener('keypress', this.handleSlashPress, false);

Interface concept

Hey ! Was really enjoying your project and I was asking myself how cool it would be to custom the interface based on the song picture (Pretty much like iMusic). So I imported the lib "Vibrant.js" and created a fully customed player based on the song picture. Would you be interested if I was keeping updated your interface or should I just stay on my forked branch ?

Example :

---

Much respects,

Renaud

CHANGE_TYPES.PREV is not defined?

file: scripts/constants/SongConstants.js

Add text description to repeat and shuffle button

User may not know what that button do, adding a hover description would help.

add routing

add some simple routing, i'm thinking something like genre/songId

if you think react router is too heavy, you could use something light like page.js or even just regex on window.location.pathname

Styling issue - text out of its container

it should be simple to fix it, I could help out when I have the time.

[Bug] Not being able to fetch more songs

Not being able to scroll to fetch more songs when the height of the content is too short. My solution is to extend the min-height of the content to make sure there is always some space to scroll.

Error: Cannot resolve module 'react/lib/ReactMount'

Such a nice open source project.
I just cloned the repo. Did an npm install , then npm start.
When I go to http://localhost:8080 , I get this error in browser console

Uncaught Error: Cannot find module "react/lib/ReactMount"

and this error in the command line console for all the js files:

Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in

I tried looking over stackoverflow and google, people have suggested changing the version of react dependencies. But it didn't help. Is there any other solution/workaround to this?

Adding more genres

What about adding more genres? It could be like first i choose something like rock, metal, trance etc, and then indie-rock, alternative, pop-rock etc.

[GO SERVER]

OS: Windows 7

After running server I get [error] open html/callback.html: The system cannot find the path specified. when trying to auth on the client.

[Mobile Feat] Back/Forward Notifications

Same idea as #47.

Web-mobile app currently has a play/pause button in the notification. Would a play/back button, like on the native app, be useful? If so, I am interested in implementing.

Thanks!

NavSearch

when you input some text ,it can run well .but ,when you clear the text ,it can reset search result.

Sharing songs

Since I have been using your app I thought I would request an enhancement. There doesn't seem to be a way to share songs you are currently listening to. Would be awesome to have a quick copy to clipboard link so I can drop it on my slack channels :)

I could be missing this somewhere!

Thanks.

[Bug] TypeError onload

http://puu.sh/mtWvE/bef03bb6b7.png
Seen on both desktop and mobile, while authenticated.
Does not occur when un-authenticated.

Haven't had a chance to look at the code, but should be minor. Useful fix?

Please upload the module "../components/SongCards".

I am a fresher to redux, and I see this example in github, but when try to run my browser says 'Uncaught Error: Cannot find module "../components/SongCards"', I also can`t find SongCards component in master branch.

Vendor prefixes

Sweet project you have here. I really like the UI.

I noticed your layout is broken in Safari.
You can get a nice bump in browser support by including autoprefixer in your CSS output. It does all the work for you. 😀

Here's a link to autoprefixer for webpack:
https://github.com/passy/autoprefixer-loader

Search For User

I know you can search for song, but is there a way to search for a user? I think this is equivalent to querying for people on soundcloud.com

ex:
https://soundcloud.com/search/people?q=TeamVisionary