player-project/src/components/Playerbar.js

import { useEffect, useState } from "react"
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()

    useEffect(() => {
        setPlayer(player)
    }, [player, _player])

    return (
        <>
            {_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'}}>
                        <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>) : ''}
                        <Timestamp time={_player?.duration} />
                    </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: '2vh' }} onClick={() => pauseTrack()}>{`\u23F8`}</button> :
                            <button style={{ fontSize: '2vh' }} onClick={() => playTrack()}>{`\u23F5`}</button>
                        }

                        <button
                            style={{ fontSize: '2vh' }}
                            onClick={() => switchTrack(true, _player?.playlistIndex, _player?.playlist)}
                        >
                            {_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>
                    <small>{_player?.playlistIndex}</small>
                </footer> : <div style={{width:'inherit', height:'inherit', padding:'2em'}}>C'mon, Push the play button on some track :)</div>}
        </>
    )
}

export const PlayerbarConnect = connect(
    state => ({ player: state.player || {} }),
    {
        playTrack: action.playTrack,
        pauseTrack: action.pauseTrack,
        switchTrack: action.switchTrack,
        setTrackVolume: action.setTrackVolume,
        setCurrentTime: action.setNewTrackCurrentTime
    }
)(Playerbar)