Close https://github.com/shaka-project/shaka-player/issues/8519
Fixes https://github.com/shaka-project/shaka-player/issues/8475
Introduce `NativeTextDisplayer` as a replacement of
`SimpleTextDisplayer`. But keep them both work.
Is MSE mode, `NativeTextDisplayer` creates `<track>` elements for text
streams. And listens to change events on both ends to keep them in sync.
In SRC mode, `NativeTextDisplayer` would do nothing, the player uses
original TextTracks instead.
Advantages of `NativeTextDisplayer`:
- Allow text track selection using the browser built-in UI
- Allow text track manipulation using native APIs
- Avoid transferring and processing cues in SRC mode
---------
Co-authored-by: Álvaro Velad Galván <ladvan91@hotmail.com>
Chromium browsers do not currently support the `lineAlign` or
`positionAlign` properties on the VTTCue class, just like the region
property. So this pull request adds an if before reading those
properties so that the position and line values are handled correctly in
UITextDisplayer (without this change the subtitles are always at the
bottom edge of the player and right aligned subtitles are displayed
off-screen).
https://developer.mozilla.org/en-US/docs/Web/API/VTTCue/lineAlign#browser_compatibilityhttps://developer.mozilla.org/en-US/docs/Web/API/VTTCue/positionAlign#browser_compatibility
Before fix

After fix

Steps to reproduce:
- Get local demo running (`python build/all.py --debug`?)
- Visit custom content, add
https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4 (with
whatever name)
- Add track below
- Start playing custom video, switch Captions to the new text track
**JS to add text track**
```js
await document.getElementById('video').ui.getControls().getPlayer().addTextTrackAsync('data:text/vtt;charset=utf-8,WEBVTT%0AKind%3A%20subtitles%0ALanguage%3A%20en%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Astart%20position%3A0%25%20line%3A0%25%0ATop%2FLeft%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20line%3A0%25%0ATop%2FCentre%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Aend%20position%3A100%25%20line%3A0%25%0ATop%2FRight%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Astart%20position%3A0%25%20line%3A48%25%0AMiddle%2FLeft%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20line%3A48%25%0AMiddle%2FCentre%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Aend%20position%3A100%25%20line%3A48%25%0AMiddle%2FRight%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Astart%20position%3A0%25%0ABottom%2FLeft%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%0ABottom%2FCentre%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Aend%20position%3A100%25%0ABottom%2FRight%0A%0A', 'en', 'subtitles', 'text/vtt')
```
Adds color support for SimpleTextDisplayer and WebVttGenerator (only one
place to fix both now thanks to #4941).
It's limited to the [8 colors
classes](https://w3c.github.io/webvtt/#default-text-color) supported by
the WebVTT specification, and also works with their 3 or 6-digit hex
variants (if the stream has TTML subtitles).
It does not support rgb, rgba or any colors other than these 8.
Fixes#4545
---------
Co-authored-by: Alvaro Velad Galvan <ladvan91@hotmail.com>