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