diff --git a/externs/shaka/text.js b/externs/shaka/text.js index 140b967cced..2417f4f4c9a 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 77dcb1ca3be..87776c82a10 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 9652d59f6ac..8ea77aa3833 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 5bc923d4884..f73f86354cc 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 31414973aaa..96a36ac4255 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' +