music-player/src/pages/player.js

import play from '../play.svg'
import pause from '../pause.svg'
import next from '../next.svg'
import prev from '../prev.svg'
import {connect} from "react-redux";
import {actionTrackPlay, actionTrackStop,actionTrackVolume,actionTrackCurrentTime,actionNextTrack,actionPreviousTrack} from "../reducers";
import {useEffect, useState} from "react";


export const Player = ({player:{token,volume,duration=0,currentTime=0,isPlaying,playlist={},playlistIndex=0},
                                trackPlay, trackStop,trackVolume,trackCurrentTime,trackNext,trackPrevious}) => {


    let name = playlist[playlistIndex]?.originalFileName || ''


    let minutes = Math.floor(duration / 60);
    let seconds = Math.floor(parseInt((duration % 60) * 100) / 100);

    let minutesLeft = Math.floor(currentTime / 60);
    let secondsLeft = Math.floor(parseInt((currentTime % 60) * 100) / 100);

    return (
        <div className='Player'>


            <div className='player-nav'>

                <div className='player-current-time'>
            <span className='track-timer'>{minutesLeft || 0}:{(secondsLeft < 10?"0"+secondsLeft : secondsLeft) || "00"}</span>
            <input className='currentTime'
                type="range"
                min={0}
                step={0.1}
                max={duration ? duration : `${duration}`}
                onChange={(e) => trackCurrentTime(e.target.value)}
                value={currentTime}/>
            <span className='track-timer'>{minutes || 0}:{(seconds < 10?"0"+seconds : seconds) || "00"}</span>
                </div>


             <div className="vol-buttons">
 <div className='player-buttons'>
            <button onClick={() => trackPrevious()}><img src={prev} alt='prev'/></button>
            {!isPlaying ? (   <button onClick={() => trackPlay()}>
                <img src={play}  alt='play'/></button>) : (     <button onClick={() => trackStop()}>
                <img src={pause}  alt='pause'/></button>)}
            <button onClick={()=>trackNext()}><img src={next}  alt='next'/></button>
 </div>

            <input className='volume'
                type="range"
                min={0}
                step={0.1}
                max={1}
                onChange={(e) => trackVolume(e.target.value)}
                value={volume}/>
            </div>
            </div>

                <h3>{name || ''}</h3>
        </div>
    )
}

export const CPlayer = connect(state => ({player: state.player,token: state.auth.token}),
    {trackPlay: actionTrackPlay,
                     trackStop: actionTrackStop,
                     trackVolume:actionTrackVolume,
                     trackCurrentTime:actionTrackCurrentTime,
                      trackNext:actionNextTrack,
                      trackPrevious:actionPreviousTrack,})(Player)