123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- 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)
|