Source: lib/text/vtt_text_parser.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  7. goog.provide('shaka.text.VttTextParser');
  9. goog.require('goog.asserts');
  10. goog.require('shaka.log');
  11. goog.require('shaka.text.Cue');
  12. goog.require('shaka.text.CueRegion');
  13. goog.require('shaka.text.TextEngine');
  14. goog.require('shaka.util.Error');
  15. goog.require('shaka.util.StringUtils');
  16. goog.require('shaka.util.TextParser');
  17. goog.require('shaka.util.XmlUtils');
  20. /**
  21.  * @implements {shaka.extern.TextParser}
  22.  * @export
  23.  */
  24. shaka.text.VttTextParser = class {
  25.   /**
  26.    * @override
  27.    * @export
  28.    */
  29.   parseInit(data) {
  30.     goog.asserts.assert(false, 'VTT does not have init segments');
  31.   }
  33.   /**
  34.    * @override
  35.    * @export
  36.    */
  37.   parseMedia(data, time) {
  38.     const VttTextParser = shaka.text.VttTextParser;
  39.     // Get the input as a string.  Normalize newlines to \n.
  40.     let str = shaka.util.StringUtils.fromUTF8(data);
  41.     str = str.replace(/\r\n|\r(?=[^\n]|$)/gm, '\n');
  42.     const blocks = str.split(/\n{2,}/m);
  44.     if (!/^WEBVTT($|[ \t\n])/m.test(blocks[0])) {
  45.       throw new shaka.util.Error(
  46.           shaka.util.Error.Severity.CRITICAL,
  47.           shaka.util.Error.Category.TEXT,
  48.           shaka.util.Error.Code.INVALID_TEXT_HEADER);
  49.     }
  51.     // NOTE: "periodStart" is the timestamp offset applied via TextEngine.
  52.     // It is no longer closely tied to periods, but the name stuck around.
  53.     let offset = time.periodStart;
  55.     if (blocks[0].includes('X-TIMESTAMP-MAP')) {
  56.       // https://bit.ly/2K92l7y
  57.       // The 'X-TIMESTAMP-MAP' header is used in HLS to align text with
  58.       // the rest of the media.
  59.       // The header format is 'X-TIMESTAMP-MAP=MPEGTS:n,LOCAL:m'
  60.       // (the attributes can go in any order)
  61.       // where n is MPEG-2 time and m is cue time it maps to.
  62.       // For example 'X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000'
  63.       // means an offset of 10 seconds
  64.       // 900000/MPEG_TIMESCALE - cue time.
  65.       const cueTimeMatch =
  66.             blocks[0].match(/LOCAL:((?:(\d{1,}):)?(\d{2}):(\d{2})\.(\d{3}))/m);
  68.       const mpegTimeMatch = blocks[0].match(/MPEGTS:(\d+)/m);
  69.       if (cueTimeMatch && mpegTimeMatch) {
  70.         const parser = new shaka.util.TextParser(cueTimeMatch[1]);
  71.         const cueTime = shaka.text.VttTextParser.parseTime_(parser);
  72.         if (cueTime == null) {
  73.           throw new shaka.util.Error(
  74.               shaka.util.Error.Severity.CRITICAL,
  75.               shaka.util.Error.Category.TEXT,
  76.               shaka.util.Error.Code.INVALID_TEXT_HEADER);
  77.         }
  79.         let mpegTime = Number(mpegTimeMatch[1]);
  80.         const mpegTimescale = shaka.text.VttTextParser.MPEG_TIMESCALE_;
  82.         const rolloverSeconds =
  83.             shaka.text.VttTextParser.TS_ROLLOVER_ / mpegTimescale;
  84.         let segmentStart = time.segmentStart;
  85.         while (segmentStart >= rolloverSeconds) {
  86.           segmentStart -= rolloverSeconds;
  87.           mpegTime += shaka.text.VttTextParser.TS_ROLLOVER_;
  88.         }
  90.         // Apple-encoded HLS content uses absolute timestamps, so assume the
  91.         // presence of the map tag means the content uses absolute timestamps.
  92.         offset = time.periodStart + mpegTime / mpegTimescale - cueTime;
  93.       }
  94.     }
  96.     // Parse VTT regions.
  97.     /* !Array.<!shaka.extern.CueRegion> */
  98.     const regions = [];
  99.     for (const line of blocks[0].split('\n')) {
  100.       if (/^Region:/.test(line)) {
  101.         const region = VttTextParser.parseRegion_(line);
  102.         regions.push(region);
  103.       }
  104.     }
  106.     /** @type {!Map.<string, shaka.text.Cue>} */
  107.     const styles = new Map();
  108.     VttTextParser.addDefaultTextColor_(styles);
  110.     // Parse cues.
  111.     const ret = [];
  112.     for (const block of blocks.slice(1)) {
  113.       const lines = block.split('\n');
  114.       VttTextParser.parseStyle_(lines, styles);
  115.       const cue = VttTextParser.parseCue_(lines, offset, regions, styles);
  116.       if (cue) {
  117.         ret.push(cue);
  118.       }
  119.     }
  121.     return ret;
  122.   }
  124.   /**
  125.    * Add default color
  126.    *
  127.    * @param {!Map.<string, shaka.text.Cue>} styles
  128.    * @private
  129.    */
  130.   static addDefaultTextColor_(styles) {
  131.     const textColor = shaka.text.Cue.defaultTextColor;
  132.     for (const [key, value] of Object.entries(textColor)) {
  133.       const cue = new shaka.text.Cue(0, 0, '');
  134.       cue.color = value;
  135.       styles.set('.' + key, cue);
  136.     }
  138.     const bgColor = shaka.text.Cue.defaultTextBackgroundColor;
  139.     for (const [key, value] of Object.entries(bgColor)) {
  140.       const cue = new shaka.text.Cue(0, 0, '');
  141.       cue.backgroundColor = value;
  142.       styles.set('.' + key, cue);
  143.     }
  144.   }
  146.   /**
  147.    * Parses a string into a Region object.
  148.    *
  149.    * @param {string} text
  150.    * @return {!shaka.extern.CueRegion}
  151.    * @private
  152.    */
  153.   static parseRegion_(text) {
  154.     const VttTextParser = shaka.text.VttTextParser;
  155.     const parser = new shaka.util.TextParser(text);
  156.     // The region string looks like this:
  157.     // Region: id=fred width=50% lines=3 regionanchor=0%,100%
  158.     //         viewportanchor=10%,90% scroll=up
  159.     const region = new shaka.text.CueRegion();
  161.     // Skip 'Region:'
  162.     parser.readWord();
  163.     parser.skipWhitespace();
  165.     let word = parser.readWord();
  166.     while (word) {
  167.       if (!VttTextParser.parseRegionSetting_(region, word)) {
  168.         shaka.log.warning(
  169.             'VTT parser encountered an invalid VTTRegion setting: ', word,
  170.             ' The setting will be ignored.');
  171.       }
  172.       parser.skipWhitespace();
  173.       word = parser.readWord();
  174.     }
  176.     return region;
  177.   }
  179.   /**
  180.    * Parses a style block into a Cue object.
  181.    *
  182.    * @param {!Array.<string>} text
  183.    * @param {!Map.<string, shaka.text.Cue>} styles
  184.    * @private
  185.    */
  186.   static parseStyle_(text, styles) {
  187.     // Skip empty blocks.
  188.     if (text.length == 1 && !text[0]) {
  189.       return;
  190.     }
  192.     // Skip comment blocks.
  193.     if (/^NOTE($|[ \t])/.test(text[0])) {
  194.       return;
  195.     }
  197.     // Only style block are allowed.
  198.     if (text[0] != 'STYLE') {
  199.       return;
  200.     }
  202.     /** @type {!Array.<!Array.<string>>} */
  203.     const styleBlocks = [];
  204.     let lastBlockIndex = -1;
  205.     for (let i = 1; i < text.length; i++) {
  206.       if (text[i].includes('::cue')) {
  207.         styleBlocks.push([]);
  208.         lastBlockIndex = styleBlocks.length - 1;
  209.       }
  210.       if (lastBlockIndex == -1) {
  211.         continue;
  212.       }
  213.       styleBlocks[lastBlockIndex].push(text[i]);
  214.       if (text[i].includes('}')) {
  215.         lastBlockIndex = -1;
  216.       }
  217.     }
  219.     for (const styleBlock of styleBlocks) {
  220.       let styleSelector = 'global';
  221.       // Look for what is within parentheses. For example:
  222.       // <code>:: cue (b) {</code>, what we are looking for is <code>b</code>
  223.       const selector = styleBlock[0].match(/\((.*)\)/);
  224.       if (selector) {
  225.         styleSelector = selector.pop();
  226.       }
  228.       // We start at 1 to avoid '::cue' and end earlier to avoid '}'
  229.       let propertyLines = styleBlock.slice(1, -1);
  230.       if (styleBlock[0].includes('}')) {
  231.         const payload = /\{(.*?)\}/.exec(styleBlock[0]);
  232.         if (payload) {
  233.           propertyLines = payload[1].split(';');
  234.         }
  235.       }
  237.       // Continue styles over multiple selectors if necessary.
  238.       // For example,
  239.       //   ::cue(b) { background: white; } ::cue(b) { color: blue; }
  240.       // should set both the background and foreground of bold tags.
  241.       let cue = styles.get(styleSelector);
  242.       if (!cue) {
  243.         cue = new shaka.text.Cue(0, 0, '');
  244.       }
  246.       let validStyle = false;
  247.       for (let i = 0; i < propertyLines.length; i++) {
  248.         // We look for CSS properties. As a general rule they are separated by
  249.         // <code>:</code>. Eg: <code>color: red;</code>
  250.         const lineParts = /^\s*([^:]+):\s*(.*)/.exec(propertyLines[i]);
  251.         if (lineParts) {
  252.           const name = lineParts[1].trim();
  253.           const value = lineParts[2].trim().replace(';', '');
  254.           switch (name) {
  255.             case 'background-color':
  256.             case 'background':
  257.               validStyle = true;
  258.               cue.backgroundColor = value;
  259.               break;
  260.             case 'color':
  261.               validStyle = true;
  262.               cue.color = value;
  263.               break;
  264.             case 'font-family':
  265.               validStyle = true;
  266.               cue.fontFamily = value;
  267.               break;
  268.             case 'font-size':
  269.               validStyle = true;
  270.               cue.fontSize = value;
  271.               break;
  272.             case 'font-weight':
  273.               if (parseInt(value, 10) >= 700 || value == 'bold') {
  274.                 validStyle = true;
  275.                 cue.fontWeight = shaka.text.Cue.fontWeight.BOLD;
  276.               }
  277.               break;
  278.             case 'font-style':
  279.               switch (value) {
  280.                 case 'normal':
  281.                   validStyle = true;
  282.                   cue.fontStyle = shaka.text.Cue.fontStyle.NORMAL;
  283.                   break;
  284.                 case 'italic':
  285.                   validStyle = true;
  286.                   cue.fontStyle = shaka.text.Cue.fontStyle.ITALIC;
  287.                   break;
  288.                 case 'oblique':
  289.                   validStyle = true;
  290.                   cue.fontStyle = shaka.text.Cue.fontStyle.OBLIQUE;
  291.                   break;
  292.               }
  293.               break;
  294.             case 'opacity':
  295.               validStyle = true;
  296.               cue.opacity = parseFloat(value);
  297.               break;
  298.             case 'text-shadow':
  299.               validStyle = true;
  300.               cue.textShadow = value;
  301.               break;
  302.             case 'white-space':
  303.               validStyle = true;
  304.               cue.wrapLine = value != 'noWrap';
  305.               break;
  306.             default:
  307.               shaka.log.warning('VTT parser encountered an unsupported style: ',
  308.                   lineParts);
  309.               break;
  310.           }
  311.         }
  312.       }
  314.       if (validStyle) {
  315.         styles.set(styleSelector, cue);
  316.       }
  317.     }
  318.   }
  320.   /**
  321.    * Parses a text block into a Cue object.
  322.    *
  323.    * @param {!Array.<string>} text
  324.    * @param {number} timeOffset
  325.    * @param {!Array.<!shaka.extern.CueRegion>} regions
  326.    * @param {!Map.<string, shaka.text.Cue>} styles
  327.    * @return {shaka.text.Cue}
  328.    * @private
  329.    */
  330.   static parseCue_(text, timeOffset, regions, styles) {
  331.     const VttTextParser = shaka.text.VttTextParser;
  333.     // Skip empty blocks.
  334.     if (text.length == 1 && !text[0]) {
  335.       return null;
  336.     }
  338.     // Skip comment blocks.
  339.     if (/^NOTE($|[ \t])/.test(text[0])) {
  340.       return null;
  341.     }
  343.     // Skip style and region blocks.
  344.     if (text[0] == 'STYLE' || text[0] == 'REGION') {
  345.       return null;
  346.     }
  348.     let id = null;
  349.     if (!text[0].includes('-->')) {
  350.       id = text[0];
  351.       text.splice(0, 1);
  352.     }
  354.     // Parse the times.
  355.     const parser = new shaka.util.TextParser(text[0]);
  356.     let start = VttTextParser.parseTime_(parser);
  357.     const expect = parser.readRegex(/[ \t]+-->[ \t]+/g);
  358.     let end = VttTextParser.parseTime_(parser);
  360.     if (start == null || expect == null || end == null) {
  361.       throw new shaka.util.Error(
  362.           shaka.util.Error.Severity.CRITICAL,
  363.           shaka.util.Error.Category.TEXT,
  364.           shaka.util.Error.Code.INVALID_TEXT_CUE,
  365.           'Could not parse cue time range in WebVTT');
  366.     }
  368.     start += timeOffset;
  369.     end += timeOffset;
  371.     // Get the payload.
  372.     const payload = text.slice(1).join('\n').trim();
  374.     let cue = null;
  375.     if (styles.has('global')) {
  376.       cue = styles.get('global').clone();
  377.       cue.startTime = start;
  378.       cue.endTime = end;
  379.       cue.payload = '';
  380.     } else {
  381.       cue = new shaka.text.Cue(start, end, '');
  382.     }
  384.     VttTextParser.parseCueStyles(payload, cue, styles);
  386.     // Parse optional settings.
  387.     parser.skipWhitespace();
  388.     let word = parser.readWord();
  389.     while (word) {
  390.       if (!VttTextParser.parseCueSetting(cue, word, regions)) {
  391.         shaka.log.warning('VTT parser encountered an invalid VTT setting: ',
  392.             word,
  393.             ' The setting will be ignored.');
  394.       }
  395.       parser.skipWhitespace();
  396.       word = parser.readWord();
  397.     }
  399.     if (id != null) {
  400.       cue.id = id;
  401.     }
  402.     return cue;
  403.   }
  405.   /**
  406.    * Parses a WebVTT styles from the given payload.
  407.    *
  408.    * @param {string} payload
  409.    * @param {!shaka.text.Cue} rootCue
  410.    * @param {!Map.<string, shaka.text.Cue>} styles
  411.    */
  412.   static parseCueStyles(payload, rootCue, styles) {
  413.     const VttTextParser = shaka.text.VttTextParser;
  414.     if (styles.size === 0) {
  415.       VttTextParser.addDefaultTextColor_(styles);
  416.     }
  417.     payload = VttTextParser.replaceColorPayload_(payload);
  418.     payload = VttTextParser.replaceVoiceStylePayload_(payload);
  419.     const xmlPayload = '<span>' + payload + '</span>';
  420.     const element = shaka.util.XmlUtils.parseXmlString(xmlPayload, 'span');
  421.     if (element) {
  422.       /** @type {!Array.<!shaka.extern.Cue>} */
  423.       const cues = [];
  424.       const childNodes = element.childNodes;
  425.       if (childNodes.length == 1) {
  426.         const childNode = childNodes[0];
  427.         if (childNode.nodeType == Node.TEXT_NODE ||
  428.             childNode.nodeType == Node.CDATA_SECTION_NODE) {
  429.           rootCue.payload = VttTextParser.htmlUnescape_(payload);
  430.           return;
  431.         }
  432.       }
  433.       for (const childNode of childNodes) {
  434.         VttTextParser.generateCueFromElement_(
  435.             childNode, rootCue, cues, styles);
  436.       }
  437.       rootCue.nestedCues = cues;
  438.     } else {
  439.       shaka.log.warning('The cue\'s markup could not be parsed: ', payload);
  440.       rootCue.payload = VttTextParser.htmlUnescape_(payload);
  441.     }
  442.   }
  444.   /**
  445.    * Converts voice style tag to be valid for xml parsing
  446.    * For example,
  447.    * input: <v Shaka>Test
  448.    * output: <v.voice-Shaka>Test</v.voice-Shaka>
  449.    *
  450.    * @param {string} payload
  451.    * @return {string} processed payload
  452.    * @private
  453.    */
  454.   static replaceVoiceStylePayload_(payload) {
  455.     const voiceTag = 'v';
  456.     const names = [];
  457.     let nameStart = -1;
  458.     let newPayload = '';
  459.     let hasVoiceEndTag = false;
  460.     for (let i = 0; i < payload.length; i++) {
  461.       // This condition is used to manage tags that have end tags.
  462.       if (payload[i] === '/') {
  463.         const end = payload.indexOf('>', i);
  464.         if (end === -1) {
  465.           return payload;
  466.         }
  467.         const tagEnd = payload.substring(i + 1, end);
  468.         if (!tagEnd || tagEnd != voiceTag) {
  469.           newPayload += payload[i];
  470.           continue;
  471.         }
  472.         hasVoiceEndTag = true;
  473.         let tagStart = null;
  474.         if (names.length) {
  475.           tagStart = names[names.length -1];
  476.         }
  477.         if (!tagStart) {
  478.           newPayload += payload[i];
  479.         } else if (tagStart === tagEnd) {
  480.           newPayload += '/' + tagEnd + '>';
  481.           i += tagEnd.length + 1;
  482.         } else {
  483.           if (!tagStart.startsWith(voiceTag)) {
  484.             newPayload += payload[i];
  485.             continue;
  486.           }
  487.           newPayload += '/' + tagStart + '>';
  488.           i += tagEnd.length + 1;
  489.         }
  490.       } else {
  491.         // Here we only want the tag name, not any other payload.
  492.         if (payload[i] === '<') {
  493.           nameStart = i + 1;
  494.           if (payload[nameStart] != voiceTag) {
  495.             nameStart = -1;
  496.           }
  497.         } else if (payload[i] === '>') {
  498.           if (nameStart > 0) {
  499.             names.push(payload.substr(nameStart, i - nameStart));
  500.             nameStart = -1;
  501.           }
  502.         }
  503.         newPayload += payload[i];
  504.       }
  505.     }
  506.     for (const name of names) {
  507.       const newName = name.replace(' ', '.voice-');
  508.       newPayload = newPayload.replace(`<${name}>`, `<${newName}>`);
  509.       newPayload = newPayload.replace(`</${name}>`, `</${newName}>`);
  510.       if (!hasVoiceEndTag) {
  511.         newPayload += `</${newName}>`;
  512.       }
  513.     }
  514.     return newPayload;
  515.   }
  517.   /**
  518.    * Converts color end tag to be valid for xml parsing
  519.    * For example,
  520.    * input: <c.yellow.bg_blue>Yellow text on blue bg</c>
  521.    * output: <c.yellow.bg_blue>Yellow text on blue bg</c.yellow.bg_blue>
  522.    *
  523.    * Returns original payload if invalid tag is found.
  524.    * Invalid tag example: <c.yellow><b>Example</c></b>
  525.    *
  526.    * @param {string} payload
  527.    * @return {string} processed payload
  528.    * @private
  529.    */
  530.   static replaceColorPayload_(payload) {
  531.     const names = [];
  532.     let nameStart = -1;
  533.     let newPayload = '';
  534.     for (let i = 0; i < payload.length; i++) {
  535.       if (payload[i] === '/' && i > 0 && payload[i - 1] === '<') {
  536.         const end = payload.indexOf('>', i);
  537.         if (end <= i) {
  538.           return payload;
  539.         }
  540.         const tagEnd = payload.substring(i + 1, end);
  541.         if (!tagEnd || tagEnd !== 'c') {
  542.           newPayload += payload[i];
  543.           continue;
  544.         }
  545.         const tagStart = names.pop();
  546.         if (!tagStart) {
  547.           newPayload += payload[i];
  548.         } else if (tagStart === tagEnd) {
  549.           newPayload += '/' + tagEnd + '>';
  550.           i += tagEnd.length + 1;
  551.         } else {
  552.           if (!tagStart.startsWith('c.')) {
  553.             newPayload += payload[i];
  554.             continue;
  555.           }
  556.           i += tagEnd.length + 1;
  557.           newPayload += '/' + tagStart + '>';
  558.         }
  559.       } else {
  560.         if (payload[i] === '<') {
  561.           nameStart = i + 1;
  562.           if (payload[nameStart] != 'c') {
  563.             nameStart = -1;
  564.           }
  565.         } else if (payload[i] === '>') {
  566.           if (nameStart > 0) {
  567.             names.push(payload.substr(nameStart, i - nameStart));
  568.             nameStart = -1;
  569.           }
  570.         }
  571.         newPayload += payload[i];
  572.       }
  573.     }
  574.     return newPayload;
  575.   }
  577.   /**
  578.    * @param {string} value
  579.    * @param {string} defaultValue
  580.    * @private
  581.    */
  582.   static getOrDefault_(value, defaultValue) {
  583.     if (value && value.length > 0) {
  584.       return value;
  585.     }
  586.     return defaultValue;
  587.   }
  589.   /**
  590.    * Merges values created in parseStyle_
  591.    * @param {!shaka.extern.Cue} cue
  592.    * @param {shaka.extern.Cue} refCue
  593.    * @private
  594.    */
  595.   static mergeStyle_(cue, refCue) {
  596.     if (!refCue) {
  597.       return;
  598.     }
  600.     const VttTextParser = shaka.text.VttTextParser;
  601.     // Overwrites if new value string length > 0
  602.     cue.backgroundColor = VttTextParser.getOrDefault_(
  603.         refCue.backgroundColor, cue.backgroundColor);
  604.     cue.color = VttTextParser.getOrDefault_(
  605.         refCue.color, cue.color);
  606.     cue.fontFamily = VttTextParser.getOrDefault_(
  607.         refCue.fontFamily, cue.fontFamily);
  608.     cue.fontSize = VttTextParser.getOrDefault_(
  609.         refCue.fontSize, cue.fontSize);
  611.     // Overwrite with new values as unable to determine
  612.     // if new value is set or not
  613.     cue.fontWeight = refCue.fontWeight;
  614.     cue.fontStyle = refCue.fontStyle;
  615.     cue.opacity = refCue.opacity;
  616.     cue.wrapLine = refCue.wrapLine;
  617.   }
  619.   /**
  620.    * @param {!Node} element
  621.    * @param {!shaka.text.Cue} rootCue
  622.    * @param {Array.<!shaka.extern.Cue>} cues
  623.    * @param {!Map.<string, shaka.text.Cue>} styles
  624.    * @private
  625.    */
  626.   static generateCueFromElement_(element, rootCue, cues, styles) {
  627.     const VttTextParser = shaka.text.VttTextParser;
  628.     const nestedCue = rootCue.clone();
  629.     if (element.nodeType === Node.ELEMENT_NODE && element.nodeName) {
  630.       const bold = shaka.text.Cue.fontWeight.BOLD;
  631.       const italic = shaka.text.Cue.fontStyle.ITALIC;
  632.       const underline = shaka.text.Cue.textDecoration.UNDERLINE;
  633.       const tags = element.nodeName.split(/(?=[ .])+/g);
  634.       for (const tag of tags) {
  635.         let styleTag = tag;
  636.         // White blanks at start indicate that the style is a voice
  637.         if (styleTag.startsWith('.voice-')) {
  638.           const voice = styleTag.split('-').pop();
  639.           styleTag = `v[voice="${voice}"]`;
  640.           // The specification allows to have quotes and not, so we check to
  641.           // see which one is being used.
  642.           if (!styles.has(styleTag)) {
  643.             styleTag = `v[voice=${voice}]`;
  644.           }
  645.         }
  646.         if (styles.has(styleTag)) {
  647.           VttTextParser.mergeStyle_(nestedCue, styles.get(styleTag));
  648.         }
  649.         switch (tag) {
  650.           case 'br': {
  651.             const lineBreakCue = rootCue.clone();
  652.             lineBreakCue.lineBreak = true;
  653.             cues.push(lineBreakCue);
  654.             break;
  655.           }
  656.           case 'b':
  657.             nestedCue.fontWeight = bold;
  658.             break;
  659.           case 'i':
  660.             nestedCue.fontStyle = italic;
  661.             break;
  662.           case 'u':
  663.             nestedCue.textDecoration.push(underline);
  664.             break;
  665.           default:
  666.             break;
  667.         }
  668.       }
  669.     }
  670.     const isTextNode = shaka.util.XmlUtils.isText(element);
  671.     if (isTextNode) {
  672.       // Trailing line breaks may lost when convert cue to HTML tag
  673.       // Need to insert line break cue to preserve line breaks
  674.       const textArr = element.textContent.split('\n');
  675.       let isFirst = true;
  676.       for (const text of textArr) {
  677.         if (!isFirst) {
  678.           const lineBreakCue = rootCue.clone();
  679.           lineBreakCue.lineBreak = true;
  680.           cues.push(lineBreakCue);
  681.         }
  682.         if (text.length > 0) {
  683.           const textCue = nestedCue.clone();
  684.           textCue.payload = VttTextParser.htmlUnescape_(text);
  685.           cues.push(textCue);
  686.         }
  687.         isFirst = false;
  688.       }
  689.     } else {
  690.       for (const childNode of element.childNodes) {
  691.         VttTextParser.generateCueFromElement_(
  692.             childNode, nestedCue, cues, styles);
  693.       }
  694.     }
  695.   }
  697.   /**
  698.    * Parses a WebVTT setting from the given word.
  699.    *
  700.    * @param {!shaka.text.Cue} cue
  701.    * @param {string} word
  702.    * @param {!Array.<!shaka.text.CueRegion>} regions
  703.    * @return {boolean} True on success.
  704.    */
  705.   static parseCueSetting(cue, word, regions) {
  706.     const VttTextParser = shaka.text.VttTextParser;
  707.     let results = null;
  708.     if ((results = /^align:(start|middle|center|end|left|right)$/.exec(word))) {
  709.       VttTextParser.setTextAlign_(cue, results[1]);
  710.     } else if ((results = /^vertical:(lr|rl)$/.exec(word))) {
  711.       VttTextParser.setVerticalWritingMode_(cue, results[1]);
  712.     } else if ((results = /^size:([\d.]+)%$/.exec(word))) {
  713.       cue.size = Number(results[1]);
  714.     } else if ((results =
  715.         /^position:([\d.]+)%(?:,(line-left|line-right|center|start|end))?$/
  716.             .exec(word))) {
  717.       cue.position = Number(results[1]);
  718.       if (results[2]) {
  719.         VttTextParser.setPositionAlign_(cue, results[2]);
  720.       }
  721.     } else if ((results = /^region:(.*)$/.exec(word))) {
  722.       const region = VttTextParser.getRegionById_(regions, results[1]);
  723.       if (region) {
  724.         cue.region = region;
  725.       }
  726.     } else {
  727.       return VttTextParser.parsedLineValueAndInterpretation_(cue, word);
  728.     }
  730.     return true;
  731.   }
  733.   /**
  734.    *
  735.    * @param {!Array.<!shaka.text.CueRegion>} regions
  736.    * @param {string} id
  737.    * @return {?shaka.text.CueRegion}
  738.    * @private
  739.    */
  740.   static getRegionById_(regions, id) {
  741.     const regionsWithId = regions.filter((region) => {
  742.       return region.id == id;
  743.     });
  744.     if (!regionsWithId.length) {
  745.       shaka.log.warning('VTT parser could not find a region with id: ',
  746.           id,
  747.           ' The region will be ignored.');
  748.       return null;
  749.     }
  750.     goog.asserts.assert(regionsWithId.length == 1,
  751.         'VTTRegion ids should be unique!');
  753.     return regionsWithId[0];
  754.   }
  756.   /**
  757.    * Parses a WebVTTRegion setting from the given word.
  758.    *
  759.    * @param {!shaka.text.CueRegion} region
  760.    * @param {string} word
  761.    * @return {boolean} True on success.
  762.    * @private
  763.    */
  764.   static parseRegionSetting_(region, word) {
  765.     let results = null;
  766.     if ((results = /^id=(.*)$/.exec(word))) {
  767.       region.id = results[1];
  768.     } else if ((results = /^width=(\d{1,2}|100)%$/.exec(word))) {
  769.       region.width = Number(results[1]);
  770.     } else if ((results = /^lines=(\d+)$/.exec(word))) {
  771.       region.height = Number(results[1]);
  772.       region.heightUnits = shaka.text.CueRegion.units.LINES;
  773.     } else if ((results = /^regionanchor=(\d{1,2}|100)%,(\d{1,2}|100)%$/
  774.         .exec(word))) {
  775.       region.regionAnchorX = Number(results[1]);
  776.       region.regionAnchorY = Number(results[2]);
  777.     } else if ((results = /^viewportanchor=(\d{1,2}|100)%,(\d{1,2}|100)%$/
  778.         .exec(word))) {
  779.       region.viewportAnchorX = Number(results[1]);
  780.       region.viewportAnchorY = Number(results[2]);
  781.     } else if ((results = /^scroll=up$/.exec(word))) {
  782.       region.scroll = shaka.text.CueRegion.scrollMode.UP;
  783.     } else {
  784.       return false;
  785.     }
  787.     return true;
  788.   }
  790.   /**
  791.    * @param {!shaka.text.Cue} cue
  792.    * @param {string} align
  793.    * @private
  794.    */
  795.   static setTextAlign_(cue, align) {
  796.     const Cue = shaka.text.Cue;
  797.     if (align == 'middle') {
  798.       cue.textAlign = Cue.textAlign.CENTER;
  799.     } else {
  800.       goog.asserts.assert(align.toUpperCase() in Cue.textAlign,
  801.           align.toUpperCase() +
  802.                           ' Should be in Cue.textAlign values!');
  804.       cue.textAlign = Cue.textAlign[align.toUpperCase()];
  805.     }
  806.   }
  808.   /**
  809.    * @param {!shaka.text.Cue} cue
  810.    * @param {string} align
  811.    * @private
  812.    */
  813.   static setPositionAlign_(cue, align) {
  814.     const Cue = shaka.text.Cue;
  815.     if (align == 'line-left' || align == 'start') {
  816.       cue.positionAlign = Cue.positionAlign.LEFT;
  817.     } else if (align == 'line-right' || align == 'end') {
  818.       cue.positionAlign = Cue.positionAlign.RIGHT;
  819.     } else {
  820.       cue.positionAlign = Cue.positionAlign.CENTER;
  821.     }
  822.   }
  824.   /**
  825.    * @param {!shaka.text.Cue} cue
  826.    * @param {string} value
  827.    * @private
  828.    */
  829.   static setVerticalWritingMode_(cue, value) {
  830.     const Cue = shaka.text.Cue;
  831.     if (value == 'lr') {
  832.       cue.writingMode = Cue.writingMode.VERTICAL_LEFT_TO_RIGHT;
  833.     } else {
  834.       cue.writingMode = Cue.writingMode.VERTICAL_RIGHT_TO_LEFT;
  835.     }
  836.   }
  838.   /**
  839.    * @param {!shaka.text.Cue} cue
  840.    * @param {string} word
  841.    * @return {boolean}
  842.    * @private
  843.    */
  844.   static parsedLineValueAndInterpretation_(cue, word) {
  845.     const Cue = shaka.text.Cue;
  846.     let results = null;
  847.     if ((results = /^line:([\d.]+)%(?:,(start|end|center))?$/.exec(word))) {
  848.       cue.lineInterpretation = Cue.lineInterpretation.PERCENTAGE;
  849.       cue.line = Number(results[1]);
  850.       if (results[2]) {
  851.         goog.asserts.assert(
  852.             results[2].toUpperCase() in Cue.lineAlign,
  853.             results[2].toUpperCase() + ' Should be in Cue.lineAlign values!');
  854.         cue.lineAlign = Cue.lineAlign[results[2].toUpperCase()];
  855.       }
  856.     } else if ((results =
  857.                     /^line:(-?\d+)(?:,(start|end|center))?$/.exec(word))) {
  858.       cue.lineInterpretation = Cue.lineInterpretation.LINE_NUMBER;
  859.       cue.line = Number(results[1]);
  860.       if (results[2]) {
  861.         goog.asserts.assert(
  862.             results[2].toUpperCase() in Cue.lineAlign,
  863.             results[2].toUpperCase() + ' Should be in Cue.lineAlign values!');
  864.         cue.lineAlign = Cue.lineAlign[results[2].toUpperCase()];
  865.       }
  866.     } else {
  867.       return false;
  868.     }
  870.     return true;
  871.   }
  873.   /**
  874.    * Parses a WebVTT time from the given parser.
  875.    *
  876.    * @param {!shaka.util.TextParser} parser
  877.    * @return {?number}
  878.    * @private
  879.    */
  880.   static parseTime_(parser) {
  881.     // 00:00.000 or 00:00:00.000 or 0:00:00.000 or
  882.     // 00:00.00 or 00:00:00.00 or 0:00:00.00
  883.     const regexExpresion = /(?:(\d{1,}):)?(\d{2}):(\d{2})\.(\d{2,3})/g;
  884.     const results = parser.readRegex(regexExpresion);
  885.     if (results == null) {
  886.       return null;
  887.     }
  888.     // This capture is optional, but will still be in the array as undefined,
  889.     // in which case it is 0.
  890.     const hours = Number(results[1]) || 0;
  891.     const minutes = Number(results[2]);
  892.     const seconds = Number(results[3]);
  893.     const milliseconds = Number(results[4]);
  894.     if (minutes > 59 || seconds > 59) {
  895.       return null;
  896.     }
  898.     return (milliseconds / 1000) + seconds + (minutes * 60) + (hours * 3600);
  899.   }
  901.   /**
  902.    * This method converts the HTML entities &amp;, &lt;, &gt;, &quot;, &#39;,
  903.    * &nbsp;, &lrm; and &rlm; in string to their corresponding characters.
  904.    *
  905.    * @param {!string} input
  906.    * @return {string}
  907.    * @private
  908.    */
  909.   static htmlUnescape_(input) {
  910.     // Used to map HTML entities to characters.
  911.     const htmlUnescapes = {
  912.       '&amp;': '&',
  913.       '&lt;': '<',
  914.       '&gt;': '>',
  915.       '&quot;': '"',
  916.       '&#39;': '\'',
  917.       '&nbsp;': '\u{a0}',
  918.       '&lrm;': '\u{200e}',
  919.       '&rlm;': '\u{200f}',
  920.     };
  922.     // Used to match HTML entities and HTML characters.
  923.     const reEscapedHtml = /&(?:amp|lt|gt|quot|#(0+)?39|nbsp|lrm|rlm);/g;
  924.     const reHasEscapedHtml = RegExp(reEscapedHtml.source);
  925.     // This check is an optimization, since replace always makes a copy
  926.     if (input && reHasEscapedHtml.test(input)) {
  927.       return input.replace(reEscapedHtml, (entity) => {
  928.         // The only thing that might not match the dictionary above is the
  929.         // single quote, which can be matched by many strings in the regex, but
  930.         // only has a single entry in the dictionary.
  931.         return htmlUnescapes[entity] || '\'';
  932.       });
  933.     }
  934.     return input || '';
  935.   }
  936. };
  938. /**
  939.  * @const {number}
  940.  * @private
  941.  */
  942. shaka.text.VttTextParser.MPEG_TIMESCALE_ = 90000;
  944. /**
  945.  * At this value, timestamps roll over in TS content.
  946.  * @const {number}
  947.  * @private
  948.  */
  949. shaka.text.VttTextParser.TS_ROLLOVER_ = 0x200000000;
  951. shaka.text.TextEngine.registerParser(
  952.     'text/vtt', () => new shaka.text.VttTextParser());
  954. shaka.text.TextEngine.registerParser(
  955.     'text/vtt; codecs="vtt"', () => new shaka.text.VttTextParser());
  957. shaka.text.TextEngine.registerParser(
  958.     'text/vtt; codecs="wvtt"', () => new shaka.text.VttTextParser());