shaka-player 4.10.13 → 4.11.0

package/lib/text/cue.js

@@ -6,8 +6,12 @@
 
 goog.provide('shaka.text.Cue');
 
+goog.require('shaka.log');
 goog.require('shaka.text.CueRegion');
 goog.require('shaka.util.ArrayUtils');
+goog.require('shaka.util.StringUtils');
+goog.require('shaka.util.TextParser');
+goog.require('shaka.util.TXml');
 
 
 /**
@@ -401,6 +405,372 @@ shaka.text.Cue = class {
 
     return true;
   }
+
+  /**
+   * Parses cue payload, searches for styling entities and, if needed,
+   * modifies original payload and creates nested cues to better represent
+   * styling found in payload. All changes are done in-place.
+   * @param {!shaka.text.Cue} cue
+   * @param {!Map<string, !shaka.text.Cue>=} styles
+   * @export
+   */
+  static parseCuePayload(cue, styles = new Map()) {
+    const StringUtils = shaka.util.StringUtils;
+    const TXml = shaka.util.TXml;
+    let payload = cue.payload;
+    if (!payload.includes('<')) {
+      cue.payload = StringUtils.htmlUnescape(payload);
+      return;
+    }
+    if (styles.size === 0) {
+      shaka.text.Cue.addDefaultTextColor(styles);
+    }
+    payload = shaka.text.Cue.replaceKaraokeStylePayload_(payload);
+    payload = shaka.text.Cue.replaceVoiceStylePayload_(payload);
+    payload = shaka.text.Cue.escapeInvalidChevrons_(payload);
+
+    cue.payload = '';
+
+    const xmlPayload = '<span>' + payload + '</span>';
+    let element;
+    try {
+      element = TXml.parseXmlString(xmlPayload, 'span');
+    } catch (e) {
+      shaka.log.warning('cue parse fail: ', e);
+    }
+    if (element) {
+      const childNodes = element.children;
+      if (childNodes.length == 1) {
+        const childNode = childNodes[0];
+        if (!TXml.isNode(childNode)) {
+          cue.payload = StringUtils.htmlUnescape(payload);
+          return;
+        }
+      }
+      for (const childNode of childNodes) {
+        shaka.text.Cue.generateCueFromElement_(childNode, cue, styles);
+      }
+    } else {
+      shaka.log.warning('The cue\'s markup could not be parsed: ', payload);
+      cue.payload = StringUtils.htmlUnescape(payload);
+    }
+  }
+
+  /**
+   * Add default color
+   *
+   * @param {!Map<string, !shaka.text.Cue>} styles
+   */
+  static addDefaultTextColor(styles) {
+    const textColor = shaka.text.Cue.defaultTextColor;
+    for (const [key, value] of Object.entries(textColor)) {
+      const cue = new shaka.text.Cue(0, 0, '');
+      cue.color = value;
+      styles.set('.' + key, cue);
+    }
+
+    const bgColor = shaka.text.Cue.defaultTextBackgroundColor;
+    for (const [key, value] of Object.entries(bgColor)) {
+      const cue = new shaka.text.Cue(0, 0, '');
+      cue.backgroundColor = value;
+      styles.set('.' + key, cue);
+    }
+  }
+
+  /**
+   * Converts karaoke style tag to be valid for xml parsing
+   * For example,
+   * input: Text <00:00:00.450> time <00:00:01.450> 1
+   * output: Text <div time="00:00:00.450"> time
+   *         <div time="00:00:01.450"> 1</div></div>
+   *
+   * @param {string} payload
+   * @return {string} processed payload
+   * @private
+   */
+  static replaceKaraokeStylePayload_(payload) {
+    const names = [];
+    let nameStart = -1;
+    for (let i = 0; i < payload.length; i++) {
+      if (payload[i] === '<') {
+        nameStart = i + 1;
+      } else if (payload[i] === '>') {
+        if (nameStart > 0) {
+          const name = payload.substr(nameStart, i - nameStart);
+          if (name.match(shaka.text.Cue.timeFormat_)) {
+            names.push(name);
+          }
+          nameStart = -1;
+        }
+      }
+    }
+    let newPayload = payload;
+    for (const name of names) {
+      const replaceTag = '<' + name + '>';
+      const startTag = '<div time="' + name + '">';
+      const endTag = '</div>';
+      newPayload = newPayload.replace(replaceTag, startTag);
+      newPayload += endTag;
+    }
+    return newPayload;
+  }
+
+  /**
+   * Converts voice style tag to be valid for xml parsing
+   * For example,
+   * input: <v Shaka>Test
+   * output: <v.voice-Shaka>Test</v.voice-Shaka>
+   *
+   * @param {string} payload
+   * @return {string} processed payload
+   * @private
+   */
+  static replaceVoiceStylePayload_(payload) {
+    const voiceTag = 'v';
+    const names = [];
+    let nameStart = -1;
+    let newPayload = '';
+    let hasVoiceEndTag = false;
+    for (let i = 0; i < payload.length; i++) {
+      // This condition is used to manage tags that have end tags.
+      if (payload[i] === '/') {
+        const end = payload.indexOf('>', i);
+        if (end === -1) {
+          return payload;
+        }
+        const tagEnd = payload.substring(i + 1, end);
+        if (!tagEnd || tagEnd != voiceTag) {
+          newPayload += payload[i];
+          continue;
+        }
+        hasVoiceEndTag = true;
+        let tagStart = null;
+        if (names.length) {
+          tagStart = names[names.length -1];
+        }
+        if (!tagStart) {
+          newPayload += payload[i];
+        } else if (tagStart === tagEnd) {
+          newPayload += '/' + tagEnd + '>';
+          i += tagEnd.length + 1;
+        } else {
+          if (!tagStart.startsWith(voiceTag)) {
+            newPayload += payload[i];
+            continue;
+          }
+          newPayload += '/' + tagStart + '>';
+          i += tagEnd.length + 1;
+        }
+      } else {
+        // Here we only want the tag name, not any other payload.
+        if (payload[i] === '<') {
+          nameStart = i + 1;
+          if (payload[nameStart] != voiceTag) {
+            nameStart = -1;
+          }
+        } else if (payload[i] === '>') {
+          if (nameStart > 0) {
+            names.push(payload.substr(nameStart, i - nameStart));
+            nameStart = -1;
+          }
+        }
+        newPayload += payload[i];
+      }
+    }
+    for (const name of names) {
+      const newName = name.replace(' ', '.voice-');
+      newPayload = newPayload.replace(`<${name}>`, `<${newName}>`);
+      newPayload = newPayload.replace(`</${name}>`, `</${newName}>`);
+      if (!hasVoiceEndTag) {
+        newPayload += `</${newName}>`;
+      }
+    }
+    return newPayload;
+  }
+
+  /**
+   * This method converts invalid > chevrons to HTML entities.
+   * It also removes < chevrons as per spec.
+   *
+   * @param {!string} input
+   * @return {string}
+   * @private
+   */
+  static escapeInvalidChevrons_(input) {
+    // Used to map HTML entities to characters.
+    const htmlEscapes = {
+      '< ': '',
+      ' >': ' &gt;',
+    };
+
+    const reEscapedHtml = /(< +>|<\s|\s>)/g;
+    const reHasEscapedHtml = RegExp(reEscapedHtml.source);
+    // This check is an optimization, since replace always makes a copy
+    if (input && reHasEscapedHtml.test(input)) {
+      return input.replace(reEscapedHtml, (entity) => {
+        return htmlEscapes[entity] || '';
+      });
+    }
+    return input || '';
+  }
+
+  /**
+   * @param {!shaka.extern.xml.Node} element
+   * @param {!shaka.text.Cue} rootCue
+   * @param {!Map<string, !shaka.text.Cue>} styles
+   * @private
+   */
+  static generateCueFromElement_(element, rootCue, styles) {
+    const TXml = shaka.util.TXml;
+    const nestedCue = rootCue.clone();
+    // We don't want propagate some properties.
+    nestedCue.nestedCues = [];
+    nestedCue.payload = '';
+    nestedCue.rubyTag = '';
+    // We don't want propagate some position settings
+    nestedCue.line = null;
+    nestedCue.region = new shaka.text.CueRegion();
+    nestedCue.position = null;
+    nestedCue.size = 0;
+
+    if (TXml.isNode(element)) {
+      const bold = shaka.text.Cue.fontWeight.BOLD;
+      const italic = shaka.text.Cue.fontStyle.ITALIC;
+      const underline = shaka.text.Cue.textDecoration.UNDERLINE;
+      const tags = element.tagName.split(/(?=[ .])+/g);
+      for (const tag of tags) {
+        let styleTag = tag;
+        // White blanks at start indicate that the style is a voice
+        if (styleTag.startsWith('.voice-')) {
+          const voice = styleTag.split('-').pop();
+          styleTag = `v[voice="${voice}"]`;
+          // The specification allows to have quotes and not, so we check to
+          // see which one is being used.
+          if (!styles.has(styleTag)) {
+            styleTag = `v[voice=${voice}]`;
+          }
+        }
+        if (styles.has(styleTag)) {
+          shaka.text.Cue.mergeStyle_(nestedCue, styles.get(styleTag));
+        }
+        switch (tag) {
+          case 'br': {
+            const lineBreakCue = shaka.text.Cue.lineBreak(
+                nestedCue.startTime, nestedCue.endTime);
+            rootCue.nestedCues.push(lineBreakCue);
+            return;
+          }
+          case 'b':
+            nestedCue.fontWeight = bold;
+            break;
+          case 'i':
+            nestedCue.fontStyle = italic;
+            break;
+          case 'u':
+            nestedCue.textDecoration.push(underline);
+            break;
+          case 'font': {
+            const color = element.attributes['color'];
+            if (color) {
+              nestedCue.color = color;
+            }
+            break;
+          }
+          case 'div': {
+            const time = element.attributes['time'];
+            if (!time) {
+              break;
+            }
+            const cueTime = shaka.util.TextParser.parseTime(time);
+            if (cueTime) {
+              nestedCue.startTime = cueTime;
+            }
+            break;
+          }
+          case 'ruby':
+          case 'rp':
+          case 'rt':
+            nestedCue.rubyTag = tag;
+            break;
+          default:
+            break;
+        }
+      }
+    }
+
+    const isTextNode = (item) => TXml.isText(item);
+    const childNodes = element.children;
+    if (isTextNode(element) ||
+        (childNodes.length == 1 && isTextNode(childNodes[0]))) {
+      // Trailing line breaks may lost when convert cue to HTML tag
+      // Need to insert line break cue to preserve line breaks
+      const textArr = TXml.getTextContents(element).split('\n');
+      let isFirst = true;
+      for (const text of textArr) {
+        if (!isFirst) {
+          const lineBreakCue = shaka.text.Cue.lineBreak(
+              nestedCue.startTime, nestedCue.endTime);
+          rootCue.nestedCues.push(lineBreakCue);
+        }
+        if (text.length > 0) {
+          const textCue = nestedCue.clone();
+          textCue.payload = shaka.util.StringUtils.htmlUnescape(text);
+          rootCue.nestedCues.push(textCue);
+        }
+        isFirst = false;
+      }
+    } else {
+      rootCue.nestedCues.push(nestedCue);
+      for (const childNode of childNodes) {
+        shaka.text.Cue.generateCueFromElement_(childNode, nestedCue, styles);
+      }
+    }
+  }
+
+  /**
+   * Merges values created in parseStyle_
+   * @param {!shaka.text.Cue} cue
+   * @param {shaka.text.Cue} refCue
+   * @private
+   */
+  static mergeStyle_(cue, refCue) {
+    if (!refCue) {
+      return;
+    }
+
+    // Overwrites if new value string length > 0
+    cue.backgroundColor = shaka.text.Cue.getOrDefault_(
+        refCue.backgroundColor, cue.backgroundColor);
+    cue.color = shaka.text.Cue.getOrDefault_(
+        refCue.color, cue.color);
+    cue.fontFamily = shaka.text.Cue.getOrDefault_(
+        refCue.fontFamily, cue.fontFamily);
+    cue.fontSize = shaka.text.Cue.getOrDefault_(
+        refCue.fontSize, cue.fontSize);
+    cue.textShadow = shaka.text.Cue.getOrDefault_(
+        refCue.textShadow, cue.textShadow);
+
+    // Overwrite with new values as unable to determine
+    // if new value is set or not
+    cue.fontWeight = refCue.fontWeight;
+    cue.fontStyle = refCue.fontStyle;
+    cue.opacity = refCue.opacity;
+    cue.rubyTag = refCue.rubyTag;
+    cue.textCombineUpright = refCue.textCombineUpright;
+    cue.wrapLine = refCue.wrapLine;
+  }
+
+  /**
+   * @param {string} value
+   * @param {string} defaultValue
+   * @private
+   */
+  static getOrDefault_(value, defaultValue) {
+    if (value && value.length > 0) {
+      return value;
+    }
+    return defaultValue;
+  }
 };
 
 
