From 76376e97f181bae042e23ff2c6e1e0df8b9185d7 Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Mon, 9 Sep 2024 14:56:08 +0800 Subject: [PATCH] fix(WebVTT): Fix mapNativeCueToShakaCue in Chromium browsers (#7273) 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_compatibility https://developer.mozilla.org/en-US/docs/Web/API/VTTCue/positionAlign#browser_compatibility Before fix ![Screenshot 2024-09-09 at 08 42 04](https://github.com/user-attachments/assets/b19f223f-0e6e-4678-a1b1-36a759ec9691) After fix ![image](https://github.com/user-attachments/assets/79854c9d-838b-4b20-9370-4a81407d82fd) 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') ``` --- lib/text/text_utils.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/lib/text/text_utils.js b/lib/text/text_utils.js index af75da766c..01e01048cf 100644 --- a/lib/text/text_utils.js +++ b/lib/text/text_utils.js @@ -276,14 +276,19 @@ shaka.text.Utils = class { const cue = new shaka.text.Cue(vttCue.startTime, vttCue.endTime, vttCue.text); cue.line = typeof vttCue.line === 'number' ? vttCue.line : null; - cue.lineAlign = /** @type {shaka.text.Cue.lineAlign} */ (vttCue.lineAlign); + if (vttCue.lineAlign) { + cue.lineAlign = /** @type {shaka.text.Cue.lineAlign} */ + (vttCue.lineAlign); + } cue.lineInterpretation = vttCue.snapToLines ? shaka.text.Cue.lineInterpretation.LINE_NUMBER : shaka.text.Cue.lineInterpretation.PERCENTAGE; cue.position = typeof vttCue.position === 'number' ? vttCue.position : null; - cue.positionAlign = /** @type {shaka.text.Cue.positionAlign} */ - (vttCue.positionAlign); + if (vttCue.positionAlign) { + cue.positionAlign = /** @type {shaka.text.Cue.positionAlign} */ + (vttCue.positionAlign); + } cue.size = vttCue.size; cue.textAlign = /** @type {shaka.text.Cue.textAlign} */ (vttCue.align); if (vttCue.vertical === 'lr') {