shaka-project / shaka-player

JavaScript player library / DASH & HLS client / MSE-EME player
Apache License 2.0
7.23k stars 1.34k forks source link

UITextDisplayer is mishandling lineAlign #4247

Closed toschlog closed 1 year ago

toschlog commented 2 years ago

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

Yes

What version of Shaka Player are you using?

3.4.5

Can you reproduce the issue with our latest release version?

Yes

Can you reproduce the issue with the latest code from main?

Yes

Are you using the demo app or your own custom app?

Custom app

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

Have not tried

What browser and OS are you using?

Electron, on Windows

The UITextDisplayer is using lineAlign improperly. This is causing subtitles with lineAlign == "end" to be drawn at the top of the screen.

Here's the relevant code:

image

It looks to me like the code for HORIZONTAL_TOP_TO_BOTTOM and VERTICAL_LEFT_TO_RIGHT is swapped. If the text is horizonal. lineAlign should affect left & right; if it's vertical is should affect top & bottom. This code has it the other way around.

joeyparrish commented 2 years ago

I notice you deleted the part of the form that asks for content. Can you provide us with a subtitle sample that demonstrates the problem? That would both help us understand the issue and create a regression test to make sure we don't make this mistake twice.

toschlog commented 2 years ago

I was testing with "Doctor Strange" and "The Mandalorian" S1E1 on Disney+ using Hearo. Testing using Hearo will be a little tricky: subtitles are broken in the current release, and the next release will include a hack that fixes the problem. But I could create a test build that shows the problem if that's useful.

avelad commented 2 years ago

@toschlog Please share a mpd or m3u8, it will help us to reproduce the error.

joeyparrish commented 2 years ago

Even a TTML or VTT file as an attachment would work in this case, since we can side-load subtitles on a different piece of content.

toschlog commented 2 years ago

I've attached an m3u8 plus one of the VTT segments. Let me know if you need anything else.

composite_cs_NORMAL_1b145a3c-88fb-4fd6-ba4b-e6218e77b6be_daf3602b-9036-47f9-9ff9-88b1f81adbde.m3u8.txt seg_00000.vtt.txt .

avelad commented 2 years ago

The settings that the WebVTT file has is: line:95%,end

toschlog commented 2 years ago

I was wrong about what's causing the problem here. Please ignore my reference to the specific spot in the code.

In the Mandalorian, all the titles appear at the top, but some are supposed to be at the top and some at the bottom. The relevant cue data is:

//text at top
line: 14.81
lineAlign: "start"

//text at bottom
line: 85.19
lineAlign: "end"

In the first one, the top of the text box should be at 14.81%. In the second, the bottom of the text box should be at 85.19%.

I'm don't know what's wrong in the code that's causing the problem, but it should be fairly easy to duplicate.

toschlog commented 2 years ago

FYI, here's my hack to fix the text. I change lineAlign to "start", convert the line value to line counts (instead of percent) and adjust by the number of lines in the text.

          if ((cue.lineAlign === "end") && (typeof cue.line === "number") && (cue.line > 50) && (cue.lineInterpretation === 1)) {
            cue.lineAlign = "start"
            let newlineCount = 0;
            for (let i = 0; i < cue.payload.length; i++) if (cue.payload[i] === "\n") newlineCount++;
            cue.line = -(100 - cue.line) / 5 - (newlineCount - 1)
            cue.lineInterpretation = 0
          }
avelad commented 1 year ago

Can you test if the main branch still has the problem? Thanks!

shaka-bot commented 1 year ago

Closing due to inactivity. If this is still an issue for you or if you have further questions, the OP can ask shaka-bot to reopen it by including @shaka-bot reopen in a comment.

toschlog commented 1 year ago

@avelad Can you provide some guidance on building my app with the main branch code?

I pulled the latest code, built with python build/all.py and then copied the dist folder over to my project's node_modules/shaka-player folder. Is there something else I should do? I'm not seeing any subtitles at all now.

I've been building with 4.3.7. Are there changes I need to make for the latest code to work?