render()

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>
      );
    }
  }