prev next track

src/components/Tracks.js

@@ -1,30 +1,32 @@
 import {connect}   from 'react-redux';
-import {actionFullSetTrack, actionFullPlay, actionFullSetPlaylist} from '../store/playerReducer';
+import {actionFullSetTrack, actionFullPlay, actionFullSetPlaylist, actionFullSetTrackCount} from '../store/playerReducer';
 import { actionNowPlaylist} from '../store/promiseReducer';
 import { store } from '../store/store';
 
-let i = 1;
+
 export let audio = new Audio();
 
-const Track = ({track: {name, file, id3, id , pivot, number} = {}, playlist={}, plstnow={} },  key) => 
+const Track = ({track = {}, trackone={}, playlist={}, plstnow={}},  key) => 
 <tr>
-    <th scope="row">{i++}</th>
+    <th scope="row">{'#'}</th>
     <td>          
         <div onClick={async () => {
-            store.dispatch(actionFullSetTrack({name, file, id3, id, pivot, number}));
+            store.dispatch(actionFullSetPlaylist(playlist.tracks));
+            //console.log(playlist.tracks.indexOf(track))
+            store.dispatch(actionFullSetTrack(playlist.tracks[playlist.tracks.indexOf(track)]));
             store.dispatch(actionNowPlaylist(store.getState().player?.track?.pivot?.playlist_id));
             //store.dispatch(actionFullSetPlaylist(playlist));
             //store.dispatch(actionFullSetPlaylist(plstnow?.payload?.tracks));
             //store.dispatch(actionFullSetTrack(store.getState().player?.playlist[0]));
             store.dispatch(actionFullPlay());
         }}>
-            {name}
+            {track.name}
         </div>
     </td>
     <td>
-        <span>{id3.artist}</span>
+        <span>{track.id3.artist}</span>
     </td>
-    <td>{id3.getAlbum}</td>
+    <td>{track.id3.getAlbum}</td>
 </tr>
 
 
@@ -39,10 +41,16 @@ const TracksAll = ({tracks=[]}) =>
         </tr>
 </thead>
     <tbody>
-        {tracks.map((tracks, i) => <Track key={i} track={tracks}/>)}
+        {tracks.map((tracks, i) => <CTrack key={i} track={tracks}/>)}
     </tbody>
 </table>
 
 export const СAllTracks = connect(state => ({playlist: state.promise.plstById?.payload || {},
                                  tracks: state.promise?.plstById?.payload?.tracks || [],
-                                 plstnow: state.promise?.plstnow || {}} ), )(TracksAll);
+                                 trackone: state.player?.playlist || [],
+                                 plstnow: state.promise?.plstnow || {}} ), )(TracksAll);
+
+export const CTrack = connect(state => ({playlist: state.promise.plstById?.payload || {},
+    tracks: state.promise?.plstById?.payload?.tracks || [],
+    trackone: state.player?.playlist || [],
+    plstnow: state.promise?.plstnow || {}} ), )(Track);

src/components/playing.js

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, {useState, useEffect} from 'react';
 import {faVolumeDown, faVolumeUp, faRandom, faStepBackward, faStopCircle, faStepForward, faPlayCircle, faRepeat} from '@fortawesome/free-solid-svg-icons'
 import { store } from '../store/store';
-import {actionFullGetDuration, actionFullSetTrack, actionFullPlay, actionFullPause, actionFullSetVolume, actionFullSetCurrentTime } from '../store/playerReducer';
+import {actionFullGetDuration, actionFullSetTrack, actionFullPlay, actionFullPause, actionFullSetVolume, actionPrevTrack, actionNextTrack} from '../store/playerReducer';
 import {Provider, connect}   from 'react-redux';
 import { audio } from './Tracks';
 
