Fix InputPlayer
This commit is contained in:
Kyrylo Gliebov
parent
b7c21ae104
commit
0852de4222
3 changed files with 115 additions and 72 deletions
163
src/player.jsx
163
src/player.jsx
|
|
@ -44,6 +44,13 @@
|
|||
return value;
|
||||
}
|
||||
|
||||
let scrollToBottom = function(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.scrollTop = el.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* An auto-loading buffer of recording's packets.
|
||||
*/
|
||||
|
|
@ -488,7 +495,14 @@
|
|||
|
||||
render() {
|
||||
return(
|
||||
<textarea name="input" id="input" cols="30" rows="10" disabled>{this.props.input}</textarea>
|
||||
<div id="input-player" className="panel panel-default">
|
||||
<div className="panel-heading">
|
||||
<span>Input</span>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<textarea name="input" id="input-textarea" cols="30" rows="10" readonly disabled>{this.props.input}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -520,6 +534,7 @@
|
|||
this.zoom = this.zoom.bind(this);
|
||||
this.fastForwardToTS = this.fastForwardToTS.bind(this);
|
||||
this.sendInput = this.sendInput.bind(this);
|
||||
this.clearInputPlayer = this.clearInputPlayer.bind(this);
|
||||
|
||||
this.state = {
|
||||
cols: 80,
|
||||
|
|
@ -807,7 +822,12 @@
|
|||
this.setState({speedExp: 0});
|
||||
}
|
||||
|
||||
clearInputPlayer() {
|
||||
this.setState({input: null});
|
||||
}
|
||||
|
||||
rewindToStart() {
|
||||
this.clearInputPlayer();
|
||||
this.reset();
|
||||
this.sync();
|
||||
}
|
||||
|
|
@ -955,6 +975,9 @@
|
|||
this.speed = Math.pow(2, this.state.speedExp);
|
||||
this.sync();
|
||||
}
|
||||
if (this.state.input != prevState.input) {
|
||||
scrollToBottom("input-textarea");
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -1017,75 +1040,79 @@
|
|||
|
||||
// ensure react never reuses this div by keying it with the terminal widget
|
||||
return (
|
||||
<div>
|
||||
<div ref="wrapper" className="panel panel-default">
|
||||
<div className="panel-heading">
|
||||
<span>{this.state.title}</span>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<div className={(this.state.drag_pan ? "dragnpan" : "")} style={scrollwrap} ref="scrollwrap">
|
||||
<div ref="term" className="console-ct" key={this.state.term} style={style} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="panel-footer">
|
||||
<button title="Play/Pause - Hotkey: p" type="button" ref="playbtn"
|
||||
className="btn btn-default btn-lg margin-right-btn play-btn"
|
||||
onClick={this.playPauseToggle}>
|
||||
<i className={"fa fa-" + (this.state.paused ? "play" : "pause")}
|
||||
aria-hidden="true" />
|
||||
</button>
|
||||
<button title="Skip Frame - Hotkey: ." type="button"
|
||||
className="btn btn-default btn-lg margin-right-btn"
|
||||
onClick={this.skipFrame}>
|
||||
<i className="fa fa-step-forward" aria-hidden="true" />
|
||||
</button>
|
||||
<button title="Restart Playback - Hotkey: Shift-R" type="button"
|
||||
className="btn btn-default btn-lg" onClick={this.rewindToStart}>
|
||||
<i className="fa fa-fast-backward" aria-hidden="true" />
|
||||
</button>
|
||||
<button title="Fast-forward to end - Hotkey: Shift-G" type="button"
|
||||
className="btn btn-default btn-lg margin-right-btn"
|
||||
onClick={this.fastForwardToEnd}>
|
||||
<i className="fa fa-fast-forward" aria-hidden="true" />
|
||||
</button>
|
||||
<button title="Speed /2 - Hotkey: {" type="button"
|
||||
className="btn btn-default btn-lg" onClick={this.speedDown}>
|
||||
/2
|
||||
</button>
|
||||
<button title="Reset Speed - Hotkey: Backspace" type="button"
|
||||
className="btn btn-default btn-lg" onClick={this.speedReset}>
|
||||
1:1
|
||||
</button>
|
||||
<button title="Speed x2 - Hotkey: }" type="button"
|
||||
className="btn btn-default btn-lg margin-right-btn"
|
||||
onClick={this.speedUp}>
|
||||
x2
|
||||
</button>
|
||||
<span>{speedStr}</span>
|
||||
<span style={to_right}>
|
||||
<button title="Drag'n'Pan" type="button" className="btn btn-default btn-lg"
|
||||
onClick={this.dragPan}>
|
||||
<i className={"fa fa-" + (this.state.drag_pan ? "hand-rock-o" : "hand-paper-o")}
|
||||
aria-hidden="true" /></button>
|
||||
<button title="Zoom In - Hotkey: =" type="button" className="btn btn-default btn-lg"
|
||||
onClick={this.zoomIn} disabled={this.state.term_zoom_max}>
|
||||
<i className="fa fa-search-plus" aria-hidden="true" /></button>
|
||||
<button title="Fit To - Hotkey: Z" type="button" className="btn btn-default btn-lg"
|
||||
onClick={this.fitTo}><i className="fa fa-expand" aria-hidden="true" /></button>
|
||||
<button title="Zoom Out - Hotkey: -" type="button" className="btn btn-default btn-lg"
|
||||
onClick={this.zoomOut} disabled={this.state.term_zoom_min}>
|
||||
<i className="fa fa-search-minus" aria-hidden="true" /></button>
|
||||
</span>
|
||||
<div style={progressbar_style}>
|
||||
<ProgressBar length={this.buf.pos}
|
||||
mark={currentTsPost(this.state.currentTsPost, this.buf.pos)}
|
||||
fastForwardFunc={this.fastForwardToTS} />
|
||||
</div>
|
||||
</div>
|
||||
{error}
|
||||
</div>
|
||||
<div id="recording-wrap">
|
||||
<div id="input-player-wrap" className="col-md-3">
|
||||
<InputPlayer input={this.state.input} />
|
||||
</div>
|
||||
<div className="col-md-6 player-wrap">
|
||||
<div ref="wrapper" className="panel panel-default">
|
||||
<div className="panel-heading">
|
||||
<span>{this.state.title}</span>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<div className={(this.state.drag_pan ? "dragnpan" : "")} style={scrollwrap} ref="scrollwrap">
|
||||
<div ref="term" className="console-ct" key={this.state.term} style={style} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="panel-footer">
|
||||
<button title="Play/Pause - Hotkey: p" type="button" ref="playbtn"
|
||||
className="btn btn-default btn-lg margin-right-btn play-btn"
|
||||
onClick={this.playPauseToggle}>
|
||||
<i className={"fa fa-" + (this.state.paused ? "play" : "pause")}
|
||||
aria-hidden="true" />
|
||||
</button>
|
||||
<button title="Skip Frame - Hotkey: ." type="button"
|
||||
className="btn btn-default btn-lg margin-right-btn"
|
||||
onClick={this.skipFrame}>
|
||||
<i className="fa fa-step-forward" aria-hidden="true" />
|
||||
</button>
|
||||
<button title="Restart Playback - Hotkey: Shift-R" type="button"
|
||||
className="btn btn-default btn-lg" onClick={this.rewindToStart}>
|
||||
<i className="fa fa-fast-backward" aria-hidden="true" />
|
||||
</button>
|
||||
<button title="Fast-forward to end - Hotkey: Shift-G" type="button"
|
||||
className="btn btn-default btn-lg margin-right-btn"
|
||||
onClick={this.fastForwardToEnd}>
|
||||
<i className="fa fa-fast-forward" aria-hidden="true" />
|
||||
</button>
|
||||
<button title="Speed /2 - Hotkey: {" type="button"
|
||||
className="btn btn-default btn-lg" onClick={this.speedDown}>
|
||||
/2
|
||||
</button>
|
||||
<button title="Reset Speed - Hotkey: Backspace" type="button"
|
||||
className="btn btn-default btn-lg" onClick={this.speedReset}>
|
||||
1:1
|
||||
</button>
|
||||
<button title="Speed x2 - Hotkey: }" type="button"
|
||||
className="btn btn-default btn-lg margin-right-btn"
|
||||
onClick={this.speedUp}>
|
||||
x2
|
||||
</button>
|
||||
<span>{speedStr}</span>
|
||||
<span style={to_right}>
|
||||
<button title="Drag'n'Pan" type="button" className="btn btn-default btn-lg"
|
||||
onClick={this.dragPan}>
|
||||
<i className={"fa fa-" + (this.state.drag_pan ? "hand-rock-o" : "hand-paper-o")}
|
||||
aria-hidden="true" /></button>
|
||||
<button title="Zoom In - Hotkey: =" type="button" className="btn btn-default btn-lg"
|
||||
onClick={this.zoomIn} disabled={this.state.term_zoom_max}>
|
||||
<i className="fa fa-search-plus" aria-hidden="true" /></button>
|
||||
<button title="Fit To - Hotkey: Z" type="button" className="btn btn-default btn-lg"
|
||||
onClick={this.fitTo}><i className="fa fa-expand" aria-hidden="true" /></button>
|
||||
<button title="Zoom Out - Hotkey: -" type="button" className="btn btn-default btn-lg"
|
||||
onClick={this.zoomOut} disabled={this.state.term_zoom_min}>
|
||||
<i className="fa fa-search-minus" aria-hidden="true" /></button>
|
||||
</span>
|
||||
<div style={progressbar_style}>
|
||||
<ProgressBar length={this.buf.pos}
|
||||
mark={currentTsPost(this.state.currentTsPost, this.buf.pos)}
|
||||
fastForwardFunc={this.fastForwardToTS} />
|
||||
</div>
|
||||
</div>
|
||||
{error}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue