player component created. saving some progress

src/App.js

@@ -4,6 +4,7 @@ import * as reducer from './reducers'
 import * as Logcomp from './components/Login'
 import * as Sidebar from './components/Sidebar'
 import * as Page from './components/Page'
+import  {PlayerbarConnect} from './components/Playerbar'
 
 import thunk from 'redux-thunk';
 import { createStore, combineReducers, applyMiddleware } from 'redux';
@@ -107,7 +108,8 @@ const Player = () =>
         </Switch>
       </main>
     </div>
-    <PlayerBar />
+    <PlayerbarConnect />
+    {/* <PlayerBar /> */}
   </div>
 
 function App() {

src/components/Page/index.js

@@ -41,7 +41,7 @@ const TrackConnect = connect(
   {
     setTrack: action.actionTrackSet, 
     playTrack: action.actionTrackPlay,
-    pauseTrack: action.actionTrackPause 
+    pauseTrack: action.actionTrackPause
   })(Track)
 
 const SortableItem = sortableElement(TrackConnect);

src/components/Playerbar.js

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react"
+import { connect } from "react-redux"
+import { actionTrackPlay, actionTrackPause } from "../actions"
+
+
+const Playerbar = ({player}) => {
+    let [_player, setPlayer] = useState()
+
+    useEffect(()=> {
+        console.log(Boolean(_player) , _player)
+        //console.log('PLAYERBAR', player, _player)
+        setPlayer(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>
+
+        {_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>
+    )
+}
+
+export const PlayerbarConnect = connect(
+    state => ({player: state.player || {}}),
+    {
+        playTrack: actionTrackPlay,
+        pauseTrack: actionTrackPause
+    }
+)(Playerbar)