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