rwieruch / favesound-redux

🎶 A SoundCloud Client in React + Redux running in production. Live Demo and Source Code to explore React + Redux as a beginner.

favesound-redux

The SoundCloud Client in React + Redux made with passion. Demo, Sibling Project: favesound-mobx

Get started on your own!

• Comprehensive Guide: The SoundCloud Client in React + Redux
• Boilerplate Project

Includes

• react v. 16
• react-router v. 4
• redux
• react-redux
• redux-thunk
• normalizr
• lodash-fp
• airbnb-extended eslint
• enzyme v. 3
• Soundcloud API.

Features

• login to SoundCloud
• show your personal stream
• show favorite tracks, followers and followings
• infinite scroll + paginated fetching
• follow people
• like tracks
• player play/stop/forward/backward track
• player with shuffle tracks, share link and volume
• player with duration bar for tracks and navigation
• playlist
• sort tracks by plays, likes, comments, reposts, downloads
• filter tracks by duration
• search tracks by name and artist

Run on your Machine

1. Clone Repository: git clone [email protected]:rwieruch/favesound-redux.git
2. npm install
3. npm start
4. visit http://localhost:8080/
5. npm test

Contribute

I am looking actively for contributors to make this project awesome!

I wouldn't want to extend the project with new routes like: that's my profile page and that's my favorite track page. Rather I see more value in improving the status quo of the app: Improving the player, the playlist or the interaction overall. I would love to see a GitHub issue to see where you want to work on. Moreover I will try to find the time to raise some more issues where people can contribute. At the end it is a perfect project to get started in open source!

Improve

Feedback is more than appreciated via GitHub or Twitter

favesound-redux's Issues

Add favicon

For a site named favesound I think a nice prominent favicon would be fitting :)

Add Refresh button

A refresh button that gets the newest tracks would be great, especially considering browser refresh results in sign-out (#82).

[Bug] Favorites long title being squeezed

Failed to play song

This happens when I try to play a song. I think this may be related to too many requests have been made under one client_id, should we use an alternative client_id?

Add a link from the site (favesound.de) to this GitHub repository (github.com/rwieruch/favesound-redux)

Would be great for people who want to know more, open issues, or even contribute :)

SyntaxError: Unexpected end of JSON input in home feed infinite scroll

I'm sometimes getting the following error while trying to invoke infinite scroll in my home feed:

Uncaught (in promise) SyntaxError: Unexpected end of JSON input
    at bundle.js:7
    at <anonymous>

[Improvements] Add tooltips for buttons in player

Some tooltips could be helpful for the user to know what each button is about. For example when user hover the mouse on the share button, we show a tooltip saying "Copy song url to clipboard".

Errors: npm run test

This will happen when I tried to run npm test, probably related to React versions.

Add tooltips to plays/favorites/reposts/comments/downloads icons

While I agree they are mostly self explanatory, I believe it would be better to add hover tooltips for usability purposes.

[Bug] When removing the last track in playlist, the next track returns undefined

This is caused by exceeding array boundary, I'll create a simple fix for it.

Bug: Volume Slider shows String

There is an UI glitch where the Volume Slider shows the value of the volume somewhere in between.

Upgrade to React 16

React 16 got released and there are practically no changes to the external API of React. Perhaps it would be an easy win to upgrade the project to React 16. Someone keen to do it?

[Refactor] Use callback refs instead of string refs

I think we should refactor string refs to callback refs since the former has some issues as per react documentation: https://facebook.github.io/react/docs/refs-and-the-dom.html

Refresh signs me out

If I hit the refresh button, or close and re-open the page, I get signed out.

I saw issue #44 which might be related, but if this was intentional I would humbly suggest you reconsider - practically all sites I can think of retain the OAuth cookie and keep you signed in as long as the token is valid...

[Bug] Errors when clicking on genre links

Screenshot:

This could be caused by waveform component.

[Bugs] Errors after clicking clear queue in playlist

Serve site in HTTPS

In the age of "HTTPS everywhere" it is highly recommended, especially considering OAuth tokens are involved.

There are two free options to achieve this:

1. Serve off CloudFlare and enable SSL (the "Flexible" options is zero-setup)
2. Let's Encrypt. I wrote a WebJob that does this automatically for Azure Web Apps: https://github.com/ohadschn/letsencrypt-webapp-renewer.

Feature Proposal: Automatically play next song in stream

Right now only the next song in a playlist will be played automatically, but stops after the playlist finishes. I propose the player should keep always play a continuous stream of music and automatically play the next song in the stream if the playlist finishes or if you didn't create a playlist.

Infinite scroll only works if there are enough results to fill the screen (and create a scrollbar)

Say I filter my feed by something (text or mix/track) and few (or no) results come up.

If there aren't enough results to fill the current screen and create a scrollbar, I can't invoke infinite scrolling to try and load more.

Perhaps a manual "load more" button would be the easiest way around this.

Need help: Error occurs when trying to run command npm start

