shaka-player 4.3.3 → 4.3.5

package/lib/text/ui_text_displayer.js

@@ -474,6 +474,7 @@ shaka.text.UITextDisplayer = class {
       wrapper = shaka.util.Dom.createHTMLElement('span');
       wrapper.classList.add('shaka-text-wrapper');
       wrapper.style.backgroundColor = cue.backgroundColor;
+      wrapper.style.lineHeight = 'normal';
       cueElement.appendChild(wrapper);
     }
 
@@ -617,12 +618,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

@@ -154,14 +154,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);
     }
   }
 
@@ -221,96 +221,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 '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;
+                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);
+      }
     }
   }
 
@@ -337,8 +362,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;
     }
 
@@ -366,8 +391,7 @@ shaka.text.VttTextParser = class {
     end += timeOffset;
 
     // Get the payload.
-    const payload = VttTextParser.htmlUnescape_(
-        text.slice(1).join('\n').trim());
+    const payload = text.slice(1).join('\n').trim();
 
     let cue = null;
     if (styles.has('global')) {
@@ -414,6 +438,7 @@ shaka.text.VttTextParser = class {
     }
     payload = VttTextParser.replaceColorPayload_(payload);
     payload = VttTextParser.replaceKaraokeStylePayload_(payload);
+    payload = VttTextParser.replaceVoiceStylePayload_(payload);
     const xmlPayload = '<span>' + payload + '</span>';
     const element = shaka.util.XmlUtils.parseXmlString(xmlPayload, 'span');
     if (element) {
@@ -424,7 +449,7 @@ shaka.text.VttTextParser = class {
         const childNode = childNodes[0];
         if (childNode.nodeType == Node.TEXT_NODE ||
             childNode.nodeType == Node.CDATA_SECTION_NODE) {
-          rootCue.payload = payload;
+          rootCue.payload = VttTextParser.htmlUnescape_(payload);
           return;
         }
       }
@@ -435,8 +460,81 @@ shaka.text.VttTextParser = class {
       rootCue.nestedCues = cues;
     } else {
       shaka.log.warning('The cue\'s markup could not be parsed: ', payload);
-      rootCue.payload = payload;
+      rootCue.payload = VttTextParser.htmlUnescape_(payload);
+    }
+  }
+
+  /**
+   * 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;
   }
 
   /**
@@ -495,28 +593,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));
@@ -585,12 +691,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;
@@ -631,7 +754,7 @@ shaka.text.VttTextParser = class {
         }
         if (text.length > 0) {
           const textCue = nestedCue.clone();
-          textCue.payload = text;
+          textCue.payload = VttTextParser.htmlUnescape_(text);
           cues.push(textCue);
         }
         isFirst = false;
@@ -846,8 +969,8 @@ shaka.text.VttTextParser = class {
   }
 
   /**
-   * This method converts the HTML entities &amp;, &lt;, &gt;, &quot;, and
-   * &#39; in string to their corresponding characters.
+   * 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}
@@ -861,10 +984,13 @@ shaka.text.VttTextParser = class {
       '&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);/g;
+    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)) {

package/lib/text/web_vtt_generator.js

@@ -7,6 +7,7 @@
 goog.provide('shaka.text.WebVttGenerator');
 
 goog.require('shaka.text.Cue');
+goog.require('shaka.text.Utils');
 
 
 /**
@@ -20,45 +21,6 @@ shaka.text.WebVttGenerator = class {
    * @return {string}
    */
   static convert(cues, adCuePoints) {
-    // Flatten nested cue payloads recursively.  If a cue has nested cues,
-    // their contents should be combined and replace the payload of the parent.
-    const flattenPayload = (cue) => {
-      // Handle styles (currently bold/italics/underline).
-      // TODO: add support for color rendering.
-      const openStyleTags = [];
-      const bold = cue.fontWeight >= shaka.text.Cue.fontWeight.BOLD;
-      const italics = cue.fontStyle == shaka.text.Cue.fontStyle.ITALIC;
-      const underline = cue.textDecoration.includes(
-          shaka.text.Cue.textDecoration.UNDERLINE);
-      if (bold) {
-        openStyleTags.push('b');
-      }
-      if (italics) {
-        openStyleTags.push('i');
-      }
-      if (underline) {
-        openStyleTags.push('u');
-      }
-
-      // Prefix opens tags, suffix closes tags in reverse order of opening.
-      const prefixStyleTags = openStyleTags.reduce((acc, tag) => {
-        return `${acc}<${tag}>`;
-      }, '');
-      const suffixStyleTags = openStyleTags.reduceRight((acc, tag) => {
-        return `${acc}</${tag}>`;
-      }, '');
-
-      if (cue.lineBreak) {
-        // This is a vertical lineBreak, so insert a newline.
-        return '\n';
-      } else if (cue.nestedCues.length) {
-        return cue.nestedCues.map(flattenPayload).join('');
-      } else {
-        // This is a real cue.
-        return prefixStyleTags + cue.payload + suffixStyleTags;
-      }
-    };
-
     const webvttTimeString = (time) => {
       let newTime = time;
       for (const adCuePoint of adCuePoints) {
@@ -78,31 +40,7 @@ shaka.text.WebVttGenerator = class {
           milliseconds;
     };
 
-    // 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.
-    // 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, []);
+    const flattenedCues = shaka.text.Utils.getCuesToFlatten(cues, []);
 
     let webvttString = 'WEBVTT\n\n';
     for (const cue of flattenedCues) {

package/lib/util/mime_utils.js

@@ -49,7 +49,7 @@ shaka.util.MimeUtils = class {
 
     if (Transmuxer.isSupported(fullMimeType, contentType)) {
       return shaka.media.Transmuxer.convertCodecs(contentType, fullMimeType);
-    } else if (contentType == ContentType.AUDIO) {
+    } else if (mimeType != 'video/mp2t' && contentType == ContentType.AUDIO) {
       // video/mp2t is the correct mime type for TS audio, so only replace the
       // word "video" with "audio" for non-TS audio content.
       return fullMimeType.replace('video', 'audio');

package/lib/util/platform.js

@@ -238,6 +238,14 @@ shaka.util.Platform = class {
     return shaka.util.Platform.userAgentContains_('PlayStation 4');
   }
 
+  /**
+   * Check if the current platform is Hisense.
+   */
+  static isHisense() {
+    return shaka.util.Platform.userAgentContains_('Hisense') ||
+        shaka.util.Platform.userAgentContains_('VIDAA');
+  }
+
   /**
    * Check if the current platform is Virgin Media device.
    */

package/lib/util/stream_utils.js

@@ -712,26 +712,38 @@ shaka.util.StreamUtils = class {
         }
 
         if (audio) {
-          if (!keySystemConfig.audio) {
+          // See: https://github.com/shaka-project/shaka-player/issues/4659
+          if (info.audioRobustness != '') {
+            if (!keySystemConfig.audio) {
+              // KeySystemTrackConfiguration
+              keySystemConfig.audio = {
+                robustness: info.audioRobustness,
+              };
+            } else {
+              keySystemConfig.audio.robustness =
+                  keySystemConfig.audio.robustness || info.audioRobustness;
+            }
+          } else if (!keySystemConfig.audio) {
             // KeySystemTrackConfiguration
-            keySystemConfig.audio = {
-              robustness: info.audioRobustness,
-            };
-          } else {
-            keySystemConfig.audio.robustness =
-                keySystemConfig.audio.robustness || info.audioRobustness;
+            keySystemConfig.audio = {};
           }
         }
 
         if (video) {
-          if (!keySystemConfig.video) {
+          // See: https://github.com/shaka-project/shaka-player/issues/4659
+          if (info.videoRobustness != '') {
+            if (!keySystemConfig.video) {
+              // KeySystemTrackConfiguration
+              keySystemConfig.video = {
+                robustness: info.videoRobustness,
+              };
+            } else {
+              keySystemConfig.video.robustness =
+                  keySystemConfig.video.robustness || info.videoRobustness;
+            }
+          } else if (!keySystemConfig.video) {
             // KeySystemTrackConfiguration
-            keySystemConfig.video = {
-              robustness: info.videoRobustness,
-            };
-          } else {
-            keySystemConfig.video.robustness =
-                keySystemConfig.video.robustness || info.videoRobustness;
+            keySystemConfig.video = {};
           }
         }
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shaka-player",
   "description": "DASH/EME video player library",
-  "version": "4.3.3",
+  "version": "4.3.5",
   "homepage": "https://github.com/shaka-project/shaka-player",
   "author": "Google",
   "maintainers": [

package/support.html

@@ -38,6 +38,7 @@
 }
 
     </style>
+    <script defer src="node_modules/mux.js/dist/mux.min.js"></script>
     <script src="dist/shaka-player.compiled.js"></script>
     <script>
       function whenLoaded(fn) {