Ela_Front/src/components/SeekBar.js

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