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 performace 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.     }
  174.     this.updateCaptions_();
  175.   }
  178.   /**
  179.    * @override
  180.    * @export
  181.    */
  182.   destroy() {
  183.     // Return resolved promise if destroy() has been called.
  184.     if (!this.textContainer_) {
  185.       return Promise.resolve();
  186.     }
  188.     // Remove the text container element from the UI.
  189.     this.videoContainer_.removeChild(this.textContainer_);
  190.     this.textContainer_ = null;
  192.     this.isTextVisible_ = false;
  193.     this.cues_ = [];
  194.     if (this.captionsTimer_) {
  195.       this.captionsTimer_.stop();
  196.       this.captionsTimer_ = null;
  197.     }
  199.     this.currentCuesMap_.clear();
  201.     // Tear-down the event manager to ensure messages stop moving around.
  202.     if (this.eventManager_) {
  203.       this.eventManager_.release();
  204.       this.eventManager_ = null;
  205.     }
  207.     if (this.resizeObserver_) {
  208.       this.resizeObserver_.disconnect();
  209.       this.resizeObserver_ = null;
  210.     }
  212.     return Promise.resolve();
  213.   }
  216.   /**
  217.    * @override
  218.    * @export
  219.    */
  220.   remove(start, end) {
  221.     // Return false if destroy() has been called.
  222.     if (!this.textContainer_) {
  223.       return false;
  224.     }
  226.     // Remove the cues out of the time range.
  227.     const oldNumCues = this.cues_.length;
  228.     this.cues_ = this.cues_.filter(
  229.         (cue) => cue.startTime < start || cue.endTime >= end);
  230.     // If anything was actually removed in this process, force the captions to
  231.     // update. This makes sure that the currently-displayed cues will stop
  232.     // displaying if removed (say, due to the user changing languages).
  233.     const forceUpdate = oldNumCues > this.cues_.length;
  234.     this.updateCaptions_(forceUpdate);
  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.     this.updateCaptions_(/* forceUpdate= */ true);
  255.   }
  257.   /**
  258.    * @override
  259.    * @export
  260.    */
  261.   setTextLanguage(language) {
  262.     if (language && language != 'und') {
  263.       this.textContainer_.setAttribute('lang', language);
  264.     } else {
  265.       this.textContainer_.setAttribute('lang', '');
  266.     }
  267.   }
  269.   /**
  270.    * @override
  271.    * @export
  272.    */
  273.   enableTextDisplayer() {
  274.   }
  276.   /**
  277.    * @private
  278.    */
  279.   configureCaptionsTimer_() {
  280.     if (this.captionsTimer_) {
  281.       const captionsUpdatePeriod = this.config_ ?
  282.           this.config_.captionsUpdatePeriod : 0.25;
  283.       const updateTime = captionsUpdatePeriod /
  284.           Math.max(1, Math.abs(this.video_.playbackRate));
  285.       this.captionsTimer_.tickEvery(updateTime);
  286.     }
  287.   }
  289.   /**
  290.    * @private
  291.    */
  292.   isElementUnderTextContainer_(elemToCheck) {
  293.     while (elemToCheck != null) {
  294.       if (elemToCheck == this.textContainer_) {
  295.         return true;
  296.       }
  297.       elemToCheck = elemToCheck.parentElement;
  298.     }
  299.     return false;
  300.   }
  302.   /**
  303.    * @param {!Array.<!shaka.text.Cue>} cues
  304.    * @param {!HTMLElement} container
  305.    * @param {number} currentTime
  306.    * @param {!Array.<!shaka.text.Cue>} parents
  307.    * @private
  308.    */
  309.   updateCuesRecursive_(cues, container, currentTime, parents) {
  310.     // Set to true if the cues have changed in some way, which will require
  311.     // DOM changes. E.g. if a cue was added or removed.
  312.     let updateDOM = false;
  313.     /**
  314.      * The elements to remove from the DOM.
  315.      * Some of these elements may be added back again, if their corresponding
  316.      * cue is in toPlant.
  317.      * These elements are only removed if updateDOM is true.
  318.      * @type {!Array.<!HTMLElement>}
  319.      */
  320.     const toUproot = [];
  321.     /**
  322.      * The cues whose corresponding elements should be in the DOM.
  323.      * Some of these might be new, some might have been displayed beforehand.
  324.      * These will only be added if updateDOM is true.
  325.      * @type {!Array.<!shaka.text.Cue>}
  326.      */
  327.     const toPlant = [];
  328.     for (const cue of cues) {
  329.       parents.push(cue);
  331.       let cueRegistry = this.currentCuesMap_.get(cue);
  332.       const shouldBeDisplayed =
  333.           cue.startTime <= currentTime && cue.endTime > currentTime;
  334.       let wrapper = cueRegistry ? cueRegistry.wrapper : null;
  336.       if (cueRegistry) {
  337.         // If the cues are replanted, all existing cues should be uprooted,
  338.         // even ones which are going to be planted again.
  339.         toUproot.push(cueRegistry.cueElement);
  341.         // Also uproot all displayed region elements.
  342.         if (cueRegistry.regionElement) {
  343.           toUproot.push(cueRegistry.regionElement);
  344.         }
  346.         // If the cue should not be displayed, remove it entirely.
  347.         if (!shouldBeDisplayed) {
  348.           // Since something has to be removed, we will need to update the DOM.
  349.           updateDOM = true;
  350.           this.currentCuesMap_.delete(cue);
  351.           cueRegistry = null;
  352.         }
  353.       }
  355.       if (shouldBeDisplayed) {
  356.         toPlant.push(cue);
  357.         if (!cueRegistry) {
  358.           // The cue has to be made!
  359.           this.createCue_(cue, parents);
  360.           cueRegistry = this.currentCuesMap_.get(cue);
  361.           wrapper = cueRegistry.wrapper;
  362.           updateDOM = true;
  363.         } else if (!this.isElementUnderTextContainer_(wrapper)) {
  364.           // We found that the wrapper needs to be in the DOM
  365.           updateDOM = true;
  366.         }
  367.       }
  369.       // Recursively check the nested cues, to see if they need to be added or
  370.       // removed.
  371.       // If wrapper is null, that means that the cue is not only not being
  372.       // displayed currently, it also was not removed this tick. So it's
  373.       // guaranteed that the children will neither need to be added nor removed.
  374.       if (cue.nestedCues.length > 0 && wrapper) {
  375.         this.updateCuesRecursive_(
  376.             cue.nestedCues, wrapper, currentTime, parents);
  377.       }
  379.       const topCue = parents.pop();
  380.       goog.asserts.assert(topCue == cue, 'Parent cues should be kept in order');
  381.     }
  383.     if (updateDOM) {
  384.       for (const element of toUproot) {
  385.         // NOTE: Because we uproot shared region elements, too, we might hit an
  386.         // element here that has no parent because we've already processed it.
  387.         if (element.parentElement) {
  388.           element.parentElement.removeChild(element);
  389.         }
  390.       }
  391.       toPlant.sort((a, b) => {
  392.         if (a.startTime != b.startTime) {
  393.           return a.startTime - b.startTime;
  394.         } else {
  395.           return a.endTime - b.endTime;
  396.         }
  397.       });
  398.       for (const cue of toPlant) {
  399.         const cueRegistry = this.currentCuesMap_.get(cue);
  400.         goog.asserts.assert(cueRegistry, 'cueRegistry should exist.');
  401.         if (cueRegistry.regionElement) {
  402.           if (cueRegistry.regionElement.contains(container)) {
  403.             cueRegistry.regionElement.removeChild(container);
  404.           }
  405.           container.appendChild(cueRegistry.regionElement);
  406.           cueRegistry.regionElement.appendChild(cueRegistry.cueElement);
  407.         } else {
  408.           container.appendChild(cueRegistry.cueElement);
  409.         }
  410.       }
  411.     }
  412.   }
  414.   /**
  415.    * Display the current captions.
  416.    * @param {boolean=} forceUpdate
  417.    * @private
  418.    */
  419.   updateCaptions_(forceUpdate = false) {
  420.     if (!this.textContainer_) {
  421.       return;
  422.     }
  424.     const currentTime = this.video_.currentTime;
  425.     if (!this.isTextVisible_ || forceUpdate) {
  426.       // Remove child elements from all regions.
  427.       for (const regionElement of this.regionElements_.values()) {
  428.         shaka.util.Dom.removeAllChildren(regionElement);
  429.       }
  430.       // Remove all top-level elements in the text container.
  431.       shaka.util.Dom.removeAllChildren(this.textContainer_);
  432.       // Clear the element maps.
  433.       this.currentCuesMap_.clear();
  434.       this.regionElements_.clear();
  435.     }
  436.     if (this.isTextVisible_) {
  437.       // Log currently attached cue elements for verification, later.
  438.       const previousCuesMap = new Map();
  439.       if (goog.DEBUG) {
  440.         for (const cue of this.currentCuesMap_.keys()) {
  441.           previousCuesMap.set(cue, this.currentCuesMap_.get(cue));
  442.         }
  443.       }
  445.       // Update the cues.
  446.       this.updateCuesRecursive_(
  447.           this.cues_, this.textContainer_, currentTime, /* parents= */ []);
  449.       if (goog.DEBUG) {
  450.         // Previously, we had an issue (#2076) where cues sometimes were not
  451.         // properly removed from the DOM. It is not clear if this issue still
  452.         // happens, so the previous fix for it has been changed to an assert.
  453.         for (const cue of previousCuesMap.keys()) {
  454.           if (!this.currentCuesMap_.has(cue)) {
  455.             // TODO: If the problem does not appear again, then we should remove
  456.             // this assert (and the previousCuesMap code) in Shaka v4.
  457.             const cueElement = previousCuesMap.get(cue).cueElement;
  458.             goog.asserts.assert(
  459.                 !cueElement.parentNode, 'Cue was not properly removed!');
  460.           }
  461.         }
  462.       }
  463.     }
  464.   }
  466.   /**
  467.    * Compute a unique internal id:
  468.    * Regions can reuse the id but have different dimensions, we need to
  469.    * consider those differences
  470.    * @param {shaka.text.CueRegion} region
  471.    * @private
  472.    */
  473.   generateRegionId_(region) {
  474.     const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
  475.     const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
  476.     const viewportAnchorUnit =
  477.         region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
  478.     const uniqueRegionId = `${region.id}_${
  479.       region.width}x${region.height}${heightUnit}-${
  480.       region.viewportAnchorX}x${region.viewportAnchorY}${viewportAnchorUnit}`;
  482.     return uniqueRegionId;
  483.   }
  485.   /**
  486.    * Get or create a region element corresponding to the cue region.  These are
  487.    * cached by ID.
  488.    *
  489.    * @param {!shaka.text.Cue} cue
  490.    * @return {!HTMLElement}
  491.    * @private
  492.    */
  493.   getRegionElement_(cue) {
  494.     const region = cue.region;
  495.     // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#caption-window-size
  496.     // if aspect ratio is 4/3, use that value, otherwise, use the 16:9 value
  497.     const lineWidthMultiple = this.aspectRatio_ === 4/3 ? 2.5 : 1.9;
  498.     const lineHeightMultiple = 5.33;
  500.     const regionId = this.generateRegionId_(region);
  501.     if (this.regionElements_.has(regionId)) {
  502.       return this.regionElements_.get(regionId);
  503.     }
  505.     const regionElement = shaka.util.Dom.createHTMLElement('span');
  507.     const linesUnit = shaka.text.CueRegion.units.LINES;
  508.     const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
  509.     const pixelUnit = shaka.text.CueRegion.units.PX;
  510.     let heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
  511.     let widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
  512.     const viewportAnchorUnit =
  513.         region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
  515.     regionElement.id = 'shaka-text-region---' + regionId;
  516.     regionElement.classList.add('shaka-text-region');
  518.     regionElement.style.position = 'absolute';
  520.     let regionHeight = region.height;
  521.     let regionWidth = region.width;
  523.     if (region.heightUnits === linesUnit) {
  524.       regionHeight = region.height * lineHeightMultiple;
  525.       heightUnit = '%';
  526.     }
  527.     if (region.widthUnits === linesUnit) {
  528.       regionWidth = region.width * lineWidthMultiple;
  529.       widthUnit = '%';
  530.     }
  531.     regionElement.style.height = regionHeight + heightUnit;
  532.     regionElement.style.width = regionWidth + widthUnit;
  534.     if (region.viewportAnchorUnits === linesUnit) {
  535.       // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-708
  536.       let top = region.viewportAnchorY / 75 * 100;
  537.       const windowWidth = this.aspectRatio_ === 4/3 ? 160 : 210;
  538.       let left = region.viewportAnchorX / windowWidth * 100;
  539.       // adjust top and left values based on the region anchor and window size
  540.       top -= region.regionAnchorY * regionHeight / 100;
  541.       left -= region.regionAnchorX * regionWidth / 100;
  542.       regionElement.style.top = top + '%';
  543.       regionElement.style.left = left + '%';
  544.     } else {
  545.       regionElement.style.top = region.viewportAnchorY -
  546.         region.regionAnchorY * regionHeight / 100 + viewportAnchorUnit;
  547.       regionElement.style.left = region.viewportAnchorX -
  548.         region.regionAnchorX * regionWidth / 100 + viewportAnchorUnit;
  549.     }
  550.     if (region.heightUnits !== pixelUnit &&
  551.         region.widthUnits !== pixelUnit &&
  552.         region.viewportAnchorUnits !== pixelUnit) {
  553.       // Clip region
  554.       const top = parseInt(regionElement.style.top.slice(0, -1), 10) || 0;
  555.       const left = parseInt(regionElement.style.left.slice(0, -1), 10) || 0;
  556.       const height = parseInt(regionElement.style.height.slice(0, -1), 10) || 0;
  557.       const width = parseInt(regionElement.style.width.slice(0, -1), 10) || 0;
  558.       const realTop = Math.max(0, Math.min(100 - height, top));
  559.       const realLeft = Math.max(0, Math.min(100 - width, left));
  560.       regionElement.style.top = realTop + '%';
  561.       regionElement.style.left = realLeft + '%';
  562.     }
  564.     regionElement.style.display = 'flex';
  565.     regionElement.style.flexDirection = 'column';
  566.     regionElement.style.alignItems = 'center';
  568.     if (cue.displayAlign == shaka.text.Cue.displayAlign.BEFORE) {
  569.       regionElement.style.justifyContent = 'flex-start';
  570.     } else if (cue.displayAlign == shaka.text.Cue.displayAlign.CENTER) {
  571.       regionElement.style.justifyContent = 'center';
  572.     } else {
  573.       regionElement.style.justifyContent = 'flex-end';
  574.     }
  576.     this.regionElements_.set(regionId, regionElement);
  577.     return regionElement;
  578.   }
  580.   /**
  581.    * Creates the object for a cue.
  582.    *
  583.    * @param {!shaka.text.Cue} cue
  584.    * @param {!Array.<!shaka.text.Cue>} parents
  585.    * @private
  586.    */
  587.   createCue_(cue, parents) {
  588.     const isNested = parents.length > 1;
  589.     let type = isNested ? 'span' : 'div';
  590.     if (cue.lineBreak) {
  591.       type = 'br';
  592.     }
  593.     if (cue.rubyTag) {
  594.       type = cue.rubyTag;
  595.     }
  597.     const needWrapper = !isNested && cue.nestedCues.length > 0;
  599.     // Nested cues are inline elements.  Top-level cues are block elements.
  600.     const cueElement = shaka.util.Dom.createHTMLElement(type);
  601.     if (type != 'br') {
  602.       this.setCaptionStyles_(cueElement, cue, parents, needWrapper);
  603.     }
  605.     let regionElement = null;
  606.     if (cue.region && cue.region.id) {
  607.       regionElement = this.getRegionElement_(cue);
  608.     }
  610.     let wrapper = cueElement;
  611.     if (needWrapper) {
  612.       // Create a wrapper element which will serve to contain all children into
  613.       // a single item.  This ensures that nested span elements appear
  614.       // horizontally and br elements occupy no vertical space.
  615.       wrapper = shaka.util.Dom.createHTMLElement('span');
  616.       wrapper.classList.add('shaka-text-wrapper');
  617.       wrapper.style.backgroundColor = cue.backgroundColor;
  618.       wrapper.style.lineHeight = 'normal';
  619.       cueElement.appendChild(wrapper);
  620.     }
  622.     this.currentCuesMap_.set(cue, {cueElement, wrapper, regionElement});
  623.   }
  625.   /**
  626.    * Compute cue position alignment
  627.    * See https://www.w3.org/TR/webvtt1/#webvtt-cue-position-alignment
  628.    *
  629.    * @param {!shaka.text.Cue} cue
  630.    * @private
  631.    */
  632.   computeCuePositionAlignment_(cue) {
  633.     const Cue = shaka.text.Cue;
  634.     const {direction, positionAlign, textAlign} = cue;
  636.     if (positionAlign !== Cue.positionAlign.AUTO) {
  637.       // Position align is not AUTO: use it
  638.       return positionAlign;
  639.     }
  641.     // Position align is AUTO: use text align to compute its value
  643.     if (textAlign === Cue.textAlign.LEFT ||
  644.       (textAlign === Cue.textAlign.START &&
  645.         direction === Cue.direction.HORIZONTAL_LEFT_TO_RIGHT) ||
  646.       (textAlign === Cue.textAlign.END &&
  647.         direction === Cue.direction.HORIZONTAL_RIGHT_TO_LEFT)) {
  648.       return Cue.positionAlign.LEFT;
  649.     }
  651.     if (textAlign === Cue.textAlign.RIGHT ||
  652.       (textAlign === Cue.textAlign.START &&
  653.         direction === Cue.direction.HORIZONTAL_RIGHT_TO_LEFT) ||
  654.       (textAlign === Cue.textAlign.END &&
  655.         direction === Cue.direction.HORIZONTAL_LEFT_TO_RIGHT)) {
  656.       return Cue.positionAlign.RIGHT;
  657.     }
  659.     return Cue.positionAlign.CENTER;
  660.   }
  662.   /**
  663.    * @param {!HTMLElement} cueElement
  664.    * @param {!shaka.text.Cue} cue
  665.    * @param {!Array.<!shaka.text.Cue>} parents
  666.    * @param {boolean} hasWrapper
  667.    * @private
  668.    */
  669.   setCaptionStyles_(cueElement, cue, parents, hasWrapper) {
  670.     const Cue = shaka.text.Cue;
  671.     const inherit =
  672.         (cb) => shaka.text.UITextDisplayer.inheritProperty_(parents, cb);
  673.     const style = cueElement.style;
  674.     const isLeaf = cue.nestedCues.length == 0;
  675.     const isNested = parents.length > 1;
  677.     // TODO: wrapLine is not yet supported.  Lines always wrap.
  679.     // White space should be preserved if emitted by the text parser.  It's the
  680.     // job of the parser to omit any whitespace that should not be displayed.
  681.     // Using 'pre-wrap' means that whitespace is preserved even at the end of
  682.     // the text, but that lines which overflow can still be broken.
  683.     style.whiteSpace = 'pre-wrap';
  685.     // Using 'break-spaces' would be better, as it would preserve even trailing
  686.     // spaces, but that only shipped in Chrome 76.  As of July 2020, Safari
  687.     // still has not implemented break-spaces, and the original Chromecast will
  688.     // never have this feature since it no longer gets firmware updates.
  689.     // So we need to replace trailing spaces with non-breaking spaces.
  690.     const text = cue.payload.replace(/\s+$/g, (match) => {
  691.       const nonBreakingSpace = '\xa0';
  692.       return nonBreakingSpace.repeat(match.length);
  693.     });
  695.     style.webkitTextStrokeColor = cue.textStrokeColor;
  696.     style.webkitTextStrokeWidth = cue.textStrokeWidth;
  697.     style.color = cue.color;
  698.     style.direction = cue.direction;
  699.     style.opacity = cue.opacity;
  700.     style.paddingLeft = shaka.text.UITextDisplayer.convertLengthValue_(
  701.         cue.linePadding, cue, this.videoContainer_);
  702.     style.paddingRight =
  703.         shaka.text.UITextDisplayer.convertLengthValue_(
  704.             cue.linePadding, cue, this.videoContainer_);
  705.     style.textCombineUpright = cue.textCombineUpright;
  706.     style.textShadow = cue.textShadow;
  708.     if (cue.backgroundImage) {
  709.       style.backgroundImage = 'url(\'' + cue.backgroundImage + '\')';
  710.       style.backgroundRepeat = 'no-repeat';
  711.       style.backgroundSize = 'contain';
  712.       style.backgroundPosition = 'center';
  714.       if (cue.backgroundColor) {
  715.         style.backgroundColor = cue.backgroundColor;
  716.       }
  718.       // Quoting https://www.w3.org/TR/ttml-imsc1.2/:
  719.       // "The width and height (in pixels) of the image resource referenced by
  720.       // smpte:backgroundImage SHALL be equal to the width and height expressed
  721.       // by the tts:extent attribute of the region in which the div element is
  722.       // presented".
  723.       style.width = '100%';
  724.       style.height = '100%';
  725.     } else {
  726.       // If we have both text and nested cues, then style everything; otherwise
  727.       // place the text in its own <span> so the background doesn't fill the
  728.       // whole region.
  729.       let elem;
  730.       if (cue.nestedCues.length) {
  731.         elem = cueElement;
  732.       } else {
  733.         elem = shaka.util.Dom.createHTMLElement('span');
  734.         cueElement.appendChild(elem);
  735.       }
  737.       if (cue.border) {
  738.         elem.style.border = cue.border;
  739.       }
  740.       if (!hasWrapper) {
  741.         const bgColor = inherit((c) => c.backgroundColor);
  742.         if (bgColor) {
  743.           elem.style.backgroundColor = bgColor;
  744.         } else if (text) {
  745.           // If there is no background, default to a semi-transparent black.
  746.           // Only do this for the text itself.
  747.           elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  748.         }
  749.       }
  750.       if (text) {
  751.         elem.textContent = text;
  752.       }
  753.     }
  755.     // The displayAlign attribute specifies the vertical alignment of the
  756.     // captions inside the text container. Before means at the top of the
  757.     // text container, and after means at the bottom.
  758.     if (isNested && !parents[parents.length - 1].isContainer) {
  759.       style.display = 'inline';
  760.     } else {
  761.       style.display = 'flex';
  762.       style.flexDirection = 'column';
  763.       style.alignItems = 'center';
  764.       if (cue.textAlign == Cue.textAlign.LEFT ||
  765.           cue.textAlign == Cue.textAlign.START) {
  766.         style.width = '100%';
  767.         style.alignItems = 'start';
  768.       } else if (cue.textAlign == Cue.textAlign.RIGHT ||
  769.           cue.textAlign == Cue.textAlign.END) {
  770.         style.width = '100%';
  771.         style.alignItems = 'end';
  772.       }
  774.       if (cue.displayAlign == Cue.displayAlign.BEFORE) {
  775.         style.justifyContent = 'flex-start';
  776.       } else if (cue.displayAlign == Cue.displayAlign.CENTER) {
  777.         style.justifyContent = 'center';
  778.       } else {
  779.         style.justifyContent = 'flex-end';
  780.       }
  781.     }
  783.     if (!isLeaf) {
  784.       style.margin = '0';
  785.     }
  787.     style.fontFamily = cue.fontFamily;
  788.     style.fontWeight = cue.fontWeight.toString();
  789.     style.fontStyle = cue.fontStyle;
  790.     style.letterSpacing = cue.letterSpacing;
  791.     style.fontSize = shaka.text.UITextDisplayer.convertLengthValue_(
  792.         cue.fontSize, cue, this.videoContainer_);
  794.     // The line attribute defines the positioning of the text container inside
  795.     // the video container.
  796.     // - The line offsets the text container from the top, the right or left of
  797.     //   the video viewport as defined by the writing direction.
  798.     // - The value of the line is either as a number of lines, or a percentage
  799.     //   of the video viewport height or width.
  800.     // The lineAlign is an alignment for the text container's line.
  801.     // - The Start alignment means the text container’s top side (for horizontal
  802.     //   cues), left side (for vertical growing right), or right side (for
  803.     //   vertical growing left) is aligned at the line.
  804.     // - The Center alignment means the text container is centered at the line
  805.     //   (to be implemented).
  806.     // - The End Alignment means The text container’s bottom side (for
  807.     //   horizontal cues), right side (for vertical growing right), or left side
  808.     //   (for vertical growing left) is aligned at the line.
  809.     // TODO: Implement line alignment with line number.
  810.     // TODO: Implement lineAlignment of 'CENTER'.
  811.     let line = cue.line;
  812.     if (line != null) {
  813.       let lineInterpretation = cue.lineInterpretation;
  814.       // HACK: the current implementation of UITextDisplayer only handled
  815.       // PERCENTAGE, so we need convert LINE_NUMBER to PERCENTAGE
  816.       if (lineInterpretation == Cue.lineInterpretation.LINE_NUMBER) {
  817.         lineInterpretation = Cue.lineInterpretation.PERCENTAGE;
  818.         let maxLines = 16;
  819.         // The maximum number of lines is different if it is a vertical video.
  820.         if (this.aspectRatio_ && this.aspectRatio_ < 1) {
  821.           maxLines = 32;
  822.         }
  823.         if (line < 0) {
  824.           line = 100 + line / maxLines * 100;
  825.         } else {
  826.           line = line / maxLines * 100;
  827.         }
  828.       }
  829.       if (lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
  830.         style.position = 'absolute';
  831.         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  832.           style.width = '100%';
  833.           if (cue.lineAlign == Cue.lineAlign.START) {
  834.             style.top = line + '%';
  835.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  836.             style.bottom = (100 - line) + '%';
  837.           }
  838.         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
  839.           style.height = '100%';
  840.           if (cue.lineAlign == Cue.lineAlign.START) {
  841.             style.left = line + '%';
  842.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  843.             style.right = (100 - line) + '%';
  844.           }
  845.         } else {
  846.           style.height = '100%';
  847.           if (cue.lineAlign == Cue.lineAlign.START) {
  848.             style.right = line + '%';
  849.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  850.             style.left = (100 - line) + '%';
  851.           }
  852.         }
  853.       }
  854.     }
  856.     style.lineHeight = cue.lineHeight;
  858.     // The positionAlign attribute is an alignment for the text container in
  859.     // the dimension of the writing direction.
  860.     const computedPositionAlign = this.computeCuePositionAlignment_(cue);
  861.     if (computedPositionAlign == Cue.positionAlign.LEFT) {
  862.       style.cssFloat = 'left';
  863.       if (cue.position !== null) {
  864.         style.position = 'absolute';
  865.         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  866.           style.left = cue.position + '%';
  867.           style.width = 'auto';
  868.         } else {
  869.           style.top = cue.position + '%';
  870.         }
  871.       }
  872.     } else if (computedPositionAlign == Cue.positionAlign.RIGHT) {
  873.       style.cssFloat = 'right';
  874.       if (cue.position !== null) {
  875.         style.position = 'absolute';
  876.         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  877.           style.right = (100 - cue.position) + '%';
  878.           style.width = 'auto';
  879.         } else {
  880.           style.bottom = cue.position + '%';
  881.         }
  882.       }
  883.     } else {
  884.       if (cue.position !== null && cue.position != 50) {
  885.         style.position = 'absolute';
  886.         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  887.           style.left = cue.position + '%';
  888.           style.width = 'auto';
  889.         } else {
  890.           style.top = cue.position + '%';
  891.         }
  892.       }
  893.     }
  895.     style.textAlign = cue.textAlign;
  896.     style.textDecoration = cue.textDecoration.join(' ');
  897.     style.writingMode = cue.writingMode;
  899.     // Old versions of Chromium, which may be found in certain versions of Tizen
  900.     // and WebOS, may require the prefixed version: webkitWritingMode.
  901.     // https://caniuse.com/css-writing-mode
  902.     // However, testing shows that Tizen 3, at least, has a 'writingMode'
  903.     // property, but the setter for it does nothing.  Therefore we need to
  904.     // detect that and fall back to the prefixed version in this case, too.
  905.     if (!('writingMode' in document.documentElement.style) ||
  906.         style.writingMode != cue.writingMode) {
  907.       // Note that here we do not bother to check for webkitWritingMode support
  908.       // explicitly.  We try the unprefixed version, then fall back to the
  909.       // prefixed version unconditionally.
  910.       style.webkitWritingMode = cue.writingMode;
  911.     }
  913.     // The size is a number giving the size of the text container, to be
  914.     // interpreted as a percentage of the video, as defined by the writing
  915.     // direction.
  916.     if (cue.size) {
  917.       if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  918.         style.width = cue.size + '%';
  919.       } else {
  920.         style.height = cue.size + '%';
  921.       }
  922.     }
  923.   }
  925.   /**
  926.    * Returns info about provided lengthValue
  927.    * @example 100px => { value: 100, unit: 'px' }
  928.    * @param {?string} lengthValue
  929.    *
  930.    * @return {?{ value: number, unit: string }}
  931.    * @private
  932.    */
  933.   static getLengthValueInfo_(lengthValue) {
  934.     const matches = new RegExp(/(\d*\.?\d+)([a-z]+|%+)/).exec(lengthValue);
  936.     if (!matches) {
  937.       return null;
  938.     }
  940.     return {
  941.       value: Number(matches[1]),
  942.       unit: matches[2],
  943.     };
  944.   }
  946.   /**
  947.    * Converts length value to an absolute value in pixels.
  948.    * If lengthValue is already an absolute value it will not
  949.    * be modified. Relative lengthValue will be converted to an
  950.    * absolute value in pixels based on Computed Cell Size
  951.    *
  952.    * @param {string} lengthValue
  953.    * @param {!shaka.text.Cue} cue
  954.    * @param {HTMLElement} videoContainer
  955.    * @return {string}
  956.    * @private
  957.   */
  958.   static convertLengthValue_(lengthValue, cue, videoContainer) {
  959.     const lengthValueInfo =
  960.         shaka.text.UITextDisplayer.getLengthValueInfo_(lengthValue);
  962.     if (!lengthValueInfo) {
  963.       return lengthValue;
  964.     }
  966.     const {unit, value} = lengthValueInfo;
  968.     switch (unit) {
  969.       case '%':
  970.         return shaka.text.UITextDisplayer.getAbsoluteLengthInPixels_(
  971.             value / 100, cue, videoContainer);
  972.       case 'c':
  973.         return shaka.text.UITextDisplayer.getAbsoluteLengthInPixels_(
  974.             value, cue, videoContainer);
  975.       default:
  976.         return lengthValue;
  977.     }
  978.   }
  980.   /**
  981.    * Returns computed absolute length value in pixels based on cell
  982.    * and a video container size
  983.    * @param {number} value
  984.    * @param {!shaka.text.Cue} cue
  985.    * @param {HTMLElement} videoContainer
  986.    * @return {string}
  987.    *
  988.    * @private
  989.    * */
  990.   static getAbsoluteLengthInPixels_(value, cue, videoContainer) {
  991.     const containerHeight = videoContainer.clientHeight;
  993.     return (containerHeight * value / cue.cellResolution.rows) + 'px';
  994.   }
  996.   /**
  997.    * Inherits a property from the parent Cue elements.  If the value is falsy,
  998.    * it is assumed to be inherited from the parent. This returns null if the
  999.    * value isn't found.
  1000.    *
  1001.    * @param {!Array.<!shaka.text.Cue>} parents
  1002.    * @param {function(!shaka.text.Cue):?T} cb
  1003.    * @return {?T}
  1004.    * @template T
  1005.    * @private
  1006.    */
  1007.   static inheritProperty_(parents, cb) {
  1008.     for (let i = parents.length - 1; i >= 0; i--) {
  1009.       const val = cb(parents[i]);
  1010.       if (val || val === 0) {
  1011.         return val;
  1012.       }
  1013.     }
  1014.     return null;
  1015.   }
  1016. };