player-project/src/components/Playerbar.js

import { useEffect, useState } from "react"
import { connect } from "react-redux"
import { faPlay, faPause, faForward, faBackward, faFastForward, faFastBackward, faVolumeUp } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as action from "../actions"


const Timestamp = ({ time }) =>
    <small className="timestamp highlightYellow">
        {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 (
        <footer className="playerbar">
            {_player?.track ?
                <div style={{ display: `${_player?.track ? 'block' : 'none'}` }}>
                    <div>
                        <input
                            className="playerbar__range plumline yellowThumb"
                            style={{ width: '95%' }}
                            type="range" min="0" max={_player?.duration || 0} step="any"
                            value={_player?.currentTime}
                            onChange={(e) => setCurrentTime(e.target.value)}
                        />
                    </div>
                    <div className="playerbar__info">
                        <Timestamp className="playerbar" time={_player?.currentTime} />
                        <strong className="highlightYellow">
                            <small className="lightText highlightGreen">{(_player.playlist.name || 'Uploads') + ' : '}</small>
                            {(_player.track?.id3?.artist && _player.track?.id3?.title ?
                                _player.track?.id3?.artist + ' - ' + _player.track?.id3?.title :
                                _player.track?.originalFileName)}
                        </strong>
                        <Timestamp time={_player?.duration} />
                    </div>
                    <div style={{ marginTop: '0.5%' }}>
                        <button onClick={() => switchTrack(false, _player?.playlistIndex, _player?.playlist)}>
                            {_player?.playlistIndex === 0 ? <FontAwesomeIcon icon={faFastBackward} /> :
                                <FontAwesomeIcon icon={faBackward} />}
                        </button>

                        {_player?.isPlaying ?
                            <button onClick={() => pauseTrack()}><FontAwesomeIcon icon={faPause} /></button> :
                            <button onClick={() => playTrack()}><FontAwesomeIcon icon={faPlay} /></button>
                        }

                        <button onClick={() => switchTrack(true, _player?.playlistIndex, _player?.playlist)}>
                            {_player?.playlistIndex === (_player?.playlist?.constructor.name === 'Array' ?
                                _player?.playlist?.length - 1 : _player?.playlist?.tracks.length - 1) ?
                                <FontAwesomeIcon icon={faFastForward} /> :
                                <FontAwesomeIcon icon={faForward} />}
                        </button>
                        <label style={{ marginLeft: '1%' }}>
                            <FontAwesomeIcon icon={faVolumeUp} />
                            <input
                                className="playerbar__range blueline blueThumb"
                                type="range" min="0" max="1" step="any"
                                onChange={(e) => setTrackVolume(e.target.value)} 
                            />
                        </label>
                    </div>
                </div> : <></>}
        </footer>
    )
}

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