@@ -71,7 +71,7 @@ return(
                 <FontAwesomeIcon icon={faRandom} className='fa-2x'/>
             </div>
             <div className="prev-track" 
-            // onClick={prevTrack()}
+                onClick={ () => store.dispatch(actionPrevTrack(props.track))}
             > 
                 <FontAwesomeIcon icon={faStepBackward} className='fa-2x'/>
                 
@@ -88,7 +88,12 @@ return(
                 <FontAwesomeIcon icon={(!props.isPlaying) ? faPlayCircle : faStopCircle} className='fa-5x' />
             </div>
             <div className="next-track"
-            //  onClick={nextTrack()}
+              onClick={() => {
+                console.log(props.track);
+                store.dispatch(actionNextTrack(props.track));
+
+                }
+              }
              >
                 <FontAwesomeIcon icon={faStepForward} className='fa-2x'/>
             </div>

src/components/playlistById.js

@@ -5,7 +5,7 @@ import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {faTrashCan} from '@fortawesome/free-solid-svg-icons'
-import { actionFullSetPlaylist, actionFullSetTrack} from '../store/playerReducer';
+import { actionFullSetPlaylist, actionFullSetTrack, actionFullSetTrackCount} from '../store/playerReducer';
 import {connect}   from 'react-redux';
 // import {actionFullSetTrack, actionFullPlay} from '../store/playerReducer';
 import {СAllTracks } from './Tracks'
@@ -87,6 +87,8 @@ export const PlaylistById = ({playlist = {}, tracks={}}) => {
                     onClick={async() => {
                         store.dispatch(actionFullSetPlaylist(playlist.tracks));
                         store.dispatch(actionFullSetTrack(store.getState().player?.playlist[0]));
+                        store.dispatch(actionFullSetTrackCount(0));
+                        //store.dispatch(actionFullSetTrack(0));
                     }}
                     
                     >Play</button></div>

src/store/playerReducer.js

@@ -1,7 +1,7 @@
 import { store } from '../store/store';
 import { audio } from '../components/Tracks';
 
-export const playerReducer = function(state = {}, {type, duration, track, playlist, playlistIndex, currentTime, volume}) {
+export const playerReducer = function(state = {}, {type, duration, track, playlist, playlistIndex, currentTime, volume, trackCount}) {
     if (!state) {
         return {};
     }
@@ -45,6 +45,11 @@ export const playerReducer = function(state = {}, {type, duration, track, playli
             playlist,
             playlistIndex
         }
+    } if (type === 'SET_TRACK_COUNT'){
+        return {
+            ...state,
+            trackCount
+        }
     }
     return state;
 }
@@ -83,6 +88,14 @@ export const actionFullSetTrack = (track) =>
         dispatch(actionFullPlay());
         //dispatch(actionFullSetPlaylist(store.getState().promise?.plstnow?.payload?.tracks))
     }
+const actionSetTrackCount = (trackCount) => ({type:'SET_TRACK_COUNT', trackCount})
+export const actionFullSetTrackCount = (trackCount) =>
+    dispatch => {
+        console.log(trackCount);
+        dispatch(actionSetTrackCount(trackCount));
+        //dispatch(actionFullPlay());
+        //dispatch(actionFullSetPlaylist(store.getState().promise?.plstnow?.payload?.tracks))
+    }
 
 const actionGetDuration = (duration) => ({type:'GET_DURATION', duration})
 export const actionFullGetDuration = (duration) =>
@@ -106,25 +119,41 @@ export const actionFullSetPlaylist = (playlist) =>
         dispatch(actionSetPlaylist(playlist));
     }
 
+
+
 export const actionNextTrack = (track) =>
     async (dispatch, getState) => {
-        const playlist = getState().player?.playlist
+        const playlist = store.getState().player?.playlist
         if (playlist) {
-            const count = playlist.tracks.indexOf(track)
-            if (getState().player.loopType === 1) {
+            console.log(playlist)
+            const count = playlist.indexOf(track)
+            if (getState().player?.loopType === 1) {
                 console.log('repeat')
-                dispatch(actionFullSetTrack(1))
-                setTimeout(() => { dispatch(actionFullSetTrack(playlist.tracks[count])); dispatch(actionFullPlay()) }, 100)
-            }
-            else if (getState().player.loopType === 2 && playlist.tracks.indexOf(getState().player.track) === playlist.tracks.length - 1) {
-                dispatch(actionFullSetTrack(1))
-                setTimeout(() => { dispatch(actionFullSetTrack(playlist.tracks[0])); dispatch(actionFullPlay()) }, 100)
+                //dispatch(actionFullSetTrack(1))
+                //setTimeout(() => { dispatch(actionFullSetTrack(playlist.tracks[count])); dispatch(actionFullPlay()) }, 100)
             }
+            // else if (getState().player.loopType === 2 && playlist.tracks.indexOf(getState().player.track) === playlist.tracks.length - 1) {
+            //     dispatch(actionFullSetTrack(1))
+            //     setTimeout(() => { dispatch(actionFullSetTrack(playlist.tracks[0])); dispatch(actionFullPlay()) }, 100)
+            // }
             else {
-                if (count + 1 < playlist.tracks.length) {
-                    dispatch(actionFullSetTrack(playlist.tracks[count + 1]))
+                console.log('tap tap tap')
+                if (count + 1 < playlist.length) {
+                    dispatch(actionFullSetTrack(playlist[count + 1]))
                     dispatch(actionFullPlay())
                 }
             }
         }
+    }
+
+    export const actionPrevTrack = (track) =>
+    async (dispatch, getState) => {
+        const playlist = getState().player?.playlist
+        if (playlist) {
+            const count = playlist.indexOf(track)
+            if (count > 0) {
+                dispatch(actionFullSetTrack(playlist[count - 1]))
+                dispatch(actionFullPlay())
+            }
+        }
     }