app/scripts/views/Player.js
/**
   * Renders the player.
   *
   * @return {HTMLElement} The rendered element
   */
Renders the player.
@return {HTMLElement} The rendered element
Renders the player . @return { HTMLElement } The rendered element
render() {
    console.log(`Render Player with url '${this.url}'`);
    const messages = [];
    const start = this.program.startTime;
    const time = `${start.getHours()}:${String(start.getMinutes()).padStart(2, '0')}`;
    const video = wire()`<video style="width: 100%;" ></video>`;
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(this.url);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED,
        function() {
        console.log('Try to play video');
          video.play();
          console.log('should be playing');
      });
    }
    return bind(this.element)`
      ${ video }
      <ul style="max-height:"> 
      ${ messages.map((message) => `<li>${message}</li>`)}
     </ul>
      <div class="mdc-card">
        <section class="mdc-card__primary">
          <h2 class="mdc-card__subtitle">${ time}</h2>
          <h1 class="mdc-card__title mdc-card__title--large">${ this.program.title}</h1>
        </section>
        <section class="mdc-card__supporting-text">${ this.program.description}</section>
      </div>
    `;
  }
render ( ) { console . log ( ` ${ this . url } ` ) ; const messages = [ ] ; const start = this . program . startTime ; const time = ` ${ start . getHours ( ) } ${ String ( start . getMinutes ( ) ) . padStart ( 2 , '0' ) } ` ; const video = wire ( ) ` ` ; if ( Hls . isSupported ( ) ) { const hls = new Hls ( ) ; hls . loadSource ( this . url ) ; hls . attachMedia ( video ) ; hls . on ( Hls . Events . MANIFEST_PARSED , function ( ) { console . log ( 'Try to play video' ) ; video . play ( ) ; console . log ( 'should be playing' ) ; } ) ; } return bind ( this . element ) ` ${ video } ${ messages . map ( ( message ) => ` ${ message } ` ) } ${ time } ${ this . program . title } ${ this . program . description } ` ; }
Renders the player.
Renders the player .