提交 1740263a 编写于 作者: J Jason Park

Reverse speed bar

上级 e385ecdb
...@@ -19,7 +19,7 @@ class Player extends React.Component { ...@@ -19,7 +19,7 @@ class Player extends React.Component {
super(props); super(props);
this.state = { this.state = {
interval: 500, speed: 2,
playing: false, playing: false,
building: false, building: false,
}; };
...@@ -94,7 +94,8 @@ class Player extends React.Component { ...@@ -94,7 +94,8 @@ class Player extends React.Component {
resume(wrap = false) { resume(wrap = false) {
this.pause(); this.pause();
if (this.next() || wrap && this.props.setCursor(1)) { if (this.next() || wrap && this.props.setCursor(1)) {
this.timer = window.setTimeout(() => this.resume(), this.state.interval); const interval = 4000 / Math.pow(Math.E, this.state.speed);
this.timer = window.setTimeout(() => this.resume(), interval);
this.setState({ playing: true }); this.setState({ playing: true });
} }
} }
...@@ -115,8 +116,8 @@ class Player extends React.Component { ...@@ -115,8 +116,8 @@ class Player extends React.Component {
return true; return true;
} }
handleChangeInterval(interval) { handleChangeSpeed(speed) {
this.setState({ interval }); this.setState({ speed });
} }
handleChangeProgress(progress) { handleChangeProgress(progress) {
...@@ -129,7 +130,7 @@ class Player extends React.Component { ...@@ -129,7 +130,7 @@ class Player extends React.Component {
render() { render() {
const { className, file } = this.props; const { className, file } = this.props;
const { chunks, cursor } = this.props.player; const { chunks, cursor } = this.props.player;
const { interval, playing, building } = this.state; const { speed, playing, building } = this.state;
return ( return (
<div className={classes(styles.player, className)}> <div className={classes(styles.player, className)}>
...@@ -148,7 +149,7 @@ class Player extends React.Component { ...@@ -148,7 +149,7 @@ class Player extends React.Component {
onChangeProgress={progress => this.handleChangeProgress(progress)} /> onChangeProgress={progress => this.handleChangeProgress(progress)} />
<Button icon={faChevronRight} reverse primary disabled={!this.isValidCursor(cursor + 1)} <Button icon={faChevronRight} reverse primary disabled={!this.isValidCursor(cursor + 1)}
onClick={() => this.next()} /> onClick={() => this.next()} />
<div className={styles.interval}> <div className={styles.speed}>
Speed Speed
<InputRange <InputRange
classNames={{ classNames={{
...@@ -156,8 +157,8 @@ class Player extends React.Component { ...@@ -156,8 +157,8 @@ class Player extends React.Component {
labelContainer: styles.range_label_container, labelContainer: styles.range_label_container,
slider: styles.range_slider, slider: styles.range_slider,
track: styles.range_track, track: styles.range_track,
}} maxValue={2000} minValue={100} step={100} value={interval} }} minValue={0} maxValue={4} step={.5} value={speed}
onChange={interval => this.handleChangeInterval(interval)} /> onChange={speed => this.handleChangeSpeed(speed)} />
</div> </div>
</div> </div>
); );
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
width: 160px; width: 160px;
} }
.interval { .speed {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 12px; padding: 0 12px;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册
新手
引导
客服 返回
顶部