set playlist to reducer

src/App.scss

@@ -167,6 +167,7 @@ footer {
 
 
 .dropdown-menu {
+  border: 1px solid rgba(255, 255, 255, 0.4);
   background: #000000;
   text-align: center;
   h3 {

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

@@ -8,13 +8,19 @@ import {CPreloaded} from "../preloader";
 import {actionSetPlaylist} from "../../reducers";
 
 
-const MyTracks = ({playlist:{_id, name, tracks}={}}) =>
-    <div className='Category'>
-        <h1>{name}</h1>
-        <CPreloaded promiseName='playlistById'>
-        {(tracks || []).map(track => <CTrack track={track}/>)}
-        </CPreloaded>
-    </div>
+const MyTracks = ({playlist={}}) => {
+    const{_id, name, tracks} = playlist
+    return (
+        <div className='Category'>
+            <h1>{name}</h1>
+            <CPreloaded promiseName='playlistById'>
+                {(tracks || []).map((track,index) => <CTrack trackIndex={index} playlist={playlist} track={track}/>)}
+
+            </CPreloaded>
+        </div>
+    )
+}
+
 
 const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}),
     {setPlaylist: actionSetPlaylist})(MyTracks)

src/pages/track.js

@@ -6,17 +6,14 @@ import {connect} from "react-redux";
 import {backURL} from "../actions";
 
 
-export const Track = ({playlist=['fdgdf','dgdfgfd','dgdfgdfgdf'],track:{_id,url,originalFileName},
+export const Track = ({playlist,track:{_id,url,originalFileName},trackIndex,
                           trackPlay,trackStop,setPlaylist}) => {
-
-    let audioSrc = backURL + '/'+ url
-
+    // let audioSrc = backURL + '/'+ url
+// console.log(playlist,'iz track')
     return (
         <div className='Tracks'>
                 <button onClick={() => {
-                    trackPlay(audioSrc);
-                    // setTimeout(setPlaylist(playlist),5000)
-                      setPlaylist()
+                    setPlaylist(playlist,trackIndex);
                 }}>
                     <img src={play}/>
                 </button>
@@ -31,4 +28,7 @@ export const Track = ({playlist=['fdgdf','dgdfgfd','dgdfgdfgdf'],track:{_id,url,
 
 
 export const CTrack = connect(state => ({playlist: state.promise.playlistById?.payload?.tracks || []}),
-    {trackPlay: actionTrackPlay, trackStop: actionTrackStop,setPlaylist:actionSetPlaylist})(Track)
+    {trackPlay: actionTrackPlay, trackStop: actionTrackStop,setPlaylist:actionSetPlaylist})(Track)
+
+
+

src/reducers/playerReducer.js

@@ -1,11 +1,11 @@
 import {store} from "./store";
 import {actionPromise} from "./promiseReducer";
-import {gql} from "../actions";
+import {backURL, gql} from "../actions";
 
 export const playerReducer = (
     state = {},
-    {type,track,isPlaying=false,isPaused,duration,
-        playlist=[],playlistIndex,currentTime=0,volume=1,}) => {
+    {type,track,trackIndex,isPlaying=false,isPaused,duration,
+        playlist,playlistIndex,currentTime=0,volume=1,}) => {
 
     if (type === "TRACK_PLAY") {
         return {
@@ -45,6 +45,7 @@ export const playerReducer = (
     }
 
     if (type === "SET_PLAYLIST") {
+        console.log(playlist,'lol')
         return {
             ...state,
             playlist,
@@ -59,15 +60,38 @@ const audio = new Audio()
 
 
 
-export const actionTrackPlay = (audioSrc) => {
-    audio.src = audioSrc
-    audio.load()
-    audio.ondurationchange = function(){actionSetDuration()}
-    audio.ontimeupdate = function(){actionTrackCurrentTime()}
-    audio.play()
-    store.dispatch({type:"TRACK_PLAY",isPlaying:true,isPaused:false})
-    store.dispatch(actionSetPlaylist())
-}
+export const actionTrackPlay = (trackIndex) =>
+    async (dispatch,getState) => {
+        let {player:{playlistIndex,playlist}} = getState()
+
+        if (playlistIndex !== trackIndex) {
+            audio.src = backURL + '/'+ playlist.tracks[trackIndex].url
+            await audio.load()
+            audio.ondurationchange = function(){actionSetDuration()}
+            audio.ontimeupdate = function(){actionTrackCurrentTime()}
+        }
+        await audio.play()
+        await console.log(playlist,'uuuuu')
+        await dispatch({type:"TRACK_PLAY",isPlaying:true,isPaused:false,trackIndex})
+    }
+
+
+
+
+// export const actionTrackPlay = (trackIndex) =>
+//     async (dispatch, getState) => {
+//          let {player} = getState ()
+//         let url = player.playlist[trackIndex]?.url
+//          let audioSrc = backURL + '/'+ url
+//         audio.src = audioSrc
+//         audio.load()
+//         console.log(audioSrc,'uuuuu')
+//         audio.ondurationchange = function(){actionSetDuration()}
+//         audio.ontimeupdate = function(){actionTrackCurrentTime()}
+//         audio.play()
+//         await dispatch({type:"TRACK_PLAY",isPlaying:true,isPaused:false})
+//     }
+
 
 
 export const actionTrackStop = () => {
@@ -92,26 +116,9 @@ export const actionTrackCurrentTime = () => {
     store.dispatch({type:"TRACK_CURRENT_TIME", currentTime:e})
 }
 
-export const actionSetPlaylist = (tracks) => {
-    console.log(tracks,'lol')
-        store.dispatch({type:"SET_PLAYLIST",playlist:tracks})
+export const actionSetPlaylist = (playlist,trackIndex) => {
+        store.dispatch({type:"SET_PLAYLIST",playlist:playlist})
+         actionTrackPlay(trackIndex)
     }
 
 
-
-// const actionPlaylistByIdForPlayer = (match) =>
-//     actionPromise('playlistByIdForPlayer', gql(`query playlistByIdForPlayer($q: String){
-//     PlaylistFindOne(query: $q){
-//         _id name owner {login} tracks {_id url originalFileName}
-//     }
-// }`, { q: JSON.stringify([{ _id: match.params._id}]) }))
-//
-//
-//
-// export const actionFullSetPlaylist = (_id) =>
-//     async function i(dispatch) {
-//         let playlist = await dispatch(actionPlaylistByIdForPlayer(_id));
-//         if (playlist) {
-//             dispatch(actionSetPlaylist(playlist));
-//         }
-//     }