Skip to content

Commit

Permalink
fix(text): Remove caption wrapper bgColor (#3838)
Browse files Browse the repository at this point in the history
Closes #3745
  • Loading branch information
Álvaro Velad Galván authored Jan 10, 2022
1 parent 4731c76 commit 0117441
Showing 1 changed file with 16 additions and 10 deletions.
26 changes: 16 additions & 10 deletions lib/text/ui_text_displayer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand All @@ -375,9 +378,10 @@ shaka.text.UITextDisplayer = class {
* @param {!HTMLElement} cueElement
* @param {!shaka.extern.Cue} cue
* @param {!Array.<!shaka.extern.Cue>} 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);
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 0117441

Please sign in to comment.