bug with navigation inside of playlist fixed

src/actions/index.js

@@ -36,11 +36,12 @@ export const switchTrack = (isForward, currentTrackIndex, playlist) =>
     dispatch => {
         let playlistLength = playlist.constructor.name ==='Array'? playlist.length - 1 : playlist.tracks.length - 1
         let tracks = playlist.constructor.name ==='Array'? playlist : playlist.tracks
+        console.log('stuff', tracks, playlistLength)
 
         if (isForward ? currentTrackIndex < playlistLength : currentTrackIndex > 0) {
             dispatch(setTrack(tracks[currentTrackIndex + (isForward ? 1 : -1)], playlist))
-        } else if (currentTrackIndex === (isForward ? playlist.length - 1 : 0)) {
-            dispatch(setTrack(tracks[isForward ? 0 : playlist.length - 1], playlist))
+        } else if (currentTrackIndex === (isForward ? playlistLength : 0)) {
+            dispatch(setTrack(tracks[isForward ? 0 : playlistLength], playlist))
         }
         dispatch(playTrack())
     }

src/components/Page/index.js

@@ -76,6 +76,8 @@ const Playlist = ({ player, playlist, setPlaylist, updPlaylist, setIndex }) => {
     let newArr = arrayMoveImmutable(_tracks, oldIndex, newIndex)
     setTracks(newArr)
     updPlaylist(playlist[0]._id, newArr.map(track => ({ _id: track._id })))
+
+    console.log('sovpadaet?', _player?.playlist?._id, _playlist?._id)
     if(_player?.playlist?._id === _playlist?._id) {
       console.log('sovpadaet')
       let newObj = {..._player.playlist, 'tracks': newArr}

src/components/Playerbar.js

@@ -3,6 +3,12 @@ import { connect } from "react-redux"
 import * as action from "../actions"
 
 
+const Timestamp = ({time}) =>
+    <small style={{margin: '0 10px'}}>
+        {Math.floor((time / 60) % 60) < 10? `0` + Math.floor((time / 60) % 60) : Math.floor((time / 60) % 60)} : 
+        {Math.floor(time % 60) < 10?  `0`+ Math.floor(time % 60) : Math.floor(time % 60)}
+    </small>
+
 const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume, setCurrentTime }) => {
     let [_player, setPlayer] = useState()
 
@@ -21,21 +27,23 @@ const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume,
                         onChange={(e) => setCurrentTime(e.target.value)}
                     />
                     <div style={{display:"flex", justifyContent:"space-between", width:'95%', margin:'0 auto'}}>
-                        <small style={{margin: '0 10px'}}>
+                        {/* <small style={{margin: '0 10px'}}>
                             {Math.floor((_player?.currentTime / 60) % 60) < 10? 
                                 `0` + Math.floor((_player?.currentTime / 60) % 60) : Math.floor((_player?.currentTime / 60) % 60)} : 
                             {Math.floor(_player?.currentTime % 60) < 10? 
                                 `0`+ Math.floor(_player?.currentTime % 60) : Math.floor(_player?.currentTime % 60)}
-                        </small>
+                        </small> */}
+                        <Timestamp time={_player?.currentTime} />
                         {_player ? (_player.track?.id3?.artist && _player.track?.id3?.title ?
                             <strong>{_player.track?.id3?.artist} - {_player.track?.id3?.title}</strong> :
                             <strong>{_player.track?.originalFileName}</strong>) : ''}
-                        <small style={{margin: '0 10px'}}>
+                        {/* <small style={{margin: '0 10px'}}>
                             {Math.floor((_player?.duration / 60) % 60) < 10? 
                                 `0` + Math.floor((_player?.duration / 60) % 60) : Math.floor((_player?.duration / 60) % 60)} : 
                             {Math.floor(_player?.duration % 60) < 10? 
                                 `0`+ Math.floor(_player?.duration % 60) : Math.floor(_player?.duration % 60)}
-                        </small>
+                        </small> */}
+                        <Timestamp time={_player?.duration} />
                     </div>
                     <div style={{marginTop:'0.5%'}}>
                         <button
@@ -54,7 +62,8 @@ const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume,
                             style={{ fontSize: '2vh' }}
                             onClick={() => switchTrack(true, _player?.playlistIndex, _player?.playlist)}
                         >
-                            {_player?.playlistIndex === _player?.playlist?.length - 1 ? `\u23F5` : `\u23ED`}
+                            {_player?.playlistIndex === (_player?.playlist?.constructor.name === 'Array'? _player?.playlist?.length - 1 : _player?.playlist?.tracks.length - 1) ? 
+                                `\u23F5` : `\u23ED`}
                         </button>
                         <input style={{marginLeft: '1%'}} type="range" min="0" max="1" step="any" onChange={(e) => setTrackVolume(e.target.value)} />
                     </div>