69 lines
1.6 KiB
JavaScript
69 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
export default class Time extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
const { countdown } = this.props;
|
|
|
|
this.state = {
|
|
showRemaining: countdown || false,
|
|
};
|
|
|
|
this.handleClick = this.handleClick.bind(this);
|
|
}
|
|
|
|
/**
|
|
* Pretty prints time remaining/elapsed
|
|
*
|
|
* @param {number} position - Track position in milliseconds
|
|
* @param {number} duration - Track duration in milliseconds
|
|
* @returns {string} - Time pretty formatted
|
|
*/
|
|
formatTime(position, duration) {
|
|
const { showRemaining } = this.state;
|
|
const positionInSeconds = showRemaining
|
|
? (duration - position) / 1000
|
|
: position / 1000;
|
|
const hours = Math.floor(positionInSeconds / 3600);
|
|
let min = Math.floor((positionInSeconds % 3600) / 60);
|
|
let sec = Math.floor(positionInSeconds % 60);
|
|
let time = '00:00';
|
|
|
|
min = min >= 10 ? min : `0${min}`;
|
|
sec = sec >= 10 ? sec : `0${sec}`;
|
|
|
|
if (!isNaN(sec)) {
|
|
if (hours) {
|
|
time = `${hours}:${min}:${sec}`;
|
|
} else {
|
|
time = `${min}:${sec}`;
|
|
}
|
|
}
|
|
|
|
return showRemaining ? `-${time}` : time;
|
|
}
|
|
|
|
handleClick() {
|
|
const { showRemaining } = this.state;
|
|
this.setState({ showRemaining: !showRemaining });
|
|
}
|
|
|
|
render() {
|
|
const { position, duration } = this.props;
|
|
|
|
return (
|
|
<span className="ai-track-time" onClick={this.handleClick}>
|
|
{this.formatTime(position, duration)}
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
|
|
Time.propTypes = {
|
|
position: PropTypes.number.isRequired,
|
|
duration: PropTypes.number.isRequired,
|
|
countdown: PropTypes.bool.isRequired,
|
|
};
|