Source: ui/text_displayer.js

  1. /**
  2.  * @license
  3.  * Copyright 2016 Google Inc.
  4.  *
  5.  * Licensed under the Apache License, Version 2.0 (the "License");
  6.  * you may not use this file except in compliance with the License.
  7.  * You may obtain a copy of the License at
  8.  *
  9.  *     http://www.apache.org/licenses/LICENSE-2.0
  10.  *
  11.  * Unless required by applicable law or agreed to in writing, software
  12.  * distributed under the License is distributed on an "AS IS" BASIS,
  13.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14.  * See the License for the specific language governing permissions and
  15.  * limitations under the License.
  16.  */
  19. goog.provide('shaka.ui.TextDisplayer');
  21. goog.require('shaka.util.Dom');
  22. goog.require('shaka.util.EventManager');
  23. goog.require('shaka.util.Timer');
  26. /**
  27.  * @implements {shaka.extern.TextDisplayer}
  28.  * @final
  29.  * @export
  30.  */
  31. shaka.ui.TextDisplayer = class {
  32.   /**
  33.    * Constructor.
  34.    * @param {HTMLMediaElement} video
  35.    * @param {HTMLElement} videoContainer
  36.    */
  37.   constructor(video, videoContainer) {
  38.     /** @private {boolean} */
  39.     this.isTextVisible_ = false;
  41.     /** @private {!Array.<!shaka.text.Cue>} */
  42.     this.cues_ = [];
  44.     /** @private {HTMLMediaElement} */
  45.     this.video_ = video;
  47.     /** @private {HTMLElement} */
  48.     this.videoContainer_ = videoContainer;
  50.     /** @type {HTMLElement} */
  51.     this.textContainer_ = shaka.util.Dom.createHTMLElement('div');
  52.     this.textContainer_.classList.add('shaka-text-container');
  54.     // Set the subtitles text-centered by default.
  55.     this.textContainer_.style.textAlign = 'center';
  57.     // Set the captions in the middle horizontally by default.
  58.     this.textContainer_.style.display = 'flex';
  59.     this.textContainer_.style.flexDirection = 'column';
  60.     this.textContainer_.style.alignItems = 'center';
  62.     // Set the captions at the bottom by default.
  63.     this.textContainer_.style.justifyContent = 'flex-end';
  65.     this.videoContainer_.appendChild(this.textContainer_);
  67.     /**
  68.      * The captions' update period in seconds.
  69.      * @private {number}
  70.      */
  71.     const updatePeriod = 0.25;
  73.     /** @private {shaka.util.Timer} */
  74.     this.captionsTimer_ = new shaka.util.Timer(() => {
  75.       this.updateCaptions_();
  76.     }).tickEvery(updatePeriod);
  78.     /** private {Map.<!shaka.extern.Cue, !HTMLElement>} */
  79.     this.currentCuesMap_ = new Map();
  81.     /** @private {shaka.util.EventManager} */
  82.     this.eventManager_ = new shaka.util.EventManager();
  84.     this.eventManager_.listen(document, 'fullscreenchange', () => {
  85.       this.updateCaptions_(/* forceUpdate= */ true);
  86.     });
  88.     /** @private {ResizeObserver} */
  89.     this.resizeObserver_ = null;
  90.     if ('ResizeObserver' in window) {
  91.       this.resizeObserver_ = new ResizeObserver(() => {
  92.         this.updateCaptions_(/* forceUpdate= */ true);
  93.       });
  94.       this.resizeObserver_.observe(this.textContainer_);
  95.     }
  96.   }
  99.   /**
  100.    * @override
  101.    * @export
  102.    */
  103.   append(cues) {
  104.     // Clone the cues list for performace optimization. We can avoid the cues
  105.     // list growing during the comparisons for duplicate cues.
  106.     // See: https://github.com/google/shaka-player/issues/3018
  107.     const cuesList = [...this.cues_];
  108.     for (const cue of cues) {
  109.       // When a VTT cue spans a segment boundary, the cue will be duplicated
  110.       // into two segments.
  111.       // To avoid displaying duplicate cues, if the current cue list already
  112.       // contains the cue, skip it.
  113.       const containsCue = cuesList.some(
  114.           (cueInList) => shaka.text.Cue.equal(cueInList, cue));
  115.       if (!containsCue) {
  116.         this.cues_.push(cue);
  117.       }
  118.     }
  119.   }
  122.   /**
  123.    * @override
  124.    * @export
  125.    */
  126.   destroy() {
  127.     // Remove the text container element from the UI.
  128.     this.videoContainer_.removeChild(this.textContainer_);
  129.     this.textContainer_ = null;
  131.     this.isTextVisible_ = false;
  132.     this.cues_ = [];
  133.     if (this.captionsTimer_) {
  134.       this.captionsTimer_.stop();
  135.     }
  137.     this.currentCuesMap_.clear();
  139.     // Tear-down the event manager to ensure messages stop moving around.
  140.     if (this.eventManager_) {
  141.       this.eventManager_.release();
  142.       this.eventManager_ = null;
  143.     }
  145.     if (this.resizeObserver_) {
  146.       this.resizeObserver_.disconnect();
  147.       this.resizeObserver_ = null;
  148.     }
  149.   }
  152.   /**
  153.    * @override
  154.    * @export
  155.    */
  156.   remove(start, end) {
  157.     // Return false if destroy() has been called.
  158.     if (!this.textContainer_) {
  159.       return false;
  160.     }
  162.     // Remove the cues out of the time range.
  163.     this.cues_ = this.cues_.filter(
  164.         (cue) => cue.startTime < start || cue.endTime >= end);
  165.     this.updateCaptions_();
  167.     return true;
  168.   }
  171.   /**
  172.    * @override
  173.    * @export
  174.    */
  175.   isTextVisible() {
  176.     return this.isTextVisible_;
  177.   }
  179.   /**
  180.    * @override
  181.    * @export
  182.    */
  183.   setTextVisibility(on) {
  184.     this.isTextVisible_ = on;
  185.   }
  187.   /**
  188.    * Display the current captions.
  189.    * @param {boolean=} forceUpdate
  190.    * @private
  191.    */
  192.   updateCaptions_(forceUpdate = false) {
  193.     const currentTime = this.video_.currentTime;
  195.     // Return true if the cue should be displayed at the current time point.
  196.     const shouldCueBeDisplayed = (cue) => {
  197.       return this.cues_.includes(cue) && this.isTextVisible_ &&
  198.              cue.startTime <= currentTime && cue.endTime > currentTime;
  199.     };
  201.     // For each cue in the current cues map, if the cue's end time has passed,
  202.     // remove the entry from the map, and remove the captions from the page.
  203.     for (const cue of this.currentCuesMap_.keys()) {
  204.       if (!shouldCueBeDisplayed(cue) || forceUpdate) {
  205.         const captions = this.currentCuesMap_.get(cue);
  206.         this.textContainer_.removeChild(captions);
  207.         this.currentCuesMap_.delete(cue);
  208.       }
  209.     }
  211.     // Sometimes we don't remove a cue element correctly.  So check all the
  212.     // child nodes and remove any that don't have an associated cue.
  213.     const expectedChildren = new Set(this.currentCuesMap_.values());
  214.     for (const child of Array.from(this.textContainer_.childNodes)) {
  215.       if (!expectedChildren.has(child)) {
  216.         this.textContainer_.removeChild(child);
  217.       }
  218.     }
  220.     // Get the current cues that should be added to display. If the cue is not
  221.     // being displayed already, add it to the map, and add the captions onto the
  222.     // page.
  223.     const currentCues = this.cues_.filter((cue) => {
  224.       return shouldCueBeDisplayed(cue) && !this.currentCuesMap_.has(cue);
  225.     }).sort((a, b) => {
  226.       if (a.startTime != b.startTime) {
  227.         return a.startTime - b.startTime;
  228.       } else {
  229.         return a.endTime - b.endTime;
  230.       }
  231.     });
  233.     for (const cue of currentCues) {
  234.       this.displayCue_(this.textContainer_, cue);
  235.     }
  236.   }
  238.   /**
  239.    * Displays a nested cue
  240.    *
  241.    * @param {Element} container
  242.    * @param {!shaka.extern.Cue} cue
  243.    * @param {boolean} isNested
  244.    * @return {!Element} the created captions container
  245.    * @private
  246.    */
  247.   displayLeafCue_(container, cue, isNested) {
  248.     const captions = shaka.util.Dom.createHTMLElement('span');
  249.     if (isNested) {
  250.       captions.classList.add('shaka-nested-cue');
  251.     }
  253.     if (cue.spacer) {
  254.       captions.style.display = 'block';
  255.     } else {
  256.       this.setCaptionStyles_(captions, cue, /* isLeaf= */ true);
  257.     }
  259.     container.appendChild(captions);
  261.     return captions;
  262.   }
  264.   /**
  265.    * Displays a cue
  266.    *
  267.    * @param {Element} container
  268.    * @param {!shaka.extern.Cue} cue
  269.    * @private
  270.    */
  271.   displayCue_(container, cue) {
  272.     if (cue.nestedCues.length) {
  273.       const nestedCuesContainer = shaka.util.Dom.createHTMLElement('p');
  274.       nestedCuesContainer.style.width = '100%';
  275.       this.setCaptionStyles_(nestedCuesContainer, cue, /* isLeaf= */ false);
  277.       for (let i = 0; i < cue.nestedCues.length; i++) {
  278.         this.displayLeafCue_(
  279.             nestedCuesContainer, cue.nestedCues[i], /* isNested= */ true);
  280.       }
  282.       container.appendChild(nestedCuesContainer);
  283.       this.currentCuesMap_.set(cue, nestedCuesContainer);
  284.     } else {
  285.       this.currentCuesMap_.set(cue,
  286.           this.displayLeafCue_(container, cue, /* isNested= */ false));
  287.     }
  288.   }
  290.   /**
  291.    * @param {!HTMLElement} captions
  292.    * @param {!shaka.extern.Cue} cue
  293.    * @param {boolean} isLeaf
  294.    * @private
  295.    */
  296.   setCaptionStyles_(captions, cue, isLeaf) {
  297.     const Cue = shaka.text.Cue;
  298.     const captionsStyle = captions.style;
  300.     // Set white-space to 'pre-line' to enable showing line breaks in the text.
  301.     captionsStyle.whiteSpace = 'pre-line';
  302.     captions.textContent = cue.payload;
  303.     if (isLeaf) {
  304.       captionsStyle.backgroundColor = cue.backgroundColor;
  305.     }
  306.     captionsStyle.color = cue.color;
  307.     captionsStyle.direction = cue.direction;
  309.     if (cue.backgroundImage) {
  310.       captionsStyle.backgroundImage = 'url(\'' + cue.backgroundImage + '\')';
  311.       captionsStyle.backgroundRepeat = 'no-repeat';
  312.       captionsStyle.backgroundSize = 'contain';
  313.       captionsStyle.backgroundPosition = 'center';
  314.       if (cue.backgroundColor == '') {
  315.         captionsStyle.backgroundColor = 'transparent';
  316.       }
  317.     }
  318.     if (cue.backgroundImage && cue.region) {
  319.       const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
  320.       const heightUnit = cue.region.heightUnits == percentageUnit ? '%' : 'px';
  321.       const widthUnit = cue.region.widthUnits == percentageUnit ? '%' : 'px';
  322.       captionsStyle.height = cue.region.height + heightUnit;
  323.       captionsStyle.width = cue.region.width + widthUnit;
  324.     }
  326.     // The displayAlign attribute specifys the vertical alignment of the
  327.     // captions inside the text container. Before means at the top of the
  328.     // text container, and after means at the bottom.
  329.     if (cue.displayAlign == Cue.displayAlign.BEFORE) {
  330.       captionsStyle.justifyContent = 'flex-start';
  331.     } else if (cue.displayAlign == Cue.displayAlign.CENTER) {
  332.       captionsStyle.justifyContent = 'center';
  333.     } else {
  334.       captionsStyle.justifyContent = 'flex-end';
  335.     }
  337.     if (cue.nestedCues.length) {
  338.       captionsStyle.display = 'flex';
  339.       captionsStyle.flexDirection = 'row';
  340.       captionsStyle.margin = '0';
  341.       // Setting flexDirection to "row" inverts the sense of align and justify.
  342.       // Now align is vertical and justify is horizontal.  See comments above on
  343.       // vertical alignment for displayAlign.
  344.       captionsStyle.alignItems = captionsStyle.justifyContent;
  345.       captionsStyle.justifyContent = 'center';
  346.     }
  348.     if (isLeaf) {
  349.       // Work around an IE 11 flexbox bug in which center-aligned items can
  350.       // overflow their container.  See
  351.       // https://github.com/philipwalton/flexbugs/tree/6e720da8#flexbug-2
  352.       captionsStyle.maxWidth = '100%';
  353.     }
  355.     captionsStyle.fontFamily = cue.fontFamily;
  356.     captionsStyle.fontWeight = cue.fontWeight.toString();
  357.     captionsStyle.fontSize = cue.fontSize;
  358.     captionsStyle.fontStyle = cue.fontStyle;
  360.     // The line attribute defines the positioning of the text container inside
  361.     // the video container.
  362.     // - The line offsets the text container from the top, the right or left of
  363.     //   the video viewport as defined by the writing direction.
  364.     // - The value of the line is either as a number of lines, or a percentage
  365.     //   of the video viewport height or width.
  366.     // The lineAlign is an alignment for the text container's line.
  367.     // - The Start alignment means the text container’s top side (for horizontal
  368.     //   cues), left side (for vertical growing right), or right side (for
  369.     //   vertical growing left) is aligned at the line.
  370.     // - The Center alignment means the text container is centered at the line
  371.     //   (to be implemented).
  372.     // - The End Alignment means The text container’s bottom side (for
  373.     //   horizontal cues), right side (for vertical growing right), or left side
  374.     //   (for vertical growing left) is aligned at the line.
  375.     // TODO: Implement line alignment with line number.
  376.     // TODO: Implement lineAlignment of 'CENTER'.
  377.     if (cue.line) {
  378.       if (cue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
  379.         captionsStyle.position = 'absolute';
  380.         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  381.           if (cue.lineAlign == Cue.lineAlign.START) {
  382.             captionsStyle.top = cue.line + '%';
  383.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  384.             captionsStyle.bottom = cue.line + '%';
  385.           }
  386.         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
  387.           if (cue.lineAlign == Cue.lineAlign.START) {
  388.             captionsStyle.left = cue.line + '%';
  389.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  390.             captionsStyle.right = cue.line + '%';
  391.           }
  392.         } else {
  393.           if (cue.lineAlign == Cue.lineAlign.START) {
  394.             captionsStyle.right = cue.line + '%';
  395.           } else if (cue.lineAlign == Cue.lineAlign.END) {
  396.             captionsStyle.left = cue.line + '%';
  397.           }
  398.         }
  399.       }
  400.     } else if (cue.region && cue.region.id && !isLeaf) {
  401.       const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
  402.       const heightUnit = cue.region.heightUnits == percentageUnit ? '%' : 'px';
  403.       const widthUnit = cue.region.widthUnits == percentageUnit ? '%' : 'px';
  404.       const viewportAnchorUnit =
  405.           cue.region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
  406.       captionsStyle.height = cue.region.height + heightUnit;
  407.       captionsStyle.width = cue.region.width + widthUnit;
  408.       captionsStyle.position = 'absolute';
  409.       captionsStyle.top = cue.region.viewportAnchorY + viewportAnchorUnit;
  410.       captionsStyle.left = cue.region.viewportAnchorX + viewportAnchorUnit;
  411.     }
  413.     captionsStyle.lineHeight = cue.lineHeight;
  415.     // The position defines the indent of the text container in the
  416.     // direction defined by the writing direction.
  417.     if (cue.position) {
  418.       if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  419.         captionsStyle.paddingLeft = cue.position;
  420.       } else {
  421.         captionsStyle.paddingTop = cue.position;
  422.       }
  423.     }
  425.     // The positionAlign attribute is an alignment for the text container in
  426.     // the dimension of the writing direction.
  427.     if (cue.positionAlign == Cue.positionAlign.LEFT) {
  428.       captionsStyle.cssFloat = 'left';
  429.     } else if (cue.positionAlign == Cue.positionAlign.RIGHT) {
  430.       captionsStyle.cssFloat = 'right';
  431.     }
  433.     captionsStyle.textAlign = cue.textAlign;
  434.     captionsStyle.textDecoration = cue.textDecoration.join(' ');
  435.     captionsStyle.writingMode = cue.writingMode;
  437.     // Old versions of Chromium, which may be found in certain versions of Tizen
  438.     // and WebOS, may require the prefixed version: webkitWritingMode.
  439.     // https://caniuse.com/css-writing-mode
  440.     // However, testing shows that Tizen 3, at least, has a 'writingMode'
  441.     // property, but the setter for it does nothing.  Therefore we need to
  442.     // detect that and fall back to the prefixed version in this case, too.
  443.     if (!('writingMode' in document.documentElement.style) ||
  444.         captionsStyle.writingMode != cue.writingMode) {
  445.       // Note that here we do not bother to check for webkitWritingMode support
  446.       // explicitly.  We try the unprefixed version, then fall back to the
  447.       // prefixed version unconditionally.
  448.       captionsStyle.webkitWritingMode = cue.writingMode;
  449.     }
  451.     // The size is a number giving the size of the text container, to be
  452.     // interpreted as a percentage of the video, as defined by the writing
  453.     // direction.
  454.     if (cue.size) {
  455.       if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
  456.         captionsStyle.width = cue.size + '%';
  457.       } else {
  458.         captionsStyle.height = cue.size + '%';
  459.       }
  460.     }
  461.   }
  462. };