the work on player-reducer has bagan. Track now can be set, played and paused(but it works very janky)

src/App.js

@@ -49,6 +49,7 @@ const store = createStore(
     {
       promise: reducer.promiseReducer,
       auth: reducer.authReducer,
+      player: reducer.playerReducer
       //local: localStoreReducer(promiseReducer, 'locale')
     }
   ), applyMiddleware(thunk)

src/actions/index.js

@@ -1,5 +1,9 @@
 import { jwtDecode, gql, backendURL } from '../App'
 
+export const actionTrackSet = (track) => ({type: 'SET_TRACK', audio: new Audio(backendURL + '/' + track.url), track})
+export const actionTrackPlay = (audio, track) => ({type: 'PLAY_TRACK', audio, track})
+export const actionTrackPause = (audio, track) => ({type: 'PAUSE_TRACK', audio, track})
+
 const actionPending = name => ({ type: 'PROMISE', status: 'PENDING', name })
 const actionResolved = (name, payload) => ({ type: 'PROMISE', status: 'RESOLVED', name, payload })
 const actionRejected = (name, error) => ({ type: 'PROMISE', status: 'REJECTED', name, error })

src/components/Page/index.js

@@ -7,22 +7,44 @@ import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 
 
-const Track = ({ track: { _id, url, originalFileName, id3: { title, artist, album } } }) =>
+const Track = ({ track, audio, setTrack, playTrack, pauseTrack }) =>
   <li style={{ border: '1px solid black', display: 'flex', alignItems: 'center' }}>
     <div style={{ marginRight: '2%' }}>
-      <button style={{ padding: '10px', margin: '2px' }}> {`[>] / [ || ]`} </button>
+      <button 
+        style={{ padding: '10px', margin: '2px' }} 
+        onClick={()=> {setTrack(track); console.log('treg',track)}}
+      > {`SET`} </button>
+
+      <button 
+        style={{ padding: '10px', margin: '2px' }} 
+        onClick={()=> {playTrack(audio, track); console.log('playing')}}
+      > {`[>]`} </button>
+
+      <button 
+        style={{ padding: '10px', margin: '2px' }} 
+        onClick={()=> {pauseTrack(audio, track); console.log('pause')}}
+      > {`[ || ]`} </button>
+      
       <button style={{ padding: '10px', margin: '2px' }}>+</button>
     </div>
     <div style={{ textAlign: 'left' }}>
-      <h5>{artist || 'Artist: unknown'}</h5>
-      <h6>{album || 'Album: unknown'}</h6>
-      <h5>{title || originalFileName}</h5>
-      <p>{_id}</p>
-      <p>{url}</p>
+      <h5>{track.id3.artist || 'Artist: unknown'}</h5>
+      <h6>{track.id3.album || 'Album: unknown'}</h6>
+      <h5>{track.id3.title || track.originalFileName}</h5>
+      <p>{track._id}</p>
+      <p>{track.url}</p>
     </div>
   </li>
 
-const SortableItem = sortableElement(Track);
+const TrackConnect = connect(
+  state => ({audio: state.player.track || {}}), 
+  {
+    setTrack: action.actionTrackSet, 
+    playTrack: action.actionTrackPlay,
+    pauseTrack: action.actionTrackPause 
+  })(Track)
+
+const SortableItem = sortableElement(TrackConnect);
 
 const SortableContainer = sortableContainer(({ children }) => {
   return <ul>{children}</ul>;

src/reducers/index.js

@@ -10,6 +10,7 @@ export function authReducer(state, { type, token }) {
         }
     }
     if (type === 'AUTH_LOGIN') {
+        //console.log('TOXEN', jwtDecode(token))
         let auth = jwtDecode(token)
         if (auth) {
             localStorage.authToken = token
@@ -33,6 +34,31 @@ export function promiseReducer(state = {}, { type, name, status, payload, error
     return state
 }
 
+export function playerReducer(state, { type, audio, track }) {
+    if(!state) {
+        return {}
+    }
+    if (type === 'PLAY_TRACK') {
+        audio.play()
+        type = 'SET_TRACK'
+    }
+    if (type === 'PAUSE_TRACK') {
+        audio.pause()
+        type = 'SET_TRACK'
+    }
+    if (type === 'SET_TRACK') {
+        return {
+            track: audio,
+            isPaused: audio.paused, 
+            duration: audio.duration,
+            trackInfo: track,
+            currentTime: audio.currentTime,
+            volume: audio.volume
+        }
+    }
+    return state
+}
+
 export const localStoreReducer = (reducer, localStorageName) => {
     return (
         (state, action) => {