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.util.Dom');
  15. goog.require('shaka.util.EventManager');
  16. goog.require('shaka.util.Timer');
  19. /**
  20.  * The text displayer plugin for the Shaka Player UI.  Can also be used directly
  21.  * by providing an appropriate container element.
  22.  *
  23.  * @implements {shaka.extern.TextDisplayer}
  24.  * @final
  25.  * @export
  26.  */
  27. shaka.text.UITextDisplayer = class {
  28.   /**
  29.    * Constructor.
  30.    * @param {HTMLMediaElement} video
  31.    * @param {HTMLElement} videoContainer
  32.    */
  33.   constructor(video, videoContainer) {
  34.     goog.asserts.assert(videoContainer, 'videoContainer should be valid.');
  36.     /** @private {boolean} */
  37.     this.isTextVisible_ = false;
  39.     /** @private {!Array.<!shaka.text.Cue>} */
  40.     this.cues_ = [];
  42.     /** @private {HTMLMediaElement} */
  43.     this.video_ = video;
  45.     /** @private {HTMLElement} */
  46.     this.videoContainer_ = videoContainer;
  48.     /** @type {HTMLElement} */
  49.     this.textContainer_ = shaka.util.Dom.createHTMLElement('div');
  50.     this.textContainer_.classList.add('shaka-text-container');
  52.     // Set the subtitles text-centered by default.
  53.     this.textContainer_.style.textAlign = 'center';
  55.     // Set the captions in the middle horizontally by default.
  56.     this.textContainer_.style.display = 'flex';
  57.     this.textContainer_.style.flexDirection = 'column';
  58.     this.textContainer_.style.alignItems = 'center';
  60.     // Set the captions at the bottom by default.
  61.     this.textContainer_.style.justifyContent = 'flex-end';
  63.     this.videoContainer_.appendChild(this.textContainer_);
  65.     /**
  66.      * The captions' update period in seconds.
  67.      * @private {number}
  68.      */
  69.     const updatePeriod = 0.25;
  71.     /** @private {shaka.util.Timer} */
  72.     this.captionsTimer_ = new shaka.util.Timer(() => {
  73.       this.updateCaptions_();
  74.     }).tickEvery(updatePeriod);
  76.     /**
  77.      * Maps cues to cue elements. Specifically points out the wrapper element of
  78.      * the cue (e.g. the HTML element to put nested cues inside).
  79.      * @private {Map.<!shaka.extern.Cue, !{
  80.      *   cueElement: !HTMLElement,
  81.      *   regionElement: HTMLElement,
  82.      *   wrapper: !HTMLElement
  83.      * }>}
  84.      */
  85.     this.currentCuesMap_ = new Map();
  87.     /** @private {shaka.util.EventManager} */
  88.     this.eventManager_ = new shaka.util.EventManager();
  90.     this.eventManager_.listen(document, 'fullscreenchange', () => {
  91.       this.updateCaptions_(/* forceUpdate= */ true);
  92.     });
  94.     /** @private {ResizeObserver} */
  95.     this.resizeObserver_ = null;
  96.     if ('ResizeObserver' in window) {
  97.       this.resizeObserver_ = new ResizeObserver(() => {
  98.         this.updateCaptions_(/* forceUpdate= */ true);
  99.       });
  100.       this.resizeObserver_.observe(this.textContainer_);
  101.     }
  103.     /** @private {Map.<string, !HTMLElement>} */
  104.     this.regionElements_ = new Map();
  105.   }
  108.   /**
  109.    * @override
  110.    * @export
  111.    */
  112.   append(cues) {
  113.     // Clone the cues list for performace optimization. We can avoid the cues
  114.     // list growing during the comparisons for duplicate cues.
  115.     // See: https://github.com/shaka-project/shaka-player/issues/3018
  116.     const cuesList = [...this.cues_];
  117.     for (const cue of cues) {
  118.       // When a VTT cue spans a segment boundary, the cue will be duplicated
  119.       // into two segments.
  120.       // To avoid displaying duplicate cues, if the current cue list already
  121.       // contains the cue, skip it.
  122.       const containsCue = cuesList.some(
  123.           (cueInList) => shaka.text.Cue.equal(cueInList, cue));
  124.       if (!containsCue) {
  125.         this.cues_.push(cue);
  126.       }
  127.     }
  129.     this.updateCaptions_();
  130.   }
  133.   /**
  134.    * @override
  135.    * @export
  136.    */
  137.   destroy() {
  138.     // Remove the text container element from the UI.
  139.     this.videoContainer_.removeChild(this.textContainer_);
  140.     this.textContainer_ = null;
  142.     this.isTextVisible_ = false;
  143.     this.cues_ = [];
  144.     if (this.captionsTimer_) {
  145.       this.captionsTimer_.stop();
  146.     }
  148.     this.currentCuesMap_.clear();
  150.     // Tear-down the event manager to ensure messages stop moving around.
  151.     if (this.eventManager_) {
  152.       this.eventManager_.release();
  153.       this.eventManager_ = null;
  154.     }
  156.     if (this.resizeObserver_) {
  157.       this.resizeObserver_.disconnect();
  158.       this.resizeObserver_ = null;
  159.     }
  160.   }
  163.   /**
  164.    * @override
  165.    * @export
  166.    */
  167.   remove(start, end) {
  168.     // Return false if destroy() has been called.
  169.     if (!this.textContainer_) {
  170.       return false;
  171.     }
  173.     // Remove the cues out of the time range.
  174.     const oldNumCues = this.cues_.length;
  175.     this.cues_ = this.cues_.filter(
  176.         (cue) => cue.startTime < start || cue.endTime >= end);
  177.     // If anything was actually removed in this process, force the captions to
  178.     // update. This makes sure that the currently-displayed cues will stop
  179.     // displaying if removed (say, due to the user changing languages).
  180.     const forceUpdate = oldNumCues > this.cues_.length;
  181.     this.updateCaptions_(forceUpdate);
  183.     return true;
  184.   }
  187.   /**
  188.    * @override
  189.    * @export
  190.    */
  191.   isTextVisible() {
  192.     return this.isTextVisible_;
  193.   }
  195.   /**
  196.    * @override
  197.    * @export
  198.    */
  199.   setTextVisibility(on) {
  200.     this.isTextVisible_ = on;
  201.   }
  203.   /**
  204.    * @private
  205.    */
  206.   isElementUnderTextContainer_(elemToCheck) {
  207.     while (elemToCheck != null) {
  208.       if (elemToCheck == this.textContainer_) {
  209.         return true;
  210.       }
  211.       elemToCheck = elemToCheck.parentElement;
  212.     }
  213.     return false;
  214.   }
  216.   /**
  217.    * @param {!Array.<!shaka.extern.Cue>} cues
  218.    * @param {!HTMLElement} container
  219.    * @param {number} currentTime
  220.    * @param {!Array.<!shaka.extern.Cue>} parents
  221.    * @private
  222.    */
  223.   updateCuesRecursive_(cues, container, currentTime, parents) {
  224.     // Set to true if the cues have changed in some way, which will require
  225.     // DOM changes. E.g. if a cue was added or removed.
  226.     let updateDOM = false;
  227.     /**
  228.      * The elements to remove from the DOM.
  229.      * Some of these elements may be added back again, if their corresponding
  230.      * cue is in toPlant.
  231.      * These elements are only removed if updateDOM is true.
  232.      * @type {!Array.<!HTMLElement>}
  233.      */
  234.     const toUproot = [];
  235.     /**
  236.      * The cues whose corresponding elements should be in the DOM.
  237.      * Some of these might be new, some might have been displayed beforehand.
  238.      * These will only be added if updateDOM is true.
  239.      * @type {!Array.<!shaka.extern.Cue>}
  240.      */
  241.     const toPlant = [];
  242.     for (const cue of cues) {
  243.       parents.push(cue);
  245.       let cueRegistry = this.currentCuesMap_.get(cue);
  246.       const shouldBeDisplayed =
  247.           cue.startTime <= currentTime && cue.endTime > currentTime;
  248.       let wrapper = cueRegistry ? cueRegistry.wrapper : null;
  250.       if (cueRegistry) {
  251.         // If the cues are replanted, all existing cues should be uprooted,
  252.         // even ones which are going to be planted again.
  253.         toUproot.push(cueRegistry.cueElement);
  255.         // Also uproot all displayed region elements.
  256.         if (cueRegistry.regionElement) {
  257.           toUproot.push(cueRegistry.regionElement);
  258.         }
  260.         // If the cue should not be displayed, remove it entirely.
  261.         if (!shouldBeDisplayed) {
  262.           // Since something has to be removed, we will need to update the DOM.
  263.           updateDOM = true;
  264.           this.currentCuesMap_.delete(cue);
  265.           cueRegistry = null;
  266.         }
  267.       }
  269.       if (shouldBeDisplayed) {
  270.         toPlant.push(cue);
  271.         if (!cueRegistry) {
  272.           // The cue has to be made!
  273.           this.createCue_(cue, parents);
  274.           cueRegistry = this.currentCuesMap_.get(cue);
  275.           wrapper = cueRegistry.wrapper;
  276.           updateDOM = true;
  277.         } else if (!this.isElementUnderTextContainer_(wrapper)) {
  278.           // We found that the wrapper needs to be in the DOM
  279.           updateDOM = true;
  280.         }
  281.       }
  283.       // Recursively check the nested cues, to see if they need to be added or
  284.       // removed.
  285.       // If wrapper is null, that means that the cue is not only not being
  286.       // displayed currently, it also was not removed this tick. So it's
  287.       // guaranteed that the children will neither need to be added nor removed.
  288.       if (cue.nestedCues.length > 0 && wrapper) {
  289.         this.updateCuesRecursive_(
  290.             cue.nestedCues, wrapper, currentTime, parents);
  291.       }
  293.       const topCue = parents.pop();
  294.       goog.asserts.assert(topCue == cue, 'Parent cues should be kept in order');
  295.     }
  297.     if (updateDOM) {
  298.       for (const element of toUproot) {
  299.         // NOTE: Because we uproot shared region elements, too, we might hit an
  300.         // element here that has no parent because we've already processed it.
  301.         if (element.parentElement) {
  302.           element.parentElement.removeChild(element);
  303.         }
  304.       }
  305.       toPlant.sort((a, b) => {
  306.         if (a.startTime != b.startTime) {
  307.           return a.startTime - b.startTime;
  308.         } else {
  309.           return a.endTime - b.endTime;
  310.         }
  311.       });
  312.       for (const cue of toPlant) {
  313.         const cueRegistry = this.currentCuesMap_.get(cue);
  314.         goog.asserts.assert(cueRegistry, 'cueRegistry should exist.');
  315.         if (cueRegistry.regionElement) {
  316.           container.appendChild(cueRegistry.regionElement);
  317.           cueRegistry.regionElement.appendChild(cueRegistry.cueElement);
  318.         } else {
  319.           container.appendChild(cueRegistry.cueElement);
  320.         }
  321.       }
  322.     }
  323.   }
  325.   /**
  326.    * Display the current captions.
  327.    * @param {boolean=} forceUpdate
  328.    * @private
  329.    */
  330.   updateCaptions_(forceUpdate = false) {
  331.     if (!this.textContainer_) {
  332.       return;
  333.     }
  335.     const currentTime = this.video_.currentTime;
  336.     if (!this.isTextVisible_ || forceUpdate) {
  337.       // Remove child elements from all regions.
  338.       for (const regionElement of this.regionElements_.values()) {
  339.         shaka.util.Dom.removeAllChildren(regionElement);
  340.       }
  341.       // Remove all top-level elements in the text container.
  342.       shaka.util.Dom.removeAllChildren(this.textContainer_);
  343.       // Clear the element maps.
  344.       this.currentCuesMap_.clear();
  345.       this.regionElements_.clear();
  346.     }
  347.     if (this.isTextVisible_) {
  348.       // Log currently attached cue elements for verification, later.
  349.       const previousCuesMap = new Map();
  350.       for (const cue of this.currentCuesMap_.keys()) {
  351.         previousCuesMap.set(cue, this.currentCuesMap_.get(cue));
  352.       }
  354.       // Update the cues.
  355.       this.updateCuesRecursive_(
  356.           this.cues_, this.textContainer_, currentTime, /* parents= */ []);
  358.       if (goog.DEBUG) {
  359.         // Previously, we had an issue (#2076) where cues sometimes were not
  360.         // properly removed from the DOM. It is not clear if this issue still
  361.         // happens, so the previous fix for it has been changed to an assert.
  362.         for (const cue of previousCuesMap.keys()) {
  363.           if (!this.currentCuesMap_.has(cue)) {
  364.             // TODO: If the problem does not appear again, then we should remove
  365.             // this assert (and the previousCuesMap code) in Shaka v4.
  366.             const cueElement = previousCuesMap.get(cue).cueElement;
  367.             goog.asserts.assert(
  368.                 !cueElement.parentNode, 'Cue was not properly removed!');
  369.           }
  370.         }
  371.       }
  372.     }
  373.   }
  375.   /**
  376.    * Get or create a region element corresponding to the cue region.  These are
  377.    * cached by ID.
  378.    *
  379.    * @param {!shaka.extern.Cue} cue
  380.    * @return {!HTMLElement}
  381.    * @private
  382.    */
  383.   getRegionElement_(cue) {
  384.     const region = cue.region;
  386.     if (this.regionElements_.has(region.id)) {
  387.       return this.regionElements_.get(region.id);
  388.     }
  390.     const regionElement = shaka.util.Dom.createHTMLElement('span');
  392.     const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
  393.     const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
  394.     const widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
  395.     const viewportAnchorUnit =
  396.         region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
  398.     regionElement.id = 'shaka-text-region---' + region.id;
  399.     regionElement.classList.add('shaka-text-region');
  401.     regionElement.style.height = region.height + heightUnit;
  402.     regionElement.style.width = region.width + widthUnit;
  403.     regionElement.style.position = 'absolute';
  404.     regionElement.style.top = region.viewportAnchorY + viewportAnchorUnit;
  405.     regionElement.style.left = region.viewportAnchorX + viewportAnchorUnit;
  407.     regionElement.style.display = 'flex';
  408.     regionElement.style.flexDirection = 'column';
  409.     regionElement.style.alignItems = 'center';
  411.     if (cue.displayAlign == shaka.text.Cue.displayAlign.BEFORE) {
  412.       regionElement.style.justifyContent = 'flex-start';
  413.     } else if (cue.displayAlign == shaka.text.Cue.displayAlign.CENTER) {
  414.       regionElement.style.justifyContent = 'center';
  415.     } else {
  416.       regionElement.style.justifyContent = 'flex-end';
  417.     }
  419.     this.regionElements_.set(region.id, regionElement);
  420.     return regionElement;
  421.   }
  423.   /**
  424.    * Creates the object for a cue.
  425.    *
  426.    * @param {!shaka.extern.Cue} cue
  427.    * @param {!Array.<!shaka.extern.Cue>} parents
  428.    * @private
  429.    */
  430.   createCue_(cue, parents) {
  431.     const isNested = parents.length > 1;
  432.     let type = isNested ? 'span' : 'div';
  433.     if (cue.lineBreak || cue.spacer) {
  434.       if (cue.spacer) {
  435.         shaka.Deprecate.deprecateFeature(4,
  436.             'shaka.extern.Cue',
  437.             'Please use lineBreak instead of spacer.');
  438.       }
  439.       type = 'br';
  440.     }
  442.     const needWrapper = !isNested && cue.nestedCues.length > 0;
  444.     // Nested cues are inline elements.  Top-level cues are block elements.
  445.     const cueElement = shaka.util.Dom.createHTMLElement(type);
  446.     if (type != 'br') {
  447.       this.setCaptionStyles_(cueElement, cue, parents, needWrapper);
  448.     }
  450.     let regionElement = null;
  451.     if (cue.region && cue.region.id) {
  452.       regionElement = this.getRegionElement_(cue);
  453.     }
  455.     let wrapper = cueElement;
  456.     if (needWrapper) {
  457.       // Create a wrapper element which will serve to contain all children into
  458.       // a single item.  This ensures that nested span elements appear
  459.       // horizontally and br elements occupy no vertical space.
  460.       wrapper = shaka.util.Dom.createHTMLElement('span');
  461.       wrapper.classList.add('shaka-text-wrapper');
  462.       wrapper.style.backgroundColor = cue.backgroundColor;
  463.       cueElement.appendChild(wrapper);
  464.     }
  466.     this.currentCuesMap_.set(cue, {cueElement, wrapper, regionElement});
  467.   }
  469.   /**
  470.    * @param {!HTMLElement} cueElement
  471.    * @param {!shaka.extern.Cue} cue
  472.    * @param {!Array.<!shaka.extern.Cue>} parents
  473.    * @param {boolean} hasWrapper
  474.    * @private
  475.    */
  476.   setCaptionStyles_(cueElement, cue, parents, hasWrapper) {
  477.     const Cue = shaka.text.Cue;
  478.     const inherit =
  479.         (cb) => shaka.text.UITextDisplayer.inheritProperty_(parents, cb);
  480.     const style = cueElement.style;
  481.     const isLeaf = cue.nestedCues.length == 0;
  482.     const isNested = parents.length > 1;
  484.     // TODO: wrapLine is not yet supported.  Lines always wrap.
  486.     // White space should be preserved if emitted by the text parser.  It's the
  487.     // job of the parser to omit any whitespace that should not be displayed.
  488.     // Using 'pre-wrap' means that whitespace is preserved even at the end of
  489.     // the text, but that lines which overflow can still be broken.
  490.     style.whiteSpace = 'pre-wrap';
  492.     // Using 'break-spaces' would be better, as it would preserve even trailing
  493.     // spaces, but that only shipped in Chrome 76.  As of July 2020, Safari
  494.     // still has not implemented break-spaces, and the original Chromecast will
  495.     // never have this feature since it no longer gets firmware updates.
  496.     // So we need to replace trailing spaces with non-breaking spaces.
  497.     const text = cue.payload.replace(/\s+$/g, (match) => {
  498.       const nonBreakingSpace = '\xa0';
  499.       return nonBreakingSpace.repeat(match.length);
  500.     });
  502.     style.webkitTextStrokeColor = cue.textStrokeColor;
  503.     style.webkitTextStrokeWidth = cue.textStrokeWidth;
  504.     style.color = cue.color;
  505.     style.direction = cue.direction;
  506.     style.opacity = cue.opacity;
  507.     style.paddingLeft = shaka.text.UITextDisplayer.convertLengthValue_(
  508.         cue.linePadding, cue, this.videoContainer_);
  509.     style.paddingRight =
  510.         shaka.text.UITextDisplayer.convertLengthValue_(
  511.             cue.linePadding, cue, this.videoContainer_);
  513.     if (cue.backgroundImage) {
  514.       style.backgroundImage = 'url(\'' + cue.backgroundImage + '\')';
  515.       style.backgroundRepeat = 'no-repeat';
  516.       style.backgroundSize = 'contain';
  517.       style.backgroundPosition = 'center';
  519.       // Quoting https://www.w3.org/TR/ttml-imsc1.2/:
  520.       // "The width and height (in pixels) of the image resource referenced by
  521.       // smpte:backgroundImage SHALL be equal to the width and height expressed
  522.       // by the tts:extent attribute of the region in which the div element is
  523.       // presented".
  524.       style.width = '100%';
  525.       style.height = '100%';
  526.     } else {
  527.       // If we have both text and nested cues, then style everything; otherwise
  528.       // place the text in its own <span> so the background doesn't fill the
  529.       // whole region.
  530.       let elem;
  531.       if (cue.nestedCues.length) {
  532.         elem = cueElement;
  533.       } else {
  534.         elem = shaka.util.Dom.createHTMLElement('span');
  535.         cueElement.appendChild(elem);
  536.       }
  538.       if (cue.border) {
  539.         elem.style.border = cue.border;
  540.       }
  541.       if (!hasWrapper) {
  542.         const bgColor = inherit((c) => c.backgroundColor);
  543.         if (bgColor) {
  544.           elem.style.backgroundColor = bgColor;
  545.         } else if (text) {
  546.           // If there is no background, default to a semi-transparent black.
  547.           // Only do this for the text itself.
  548.           elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  549.         }
  550.       }
  551.       if (text) {
  552.         elem.textContent = text;
  553.       }
  554.     }
  556.     // The displayAlign attribute specifies the vertical alignment of the
  557.     // captions inside the text container. Before means at the top of the
  558.     // text container, and after means at the bottom.
  559.     if (isNested && !parents[parents.length - 1].isContainer) {
  560.       style.display = 'inline';
  561.     } else {
  562.       style.display = 'flex';
  563.       style.flexDirection = 'column';
  564.       style.alignItems = 'center';
  566.       if (cue.displayAlign == Cue.displayAlign.BEFORE) {
  567.         style.justifyContent = 'flex-start';
  568.       } else if (cue.displayAlign == Cue.displayAlign.CENTER) {
  569.         style.justifyContent = 'center';
  570.       } else {
  571.         style.justifyContent = 'flex-end';
  572.       }
  573.     }
  575.     if (!isLeaf) {
  576.       style.margin = '0';
  577.     }
  579.     style.fontFamily = cue.fontFamily;
  580.     style.fontWeight = cue.fontWeight.toString();
  581.     style.fontStyle = cue.fontStyle;
  582.     style.letterSpacing = cue.letterSpacing;
  583.     style.fontSize = shaka.text.UITextDisplayer.convertLengthValue_(
  584.         cue.fontSize, cue, this.videoContainer_);
  586.     // The line attribute defines the positioning of the text container inside
  587.     // the video container.
  588.     // - The line offsets the text container from the top, the right or left of
  589.     //   the video viewport as defined by the writing direction.
  590.     // - The value of the line is either as a number of lines, or a percentage
  591.     //   of the video viewport height or width.
  592.     // The lineAlign is an alignment for the text container's line.
  593.     // - The Start alignment means the text container’s top side (for horizontal
  594.     //   cues), left side (for vertical growing right), or right side (for
  595.     //   vertical growing left) is aligned at the line.
  596.     // - The Center alignment means the text container is centered at the line
  597.     //   (to be implemented).
  598.     // - The End Alignment means The text container’s bottom side (for
  599.     //   horizontal cues), right side (for vertical growing right), or left side
  600.     //   (for vertical growing left) is aligned at the line.
  601.     // TODO: Implement line alignment with line number.
  602.     // TODO: Implement lineAlignment of 'CENTER'.
  603.     if (cue.line != null) {
  604.       if (cue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
  605.         // When setting absolute positioning, you need to set x/y/width/height
  606.         // so the element is positioned correctly.  Set these as default and
  607.         // other settings will override them.
  608.         style.position = 'absolute';
  609.         style.left = '0';
  610.         style.top = '0';
  611.         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  612.           style.width = '100%';
  613.           if (cue.lineAlign == Cue.lineAlign.START) {
  614.             style.top = cue.line + '%';
  615.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  616.             style.bottom = (100 - cue.line) + '%';
  617.           }
  618.         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
  619.           style.height = '100%';
  620.           if (cue.lineAlign == Cue.lineAlign.START) {
  621.             style.left = cue.line + '%';
  622.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  623.             style.right = (100 - cue.line) + '%';
  624.           }
  625.         } else {
  626.           style.height = '100%';
  627.           if (cue.lineAlign == Cue.lineAlign.START) {
  628.             style.right = cue.line + '%';
  629.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  630.             style.left = (100 - cue.line) + '%';
  631.           }
  632.         }
  633.       }
  634.     }
  636.     style.lineHeight = cue.lineHeight;
  638.     // The position defines the indent of the text container in the
  639.     // direction defined by the writing direction.
  640.     if (cue.position != null) {
  641.       if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  642.         style.paddingLeft = cue.position;
  643.       } else {
  644.         style.paddingTop = cue.position;
  645.       }
  646.     }
  648.     // The positionAlign attribute is an alignment for the text container in
  649.     // the dimension of the writing direction.
  650.     if (cue.positionAlign == Cue.positionAlign.LEFT) {
  651.       style.cssFloat = 'left';
  652.     } else if (cue.positionAlign == Cue.positionAlign.RIGHT) {
  653.       style.cssFloat = 'right';
  654.     }
  656.     style.textAlign = cue.textAlign;
  657.     style.textDecoration = cue.textDecoration.join(' ');
  658.     style.writingMode = cue.writingMode;
  660.     // Old versions of Chromium, which may be found in certain versions of Tizen
  661.     // and WebOS, may require the prefixed version: webkitWritingMode.
  662.     // https://caniuse.com/css-writing-mode
  663.     // However, testing shows that Tizen 3, at least, has a 'writingMode'
  664.     // property, but the setter for it does nothing.  Therefore we need to
  665.     // detect that and fall back to the prefixed version in this case, too.
  666.     if (!('writingMode' in document.documentElement.style) ||
  667.         style.writingMode != cue.writingMode) {
  668.       // Note that here we do not bother to check for webkitWritingMode support
  669.       // explicitly.  We try the unprefixed version, then fall back to the
  670.       // prefixed version unconditionally.
  671.       style.webkitWritingMode = cue.writingMode;
  672.     }
  674.     // The size is a number giving the size of the text container, to be
  675.     // interpreted as a percentage of the video, as defined by the writing
  676.     // direction.
  677.     if (cue.size) {
  678.       if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  679.         style.width = cue.size + '%';
  680.       } else {
  681.         style.height = cue.size + '%';
  682.       }
  683.     }
  684.   }
  686.   /**
  687.    * Returns info about provided lengthValue
  688.    * @example 100px => { value: 100, unit: 'px' }
  689.    * @param {?string} lengthValue
  690.    *
  691.    * @return {?{ value: number, unit: string }}
  692.    * @private
  693.    */
  694.   static getLengthValueInfo_(lengthValue) {
  695.     const matches = new RegExp(/(\d*\.?\d+)([a-z]+|%+)/).exec(lengthValue);
  697.     if (!matches) {
  698.       return null;
  699.     }
  701.     return {
  702.       value: Number(matches[1]),
  703.       unit: matches[2],
  704.     };
  705.   }
  707.   /**
  708.    * Converts length value to an absolute value in pixels.
  709.    * If lengthValue is already an absolute value it will not
  710.    * be modified. Relative lengthValue will be converted to an
  711.    * absolute value in pixels based on Computed Cell Size
  712.    *
  713.    * @param {string} lengthValue
  714.    * @param {!shaka.extern.Cue} cue
  715.    * @param {HTMLElement} videoContainer
  716.    * @return {string}
  717.    * @private
  718.   */
  719.   static convertLengthValue_(lengthValue, cue, videoContainer) {
  720.     const lengthValueInfo =
  721.         shaka.text.UITextDisplayer.getLengthValueInfo_(lengthValue);
  723.     if (!lengthValueInfo) {
  724.       return lengthValue;
  725.     }
  727.     const {unit, value} = lengthValueInfo;
  729.     switch (unit) {
  730.       case '%':
  731.         return shaka.text.UITextDisplayer.getAbsoluteLengthInPixels_(
  732.             value / 100, cue, videoContainer);
  733.       case 'c':
  734.         return shaka.text.UITextDisplayer.getAbsoluteLengthInPixels_(
  735.             value, cue, videoContainer);
  736.       default:
  737.         return lengthValue;
  738.     }
  739.   }
  741.   /**
  742.    * Returns computed absolute length value in pixels based on cell
  743.    * and a video container size
  744.    * @param {number} value
  745.    * @param {!shaka.extern.Cue} cue
  746.    * @param {HTMLElement} videoContainer
  747.    * @return {string}
  748.    *
  749.    * @private
  750.    * */
  751.   static getAbsoluteLengthInPixels_(value, cue, videoContainer) {
  752.     const containerHeight = videoContainer.clientHeight;
  754.     return (containerHeight * value / cue.cellResolution.rows) + 'px';
  755.   }
  757.   /**
  758.    * Inherits a property from the parent Cue elements.  If the value is falsy,
  759.    * it is assumed to be inherited from the parent. This returns null if the
  760.    * value isn't found.
  761.    *
  762.    * @param {!Array.<!shaka.extern.Cue>} parents
  763.    * @param {function(!shaka.extern.Cue):?T} cb
  764.    * @return {?T}
  765.    * @template T
  766.    * @private
  767.    */
  768.   static inheritProperty_(parents, cb) {
  769.     for (let i = parents.length - 1; i >= 0; i--) {
  770.       const val = cb(parents[i]);
  771.       if (val || val === 0) {
  772.         return val;
  773.       }
  774.     }
  775.     return null;
  776.   }
  777. };