Hi guys, I tried to run the app locally, after I clone the git repo, the 'npm install' worked just fine but when I ran 'npm start' I got the following output, I am using a Mac OS X with node version: 7.5.0 and npm 4.2.0. Not sure what is going on here.

webpack-dev-server --progress --colors --hot --config ./webpack.config.js
70% 1/1 build moduleshttp://localhost:8080/webpack-dev-server/
webpack result is served from /


content is served from ./dist
404s will fallback to /index.html
45% 13/22 build modules

> #
> # Fatal error in ../deps/v8/src/api.cc, line 1051
> # Check failed: !value_obj->IsJSReceiver() || value_obj->IsTemplateInfo().
> #

==== C stack trace ===============================

   0   node                                0x0000000100bce203 v8::base::debug::StackTrace::StackTrace() + 19
   1   node                                0x0000000100bcb389 V8_Fatal + 233
   2   node                                0x0000000100147afa v8::Template::Set(v8::Local<v8::Name>, v8::Local<v8::Data>, v8::PropertyAttribute) + 330
   3   binding.node                        0x0000000104f363f2 SassTypes::Boolean::get_constructor() + 352
   4   binding.node                        0x0000000104f3830b SassTypes::Factory::initExports(v8::Local<v8::Object>) + 407
   5   node                                0x00000001009cf21f node::DLOpen(v8::FunctionCallbackInfo<v8::Value> const&) + 854
   6   node                                0x000000010017c39a v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&)) + 378
   7   node                                0x00000001001e023c v8::internal::MaybeHandle<v8::internal::Object> v8::internal::(anonymous namespace)::HandleApiCallHelper<false>(v8::internal::Isolate*, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::FunctionTemplateInfo>, v8::internal::Handle<v8::internal::Object>, v8::internal::BuiltinArguments) + 924
   8   node                                0x00000001001df679 v8::internal::Builtin_Impl_HandleApiCall(v8::internal::BuiltinArguments, v8::internal::Isolate*) + 281
   9   ???                                 0x000008f8dcc063a7 0x0 + 9864948507559
Illegal instruction: 4

Search artist name too

Currently the search box only searches the mix's title, it would be nice if it searched the artist's name too.

Display and filter by tags

• Tags are useful when you have several genres in your feed and you want to know which track is which.
• Being able to filter by tags (preferably using a multi-select dropdown) would be even better!

Play count is broken

It shows as 0 for all tracks, including extremely popular ones:

Filter by downloadability

It would be very useful to be able to filter by tracks that can be downloaded. Personally I'm downloading mixes to listen in my car, so that's key information to have.

This site has this feature, so it should be possible: http://mixyard.com/

Expose the generic browse/KEYWORD functionality

I noticed that navigating to http://www.favesound.de/browse/FOO gives me tracks related to FOO (I'm guessing using FOO as a keyword with the SoundCloud search API).

This is super useful, so it's a shame to limit it to just the links at the top (Tech House, Minimal, Deep House... we aren't all German 😉).

It could be as simple as a button that pops up a search dialog and then navigates to browse/foo. Or even better, add a text box to the same row of current genre links where one could enter his own genre (ideally this would be responsive but seeing as the current design relies on a redirect, some OK button would be great too).

Open links in a new tab/window

It is a good practice for media sites to open links in a new tab/windows (using target=“_blank”, preferably with rel="noopener" for better security and performance) as to not interrupt currently playing audio/video.

