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.log');
  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.    */
  34.   constructor(video, videoContainer) {
  35.     goog.asserts.assert(videoContainer, 'videoContainer should be valid.');
  37.     if (!document.fullscreenEnabled) {
  38.       shaka.log.alwaysWarn('Using UITextDisplayer in a browser without ' +
  39.           'Fullscreen API support causes subtitles to not be rendered in ' +
  40.           'fullscreen');
  41.     }
  43.     /** @private {boolean} */
  44.     this.isTextVisible_ = false;
  46.     /** @private {!Array<!shaka.text.Cue>} */
  47.     this.cues_ = [];
  49.     /** @private {HTMLMediaElement} */
  50.     this.video_ = video;
  52.     /** @private {HTMLElement} */
  53.     this.videoContainer_ = videoContainer;
  55.     /** @private {?number} */
  56.     this.aspectRatio_ = null;
  58.     /** @private {?shaka.extern.TextDisplayerConfiguration} */
  59.     this.config_ = null;
  61.     /** @type {HTMLElement} */
  62.     this.textContainer_ = shaka.util.Dom.createHTMLElement('div');
  63.     this.textContainer_.classList.add('shaka-text-container');
  65.     // Set the subtitles text-centered by default.
  66.     this.textContainer_.style.textAlign = 'center';
  68.     // Set the captions in the middle horizontally by default.
  69.     this.textContainer_.style.display = 'flex';
  70.     this.textContainer_.style.flexDirection = 'column';
  71.     this.textContainer_.style.alignItems = 'center';
  73.     // Set the captions at the bottom by default.
  74.     this.textContainer_.style.justifyContent = 'flex-end';
  76.     this.videoContainer_.appendChild(this.textContainer_);
  78.     /** @private {shaka.util.Timer} */
  79.     this.captionsTimer_ = new shaka.util.Timer(() => {
  80.       if (!this.video_.paused) {
  81.         this.updateCaptions_();
  82.       }
  83.     });
  84.     this.configureCaptionsTimer_();
  86.     /**
  87.      * Maps cues to cue elements. Specifically points out the wrapper element of
  88.      * the cue (e.g. the HTML element to put nested cues inside).
  89.      * @private {Map<!shaka.text.Cue, !{
  90.      *   cueElement: !HTMLElement,
  91.      *   regionElement: HTMLElement,
  92.      *   wrapper: !HTMLElement
  93.      * }>}
  94.      */
  95.     this.currentCuesMap_ = new Map();
  97.     /** @private {shaka.util.EventManager} */
  98.     this.eventManager_ = new shaka.util.EventManager();
  100.     this.eventManager_.listen(document, 'fullscreenchange', () => {
  101.       this.updateCaptions_(/* forceUpdate= */ true);
  102.     });
  104.     this.eventManager_.listen(this.video_, 'seeking', () => {
  105.       this.updateCaptions_(/* forceUpdate= */ true);
  106.     });
  108.     this.eventManager_.listen(this.video_, 'ratechange', () => {
  109.       this.configureCaptionsTimer_();
  110.     });
  112.     // From: https://html.spec.whatwg.org/multipage/media.html#dom-video-videowidth
  113.     // Whenever the natural width or natural height of the video changes
  114.     // (including, for example, because the selected video track was changed),
  115.     // if the element's readyState attribute is not HAVE_NOTHING, the user
  116.     // agent must queue a media element task given the media element to fire an
  117.     // event named resize at the media element.
  118.     this.eventManager_.listen(this.video_, 'resize', () => {
  119.       const element = /** @type {!HTMLVideoElement} */ (this.video_);
  120.       const width = element.videoWidth;
  121.       const height = element.videoHeight;
  122.       if (width && height) {
  123.         this.aspectRatio_ = width / height;
  124.       } else {
  125.         this.aspectRatio_ = null;
  126.       }
  127.     });
  129.     /** @private {ResizeObserver} */
  130.     this.resizeObserver_ = null;
  131.     if ('ResizeObserver' in window) {
  132.       this.resizeObserver_ = new ResizeObserver(() => {
  133.         this.updateCaptions_(/* forceUpdate= */ true);
  134.       });
  135.       this.resizeObserver_.observe(this.textContainer_);
  136.     }
  138.     /** @private {Map<string, !HTMLElement>} */
  139.     this.regionElements_ = new Map();
  140.   }
  143.   /**
  144.    * @override
  145.    * @export
  146.    */
  147.   configure(config) {
  148.     this.config_ = config;
  149.     this.configureCaptionsTimer_();
  150.   }
  153.   /**
  154.    * @override
  155.    * @export
  156.    */
  157.   append(cues) {
  158.     // Clone the cues list for performance optimization. We can avoid the cues
  159.     // list growing during the comparisons for duplicate cues.
  160.     // See: https://github.com/shaka-project/shaka-player/issues/3018
  161.     const cuesList = [...this.cues_];
  162.     for (const cue of shaka.text.Utils.removeDuplicates(cues)) {
  163.       // When a VTT cue spans a segment boundary, the cue will be duplicated
  164.       // into two segments.
  165.       // To avoid displaying duplicate cues, if the current cue list already
  166.       // contains the cue, skip it.
  167.       const containsCue = cuesList.some(
  168.           (cueInList) => shaka.text.Cue.equal(cueInList, cue));
  169.       if (!containsCue) {
  170.         this.cues_.push(cue);
  171.       }
  172.     }
  173.     if (this.cues_.length) {
  174.       this.configureCaptionsTimer_();
  175.     }
  177.     this.updateCaptions_();
  178.   }
  181.   /**
  182.    * @override
  183.    * @export
  184.    */
  185.   destroy() {
  186.     // Return resolved promise if destroy() has been called.
  187.     if (!this.textContainer_) {
  188.       return Promise.resolve();
  189.     }
  191.     // Remove the text container element from the UI.
  192.     this.videoContainer_.removeChild(this.textContainer_);
  193.     this.textContainer_ = null;
  195.     this.isTextVisible_ = false;
  196.     this.cues_ = [];
  197.     if (this.captionsTimer_) {
  198.       this.captionsTimer_.stop();
  199.       this.captionsTimer_ = null;
  200.     }
  202.     this.currentCuesMap_.clear();
  204.     // Tear-down the event manager to ensure messages stop moving around.
  205.     if (this.eventManager_) {
  206.       this.eventManager_.release();
  207.       this.eventManager_ = null;
  208.     }
  210.     if (this.resizeObserver_) {
  211.       this.resizeObserver_.disconnect();
  212.       this.resizeObserver_ = null;
  213.     }
  215.     return Promise.resolve();
  216.   }
  219.   /**
  220.    * @override
  221.    * @export
  222.    */
  223.   remove(start, end) {
  224.     // Return false if destroy() has been called.
  225.     if (!this.textContainer_) {
  226.       return false;
  227.     }
  229.     // Remove the cues out of the time range.
  230.     const oldNumCues = this.cues_.length;
  231.     this.cues_ = this.cues_.filter(
  232.         (cue) => cue.startTime < start || cue.endTime >= end);
  233.     // If anything was actually removed in this process, force the captions to
  234.     // update. This makes sure that the currently-displayed cues will stop
  235.     // displaying if removed (say, due to the user changing languages).
  236.     const forceUpdate = oldNumCues > this.cues_.length;
  237.     this.updateCaptions_(forceUpdate);
  238.     if (!this.cues_.length) {
  239.       this.configureCaptionsTimer_();
  240.     }
  242.     return true;
  243.   }
  246.   /**
  247.    * @override
  248.    * @export
  249.    */
  250.   isTextVisible() {
  251.     return this.isTextVisible_;
  252.   }
  254.   /**
  255.    * @override
  256.    * @export
  257.    */
  258.   setTextVisibility(on) {
  259.     this.isTextVisible_ = on;
  260.     this.updateCaptions_(/* forceUpdate= */ true);
  261.   }
  263.   /**
  264.    * @override
  265.    * @export
  266.    */
  267.   setTextLanguage(language) {
  268.     if (language && language != 'und') {
  269.       this.textContainer_.setAttribute('lang', language);
  270.     } else {
  271.       this.textContainer_.setAttribute('lang', '');
  272.     }
  273.   }
  275.   /**
  276.    * @override
  277.    * @export
  278.    */
  279.   enableTextDisplayer() {
  280.   }
  282.   /**
  283.    * @private
  284.    */
  285.   configureCaptionsTimer_() {
  286.     if (this.captionsTimer_) {
  287.       if (this.cues_.length) {
  288.         const captionsUpdatePeriod = this.config_ ?
  289.             this.config_.captionsUpdatePeriod : 0.25;
  290.         const updateTime = captionsUpdatePeriod /
  291.             Math.max(1, Math.abs(this.video_.playbackRate));
  292.         this.captionsTimer_.tickEvery(updateTime);
  293.       } else {
  294.         this.captionsTimer_.stop();
  295.       }
  296.     }
  297.   }
  299.   /**
  300.    * @private
  301.    */
  302.   isElementUnderTextContainer_(elemToCheck) {
  303.     while (elemToCheck != null) {
  304.       if (elemToCheck == this.textContainer_) {
  305.         return true;
  306.       }
  307.       elemToCheck = elemToCheck.parentElement;
  308.     }
  309.     return false;
  310.   }
  312.   /**
  313.    * @param {!Array<!shaka.text.Cue>} cues
  314.    * @param {!HTMLElement} container
  315.    * @param {number} currentTime
  316.    * @param {!Array<!shaka.text.Cue>} parents
  317.    * @private
  318.    */
  319.   updateCuesRecursive_(cues, container, currentTime, parents) {
  320.     // Set to true if the cues have changed in some way, which will require
  321.     // DOM changes. E.g. if a cue was added or removed.
  322.     let updateDOM = false;
  323.     /**
  324.      * The elements to remove from the DOM.
  325.      * Some of these elements may be added back again, if their corresponding
  326.      * cue is in toPlant.
  327.      * These elements are only removed if updateDOM is true.
  328.      * @type {!Array<!HTMLElement>}
  329.      */
  330.     const toUproot = [];
  331.     /**
  332.      * The cues whose corresponding elements should be in the DOM.
  333.      * Some of these might be new, some might have been displayed beforehand.
  334.      * These will only be added if updateDOM is true.
  335.      * @type {!Array<!shaka.text.Cue>}
  336.      */
  337.     const toPlant = [];
  338.     for (const cue of cues) {
  339.       parents.push(cue);
  341.       let cueRegistry = this.currentCuesMap_.get(cue);
  342.       const shouldBeDisplayed =
  343.           cue.startTime <= currentTime && cue.endTime > currentTime;
  344.       let wrapper = cueRegistry ? cueRegistry.wrapper : null;
  346.       if (cueRegistry) {
  347.         // If the cues are replanted, all existing cues should be uprooted,
  348.         // even ones which are going to be planted again.
  349.         toUproot.push(cueRegistry.cueElement);
  351.         // Also uproot all displayed region elements.
  352.         if (cueRegistry.regionElement) {
  353.           toUproot.push(cueRegistry.regionElement);
  354.         }
  356.         // If the cue should not be displayed, remove it entirely.
  357.         if (!shouldBeDisplayed) {
  358.           // Since something has to be removed, we will need to update the DOM.
  359.           updateDOM = true;
  360.           this.currentCuesMap_.delete(cue);
  361.           cueRegistry = null;
  362.         }
  363.       }
  365.       if (shouldBeDisplayed) {
  366.         toPlant.push(cue);
  367.         if (!cueRegistry) {
  368.           // The cue has to be made!
  369.           this.createCue_(cue, parents);
  370.           cueRegistry = this.currentCuesMap_.get(cue);
  371.           wrapper = cueRegistry.wrapper;
  372.           updateDOM = true;
  373.         } else if (!this.isElementUnderTextContainer_(wrapper)) {
  374.           // We found that the wrapper needs to be in the DOM
  375.           updateDOM = true;
  376.         }
  377.       }
  379.       // Recursively check the nested cues, to see if they need to be added or
  380.       // removed.
  381.       // If wrapper is null, that means that the cue is not only not being
  382.       // displayed currently, it also was not removed this tick. So it's
  383.       // guaranteed that the children will neither need to be added nor removed.
  384.       if (cue.nestedCues.length > 0 && wrapper) {
  385.         this.updateCuesRecursive_(
  386.             cue.nestedCues, wrapper, currentTime, parents);
  387.       }
  389.       const topCue = parents.pop();
  390.       goog.asserts.assert(topCue == cue, 'Parent cues should be kept in order');
  391.     }
  393.     if (updateDOM) {
  394.       for (const element of toUproot) {
  395.         // NOTE: Because we uproot shared region elements, too, we might hit an
  396.         // element here that has no parent because we've already processed it.
  397.         if (element.parentElement) {
  398.           element.parentElement.removeChild(element);
  399.         }
  400.       }
  401.       toPlant.sort((a, b) => {
  402.         if (a.startTime != b.startTime) {
  403.           return a.startTime - b.startTime;
  404.         } else {
  405.           return a.endTime - b.endTime;
  406.         }
  407.       });
  408.       for (const cue of toPlant) {
  409.         const cueRegistry = this.currentCuesMap_.get(cue);
  410.         goog.asserts.assert(cueRegistry, 'cueRegistry should exist.');
  411.         if (cueRegistry.regionElement) {
  412.           if (cueRegistry.regionElement.contains(container)) {
  413.             cueRegistry.regionElement.removeChild(container);
  414.           }
  415.           container.appendChild(cueRegistry.regionElement);
  416.           cueRegistry.regionElement.appendChild(cueRegistry.cueElement);
  417.         } else {
  418.           container.appendChild(cueRegistry.cueElement);
  419.         }
  420.       }
  421.     }
  422.   }
  424.   /**
  425.    * Display the current captions.
  426.    * @param {boolean=} forceUpdate
  427.    * @private
  428.    */
  429.   updateCaptions_(forceUpdate = false) {
  430.     if (!this.textContainer_) {
  431.       return;
  432.     }
  434.     const currentTime = this.video_.currentTime;
  435.     if (!this.isTextVisible_ || forceUpdate) {
  436.       // Remove child elements from all regions.
  437.       for (const regionElement of this.regionElements_.values()) {
  438.         shaka.util.Dom.removeAllChildren(regionElement);
  439.       }
  440.       // Remove all top-level elements in the text container.
  441.       shaka.util.Dom.removeAllChildren(this.textContainer_);
  442.       // Clear the element maps.
  443.       this.currentCuesMap_.clear();
  444.       this.regionElements_.clear();
  445.     }
  446.     if (this.isTextVisible_) {
  447.       // Log currently attached cue elements for verification, later.
  448.       const previousCuesMap = new Map();
  449.       if (goog.DEBUG) {
  450.         for (const cue of this.currentCuesMap_.keys()) {
  451.           previousCuesMap.set(cue, this.currentCuesMap_.get(cue));
  452.         }
  453.       }
  455.       // Update the cues.
  456.       this.updateCuesRecursive_(
  457.           this.cues_, this.textContainer_, currentTime, /* parents= */ []);
  459.       if (goog.DEBUG) {
  460.         // Previously, we had an issue (#2076) where cues sometimes were not
  461.         // properly removed from the DOM. It is not clear if this issue still
  462.         // happens, so the previous fix for it has been changed to an assert.
  463.         for (const cue of previousCuesMap.keys()) {
  464.           if (!this.currentCuesMap_.has(cue)) {
  465.             // TODO: If the problem does not appear again, then we should remove
  466.             // this assert (and the previousCuesMap code) in Shaka v4.
  467.             const cueElement = previousCuesMap.get(cue).cueElement;
  468.             goog.asserts.assert(
  469.                 !cueElement.parentNode, 'Cue was not properly removed!');
  470.           }
  471.         }
  472.       }
  473.     }
  474.   }
  476.   /**
  477.    * Compute a unique internal id:
  478.    * Regions can reuse the id but have different dimensions, we need to
  479.    * consider those differences
  480.    * @param {shaka.text.CueRegion} region
  481.    * @private
  482.    */
  483.   generateRegionId_(region) {
  484.     const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
  485.     const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
  486.     const viewportAnchorUnit =
  487.         region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
  488.     const uniqueRegionId = `${region.id}_${
  489.       region.width}x${region.height}${heightUnit}-${
  490.       region.viewportAnchorX}x${region.viewportAnchorY}${viewportAnchorUnit}`;
  492.     return uniqueRegionId;
  493.   }
  495.   /**
  496.    * Get or create a region element corresponding to the cue region.  These are
  497.    * cached by ID.
  498.    *
  499.    * @param {!shaka.text.Cue} cue
  500.    * @return {!HTMLElement}
  501.    * @private
  502.    */
  503.   getRegionElement_(cue) {
  504.     const region = cue.region;
  505.     // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#caption-window-size
  506.     // if aspect ratio is 4/3, use that value, otherwise, use the 16:9 value
  507.     const lineWidthMultiple = this.aspectRatio_ === 4/3 ? 2.5 : 1.9;
  508.     const lineHeightMultiple = 5.33;
  510.     const regionId = this.generateRegionId_(region);
  511.     if (this.regionElements_.has(regionId)) {
  512.       return this.regionElements_.get(regionId);
  513.     }
  515.     const regionElement = shaka.util.Dom.createHTMLElement('span');
  517.     const linesUnit = shaka.text.CueRegion.units.LINES;
  518.     const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
  519.     const pixelUnit = shaka.text.CueRegion.units.PX;
  520.     let heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
  521.     let widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
  522.     const viewportAnchorUnit =
  523.         region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
  525.     regionElement.id = 'shaka-text-region---' + regionId;
  526.     regionElement.classList.add('shaka-text-region');
  528.     regionElement.style.position = 'absolute';
  530.     let regionHeight = region.height;
  531.     let regionWidth = region.width;
  533.     if (region.heightUnits === linesUnit) {
  534.       regionHeight = region.height * lineHeightMultiple;
  535.       heightUnit = '%';
  536.     }
  537.     if (region.widthUnits === linesUnit) {
  538.       regionWidth = region.width * lineWidthMultiple;
  539.       widthUnit = '%';
  540.     }
  541.     regionElement.style.height = regionHeight + heightUnit;
  542.     regionElement.style.width = regionWidth + widthUnit;
  544.     if (region.viewportAnchorUnits === linesUnit) {
  545.       // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-708
  546.       let top = region.viewportAnchorY / 75 * 100;
  547.       const windowWidth = this.aspectRatio_ === 4/3 ? 160 : 210;
  548.       let left = region.viewportAnchorX / windowWidth * 100;
  549.       // adjust top and left values based on the region anchor and window size
  550.       top -= region.regionAnchorY * regionHeight / 100;
  551.       left -= region.regionAnchorX * regionWidth / 100;
  552.       regionElement.style.top = top + '%';
  553.       regionElement.style.left = left + '%';
  554.     } else {
  555.       regionElement.style.top = region.viewportAnchorY -
  556.         region.regionAnchorY * regionHeight / 100 + viewportAnchorUnit;
  557.       regionElement.style.left = region.viewportAnchorX -
  558.         region.regionAnchorX * regionWidth / 100 + viewportAnchorUnit;
  559.     }
  560.     if (region.heightUnits !== pixelUnit &&
  561.         region.widthUnits !== pixelUnit &&
  562.         region.viewportAnchorUnits !== pixelUnit) {
  563.       // Clip region
  564.       const top = parseInt(regionElement.style.top.slice(0, -1), 10) || 0;
  565.       const left = parseInt(regionElement.style.left.slice(0, -1), 10) || 0;
  566.       const height = parseInt(regionElement.style.height.slice(0, -1), 10) || 0;
  567.       const width = parseInt(regionElement.style.width.slice(0, -1), 10) || 0;
  568.       const realTop = Math.max(0, Math.min(100 - height, top));
  569.       const realLeft = Math.max(0, Math.min(100 - width, left));
  570.       regionElement.style.top = realTop + '%';
  571.       regionElement.style.left = realLeft + '%';
  572.     }
  574.     regionElement.style.display = 'flex';
  575.     regionElement.style.flexDirection = 'column';
  576.     regionElement.style.alignItems = 'center';
  578.     if (cue.displayAlign == shaka.text.Cue.displayAlign.BEFORE) {
  579.       regionElement.style.justifyContent = 'flex-start';
  580.     } else if (cue.displayAlign == shaka.text.Cue.displayAlign.CENTER) {
  581.       regionElement.style.justifyContent = 'center';
  582.     } else {
  583.       regionElement.style.justifyContent = 'flex-end';
  584.     }
  586.     this.regionElements_.set(regionId, regionElement);
  587.     return regionElement;
  588.   }
  590.   /**
  591.    * Creates the object for a cue.
  592.    *
  593.    * @param {!shaka.text.Cue} cue
  594.    * @param {!Array<!shaka.text.Cue>} parents
  595.    * @private
  596.    */
  597.   createCue_(cue, parents) {
  598.     const isNested = parents.length > 1;
  599.     let type = isNested ? 'span' : 'div';
  600.     if (cue.lineBreak) {
  601.       type = 'br';
  602.     }
  603.     if (cue.rubyTag) {
  604.       type = cue.rubyTag;
  605.     }
  607.     const needWrapper = !isNested && cue.nestedCues.length > 0;
  609.     // Nested cues are inline elements.  Top-level cues are block elements.
  610.     const cueElement = shaka.util.Dom.createHTMLElement(type);
  611.     if (type != 'br') {
  612.       this.setCaptionStyles_(cueElement, cue, parents, needWrapper);
  613.     }
  615.     let regionElement = null;
  616.     if (cue.region && cue.region.id) {
  617.       regionElement = this.getRegionElement_(cue);
  618.     }
  620.     let wrapper = cueElement;
  621.     if (needWrapper) {
  622.       // Create a wrapper element which will serve to contain all children into
  623.       // a single item.  This ensures that nested span elements appear
  624.       // horizontally and br elements occupy no vertical space.
  625.       wrapper = shaka.util.Dom.createHTMLElement('span');
  626.       wrapper.classList.add('shaka-text-wrapper');
  627.       wrapper.style.backgroundColor = cue.backgroundColor;
  628.       wrapper.style.lineHeight = 'normal';
  629.       cueElement.appendChild(wrapper);
  630.     }
  632.     this.currentCuesMap_.set(cue, {cueElement, wrapper, regionElement});
  633.   }
  635.   /**
  636.    * Compute cue position alignment
  637.    * See https://www.w3.org/TR/webvtt1/#webvtt-cue-position-alignment
  638.    *
  639.    * @param {!shaka.text.Cue} cue
  640.    * @private
  641.    */
  642.   computeCuePositionAlignment_(cue) {
  643.     const Cue = shaka.text.Cue;
  644.     const {direction, positionAlign, textAlign} = cue;
  646.     if (positionAlign !== Cue.positionAlign.AUTO) {
  647.       // Position align is not AUTO: use it
  648.       return positionAlign;
  649.     }
  651.     // Position align is AUTO: use text align to compute its value
  653.     if (textAlign === Cue.textAlign.LEFT ||
  654.       (textAlign === Cue.textAlign.START &&
  655.         direction === Cue.direction.HORIZONTAL_LEFT_TO_RIGHT) ||
  656.       (textAlign === Cue.textAlign.END &&
  657.         direction === Cue.direction.HORIZONTAL_RIGHT_TO_LEFT)) {
  658.       return Cue.positionAlign.LEFT;
  659.     }
  661.     if (textAlign === Cue.textAlign.RIGHT ||
  662.       (textAlign === Cue.textAlign.START &&
  663.         direction === Cue.direction.HORIZONTAL_RIGHT_TO_LEFT) ||
  664.       (textAlign === Cue.textAlign.END &&
  665.         direction === Cue.direction.HORIZONTAL_LEFT_TO_RIGHT)) {
  666.       return Cue.positionAlign.RIGHT;
  667.     }
  669.     return Cue.positionAlign.CENTER;
  670.   }
  672.   /**
  673.    * @param {!HTMLElement} cueElement
  674.    * @param {!shaka.text.Cue} cue
  675.    * @param {!Array<!shaka.text.Cue>} parents
  676.    * @param {boolean} hasWrapper
  677.    * @private
  678.    */
  679.   setCaptionStyles_(cueElement, cue, parents, hasWrapper) {
  680.     const Cue = shaka.text.Cue;
  681.     const inherit =
  682.         (cb) => shaka.text.UITextDisplayer.inheritProperty_(parents, cb);
  683.     const style = cueElement.style;
  684.     const isLeaf = cue.nestedCues.length == 0;
  685.     const isNested = parents.length > 1;
  687.     // TODO: wrapLine is not yet supported.  Lines always wrap.
  689.     // White space should be preserved if emitted by the text parser.  It's the
  690.     // job of the parser to omit any whitespace that should not be displayed.
  691.     // Using 'pre-wrap' means that whitespace is preserved even at the end of
  692.     // the text, but that lines which overflow can still be broken.
  693.     style.whiteSpace = 'pre-wrap';
  695.     // Using 'break-spaces' would be better, as it would preserve even trailing
  696.     // spaces, but that only shipped in Chrome 76.  As of July 2020, Safari
  697.     // still has not implemented break-spaces, and the original Chromecast will
  698.     // never have this feature since it no longer gets firmware updates.
  699.     // So we need to replace trailing spaces with non-breaking spaces.
  700.     const text = cue.payload.replace(/\s+$/g, (match) => {
  701.       const nonBreakingSpace = '\xa0';
  702.       return nonBreakingSpace.repeat(match.length);
  703.     });
  705.     style.webkitTextStrokeColor = cue.textStrokeColor;
  706.     style.webkitTextStrokeWidth = cue.textStrokeWidth;
  707.     style.color = cue.color;
  708.     style.direction = cue.direction;
  709.     style.opacity = cue.opacity;
  710.     style.paddingLeft = shaka.text.UITextDisplayer.convertLengthValue_(
  711.         cue.linePadding, cue, this.videoContainer_);
  712.     style.paddingRight =
  713.         shaka.text.UITextDisplayer.convertLengthValue_(
  714.             cue.linePadding, cue, this.videoContainer_);
  715.     style.textCombineUpright = cue.textCombineUpright;
  716.     style.textShadow = cue.textShadow;
  718.     if (cue.backgroundImage) {
  719.       style.backgroundImage = 'url(\'' + cue.backgroundImage + '\')';
  720.       style.backgroundRepeat = 'no-repeat';
  721.       style.backgroundSize = 'contain';
  722.       style.backgroundPosition = 'center';
  724.       if (cue.backgroundColor) {
  725.         style.backgroundColor = cue.backgroundColor;
  726.       }
  728.       // Quoting https://www.w3.org/TR/ttml-imsc1.2/:
  729.       // "The width and height (in pixels) of the image resource referenced by
  730.       // smpte:backgroundImage SHALL be equal to the width and height expressed
  731.       // by the tts:extent attribute of the region in which the div element is
  732.       // presented".
  733.       style.width = '100%';
  734.       style.height = '100%';
  735.     } else {
  736.       // If we have both text and nested cues, then style everything; otherwise
  737.       // place the text in its own <span> so the background doesn't fill the
  738.       // whole region.
  739.       let elem;
  740.       if (cue.nestedCues.length) {
  741.         elem = cueElement;
  742.       } else {
  743.         elem = shaka.util.Dom.createHTMLElement('span');
  744.         cueElement.appendChild(elem);
  745.       }
  747.       if (cue.border) {
  748.         elem.style.border = cue.border;
  749.       }
  750.       if (!hasWrapper) {
  751.         const bgColor = inherit((c) => c.backgroundColor);
  752.         if (bgColor) {
  753.           elem.style.backgroundColor = bgColor;
  754.         } else if (text) {
  755.           // If there is no background, default to a semi-transparent black.
  756.           // Only do this for the text itself.
  757.           elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  758.         }
  759.       }
  760.       if (text) {
  761.         elem.textContent = text;
  762.       }
  763.     }
  765.     // The displayAlign attribute specifies the vertical alignment of the
  766.     // captions inside the text container. Before means at the top of the
  767.     // text container, and after means at the bottom.
  768.     if (isNested && !parents[parents.length - 1].isContainer) {
  769.       style.display = 'inline';
  770.     } else {
  771.       style.display = 'flex';
  772.       style.flexDirection = 'column';
  773.       style.alignItems = 'center';
  774.       if (cue.textAlign == Cue.textAlign.LEFT ||
  775.           cue.textAlign == Cue.textAlign.START) {
  776.         style.width = '100%';
  777.         style.alignItems = 'start';
  778.       } else if (cue.textAlign == Cue.textAlign.RIGHT ||
  779.           cue.textAlign == Cue.textAlign.END) {
  780.         style.width = '100%';
  781.         style.alignItems = 'end';
  782.       }
  784.       if (cue.displayAlign == Cue.displayAlign.BEFORE) {
  785.         style.justifyContent = 'flex-start';
  786.       } else if (cue.displayAlign == Cue.displayAlign.CENTER) {
  787.         style.justifyContent = 'center';
  788.       } else {
  789.         style.justifyContent = 'flex-end';
  790.       }
  791.     }
  793.     if (!isLeaf) {
  794.       style.margin = '0';
  795.     }
  797.     style.fontFamily = cue.fontFamily;
  798.     style.fontWeight = cue.fontWeight.toString();
  799.     style.fontStyle = cue.fontStyle;
  800.     style.letterSpacing = cue.letterSpacing;
  801.     style.fontSize = shaka.text.UITextDisplayer.convertLengthValue_(
  802.         cue.fontSize, cue, this.videoContainer_);
  804.     // The line attribute defines the positioning of the text container inside
  805.     // the video container.
  806.     // - The line offsets the text container from the top, the right or left of
  807.     //   the video viewport as defined by the writing direction.
  808.     // - The value of the line is either as a number of lines, or a percentage
  809.     //   of the video viewport height or width.
  810.     // The lineAlign is an alignment for the text container's line.
  811.     // - The Start alignment means the text container’s top side (for horizontal
  812.     //   cues), left side (for vertical growing right), or right side (for
  813.     //   vertical growing left) is aligned at the line.
  814.     // - The Center alignment means the text container is centered at the line
  815.     //   (to be implemented).
  816.     // - The End Alignment means The text container’s bottom side (for
  817.     //   horizontal cues), right side (for vertical growing right), or left side
  818.     //   (for vertical growing left) is aligned at the line.
  819.     // TODO: Implement line alignment with line number.
  820.     // TODO: Implement lineAlignment of 'CENTER'.
  821.     let line = cue.line;
  822.     if (line != null) {
  823.       let lineInterpretation = cue.lineInterpretation;
  824.       // HACK: the current implementation of UITextDisplayer only handled
  825.       // PERCENTAGE, so we need convert LINE_NUMBER to PERCENTAGE
  826.       if (lineInterpretation == Cue.lineInterpretation.LINE_NUMBER) {
  827.         lineInterpretation = Cue.lineInterpretation.PERCENTAGE;
  828.         let maxLines = 16;
  829.         // The maximum number of lines is different if it is a vertical video.
  830.         if (this.aspectRatio_ && this.aspectRatio_ < 1) {
  831.           maxLines = 32;
  832.         }
  833.         if (line < 0) {
  834.           line = 100 + line / maxLines * 100;
  835.         } else {
  836.           line = line / maxLines * 100;
  837.         }
  838.       }
  839.       if (lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
  840.         style.position = 'absolute';
  841.         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  842.           style.width = '100%';
  843.           if (cue.lineAlign == Cue.lineAlign.START) {
  844.             style.top = line + '%';
  845.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  846.             style.bottom = (100 - line) + '%';
  847.           }
  848.         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
  849.           style.height = '100%';
  850.           if (cue.lineAlign == Cue.lineAlign.START) {
  851.             style.left = line + '%';
  852.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  853.             style.right = (100 - line) + '%';
  854.           }
  855.         } else {
  856.           style.height = '100%';
  857.           if (cue.lineAlign == Cue.lineAlign.START) {
  858.             style.right = line + '%';
  859.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  860.             style.left = (100 - line) + '%';
  861.           }
  862.         }
  863.       }
  864.     }
  866.     style.lineHeight = cue.lineHeight;
  868.     // The positionAlign attribute is an alignment for the text container in
  869.     // the dimension of the writing direction.
  870.     const computedPositionAlign = this.computeCuePositionAlignment_(cue);
  871.     if (computedPositionAlign == Cue.positionAlign.LEFT) {
  872.       style.cssFloat = 'left';
  873.       if (cue.position !== null) {
  874.         style.position = 'absolute';
  875.         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  876.           style.left = cue.position + '%';
  877.           style.width = 'auto';
  878.         } else {
  879.           style.top = cue.position + '%';
  880.         }
  881.       }
  882.     } else if (computedPositionAlign == Cue.positionAlign.RIGHT) {
  883.       style.cssFloat = 'right';
  884.       if (cue.position !== null) {
  885.         style.position = 'absolute';
  886.         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  887.           style.right = (100 - cue.position) + '%';
  888.           style.width = 'auto';
  889.         } else {
  890.           style.bottom = cue.position + '%';
  891.         }
  892.       }
  893.     } else {
  894.       if (cue.position !== null && cue.position != 50) {
  895.         style.position = 'absolute';
  896.         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  897.           style.left = cue.position + '%';
  898.           style.width = 'auto';
  899.         } else {
  900.           style.top = cue.position + '%';
  901.         }
  902.       }
  903.     }
  905.     style.textAlign = cue.textAlign;
  906.     style.textDecoration = cue.textDecoration.join(' ');
  907.     style.writingMode = cue.writingMode;
  909.     // Old versions of Chromium, which may be found in certain versions of Tizen
  910.     // and WebOS, may require the prefixed version: webkitWritingMode.
  911.     // https://caniuse.com/css-writing-mode
  912.     // However, testing shows that Tizen 3, at least, has a 'writingMode'
  913.     // property, but the setter for it does nothing.  Therefore we need to
  914.     // detect that and fall back to the prefixed version in this case, too.
  915.     if (!('writingMode' in document.documentElement.style) ||
  916.         style.writingMode != cue.writingMode) {
  917.       // Note that here we do not bother to check for webkitWritingMode support
  918.       // explicitly.  We try the unprefixed version, then fall back to the
  919.       // prefixed version unconditionally.
  920.       style.webkitWritingMode = cue.writingMode;
  921.     }
  923.     // The size is a number giving the size of the text container, to be
  924.     // interpreted as a percentage of the video, as defined by the writing
  925.     // direction.
  926.     if (cue.size) {
  927.       if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  928.         style.width = cue.size + '%';
  929.       } else {
  930.         style.height = cue.size + '%';
  931.       }
  932.     }
  933.   }
  935.   /**
  936.    * Returns info about provided lengthValue
  937.    * @example 100px => { value: 100, unit: 'px' }
  938.    * @param {?string} lengthValue
  939.    *
  940.    * @return {?{ value: number, unit: string }}
  941.    * @private
  942.    */
  943.   static getLengthValueInfo_(lengthValue) {
  944.     const matches = new RegExp(/(\d*\.?\d+)([a-z]+|%+)/).exec(lengthValue);
  946.     if (!matches) {
  947.       return null;
  948.     }
  950.     return {
  951.       value: Number(matches[1]),
  952.       unit: matches[2],
  953.     };
  954.   }
  956.   /**
  957.    * Converts length value to an absolute value in pixels.
  958.    * If lengthValue is already an absolute value it will not
  959.    * be modified. Relative lengthValue will be converted to an
  960.    * absolute value in pixels based on Computed Cell Size
  961.    *
  962.    * @param {string} lengthValue
  963.    * @param {!shaka.text.Cue} cue
  964.    * @param {HTMLElement} videoContainer
  965.    * @return {string}
  966.    * @private
  967.    */
  968.   static convertLengthValue_(lengthValue, cue, videoContainer) {
  969.     const lengthValueInfo =
  970.         shaka.text.UITextDisplayer.getLengthValueInfo_(lengthValue);
  972.     if (!lengthValueInfo) {
  973.       return lengthValue;
  974.     }
  976.     const {unit, value} = lengthValueInfo;
  978.     switch (unit) {
  979.       case '%':
  980.         return shaka.text.UITextDisplayer.getAbsoluteLengthInPixels_(
  981.             value / 100, cue, videoContainer);
  982.       case 'c':
  983.         return shaka.text.UITextDisplayer.getAbsoluteLengthInPixels_(
  984.             value, cue, videoContainer);
  985.       default:
  986.         return lengthValue;
  987.     }
  988.   }
  990.   /**
  991.    * Returns computed absolute length value in pixels based on cell
  992.    * and a video container size
  993.    * @param {number} value
  994.    * @param {!shaka.text.Cue} cue
  995.    * @param {HTMLElement} videoContainer
  996.    * @return {string}
  997.    *
  998.    * @private
  999.    */
  1000.   static getAbsoluteLengthInPixels_(value, cue, videoContainer) {
  1001.     const containerHeight = videoContainer.clientHeight;
  1003.     return (containerHeight * value / cue.cellResolution.rows) + 'px';
  1004.   }
  1006.   /**
  1007.    * Inherits a property from the parent Cue elements.  If the value is falsy,
  1008.    * it is assumed to be inherited from the parent. This returns null if the
  1009.    * value isn't found.
  1010.    *
  1011.    * @param {!Array<!shaka.text.Cue>} parents
  1012.    * @param {function(!shaka.text.Cue):?T} cb
  1013.    * @return {?T}
  1014.    * @template T
  1015.    * @private
  1016.    */
  1017.   static inheritProperty_(parents, cb) {
  1018.     for (let i = parents.length - 1; i >= 0; i--) {
  1019.       const val = cb(parents[i]);
  1020.       if (val || val === 0) {
  1021.         return val;
  1022.       }
  1023.     }
  1024.     return null;
  1025.   }
  1026. };