music-player/src/pages/track.js

import play from '../play.svg'
import pause from '../pause.svg'
import {actionTrackPlay,actionTrackStop,actionSetPlaylist} from "../reducers";
import {connect} from "react-redux";


export const Track = ({player:{isPlaying,playlist,playlistIndex}={},
                          playlistP,
                          track={}, trackIndex=0,
                          trackStop,setPlaylist}) => {


    const {originalFileName} = track
    return (
        <div className='Tracks'>
            {!isPlaying || playlist[playlistIndex]._id  !== track._id  ?
                (<button onClick={() => {
                    setPlaylist(playlistP,trackIndex,track);
                }}>
                    <img src={play} alt='play'/>
                </button>) : (<button onClick={() => trackStop()}>
                    <img src={pause} alt='pause'/>
                </button>)}
            <span>{originalFileName}</span>
        </div>
    )
}


export const CTrack = connect(state => ({playlistP: state.promise.playlistById?.payload?.tracks || [], player: state.player}),
    {trackPlay: actionTrackPlay, trackStop: actionTrackStop,setPlaylist:actionSetPlaylist})(Track)