fix: properly map region height/width when applying anchors (#7105)

This is a follow-up for https://github.com/shaka-project/shaka-player/pull/6986/files#r1667140796
shaka-project · Aug 19, 2024 · 152b5b1 · 152b5b1
1 parent c93ac32
commit 152b5b1
Showing 1 changed file with 15 additions and 12 deletions.
diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js
@@ -471,8 +471,8 @@ shaka.text.UITextDisplayer = class {
     const linesUnit = shaka.text.CueRegion.units.LINES;
     const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
     const pixelUnit = shaka.text.CueRegion.units.PX;
-    const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
-    const widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
+    let heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
+    let widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
     const viewportAnchorUnit =
         region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
 
@@ -481,32 +481,35 @@ shaka.text.UITextDisplayer = class {
 
     regionElement.style.position = 'absolute';
 
+    let regionHeight = region.height;
+    let regionWidth = region.width;
+
     if (region.heightUnits === linesUnit) {
-      regionElement.style.height = region.height * lineHeightMultiple + '%';
-    } else {
-      regionElement.style.height = region.height + heightUnit;
+      regionHeight = region.height * lineHeightMultiple;
+      heightUnit = '%';
     }
     if (region.widthUnits === linesUnit) {
-      regionElement.style.width = region.width * lineWidthMultiple + '%';
-    } else {
-      regionElement.style.width = region.width + widthUnit;
+      regionWidth = region.width * lineWidthMultiple;
+      widthUnit = '%';
     }
+    regionElement.style.height = regionHeight + heightUnit;
+    regionElement.style.width = regionWidth + widthUnit;
 
     if (region.viewportAnchorUnits === linesUnit) {
       // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-708
       let top = region.viewportAnchorY / 75 * 100;
       const windowWidth = this.aspectRatio_ === 4/3 ? 160 : 210;
       let left = region.viewportAnchorX / windowWidth * 100;
       // adjust top and left values based on the region anchor and window size
-      top -= region.regionAnchorY * region.height * lineHeightMultiple / 100;
-      left -= region.regionAnchorX * region.width * lineWidthMultiple / 100;
+      top -= region.regionAnchorY * regionHeight / 100;
+      left -= region.regionAnchorX * regionWidth / 100;
       regionElement.style.top = top + '%';
       regionElement.style.left = left + '%';
     } else {
       regionElement.style.top = region.viewportAnchorY -
-        region.regionAnchorY * region.height / 100 + viewportAnchorUnit;
+        region.regionAnchorY * regionHeight / 100 + viewportAnchorUnit;
       regionElement.style.left = region.viewportAnchorX -
-        region.regionAnchorX * region.width / 100 + viewportAnchorUnit;
+        region.regionAnchorX * regionWidth / 100 + viewportAnchorUnit;
     }
     if (region.heightUnits !== pixelUnit &&
         region.widthUnits !== pixelUnit &&