remaking player reducer

src/App.js

@@ -108,8 +108,8 @@ const Player = () =>
         </Switch>
       </main>
     </div>
-    <PlayerbarConnect />
-    {/* <PlayerBar /> */}
+    {/* <PlayerbarConnect /> */}
+    <PlayerBar />
   </div>
 
 function App() {

src/actions/index.js

@@ -1,8 +1,50 @@
+import { type } from '@testing-library/user-event/dist/type'
 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 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, 
+        duration: audio.duration, 
+        currentTime: audio.currentTime, 
+        volume: audio.volume
+    })
+const actionTrackPlay = () => ({type: 'PLAY_TRACK'})
+const actionTrackPause = (currentTime) => 
+    ({
+        type: 'PAUSE_TRACK', 
+        track:undefined,
+        playlist: undefined,
+        currentTime:currentTime,
+        duration: undefined,
+        voulume: undefined
+    })
+
+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))
+        }
+        dispatch(actionTrackPlay())
+        audio.play()
+    }
+
+export const pauseTrack = () =>
+    dispatch => {
+        audio.pause()
+        dispatch(actionTrackPause(audio.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,41 +7,50 @@ import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 
 
-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' }} 
-        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>{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 Track = ({ track,  player, playlist, playTrack, pauseTrack }) => {
+  let [_player, setPlayer] = useState(player)
+
+  useEffect(() => {
+    console.log('PLAYER_CHANGED')
+    console.log(player.isPlaying)
+    setPlayer(player)
+  }, [player])
+
+  return (
+    <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>
+        }
+
+
+
+
+
+        
+        <button style={{ padding: '10px', margin: '2px' }}>+</button>
+      </div>
+      <div style={{ textAlign: 'left' }}>
+        <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 TrackConnect = connect(
-  state => ({audio: state.player.track || {}}), 
+  state => ({
+    player: state.player || {},
+    playlist: state.playTrack?.payload[0] || {}
+  }), 
   {
-    setTrack: action.actionTrackSet, 
-    playTrack: action.actionTrackPlay,
-    pauseTrack: action.actionTrackPause
+    pauseTrack: action.pauseTrack,
+    playTrack: action.playTrack
   })(Track)
 
 const SortableItem = sortableElement(TrackConnect);

src/components/Playerbar.js

@@ -1,52 +1,41 @@
-import { useEffect, useState } from "react"
-import { connect } from "react-redux"
-import { actionTrackPlay, actionTrackPause } from "../actions"
+// import { useEffect, useState } from "react"
+// import { connect } from "react-redux"
+// import { actionTrackPlay, actionTrackPause } from "../actions"
 
 
-const Playerbar = ({player}) => {
-    let [_player, setPlayer] = useState()
+// const Playerbar = ({player}) => {
+//     let [_player, setPlayer] = useState()
 
-    useEffect(()=> {
-        console.log(Boolean(_player) , _player)
-        //console.log('PLAYERBAR', player, _player)
-        setPlayer(player)
-    },[player])
+//     useEffect(()=> {
+//         console.log(Boolean(_player) , _player)
+//         //console.log('PLAYERBAR', player, _player)
+//         setPlayer(player)
+//     },[player, _player])
 
-    return (
-        <footer style={{display: `${_player?.track? 'block':'none'}`}}>
-        <div>
-            <button>{`<<`}</button>
-            <button onClick={() => {
-                if(_player) {
-                    console.log('PLAYE', _player.track, _player.trackInfo)
-                    if(!_player.isPaused) {
-                        console.log('player play')
-                        actionTrackPause(_player.track, _player.trackInfo)
-                    }
-                    if(_player.isPaused) {
-                        console.log('player pause')
-                        actionTrackPlay(_player.track, _player.trackInfo)
-                    } 
-                }
-            }}>
-                {_player?.isPaused? `>` : `||`}
-            </button>
-            <button>{`>>`}</button>
-            <input type="range" />
-        </div>
+//     return (
+//         <footer style={{display: `${_player?.track? 'block':'none'}`}}>
+//         <div>
+//             <button>{`<<`}</button>
+//             {_player?.isPaused?
+//                 <button onClick={() => actionTrackPlay(_player.track, _player.trackInfo)}>{`>`}</button> :
+//                 <button onClick={() => actionTrackPause(_player.track, _player.trackInfo)}>{`| |`}</button>
+//             }
+//             <button>{`>>`}</button>
+//             <input type="range" />
+//         </div>
 
-        {_player? (_player.trackInfo?.id3?.artist && _player.trackInfo?.id3?.title ?
-            <small>`${_player.trackInfo?.id3?.artist} - ${_player.trackInfo?.id3?.title}`</small>:
-            <small>{_player.trackInfo?.originalFileName}</small>): ''}
+//         {_player? (_player.trackInfo?.id3?.artist && _player.trackInfo?.id3?.title ?
+//             <small>`${_player.trackInfo?.id3?.artist} - ${_player.trackInfo?.id3?.title}`</small> :
+//             <small>{_player.trackInfo?.originalFileName}</small>) : ''}
         
-        </footer>
-    )
-}
+//         </footer>
+//     )
+// }
 
-export const PlayerbarConnect = connect(
-    state => ({player: state.player || {}}),
-    {
-        playTrack: actionTrackPlay,
-        pauseTrack: actionTrackPause
-    }
-)(Playerbar)
+// export const PlayerbarConnect = connect(
+//     state => ({player: state.player || {}}),
+//     {
+//         playTrack: actionTrackPlay,
+//         pauseTrack: actionTrackPause
+//     }
+// )(Playerbar)

src/components/Sidebar/index.js

@@ -120,7 +120,6 @@ const Playlists = ({ playlists }) => {
             <Link
               style={{ display: 'block', backgroundColor:'darkcyan', color: 'cyan', margin: '5px', padding: '5px' }}
               to={`/player/playlist/:${item._id}`}
-              // to={`${history.location.pathname}/playlist/:${item._id}`}
             >{item.name}</Link>
           )
         }).reverse() : ''

src/reducers/index.js

@@ -34,26 +34,33 @@ export function promiseReducer(state = {}, { type, name, status, payload, error
     return state
 }
 
-export function playerReducer(state, { type, audio, track }) {
+export function playerReducer(state, { type, track, playlist, duration, currentTime, volume }) {
     if(!state) {
         return {}
     }
     if (type === 'PLAY_TRACK') {
-        audio.play()
-        type = 'SET_TRACK'
+        //console.log('PLAY_TRACK', ...state)
+        return {
+            ...state, 
+            'isPlaying' : true
+        }
     }
     if (type === 'PAUSE_TRACK') {
-        audio.pause()
-        type = 'SET_TRACK'
+        return {
+            ...state, 
+            'isPlaying' : false,
+            'currentTime' : currentTime
+        }
     }
     if (type === 'SET_TRACK') {
         return {
-            track: audio,
-            isPaused: audio.paused, 
-            duration: audio.duration,
-            trackInfo: track,
-            currentTime: audio.currentTime,
-            volume: audio.volume
+            isPlaying: false,
+            track: track,
+            playlist: playlist,
+            duration: duration, //общая длительность трека
+            currentTime: currentTime,// текущая позиция в треке
+            volume:volume
+            //playlistIndex: 5
         }
     }
     return state