Wrong Style Implementation for WebVTT Text

[Peterdoo]

Have you read the FAQ and checked for duplicate open issues?
YES

What version of Shaka Player are you using?
v4.3.1-uncompiled

Can you reproduce the issue with our latest release version?
NA. Can reproduce with the version from https://shaka-player-demo.appspot.com/demo

Can you reproduce the issue with the latest code from main?
NA. Can reproduce with the version from https://shaka-player-demo.appspot.com/demo

Are you using the demo app or your own custom app?
Demo app from https://shaka-player-demo.appspot.com/demo

If custom app, can you reproduce the issue using our demo app?
YES

What browser and OS are you using?
Chrome 108.0.5359.99 64-bit Windows 11

For embedded devices (smart TVs, etc.), what model and firmware version are you using?

What are the manifest and license server URIs?

What configuration are you using? What is the output of player.getConfiguration()?

Demo app from https://shaka-player-demo.appspot.com/demo

What did you do?

WebVTT file includes:
STYLE
::cue(.vtt_green) {
color: lime;
}

STYLE
::cue(.vtt_yellow) {
color: yellow;
}

STYLE
::cue(.bg_blue) {
background-color: blue;
}

and cues like:
02:00.000 --> 02:05.000
<c.vtt_yellow.bg_blue>This is yellow text on a blue background

What did you expect to happen?
Text should be displayed as yellow on blue background.

What actually happened?

The text it is displayed white on black background.

When I change STYLEs to use selector without the leading dot, then the player will display correct colors like in the following example:
STYLE
::cue(vtt_yellow) {
color: yellow;
}

STYLE
::cue(bg_blue) {
background-color: blue;
}

However that is wrong.

In css to select a html element (like b for <b> bold, i for <i> italic p for <p> paragraph etc.), the css selector is written without a dot. To select a class, the selector has to be written in the css with a leading dot.

So for a text <c.vtt_yellow.bg_blue>yellow on blue</c> where vtt_yellow and bg_blue are class names according to the WebVTT spec the player has to use ::cue(.vtt_yellow) and ::cue(.bg_blue) from STYLE in the WebVTT header and not ::cue(vtt_yellow) and ::cue(bg_blue) which it currently uses and which is wrong.

And for a text <b>bold text</b> where b is a html element the player has to use ::cue(b) from STYLE in the WebVTT header.

[Peterdoo]

Default text and background colors also might need to be modified to have a leading dot (white->.white etc.) if the player will search for class names with a leading dot.

d882d28

[avelad]

I'm working on a fix already. I'm with a change to support voices and I had already seen this, throughout today I will push the PR.

[Peterdoo]

I have sent URIs for testing the above to [email protected]

However, it seems that no captions can be activated at all in the demo version 4.3.2 of Shaka Player. The error is: "factory is not a function". Yesterday it worked fine with the demo version 4.3.1.