fix(WebVTT): Fix support for line vertical alignment (#5945)

Fixes #4446

lib/text/ui_text_displayer.js

@@ -707,37 +707,46 @@ shaka.text.UITextDisplayer = class {
     //   (for vertical growing left) is aligned at the line.
     // TODO: Implement line alignment with line number.
     // TODO: Implement lineAlignment of 'CENTER'.
-    if (cue.line != null) {
+    let line = cue.line;
+    if (line != null) {
       let lineInterpretation = cue.lineInterpretation;
       // HACK: the current implementation of UITextDisplayer only handled
-      // PERCENTAGE, as cue.line=0 is zero, we can interpret it as percentage
-      // safely.
-      if (cue.line == 0 &&
-          lineInterpretation == Cue.lineInterpretation.LINE_NUMBER) {
+      // PERCENTAGE, so we need convert LINE_NUMBER to PERCENTAGE
+      if (lineInterpretation == Cue.lineInterpretation.LINE_NUMBER) {
         lineInterpretation = Cue.lineInterpretation.PERCENTAGE;
+        let maxLines = 16;
+        // The maximum number of lines is different if it is a vertical video.
+        if (this.aspectRatio_ && this.aspectRatio_ < 1) {
+          maxLines = 32;
+        }
+        if (line < 0) {
+          line = 100 + line / maxLines * 100;
+        } else {
+          line = line / maxLines * 100;
+        }
       }
       if (lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
         style.position = 'absolute';
         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
           style.width = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
-            style.top = cue.line + '%';
+            style.top = line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.bottom = (100 - cue.line) + '%';
+            style.bottom = (100 - line) + '%';
           }
         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
           style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
-            style.left = cue.line + '%';
+            style.left = line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.right = (100 - cue.line) + '%';
+            style.right = (100 - line) + '%';
           }
         } else {
           style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
-            style.right = cue.line + '%';
+            style.right = line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.left = (100 - cue.line) + '%';
+            style.left = (100 - line) + '%';
           }
         }
       }