fix(TTML): Fix absence of conversion of alpha (transparency) from 0-2…

…55 -> 0-1 (#7280) Fixes #7279
shaka-project · Sep 13, 2024 · 515bbb9 · 515bbb9
1 parent 6fb54ce
commit 515bbb9
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 3 deletions.
diff --git a/lib/text/ttml_text_parser.js b/lib/text/ttml_text_parser.js
@@ -509,6 +509,24 @@ shaka.text.TtmlTextParser = class {
     return region;
   }
 
+  /**
+   * Ensures any TTML RGBA's alpha range of 0-255 is converted to 0-1.
+   * @param {string} color
+   * @return {string}
+   * @private
+   */
+  static convertTTMLrgbaToHTMLrgba_(color) {
+    const rgba = color.match(/rgba\(([^)]+)\)/);
+    if (rgba) {
+      const values = rgba[1].split(',');
+      if (values.length == 4) {
+        values[3] = String(Number(values[3]) / 255);
+        return 'rgba(' + values.join(',') + ')';
+      }
+    }
+    return color;
+  }
+
   /**
    * Adds applicable style properties to a cue.
    *
@@ -587,7 +605,7 @@ shaka.text.TtmlTextParser = class {
     const color = TtmlTextParser.getStyleAttribute_(
         cueElement, region, styles, 'color', shouldInheritRegionStyles);
     if (color) {
-      cue.color = color;
+      cue.color = TtmlTextParser.convertTTMLrgbaToHTMLrgba_(color);
     }
 
     // Background color should not be set on a container.  If this is a nested
@@ -601,7 +619,8 @@ shaka.text.TtmlTextParser = class {
         cueElement, region, styles, 'backgroundColor',
         shouldInheritRegionStyles);
     if (backgroundColor) {
-      cue.backgroundColor = backgroundColor;
+      cue.backgroundColor =
+        TtmlTextParser.convertTTMLrgbaToHTMLrgba_(backgroundColor);
     }
 
     const border = TtmlTextParser.getStyleAttribute_(
@@ -710,7 +729,8 @@ shaka.text.TtmlTextParser = class {
         // There is no defined color, so default to the text color.
         cue.textStrokeColor = cue.color;
       } else {
-        cue.textStrokeColor = split[0];
+        cue.textStrokeColor =
+            TtmlTextParser.convertTTMLrgbaToHTMLrgba_(split[0]);
         split.shift();
       }
       if (split[0] && split[0].match(TtmlTextParser.unitValues_)) {

diff --git a/test/text/ttml_text_parser_unit.js b/test/text/ttml_text_parser_unit.js
@@ -1591,6 +1591,36 @@ describe('TtmlTextParser', () => {
         {startTime: 1, endTime: 2});
   });
 
+  it('translates alpha level between TTML rgba() and HTML rgba()', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 1,
+            endTime: 2,
+            backgroundColor: '',
+            nestedCues: [{
+              payload: 'alpha value',
+              color: 'rgba(255,255,255,1)',
+              backgroundColor: 'rgba(0,128,128,0.4)',
+              textStrokeColor: 'rgba(0,0,0,0.8)',
+              textStrokeWidth: '3px',
+            }],
+          },
+        ],
+        '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
+        '<head><styling>' +
+        '<style xml:id="style_1" tts:color="rgba(255,255,255,255)" ' +
+        'tts:textOutline="rgba(0,0,0,204) 3px" ' +
+        'tts:backgroundColor="rgba(0,128,128,102) "' +
+        '/></styling>' +
+        '</head><body><div>' +
+        '<p tts:textAlign="center" begin="00:01.00" end="00:02.00">' +
+        '<span style="style_1">alpha value</span></p>' +
+        '</div></body></tt>',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 10, vttOffset: 0},
+        {startTime: 1, endTime: 2});
+  });
+
   // Regression test for #2623
   it('does not apply background colors to containers', () => {
     verifyHelper(