now tracks play and changing buttons according to state

src/actions/index.js

@@ -2,49 +2,62 @@ import { type } from '@testing-library/user-event/dist/type'
 import { jwtDecode, gql, backendURL } from '../App'
 
 const audio = new Audio()
-audio.addEventListener('ended', (e) => {
-    console.log('TRACK ended', e.target.src)
-})
-//добавить адд ивентлистенер на конецтрека
 
 const actionTrackSet = (track, audio, playlist) => 
     ({
         type: 'SET_TRACK', 
-        track: track, playlist: playlist, 
+        track: track, 
+        playlist: playlist, 
         duration: audio.duration, 
         currentTime: audio.currentTime, 
         volume: audio.volume
     })
+
+const actionTrackSetDuration = (time) => {
+    console.log('STAVIM VERMYA', time)
+    return ({type: 'SET_DURATION', duration: time})
+}
+
+const actionTrackSetCurrTime = (time) => {
+    console.log('setim vremya', time)
+    return ({type: 'SET_CURRTIME', currentTime: time})
+}
 const actionTrackPlay = () => ({type: 'PLAY_TRACK'})
-const actionTrackPause = (currentTime) => 
-    ({
-        type: 'PAUSE_TRACK', 
-        track:undefined,
-        playlist: undefined,
-        currentTime:currentTime,
-        duration: undefined,
-        voulume: undefined
-    })
+const actionTrackPause = (currentTime) => ({type: 'PAUSE_TRACK', currentTime:currentTime})
 
-export const playTrack = (track, playlist) =>
-    async dispatch => {
-        console.log(audio.src.length, typeof audio.src)
-        console.log('playTrack', track, playlist)
-        if(audio.src.length === 0) {
-            audio.src = backendURL + '/' + track.url
-            console.log(audio.src)
-            dispatch(actionTrackSet(track, audio, playlist))
-        }
+export const setTrack = (track, playlist) =>
+    dispatch => {
+        audio.src = backendURL + '/' + track.url
+        dispatch(actionTrackSet(track, audio, playlist))
+    }
+
+export const playTrack = () =>
+    dispatch => {
         dispatch(actionTrackPlay())
         audio.play()
     }
 
 export const pauseTrack = () =>
     dispatch => {
-        audio.pause()
         dispatch(actionTrackPause(audio.currentTime))
+        audio.pause()
     }
 
+audio.addEventListener('ended', (e) => console.log('TRACK ended', e.target.src))
+audio.addEventListener('durationchange', (e) => {
+    actionTrackSetDuration(e.target.duration)
+})
+audio.ontimeupdate = (e) => dispatch => dispatch(actionTrackSetCurrTime(e.target.currentTime))
+
+
+
+
+
+
+
+
+
+
 
 const actionPending = name => ({ type: 'PROMISE', status: 'PENDING', name })
 const actionResolved = (name, payload) => ({ type: 'PROMISE', status: 'RESOLVED', name, payload })

src/components/Page/index.js

@@ -7,12 +7,11 @@ import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 
 
-const Track = ({ track,  player, playlist, playTrack, pauseTrack }) => {
+const Track = ({ track,  player, playlist, setTrack, playTrack, pauseTrack }) => {
   let [_player, setPlayer] = useState(player)
+  let [play, setPlay] = useState(true)
 
   useEffect(() => {
-    console.log('PLAYER_CHANGED')
-    console.log(player.isPlaying)
     setPlayer(player)
   }, [player])
 
@@ -20,15 +19,17 @@ const Track = ({ track,  player, playlist, playTrack, pauseTrack }) => {
     <li style={{ border: '1px solid black', display: 'flex', alignItems: 'center' }}>
       <div style={{ marginRight: '2%' }}>
     
-        {_player?.isPlaying ?
-          <button style={{ padding: '10px', margin: '2px' }} onClick={()=> pauseTrack()}>{`[| |]`}</button>:
-          <button style={{ padding: '10px', margin: '2px' }} onClick={()=> playTrack(track, playlist)}>{`[>]`}</button>
+        { play || track?._id !== _player?.track?._id?
+          <button 
+            style={{ padding: '10px', margin: '2px' }} 
+            onClick={()=> {
+              if(track?._id !== _player?.track?._id) setTrack(track, playlist)
+              playTrack(track, playlist)
+              setPlay(false)
+            }}
+          >{`[>]`}</button>:
+          <button style={{ padding: '10px', margin: '2px' }} onClick={()=> {pauseTrack(); setPlay(true)}}>{`[| |]`}</button>
         }
-
-
-
-
-
         
         <button style={{ padding: '10px', margin: '2px' }}>+</button>
       </div>
@@ -49,6 +50,7 @@ const TrackConnect = connect(
     playlist: state.playTrack?.payload[0] || {}
   }), 
   {
+    setTrack: action.setTrack,
     pauseTrack: action.pauseTrack,
     playTrack: action.playTrack
   })(Track)

src/reducers/index.js

@@ -39,18 +39,18 @@ export function playerReducer(state, { type, track, playlist, duration, currentT
         return {}
     }
     if (type === 'PLAY_TRACK') {
-        //console.log('PLAY_TRACK', ...state)
-        return {
-            ...state, 
-            'isPlaying' : true
-        }
+        return { ...state, 'isPlaying' : true }
     }
     if (type === 'PAUSE_TRACK') {
-        return {
-            ...state, 
-            'isPlaying' : false,
-            'currentTime' : currentTime
-        }
+        return { ...state, 'isPlaying' : false, 'currentTime' : currentTime }
+    }
+    if (type === 'SET_CURRTIME') {
+        console.log('set_currtime')
+        return { ...state, 'currentTime': currentTime}
+    }
+    if (type === 'SET_DURATION') {
+        console.log('SET_DURATION')
+        return { ...state, 'duration': duration }
     }
     if (type === 'SET_TRACK') {
         return {