Source: lib/text/cue.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  7. goog.provide('shaka.text.Cue');
  9. goog.require('shaka.log');
  10. goog.require('shaka.text.CueRegion');
  11. goog.require('shaka.util.ArrayUtils');
  12. goog.require('shaka.util.StringUtils');
  13. goog.require('shaka.util.TextParser');
  14. goog.require('shaka.util.TXml');
  17. /**
  18.  * @export
  19.  */
  20. shaka.text.Cue = class {
  21.   /**
  22.    * @param {number} startTime
  23.    * @param {number} endTime
  24.    * @param {string} payload
  25.    */
  26.   constructor(startTime, endTime, payload) {
  27.     const Cue = shaka.text.Cue;
  29.     /**
  30.      * The start time of the cue in seconds, relative to the start of the
  31.      * presentation.
  32.      * @type {number}
  33.      * @export
  34.      */
  35.     this.startTime = startTime;
  37.     /**
  38.      * The end time of the cue in seconds, relative to the start of the
  39.      * presentation.
  40.      * @type {number}
  41.      * @export
  42.      */
  43.     this.endTime = endTime;
  45.     /**
  46.      * The text payload of the cue.  If nestedCues is non-empty, this should be
  47.      * empty.  Top-level block containers should have no payload of their own.
  48.      * @type {string}
  49.      * @export
  50.      */
  51.     this.payload = payload;
  53.     /**
  54.      * The region to render the cue into.  Only supported on top-level cues,
  55.      * because nested cues are inline elements.
  56.      * @type {shaka.text.CueRegion}
  57.      * @export
  58.      */
  59.     this.region = new shaka.text.CueRegion();
  61.     /**
  62.      * The indent (in percent) of the cue box in the direction defined by the
  63.      * writing direction.
  64.      * @type {?number}
  65.      * @export
  66.      */
  67.     this.position = null;
  69.     /**
  70.      * Position alignment of the cue.
  71.      * @type {shaka.text.Cue.positionAlign}
  72.      * @export
  73.      */
  74.     this.positionAlign = Cue.positionAlign.AUTO;
  76.     /**
  77.      * Size of the cue box (in percents), where 0 means "auto".
  78.      * @type {number}
  79.      * @export
  80.      */
  81.     this.size = 0;
  83.     /**
  84.      * Alignment of the text inside the cue box.
  85.      * @type {shaka.text.Cue.textAlign}
  86.      * @export
  87.      */
  88.     this.textAlign = Cue.textAlign.CENTER;
  90.     /**
  91.      * Text direction of the cue.
  92.      * @type {shaka.text.Cue.direction}
  93.      * @export
  94.      */
  95.     this.direction = Cue.direction.HORIZONTAL_LEFT_TO_RIGHT;
  97.     /**
  98.      * Text writing mode of the cue.
  99.      * @type {shaka.text.Cue.writingMode}
  100.      * @export
  101.      */
  102.     this.writingMode = Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM;
  104.     /**
  105.      * The way to interpret line field. (Either as an integer line number or
  106.      * percentage from the display box).
  107.      * @type {shaka.text.Cue.lineInterpretation}
  108.      * @export
  109.      */
  110.     this.lineInterpretation = Cue.lineInterpretation.LINE_NUMBER;
  112.     /**
  113.      * The offset from the display box in either number of lines or
  114.      * percentage depending on the value of lineInterpretation.
  115.      * @type {?number}
  116.      * @export
  117.      */
  118.     this.line = null;
  120.     /**
  121.      * Separation between line areas inside the cue box in px or em
  122.      * (e.g. '100px'/'100em'). If not specified, this should be no less than
  123.      * the largest font size applied to the text in the cue.
  124.      * @type {string}.
  125.      * @export
  126.      */
  127.     this.lineHeight = '';
  129.     /**
  130.      * Line alignment of the cue box.
  131.      * Start alignment means the cue box’s top side (for horizontal cues), left
  132.      * side (for vertical growing right), or right side (for vertical growing
  133.      * left) is aligned at the line.
  134.      * Center alignment means the cue box is centered at the line.
  135.      * End alignment The cue box’s bottom side (for horizontal cues), right side
  136.      * (for vertical growing right), or left side (for vertical growing left) is
  137.      * aligned at the line.
  138.      * @type {shaka.text.Cue.lineAlign}
  139.      * @export
  140.      */
  141.     this.lineAlign = Cue.lineAlign.START;
  143.     /**
  144.      * Vertical alignments of the cues within their extents.
  145.      * 'BEFORE' means displaying the captions at the top of the text display
  146.      * container box, 'CENTER' means in the middle, 'AFTER' means at the bottom.
  147.      * @type {shaka.text.Cue.displayAlign}
  148.      * @export
  149.      */
  150.     this.displayAlign = Cue.displayAlign.AFTER;
  152.     /**
  153.      * Text color as a CSS color, e.g. "#FFFFFF" or "white".
  154.      * @type {string}
  155.      * @export
  156.      */
  157.     this.color = '';
  159.     /**
  160.      * Text background color as a CSS color, e.g. "#FFFFFF" or "white".
  161.      * @type {string}
  162.      * @export
  163.      */
  164.     this.backgroundColor = '';
  166.     /**
  167.      * The URL of the background image, e.g. "data:[mime type];base64,[data]".
  168.      * @type {string}
  169.      * @export
  170.      */
  171.     this.backgroundImage = '';
  173.     /**
  174.      * The border around this cue as a CSS border.
  175.      * @type {string}
  176.      * @export
  177.      */
  178.     this.border = '';
  180.     /**
  181.      * Text font size in px or em (e.g. '100px'/'100em').
  182.      * @type {string}
  183.      * @export
  184.      */
  185.     this.fontSize = '';
  187.     /**
  188.      * Text font weight. Either normal or bold.
  189.      * @type {shaka.text.Cue.fontWeight}
  190.      * @export
  191.      */
  192.     this.fontWeight = Cue.fontWeight.NORMAL;
  194.     /**
  195.      * Text font style. Normal, italic or oblique.
  196.      * @type {shaka.text.Cue.fontStyle}
  197.      * @export
  198.      */
  199.     this.fontStyle = Cue.fontStyle.NORMAL;
  201.     /**
  202.      * Text font family.
  203.      * @type {string}
  204.      * @export
  205.      */
  206.     this.fontFamily = '';
  208.     /**
  209.      * Text letter spacing as a CSS letter-spacing value.
  210.      * @type {string}
  211.      * @export
  212.      */
  213.     this.letterSpacing = '';
  215.     /**
  216.      * Text line padding as a CSS line-padding value.
  217.      * @type {string}
  218.      * @export
  219.      */
  220.     this.linePadding = '';
  222.     /**
  223.      * Opacity of the cue element, from 0-1.
  224.      * @type {number}
  225.      * @export
  226.      */
  227.     this.opacity = 1;
  229.     /**
  230.      * Text combine upright as a CSS text-combine-upright value.
  231.      * @type {string}
  232.      * @export
  233.      */
  234.     this.textCombineUpright = '';
  236.     /**
  237.      * Text decoration. A combination of underline, overline
  238.      * and line through. Empty array means no decoration.
  239.      * @type {!Array.<!shaka.text.Cue.textDecoration>}
  240.      * @export
  241.      */
  242.     this.textDecoration = [];
  244.     /**
  245.      * Text shadow color as a CSS text-shadow value.
  246.      * @type {string}
  247.      * @export
  248.      */
  249.     this.textShadow = '';
  251.     /**
  252.      * Text stroke color as a CSS color, e.g. "#FFFFFF" or "white".
  253.      * @type {string}
  254.      * @export
  255.      */
  256.     this.textStrokeColor = '';
  258.     /**
  259.      * Text stroke width as a CSS stroke-width value.
  260.      * @type {string}
  261.      * @export
  262.      */
  263.     this.textStrokeWidth = '';
  265.     /**
  266.      * Whether or not line wrapping should be applied to the cue.
  267.      * @type {boolean}
  268.      * @export
  269.      */
  270.     this.wrapLine = true;
  272.     /**
  273.      * Id of the cue.
  274.      * @type {string}
  275.      * @export
  276.      */
  277.     this.id = '';
  279.     /**
  280.      * Nested cues, which should be laid out horizontally in one block.
  281.      * Top-level cues are blocks, and nested cues are inline elements.
  282.      * Cues can be nested arbitrarily deeply.
  283.      * @type {!Array.<!shaka.text.Cue>}
  284.      * @export
  285.      */
  286.     this.nestedCues = [];
  288.     /**
  289.      * If true, this represents a container element that is "above" the main
  290.      * cues. For example, the <body> and <div> tags that contain the <p> tags
  291.      * in a TTML file. This controls the flow of the final cues; any nested cues
  292.      * within an "isContainer" cue will be laid out as separate lines.
  293.      * @type {boolean}
  294.      * @export
  295.      */
  296.     this.isContainer = false;
  298.     /**
  299.      * Whether or not the cue only acts as a line break between two nested cues.
  300.      * Should only appear in nested cues.
  301.      * @type {boolean}
  302.      * @export
  303.      */
  304.     this.lineBreak = false;
  306.     /**
  307.      * Used to indicate the type of ruby tag that should be used when rendering
  308.      * the cue. Valid values: ruby, rp, rt.
  309.      * @type {?string}
  310.      * @export
  311.      */
  312.     this.rubyTag = null;
  314.     /**
  315.      * The number of horizontal and vertical cells into which the Root Container
  316.      * Region area is divided.
  317.      *
  318.      * @type {{ columns: number, rows: number }}
  319.      * @export
  320.      */
  321.     this.cellResolution = {
  322.       columns: 32,
  323.       rows: 15,
  324.     };
  325.   }
  327.   /**
  328.    * @param {number} start
  329.    * @param {number} end
  330.    * @return {!shaka.text.Cue}
  331.    */
  332.   static lineBreak(start, end) {
  333.     const cue = new shaka.text.Cue(start, end, '');
  334.     cue.lineBreak = true;
  335.     return cue;
  336.   }
  338.   /**
  339.    * Create a copy of the cue with the same properties.
  340.    * @return {!shaka.text.Cue}
  341.    * @suppress {checkTypes} since we must use [] and "in" with a struct type.
  342.    * @export
  343.    */
  344.   clone() {
  345.     const clone = new shaka.text.Cue(0, 0, '');
  347.     for (const k in this) {
  348.       clone[k] = this[k];
  350.       // Make copies of array fields, but only one level deep.  That way, if we
  351.       // change, for instance, textDecoration on the clone, we don't affect the
  352.       // original.
  353.       if (clone[k] && clone[k].constructor == Array) {
  354.         clone[k] = /** @type {!Array} */(clone[k]).slice();
  355.       }
  356.     }
  358.     return clone;
  359.   }
  361.   /**
  362.    * Check if two Cues have all the same values in all properties.
  363.    * @param {!shaka.text.Cue} cue1
  364.    * @param {!shaka.text.Cue} cue2
  365.    * @return {boolean}
  366.    * @suppress {checkTypes} since we must use [] and "in" with a struct type.
  367.    * @export
  368.    */
  369.   static equal(cue1, cue2) {
  370.     // Compare the start time, end time and payload of the cues first for
  371.     // performance optimization.  We can avoid the more expensive recursive
  372.     // checks if the top-level properties don't match.
  373.     // See: https://github.com/shaka-project/shaka-player/issues/3018
  374.     if (cue1.payload != cue2.payload) {
  375.       return false;
  376.     }
  377.     const isDiffNegligible = (a, b) => Math.abs(a - b) < 0.001;
  378.     if (!isDiffNegligible(cue1.startTime, cue2.startTime) ||
  379.         !isDiffNegligible(cue1.endTime, cue2.endTime)) {
  380.       return false;
  381.     }
  382.     for (const k in cue1) {
  383.       if (k == 'startTime' || k == 'endTime' || k == 'payload') {
  384.         // Already compared.
  385.       } else if (k == 'nestedCues') {
  386.         // This uses shaka.text.Cue.equal rather than just this.equal, since
  387.         // otherwise recursing here will unbox the method and cause "this" to be
  388.         // undefined in deeper recursion.
  389.         if (!shaka.util.ArrayUtils.equal(
  390.             cue1.nestedCues, cue2.nestedCues, shaka.text.Cue.equal)) {
  391.           return false;
  392.         }
  393.       } else if (k == 'region' || k == 'cellResolution') {
  394.         for (const k2 in cue1[k]) {
  395.           if (cue1[k][k2] != cue2[k][k2]) {
  396.             return false;
  397.           }
  398.         }
  399.       } else if (Array.isArray(cue1[k])) {
  400.         if (!shaka.util.ArrayUtils.equal(cue1[k], cue2[k])) {
  401.           return false;
  402.         }
  403.       } else {
  404.         if (cue1[k] != cue2[k]) {
  405.           return false;
  406.         }
  407.       }
  408.     }
  410.     return true;
  411.   }
  413.   /**
  414.    * Parses cue payload, searches for styling entities and, if needed,
  415.    * modifies original payload and creates nested cues to better represent
  416.    * styling found in payload. All changes are done in-place.
  417.    * @param {!shaka.text.Cue} cue
  418.    * @param {!Map<string, !shaka.text.Cue>=} styles
  419.    * @export
  420.    */
  421.   static parseCuePayload(cue, styles = new Map()) {
  422.     const StringUtils = shaka.util.StringUtils;
  423.     const TXml = shaka.util.TXml;
  424.     let payload = cue.payload;
  425.     if (!payload.includes('<')) {
  426.       cue.payload = StringUtils.htmlUnescape(payload);
  427.       return;
  428.     }
  429.     if (styles.size === 0) {
  430.       shaka.text.Cue.addDefaultTextColor(styles);
  431.     }
  432.     payload = shaka.text.Cue.replaceKaraokeStylePayload_(payload);
  433.     payload = shaka.text.Cue.replaceVoiceStylePayload_(payload);
  434.     payload = shaka.text.Cue.escapeInvalidChevrons_(payload);
  436.     cue.payload = '';
  438.     const xmlPayload = '<span>' + payload + '</span>';
  439.     let element;
  440.     try {
  441.       element = TXml.parseXmlString(xmlPayload, 'span');
  442.     } catch (e) {
  443.       shaka.log.warning('cue parse fail: ', e);
  444.     }
  445.     if (element) {
  446.       const childNodes = element.children;
  447.       if (childNodes.length == 1) {
  448.         const childNode = childNodes[0];
  449.         if (!TXml.isNode(childNode)) {
  450.           cue.payload = StringUtils.htmlUnescape(payload);
  451.           return;
  452.         }
  453.       }
  454.       for (const childNode of childNodes) {
  455.         shaka.text.Cue.generateCueFromElement_(childNode, cue, styles);
  456.       }
  457.     } else {
  458.       shaka.log.warning('The cue\'s markup could not be parsed: ', payload);
  459.       cue.payload = StringUtils.htmlUnescape(payload);
  460.     }
  461.   }
  463.   /**
  464.    * Add default color
  465.    *
  466.    * @param {!Map<string, !shaka.text.Cue>} styles
  467.    */
  468.   static addDefaultTextColor(styles) {
  469.     const textColor = shaka.text.Cue.defaultTextColor;
  470.     for (const [key, value] of Object.entries(textColor)) {
  471.       const cue = new shaka.text.Cue(0, 0, '');
  472.       cue.color = value;
  473.       styles.set('.' + key, cue);
  474.     }
  476.     const bgColor = shaka.text.Cue.defaultTextBackgroundColor;
  477.     for (const [key, value] of Object.entries(bgColor)) {
  478.       const cue = new shaka.text.Cue(0, 0, '');
  479.       cue.backgroundColor = value;
  480.       styles.set('.' + key, cue);
  481.     }
  482.   }
  484.   /**
  485.    * Converts karaoke style tag to be valid for xml parsing
  486.    * For example,
  487.    * input: Text <00:00:00.450> time <00:00:01.450> 1
  488.    * output: Text <div time="00:00:00.450"> time
  489.    *         <div time="00:00:01.450"> 1</div></div>
  490.    *
  491.    * @param {string} payload
  492.    * @return {string} processed payload
  493.    * @private
  494.    */
  495.   static replaceKaraokeStylePayload_(payload) {
  496.     const names = [];
  497.     let nameStart = -1;
  498.     for (let i = 0; i < payload.length; i++) {
  499.       if (payload[i] === '<') {
  500.         nameStart = i + 1;
  501.       } else if (payload[i] === '>') {
  502.         if (nameStart > 0) {
  503.           const name = payload.substr(nameStart, i - nameStart);
  504.           if (name.match(shaka.text.Cue.timeFormat_)) {
  505.             names.push(name);
  506.           }
  507.           nameStart = -1;
  508.         }
  509.       }
  510.     }
  511.     let newPayload = payload;
  512.     for (const name of names) {
  513.       const replaceTag = '<' + name + '>';
  514.       const startTag = '<div time="' + name + '">';
  515.       const endTag = '</div>';
  516.       newPayload = newPayload.replace(replaceTag, startTag);
  517.       newPayload += endTag;
  518.     }
  519.     return newPayload;
  520.   }
  522.   /**
  523.    * Converts voice style tag to be valid for xml parsing
  524.    * For example,
  525.    * input: <v Shaka>Test
  526.    * output: <v.voice-Shaka>Test</v.voice-Shaka>
  527.    *
  528.    * @param {string} payload
  529.    * @return {string} processed payload
  530.    * @private
  531.    */
  532.   static replaceVoiceStylePayload_(payload) {
  533.     const voiceTag = 'v';
  534.     const names = [];
  535.     let nameStart = -1;
  536.     let newPayload = '';
  537.     let hasVoiceEndTag = false;
  538.     for (let i = 0; i < payload.length; i++) {
  539.       // This condition is used to manage tags that have end tags.
  540.       if (payload[i] === '/') {
  541.         const end = payload.indexOf('>', i);
  542.         if (end === -1) {
  543.           return payload;
  544.         }
  545.         const tagEnd = payload.substring(i + 1, end);
  546.         if (!tagEnd || tagEnd != voiceTag) {
  547.           newPayload += payload[i];
  548.           continue;
  549.         }
  550.         hasVoiceEndTag = true;
  551.         let tagStart = null;
  552.         if (names.length) {
  553.           tagStart = names[names.length -1];
  554.         }
  555.         if (!tagStart) {
  556.           newPayload += payload[i];
  557.         } else if (tagStart === tagEnd) {
  558.           newPayload += '/' + tagEnd + '>';
  559.           i += tagEnd.length + 1;
  560.         } else {
  561.           if (!tagStart.startsWith(voiceTag)) {
  562.             newPayload += payload[i];
  563.             continue;
  564.           }
  565.           newPayload += '/' + tagStart + '>';
  566.           i += tagEnd.length + 1;
  567.         }
  568.       } else {
  569.         // Here we only want the tag name, not any other payload.
  570.         if (payload[i] === '<') {
  571.           nameStart = i + 1;
  572.           if (payload[nameStart] != voiceTag) {
  573.             nameStart = -1;
  574.           }
  575.         } else if (payload[i] === '>') {
  576.           if (nameStart > 0) {
  577.             names.push(payload.substr(nameStart, i - nameStart));
  578.             nameStart = -1;
  579.           }
  580.         }
  581.         newPayload += payload[i];
  582.       }
  583.     }
  584.     for (const name of names) {
  585.       const newName = name.replace(' ', '.voice-');
  586.       newPayload = newPayload.replace(`<${name}>`, `<${newName}>`);
  587.       newPayload = newPayload.replace(`</${name}>`, `</${newName}>`);
  588.       if (!hasVoiceEndTag) {
  589.         newPayload += `</${newName}>`;
  590.       }
  591.     }
  592.     return newPayload;
  593.   }
  595.   /**
  596.    * This method converts invalid > chevrons to HTML entities.
  597.    * It also removes < chevrons as per spec.
  598.    *
  599.    * @param {!string} input
  600.    * @return {string}
  601.    * @private
  602.    */
  603.   static escapeInvalidChevrons_(input) {
  604.     // Used to map HTML entities to characters.
  605.     const htmlEscapes = {
  606.       '< ': '',
  607.       ' >': ' &gt;',
  608.     };
  610.     const reEscapedHtml = /(< +>|<\s|\s>)/g;
  611.     const reHasEscapedHtml = RegExp(reEscapedHtml.source);
  612.     // This check is an optimization, since replace always makes a copy
  613.     if (input && reHasEscapedHtml.test(input)) {
  614.       return input.replace(reEscapedHtml, (entity) => {
  615.         return htmlEscapes[entity] || '';
  616.       });
  617.     }
  618.     return input || '';
  619.   }
  621.   /**
  622.    * @param {!shaka.extern.xml.Node} element
  623.    * @param {!shaka.text.Cue} rootCue
  624.    * @param {!Map<string, !shaka.text.Cue>} styles
  625.    * @private
  626.    */
  627.   static generateCueFromElement_(element, rootCue, styles) {
  628.     const TXml = shaka.util.TXml;
  629.     const nestedCue = rootCue.clone();
  630.     // We don't want propagate some properties.
  631.     nestedCue.nestedCues = [];
  632.     nestedCue.payload = '';
  633.     nestedCue.rubyTag = '';
  634.     // We don't want propagate some position settings
  635.     nestedCue.line = null;
  636.     nestedCue.region = new shaka.text.CueRegion();
  637.     nestedCue.position = null;
  638.     nestedCue.size = 0;
  639.     nestedCue.textAlign = shaka.text.Cue.textAlign.CENTER;
  641.     if (TXml.isNode(element)) {
  642.       const bold = shaka.text.Cue.fontWeight.BOLD;
  643.       const italic = shaka.text.Cue.fontStyle.ITALIC;
  644.       const underline = shaka.text.Cue.textDecoration.UNDERLINE;
  645.       const tags = element.tagName.split(/(?=[ .])+/g);
  646.       for (const tag of tags) {
  647.         let styleTag = tag;
  648.         // White blanks at start indicate that the style is a voice
  649.         if (styleTag.startsWith('.voice-')) {
  650.           const voice = styleTag.split('-').pop();
  651.           styleTag = `v[voice="${voice}"]`;
  652.           // The specification allows to have quotes and not, so we check to
  653.           // see which one is being used.
  654.           if (!styles.has(styleTag)) {
  655.             styleTag = `v[voice=${voice}]`;
  656.           }
  657.         }
  658.         if (styles.has(styleTag)) {
  659.           shaka.text.Cue.mergeStyle_(nestedCue, styles.get(styleTag));
  660.         }
  661.         switch (tag) {
  662.           case 'br': {
  663.             const lineBreakCue = shaka.text.Cue.lineBreak(
  664.                 nestedCue.startTime, nestedCue.endTime);
  665.             rootCue.nestedCues.push(lineBreakCue);
  666.             return;
  667.           }
  668.           case 'b':
  669.             nestedCue.fontWeight = bold;
  670.             break;
  671.           case 'i':
  672.             nestedCue.fontStyle = italic;
  673.             break;
  674.           case 'u':
  675.             nestedCue.textDecoration.push(underline);
  676.             break;
  677.           case 'font': {
  678.             const color = element.attributes['color'];
  679.             if (color) {
  680.               nestedCue.color = color;
  681.             }
  682.             break;
  683.           }
  684.           case 'div': {
  685.             const time = element.attributes['time'];
  686.             if (!time) {
  687.               break;
  688.             }
  689.             const cueTime = shaka.util.TextParser.parseTime(time);
  690.             if (cueTime) {
  691.               nestedCue.startTime = cueTime;
  692.             }
  693.             break;
  694.           }
  695.           case 'ruby':
  696.           case 'rp':
  697.           case 'rt':
  698.             nestedCue.rubyTag = tag;
  699.             break;
  700.           default:
  701.             break;
  702.         }
  703.       }
  704.     }
  706.     const isTextNode = (item) => TXml.isText(item);
  707.     const childNodes = element.children;
  708.     if (isTextNode(element) ||
  709.         (childNodes.length == 1 && isTextNode(childNodes[0]))) {
  710.       // Trailing line breaks may lost when convert cue to HTML tag
  711.       // Need to insert line break cue to preserve line breaks
  712.       const textArr = TXml.getTextContents(element).split('\n');
  713.       let isFirst = true;
  714.       for (const text of textArr) {
  715.         if (!isFirst) {
  716.           const lineBreakCue = shaka.text.Cue.lineBreak(
  717.               nestedCue.startTime, nestedCue.endTime);
  718.           rootCue.nestedCues.push(lineBreakCue);
  719.         }
  720.         if (text.length > 0) {
  721.           const textCue = nestedCue.clone();
  722.           textCue.payload = shaka.util.StringUtils.htmlUnescape(text);
  723.           rootCue.nestedCues.push(textCue);
  724.         }
  725.         isFirst = false;
  726.       }
  727.     } else {
  728.       rootCue.nestedCues.push(nestedCue);
  729.       for (const childNode of childNodes) {
  730.         shaka.text.Cue.generateCueFromElement_(childNode, nestedCue, styles);
  731.       }
  732.     }
  733.   }
  735.   /**
  736.    * Merges values created in parseStyle_
  737.    * @param {!shaka.text.Cue} cue
  738.    * @param {shaka.text.Cue} refCue
  739.    * @private
  740.    */
  741.   static mergeStyle_(cue, refCue) {
  742.     if (!refCue) {
  743.       return;
  744.     }
  746.     // Overwrites if new value string length > 0
  747.     cue.backgroundColor = shaka.text.Cue.getOrDefault_(
  748.         refCue.backgroundColor, cue.backgroundColor);
  749.     cue.color = shaka.text.Cue.getOrDefault_(
  750.         refCue.color, cue.color);
  751.     cue.fontFamily = shaka.text.Cue.getOrDefault_(
  752.         refCue.fontFamily, cue.fontFamily);
  753.     cue.fontSize = shaka.text.Cue.getOrDefault_(
  754.         refCue.fontSize, cue.fontSize);
  755.     cue.textShadow = shaka.text.Cue.getOrDefault_(
  756.         refCue.textShadow, cue.textShadow);
  758.     // Overwrite with new values as unable to determine
  759.     // if new value is set or not
  760.     cue.fontWeight = refCue.fontWeight;
  761.     cue.fontStyle = refCue.fontStyle;
  762.     cue.opacity = refCue.opacity;
  763.     cue.rubyTag = refCue.rubyTag;
  764.     cue.textCombineUpright = refCue.textCombineUpright;
  765.     cue.wrapLine = refCue.wrapLine;
  766.   }
  768.   /**
  769.    * @param {string} value
  770.    * @param {string} defaultValue
  771.    * @private
  772.    */
  773.   static getOrDefault_(value, defaultValue) {
  774.     if (value && value.length > 0) {
  775.       return value;
  776.     }
  777.     return defaultValue;
  778.   }
  779. };
  782. /**
  783.  * @enum {string}
  784.  * @export
  785.  */
  786. shaka.text.Cue.positionAlign = {
  787.   'LEFT': 'line-left',
  788.   'RIGHT': 'line-right',
  789.   'CENTER': 'center',
  790.   'AUTO': 'auto',
  791. };
  794. /**
  795.  * @enum {string}
  796.  * @export
  797.  */
  798. shaka.text.Cue.textAlign = {
  799.   'LEFT': 'left',
  800.   'RIGHT': 'right',
  801.   'CENTER': 'center',
  802.   'START': 'start',
  803.   'END': 'end',
  804. };
  807. /**
  808.  * Vertical alignments of the cues within their extents.
  809.  * 'BEFORE' means displaying at the top of the captions container box, 'CENTER'
  810.  *  means in the middle, 'AFTER' means at the bottom.
  811.  * @enum {string}
  812.  * @export
  813.  */
  814. shaka.text.Cue.displayAlign = {
  815.   'BEFORE': 'before',
  816.   'CENTER': 'center',
  817.   'AFTER': 'after',
  818. };
  821. /**
  822.  * @enum {string}
  823.  * @export
  824.  */
  825. shaka.text.Cue.direction = {
  826.   'HORIZONTAL_LEFT_TO_RIGHT': 'ltr',
  827.   'HORIZONTAL_RIGHT_TO_LEFT': 'rtl',
  828. };
  831. /**
  832.  * @enum {string}
  833.  * @export
  834.  */
  835. shaka.text.Cue.writingMode = {
  836.   'HORIZONTAL_TOP_TO_BOTTOM': 'horizontal-tb',
  837.   'VERTICAL_LEFT_TO_RIGHT': 'vertical-lr',
  838.   'VERTICAL_RIGHT_TO_LEFT': 'vertical-rl',
  839. };
  842. /**
  843.  * @enum {number}
  844.  * @export
  845.  */
  846. shaka.text.Cue.lineInterpretation = {
  847.   'LINE_NUMBER': 0,
  848.   'PERCENTAGE': 1,
  849. };
  852. /**
  853.  * @enum {string}
  854.  * @export
  855.  */
  856. shaka.text.Cue.lineAlign = {
  857.   'CENTER': 'center',
  858.   'START': 'start',
  859.   'END': 'end',
  860. };
  863. /**
  864.  * Default text color according to
  865.  * https://w3c.github.io/webvtt/#default-text-color
  866.  * @enum {string}
  867.  * @export
  868.  */
  869. shaka.text.Cue.defaultTextColor = {
  870.   'white': 'white',
  871.   'lime': 'lime',
  872.   'cyan': 'cyan',
  873.   'red': 'red',
  874.   'yellow': 'yellow',
  875.   'magenta': 'magenta',
  876.   'blue': 'blue',
  877.   'black': 'black',
  878. };
  881. /**
  882.  * Default text background color according to
  883.  * https://w3c.github.io/webvtt/#default-text-background
  884.  * @enum {string}
  885.  * @export
  886.  */
  887. shaka.text.Cue.defaultTextBackgroundColor = {
  888.   'bg_white': 'white',
  889.   'bg_lime': 'lime',
  890.   'bg_cyan': 'cyan',
  891.   'bg_red': 'red',
  892.   'bg_yellow': 'yellow',
  893.   'bg_magenta': 'magenta',
  894.   'bg_blue': 'blue',
  895.   'bg_black': 'black',
  896. };
  899. /**
  900.  * In CSS font weight can be a number, where 400 is normal and 700 is bold.
  901.  * Use these values for the enum for consistency.
  902.  * @enum {number}
  903.  * @export
  904.  */
  905. shaka.text.Cue.fontWeight = {
  906.   'NORMAL': 400,
  907.   'BOLD': 700,
  908. };
  911. /**
  912.  * @enum {string}
  913.  * @export
  914.  */
  915. shaka.text.Cue.fontStyle = {
  916.   'NORMAL': 'normal',
  917.   'ITALIC': 'italic',
  918.   'OBLIQUE': 'oblique',
  919. };
  922. /**
  923.  * @enum {string}
  924.  * @export
  925.  */
  926. shaka.text.Cue.textDecoration = {
  927.   'UNDERLINE': 'underline',
  928.   'LINE_THROUGH': 'lineThrough',
  929.   'OVERLINE': 'overline',
  930. };
  932. /** @private */
  933. shaka.text.Cue.timeFormat_ = /(?:(\d{1,}):)?(\d{2}):(\d{2})\.(\d{2,3})/g;