Don't break when moving outside of playlist bounds with next / previous buttons

app/reducers/webplayer.js

@@ -124,20 +124,25 @@ export default createReducer(initialState, {
     [PLAY_PREVIOUS_SONG]: (state) => {
         const newIndex = state.get("currentIndex") - 1;
         if (newIndex < 0) {
-            // If there is an overlow on the left of the playlist, just stop
-            // playback
-            // TODO: Behavior is not correct
-            return stopPlayback(state);
+            // If there is an overlow on the left of the playlist, just play
+            // first music again
+            // TODO: Should seek to beginning of music
+            return state;
         } else {
             return state.set("currentIndex", newIndex);
         }
     },
     [PLAY_NEXT_SONG]: (state) => {
         const newIndex = state.get("currentIndex") + 1;
-        if (newIndex > state.get("playlist").size) {
-            // If there is an overflow, just stop playback
-            // TODO: Behavior is not correct
-            return stopPlayback(state);
+        if (newIndex >= state.get("playlist").size) {
+            // If there is an overflow
+            if (state.get("isRepeat")) {
+                // TODO: Handle repeat
+                return state;
+            } else {
+                // Just stop playback
+                return state.set("isPlaying", false);
+            }
         } else {
             // Else, play next item
             return state.set("currentIndex", newIndex);

app/views/WebPlayer.jsx

@@ -75,21 +75,16 @@ class WebPlayer extends Component {
     startPlaying(props) {
         if (props.isPlaying && props.currentSong) {
             // If it should be playing any song
-            if (!this.howl) {
-                // Build a new Howler object with current song to play
-                const url = props.currentSong.get("url");
-                this.howl = new Howl({
-                    src: [url],
-                    html5: true,  // Use HTML5 by default to allow streaming
-                    mute: props.isMute,
-                    volume: props.volume / 100,  // Set current volume
-                    autoplay: false,  // No autoplay, we handle it manually
-                    onend: () => props.actions.playNextSong(),  // Play next song at the end
-                });
-            } else {
-                // Else, something is playing
-                // TODO If it is not the expected song, change it
-            }
+            // Build a new Howler object with current song to play
+            const url = props.currentSong.get("url");
+            this.howl = new Howl({
+                src: [url],
+                html5: true,  // Use HTML5 by default to allow streaming
+                mute: props.isMute,
+                volume: props.volume / 100,  // Set current volume
+                autoplay: false,  // No autoplay, we handle it manually
+                onend: () => props.actions.playNextSong(),  // Play next song at the end
+            });
             // Start playing
             this.howl.play();
         }