|
@@ -3,7 +3,7 @@ import { connect } from "react-redux"
|
|
|
import * as action from "../actions"
|
|
|
|
|
|
|
|
|
-const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume }) => {
|
|
|
+const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume, setCurrentTime }) => {
|
|
|
let [_player, setPlayer] = useState()
|
|
|
|
|
|
useEffect(() => {
|
|
@@ -11,49 +11,56 @@ const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume
|
|
|
}, [player, _player])
|
|
|
|
|
|
return (
|
|
|
- <footer style={{ display: `${_player?.track ? 'block' : 'none'}` }}>
|
|
|
- <div>
|
|
|
- <button
|
|
|
- style={{ fontSize: '2.5vh' }}
|
|
|
- onClick={() =>
|
|
|
- switchTrack(
|
|
|
- false, _player?.playlistIndex,
|
|
|
- _player?.playlist.constructor.name === 'Array'?
|
|
|
- _player?.playlist: _player?.playlist?.tracks
|
|
|
- )
|
|
|
- }
|
|
|
- >
|
|
|
- {_player?.playlistIndex === 0 ? `\u23F4` : `\u23EE`}
|
|
|
- </button>
|
|
|
+ <>
|
|
|
+ {_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>
|
|
|
+ {_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>
|
|
|
+ </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: '2.5vh' }} onClick={() => pauseTrack()}>{`\u23F8`}</button> :
|
|
|
- <button style={{ fontSize: '2.5vh' }} onClick={() => playTrack()}>{`\u23F5`}</button>
|
|
|
- }
|
|
|
+ {_player?.isPlaying ?
|
|
|
+ <button style={{ fontSize: '2vh' }} onClick={() => pauseTrack()}>{`\u23F8`}</button> :
|
|
|
+ <button style={{ fontSize: '2vh' }} onClick={() => playTrack()}>{`\u23F5`}</button>
|
|
|
+ }
|
|
|
|
|
|
- <button
|
|
|
- style={{ fontSize: '2.5vh' }}
|
|
|
- onClick={() =>
|
|
|
- switchTrack(
|
|
|
- true, _player?.playlistIndex,
|
|
|
- _player?.playlist.constructor.name === 'Array'?
|
|
|
- _player?.playlist: _player?.playlist?.tracks
|
|
|
- )
|
|
|
- }
|
|
|
- >
|
|
|
- {_player?.playlistIndex === _player?.playlist?.length - 1 ? `\u23F5` : `\u23ED`}
|
|
|
- </button>
|
|
|
- <input
|
|
|
- type="range" min="0" max="1" step="any"
|
|
|
- onChange={(e) => setTrackVolume(e.target.value)} />
|
|
|
- </div>
|
|
|
-
|
|
|
- {_player ? (_player.track?.id3?.artist && _player.track?.id3?.title ?
|
|
|
- <small>{_player.track?.id3?.artist} - {_player.track?.id3?.title}</small> :
|
|
|
- <small>{_player.track?.originalFileName}</small>) : ''}
|
|
|
- <br></br>
|
|
|
- <small>{_player?.playlistIndex}</small>
|
|
|
- </footer>
|
|
|
+ <button
|
|
|
+ style={{ fontSize: '2vh' }}
|
|
|
+ onClick={() => switchTrack(true, _player?.playlistIndex, _player?.playlist)}
|
|
|
+ >
|
|
|
+ {_player?.playlistIndex === _player?.playlist?.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>}
|
|
|
+ </>
|
|
|
)
|
|
|
}
|
|
|
|
|
@@ -63,6 +70,7 @@ export const PlayerbarConnect = connect(
|
|
|
playTrack: action.playTrack,
|
|
|
pauseTrack: action.pauseTrack,
|
|
|
switchTrack: action.switchTrack,
|
|
|
- setTrackVolume: action.setTrackVolume
|
|
|
+ setTrackVolume: action.setTrackVolume,
|
|
|
+ setCurrentTime: action.setNewTrackCurrentTime
|
|
|
}
|
|
|
)(Playerbar)
|