some stuff made.saving progress

src/actions/index.js

@@ -26,23 +26,18 @@ const actionTrackSetVolume = (value) => ({ type: 'SET_VOLUME', volume: value })
 const actionTrackPlay = () => ({ type: 'PLAY_TRACK' })
 const actionTrackPause = (currentTime) => ({ type: 'PAUSE_TRACK', currentTime: currentTime })
 
+const actionPlaylistSet = (playlist) => ({type: 'SET_PLAYLIST', playlist: playlist})
+const actionSetPlaylistIndex = (index) => ({type: 'SET_INDEX', playlistIndex: index})
+
+export const setPlaylist = (playlist) => dispatch => dispatch(actionPlaylistSet(playlist))
+export const setIndex = (index) => dispatch => dispatch(actionSetPlaylistIndex(index))
+
 export const setTrack = (track, playlist) =>
     dispatch => {
         audio.src = backendURL + '/' + track.url
         dispatch(actionTrackSet(track, audio, playlist))
     }
 
-export const nextTrack = (currentTrackIndex, playlist) =>
-    dispatch => {
-        if (currentTrackIndex < playlist.length - 1) {
-            dispatch(setTrack(playlist[currentTrackIndex + 1], playlist))
-            dispatch(playTrack())
-        } else if (currentTrackIndex === playlist.length - 1) {
-            dispatch(setTrack(playlist[0], playlist))
-            dispatch(playTrack())
-        }
-    }
-
 export const switchTrack = (isForward, currentTrackIndex, playlist) =>
     dispatch => {
         if (isForward ? currentTrackIndex < playlist.length - 1 : currentTrackIndex > 0) {
@@ -165,7 +160,7 @@ export const actionGetUserPlaylists = () => {
     )
 }
 
-export const actionGetPlaylistById = (_id/*='5fe35e5ce926687ee86b0a4f'*/) =>
+export const actionGetPlaylistById = (_id) =>
     actionPromise('playlistTracks', gql(`
         query playlistById($playlistId: String!) {
             PlaylistFind(query: $playlistId) {
@@ -182,7 +177,6 @@ export const actionGetPlaylistById = (_id/*='5fe35e5ce926687ee86b0a4f'*/) =>
 
 export const actionGetUserTracks = () => {
     let _id = jwtDecode(localStorage.authToken).sub.id
-    //let _id = '5fe35e1ce926687ee86b0a3f' //newUserId
     return (
         actionPromise('userTracks', gql(`
             query getUserTracks($ownerId: String!) {
@@ -223,19 +217,20 @@ export const actionLoadFile = (file, type) => {
     )
 }
 
-export const actionUpdatePlaylist = (playlistId, updPlaylist) => {
-    console.log('UPDATING', playlistId, updPlaylist)
-    return (
-        actionPromise('trackToPlaylist', gql(`
+export const actionUpdatePlaylist = (playlistId, updPlaylist) =>
+    async dispatch => {
+        await dispatch(actionPromise('trackToPlaylist', gql(`
             mutation($playlistId: ID, $newTracks: [TrackInput]) {
                 PlaylistUpsert(playlist:{ _id: $playlistId, tracks: $newTracks}) {
                 _id, name, tracks { _id, originalFileName, }
                 }
             }
             `, { playlistId: playlistId, newTracks: updPlaylist }))
+        )
+        await dispatch(actionGetPlaylistById(playlistId))
+    }
+
 
-    )
-}
 export const actionUploadUserTrack = (file, playlistId) =>
     async (dispatch, getState) => {
         await dispatch(actionLoadFile(file, 'track'))
@@ -251,10 +246,11 @@ export const actionUploadUserTrack = (file, playlistId) =>
                 //console.log('id pashet', oldPlaylist)
                 oldPlaylist.forEach(track => updPlaylist.push({ _id: track._id }))
             }
-            updPlaylist.push({ _id: getState().promise.loadFile.payload?._id })
+            updPlaylist.unshift({ _id: getState().promise.loadFile.payload?._id })
             console.log('UPDATED PLST', updPlaylist)
 
-            await dispatch(actionUpdatePlaylist(playlistId, updPlaylist.reverse()))
+            await dispatch(actionUpdatePlaylist(playlistId, updPlaylist))
+            //await dispatch(actionUpdatePlaylist(playlistId, updPlaylist.reverse()))
             dispatch(actionGetPlaylistById(playlistId))
         }
     }

src/components/Page/index.js

@@ -7,30 +7,39 @@ import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 
 
-const Track = ({ track, playlist, player, setTrack, playTrack, pauseTrack }) => {
-  let [_player, setPlayer] = useState(player)
+const Track = ({ track, playlist, player, setTrack, playTrack, pauseTrack, setPlaylist, setIndex }) => {
+  let [_player, setPlayer] = useState()
   let [isPlay, setPlay] = useState(true)
+  //let [_playlist, _setPlaylist] = useState(playlist)
 
+  useEffect(() => setPlayer(player), [player])
   useEffect(() => {
-    setPlayer(player)
-  }, [player])
+    if(playlist?._id === player?.playlist?._id) {
+      console.log(playlist?._id, player?.playlist?._id)
+      if(_player?.track && _player?.playlist) setIndex(_player?.playlist?.indexOf(_player?.track))
+      setPlaylist(playlist)
+      console.log('index', _player?.playlistIndex)
+
+    }
+    console.log('changed', playlist)
+  }, [playlist, setPlaylist, setIndex])
 
   return (
     <li style={{ border: '1px solid black', display: 'flex', alignItems: 'center' }}>
-      <div style={{ marginRight: '2%', padding:'2%' }}>
-    
+      <div style={{ marginRight: '2%', padding: '2%' }}>
+
         {isPlay && _player?.isPlaying && _player.track?._id === track._id ?
-          <button style={{fontSize:'3vh'}} onClick={()=> {pauseTrack(); setPlay(false)}}>{`\u23F8`}</button> :
-          <button 
-            style={{fontSize:'3vh'}}
-            onClick={()=> {
-              if(track?._id !== _player?.track?._id) setTrack(track, playlist)
+          <button style={{ fontSize: '3vh' }} onClick={() => { pauseTrack(); setPlay(false) }}>{`\u23F8`}</button> :
+          <button
+            style={{ fontSize: '3vh' }}
+            onClick={() => {
+              if (track?._id !== _player?.track?._id) setTrack(track, playlist)
               playTrack()
               setPlay(true)
             }}
           >{`\u23F5`}</button>
         }
-        
+
       </div>
       <div style={{ textAlign: 'left' }}>
         <h5>{track.id3.artist || 'Artist: unknown'}</h5>
@@ -43,13 +52,15 @@ const Track = ({ track, playlist, player, setTrack, playTrack, pauseTrack }) =>
 const TrackConnect = connect(
   state => ({
     player: state.player || {},
-    //playlist: state.playTrack?.payload[0] || {}
-  }), 
+  }),
   {
     setTrack: action.setTrack,
     pauseTrack: action.pauseTrack,
-    playTrack: action.playTrack
-  })(Track)
+    playTrack: action.playTrack,
+    setPlaylist: action.setPlaylist,
+    setIndex: action.setIndex
+  }
+)(Track)
 
 const SortableItem = sortableElement(TrackConnect);
 const SortableContainer = sortableContainer(({ children }) => { return <ul>{children}</ul> });
@@ -67,7 +78,7 @@ const Playlist = ({ playlist, updPlaylist }) => {
     <>
       <h2>{playlist[0]?.name || 'Playlist'}</h2>
       <SortableContainer onSortEnd={onSortEnd}>
-        {(_tracks || []).map((track, index) => <SortableItem index={index} track={track} playlist={playlist[0]?.tracks}/>)}
+        {(_tracks || []).map((track, index) => <SortableItem index={index} track={track} playlist={playlist[0]?.tracks} />)}
       </SortableContainer>
     </>
   )
@@ -89,9 +100,9 @@ const PlaylistTrackDropzone = ({ playlist, uploadTrack }) => {
   }, [uploadTrack, playlistId])
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
   return (
-    <div 
-      {...getRootProps()} 
-      style={{height:'fit-content', border: `${isDragActive ? '1px solid mediumseagreen' : '1px solid black'}`}}
+    <div
+      {...getRootProps()}
+      style={{ height: 'fit-content', border: `${isDragActive ? '1px solid mediumseagreen' : '1px solid black'}` }}
     >
       {isDragActive ? <small>...drag here</small> : <small>to upload drag track here</small>}
       <PlaylistConnect />
@@ -115,11 +126,10 @@ const UserTracks = ({ user, tracks }) => {
   return (
     <>
       <h2>{user.login || 'My'} tracks:</h2>
-      <ul>{(tracksRev || []).map(track => <TrackConnect track={track} playlist={tracksRev}/>)}</ul>
+      <ul>{(tracksRev || []).map(track => <TrackConnect track={track} playlist={tracksRev} />)}</ul>
     </>
   )
 }
-
 const UserTracksConnect = connect(state => ({
   tracks: state.promise.userTracks?.payload || [],
   user: state.promise.userData?.payload || {}
@@ -132,9 +142,9 @@ const UserTracksDropzone = ({ onLoad }) => {
   }, [onLoad])
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
   return (
-    <div 
-      {...getRootProps()} 
-      style={{ height:'fit-content', border: `${isDragActive ? '1px solid mediumseagreen' : '1px solid black'}`}}
+    <div
+      {...getRootProps()}
+      style={{ height: 'fit-content', border: `${isDragActive ? '1px solid mediumseagreen' : '1px solid black'}` }}
     >
       {isDragActive ? <small>...drag here</small> : <small>to upload drag track here</small>}
       <UserTracksConnect />

src/components/Playerbar.js

@@ -39,7 +39,8 @@ const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume
             {_player ? (_player.track?.id3?.artist && _player.track?.id3?.title ?
                 <small>{_player.track?.id3?.artist} - {_player.track?.id3?.title}</small> :
                 <small>{_player.track?.originalFileName}</small>) : ''}
-
+            <br></br>
+            <small>{_player?.playlistIndex}</small>
         </footer>
     )
 }

src/reducers/index.js

@@ -1,4 +1,3 @@
-import { setTrack } from '../actions'
 import { jwtDecode } from '../App'
 
 export function authReducer(state, { type, token }) {
@@ -11,7 +10,6 @@ export function authReducer(state, { type, token }) {
         }
     }
     if (type === 'AUTH_LOGIN') {
-        //console.log('TOXEN', jwtDecode(token))
         let auth = jwtDecode(token)
         if (auth) {
             localStorage.authToken = token
@@ -35,16 +33,10 @@ export function promiseReducer(state = {}, { type, name, status, payload, error
     return state
 }
 
-export function playerReducer(state, { type, track, playlist, duration, currentTime, volume }) {
-    if (!state || type === 'EJECT_TRACK') {
-        return {}
-    }
-    if (type === 'PLAY_TRACK') {
-        return { ...state, 'isPlaying': true }
-    }
-    if (type === 'PAUSE_TRACK') {
-        return { ...state, 'isPlaying': false, 'currentTime': currentTime }
-    }
+export function playerReducer(state, { type, track, playlist, duration, currentTime, volume, playlistIndex }) {
+    if (!state || type === 'EJECT_TRACK') return {}
+    if (type === 'PLAY_TRACK') return { ...state, 'isPlaying': true }
+    if (type === 'PAUSE_TRACK') return { ...state, 'isPlaying': false, 'currentTime': currentTime }
     if (type === 'SET_CURRTIME') {
         console.log('set_currtime')
         return { ...state, 'currentTime': currentTime }
@@ -53,11 +45,13 @@ export function playerReducer(state, { type, track, playlist, duration, currentT
         console.log('SET_DURATION')
         return { ...state, 'duration': duration }
     }
-    if (type === 'SET_VOLUME') {
-        return { ...state, 'volume': volume }
+    if (type === 'SET_VOLUME') return { ...state, 'volume': volume }
+    if (type === 'SET_PLAYLIST') {
+        return { ...state, 'playlist': playlist}
     }
+    if (type === 'SET_INDEX') { return { ...state, 'playlistIndex': playlistIndex} }
+
     if (type === 'SET_TRACK') {
-        console.log('setTrack')
         return {
             isPlaying: false,
             track: track,