fix(text): Fix cue region rendering in UI

lib/text/ui_text_displayer.js

@@ -77,6 +77,7 @@ shaka.text.UITextDisplayer = class {
      * the cue (e.g. the HTML element to put nested cues inside).
      * @private {Map.<!shaka.extern.Cue, !{
      *   cueElement: !HTMLElement,
+     *   regionElement: HTMLElement,
      *   wrapper: !HTMLElement
      * }>}
      */
@@ -97,6 +98,9 @@ shaka.text.UITextDisplayer = class {
       });
       this.resizeObserver_.observe(this.textContainer_);
     }
+
+    /** @private {Map.<string, !HTMLElement>} */
+    this.regionElements_ = new Map();
   }
 
 
@@ -234,6 +238,11 @@ shaka.text.UITextDisplayer = class {
         // even ones which are going to be planted again.
         toUproot.push(cueRegistry.cueElement);
 
+        // Also uproot all displayed region elements.
+        if (cueRegistry.regionElement) {
+          toUproot.push(cueRegistry.regionElement);
+        }
+
         // If the cue should not be displayed, remove it entirely.
         if (!shouldBeDisplayed) {
           // Since something has to be removed, we will need to update the DOM.
@@ -269,7 +278,9 @@ shaka.text.UITextDisplayer = class {
     }
     if (updateDOM) {
       for (const cueElement of toUproot) {
-        container.removeChild(cueElement);
+        if (cueElement.parentElement) {
+          cueElement.parentElement.removeChild(cueElement);
+        }
       }
       toPlant.sort((a, b) => {
         if (a.startTime != b.startTime) {
@@ -281,7 +292,12 @@ shaka.text.UITextDisplayer = class {
       for (const cue of toPlant) {
         const cueRegistry = this.currentCuesMap_.get(cue);
         goog.asserts.assert(cueRegistry, 'cueRegistry should exist.');
-        container.appendChild(cueRegistry.cueElement);
+        if (cueRegistry.regionElement) {
+          container.appendChild(cueRegistry.regionElement);
+          cueRegistry.regionElement.appendChild(cueRegistry.cueElement);
+        } else {
+          container.appendChild(cueRegistry.cueElement);
+        }
       }
     }
   }
@@ -303,6 +319,16 @@ shaka.text.UITextDisplayer = class {
         shaka.util.Dom.removeAllChildren(this.textContainer_);
         this.currentCuesMap_.clear();
       }
+      if (this.regionElements_.size > 0) {
+        // Clear away any existing regions.
+        for (const regionElement of this.regionElements_.values()) {
+          shaka.util.Dom.removeAllChildren(regionElement);
+          if (regionElement.parentElement) {
+            regionElement.parentElement.removeChild(regionElement);
+          }
+        }
+        this.regionElements_.clear();
+      }
     }
     if (this.isTextVisible_) {
       // Log currently attached cue elements for verification, later.
@@ -332,6 +358,54 @@ shaka.text.UITextDisplayer = class {
     }
   }
 
+  /**
+   * Get or create a region element corresponding to the cue region.  These are
+   * cached by ID.
+   *
+   * @param {!shaka.extern.Cue} cue
+   * @return {!HTMLElement}
+   * @private
+   */
+  getRegionElement_(cue) {
+    const region = cue.region;
+
+    if (this.regionElements_.has(region.id)) {
+      return this.regionElements_.get(region.id);
+    }
+
+    const regionElement = shaka.util.Dom.createHTMLElement('span');
+
+    const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
+    const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
+    const widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
+    const viewportAnchorUnit =
+        region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
+
+    regionElement.id = 'shaka-text-region---' + region.id;
+    regionElement.classList.add('shaka-text-region');
+
+    regionElement.style.height = region.height + heightUnit;
+    regionElement.style.width = region.width + widthUnit;
+    regionElement.style.position = 'absolute';
+    regionElement.style.top = region.viewportAnchorY + viewportAnchorUnit;
+    regionElement.style.left = region.viewportAnchorX + viewportAnchorUnit;
+
+    regionElement.style.display = 'flex';
+    regionElement.style.flexDirection = 'column';
+    regionElement.style.alignItems = 'center';
+
+    if (cue.displayAlign == shaka.text.Cue.displayAlign.BEFORE) {
+      regionElement.style.justifyContent = 'flex-start';
+    } else if (cue.displayAlign == shaka.text.Cue.displayAlign.CENTER) {
+      regionElement.style.justifyContent = 'center';
+    } else {
+      regionElement.style.justifyContent = 'flex-end';
+    }
+
+    this.regionElements_.set(region.id, regionElement);
+    return regionElement;
+  }
+
   /**
    * Creates the object for a cue.
    *
@@ -354,6 +428,11 @@ shaka.text.UITextDisplayer = class {
       this.setCaptionStyles_(cueElement, cue, parents, needWrapper);
     }
 
+    let regionElement = null;
+    if (cue.region && cue.region.id) {
+      regionElement = this.getRegionElement_(cue);
+    }
+
     let wrapper = cueElement;
     if (needWrapper) {
       // Create a wrapper element which will serve to contain all children into
@@ -365,7 +444,7 @@ shaka.text.UITextDisplayer = class {
       cueElement.appendChild(wrapper);
     }
 
-    this.currentCuesMap_.set(cue, {cueElement, wrapper});
+    this.currentCuesMap_.set(cue, {cueElement, wrapper, regionElement});
   }
 
   /**
@@ -526,17 +605,6 @@ shaka.text.UITextDisplayer = class {
           }
         }
       }
-    } else if (cue.region && cue.region.id) {
-      const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
-      const heightUnit = cue.region.heightUnits == percentageUnit ? '%' : 'px';
-      const widthUnit = cue.region.widthUnits == percentageUnit ? '%' : 'px';
-      const viewportAnchorUnit =
-          cue.region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
-      style.height = cue.region.height + heightUnit;
-      style.width = cue.region.width + widthUnit;
-      style.position = 'absolute';
-      style.top = cue.region.viewportAnchorY + viewportAnchorUnit;
-      style.left = cue.region.viewportAnchorX + viewportAnchorUnit;
     }
 
     style.lineHeight = cue.lineHeight;