HLS.js + React <MediaLiveButton /> is never live (always grey)

[brandonhub]

Hi MediaChrome team!

I'm building a player with HLS.js + MediaChrome and seem to have found a bug with the react<MediaLiveButton />. It should be red for all live stream, but when using HLS.js, the <media-controller> seems to always be set to mediastreamtype to on-demand even for non-VOD content, which I believe is preventing the live indicator from ever going red.

I have reproduced the problem in a code sandbox: https://codesandbox.io/s/mediachrome-hls-js-live-indicator-zw3rrw

This problem does not happen on Safari since Safari is able to play HLS stream natively and HLS.js is never used.

[luwes]

Thanks for reporting!

This can be resolved by adding a hls.js config:

        // Mimic the media element with an Infinity duration for live streams.
        liveDurationInfinity: true

See a fork of your example:
https://codesandbox.io/s/mediachrome-hls-js-live-indicator-forked-hj4zft?file=/src/App.js:456-569

I believe that is needed otherwise it's very difficult to accurately figure out what stream type it is.

There's a few media-controller attributes that are related to this.
See https://www.media-chrome.org/docs/en/components/media-controller#liveedgeoffset

---

Also have a look at https://github.com/muxinc/hls-video-element which adds that config and some other handy logic like preloading and media tracks.