in src/testplayer.js [68:148]
render() {
console.log("reder has been called");
console.log(this.state);
document.body.style = 'background: #262626;';
const { token, showComponent } = this.state;
console.log("tem token?", token)
const { videoURL } = this.state;
if (token === 0) {
console.log("loadding");
return (
<div>Loading...</div>
)
} else{
console.log("tem valor", token);
return (
<div className="App">
<div className="container fluid" style={{backgroundColor: "#262626"}}>
<div className="headerPlayer">
<h1>Video Player (Video.JS for tests)</h1>
</div>
<div className="row">
<div className="col-sm-1"></div>
<div className="col-lg">
<div className="form-group">
<form className="form-URL">
<label className="formLabel">
Video URL (.m3u8):
<input
id="VideoURL"
type="text"
width= "100%"
value={this.state.videoURL}
className="formURL"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
onChange={e => this.setState({ videoURL: e.target.value, showComponent: false})}
/>
</label>
<button type="submit" className="formBot" onClick={this.handleURLset}>Play</button>
</form>
</div>
</div>
</div>
<div className="player-wrapper">
{showComponent && (
<div>
{this.playerShow()}
</div>
)}
</div>
<div className="DebugBOXger">
<div className="DebugBOXtitle">
<a>Info:</a>
</div>
<div className="DebugBOX">
<Table className="DebugTable" variant="dark" responsive="lg" >
<tbody wordBreak='break-all'>
<tr>
<th width={100}>
URL:
</th>
<td>{videoURL}</td>
</tr>
<tr>
<th>Playing:</th>
<td>True</td>
</tr>
<tr>
<th> Token:</th>
<td>{token}</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</div>
);
}
}