feat(text-track-display): Extend the constructColor function to handle 6 digit hex codes (videojs#5238)

practual · gkatsev · commit e92f177ce21a · 2018-06-21T14:20:12.000-04:00
When providing the TextTrackDisplay component with track settings overrides, currently colour codes with only three digits are supported. This updates it so that 6 digit hex codes are also accepted.
diff --git a/src/js/tracks/text-track-display.js b/src/js/tracks/text-track-display.js
@@ -24,22 +24,30 @@ const fontMap = {
  * Construct an rgba color from a given hex color code.
  *
  * @param {number} color
- *        Hex number for color, like #f0e.
+ *        Hex number for color, like #f0e or #f604e2.
  *
  * @param {number} opacity
  *        Value for opacity, 0.0 - 1.0.
  *
  * @return {string}
  *         The rgba color that was created, like 'rgba(255, 0, 0, 0.3)'.
- *
- * @private
  */
-function constructColor(color, opacity) {
-  return 'rgba(' +
+export function constructColor(color, opacity) {
+  let hex;
+
+  if (color.length === 4) {
     // color looks like "#f0e"
-    parseInt(color[1] + color[1], 16) + ',' +
-    parseInt(color[2] + color[2], 16) + ',' +
-    parseInt(color[3] + color[3], 16) + ',' +
+    hex = color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+  } else if (color.length === 7) {
+    // color looks like "#f604e2"
+    hex = color.slice(1);
+  } else {
+    throw new Error('Invalid color code provided, ' + color + '; must be formatted as e.g. #f0e or #f604e2.');
+  }
+  return 'rgba(' +
+    parseInt(hex.slice(0, 2), 16) + ',' +
+    parseInt(hex.slice(2, 4), 16) + ',' +
+    parseInt(hex.slice(4, 6), 16) + ',' +
     opacity + ')';
 }
 
diff --git a/test/unit/tracks/text-track-display.test.js b/test/unit/tracks/text-track-display.test.js
@@ -1,5 +1,6 @@
 /* eslint-env qunit */
 import Html5 from '../../../src/js/tech/html5.js';
+import { constructColor } from '../../../src/js/tracks/text-track-display.js';
 import Component from '../../../src/js/component.js';
 
 import * as browser from '../../../src/js/utils/browser.js';
@@ -319,4 +320,33 @@ if (!Html5.supportsNativeTextTracks()) {
     player.dispose();
   });
 
+  QUnit.test('a color can be constructed from a three digit hex code', function(assert) {
+    const hex = '#f0e';
+
+    // f gets mapped to ff -> 255 in decimal,
+    // 0 gets mapped to 00 -> 0 in decimal,
+    // e gets mapped to ee -> 238 in decimal.
+    assert.equal(constructColor(hex, 1), 'rgba(255,0,238,1)');
+  });
+
+  QUnit.test('a color can be constructed from a six digit hex code', function(assert) {
+    const hex = '#f604e2';
+
+    // f6 -> 246 in decimal,
+    // 04 -> 4 in decimal,
+    // e2 -> 226 in decimal.
+    assert.equal(constructColor(hex, 1), 'rgba(246,4,226,1)');
+  });
+
+  QUnit.test('an invalid hex code will throw an error', function(assert) {
+    const hex = '#f';
+
+    assert.throws(
+      function() {
+        constructColor(hex, 1);
+      },
+      new Error('Invalid color code provided, #f; must be formatted as e.g. #f0e or #f604e2.'),
+      'colors must be valid hex codes.'
+    );
+  });
 }
