fix: Fix color detection in text utils (#5970)

shaka-project · Dec 2, 2023 · 68903e1 · 68903e1
1 parent d224933
commit 68903e1
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 18 deletions.
diff --git a/lib/text/simple_text_displayer.js b/lib/text/simple_text_displayer.js
@@ -81,7 +81,7 @@ shaka.text.SimpleTextDisplayer = class {
    * @export
    */
   append(cues) {
-    const flattenedCues = shaka.text.Utils.getCuesToFlatten(cues, []);
+    const flattenedCues = shaka.text.Utils.getCuesToFlatten(cues);
 
     // Convert cues.
     const textTrackCues = [];

diff --git a/lib/text/text_utils.js b/lib/text/text_utils.js
@@ -15,16 +15,19 @@ shaka.text.Utils = class {
    * their contents should be combined and replace the payload of the parent.
    *
    * @param {!shaka.text.Cue} cue
+   * @param {?shaka.text.Cue=} parentCue
    * @return {string}
    * @private
    */
-  static flattenPayload_(cue) {
+  static flattenPayload_(cue, parentCue) {
     if (cue.lineBreak) {
       // This is a vertical lineBreak, so insert a newline.
       return '\n';
     }
     if (cue.nestedCues.length) {
-      return cue.nestedCues.map(shaka.text.Utils.flattenPayload_).join('');
+      return cue.nestedCues.map((nested) => {
+        return shaka.text.Utils.flattenPayload_(nested, cue);
+      }).join('');
     }
 
     // Handle bold, italics and underline
@@ -43,14 +46,22 @@ shaka.text.Utils = class {
       openStyleTags.push(['u']);
     }
     // Handle color classes, if the value consists of letters
+    let color = cue.color;
+    if (color == '' && parentCue) {
+      color = parentCue.color;
+    }
     let classes = '';
-    const color = shaka.text.Utils.getColorName_(cue.color);
-    if (color) {
-      classes += `.${color}`;
+    const colorName = shaka.text.Utils.getColorName_(color);
+    if (colorName) {
+      classes += `.${colorName}`;
+    }
+    let bgColor = cue.backgroundColor;
+    if (bgColor == '' && parentCue) {
+      bgColor = parentCue.backgroundColor;
     }
-    const bgColor = shaka.text.Utils.getColorName_(cue.backgroundColor);
-    if (bgColor) {
-      classes += `.bg_${bgColor}`;
+    const bgColorName = shaka.text.Utils.getColorName_(bgColor);
+    if (bgColorName) {
+      classes += `.bg_${bgColorName}`;
     }
     if (classes) {
       openStyleTags.push(['c', classes]);
@@ -69,7 +80,20 @@ shaka.text.Utils = class {
    * @private
    */
   static getColorName_(string) {
-    switch (string.toLowerCase()) {
+    let colorString = string.toLowerCase();
+    const rgb = colorString.replace(/\s/g, '')
+        .match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i);
+    if (rgb) {
+      colorString = '#' +
+          (parseInt(rgb[1], 10) | (1 << 8)).toString(16).slice(1) +
+          (parseInt(rgb[2], 10) | (1 << 8)).toString(16).slice(1) +
+          (parseInt(rgb[3], 10) | (1 << 8)).toString(16).slice(1);
+    } else if (colorString.startsWith('#') && colorString.length > 7) {
+      // With this we lose the alpha of the color, but it is better than having
+      // no color.
+      colorString = colorString.slice(0, 7);
+    }
+    switch (colorString) {
       case 'white':
       case '#fff':
       case '#ffffff':
@@ -92,6 +116,7 @@ shaka.text.Utils = class {
         return 'yellow';
       case 'magenta':
       case '#f0f':
+      case '#ff00ff':
         return 'magenta';
       case 'blue':
       case '#00f':
@@ -118,19 +143,20 @@ shaka.text.Utils = class {
    * isContainer = false.
    *
    * @param {!Array.<!shaka.text.Cue>} cues
-   * @param {!Array.<!shaka.text.Cue>} result
+   * @param {?shaka.text.Cue=} parentCue
    * @return {!Array.<!shaka.text.Cue>}
    */
-  static getCuesToFlatten(cues, result) {
+  static getCuesToFlatten(cues, parentCue) {
+    const result = [];
     for (const cue of cues) {
       if (cue.isContainer) {
         // Recurse to find the actual text payload cues.
-        shaka.text.Utils.getCuesToFlatten(cue.nestedCues, result);
+        result.push(...shaka.text.Utils.getCuesToFlatten(cue.nestedCues, cue));
       } else {
         // Flatten the payload.
         const flatCue = cue.clone();
         flatCue.nestedCues = [];
-        flatCue.payload = shaka.text.Utils.flattenPayload_(cue);
+        flatCue.payload = shaka.text.Utils.flattenPayload_(cue, parentCue);
         result.push(flatCue);
       }
     }

diff --git a/lib/text/web_vtt_generator.js b/lib/text/web_vtt_generator.js
@@ -40,7 +40,7 @@ shaka.text.WebVttGenerator = class {
           milliseconds;
     };
 
-    const flattenedCues = shaka.text.Utils.getCuesToFlatten(cues, []);
+    const flattenedCues = shaka.text.Utils.getCuesToFlatten(cues);
 
     let webvttString = 'WEBVTT\n\n';
     for (const cue of flattenedCues) {

diff --git a/test/text/web_vtt_generator_unit.js b/test/text/web_vtt_generator_unit.js
@@ -18,11 +18,11 @@ describe('WebVttGenerator', () => {
     const shakaCue2 = new shaka.text.Cue(40, 50, 'Test2');
     shakaCue2.textAlign = shaka.text.Cue.textAlign.RIGHT;
     shakaCue2.writingMode = shaka.text.Cue.writingMode.VERTICAL_RIGHT_TO_LEFT;
-    shakaCue2.color = '#0f0';
-    shakaCue2.backgroundColor = 'lime';
+    shakaCue2.color = '#00ff00ff';
+    shakaCue2.backgroundColor = 'rgba(0,255,0,1)';
     const shakaCue3 = new shaka.text.Cue(50, 51, 'Test3');
     shakaCue3.textAlign = shaka.text.Cue.textAlign.CENTER;
-    shakaCue3.color = '#ffff00';
+    shakaCue3.color = 'rgb(255,255,0)';
     shakaCue3.backgroundColor = '#00ffff';
     const shakaCue4 = new shaka.text.Cue(52, 53, 'Test4');
     shakaCue4.textAlign = shaka.text.Cue.textAlign.START;