@@ -553,3 +923,6 @@ shaka.text.Cue.textDecoration = {
   'LINE_THROUGH': 'lineThrough',
   'OVERLINE': 'overline',
 };
+
+/** @private */
+shaka.text.Cue.timeFormat_ = /(?:(\d{1,}):)?(\d{2}):(\d{2})\.(\d{2,3})/g;

package/lib/text/mp4_ttml_parser.js

@@ -8,8 +8,10 @@ goog.provide('shaka.text.Mp4TtmlParser');
 
 goog.require('shaka.text.TextEngine');
 goog.require('shaka.text.TtmlTextParser');
+goog.require('shaka.util.BufferUtils');
 goog.require('shaka.util.Error');
 goog.require('shaka.util.Mp4Parser');
+goog.require('shaka.util.Uint8ArrayUtils');
 
 
 /**
@@ -81,12 +83,54 @@ shaka.text.Mp4TtmlParser = class {
     let sawMDAT = false;
     let payload = [];
 
+    /** @type {!Array.<number>} */
+    let subSizes = [];
+
     const parser = new Mp4Parser()
+        .box('moof', Mp4Parser.children)
+        .box('traf', Mp4Parser.children)
+        .fullBox('subs', (box) => {
+          subSizes = [];
+          const reader = box.reader;
+          const entryCount = reader.readUint32();
+          for (let i = 0; i < entryCount; i++) {
+            reader.readUint32(); // sample_delta
+            const subsampleCount = reader.readUint16();
+            for (let j = 0; j < subsampleCount; j++) {
+              if (box.version == 1) {
+                subSizes.push(reader.readUint32());
+              } else {
+                subSizes.push(reader.readUint16());
+              }
+              reader.readUint8(); // priority
+              reader.readUint8(); // discardable
+              reader.readUint32(); // codec_specific_parameters
+            }
+          }
+        })
         .box('mdat', Mp4Parser.allData((data) => {
           sawMDAT = true;
           // Join this to any previous payload, in case the mp4 has multiple
           // mdats.
-          payload = payload.concat(this.parser_.parseMedia(data, time, uri));
+          if (subSizes.length) {
+            const contentData =
+                shaka.util.BufferUtils.toUint8(data, 0, subSizes[0]);
+            const images = [];
+            let offset = subSizes[0];
+            for (let i = 1; i < subSizes.length; i++) {
+              const imageData =
+                  shaka.util.BufferUtils.toUint8(data, offset, subSizes[i]);
+              const raw =
+                  shaka.util.Uint8ArrayUtils.toStandardBase64(imageData);
+              images.push('data:image/png;base64,' + raw);
+              offset += subSizes[i];
+            }
+            payload = payload.concat(
+                this.parser_.parseMedia(contentData, time, uri, images));
+          } else {
+            payload = payload.concat(
+                this.parser_.parseMedia(data, time, uri, /* images= */ []));
+          }
         }));
     parser.parse(data, /* partialOkay= */ false);
 
