Media Browser: HLS stream does not support alternate-audio

Checklist

[X] I have updated to the latest available Home Assistant version.
[X] I have cleared the cache of my browser.
[X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

When trying to render a m3u8 file via the Home Assistant media browser, the browser properly extracts and play the video part of the HLS stream, but not the audio part nor the subtitles when they are not part of the same stream than the video but proposed as alternate-audio as described in HLS RFC: https://datatracker.ietf.org/doc/html/rfc8216#section-4.3.4.2

Describe the behavior you expected

The audio part and the subtiltles are available when playing the stream.

Steps to reproduce the issue

The streaming is issued from a local TV box (Freebox) so it cannot be accessed from outside, so it will be hard to reproduce from somewhere else than on my LAN.

Still, the m3u8 is the following:

EXTM3U

EXT-X-VERSION:4

EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",LANGUAGE="fra",NAME="Fran\xc3\xa7ais malentendant",URI="/stream/76/sub_2184.m3u8",AUTOSELECT=YES

EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",LANGUAGE="fra",NAME="Fran\xc3\xa7ais",URI="/stream/76/sub_2185.m3u8",AUTOSELECT=YES

EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="fra",NAME="Fran\xc3\xa7ais",URI="/stream/76/es_230.m3u8",AUTOSELECT=YES,DEFAULT=YES

EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="qad",NAME="Audio Description",URI="/stream/76/es_231.m3u8",AUTOSELECT=YES

EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="qaa",NAME="Version Originale",URI="/stream/76/es_232.m3u8",AUTOSELECT=YES

EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=6500000,AUDIO="audio",SUBTITLES="subs"

/stream/76/es_220.m3u8

What version of Home Assistant Core has the issue?

2023.7.0.dev20230617

What was the last working version of Home Assistant Core?

never

In which browser are you experiencing the issue with?

Firefox 114

Which operating system are you using to run this browser?

Windows 10

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

There are no errors, the audio and subtitles are simply fully discarded

Additional information

The problem is due to the partial use of hls.js in class ha-hls-player.ts, in 2 different places:

use of 'light' hls.js: https://github.com/home-assistant/frontend/blob/7c15a65bba8a9dc1c9406a2026cd466a8a03a1ee/src/components/ha-hls-player.ts#L112 The use of the 'light' version simply disable the support of alternate-audio as per hls.js documentation: NOTE: hls.light.*.js dist files do not include alternate-audio, subtitles, CMCD, EME (DRM), or Variable Substitution support. In addition, the following types are not available in the light build: This should be replaced by const Hls: typeof HlsType = (await import("hls.js/dist/hls.mjs"))
Manual playlist extraction from master playlist: A manual extraction of the video playlist from the master playlist is done here: https://github.com/home-assistant/frontend/blob/7c15a65bba8a9dc1c9406a2026cd466a8a03a1ee/src/components/ha-hls-player.ts#L141 This extracted stream playlist 'playlist_url' contains only the video in such case, and it is the stream given to hls here: https://github.com/home-assistant/frontend/blob/7c15a65bba8a9dc1c9406a2026cd466a8a03a1ee/src/components/ha-hls-player.ts#L162 This should be replaced by the full master playlist, that is to say this.url, so that hls could properly extract everything.

Please note I validated those changes as working locally for my case, and that it did not break my camera stream that is using m3u8 generated by the stream component, but I do not know why those choices (that looks like optimizations to avoid double call) were done initially. A way to keep old behavior would be to check for existence of alternate media tags '#EXT-X-MEDIA' and go for full hls and master playlist url only in such case.

home-assistant / frontend