Fixed subtitles styling in firefox.

[venkat-karasani]

Changes
There are two approaches to fix this:

1. Use ::cue to style the subtitles in Firefox. For this approach, except font-size everything else are working fine.
2. Create a custom subtitles element. All styles are working fine.

Code for both of these approaches is already present, went with the custom subtitles element approach.

Issues
Fixes #5602

[dmitrylyzo]

For reference, this was changed in #3897.

In Firefox 126, font family and shadow Uniform work, text size is much smaller than it should be.

It looks like it is now required to apply 170% to the video element.

But it doesn't seem to work well - Normal size looks weird.

[venkat-karasani]

Thanks for sharing the information.

setCueAppearance is responsible for rendering the subtitles natively and it is not being called because of firefox related checks inside enableNativeTrackSupport. Even if we change it, we get the issue you mentioned i.e. subtitle font-size is very small in firefox when compared to other browsers. So, using custom subtitle element should be better.

[thornbill]

I wonder if this deserves an option in the subtitle settings to use native styling. It seems like subtitle styling is becoming more of an issue over time.

[venkat-karasani]

I wonder if this deserves an option in the subtitle settings to use native styling. It seems like subtitle styling is becoming more of an issue over time.

yeah, It might be better to add an option to select between native or custom subtitle styling. Should I go ahead and try implementing it?

[thornbill]

Sure go for it!

[github-actions]

ESLint doesn't pass. Please fix all ESLint issues.

[github-actions]

ESLint doesn't pass. Please fix all ESLint issues.

[venkat-karasani]

@dmitrylyzo

As suggested, we have three modes now i.e. Auto, Native and Custom. Auto will be the default.
The current implementation will remember the styling options per device not per user i.e.

1. same user on multiple devices i.e. chrome or firefox can have different options as per their selection.
2. All the users using same firefox brower or any other same entry point will have same option.

Is this fine or If you want me to try other approach, I am happy to implement that as well.

[sonarcloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[jellyfin-bot]

Cloudflare Pages deployment

Latest commit	d292695
Status	✅ Deployed!
Preview URL	https://8517e9fb.jellyfin-web.pages.dev
Type	🔀 Preview

View build logs

[jellyfin-bot]

This pull request has merge conflicts. Please resolve the conflicts so the PR can be successfully reviewed and merged.

[JamsRepos]

@venkat-karasani Would really appreciate some movement on this :)

[Brramble]

@dmitrylyzo seems like the PR creator is MIA, can you please resolve and merge?

[venkat-karasani]

resolved the merge conflict.

[dmitrylyzo]

Works as intended.
Recommend using "Squash and merge".

[sonarcloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud