46 lines
1.3 KiB
JavaScript
Executable File
46 lines
1.3 KiB
JavaScript
Executable File
import React from 'react';
|
|
import { throttle } from '../../util/helpers';
|
|
|
|
export default class VolumeControl extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.handleChange = throttle(this.handleChange.bind(this), 100);
|
|
}
|
|
|
|
handleChange(value) {
|
|
this.props.onVolumeChange(value, this.props.volume);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
className,
|
|
mute,
|
|
volume,
|
|
vertical,
|
|
} = this.props;
|
|
|
|
let sliderClassName = 'slider slider--volume';
|
|
if (mute) sliderClassName += ' slider--muted';
|
|
|
|
return (
|
|
<div className={`slider__wrapper slider__wrapper--${vertical ? 'vertical' : 'horiztonal'} ${className}`}>
|
|
<div className={sliderClassName}>
|
|
<input
|
|
className="slider__input"
|
|
type="range"
|
|
min="0"
|
|
max="25"
|
|
orient={vertical ? 'vertical' : 'horizontal'}
|
|
value={volume / 4}
|
|
onChange={(e) => this.handleChange(parseInt(e.target.value) * 4)}
|
|
/>
|
|
<div className="slider__track">
|
|
<div className="slider__track__progress" style={vertical ? { height: `${volume}%` } : { width: `${volume}%` }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|