From 0117441bb06e0325b84666d2a5a76c0c2de81725 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= Date: Mon, 10 Jan 2022 20:49:36 +0100 Subject: [PATCH] fix(text): Remove caption wrapper bgColor (#3838) Closes #3745 --- lib/text/ui_text_displayer.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js index ab2aad4650..04ab02bcb8 100644 --- a/lib/text/ui_text_displayer.js +++ b/lib/text/ui_text_displayer.js @@ -352,19 +352,22 @@ shaka.text.UITextDisplayer = class { type = 'br'; } + const needWrapper = !isNested && cue.nestedCues.length > 0; + // Nested cues are inline elements. Top-level cues are block elements. const cueElement = shaka.util.Dom.createHTMLElement(type); if (type != 'br') { - this.setCaptionStyles_(cueElement, cue, parents); + this.setCaptionStyles_(cueElement, cue, parents, needWrapper); } let wrapper = cueElement; - if (!isNested && cue.nestedCues.length) { + if (needWrapper) { // Create a wrapper element which will serve to contain all children into // a single item. This ensures that nested span elements appear // horizontally and br elements occupy no vertical space. wrapper = shaka.util.Dom.createHTMLElement('span'); wrapper.classList.add('shaka-text-wrapper'); + wrapper.style.backgroundColor = cue.backgroundColor; cueElement.appendChild(wrapper); } @@ -375,9 +378,10 @@ shaka.text.UITextDisplayer = class { * @param {!HTMLElement} cueElement * @param {!shaka.extern.Cue} cue * @param {!Array.} parents + * @param {boolean} hasWrapper * @private */ - setCaptionStyles_(cueElement, cue, parents) { + setCaptionStyles_(cueElement, cue, parents, hasWrapper) { const Cue = shaka.text.Cue; const inherit = (cb) => shaka.text.UITextDisplayer.inheritProperty_(parents, cb); @@ -434,13 +438,15 @@ shaka.text.UITextDisplayer = class { if (cue.border) { elem.style.border = cue.border; } - const bgColor = inherit((c) => c.backgroundColor); - if (bgColor) { - elem.style.backgroundColor = bgColor; - } else if (text) { - // If there is no background, default to a semi-transparent black. - // Only do this for the text itself. - elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; + if (!hasWrapper) { + const bgColor = inherit((c) => c.backgroundColor); + if (bgColor) { + elem.style.backgroundColor = bgColor; + } else if (text) { + // If there is no background, default to a semi-transparent black. + // Only do this for the text itself. + elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; + } } if (text) { elem.textContent = text;