render()

in source/console/src/App.js [43:75]


  render() {
    const { url, stream, playing } = this.state
  
    return (
      <div className="main">
        <h1>Live Streaming on AWS</h1>
        <p>
          This demo provides a preview player for the HLS, DASH and CMAF CloudFront endpoints created by the <a href="https://aws.amazon.com/solutions/implementations/live-streaming-on-aws/?did=sl_card&trk=sl_card" target="_blank" rel="noopener noreferrer">Live Stream on AWS solution</a>.  
			  </p>

        <div className='player-wrapper'>
        <ReactPlayer
          ref={this.ref}
          className='react-player'
          url={url}
          playing={playing}
          controls
          width='100%'
          height='100%'
        />
        </div>
        
        <ListGroup horizontal>
          <ListGroup.Item><b>{stream}</b></ListGroup.Item>
          <ListGroup.Item className="url"><span>{ url }</span></ListGroup.Item>
        </ListGroup>

        <p>
        <strong>IMPORTANT!</strong> First login to the <a id="live" href={awsExports.mediaLiveConsole} target="_blank" rel="noopener noreferrer">Medialive Console</a> and
         check the live channel is running.
        </p>

        <Button onClick={() => this.load(awsExports.hls_manifest,"HLS")} className="perview" size="sm" variant="success">Preview HLS</Button>