[Bug]: Problem with subtitle centering with local language option

[Uploadsgit]

Guidelines

• [X] I have encountered this bug in the latest release of FreeTube.
• [X] I have searched the issue tracker for open and closed issues that are similar to the bug report I want to file, without success.
• [X] I have searched the documentation for information that matches the description of the bug I want to file, without success.
• [X] This issue contains only one bug.

Describe the bug

When local language are selected in subtitles, that are centered to the left instead center

Check image.

Thanks!

Expected Behavior

I dont know why happens

Issue Labels

visual bug

FreeTube Version

v0.18.0 Beta

Operating System Version

Windows 10

Installation Method

.exe

Primary API used

Local API

Last Known Working FreeTube Version (If Any)

No response

Additional Information

No response

Nightly Build

• [ ] I have encountered this bug in the latest nightly build.

[petaded]

This seems to happen with any non-english auto generated subtitles.

I have found I can fix it via adding the following to src/renderer/videoJS.css

.video-js .vjs-text-track-cue {
  text-align: center !important;
}

Not sure if there is a neater way (without using !important). For reference the text-align: start is added in the html directly hence the need for !important, here is the html element in question.

<div class="vjs-text-track-cue vjs-text-track-cue-de-DE" lang="de-DE" style="direction: ltr; writing-mode: horizontal-tb; unicode-bidi: plaintext; text-align: start; font: 21.1px sans-serif; white-space: pre-line; position: absolute; width: 845.203px; inset: 373.984px 0px 0px; height: 48px; background-color: rgba(0, 0, 0, 0);"><div style="color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); position: relative; inset: 0px; display: inline; writing-mode: horizontal-tb; unicode-bidi: plaintext; font-family: sans-serif;">darauf, auf die gleiche Seite zu kommen, richtig, dass
diese <?timestamp 92.96?><span>Grafikkarten </span><?timestamp 93.64?><span>entworfen </span><?timestamp 94.32?><span>wurden</span></div></div>

I also don't know if it is intended to have left justified subtitles. Some languages are read right to left and I don't know how centre justifying the text will impact them.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[efb4f5ff-1298-471a-8973-3d47447115dc]

@petaded is this the same issue

In https://youtu.be/yGXaAWbzl5A

https://github.com/FreeTubeApp/FreeTube/assets/73130443/5a0ab009-050f-43d5-9da5-73d22bc715fa

[petaded]

@efb4f5ff-1298-471a-8973-3d47447115dc

It's a similar problem and the same area of code would be changed to fix it, but not the exact same fix/issue.

To be honest this looks like an bug in whatever video third party we are using or how we use it. If you look at the generated html the subtitles at the top have inset: 0px 0px 431.67px (note 431.67 is a generated value based on video size) the ones at the bottom have inset: 431.67px 0px 0px .

I would guess typo somewhere and the css was supposed to be the same across them.

This is all done in in-line style which means it take precedent over any css we add to videoJS.css unless we add the !important.

You could override this value in our code and force all subtitles to be in the same position with the following to src/renderer/videoJS.css

.video-js .vjs-text-track-cue {
  inset: 90% 0px 0px !important;
}

but a disclaimer I'm not an expert on videoJS someone else may know a better solution. Hope this helps.

Images with the above update applied:

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.