From 11d3f94fb230ea2042cc2d0f5401584bab5a38b9 Mon Sep 17 00:00:00 2001
From: Alvaro Velad <alvaro.velad@mirada.tv>
Date: Thu, 26 May 2022 07:59:32 +0200
Subject: [PATCH] feat: Add support to text-shadow in VTT parser

---
 externs/shaka/text.js             | 7 +++++++
 lib/text/cue.js                   | 6 ++++++
 lib/text/ui_text_displayer.js     | 1 +
 lib/text/vtt_text_parser.js       | 4 ++++
 test/text/vtt_text_parser_unit.js | 4 ++++
 5 files changed, 22 insertions(+)

diff --git a/externs/shaka/text.js b/externs/shaka/text.js
index 140b967cce..2417f4f4c9 100644
--- a/externs/shaka/text.js
+++ b/externs/shaka/text.js
@@ -297,6 +297,13 @@ shaka.extern.Cue = class {
      */
     this.fontFamily;
 
+    /**
+     * Text shadow color as a CSS text-shadow value.
+     * @type {string}
+     * @exportDoc
+     */
+    this.textShadow = '';
+
     /**
      * Text stroke color as a CSS color, e.g. "#FFFFFF" or "white".
      * @type {string}
diff --git a/lib/text/cue.js b/lib/text/cue.js
index 77dcb1ca3b..87776c82a1 100644
--- a/lib/text/cue.js
+++ b/lib/text/cue.js
@@ -144,6 +144,12 @@ shaka.text.Cue = class {
      */
     this.border = '';
 
+    /**
+     * @override
+     * @exportInterface
+     */
+    this.textShadow = '';
+
     /**
      * @override
      * @exportInterface
diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js
index 9652d59f6a..8ea77aa383 100644
--- a/lib/text/ui_text_displayer.js
+++ b/lib/text/ui_text_displayer.js
@@ -411,6 +411,7 @@ shaka.text.UITextDisplayer = class {
     style.paddingRight =
         shaka.text.UITextDisplayer.convertLengthValue_(
             cue.linePadding, cue, this.videoContainer_);
+    style.textShadow = cue.textShadow;
 
     if (cue.backgroundImage) {
       style.backgroundImage = 'url(\'' + cue.backgroundImage + '\')';
diff --git a/lib/text/vtt_text_parser.js b/lib/text/vtt_text_parser.js
index 5bc923d488..f73f86354c 100644
--- a/lib/text/vtt_text_parser.js
+++ b/lib/text/vtt_text_parser.js
@@ -293,6 +293,10 @@ shaka.text.VttTextParser = class {
             validStyle = true;
             cue.opacity = parseFloat(value);
             break;
+          case 'text-shadow':
+            validStyle = true;
+            cue.textShadow = value;
+            break;
           case 'white-space':
             validStyle = true;
             cue.wrapLine = value != 'noWrap';
diff --git a/test/text/vtt_text_parser_unit.js b/test/text/vtt_text_parser_unit.js
index 31414973aa..96a36ac425 100644
--- a/test/text/vtt_text_parser_unit.js
+++ b/test/text/vtt_text_parser_unit.js
@@ -624,6 +624,7 @@ describe('VttTextParser', () => {
   });
 
   it('supports global style blocks', () => {
+    const textShadow = '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black';
     verifyHelper(
         [
           {
@@ -632,6 +633,7 @@ describe('VttTextParser', () => {
             payload: 'Test',
             color: 'cyan',
             fontSize: '10px',
+            textShadow: textShadow,
           },
           {
             startTime: 40,
@@ -639,6 +641,7 @@ describe('VttTextParser', () => {
             payload: 'Test2',
             color: 'cyan',
             fontSize: '10px',
+            textShadow: textShadow,
           },
         ],
         'WEBVTT\n\n' +
@@ -646,6 +649,7 @@ describe('VttTextParser', () => {
         '::cue {\n' +
         'color: cyan;\n'+
         'font-size: 10px;\n'+
+        `text-shadow: ${textShadow};\n`+
         '}\n\n' +
         '00:00:20.000 --> 00:00:40.000\n' +
         'Test\n\n' +