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;
|
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.
|
* An auto-loading buffer of recording's packets.
|
||||||
*/
|
*/
|
||||||
|
|
@ -488,7 +495,14 @@
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return(
|
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.zoom = this.zoom.bind(this);
|
||||||
this.fastForwardToTS = this.fastForwardToTS.bind(this);
|
this.fastForwardToTS = this.fastForwardToTS.bind(this);
|
||||||
this.sendInput = this.sendInput.bind(this);
|
this.sendInput = this.sendInput.bind(this);
|
||||||
|
this.clearInputPlayer = this.clearInputPlayer.bind(this);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
cols: 80,
|
cols: 80,
|
||||||
|
|
@ -807,7 +822,12 @@
|
||||||
this.setState({speedExp: 0});
|
this.setState({speedExp: 0});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
clearInputPlayer() {
|
||||||
|
this.setState({input: null});
|
||||||
|
}
|
||||||
|
|
||||||
rewindToStart() {
|
rewindToStart() {
|
||||||
|
this.clearInputPlayer();
|
||||||
this.reset();
|
this.reset();
|
||||||
this.sync();
|
this.sync();
|
||||||
}
|
}
|
||||||
|
|
@ -955,6 +975,9 @@
|
||||||
this.speed = Math.pow(2, this.state.speedExp);
|
this.speed = Math.pow(2, this.state.speedExp);
|
||||||
this.sync();
|
this.sync();
|
||||||
}
|
}
|
||||||
|
if (this.state.input != prevState.input) {
|
||||||
|
scrollToBottom("input-textarea");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -1017,75 +1040,79 @@
|
||||||
|
|
||||||
// ensure react never reuses this div by keying it with the terminal widget
|
// ensure react never reuses this div by keying it with the terminal widget
|
||||||
return (
|
return (
|
||||||
<div>
|
<div id="recording-wrap">
|
||||||
<div ref="wrapper" className="panel panel-default">
|
<div id="input-player-wrap" className="col-md-3">
|
||||||
<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>
|
|
||||||
<InputPlayer input={this.state.input} />
|
<InputPlayer input={this.state.input} />
|
||||||
</div>
|
</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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -377,8 +377,26 @@ table.listing-ct > thead th:last-child, tr.listing-ct-item td:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#recording-wrap {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-textarea {
|
||||||
|
width: 100%;
|
||||||
|
heigth: 100%;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-player-wrap {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.logs-view-log-time {
|
.logs-view-log-time {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#input-player textarea{
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -495,7 +495,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-md-6">
|
<div className="col-md-3">
|
||||||
<div className="panel panel-default">
|
<div className="panel panel-default">
|
||||||
<div className="panel-heading">
|
<div className="panel-heading">
|
||||||
<span>{_("Recording")}</span>
|
<span>{_("Recording")}</span>
|
||||||
|
|
@ -539,9 +539,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6 player-wrap">
|
{player}
|
||||||
{player}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue