fixed

src/App.scss

@@ -286,8 +286,7 @@ right: 0px;
   counter-set: none;
 }
 .list1a-li {
-  border: 2px solid rgba(78, 232, 14, 0.47);
-  background: none;
+  background: rgba(139, 0, 0, 0.47);
   position: relative;
   margin: 2px;
   padding: 4px;
@@ -305,13 +304,13 @@ right: 0px;
   font-size: 11px;
   font-weight: bold;
   color: #337AB7;
-  background: #F7FAFD;
+  background: rgba(247, 250, 253, 0.44);
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
 }
 .list1a-li:hover:before {
   background: #337AB7;
-  color: #FFF;
+  color: #ffffff;
   -webkit-transform: translate(-12px, 0);
   -ms-transform: translate(-12px, 0);
   -o-transform: translate(-12px, 0);

src/pages/player.js

@@ -6,10 +6,13 @@ import {connect} from "react-redux";
 import {actionTrackPlay, actionTrackStop,actionTrackVolume,actionTrackCurrentTime,actionNextTrack,actionPreviousTrack} from "../reducers";
 
 
-export const Player = ({player:{volume,duration=0,currentTime=0,isPlaying,track={}},
+export const Player = ({player:{volume,duration=0,currentTime=0,isPlaying,playlist={},playlistIndex=0},
                                 trackPlay, trackStop,trackVolume,trackCurrentTime,trackNext,trackPrevious}) => {
 
-    let {originalFileName} = track
+
+    let name = playlist[playlistIndex].originalFileName
+    console.log(playlist,playlistIndex,name)
+
     let minutes = Math.floor(duration / 60);
     let seconds = Math.floor(parseInt((duration % 60) * 100) / 100);
 
@@ -47,7 +50,7 @@ export const Player = ({player:{volume,duration=0,currentTime=0,isPlaying,track=
                 max={1}
                 onChange={(e) => trackVolume(e.target.value)}
                 value={volume}/>
-                <h3>{originalFileName}</h3>
+                <h3>{name}</h3>
         </div>
     )
 }

src/reducers/playerReducer.js

@@ -87,22 +87,24 @@ audio.onended = () => store.dispatch (actionNextTrack())
 
 
 
+
+const trackActions = (urlVar) => {
+    audio.src = backURL + '/'+ urlVar.url
+    audio.load()
+    audio.ondurationchange = function(){actionSetDuration()}
+    audio.ontimeupdate = function(){actionTrackCurrentTime()}
+}
+
+
 export const actionTrackLoad = (trackIndex) =>
     ({type:'ACTION_TRACK_LOAD', trackIndex})
 
 export function* trackLoadWorker (action) {
     let {trackIndex} = action
     let {player:{playlist}} = yield select ()
-    //  if (playlistIndex !== trackIndex) {
-    audio.src = backURL + '/'+ playlist[trackIndex].url
-    audio.load()
-    console.log(trackIndex)
-    audio.ondurationchange = function(){actionSetDuration()}
-    audio.ontimeupdate = function(){actionTrackCurrentTime()}
-
+    trackActions(playlist[trackIndex])
     yield put({type:"TRACK_LOAD",playlistIndex:trackIndex})
     yield put (actionTrackPlay())
-
 }
 export function* trackLoadWatcher() {
     yield takeEvery ('ACTION_TRACK_LOAD',trackLoadWorker)
@@ -118,7 +120,6 @@ export const actionTrackPlay = () =>
 export function* trackPlayWorker () {
     yield audio.play()
     yield put({type:"TRACK_PLAY",isPlaying:true,isPaused:false})
-    console.log('play')
 }
 export function* trackPlayWatcher() {
     yield takeEvery ('ACTION_TRACK_PLAY',trackPlayWorker)
@@ -135,18 +136,12 @@ export function* nextTrackWorker () {
     let playlist = player.playlist
        if (playlist.length === playlistIndex + 1) {
            yield put({type:"NEXT_TRACK",playlistIndex:0})
-           audio.src = backURL + '/'+ player.playlist[0].url
-           audio.load()
-           audio.ondurationchange = function(){actionSetDuration()}
-           audio.ontimeupdate = function(){actionTrackCurrentTime()}
-           audio.play()
+           trackActions(player.playlist[0])
+           yield put (actionTrackPlay())
        } else {
            yield put({type:"NEXT_TRACK",playlistIndex:playlistIndex+1})
-           audio.src = backURL + '/'+ player.playlist[playlistIndex+1].url
-           audio.load()
-           audio.ondurationchange = function(){actionSetDuration()}
-           audio.ontimeupdate = function(){actionTrackCurrentTime()}
-           audio.play()
+           trackActions(player.playlist[playlistIndex+1])
+           yield put (actionTrackPlay())
        }
     console.log(playlistIndex)
 }
@@ -165,18 +160,12 @@ export function* previousTrackWorker () {
     let p = player.playlistIndex
     if (p < 1) {
         yield put({type:"NEXT_TRACK",playlistIndex:0})
-        audio.src = backURL + '/'+ player.playlist[0].url
-        audio.load()
-        audio.ondurationchange = function(){actionSetDuration()}
-        audio.ontimeupdate = function(){actionTrackCurrentTime()}
-        audio.play()
+        trackActions(player.playlist[0])
+        yield put (actionTrackPlay())
     } else {
         yield put({type:"PREVIOUS_TRACK",playlistIndex:p-1})
-        audio.src = backURL + '/'+ player.playlist[p-1].url
-        audio.load()
-        audio.ondurationchange = function(){actionSetDuration()}
-        audio.ontimeupdate = function(){actionTrackCurrentTime()}
-        audio.play()
+        trackActions(player.playlist[p-1])
+        yield put (actionTrackPlay())
     }
 
 
@@ -187,9 +176,6 @@ export function* previousTrackWatcher() {
 
 
 
-
-
-
 export const actionTrackStop = () =>
     ({type: 'ACTION_TRACK_STOP'})