fix: Compute correctly the positionAlign in UITextDisplayer (#5630)

lib/text/ui_text_displayer.js

@@ -481,6 +481,43 @@ shaka.text.UITextDisplayer = class {
     this.currentCuesMap_.set(cue, {cueElement, wrapper, regionElement});
   }
 
+  /**
+   * Compute cue position alignment
+   * See https://www.w3.org/TR/webvtt1/#webvtt-cue-position-alignment
+   *
+   * @param {!shaka.extern.Cue} cue
+   * @private
+   */
+  computeCuePositionAlignment_(cue) {
+    const Cue = shaka.text.Cue;
+    const {direction, positionAlign, textAlign} = cue;
+
+    if (positionAlign !== Cue.positionAlign.AUTO) {
+      // Position align is not AUTO: use it
+      return positionAlign;
+    }
+
+    // Position align is AUTO: use text align to compute its value
+
+    if (textAlign === Cue.textAlign.LEFT ||
+      (textAlign === Cue.textAlign.START &&
+        direction === Cue.direction.HORIZONTAL_LEFT_TO_RIGHT) ||
+      (textAlign === Cue.textAlign.END &&
+        direction === Cue.direction.HORIZONTAL_RIGHT_TO_LEFT)) {
+      return Cue.positionAlign.LEFT;
+    }
+
+    if (textAlign === Cue.textAlign.RIGHT ||
+      (textAlign === Cue.textAlign.START &&
+        direction === Cue.direction.HORIZONTAL_RIGHT_TO_LEFT) ||
+      (textAlign === Cue.textAlign.END &&
+        direction === Cue.direction.HORIZONTAL_LEFT_TO_RIGHT)) {
+      return Cue.positionAlign.RIGHT;
+    }
+
+    return Cue.positionAlign.CENTER;
+  }
+
   /**
    * @param {!HTMLElement} cueElement
    * @param {!shaka.extern.Cue} cue
@@ -666,9 +703,10 @@ shaka.text.UITextDisplayer = class {
 
     // The positionAlign attribute is an alignment for the text container in
     // the dimension of the writing direction.
-    if (cue.positionAlign == Cue.positionAlign.LEFT) {
+    const computedPositionAlign = this.computeCuePositionAlignment_(cue);
+    if (computedPositionAlign == Cue.positionAlign.LEFT) {
       style.cssFloat = 'left';
-    } else if (cue.positionAlign == Cue.positionAlign.RIGHT) {
+    } else if (computedPositionAlign == Cue.positionAlign.RIGHT) {
       style.cssFloat = 'right';
     }