Source: lib/text/ui_text_displayer.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.text.UITextDisplayer');
  10. goog.require('goog.asserts');
  11. goog.require('shaka.Deprecate');
  12. goog.require('shaka.text.Cue');
  13. goog.require('shaka.text.CueRegion');
  14. goog.require('shaka.text.Utils');
  15. goog.require('shaka.util.Dom');
  16. goog.require('shaka.util.EventManager');
  17. goog.require('shaka.util.Timer');
  20. /**
  21.  * The text displayer plugin for the Shaka Player UI.  Can also be used directly
  22.  * by providing an appropriate container element.
  23.  *
  24.  * @implements {shaka.extern.TextDisplayer}
  25.  * @final
  26.  * @export
  27.  */
  28. shaka.text.UITextDisplayer = class {
  29.   /**
  30.    * Constructor.
  31.    * @param {HTMLMediaElement} video
  32.    * @param {HTMLElement} videoContainer
  33.    * @param {shaka.extern.TextDisplayerConfiguration} config
  34.    */
  35.   constructor(video, videoContainer, config) {
  36.     goog.asserts.assert(videoContainer, 'videoContainer should be valid.');
  38.     /** @private {boolean} */
  39.     this.isTextVisible_ = false;
  41.     /** @private {!Array.<!shaka.text.Cue>} */
  42.     this.cues_ = [];
  44.     /** @private {HTMLMediaElement} */
  45.     this.video_ = video;
  47.     /** @private {HTMLElement} */
  48.     this.videoContainer_ = videoContainer;
  50.     /** @private {?number} */
  51.     this.aspectRatio_ = null;
  53.     /** @type {HTMLElement} */
  54.     this.textContainer_ = shaka.util.Dom.createHTMLElement('div');
  55.     this.textContainer_.classList.add('shaka-text-container');
  57.     // Set the subtitles text-centered by default.
  58.     this.textContainer_.style.textAlign = 'center';
  60.     // Set the captions in the middle horizontally by default.
  61.     this.textContainer_.style.display = 'flex';
  62.     this.textContainer_.style.flexDirection = 'column';
  63.     this.textContainer_.style.alignItems = 'center';
  65.     // Set the captions at the bottom by default.
  66.     this.textContainer_.style.justifyContent = 'flex-end';
  68.     this.videoContainer_.appendChild(this.textContainer_);
  70.     if (!config || !config.captionsUpdatePeriod) {
  71.       shaka.Deprecate.deprecateFeature(5,
  72.           'UITextDisplayer w/ config',
  73.           'Please migrate to initializing UITextDisplayer with a config.');
  74.     }
  76.     /** @private {number} */
  77.     const updatePeriod = (config && config.captionsUpdatePeriod) ?
  78.        config.captionsUpdatePeriod : 0.25;
  80.     /** @private {shaka.util.Timer} */
  81.     this.captionsTimer_ = new shaka.util.Timer(() => {
  82.       if (!this.video_.paused) {
  83.         this.updateCaptions_();
  84.       }
  85.     }).tickEvery(updatePeriod);
  87.     /**
  88.      * Maps cues to cue elements. Specifically points out the wrapper element of
  89.      * the cue (e.g. the HTML element to put nested cues inside).
  90.      * @private {Map.<!shaka.text.Cue, !{
  91.      *   cueElement: !HTMLElement,
  92.      *   regionElement: HTMLElement,
  93.      *   wrapper: !HTMLElement
  94.      * }>}
  95.      */
  96.     this.currentCuesMap_ = new Map();
  98.     /** @private {shaka.util.EventManager} */
  99.     this.eventManager_ = new shaka.util.EventManager();
  101.     this.eventManager_.listen(document, 'fullscreenchange', () => {
  102.       this.updateCaptions_(/* forceUpdate= */ true);
  103.     });
  105.     this.eventManager_.listen(this.video_, 'seeking', () => {
  106.       this.updateCaptions_(/* forceUpdate= */ true);
  107.     });
  109.     // From: https://html.spec.whatwg.org/multipage/media.html#dom-video-videowidth
  110.     // Whenever the natural width or natural height of the video changes
  111.     // (including, for example, because the selected video track was changed),
  112.     // if the element's readyState attribute is not HAVE_NOTHING, the user
  113.     // agent must queue a media element task given the media element to fire an
  114.     // event named resize at the media element.
  115.     this.eventManager_.listen(this.video_, 'resize', () => {
  116.       const element = /** @type {!HTMLVideoElement} */ (this.video_);
  117.       const width = element.videoWidth;
  118.       const height = element.videoHeight;
  119.       if (width && height) {
  120.         this.aspectRatio_ = width / height;
  121.       } else {
  122.         this.aspectRatio_ = null;
  123.       }
  124.     });
  126.     /** @private {ResizeObserver} */
  127.     this.resizeObserver_ = null;
  128.     if ('ResizeObserver' in window) {
  129.       this.resizeObserver_ = new ResizeObserver(() => {
  130.         this.updateCaptions_(/* forceUpdate= */ true);
  131.       });
  132.       this.resizeObserver_.observe(this.textContainer_);
  133.     }
  135.     /** @private {Map.<string, !HTMLElement>} */
  136.     this.regionElements_ = new Map();
  137.   }
  140.   /**
  141.    * @override
  142.    * @export
  143.    */
  144.   configure(config) {
  145.     if (this.captionsTimer_) {
  146.       this.captionsTimer_.tickEvery(config.captionsUpdatePeriod);
  147.     }
  148.   }
  151.   /**
  152.    * @override
  153.    * @export
  154.    */
  155.   append(cues) {
  156.     // Clone the cues list for performace optimization. We can avoid the cues
  157.     // list growing during the comparisons for duplicate cues.
  158.     // See: https://github.com/shaka-project/shaka-player/issues/3018
  159.     const cuesList = [...this.cues_];
  160.     for (const cue of shaka.text.Utils.removeDuplicates(cues)) {
  161.       // When a VTT cue spans a segment boundary, the cue will be duplicated
  162.       // into two segments.
  163.       // To avoid displaying duplicate cues, if the current cue list already
  164.       // contains the cue, skip it.
  165.       const containsCue = cuesList.some(
  166.           (cueInList) => shaka.text.Cue.equal(cueInList, cue));
  167.       if (!containsCue) {
  168.         this.cues_.push(cue);
  169.       }
  170.     }
  172.     this.updateCaptions_();
  173.   }
  176.   /**
  177.    * @override
  178.    * @export
  179.    */
  180.   destroy() {
  181.     // Return resolved promise if destroy() has been called.
  182.     if (!this.textContainer_) {
  183.       return Promise.resolve();
  184.     }
  186.     // Remove the text container element from the UI.
  187.     this.videoContainer_.removeChild(this.textContainer_);
  188.     this.textContainer_ = null;
  190.     this.isTextVisible_ = false;
  191.     this.cues_ = [];
  192.     if (this.captionsTimer_) {
  193.       this.captionsTimer_.stop();
  194.     }
  196.     this.currentCuesMap_.clear();
  198.     // Tear-down the event manager to ensure messages stop moving around.
  199.     if (this.eventManager_) {
  200.       this.eventManager_.release();
  201.       this.eventManager_ = null;
  202.     }
  204.     if (this.resizeObserver_) {
  205.       this.resizeObserver_.disconnect();
  206.       this.resizeObserver_ = null;
  207.     }
  209.     return Promise.resolve();
  210.   }
  213.   /**
  214.    * @override
  215.    * @export
  216.    */
  217.   remove(start, end) {
  218.     // Return false if destroy() has been called.
  219.     if (!this.textContainer_) {
  220.       return false;
  221.     }
  223.     // Remove the cues out of the time range.
  224.     const oldNumCues = this.cues_.length;
  225.     this.cues_ = this.cues_.filter(
  226.         (cue) => cue.startTime < start || cue.endTime >= end);
  227.     // If anything was actually removed in this process, force the captions to
  228.     // update. This makes sure that the currently-displayed cues will stop
  229.     // displaying if removed (say, due to the user changing languages).
  230.     const forceUpdate = oldNumCues > this.cues_.length;
  231.     this.updateCaptions_(forceUpdate);
  233.     return true;
  234.   }
  237.   /**
  238.    * @override
  239.    * @export
  240.    */
  241.   isTextVisible() {
  242.     return this.isTextVisible_;
  243.   }
  245.   /**
  246.    * @override
  247.    * @export
  248.    */
  249.   setTextVisibility(on) {
  250.     this.isTextVisible_ = on;
  251.   }
  253.   /**
  254.    * @private
  255.    */
  256.   isElementUnderTextContainer_(elemToCheck) {
  257.     while (elemToCheck != null) {
  258.       if (elemToCheck == this.textContainer_) {
  259.         return true;
  260.       }
  261.       elemToCheck = elemToCheck.parentElement;
  262.     }
  263.     return false;
  264.   }
  266.   /**
  267.    * @param {!Array.<!shaka.text.Cue>} cues
  268.    * @param {!HTMLElement} container
  269.    * @param {number} currentTime
  270.    * @param {!Array.<!shaka.text.Cue>} parents
  271.    * @private
  272.    */
  273.   updateCuesRecursive_(cues, container, currentTime, parents) {
  274.     // Set to true if the cues have changed in some way, which will require
  275.     // DOM changes. E.g. if a cue was added or removed.
  276.     let updateDOM = false;
  277.     /**
  278.      * The elements to remove from the DOM.
  279.      * Some of these elements may be added back again, if their corresponding
  280.      * cue is in toPlant.
  281.      * These elements are only removed if updateDOM is true.
  282.      * @type {!Array.<!HTMLElement>}
  283.      */
  284.     const toUproot = [];
  285.     /**
  286.      * The cues whose corresponding elements should be in the DOM.
  287.      * Some of these might be new, some might have been displayed beforehand.
  288.      * These will only be added if updateDOM is true.
  289.      * @type {!Array.<!shaka.text.Cue>}
  290.      */
  291.     const toPlant = [];
  292.     for (const cue of cues) {
  293.       parents.push(cue);
  295.       let cueRegistry = this.currentCuesMap_.get(cue);
  296.       const shouldBeDisplayed =
  297.           cue.startTime <= currentTime && cue.endTime > currentTime;
  298.       let wrapper = cueRegistry ? cueRegistry.wrapper : null;
  300.       if (cueRegistry) {
  301.         // If the cues are replanted, all existing cues should be uprooted,
  302.         // even ones which are going to be planted again.
  303.         toUproot.push(cueRegistry.cueElement);
  305.         // Also uproot all displayed region elements.
  306.         if (cueRegistry.regionElement) {
  307.           toUproot.push(cueRegistry.regionElement);
  308.         }
  310.         // If the cue should not be displayed, remove it entirely.
  311.         if (!shouldBeDisplayed) {
  312.           // Since something has to be removed, we will need to update the DOM.
  313.           updateDOM = true;
  314.           this.currentCuesMap_.delete(cue);
  315.           cueRegistry = null;
  316.         }
  317.       }
  319.       if (shouldBeDisplayed) {
  320.         toPlant.push(cue);
  321.         if (!cueRegistry) {
  322.           // The cue has to be made!
  323.           this.createCue_(cue, parents);
  324.           cueRegistry = this.currentCuesMap_.get(cue);
  325.           wrapper = cueRegistry.wrapper;
  326.           updateDOM = true;
  327.         } else if (!this.isElementUnderTextContainer_(wrapper)) {
  328.           // We found that the wrapper needs to be in the DOM
  329.           updateDOM = true;
  330.         }
  331.       }
  333.       // Recursively check the nested cues, to see if they need to be added or
  334.       // removed.
  335.       // If wrapper is null, that means that the cue is not only not being
  336.       // displayed currently, it also was not removed this tick. So it's
  337.       // guaranteed that the children will neither need to be added nor removed.
  338.       if (cue.nestedCues.length > 0 && wrapper) {
  339.         this.updateCuesRecursive_(
  340.             cue.nestedCues, wrapper, currentTime, parents);
  341.       }
  343.       const topCue = parents.pop();
  344.       goog.asserts.assert(topCue == cue, 'Parent cues should be kept in order');
  345.     }
  347.     if (updateDOM) {
  348.       for (const element of toUproot) {
  349.         // NOTE: Because we uproot shared region elements, too, we might hit an
  350.         // element here that has no parent because we've already processed it.
  351.         if (element.parentElement) {
  352.           element.parentElement.removeChild(element);
  353.         }
  354.       }
  355.       toPlant.sort((a, b) => {
  356.         if (a.startTime != b.startTime) {
  357.           return a.startTime - b.startTime;
  358.         } else {
  359.           return a.endTime - b.endTime;
  360.         }
  361.       });
  362.       for (const cue of toPlant) {
  363.         const cueRegistry = this.currentCuesMap_.get(cue);
  364.         goog.asserts.assert(cueRegistry, 'cueRegistry should exist.');
  365.         if (cueRegistry.regionElement) {
  366.           if (cueRegistry.regionElement.contains(container)) {
  367.             cueRegistry.regionElement.removeChild(container);
  368.           }
  369.           container.appendChild(cueRegistry.regionElement);
  370.           cueRegistry.regionElement.appendChild(cueRegistry.cueElement);
  371.         } else {
  372.           container.appendChild(cueRegistry.cueElement);
  373.         }
  374.       }
  375.     }
  376.   }
  378.   /**
  379.    * Display the current captions.
  380.    * @param {boolean=} forceUpdate
  381.    * @private
  382.    */
  383.   updateCaptions_(forceUpdate = false) {
  384.     if (!this.textContainer_) {
  385.       return;
  386.     }
  388.     const currentTime = this.video_.currentTime;
  389.     if (!this.isTextVisible_ || forceUpdate) {
  390.       // Remove child elements from all regions.
  391.       for (const regionElement of this.regionElements_.values()) {
  392.         shaka.util.Dom.removeAllChildren(regionElement);
  393.       }
  394.       // Remove all top-level elements in the text container.
  395.       shaka.util.Dom.removeAllChildren(this.textContainer_);
  396.       // Clear the element maps.
  397.       this.currentCuesMap_.clear();
  398.       this.regionElements_.clear();
  399.     }
  400.     if (this.isTextVisible_) {
  401.       // Log currently attached cue elements for verification, later.
  402.       const previousCuesMap = new Map();
  403.       if (goog.DEBUG) {
  404.         for (const cue of this.currentCuesMap_.keys()) {
  405.           previousCuesMap.set(cue, this.currentCuesMap_.get(cue));
  406.         }
  407.       }
  409.       // Update the cues.
  410.       this.updateCuesRecursive_(
  411.           this.cues_, this.textContainer_, currentTime, /* parents= */ []);
  413.       if (goog.DEBUG) {
  414.         // Previously, we had an issue (#2076) where cues sometimes were not
  415.         // properly removed from the DOM. It is not clear if this issue still
  416.         // happens, so the previous fix for it has been changed to an assert.
  417.         for (const cue of previousCuesMap.keys()) {
  418.           if (!this.currentCuesMap_.has(cue)) {
  419.             // TODO: If the problem does not appear again, then we should remove
  420.             // this assert (and the previousCuesMap code) in Shaka v4.
  421.             const cueElement = previousCuesMap.get(cue).cueElement;
  422.             goog.asserts.assert(
  423.                 !cueElement.parentNode, 'Cue was not properly removed!');
  424.           }
  425.         }
  426.       }
  427.     }
  428.   }
  430.   /**
  431.    * Compute a unique internal id:
  432.    * Regions can reuse the id but have different dimensions, we need to
  433.    * consider those differences
  434.    * @param {shaka.text.CueRegion} region
  435.    * @private
  436.    */
  437.   generateRegionId_(region) {
  438.     const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
  439.     const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
  440.     const viewportAnchorUnit =
  441.         region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
  442.     const uniqueRegionId = `${region.id}_${
  443.       region.width}x${region.height}${heightUnit}-${
  444.       region.viewportAnchorX}x${region.viewportAnchorY}${viewportAnchorUnit}`;
  446.     return uniqueRegionId;
  447.   }
  449.   /**
  450.    * Get or create a region element corresponding to the cue region.  These are
  451.    * cached by ID.
  452.    *
  453.    * @param {!shaka.text.Cue} cue
  454.    * @return {!HTMLElement}
  455.    * @private
  456.    */
  457.   getRegionElement_(cue) {
  458.     const region = cue.region;
  459.     // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#caption-window-size
  460.     // if aspect ratio is 4/3, use that value, otherwise, use the 16:9 value
  461.     const lineWidthMultiple = this.aspectRatio_ === 4/3 ? 2.5 : 1.9;
  462.     const lineHeightMultiple = 5.33;
  464.     const regionId = this.generateRegionId_(region);
  465.     if (this.regionElements_.has(regionId)) {
  466.       return this.regionElements_.get(regionId);
  467.     }
  469.     const regionElement = shaka.util.Dom.createHTMLElement('span');
  471.     const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
  472.     const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
  473.     const widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
  474.     const viewportAnchorUnit =
  475.         region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
  477.     regionElement.id = 'shaka-text-region---' + regionId;
  478.     regionElement.classList.add('shaka-text-region');
  480.     regionElement.style.position = 'absolute';
  482.     const linesUnit = shaka.text.CueRegion.units.LINES;
  483.     if (region.heightUnits === linesUnit && region.widthUnits === linesUnit) {
  484.       regionElement.style.height = region.height * lineHeightMultiple + '%';
  485.       regionElement.style.width = region.width * lineWidthMultiple + '%';
  486.     } else {
  487.       regionElement.style.height = region.height + heightUnit;
  488.       regionElement.style.width = region.width + widthUnit;
  489.     }
  491.     if (region.viewportAnchorUnits === linesUnit) {
  492.       // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-708
  493.       let top = region.viewportAnchorY / 75 * 100;
  494.       const windowWidth = this.aspectRatio_ === 4/3 ? 160 : 210;
  495.       let left = region.viewportAnchorX / windowWidth * 100;
  496.       // adjust top and left values based on the region anchor and window size
  497.       top -= region.regionAnchorY * region.height * lineHeightMultiple / 100;
  498.       left -= region.regionAnchorX * region.width * lineWidthMultiple / 100;
  499.       regionElement.style.top = top + '%';
  500.       regionElement.style.left = left + '%';
  501.     } else {
  502.       regionElement.style.top = region.viewportAnchorY -
  503.         region.regionAnchorY * region.height / 100 + viewportAnchorUnit;
  504.       regionElement.style.left = region.viewportAnchorX -
  505.         region.regionAnchorX * region.width / 100 + viewportAnchorUnit;
  506.     }
  508.     regionElement.style.display = 'flex';
  509.     regionElement.style.flexDirection = 'column';
  510.     regionElement.style.alignItems = 'center';
  512.     if (cue.displayAlign == shaka.text.Cue.displayAlign.BEFORE) {
  513.       regionElement.style.justifyContent = 'flex-start';
  514.     } else if (cue.displayAlign == shaka.text.Cue.displayAlign.CENTER) {
  515.       regionElement.style.justifyContent = 'center';
  516.     } else {
  517.       regionElement.style.justifyContent = 'flex-end';
  518.     }
  520.     this.regionElements_.set(regionId, regionElement);
  521.     return regionElement;
  522.   }
  524.   /**
  525.    * Creates the object for a cue.
  526.    *
  527.    * @param {!shaka.text.Cue} cue
  528.    * @param {!Array.<!shaka.text.Cue>} parents
  529.    * @private
  530.    */
  531.   createCue_(cue, parents) {
  532.     const isNested = parents.length > 1;
  533.     let type = isNested ? 'span' : 'div';
  534.     if (cue.lineBreak) {
  535.       type = 'br';
  536.     }
  537.     if (cue.rubyTag) {
  538.       type = cue.rubyTag;
  539.     }
  541.     const needWrapper = !isNested && cue.nestedCues.length > 0;
  543.     // Nested cues are inline elements.  Top-level cues are block elements.
  544.     const cueElement = shaka.util.Dom.createHTMLElement(type);
  545.     if (type != 'br') {
  546.       this.setCaptionStyles_(cueElement, cue, parents, needWrapper);
  547.     }
  549.     let regionElement = null;
  550.     if (cue.region && cue.region.id) {
  551.       regionElement = this.getRegionElement_(cue);
  552.     }
  554.     let wrapper = cueElement;
  555.     if (needWrapper) {
  556.       // Create a wrapper element which will serve to contain all children into
  557.       // a single item.  This ensures that nested span elements appear
  558.       // horizontally and br elements occupy no vertical space.
  559.       wrapper = shaka.util.Dom.createHTMLElement('span');
  560.       wrapper.classList.add('shaka-text-wrapper');
  561.       wrapper.style.backgroundColor = cue.backgroundColor;
  562.       wrapper.style.lineHeight = 'normal';
  563.       cueElement.appendChild(wrapper);
  564.     }
  566.     this.currentCuesMap_.set(cue, {cueElement, wrapper, regionElement});
  567.   }
  569.   /**
  570.    * Compute cue position alignment
  571.    * See https://www.w3.org/TR/webvtt1/#webvtt-cue-position-alignment
  572.    *
  573.    * @param {!shaka.text.Cue} cue
  574.    * @private
  575.    */
  576.   computeCuePositionAlignment_(cue) {
  577.     const Cue = shaka.text.Cue;
  578.     const {direction, positionAlign, textAlign} = cue;
  580.     if (positionAlign !== Cue.positionAlign.AUTO) {
  581.       // Position align is not AUTO: use it
  582.       return positionAlign;
  583.     }
  585.     // Position align is AUTO: use text align to compute its value
  587.     if (textAlign === Cue.textAlign.LEFT ||
  588.       (textAlign === Cue.textAlign.START &&
  589.         direction === Cue.direction.HORIZONTAL_LEFT_TO_RIGHT) ||
  590.       (textAlign === Cue.textAlign.END &&
  591.         direction === Cue.direction.HORIZONTAL_RIGHT_TO_LEFT)) {
  592.       return Cue.positionAlign.LEFT;
  593.     }
  595.     if (textAlign === Cue.textAlign.RIGHT ||
  596.       (textAlign === Cue.textAlign.START &&
  597.         direction === Cue.direction.HORIZONTAL_RIGHT_TO_LEFT) ||
  598.       (textAlign === Cue.textAlign.END &&
  599.         direction === Cue.direction.HORIZONTAL_LEFT_TO_RIGHT)) {
  600.       return Cue.positionAlign.RIGHT;
  601.     }
  603.     return Cue.positionAlign.CENTER;
  604.   }
  606.   /**
  607.    * @param {!HTMLElement} cueElement
  608.    * @param {!shaka.text.Cue} cue
  609.    * @param {!Array.<!shaka.text.Cue>} parents
  610.    * @param {boolean} hasWrapper
  611.    * @private
  612.    */
  613.   setCaptionStyles_(cueElement, cue, parents, hasWrapper) {
  614.     const Cue = shaka.text.Cue;
  615.     const inherit =
  616.         (cb) => shaka.text.UITextDisplayer.inheritProperty_(parents, cb);
  617.     const style = cueElement.style;
  618.     const isLeaf = cue.nestedCues.length == 0;
  619.     const isNested = parents.length > 1;
  621.     // TODO: wrapLine is not yet supported.  Lines always wrap.
  623.     // White space should be preserved if emitted by the text parser.  It's the
  624.     // job of the parser to omit any whitespace that should not be displayed.
  625.     // Using 'pre-wrap' means that whitespace is preserved even at the end of
  626.     // the text, but that lines which overflow can still be broken.
  627.     style.whiteSpace = 'pre-wrap';
  629.     // Using 'break-spaces' would be better, as it would preserve even trailing
  630.     // spaces, but that only shipped in Chrome 76.  As of July 2020, Safari
  631.     // still has not implemented break-spaces, and the original Chromecast will
  632.     // never have this feature since it no longer gets firmware updates.
  633.     // So we need to replace trailing spaces with non-breaking spaces.
  634.     const text = cue.payload.replace(/\s+$/g, (match) => {
  635.       const nonBreakingSpace = '\xa0';
  636.       return nonBreakingSpace.repeat(match.length);
  637.     });
  639.     style.webkitTextStrokeColor = cue.textStrokeColor;
  640.     style.webkitTextStrokeWidth = cue.textStrokeWidth;
  641.     style.color = cue.color;
  642.     style.direction = cue.direction;
  643.     style.opacity = cue.opacity;
  644.     style.paddingLeft = shaka.text.UITextDisplayer.convertLengthValue_(
  645.         cue.linePadding, cue, this.videoContainer_);
  646.     style.paddingRight =
  647.         shaka.text.UITextDisplayer.convertLengthValue_(
  648.             cue.linePadding, cue, this.videoContainer_);
  649.     style.textCombineUpright = cue.textCombineUpright;
  650.     style.textShadow = cue.textShadow;
  652.     if (cue.backgroundImage) {
  653.       style.backgroundImage = 'url(\'' + cue.backgroundImage + '\')';
  654.       style.backgroundRepeat = 'no-repeat';
  655.       style.backgroundSize = 'contain';
  656.       style.backgroundPosition = 'center';
  658.       if (cue.backgroundColor) {
  659.         style.backgroundColor = cue.backgroundColor;
  660.       }
  662.       // Quoting https://www.w3.org/TR/ttml-imsc1.2/:
  663.       // "The width and height (in pixels) of the image resource referenced by
  664.       // smpte:backgroundImage SHALL be equal to the width and height expressed
  665.       // by the tts:extent attribute of the region in which the div element is
  666.       // presented".
  667.       style.width = '100%';
  668.       style.height = '100%';
  669.     } else {
  670.       // If we have both text and nested cues, then style everything; otherwise
  671.       // place the text in its own <span> so the background doesn't fill the
  672.       // whole region.
  673.       let elem;
  674.       if (cue.nestedCues.length) {
  675.         elem = cueElement;
  676.       } else {
  677.         elem = shaka.util.Dom.createHTMLElement('span');
  678.         cueElement.appendChild(elem);
  679.       }
  681.       if (cue.border) {
  682.         elem.style.border = cue.border;
  683.       }
  684.       if (!hasWrapper) {
  685.         const bgColor = inherit((c) => c.backgroundColor);
  686.         if (bgColor) {
  687.           elem.style.backgroundColor = bgColor;
  688.         } else if (text) {
  689.           // If there is no background, default to a semi-transparent black.
  690.           // Only do this for the text itself.
  691.           elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  692.         }
  693.         const fontFamily = inherit((c) => c.fontFamily);
  694.         if (fontFamily) {
  695.           elem.style.fontFamily = fontFamily;
  696.         }
  697.       }
  698.       if (text) {
  699.         elem.textContent = text;
  700.       }
  701.     }
  703.     // The displayAlign attribute specifies the vertical alignment of the
  704.     // captions inside the text container. Before means at the top of the
  705.     // text container, and after means at the bottom.
  706.     if (isNested && !parents[parents.length - 1].isContainer) {
  707.       style.display = 'inline';
  708.     } else {
  709.       style.display = 'flex';
  710.       style.flexDirection = 'column';
  711.       style.alignItems = 'center';
  713.       if (cue.displayAlign == Cue.displayAlign.BEFORE) {
  714.         style.justifyContent = 'flex-start';
  715.       } else if (cue.displayAlign == Cue.displayAlign.CENTER) {
  716.         style.justifyContent = 'center';
  717.       } else {
  718.         style.justifyContent = 'flex-end';
  719.       }
  720.     }
  722.     if (!isLeaf) {
  723.       style.margin = '0';
  724.     }
  726.     style.fontFamily = cue.fontFamily;
  727.     style.fontWeight = cue.fontWeight.toString();
  728.     style.fontStyle = cue.fontStyle;
  729.     style.letterSpacing = cue.letterSpacing;
  730.     style.fontSize = shaka.text.UITextDisplayer.convertLengthValue_(
  731.         cue.fontSize, cue, this.videoContainer_);
  733.     // The line attribute defines the positioning of the text container inside
  734.     // the video container.
  735.     // - The line offsets the text container from the top, the right or left of
  736.     //   the video viewport as defined by the writing direction.
  737.     // - The value of the line is either as a number of lines, or a percentage
  738.     //   of the video viewport height or width.
  739.     // The lineAlign is an alignment for the text container's line.
  740.     // - The Start alignment means the text container’s top side (for horizontal
  741.     //   cues), left side (for vertical growing right), or right side (for
  742.     //   vertical growing left) is aligned at the line.
  743.     // - The Center alignment means the text container is centered at the line
  744.     //   (to be implemented).
  745.     // - The End Alignment means The text container’s bottom side (for
  746.     //   horizontal cues), right side (for vertical growing right), or left side
  747.     //   (for vertical growing left) is aligned at the line.
  748.     // TODO: Implement line alignment with line number.
  749.     // TODO: Implement lineAlignment of 'CENTER'.
  750.     let line = cue.line;
  751.     if (line != null) {
  752.       let lineInterpretation = cue.lineInterpretation;
  753.       // HACK: the current implementation of UITextDisplayer only handled
  754.       // PERCENTAGE, so we need convert LINE_NUMBER to PERCENTAGE
  755.       if (lineInterpretation == Cue.lineInterpretation.LINE_NUMBER) {
  756.         lineInterpretation = Cue.lineInterpretation.PERCENTAGE;
  757.         let maxLines = 16;
  758.         // The maximum number of lines is different if it is a vertical video.
  759.         if (this.aspectRatio_ && this.aspectRatio_ < 1) {
  760.           maxLines = 32;
  761.         }
  762.         if (line < 0) {
  763.           line = 100 + line / maxLines * 100;
  764.         } else {
  765.           line = line / maxLines * 100;
  766.         }
  767.       }
  768.       if (lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
  769.         style.position = 'absolute';
  770.         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  771.           style.width = '100%';
  772.           if (cue.lineAlign == Cue.lineAlign.START) {
  773.             style.top = line + '%';
  774.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  775.             style.bottom = (100 - line) + '%';
  776.           }
  777.         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
  778.           style.height = '100%';
  779.           if (cue.lineAlign == Cue.lineAlign.START) {
  780.             style.left = line + '%';
  781.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  782.             style.right = (100 - line) + '%';
  783.           }
  784.         } else {
  785.           style.height = '100%';
  786.           if (cue.lineAlign == Cue.lineAlign.START) {
  787.             style.right = line + '%';
  788.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  789.             style.left = (100 - line) + '%';
  790.           }
  791.         }
  792.       }
  793.     }
  795.     style.lineHeight = cue.lineHeight;
  797.     // The position defines the indent of the text container in the
  798.     // direction defined by the writing direction.
  799.     if (cue.position != null) {
  800.       if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  801.         style.paddingLeft = cue.position;
  802.       } else {
  803.         style.paddingTop = cue.position;
  804.       }
  805.     }
  807.     // The positionAlign attribute is an alignment for the text container in
  808.     // the dimension of the writing direction.
  809.     const computedPositionAlign = this.computeCuePositionAlignment_(cue);
  810.     if (computedPositionAlign == Cue.positionAlign.LEFT) {
  811.       style.cssFloat = 'left';
  812.     } else if (computedPositionAlign == Cue.positionAlign.RIGHT) {
  813.       style.cssFloat = 'right';
  814.     }
  816.     style.textAlign = cue.textAlign;
  817.     style.textDecoration = cue.textDecoration.join(' ');
  818.     style.writingMode = cue.writingMode;
  820.     // Old versions of Chromium, which may be found in certain versions of Tizen
  821.     // and WebOS, may require the prefixed version: webkitWritingMode.
  822.     // https://caniuse.com/css-writing-mode
  823.     // However, testing shows that Tizen 3, at least, has a 'writingMode'
  824.     // property, but the setter for it does nothing.  Therefore we need to
  825.     // detect that and fall back to the prefixed version in this case, too.
  826.     if (!('writingMode' in document.documentElement.style) ||
  827.         style.writingMode != cue.writingMode) {
  828.       // Note that here we do not bother to check for webkitWritingMode support
  829.       // explicitly.  We try the unprefixed version, then fall back to the
  830.       // prefixed version unconditionally.
  831.       style.webkitWritingMode = cue.writingMode;
  832.     }
  834.     // The size is a number giving the size of the text container, to be
  835.     // interpreted as a percentage of the video, as defined by the writing
  836.     // direction.
  837.     if (cue.size) {
  838.       if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  839.         style.width = cue.size + '%';
  840.       } else {
  841.         style.height = cue.size + '%';
  842.       }
  843.     }
  844.   }
  846.   /**
  847.    * Returns info about provided lengthValue
  848.    * @example 100px => { value: 100, unit: 'px' }
  849.    * @param {?string} lengthValue
  850.    *
  851.    * @return {?{ value: number, unit: string }}
  852.    * @private
  853.    */
  854.   static getLengthValueInfo_(lengthValue) {
  855.     const matches = new RegExp(/(\d*\.?\d+)([a-z]+|%+)/).exec(lengthValue);
  857.     if (!matches) {
  858.       return null;
  859.     }
  861.     return {
  862.       value: Number(matches[1]),
  863.       unit: matches[2],
  864.     };
  865.   }
  867.   /**
  868.    * Converts length value to an absolute value in pixels.
  869.    * If lengthValue is already an absolute value it will not
  870.    * be modified. Relative lengthValue will be converted to an
  871.    * absolute value in pixels based on Computed Cell Size
  872.    *
  873.    * @param {string} lengthValue
  874.    * @param {!shaka.text.Cue} cue
  875.    * @param {HTMLElement} videoContainer
  876.    * @return {string}
  877.    * @private
  878.   */
  879.   static convertLengthValue_(lengthValue, cue, videoContainer) {
  880.     const lengthValueInfo =
  881.         shaka.text.UITextDisplayer.getLengthValueInfo_(lengthValue);
  883.     if (!lengthValueInfo) {
  884.       return lengthValue;
  885.     }
  887.     const {unit, value} = lengthValueInfo;
  889.     switch (unit) {
  890.       case '%':
  891.         return shaka.text.UITextDisplayer.getAbsoluteLengthInPixels_(
  892.             value / 100, cue, videoContainer);
  893.       case 'c':
  894.         return shaka.text.UITextDisplayer.getAbsoluteLengthInPixels_(
  895.             value, cue, videoContainer);
  896.       default:
  897.         return lengthValue;
  898.     }
  899.   }
  901.   /**
  902.    * Returns computed absolute length value in pixels based on cell
  903.    * and a video container size
  904.    * @param {number} value
  905.    * @param {!shaka.text.Cue} cue
  906.    * @param {HTMLElement} videoContainer
  907.    * @return {string}
  908.    *
  909.    * @private
  910.    * */
  911.   static getAbsoluteLengthInPixels_(value, cue, videoContainer) {
  912.     const containerHeight = videoContainer.clientHeight;
  914.     return (containerHeight * value / cue.cellResolution.rows) + 'px';
  915.   }
  917.   /**
  918.    * Inherits a property from the parent Cue elements.  If the value is falsy,
  919.    * it is assumed to be inherited from the parent. This returns null if the
  920.    * value isn't found.
  921.    *
  922.    * @param {!Array.<!shaka.text.Cue>} parents
  923.    * @param {function(!shaka.text.Cue):?T} cb
  924.    * @return {?T}
  925.    * @template T
  926.    * @private
  927.    */
  928.   static inheritProperty_(parents, cb) {
  929.     for (let i = parents.length - 1; i >= 0; i--) {
  930.       const val = cb(parents[i]);
  931.       if (val || val === 0) {
  932.         return val;
  933.       }
  934.     }
  935.     return null;
  936.   }
  937. };