some fixed

src/App.scss

@@ -58,12 +58,15 @@ input {
 .App-logo {
   margin: 6px;
   height: 100px;
+  @media(max-width: $breakpoint-tablet) {
+  height: 80px;
+}
 }
 
 .logo-large {
-  height: 600px;
+  height: 700px;
   @media (max-width: $breakpoint-tablet) {
-    height: 300px;
+    height: 400px;
     margin-left: -100px;
   }
 }
@@ -77,8 +80,6 @@ input {
   background: #000000;
   -webkit-box-shadow: 0.2em 0.2em 5px rgba(122, 122, 122, 0.37);
   box-shadow: 0.2em 0.2em 5px rgba(122, 122, 122, 0.376);
-
-
   h3 {
     margin-top: 30px;
   }
@@ -96,19 +97,23 @@ main {
   overflow: auto;
   margin-top: 112px;
   width: 99%;
-  min-height: 840px;
+  height: 80vh;
   display: flex;
   flex-direction: row;
+  @media (max-width: $breakpoint-tablet) {
+    margin-top: 92px;
+  }
 }
 
 .Aside {
-  min-height: 900px;
+  height: 80vh;
   top: 114px;
   position: fixed;
   width: 430px;
   background-color: red;
   @media (max-width: $breakpoint-tablet) {
-    width: 320px;;
+    width: 320px;
+    top: 96px;
   }
 }
 
@@ -193,6 +198,7 @@ footer {
 
 
 .dropdown-menu {
+  z-index: 1;
   border: 1px solid rgba(255, 255, 255, 0.4);
   background: #000000;
   text-align: center;
@@ -202,6 +208,7 @@ footer {
 }
 
 
+
 .dropdown-button {
   font-size: 20px;
   width: 100%;

src/actions/gql-queries-backurl.js

@@ -37,4 +37,11 @@ export const queries = {
     }
 }`, variables:{ q: JSON.stringify([{ _id: match.params._id }]) } }),
 
+    "/userPlaylist/:_id": match => ({name: 'playlistById',
+        query: `query playlistById($q: String){
+    PlaylistFindOne(query: $q){
+        _id name owner {login} tracks {_id url originalFileName}
+    }
+}`, variables:{ q: JSON.stringify([{ _id: match.params._id }]) } }),
+
 }

src/pages/my-tracks/my-tracks.js

@@ -14,13 +14,12 @@ const MyTracks = ({playlist={}}) => {
         <div className='Category'>
             <h2>{name}</h2>
             <CPreloaded promiseName='playlistById'>
-                {(tracks || []).map((track,index) => <CTrack trackIndex={index} playlist={playlist} track={track}/>)}
+                {(tracks || []).map((track,index) => <CTrack trackIndex={index} track={track}/>)}
             </CPreloaded>
         </div>
     )
 }
 
-
 const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}),)(MyTracks)
 
 

src/pages/track.js

@@ -24,7 +24,6 @@ export const Track = ({playlist,track:{originalFileName},trackIndex,
 }
 
 
-
 export const CTrack = connect(state => ({playlist: state.promise.playlistById?.payload?.tracks || []}),
     {trackPlay: actionTrackPlay, trackStop: actionTrackStop,setPlaylist:actionSetPlaylist})(Track)
 

src/pages/user-tracks/user-button.scss

@@ -19,7 +19,7 @@ $breakpoint-tablet: 1640px;
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 1;
+    z-index: 0;
     background-color: rgba(255,255,255,0.1);
     transition: all 0.3s;
 }
@@ -34,7 +34,7 @@ $breakpoint-tablet: 1640px;
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 1;
+    z-index: 0;
     opacity: 0;
     transition: all 0.3s;
     border: 1px solid rgba(255,255,255,0.5);

src/pages/user-tracks/userTracks.js

@@ -16,7 +16,7 @@ const UserTracks = ({playlist={}}) => {
         <div className='Category'>
             <h2>{name}</h2>
             <CPreloaded promiseName='playlistById'>
-                {(tracks || []).map((track,index) => <CTrack trackIndex={index} playlist={playlist} track={track}/>)}
+                {(tracks || []).map((track,index) => <CTrack trackIndex={index} track={track}/>)}
             </CPreloaded>
         </div>
     )

src/reducers/playerReducer.js

@@ -81,7 +81,8 @@ export const playerReducer = (
 };
 
 
-const audio = new Audio()
+export const audio = new Audio()
+
 audio.onended = function(){actionNextTrack()}
 
 export const actionTrackLoad = (trackIndex) =>
@@ -127,31 +128,55 @@ export const actionNextTrack = () =>
 
 export function* nextTrackWorker () {
     let {player} = yield select ()
-    let p = player.playlistIndex
-    yield put({type:"NEXT_TRACK",playlistIndex:p+1})
-    audio.src = backURL + '/'+ player.playlist[p+1].url
-    audio.load()
-    audio.ondurationchange = function(){actionSetDuration()}
-    audio.ontimeupdate = function(){actionTrackCurrentTime()}
-    audio.play()
+    let playlistIndex = player.playlistIndex
+    let playlist = player.playlist
+       if (playlist.length === playlistIndex + 1) {
+           yield put({type:"NEXT_TRACK",playlistIndex:0})
+           audio.src = backURL + '/'+ player.playlist[0].url
+           audio.load()
+           audio.ondurationchange = function(){actionSetDuration()}
+           audio.ontimeupdate = function(){actionTrackCurrentTime()}
+           audio.play()
+       } else {
+           yield put({type:"NEXT_TRACK",playlistIndex:playlistIndex+1})
+           audio.src = backURL + '/'+ player.playlist[playlistIndex+1].url
+           audio.load()
+           audio.ondurationchange = function(){actionSetDuration()}
+           audio.ontimeupdate = function(){actionTrackCurrentTime()}
+           audio.play()
+       }
+    console.log(playlistIndex)
 }
 export function* nextTrackWatcher() {
     yield takeEvery ('ACTION_NEXT_TRACK',nextTrackWorker)
 }
 
 
+
+
 export const actionPreviousTrack = () =>
     ({type:'ACTION_PREVIOUS_TRACK'})
 
 export function* previousTrackWorker () {
     let {player} = yield select ()
     let p = player.playlistIndex
-    yield put({type:"PREVIOUS_TRACK",playlistIndex:p-1})
-    audio.src = backURL + '/'+ player.playlist[p-1].url
-    audio.load()
-    audio.ondurationchange = function(){actionSetDuration()}
-    audio.ontimeupdate = function(){actionTrackCurrentTime()}
-    audio.play()
+    if (p < 1) {
+        yield put({type:"NEXT_TRACK",playlistIndex:0})
+        audio.src = backURL + '/'+ player.playlist[0].url
+        audio.load()
+        audio.ondurationchange = function(){actionSetDuration()}
+        audio.ontimeupdate = function(){actionTrackCurrentTime()}
+        audio.play()
+    } else {
+        yield put({type:"PREVIOUS_TRACK",playlistIndex:p-1})
+        audio.src = backURL + '/'+ player.playlist[p-1].url
+        audio.load()
+        audio.ondurationchange = function(){actionSetDuration()}
+        audio.ontimeupdate = function(){actionTrackCurrentTime()}
+        audio.play()
+    }
+
+
 }
 export function* previousTrackWatcher() {
     yield takeEvery ('ACTION_PREVIOUS_TRACK',previousTrackWorker)
@@ -220,31 +245,3 @@ export function* setPlaylistWatcher() {
 }
 
 
-
-
-
-
-// export const actionSetDuration = () =>
-//     ({type:'ACTION_TRACK_DURATION'})
-//
-// export function* setDurationWorker () {
-//     let e = audio.duration
-//     yield put({type:"TRACK_DURATION",duration:e})
-// }
-//
-// export function* setDurationWatcher() {
-//     yield takeEvery ('ACTION_TRACK_DURATION',setDurationWorker)
-// }
-//
-//
-//
-//
-// export const actionTrackCurrentTime = () =>
-//     ({type:'ACTION_TRACK_CURRENT_TIME'})
-// export function* trackCurrentTimeWorker () {
-//     let e = audio.currentTime
-//     yield put({type:"TRACK_CURRENT_TIME", currentTime:e})
-// }
-// export function* trackCurrentTimeWatcher() {
-//     yield takeEvery ('ACTION_TRACK_CURRENT_TIME', trackCurrentTimeWorker)
-// }