Techognito/starter-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Player refactoring

Browse source
This commit is contained in:
Kyrylo Gliebov 2018-10-02 20:10:18 +02:00
parent 1feb78fab7
commit 5f58af7624
2 changed files with 17 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/player.jsx
View file

@ -480,32 +480,26 @@ let ProgressBar = class extends React.Component {
}; };
return ( return (
<div className="progress" onClick={this.jumpTo}> <div id="progress_bar" className="progress" onClick={this.jumpTo}>
<div className="progress-bar" role="progressbar" style={progress} /> <div className="progress-bar" role="progressbar" style={progress} />
</div> </div>
); );
} }
}; };
let InputPlayer = class extends React.Component { class InputPlayer extends React.Component {
render() { render() {
const input = String(this.props.input).replace(/(?:\r\n|\r|\n)/g, " ");
return ( return (
<div id="input-player" className="panel panel-default"> <textarea name="input" id="input-textarea" cols="30" rows="1" value={input} readOnly disabled />
<div className="panel-heading">
<span>Input</span>
</div>
<div className="panel-body">
<textarea name="input" id="input-textarea" cols="30" rows="10" value={this.props.input} readOnly disabled />
</div>
</div>
); );
} }
}; }
export class Player extends React.Component { export class Player extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleTimeout = this.handleTimeout.bind(this); this.handleTimeout = this.handleTimeout.bind(this);
this.handlePacket = this.handlePacket.bind(this); this.handlePacket = this.handlePacket.bind(this);
this.handleError = this.handleError.bind(this); this.handleError = this.handleError.bind(this);
@ -1042,9 +1036,6 @@ export class Player extends React.Component {
// 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 id="recording-wrap"> <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 className="col-md-6 player-wrap">
<div ref="wrapper" className="panel panel-default"> <div ref="wrapper" className="panel panel-default">
<div className="panel-heading"> <div className="panel-heading">
@ -1109,6 +1100,9 @@ export class Player extends React.Component {
mark={currentTsPost(this.state.currentTsPost, this.buf.pos)} mark={currentTsPost(this.state.currentTsPost, this.buf.pos)}
fastForwardFunc={this.fastForwardToTS} /> fastForwardFunc={this.fastForwardToTS} />
</div> </div>
<div id="input-player-wrap">
<InputPlayer input={this.state.input} />
</div>
</div> </div>
{error} {error}
</div> </div>

19
src/recordings.css
View file

@ -381,22 +381,19 @@ table.listing-ct > thead th:last-child, tr.listing-ct-item td:last-child {
height: 100%; 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{ #input-textarea {
width: 100%;
heigth: 100%;
font-family: monospace;
resize: none; resize: none;
} }
#progress_bar {
margin-bottom: 10px;
}