32 lines
1.2 KiB
JavaScript
32 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
|
|
function SeekBar({ played, duration,setPlayed }) {
|
|
|
|
const secToHHMMSS = (secs) => {
|
|
|
|
const pad = (num) => {
|
|
return ("0" + num).slice(-2);
|
|
}
|
|
var minutes = Math.floor(secs / 60);
|
|
secs = secs % 60;
|
|
var hours = Math.floor(minutes / 60)
|
|
minutes = minutes % 60;
|
|
if(hours === 0) {return `${pad(minutes)}:${pad(secs)}`;}
|
|
else if(hours !== 0){return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;}
|
|
}
|
|
var newPlayed = secToHHMMSS(Math.round(played));
|
|
var newDuration = secToHHMMSS(duration);
|
|
return (
|
|
<div style={{ marginBottom: '10vh' }}>
|
|
|
|
<input style={{ width: '90%', margin: '0 5% 0 5%', height: '2px',borderRadius:'10%' }} className="slider"
|
|
type='range' min={0} value={Math.round(played)} max={duration}
|
|
onChange={e => setPlayed(e.target.value)}/>
|
|
|
|
<span style={{ float: 'left', marginLeft: '5%', marginTop:'3%' }}>{newPlayed}</span>
|
|
<span style={{ float: 'right', marginRight: '5%', marginTop:'3%' }}>{newDuration}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SeekBar |