React-player: HLS.JS Events

[MDrooker]

Hey There-
Is there a way to get a handle to the hlsjs events that get fired when playing a M3U8?

We are looking to get the #EXT-X-PROGRAM-DATE-TIME item from the playlist. And seem to be able to get them from the "FRAG_LOADED" event.

Having a hard time seeing where to get them from the-

```javascript
const hlsInstance = this.player.getInternalPlayer();

thanks
MJD

[cookpete]

Hey @MDrooker, you’re almost there..

I would wait for onReady, then use getInternalPlayer and manually attach to the events:

class App extends Component {
  onPlayerReady = () => {
    const hlsInstance = this.player.getInternalPlayer()
    // Note that we can assume we have the `Hls` global here
    // as the player should be ready at this point
    hlsInstance.on(window.Hls.Events.FRAG_LOADED, data => {
      console.log('FRAG_LOADED', data))
    })
  }
  ref = player => {
    this.player = player
  }
  render() {
    return (
      <div>
        <ReactPlayer
          ref={this.ref}
          url='http://example.com/stream.m3u8'
          playing
          controls
          onReady={this.onPlayerReady}
        />
      </div>
    );
  }
}

I've just taken the on event binding syntax from the example in the hls.js readme. Not entirely sure if this will work as is but hopefully points you in the right direction?

[MDrooker]

Thanks @CookPete for the response-
It seems the hlsInstance variable points to the

const hlsInstance = this.player.getInternalPlayer() 

Has the value of -

<video preload="auto" controls="" style="width: 100%; height: 100%;" src="blob:http://localhost:5051/bc703f06-e741-48d9-a9c1-aeaa3d31b710"></video>

So 'on' isnt available.

Could there be some option I am missing?

[cookpete]

Sorry @MDrooker, you're right. Instead of

const hlsInstance = this.player.getInternalPlayer()

it should be

const hlsInstance = this.player.player.player.hls

Yes, player.player.player is ridiculous, but you are going through 3 internal levels of player components ReactPlayer > Player > FilePlayer to get to the instance of FilePlayer which has hls set on it. I should probably make this nicer.

[MDrooker]

@CookPete-
Worked like a champ!
Seeing the events flow.

BTW-
In your sample app-
If you do use this syntax-

onError={(e, data) => this.onError(e, data)}

the data return from HLS gives you the actual error from the library. That may help someone else.

[cookpete]

the data return from HLS gives you the actual error from the library.

Yep, this is deliberate. See https://github.com/CookPete/react-player/pull/355#issuecomment-373363039

Worked like a champ!

Good to know!

[cookpete]

Note that you can now use

const hlsInstance = this.player.getInternalPlayer('hls')

instead of

const hlsInstance = this.player.player.player.hls