feat: Add support to text-shadow in VTT parser (#4257)

shaka-project · May 27, 2022 · 62bda2c · 62bda2c
1 parent b70938c
commit 62bda2c
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,20 +633,23 @@ describe('VttTextParser', () => {
             payload: 'Test',
             color: 'cyan',
             fontSize: '10px',
+            textShadow: textShadow,
           },
           {
             startTime: 40,
             endTime: 50,
             payload: 'Test2',
             color: 'cyan',
             fontSize: '10px',
+            textShadow: textShadow,
           },
         ],
         'WEBVTT\n\n' +
         'STYLE\n' +
         '::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' +