12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- 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'}}>
- {/* <small style={{margin: '0 10px'}}>
- {Math.floor((_player?.currentTime / 60) % 60) < 10?
- `0` + Math.floor((_player?.currentTime / 60) % 60) : Math.floor((_player?.currentTime / 60) % 60)} :
- {Math.floor(_player?.currentTime % 60) < 10?
- `0`+ Math.floor(_player?.currentTime % 60) : Math.floor(_player?.currentTime % 60)}
- </small> */}
- <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>) : ''}
- {/* <small style={{margin: '0 10px'}}>
- {Math.floor((_player?.duration / 60) % 60) < 10?
- `0` + Math.floor((_player?.duration / 60) % 60) : Math.floor((_player?.duration / 60) % 60)} :
- {Math.floor(_player?.duration % 60) < 10?
- `0`+ Math.floor(_player?.duration % 60) : Math.floor(_player?.duration % 60)}
- </small> */}
- <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)
|