shaka-player 3.3.15 → 3.3.17

package/externs/shaka/text.js

@@ -297,6 +297,13 @@ shaka.extern.Cue = class {
      */
     this.fontFamily;
 
+    /**
+     * Text shadow color as a CSS text-shadow value.
+     * @type {string}
+     * @exportDoc
+     */
+    this.textShadow = '';
+
     /**
      * Text stroke color as a CSS color, e.g. "#FFFFFF" or "white".
      * @type {string}

package/lib/dash/segment_template.js

@@ -102,11 +102,23 @@ shaka.dash.SegmentTemplate = class {
       const periodEnd = context.periodInfo.duration ?
           context.periodInfo.start + context.periodInfo.duration : Infinity;
 
-      // Don't fit live content, since it might receive more segments.
-      // Unless that live content is multi-period; it's safe to fit every period
-      // but the last one, since only the last period might receive new
-      // segments.
-      const shouldFit = periodEnd != Infinity;
+      /* When to fit segments.  All refactors should honor/update this table:
+       *
+       * | dynamic | infinite | last   | should | notes                     |
+       * |         | period   | period | fit    |                           |
+       * | ------- | -------- | ------ | ------ | ------------------------- |
+       * |     F   |     F    |    X   |    T   | typical VOD               |
+       * |     F   |     T    |    X   |    X   | impossible: infinite VOD  |
+       * |     T   |     F    |    F   |    T   | typical live, old period  |
+       * |     T   |     F    |    T   |    F   | typical IPR               |
+       * |     T   |     T    |    F   |    X   | impossible: old, infinite |
+       * |     T   |     T    |    T   |    F   | typical live, new period  |
+       */
+
+      // We never fit the final period of dynamic content, which could be
+      // infinite live (with no limit to fit to) or IPR (which would expand the
+      // most recent segment to the end of the presentation).
+      const shouldFit = !(context.dynamic && context.periodInfo.isLastPeriod);
 
       if (segmentIndex) {
         if (shouldFit) {

package/lib/hls/hls_parser.js

@@ -3041,7 +3041,7 @@ shaka.hls.HlsParser.TEXT_EXTENSIONS_TO_MIME_TYPES_ = {
   'm4f': 'application/mp4',
   'cmft': 'application/mp4',
   'vtt': 'text/vtt',
-  'webvtt': 'txt/vtt',
+  'webvtt': 'text/vtt',
   'ttml': 'application/ttml+xml',
 };
 

package/lib/player.js

@@ -1419,6 +1419,12 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     has.startTime = null;
     has.uri = null;
 
+    // Release the region timeline, which is created when parsing the manifest.
+    if (this.regionTimeline_) {
+      this.regionTimeline_.release();
+      this.regionTimeline_ = null;
+    }
+
     // In most cases we should have a media element. The one exception would
     // be if there was an error and we, by chance, did not have a media element.
     if (has.mediaElement) {
@@ -6657,7 +6663,7 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @define {string} A version number taken from git at compile time.
  * @export
  */
-shaka.Player.version = 'v3.3.15-uncompiled';
+shaka.Player.version = 'v3.3.17-uncompiled';
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/polyfill/media_capabilities.js

@@ -45,6 +45,7 @@ shaka.polyfill.MediaCapabilities = class {
         !shaka.util.Platform.isWebOS() &&
         !shaka.util.Platform.isTizen() &&
         !shaka.util.Platform.isEOS() &&
+        !shaka.util.Platform.isHisense() &&
         navigator.mediaCapabilities) {
       shaka.log.info(
           'MediaCapabilities: Native mediaCapabilities support found.');

package/lib/text/cue.js

@@ -139,6 +139,12 @@ shaka.text.Cue = class {
      */
     this.border = '';
 
+    /**
+     * @override
+     * @exportInterface
+     */
+    this.textShadow = '';
+
     /**
      * @override
      * @exportInterface

package/lib/text/ui_text_displayer.js

@@ -372,6 +372,25 @@ shaka.text.UITextDisplayer = class {
     }
   }
 
+  /**
+   * Compute a unique internal id:
+   * Regions can reuse the id but have different dimensions, we need to
+   * consider those differences
+   * @param {shaka.extern.CueRegion} region
+   * @private
+   */
+  generateRegionId_(region) {
+    const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
+    const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
+    const viewportAnchorUnit =
+        region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
+    const uniqueRegionId = `${region.id}_${
+      region.width}x${region.height}${heightUnit}-${
+      region.viewportAnchorX}x${region.viewportAnchorY}${viewportAnchorUnit}`;
+
+    return uniqueRegionId;
+  }
+
   /**
    * Get or create a region element corresponding to the cue region.  These are
    * cached by ID.
@@ -383,8 +402,9 @@ shaka.text.UITextDisplayer = class {
   getRegionElement_(cue) {
     const region = cue.region;
 
-    if (this.regionElements_.has(region.id)) {
-      return this.regionElements_.get(region.id);
+    const regionId = this.generateRegionId_(region);
+    if (this.regionElements_.has(regionId)) {
+      return this.regionElements_.get(regionId);
     }
 
     const regionElement = shaka.util.Dom.createHTMLElement('span');
@@ -395,7 +415,7 @@ shaka.text.UITextDisplayer = class {
     const viewportAnchorUnit =
         region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
 
-    regionElement.id = 'shaka-text-region---' + region.id;
+    regionElement.id = 'shaka-text-region---' + regionId;
     regionElement.classList.add('shaka-text-region');
 
     regionElement.style.height = region.height + heightUnit;
@@ -416,7 +436,7 @@ shaka.text.UITextDisplayer = class {
       regionElement.style.justifyContent = 'flex-end';
     }
 
-    this.regionElements_.set(region.id, regionElement);
+    this.regionElements_.set(regionId, regionElement);
     return regionElement;
   }
 
@@ -509,6 +529,7 @@ shaka.text.UITextDisplayer = class {
     style.paddingRight =
         shaka.text.UITextDisplayer.convertLengthValue_(
             cue.linePadding, cue, this.videoContainer_);
+    style.textShadow = cue.textShadow;
 
     if (cue.backgroundImage) {
       style.backgroundImage = 'url(\'' + cue.backgroundImage + '\')';
@@ -602,12 +623,7 @@ shaka.text.UITextDisplayer = class {
     // TODO: Implement lineAlignment of 'CENTER'.
     if (cue.line != null) {
       if (cue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
-        // When setting absolute positioning, you need to set x/y/width/height
-        // so the element is positioned correctly.  Set these as default and
-        // other settings will override them.
         style.position = 'absolute';
-        style.left = '0';
-        style.top = '0';
         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
           style.width = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {

package/lib/text/vtt_text_parser.js

@@ -132,14 +132,14 @@ shaka.text.VttTextParser = class {
     for (const [key, value] of Object.entries(textColor)) {
       const cue = new shaka.text.Cue(0, 0, '');
       cue.color = value;
-      styles.set(key, cue);
+      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);
+      styles.set('.' + key, cue);
     }
   }
 
@@ -199,92 +199,121 @@ shaka.text.VttTextParser = class {
       return;
     }
 
-    if (!text[1].includes('::cue')) {
-      return;
-    }
-    let styleSelector = 'global';
-    // Look for what is within parentisesis. For example:
-    // <code>:: cue (b) {</code>, what we are looking for is <code>b</code>
-    const selector = text[1].match(/\((.*)\)/);
-    if (selector) {
-      styleSelector = selector.pop();
+    /** @type {!Array.<!Array.<string>>} */
+    const styleBlocks = [];
+    let lastBlockIndex = -1;
+    for (let i = 1; i < text.length; i++) {
+      if (text[i].includes('::cue')) {
+        styleBlocks.push([]);
+        lastBlockIndex = styleBlocks.length - 1;
+      }
+      if (lastBlockIndex == -1) {
+        continue;
+      }
+      styleBlocks[lastBlockIndex].push(text[i]);
+      if (text[i].includes('}')) {
+        lastBlockIndex = -1;
+      }
     }
 
-    // We start at 2 to avoid '::cue' and end earlier to avoid '}'
-    let propertyLines = text.slice(2, -1);
-    if (text[1].includes('}')) {
-      const payload = /\{(.*?)\}/.exec(text[1]);
-      if (payload) {
-        propertyLines = payload[1].split(';');
+    for (const styleBlock of styleBlocks) {
+      let styleSelector = 'global';
+      // Look for what is within parentheses. For example:
+      // <code>:: cue (b) {</code>, what we are looking for is <code>b</code>
+      const selector = styleBlock[0].match(/\((.*)\)/);
+      if (selector) {
+        styleSelector = selector.pop();
       }
-    }
 
-    const cue = new shaka.text.Cue(0, 0, '');
-    let validStyle = false;
-    for (let i = 0; i < propertyLines.length; i++) {
-      // We look for CSS properties. As a general rule they are separated by
-      // <code>:</code>. Eg: <code>color: red;</code>
-      const lineParts = /^\s*([^:]+):\s*(.*)/.exec(propertyLines[i]);
-      if (lineParts) {
-        const name = lineParts[1].trim();
-        const value = lineParts[2].trim().replace(';', '');
-        switch (name) {
-          case 'background-color':
-            validStyle = true;
-            cue.backgroundColor = value;
-            break;
-          case 'color':
-            validStyle = true;
-            cue.color = value;
-            break;
-          case 'font-family':
-            validStyle = true;
-            cue.fontFamily = value;
-            break;
-          case 'font-size':
-            validStyle = true;
-            cue.fontSize = value;
-            break;
-          case 'font-weight':
-            if (parseInt(value, 10) >= 700) {
+      // We start at 1 to avoid '::cue' and end earlier to avoid '}'
+      let propertyLines = styleBlock.slice(1, -1);
+      if (styleBlock[0].includes('}')) {
+        const payload = /\{(.*?)\}/.exec(styleBlock[0]);
+        if (payload) {
+          propertyLines = payload[1].split(';');
+        }
+      }
+
+      // Continue styles over multiple selectors if necessary.
+      // For example,
+      //   ::cue(b) { background: white; } ::cue(b) { color: blue; }
+      // should set both the background and foreground of bold tags.
+      let cue = styles.get(styleSelector);
+      if (!cue) {
+        cue = new shaka.text.Cue(0, 0, '');
+      }
+
+      let validStyle = false;
+      for (let i = 0; i < propertyLines.length; i++) {
+        // We look for CSS properties. As a general rule they are separated by
+        // <code>:</code>. Eg: <code>color: red;</code>
+        const lineParts = /^\s*([^:]+):\s*(.*)/.exec(propertyLines[i]);
+        if (lineParts) {
+          const name = lineParts[1].trim();
+          const value = lineParts[2].trim().replace(';', '');
+          switch (name) {
+            case 'background-color':
+            case 'background':
               validStyle = true;
-              cue.fontWeight = shaka.text.Cue.fontWeight.BOLD;
-            }
-            break;
-          case 'font-style':
-            switch (value) {
-              case 'normal':
-                validStyle = true;
-                cue.fontStyle = shaka.text.Cue.fontStyle.NORMAL;
-                break;
-              case 'italic':
-                validStyle = true;
-                cue.fontStyle = shaka.text.Cue.fontStyle.ITALIC;
-                break;
-              case 'oblique':
+              cue.backgroundColor = value;
+              break;
+            case 'color':
+              validStyle = true;
+              cue.color = value;
+              break;
+            case 'font-family':
+              validStyle = true;
+              cue.fontFamily = value;
+              break;
+            case 'font-size':
+              validStyle = true;
+              cue.fontSize = value;
+              break;
+            case 'font-weight':
+              if (parseInt(value, 10) >= 700 || value == 'bold') {
                 validStyle = true;
-                cue.fontStyle = shaka.text.Cue.fontStyle.OBLIQUE;
-                break;
-            }
-            break;
-          case 'opacity':
-            validStyle = true;
-            cue.opacity = parseFloat(value);
-            break;
-          case 'white-space':
-            validStyle = true;
-            cue.wrapLine = value != 'noWrap';
-            break;
-          default:
-            shaka.log.warning('VTT parser encountered an unsupported style: ',
-                lineParts);
-            break;
+                cue.fontWeight = shaka.text.Cue.fontWeight.BOLD;
+              }
+              break;
+            case 'font-style':
+              switch (value) {
+                case 'normal':
+                  validStyle = true;
+                  cue.fontStyle = shaka.text.Cue.fontStyle.NORMAL;
+                  break;
+                case 'italic':
+                  validStyle = true;
+                  cue.fontStyle = shaka.text.Cue.fontStyle.ITALIC;
+                  break;
+                case 'oblique':
+                  validStyle = true;
+                  cue.fontStyle = shaka.text.Cue.fontStyle.OBLIQUE;
+                  break;
+              }
+              break;
+            case 'opacity':
+              validStyle = true;
+              cue.opacity = parseFloat(value);
+              break;
+            case 'text-shadow':
+              validStyle = true;
+              cue.textShadow = value;
+              break;
+            case 'white-space':
+              validStyle = true;
+              cue.wrapLine = value != 'noWrap';
+              break;
+            default:
+              shaka.log.warning('VTT parser encountered an unsupported style: ',
+                  lineParts);
+              break;
+          }
         }
       }
-    }
 
-    if (validStyle) {
-      styles.set(styleSelector, cue);
+      if (validStyle) {
+        styles.set(styleSelector, cue);
+      }
     }
   }
 
@@ -311,8 +340,8 @@ shaka.text.VttTextParser = class {
       return null;
     }
 
-    // Skip style blocks.
-    if (text[0] == 'STYLE') {
+    // Skip style and region blocks.
+    if (text[0] == 'STYLE' || text[0] == 'REGION') {
       return null;
     }
 
@@ -340,7 +369,8 @@ shaka.text.VttTextParser = class {
     end += timeOffset;
 
     // Get the payload.
-    const payload = text.slice(1).join('\n').trim();
+    const payload = VttTextParser.htmlUnescape_(
+        text.slice(1).join('\n').trim());
 
     let cue = null;
     if (styles.has('global')) {
@@ -386,6 +416,7 @@ shaka.text.VttTextParser = class {
       VttTextParser.addDefaultTextColor_(styles);
     }
     payload = VttTextParser.replaceColorPayload_(payload);
+    payload = VttTextParser.replaceVoiceStylePayload_(payload);
     const xmlPayload = '<span>' + payload + '</span>';
     const element = shaka.util.XmlUtils.parseXmlString(xmlPayload, 'span');
     if (element) {
@@ -411,6 +442,79 @@ shaka.text.VttTextParser = class {
     }
   }
 
+  /**
+   * 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;
+  }
+
   /**
    * Converts color end tag to be valid for xml parsing
    * For example,
@@ -429,28 +533,36 @@ shaka.text.VttTextParser = class {
     let nameStart = -1;
     let newPayload = '';
     for (let i = 0; i < payload.length; i++) {
-      if (payload[i] === '/') {
+      if (payload[i] === '/' && i > 0 && payload[i - 1] === '<') {
         const end = payload.indexOf('>', i);
         if (end <= i) {
           return payload;
         }
         const tagEnd = payload.substring(i + 1, end);
+        if (!tagEnd || tagEnd !== 'c') {
+          newPayload += payload[i];
+          continue;
+        }
         const tagStart = names.pop();
-        if (!tagEnd || !tagStart) {
-          return payload;
+        if (!tagStart) {
+          newPayload += payload[i];
         } else if (tagStart === tagEnd) {
           newPayload += '/' + tagEnd + '>';
           i += tagEnd.length + 1;
         } else {
-          if (!tagStart.startsWith('c.') || tagEnd !== 'c') {
-            return payload;
+          if (!tagStart.startsWith('c.')) {
+            newPayload += payload[i];
+            continue;
           }
-          newPayload += '/' + tagStart + '>';
           i += tagEnd.length + 1;
+          newPayload += '/' + tagStart + '>';
         }
       } else {
         if (payload[i] === '<') {
           nameStart = i + 1;
+          if (payload[nameStart] != 'c') {
+            nameStart = -1;
+          }
         } else if (payload[i] === '>') {
           if (nameStart > 0) {
             names.push(payload.substr(nameStart, i - nameStart));
@@ -519,12 +631,29 @@ shaka.text.VttTextParser = class {
       const bold = shaka.text.Cue.fontWeight.BOLD;
       const italic = shaka.text.Cue.fontStyle.ITALIC;
       const underline = shaka.text.Cue.textDecoration.UNDERLINE;
-      const tags = element.nodeName.split(/[ .]+/);
+      const tags = element.nodeName.split(/(?=[ .])+/g);
       for (const tag of tags) {
-        if (styles.has(tag)) {
-          VttTextParser.mergeStyle_(nestedCue, styles.get(tag));
+        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)) {
+          VttTextParser.mergeStyle_(nestedCue, styles.get(styleTag));
         }
         switch (tag) {
+          case 'br': {
+            const lineBreakCue = rootCue.clone();
+            lineBreakCue.lineBreak = true;
+            cues.push(lineBreakCue);
+            break;
+          }
           case 'b':
             nestedCue.fontWeight = bold;
             break;
@@ -769,6 +898,42 @@ shaka.text.VttTextParser = class {
 
     return (milliseconds / 1000) + seconds + (minutes * 60) + (hours * 3600);
   }
+
+  /**
+   * This method converts the HTML entities &amp;, &lt;, &gt;, &quot;, &#39;,
+   * &nbsp;, &lrm; and &rlm; in string to their corresponding characters.
+   *
+   * @param {!string} input
+   * @return {string}
+   * @private
+   */
+  static htmlUnescape_(input) {
+    // Used to map HTML entities to characters.
+    const htmlUnescapes = {
+      '&amp;': '&',
+      '&lt;': '<',
+      '&gt;': '>',
+      '&quot;': '"',
+      '&#39;': '\'',
+      '&nbsp;': '\u{a0}',
+      '&lrm;': '\u{200e}',
+      '&rlm;': '\u{200f}',
+    };
+
+    // Used to match HTML entities and HTML characters.
+    const reEscapedHtml = /&(?:amp|lt|gt|quot|#(0+)?39|nbsp|lrm|rlm);/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) => {
+        // The only thing that might not match the dictionary above is the
+        // single quote, which can be matched by many strings in the regex, but
+        // only has a single entry in the dictionary.
+        return htmlUnescapes[entity] || '\'';
+      });
+    }
+    return input || '';
+  }
 };
 
 /**

package/lib/text/web_vtt_generator.js

@@ -87,16 +87,28 @@ shaka.text.WebVttGenerator = class {
     // We don't want to modify the array or objects passed in, since we don't
     // technically own them.  So we build a new array and replace certain items
     // in it if they need to be flattened.
-    const flattenedCues = cues.map((cue) => {
-      if (cue.nestedCues.length) {
-        const flatCue = cue.clone();
-        flatCue.nestedCues = [];
-        flatCue.payload = flattenPayload(cue);
-        return flatCue;
-      } else {
-        return cue;
+    // We also don't want to flatten the text payloads starting at a container
+    // element; otherwise, for containers encapsulating multiple caption lines,
+    // the lines would merge into a single cue. This is undesirable when a
+    // subset of the captions are outside of the append time window. To fix
+    // this, we only call flattenPayload() starting at elements marked as
+    // isContainer = false.
+    const getCuesToFlatten = (cues, result) => {
+      for (const cue of cues) {
+        if (cue.isContainer) {
+          // Recurse to find the actual text payload cues.
+          getCuesToFlatten(cue.nestedCues, result);
+        } else {
+          // Flatten the payload.
+          const flatCue = cue.clone();
+          flatCue.nestedCues = [];
+          flatCue.payload = flattenPayload(cue);
+          result.push(flatCue);
+        }
       }
-    });
+      return result;
+    };
+    const flattenedCues = getCuesToFlatten(cues, []);
 
     let webvttString = 'WEBVTT\n\n';
     for (const cue of flattenedCues) {

package/lib/util/dom_utils.js

@@ -36,7 +36,9 @@ shaka.util.Dom = class {
    * @return {!HTMLButtonElement}
    */
   static createButton() {
-    return /** @type {!HTMLButtonElement} */(document.createElement('button'));
+    const button = document.createElement('button');
+    button.setAttribute('type', 'button');
+    return /** @type {!HTMLButtonElement} */ (button);
   }