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.startTime != cue2.startTime || cue1.endTime != cue2.endTime ||
  375.       cue1.payload != cue2.payload) {
  376.       return false;
  377.     }
  378.     for (const k in cue1) {
  379.       if (k == 'startTime' || k == 'endTime' || k == 'payload') {
  380.         // Already compared.
  381.       } else if (k == 'nestedCues') {
  382.         // This uses shaka.text.Cue.equal rather than just this.equal, since
  383.         // otherwise recursing here will unbox the method and cause "this" to be
  384.         // undefined in deeper recursion.
  385.         if (!shaka.util.ArrayUtils.equal(
  386.             cue1.nestedCues, cue2.nestedCues, shaka.text.Cue.equal)) {
  387.           return false;
  388.         }
  389.       } else if (k == 'region' || k == 'cellResolution') {
  390.         for (const k2 in cue1[k]) {
  391.           if (cue1[k][k2] != cue2[k][k2]) {
  392.             return false;
  393.           }
  394.         }
  395.       } else if (Array.isArray(cue1[k])) {
  396.         if (!shaka.util.ArrayUtils.equal(cue1[k], cue2[k])) {
  397.           return false;
  398.         }
  399.       } else {
  400.         if (cue1[k] != cue2[k]) {
  401.           return false;
  402.         }
  403.       }
  404.     }
  406.     return true;
  407.   }
  409.   /**
  410.    * Parses cue payload, searches for styling entities and, if needed,
  411.    * modifies original payload and creates nested cues to better represent
  412.    * styling found in payload. All changes are done in-place.
  413.    * @param {!shaka.text.Cue} cue
  414.    * @param {!Map<string, !shaka.text.Cue>=} styles
  415.    * @export
  416.    */
  417.   static parseCuePayload(cue, styles = new Map()) {
  418.     const StringUtils = shaka.util.StringUtils;
  419.     const TXml = shaka.util.TXml;
  420.     let payload = cue.payload;
  421.     if (!payload.includes('<')) {
  422.       cue.payload = StringUtils.htmlUnescape(payload);
  423.       return;
  424.     }
  425.     if (styles.size === 0) {
  426.       shaka.text.Cue.addDefaultTextColor(styles);
  427.     }
  428.     payload = shaka.text.Cue.replaceKaraokeStylePayload_(payload);
  429.     payload = shaka.text.Cue.replaceVoiceStylePayload_(payload);
  430.     payload = shaka.text.Cue.escapeInvalidChevrons_(payload);
  432.     cue.payload = '';
  434.     const xmlPayload = '<span>' + payload + '</span>';
  435.     let element;
  436.     try {
  437.       element = TXml.parseXmlString(xmlPayload, 'span');
  438.     } catch (e) {
  439.       shaka.log.warning('cue parse fail: ', e);
  440.     }
  441.     if (element) {
  442.       const childNodes = element.children;
  443.       if (childNodes.length == 1) {
  444.         const childNode = childNodes[0];
  445.         if (!TXml.isNode(childNode)) {
  446.           cue.payload = StringUtils.htmlUnescape(payload);
  447.           return;
  448.         }
  449.       }
  450.       for (const childNode of childNodes) {
  451.         shaka.text.Cue.generateCueFromElement_(childNode, cue, styles);
  452.       }
  453.     } else {
  454.       shaka.log.warning('The cue\'s markup could not be parsed: ', payload);
  455.       cue.payload = StringUtils.htmlUnescape(payload);
  456.     }
  457.   }
  459.   /**
  460.    * Add default color
  461.    *
  462.    * @param {!Map<string, !shaka.text.Cue>} styles
  463.    */
  464.   static addDefaultTextColor(styles) {
  465.     const textColor = shaka.text.Cue.defaultTextColor;
  466.     for (const [key, value] of Object.entries(textColor)) {
  467.       const cue = new shaka.text.Cue(0, 0, '');
  468.       cue.color = value;
  469.       styles.set('.' + key, cue);
  470.     }
  472.     const bgColor = shaka.text.Cue.defaultTextBackgroundColor;
  473.     for (const [key, value] of Object.entries(bgColor)) {
  474.       const cue = new shaka.text.Cue(0, 0, '');
  475.       cue.backgroundColor = value;
  476.       styles.set('.' + key, cue);
  477.     }
  478.   }
  480.   /**
  481.    * Converts karaoke style tag to be valid for xml parsing
  482.    * For example,
  483.    * input: Text <00:00:00.450> time <00:00:01.450> 1
  484.    * output: Text <div time="00:00:00.450"> time
  485.    *         <div time="00:00:01.450"> 1</div></div>
  486.    *
  487.    * @param {string} payload
  488.    * @return {string} processed payload
  489.    * @private
  490.    */
  491.   static replaceKaraokeStylePayload_(payload) {
  492.     const names = [];
  493.     let nameStart = -1;
  494.     for (let i = 0; i < payload.length; i++) {
  495.       if (payload[i] === '<') {
  496.         nameStart = i + 1;
  497.       } else if (payload[i] === '>') {
  498.         if (nameStart > 0) {
  499.           const name = payload.substr(nameStart, i - nameStart);
  500.           if (name.match(shaka.text.Cue.timeFormat_)) {
  501.             names.push(name);
  502.           }
  503.           nameStart = -1;
  504.         }
  505.       }
  506.     }
  507.     let newPayload = payload;
  508.     for (const name of names) {
  509.       const replaceTag = '<' + name + '>';
  510.       const startTag = '<div time="' + name + '">';
  511.       const endTag = '</div>';
  512.       newPayload = newPayload.replace(replaceTag, startTag);
  513.       newPayload += endTag;
  514.     }
  515.     return newPayload;
  516.   }
  518.   /**
  519.    * Converts voice style tag to be valid for xml parsing
  520.    * For example,
  521.    * input: <v Shaka>Test
  522.    * output: <v.voice-Shaka>Test</v.voice-Shaka>
  523.    *
  524.    * @param {string} payload
  525.    * @return {string} processed payload
  526.    * @private
  527.    */
  528.   static replaceVoiceStylePayload_(payload) {
  529.     const voiceTag = 'v';
  530.     const names = [];
  531.     let nameStart = -1;
  532.     let newPayload = '';
  533.     let hasVoiceEndTag = false;
  534.     for (let i = 0; i < payload.length; i++) {
  535.       // This condition is used to manage tags that have end tags.
  536.       if (payload[i] === '/') {
  537.         const end = payload.indexOf('>', i);
  538.         if (end === -1) {
  539.           return payload;
  540.         }
  541.         const tagEnd = payload.substring(i + 1, end);
  542.         if (!tagEnd || tagEnd != voiceTag) {
  543.           newPayload += payload[i];
  544.           continue;
  545.         }
  546.         hasVoiceEndTag = true;
  547.         let tagStart = null;
  548.         if (names.length) {
  549.           tagStart = names[names.length -1];
  550.         }
  551.         if (!tagStart) {
  552.           newPayload += payload[i];
  553.         } else if (tagStart === tagEnd) {
  554.           newPayload += '/' + tagEnd + '>';
  555.           i += tagEnd.length + 1;
  556.         } else {
  557.           if (!tagStart.startsWith(voiceTag)) {
  558.             newPayload += payload[i];
  559.             continue;
  560.           }
  561.           newPayload += '/' + tagStart + '>';
  562.           i += tagEnd.length + 1;
  563.         }
  564.       } else {
  565.         // Here we only want the tag name, not any other payload.
  566.         if (payload[i] === '<') {
  567.           nameStart = i + 1;
  568.           if (payload[nameStart] != voiceTag) {
  569.             nameStart = -1;
  570.           }
  571.         } else if (payload[i] === '>') {
  572.           if (nameStart > 0) {
  573.             names.push(payload.substr(nameStart, i - nameStart));
  574.             nameStart = -1;
  575.           }
  576.         }
  577.         newPayload += payload[i];
  578.       }
  579.     }
  580.     for (const name of names) {
  581.       const newName = name.replace(' ', '.voice-');
  582.       newPayload = newPayload.replace(`<${name}>`, `<${newName}>`);
  583.       newPayload = newPayload.replace(`</${name}>`, `</${newName}>`);
  584.       if (!hasVoiceEndTag) {
  585.         newPayload += `</${newName}>`;
  586.       }
  587.     }
  588.     return newPayload;
  589.   }
  591.   /**
  592.    * This method converts invalid > chevrons to HTML entities.
  593.    * It also removes < chevrons as per spec.
  594.    *
  595.    * @param {!string} input
  596.    * @return {string}
  597.    * @private
  598.    */
  599.   static escapeInvalidChevrons_(input) {
  600.     // Used to map HTML entities to characters.
  601.     const htmlEscapes = {
  602.       '< ': '',
  603.       ' >': ' &gt;',
  604.     };
  606.     const reEscapedHtml = /(< +>|<\s|\s>)/g;
  607.     const reHasEscapedHtml = RegExp(reEscapedHtml.source);
  608.     // This check is an optimization, since replace always makes a copy
  609.     if (input && reHasEscapedHtml.test(input)) {
  610.       return input.replace(reEscapedHtml, (entity) => {
  611.         return htmlEscapes[entity] || '';
  612.       });
  613.     }
  614.     return input || '';
  615.   }
  617.   /**
  618.    * @param {!shaka.extern.xml.Node} element
  619.    * @param {!shaka.text.Cue} rootCue
  620.    * @param {!Map<string, !shaka.text.Cue>} styles
  621.    * @private
  622.    */
  623.   static generateCueFromElement_(element, rootCue, styles) {
  624.     const TXml = shaka.util.TXml;
  625.     const nestedCue = rootCue.clone();
  626.     // We don't want propagate some properties.
  627.     nestedCue.nestedCues = [];
  628.     nestedCue.payload = '';
  629.     nestedCue.rubyTag = '';
  630.     // We don't want propagate some position settings
  631.     nestedCue.line = null;
  632.     nestedCue.region = new shaka.text.CueRegion();
  633.     nestedCue.position = null;
  634.     nestedCue.size = 0;
  636.     if (TXml.isNode(element)) {
  637.       const bold = shaka.text.Cue.fontWeight.BOLD;
  638.       const italic = shaka.text.Cue.fontStyle.ITALIC;
  639.       const underline = shaka.text.Cue.textDecoration.UNDERLINE;
  640.       const tags = element.tagName.split(/(?=[ .])+/g);
  641.       for (const tag of tags) {
  642.         let styleTag = tag;
  643.         // White blanks at start indicate that the style is a voice
  644.         if (styleTag.startsWith('.voice-')) {
  645.           const voice = styleTag.split('-').pop();
  646.           styleTag = `v[voice="${voice}"]`;
  647.           // The specification allows to have quotes and not, so we check to
  648.           // see which one is being used.
  649.           if (!styles.has(styleTag)) {
  650.             styleTag = `v[voice=${voice}]`;
  651.           }
  652.         }
  653.         if (styles.has(styleTag)) {
  654.           shaka.text.Cue.mergeStyle_(nestedCue, styles.get(styleTag));
  655.         }
  656.         switch (tag) {
  657.           case 'br': {
  658.             const lineBreakCue = shaka.text.Cue.lineBreak(
  659.                 nestedCue.startTime, nestedCue.endTime);
  660.             rootCue.nestedCues.push(lineBreakCue);
  661.             return;
  662.           }
  663.           case 'b':
  664.             nestedCue.fontWeight = bold;
  665.             break;
  666.           case 'i':
  667.             nestedCue.fontStyle = italic;
  668.             break;
  669.           case 'u':
  670.             nestedCue.textDecoration.push(underline);
  671.             break;
  672.           case 'font': {
  673.             const color = element.attributes['color'];
  674.             if (color) {
  675.               nestedCue.color = color;
  676.             }
  677.             break;
  678.           }
  679.           case 'div': {
  680.             const time = element.attributes['time'];
  681.             if (!time) {
  682.               break;
  683.             }
  684.             const cueTime = shaka.util.TextParser.parseTime(time);
  685.             if (cueTime) {
  686.               nestedCue.startTime = cueTime;
  687.             }
  688.             break;
  689.           }
  690.           case 'ruby':
  691.           case 'rp':
  692.           case 'rt':
  693.             nestedCue.rubyTag = tag;
  694.             break;
  695.           default:
  696.             break;
  697.         }
  698.       }
  699.     }
  701.     const isTextNode = (item) => TXml.isText(item);
  702.     const childNodes = element.children;
  703.     if (isTextNode(element) ||
  704.         (childNodes.length == 1 && isTextNode(childNodes[0]))) {
  705.       // Trailing line breaks may lost when convert cue to HTML tag
  706.       // Need to insert line break cue to preserve line breaks
  707.       const textArr = TXml.getTextContents(element).split('\n');
  708.       let isFirst = true;
  709.       for (const text of textArr) {
  710.         if (!isFirst) {
  711.           const lineBreakCue = shaka.text.Cue.lineBreak(
  712.               nestedCue.startTime, nestedCue.endTime);
  713.           rootCue.nestedCues.push(lineBreakCue);
  714.         }
  715.         if (text.length > 0) {
  716.           const textCue = nestedCue.clone();
  717.           textCue.payload = shaka.util.StringUtils.htmlUnescape(text);
  718.           rootCue.nestedCues.push(textCue);
  719.         }
  720.         isFirst = false;
  721.       }
  722.     } else {
  723.       rootCue.nestedCues.push(nestedCue);
  724.       for (const childNode of childNodes) {
  725.         shaka.text.Cue.generateCueFromElement_(childNode, nestedCue, styles);
  726.       }
  727.     }
  728.   }
  730.   /**
  731.    * Merges values created in parseStyle_
  732.    * @param {!shaka.text.Cue} cue
  733.    * @param {shaka.text.Cue} refCue
  734.    * @private
  735.    */
  736.   static mergeStyle_(cue, refCue) {
  737.     if (!refCue) {
  738.       return;
  739.     }
  741.     // Overwrites if new value string length > 0
  742.     cue.backgroundColor = shaka.text.Cue.getOrDefault_(
  743.         refCue.backgroundColor, cue.backgroundColor);
  744.     cue.color = shaka.text.Cue.getOrDefault_(
  745.         refCue.color, cue.color);
  746.     cue.fontFamily = shaka.text.Cue.getOrDefault_(
  747.         refCue.fontFamily, cue.fontFamily);
  748.     cue.fontSize = shaka.text.Cue.getOrDefault_(
  749.         refCue.fontSize, cue.fontSize);
  750.     cue.textShadow = shaka.text.Cue.getOrDefault_(
  751.         refCue.textShadow, cue.textShadow);
  753.     // Overwrite with new values as unable to determine
  754.     // if new value is set or not
  755.     cue.fontWeight = refCue.fontWeight;
  756.     cue.fontStyle = refCue.fontStyle;
  757.     cue.opacity = refCue.opacity;
  758.     cue.rubyTag = refCue.rubyTag;
  759.     cue.textCombineUpright = refCue.textCombineUpright;
  760.     cue.wrapLine = refCue.wrapLine;
  761.   }
  763.   /**
  764.    * @param {string} value
  765.    * @param {string} defaultValue
  766.    * @private
  767.    */
  768.   static getOrDefault_(value, defaultValue) {
  769.     if (value && value.length > 0) {
  770.       return value;
  771.     }
  772.     return defaultValue;
  773.   }
  774. };
  777. /**
  778.  * @enum {string}
  779.  * @export
  780.  */
  781. shaka.text.Cue.positionAlign = {
  782.   'LEFT': 'line-left',
  783.   'RIGHT': 'line-right',
  784.   'CENTER': 'center',
  785.   'AUTO': 'auto',
  786. };
  789. /**
  790.  * @enum {string}
  791.  * @export
  792.  */
  793. shaka.text.Cue.textAlign = {
  794.   'LEFT': 'left',
  795.   'RIGHT': 'right',
  796.   'CENTER': 'center',
  797.   'START': 'start',
  798.   'END': 'end',
  799. };
  802. /**
  803.  * Vertical alignments of the cues within their extents.
  804.  * 'BEFORE' means displaying at the top of the captions container box, 'CENTER'
  805.  *  means in the middle, 'AFTER' means at the bottom.
  806.  * @enum {string}
  807.  * @export
  808.  */
  809. shaka.text.Cue.displayAlign = {
  810.   'BEFORE': 'before',
  811.   'CENTER': 'center',
  812.   'AFTER': 'after',
  813. };
  816. /**
  817.  * @enum {string}
  818.  * @export
  819.  */
  820. shaka.text.Cue.direction = {
  821.   'HORIZONTAL_LEFT_TO_RIGHT': 'ltr',
  822.   'HORIZONTAL_RIGHT_TO_LEFT': 'rtl',
  823. };
  826. /**
  827.  * @enum {string}
  828.  * @export
  829.  */
  830. shaka.text.Cue.writingMode = {
  831.   'HORIZONTAL_TOP_TO_BOTTOM': 'horizontal-tb',
  832.   'VERTICAL_LEFT_TO_RIGHT': 'vertical-lr',
  833.   'VERTICAL_RIGHT_TO_LEFT': 'vertical-rl',
  834. };
  837. /**
  838.  * @enum {number}
  839.  * @export
  840.  */
  841. shaka.text.Cue.lineInterpretation = {
  842.   'LINE_NUMBER': 0,
  843.   'PERCENTAGE': 1,
  844. };
  847. /**
  848.  * @enum {string}
  849.  * @export
  850.  */
  851. shaka.text.Cue.lineAlign = {
  852.   'CENTER': 'center',
  853.   'START': 'start',
  854.   'END': 'end',
  855. };
  858. /**
  859.  * Default text color according to
  860.  * https://w3c.github.io/webvtt/#default-text-color
  861.  * @enum {string}
  862.  * @export
  863.  */
  864. shaka.text.Cue.defaultTextColor = {
  865.   'white': 'white',
  866.   'lime': 'lime',
  867.   'cyan': 'cyan',
  868.   'red': 'red',
  869.   'yellow': 'yellow',
  870.   'magenta': 'magenta',
  871.   'blue': 'blue',
  872.   'black': 'black',
  873. };
  876. /**
  877.  * Default text background color according to
  878.  * https://w3c.github.io/webvtt/#default-text-background
  879.  * @enum {string}
  880.  * @export
  881.  */
  882. shaka.text.Cue.defaultTextBackgroundColor = {
  883.   'bg_white': 'white',
  884.   'bg_lime': 'lime',
  885.   'bg_cyan': 'cyan',
  886.   'bg_red': 'red',
  887.   'bg_yellow': 'yellow',
  888.   'bg_magenta': 'magenta',
  889.   'bg_blue': 'blue',
  890.   'bg_black': 'black',
  891. };
  894. /**
  895.  * In CSS font weight can be a number, where 400 is normal and 700 is bold.
  896.  * Use these values for the enum for consistency.
  897.  * @enum {number}
  898.  * @export
  899.  */
  900. shaka.text.Cue.fontWeight = {
  901.   'NORMAL': 400,
  902.   'BOLD': 700,
  903. };
  906. /**
  907.  * @enum {string}
  908.  * @export
  909.  */
  910. shaka.text.Cue.fontStyle = {
  911.   'NORMAL': 'normal',
  912.   'ITALIC': 'italic',
  913.   'OBLIQUE': 'oblique',
  914. };
  917. /**
  918.  * @enum {string}
  919.  * @export
  920.  */
  921. shaka.text.Cue.textDecoration = {
  922.   'UNDERLINE': 'underline',
  923.   'LINE_THROUGH': 'lineThrough',
  924.   'OVERLINE': 'overline',
  925. };
  927. /** @private */
  928. shaka.text.Cue.timeFormat_ = /(?:(\d{1,}):)?(\d{2}):(\d{2})\.(\d{2,3})/g;