@@ -107,9 +151,15 @@ shaka.text.TextEngine.registerParser(
 shaka.text.TextEngine.registerParser(
     'application/mp4; codecs="stpp.ttml"',
     () => new shaka.text.Mp4TtmlParser());
+shaka.text.TextEngine.registerParser(
+    'application/mp4; codecs="stpp.ttml.im1i"',
+    () => new shaka.text.Mp4TtmlParser());
 shaka.text.TextEngine.registerParser(
     'application/mp4; codecs="stpp.ttml.im1t"',
     () => new shaka.text.Mp4TtmlParser());
+shaka.text.TextEngine.registerParser(
+    'application/mp4; codecs="stpp.ttml.im2i"',
+    () => new shaka.text.Mp4TtmlParser());
 shaka.text.TextEngine.registerParser(
     'application/mp4; codecs="stpp.ttml.im2t"',
     () => new shaka.text.Mp4TtmlParser());

package/lib/text/mp4_vtt_parser.js

@@ -308,11 +308,8 @@ shaka.text.Mp4VttParser = class {
    * @private
    */
   static assembleCue_(payload, id, settings, startTime, endTime) {
-    const cue = new shaka.text.Cue(startTime, endTime, '');
-
-    /** @type {!Map.<string, shaka.text.Cue>} */
-    const styles = new Map();
-    shaka.text.VttTextParser.parseCueStyles(payload, cue, styles);
+    const cue = new shaka.text.Cue(startTime, endTime, payload);
+    shaka.text.Cue.parseCuePayload(cue);
 
     if (id) {
       cue.id = id;

package/lib/text/sbv_text_parser.js

@@ -48,7 +48,6 @@ shaka.text.SbvTextParser = class {
    * @export
    */
   parseMedia(data, time) {
-    const SbvTextParser = shaka.text.SbvTextParser;
     const StringUtils = shaka.util.StringUtils;
 
     // Get the input as a string.
@@ -72,9 +71,9 @@ shaka.text.SbvTextParser = class {
       const lines = block.split('\n');
       // Parse the times.
       const parser = new shaka.util.TextParser(lines[0]);
-      const start = SbvTextParser.parseTime_(parser);
+      const start = parser.parseTime();
       const expect = parser.readRegex(/,/g);
-      const end = SbvTextParser.parseTime_(parser);
+      const end = parser.parseTime();
 
       if (start == null || expect == null || end == null) {
         throw new shaka.util.Error(
@@ -93,34 +92,6 @@ shaka.text.SbvTextParser = class {
 
     return cues;
   }
-
-  /**
-   * Parses a SubViewer time from the given parser.
-   *
-   * @param {!shaka.util.TextParser} parser
-   * @return {?number}
-   * @private
-   */
-  static parseTime_(parser) {
-    // 00:00.000 or 00:00:00.000 or 0:00:00.000 or
-    // 00:00.00 or 00:00:00.00 or 0:00:00.00
-    const regexExpresion = /(?:(\d{1,}):)?(\d{2}):(\d{2})\.(\d{2,3})/g;
-    const results = parser.readRegex(regexExpresion);
-    if (results == null) {
-      return null;
-    }
-    // This capture is optional, but will still be in the array as undefined,
-    // in which case it is 0.
-    const hours = Number(results[1]) || 0;
-    const minutes = Number(results[2]);
-    const seconds = Number(results[3]);
-    const milliseconds = Number(results[4]);
-    if (minutes > 59 || seconds > 59) {
-      return null;
-    }
-
-    return (milliseconds / 1000) + seconds + (minutes * 60) + (hours * 3600);
-  }
 };
 
 

package/lib/text/srt_text_parser.js

@@ -67,7 +67,7 @@ shaka.text.SrtTextParser = class {
 
     const newData = BufferUtils.toUint8(StringUtils.toUTF8(vvtText));
 
-    return this.parser_.parseMedia(newData, time, uri);
+    return this.parser_.parseMedia(newData, time, uri, /* images= */ []);
   }
 
   /**

package/lib/text/text_engine.js

@@ -209,7 +209,7 @@ shaka.text.TextEngine = class {
 
     // Parse the buffer and add the new cues.
     const allCues = this.parser_.parseMedia(
-        shaka.util.BufferUtils.toUint8(buffer), time, uri);
+        shaka.util.BufferUtils.toUint8(buffer), time, uri, /* images= */ []);
     for (const cue of allCues) {
       this.modifyCueCallback_(cue, uri || null, time);
     }

package/lib/text/text_utils.js

@@ -301,6 +301,7 @@ shaka.text.Utils = class {
       cue.region.width = vttCue.region.width;
       cue.region.widthUnits = shaka.text.CueRegion.units.PERCENTAGE;
     }
+    shaka.text.Cue.parseCuePayload(cue);
 
     return cue;
   }

package/lib/text/ttml_text_parser.js

@@ -51,7 +51,7 @@ shaka.text.TtmlTextParser = class {
    * @override
    * @export
    */
-  parseMedia(data, time, uri) {
+  parseMedia(data, time, uri, images) {
     const TtmlTextParser = shaka.text.TtmlTextParser;
     const TXml = shaka.util.TXml;
     const ttpNs = TtmlTextParser.parameterNs_;
@@ -148,7 +148,7 @@ shaka.text.TtmlTextParser = class {
         body, time, rateInfo, metadataElements, styles,
         regionElements, cueRegions, collapseMultipleSpaces,
         cellResolutionInfo, /* parentCueElement= */ null,
-        /* isContent= */ false, uri);
+        /* isContent= */ false, uri, images);
     if (cue) {
       // According to the TTML spec, backgrounds default to transparent.
       // So default the background of the top-level element to transparent.
@@ -177,13 +177,14 @@ shaka.text.TtmlTextParser = class {
    * @param {?shaka.extern.xml.Node} parentCueElement
    * @param {boolean} isContent
    * @param {?(string|undefined)} uri
+   * @param {!Array.<string>} images
    * @return {shaka.text.Cue}
    * @private
    */
   static parseCue_(
       cueNode, timeContext, rateInfo, metadataElements, styles, regionElements,
       cueRegions, collapseMultipleSpaces, cellResolution, parentCueElement,
-      isContent, uri) {
+      isContent, uri, images) {
     const TXml = shaka.util.TXml;
     const StringUtils = shaka.util.StringUtils;
     /** @type {shaka.extern.xml.Node} */
@@ -230,7 +231,15 @@ shaka.text.TtmlTextParser = class {
         cueElement,
         shaka.text.TtmlTextParser.smpteNsList_,
         'backgroundImage');
-    if (uri && backgroundImage && !backgroundImage.startsWith('#')) {
+    const imsc1ImgUrnTester =
+        /^(urn:)(mpeg:[a-z0-9][a-z0-9-]{0,31}:)(subs:)([0-9]+)$/;
+    if (backgroundImage && imsc1ImgUrnTester.test(backgroundImage)) {
+      const index = parseInt(backgroundImage.split(':').pop(), 10) -1;
+      if (index >= images.length) {
+        return null;
+      }
+      imageUri = images[index];
+    } else if (uri && backgroundImage && !backgroundImage.startsWith('#')) {
       const baseUri = new goog.Uri(uri);
       const relativeUri = new goog.Uri(backgroundImage);
       const newUri = baseUri.resolve(relativeUri).toString();
@@ -270,6 +279,7 @@ shaka.text.TtmlTextParser = class {
             cueElement,
             isContent,
             uri,
+            images,
         );
 
         // This node may or may not generate a nested cue.

package/lib/text/ui_text_displayer.js

@@ -710,10 +710,6 @@ shaka.text.UITextDisplayer = class {
           // Only do this for the text itself.
           elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
         }
-        const fontFamily = inherit((c) => c.fontFamily);
-        if (fontFamily) {
-          elem.style.fontFamily = fontFamily;
-        }
       }
       if (text) {
         elem.textContent = text;