styles playing track

src/components/Routs.js

@@ -38,11 +38,11 @@ const Content = ({children}) =>
   <>
   {store.getState().auth?.token && <Header/>}
     <section className='d-flex justify-content-around'>
-      <div className='col'>
+      <div className={store.getState().auth?.token ? 'col-7' : 'col-12'}>
         {children}
       </div>
-      <div className='col'>
-        {store.getState().auth?.token && <СNowPlayingPlayer/>}
-      </div>
+      {/* <div className='col-5'> */}
+        {store.getState().auth?.token && <СNowPlayingPlayer className='col-5'/>}
+      {/* </div> */}
     </section>
   </>

src/components/Tracks.js

@@ -12,12 +12,8 @@ const Track = ({track = {}, trackone={}, playlist={}, plstnow={}},  key) =>
     <td>          
         <div onClick={async () => {
             store.dispatch(actionFullSetPlaylist(playlist.tracks));
-            //console.log(playlist.tracks.indexOf(track))
             store.dispatch(actionFullSetTrack(playlist.tracks[playlist.tracks.indexOf(track)]));
             store.dispatch(actionNowPlaylist(store.getState().player?.track?.pivot?.playlist_id));
-            //store.dispatch(actionFullSetPlaylist(playlist));
-            //store.dispatch(actionFullSetPlaylist(plstnow?.payload?.tracks));
-            //store.dispatch(actionFullSetTrack(store.getState().player?.playlist[0]));
             store.dispatch(actionFullPlay());
         }}>
             {track.name}

src/components/playing.js

@@ -5,6 +5,7 @@ import { store } from '../store/store';
 import {actionFullGetDuration, actionFullSetTrack, actionFullPlay, actionFullPause, actionFullSetVolume, actionPrevTrack, actionNextTrack} from '../store/playerReducer';
 import {Provider, connect}   from 'react-redux';
 import { audio } from './Tracks';
+import img_album from '../images/default_album.gif'
 
 function msToTime(duration) {
     let hours,minutes,seconds;
@@ -25,14 +26,16 @@ export let NowPlayingPlayer = (props) => {
 
     useEffect(() => {
         if (props.currentTime) audio.currentTime = newCurrent
-    }, [newCurrent])
+    }, [newCurrent]);
+    
+    let album_photo = (props.track?.album?.photo) ? `http://player-api/storage/albums/${props.track?.album?.photo}` : img_album 
 
 return(
 <div className="player">
     <div className="wrapper">
         <div className="details">
             <div className="now-playing"></div>
-            <div className="track-art"></div>
+            <div className="track-art" style={{backgroundImage:`url(${album_photo})`}} ></div>
             <div className="track-name">{props.track?.name|| 'Track Name'  }</div>
             <div className="now-playing">{props.track?.id3?.artist || 'Artist'  }</div>
         </div>

src/index.css

@@ -46,19 +46,19 @@ code {
   justify-content: center;
 }
 .track-art{
-  margin: 25px;
+  /* margin: 25px; */
   height: 250px;
   width: 250px;
-  border: 2px solid #fff;
+  /* border: 2px solid #fff; */
   background-size: cover;
   background-position: center;
-  border-radius: 50%;
-  -moz-box-shadow: 0px 6px 5px #ccc;
+  /* border-radius: 50%; */
+  /* -moz-box-shadow: 0px 6px 5px #ccc;
   -webkit-box-shadow:0px 6px 5px #ccc;
-  box-shadow: 0px 6px 5px #ccc;
-  -moz-border-radius:190px;
-  -webkit-border-radius:190px;
-  border-radius: 190px;
+  box-shadow: 0px 6px 5px #ccc; */
+  -moz-border-radius:20px;
+  -webkit-border-radius:20px;
+  border-radius: 20px;
 }
 .now-playing{
   font-size: 1rem;
@@ -74,7 +74,7 @@ code {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: 30px;
+  /* margin-bottom: 30px; */
 }
 .active{
   color: black;