This is especially important as long as navigating out of the page incurs sign-out (#82).

[Minor] Nesting anchor tag warning

1. When clicking play button, this warning pops up.

2. It sometimes appears in a weird position like the following:

3. As for now, we have to click the button again to make the tooltip to disappear, IMO, I think it should be automatically hidden after a certain amount of time.

I'll create a PR tonight to fix these.

Feature Proposal: Player with Duration Bar

At this time, once you want to listen to a track, you only get to see a backward, a play/pause and a forward button in the player.

But most of the audio player come with a progress bar and a current time to indicate the playback time duration.

It would be cool to have something like this for FaveSound as well! One could implement it in different ways. Either you use a stateful component within the player which keeps track of the duration time of the track or you save that state to the global redux state. I would recommend to do the former, otherwise you will end up with a lot recurring actions (like every 5 seconds?).

Errors: A bunch of errors caused by Waveform

This happened when I first loaded the app, I tried to remove the WaveformSc component from stream.js and the errors disappeared. I will look into this later today.

Feature Proposal: Mini Profile Popover

There is no extra page to see the whole profile of an user. In my opinion there shouldn't be one, because it would clutter more and more the app without having a real use case for it. I think FaveSound does quite well only with one visually minimal page where one can look up easily new tracks and play them.

But at the end it would be cool to have some mini profile popover with a bigger picture and some actions like "Follow" on it.

One could place it everywhere where user pictures are already used.

I guess the difficulty is to make a very good positioning in CSS which is doing well in all kinds of browsers.

Interactive track metadata (play, favorite, repost, comment, download, buy)

It would be great if the little buttons below each track were clickable, allowing us to:

• Play
• Like/Favorite
• Repost
• Comment
• Download
• Buy (in many cases this actually redirects to an external download page)

Enhancement: Upgrade React Router to its Latest Version

React Router has a lot of breaking changes when using the latest version. Maybe it would be a great PR to upgrade react-router (perhaps also react-redux-router or even get rid of it) to its latest version.

Menu List Item is not seen until you click favesound home buttom

Menu List of Genres are not seen when you first open the app. When you click favesound home, it's visible

[Bug] Player state inconsistent

When the user clicks "clear queue", the isPlaying in player state is still true.

Feature Proposal: Shuffle Playlist

There could be a button in the player which allows you to toggle the shuffle mode. You could easily save this in the global redux state. Once it is set to shuffled, you only need to make sure that the next played track is a random track from the playlist.

Player component src/components/Player where you would have to place the Shuffle Button. It has to fire a new action via src/actions/player to set the shuffleMode in the src/reducers/player

const initialState = {
  shuffleMode: false,
  activeTrackId: null,
  isPlaying: false,
  playlist: []
};

Once the mode is implemented, the second step would be to adapt the action which gets fired in

<ButtonInline onClick={() => onActivateIteratedTrack(activeTrackId, 1)}>
  <i className="fa fa-step-forward" />
</ButtonInline>

in src/components/player to respect the shuffleMode. Rather than playing the next track, it should play some random track from the playlist. The logic would get implemented in src/actions/player.

Feature Proposal: add time passed to nav

I propose we add a feature to indicate the time passed after a song begins. This would be located in the bottom nav, similar to how SoundCloud handles it:

[UI] Tooltips not having enough space to display on top

When the screen size is small, tooltips will not have enough space to be displayed on top of the button.

I tried to adjust the player left and right margin to 10%, it will have enough space to display. However, this will change how the player looks. Any suggestions on this?

have you thought about turning it into application desktop electron?

Bug: Volume Slider doesn't close

The Volume Slider that is attached to the Player in the bottom doesn't close when the Player closes. However, that should be the case. It should be the same as the Playlist that is attached to the Player which disappears when the Player disappears.

Improve authentication redirect logic

First off, the current logic is that if user access dashboard without authentication, it gives back a blank dashboard page, however, the dashboard should be a protected route that should only be shown when authenticated.

Second, when the authentication process failed for whatever reason or canceled by the user, it might be better to redirect to the home page instead of returning a blank dashboard page.

I have created a pull request for this #76.

New feature proposal: Repeat button on the navbar

I think it would be a nice addition to add a button on the nav to repeat the current song, similar to the SoundCloud nav:

After logging in it redirects to this page.

http://www.favesound.de/callback?code=4db5405237b0f7b315c61215d6490189&signed_up=1&state=SoundCloud_Dialog_223b9#access_token=1-231734-339559294-32509ffa28ba1&scope=non-expiring

Playlist icon does not display right in firefox

Firefox version: 51.0.1
In firebox:

It should be like:

Feature Proposal: Volume

It would be cool to adjust the volume from within the player! The volume from 0 to 100 could be saved in the global state. Moreover it could have a mute state when you click the button.

Player component src/components/Player where you would have to place the Volume interaction. It has to fire a new action via src/actions/player to set the volume from 0 to 100 in the src/reducers/player

const initialState = {
  volume: 70,
  activeTrackId: null,
  isPlaying: false,
  playlist: []
};

When you click the mute button, it should set the volume to 0. Once this is implemented, one would take the new volume property in the player component for the <audio ... /> element to adjust the volume.

Improvements: Automatically login if we have a valid oauth_token in cookie.

After we successfully login and then close the app without logging out, the oauth_token would still be in the cookie, next time when we visit out app all requests will be made with oauth_token but our app would be in logged out state.
So should we check if oauth_token is there, if it is, we perform a login and fetch everything related to this user?
Or should we log the user out when we close the app to keep the oauth_token in cookie and our auth state in sync?

Feature Proposal: Play next Track once the current Track finished

Although FaveSound comes with a Playlist, it doesn't automatically play the track in queue after the previous track finished. That's because nobody keeps track of the duration of a playing track. It would be cool to have the next track automatically playing after the current track ends. Before it would be helpful to implement #3.

I can't run it on local

I've got my client id and edit authentification.js file
npm start tells me can't get /

Add date filtering to browse/KEYWORD view

SoundCloud's default sorting algorithm, as well as sorting by plays/likes/reposts heavily favor old tracks (since they had a lot of time to gain popularity). For example, the first track on the main favesound page is four years old!

It would be great to have the option to filter by date, like SoundCloud allows ("past year", "past month" and so forth).

This isn't an issue when logging in, because the home feed is sorted by date by default.

Implement a 'share' song feature

At the bottom left of the playing track there should be a button or link that when clicked, copies the link of the soundcloud track currently being played. This allows users to easily paste and share the link with friends.

Minor: Playlist UI issue

When the user add more music into the playlist, the last one would not be fully displayed like this:

After: