player bar made. Bug with playlists navigation if order changes to be fixed

src/actions/index.js

@@ -12,13 +12,9 @@ const actionTrackSet = (track, audio, playlist) =>
     volume: audio.volume
 })
 
-const actionTrackSetDuration = (time) => {
-    return ({ type: 'SET_DURATION', duration: time })
-}
+const actionTrackSetDuration = (time) => ({ type: 'SET_DURATION', duration: time })
 
-const actionTrackSetCurrTime = (time) => {
-    return ({ type: 'SET_CURRTIME', currentTime: time })
-}
+const actionTrackSetCurrTime = (time) => ({ type: 'SET_CURRTIME', currentTime: time })
 
 const actionTrackSetVolume = (value) => ({ type: 'SET_VOLUME', volume: value })
 const actionTrackPlay = () => ({ type: 'PLAY_TRACK' })
@@ -38,25 +34,25 @@ export const setTrack = (track, playlist) =>
 
 export const switchTrack = (isForward, currentTrackIndex, playlist) =>
     dispatch => {
-        if (isForward ? currentTrackIndex < playlist.length - 1 : currentTrackIndex > 0) {
-            dispatch(setTrack(playlist[currentTrackIndex + (isForward ? 1 : -1)], playlist))
-            dispatch(playTrack())
+        let playlistLength = playlist.constructor.name ==='Array'? playlist.length - 1 : playlist.tracks.length - 1
+        let tracks = playlist.constructor.name ==='Array'? playlist : playlist.tracks
+
+        if (isForward ? currentTrackIndex < playlistLength : currentTrackIndex > 0) {
+            dispatch(setTrack(tracks[currentTrackIndex + (isForward ? 1 : -1)], playlist))
         } else if (currentTrackIndex === (isForward ? playlist.length - 1 : 0)) {
-            dispatch(setTrack(playlist[isForward ? 0 : playlist.length - 1], playlist))
-            dispatch(playTrack())
+            dispatch(setTrack(tracks[isForward ? 0 : playlist.length - 1], playlist))
         }
+        dispatch(playTrack())
     }
 
 export const playTrack = () =>
     dispatch => {
-        console.log('NOW PLAYIN')
         dispatch(actionTrackPlay())
         audio.play()
     }
 
 export const pauseTrack = () =>
     dispatch => {
-        console.log('NOW PAUSE')
         dispatch(actionTrackPause(audio.currentTime))
         audio.pause()
     }
@@ -67,7 +63,15 @@ export const setTrackVolume = (volume) =>
         dispatch(actionTrackSetVolume(volume))
     }
 
-audio.addEventListener('ended', (e) => console.log('TRACK ended', e.target.src))
+export const setNewTrackCurrentTime = (time) =>
+    (dispatch, getState) => {
+        audio.pause()
+        audio.currentTime = time
+        getState().player.isPlaying? audio.play() : audio.pause()
+        dispatch(actionTrackSetCurrTime(time))
+    }
+
+audio.onended = () => store.dispatch(switchTrack(true, store.getState().player.playlistIndex, store.getState().player.playlist))
 audio.ondurationchange = (e) =>  store.dispatch(actionTrackSetDuration(e.target.duration))
 audio.ontimeupdate = (e) => store.dispatch(actionTrackSetCurrTime(e.target.currentTime))
 

src/components/Page/index.js

@@ -76,7 +76,6 @@ 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(_player?.playlist, _playlist)
     if(_player?.playlist?._id === _playlist?._id) {
       console.log('sovpadaet')
       let newObj = {..._player.playlist, 'tracks': newArr}

src/components/Playerbar.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux"
 import * as action from "../actions"
 
 
-const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume }) => {
+const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume, setCurrentTime }) => {
     let [_player, setPlayer] = useState()
 
     useEffect(() => {
@@ -11,49 +11,56 @@ const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume
     }, [player, _player])
 
     return (
-        <footer style={{ display: `${_player?.track ? 'block' : 'none'}` }}>
-            <div>
-                <button
-                    style={{ fontSize: '2.5vh' }}
-                    onClick={() => 
-                        switchTrack(
-                            false, _player?.playlistIndex, 
-                            _player?.playlist.constructor.name === 'Array'?
-                                _player?.playlist: _player?.playlist?.tracks
-                        )
-                    }
-                >
-                    {_player?.playlistIndex === 0 ? `\u23F4` : `\u23EE`}
-                </button>
+        <>
+            {_player?.track ?  
+                <footer style={{display: `${_player?.track ? 'block' : 'none'}`, width: '95%', margin:'0 auto'}}>
+                    <input
+                        style={{width:'100%'}}
+                        type="range" min="0" max={_player?.duration} step="any"
+                        value={_player?.currentTime}
+                        onChange={(e) => setCurrentTime(e.target.value)}
+                    />
+                    <div style={{display:"flex", justifyContent:"space-between", width:'95%', margin:'0 auto'}}>
+                        <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>
+                        {_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'}}>
+                            {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>
+                    </div>
+                    <div style={{marginTop:'0.5%'}}>
+                        <button
+                            style={{ fontSize: '2vh' }}
+                            onClick={() => switchTrack(false, _player?.playlistIndex, _player?.playlist)}
+                        >
+                            {_player?.playlistIndex === 0 ? `\u23F4` : `\u23EE`}
+                        </button>
 
-                {_player?.isPlaying ?
-                    <button style={{ fontSize: '2.5vh' }} onClick={() => pauseTrack()}>{`\u23F8`}</button> :
-                    <button style={{ fontSize: '2.5vh' }} onClick={() => playTrack()}>{`\u23F5`}</button>
-                }
+                        {_player?.isPlaying ?
+                            <button style={{ fontSize: '2vh' }} onClick={() => pauseTrack()}>{`\u23F8`}</button> :
+                            <button style={{ fontSize: '2vh' }} onClick={() => playTrack()}>{`\u23F5`}</button>
+                        }
 
-                <button
-                    style={{ fontSize: '2.5vh' }}
-                    onClick={() => 
-                        switchTrack(
-                            true, _player?.playlistIndex, 
-                            _player?.playlist.constructor.name === 'Array'?
-                                _player?.playlist: _player?.playlist?.tracks
-                        )
-                    }
-                >
-                    {_player?.playlistIndex === _player?.playlist?.length - 1 ? `\u23F5` : `\u23ED`}
-                </button>
-                <input
-                    type="range" min="0" max="1" step="any"
-                    onChange={(e) => setTrackVolume(e.target.value)} />
-            </div>
-
-            {_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>
+                        <button
+                            style={{ fontSize: '2vh' }}
+                            onClick={() => switchTrack(true, _player?.playlistIndex, _player?.playlist)}
+                        >
+                            {_player?.playlistIndex === _player?.playlist?.length - 1 ? `\u23F5` : `\u23ED`}
+                        </button>
+                        <input style={{marginLeft: '1%'}} type="range" min="0" max="1" step="any" onChange={(e) => setTrackVolume(e.target.value)} />
+                    </div>
+                    <small>{_player?.playlistIndex}</small>
+                </footer> : <div style={{width:'inherit', height:'inherit', padding:'2em'}}>C'mon, Push the play button on some track :)</div>}
+        </>
     )
 }
 
@@ -63,6 +70,7 @@ export const PlayerbarConnect = connect(
         playTrack: action.playTrack,
         pauseTrack: action.pauseTrack,
         switchTrack: action.switchTrack,
-        setTrackVolume: action.setTrackVolume
+        setTrackVolume: action.setTrackVolume,
+        setCurrentTime: action.setNewTrackCurrentTime
     }
 )(Playerbar)

src/reducers/index.js

@@ -36,7 +36,7 @@ export function promiseReducer(state = {}, { type, name, status, payload, error
 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 === 'PAUSE_TRACK') return { ...state, 'isPlaying': false }
     if (type === 'SET_CURRTIME') return { ...state, 'currentTime': currentTime }
     if (type === 'SET_DURATION') return { ...state, 'duration': duration }
     if (type === 'SET_VOLUME') return { ...state, 'volume': volume }
@@ -51,10 +51,9 @@ export function playerReducer(state, { type, track, playlist, duration, currentT
             isPlaying: false,
             track: track,
             playlist: playlist,
-            duration: duration, //общая длительность трека
-            currentTime: currentTime,// текущая позиция в треке
+            duration: duration,
+            currentTime: currentTime,
             volume: volume,
-            //playlistIndex: playlist.indexOf(track)
             playlistIndex: 
                 playlist.constructor.name === 'Array'? playlist.indexOf(track) : playlist.tracks.indexOf(track)
         }