shaka-player 4.4.2 → 4.5.0

package/lib/text/cue.js

@@ -26,7 +26,7 @@ shaka.text.Cue = class {
      * The start time of the cue in seconds, relative to the start of the
      * presentation.
      * @type {number}
-     * @exportDoc
+     * @export
      */
     this.startTime = startTime;
 
@@ -34,7 +34,7 @@ shaka.text.Cue = class {
      * The end time of the cue in seconds, relative to the start of the
      * presentation.
      * @type {number}
-     * @exportDoc
+     * @export
      */
     this.endTime = endTime;
 
@@ -42,7 +42,7 @@ shaka.text.Cue = class {
      * The text payload of the cue.  If nestedCues is non-empty, this should be
      * empty.  Top-level block containers should have no payload of their own.
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.payload = payload;
 
@@ -50,7 +50,7 @@ shaka.text.Cue = class {
      * The region to render the cue into.  Only supported on top-level cues,
      * because nested cues are inline elements.
      * @type {shaka.text.CueRegion}
-     * @exportDoc
+     * @export
      */
     this.region = new shaka.text.CueRegion();
 
@@ -58,42 +58,42 @@ shaka.text.Cue = class {
      * The indent (in percent) of the cue box in the direction defined by the
      * writing direction.
      * @type {?number}
-     * @exportDoc
+     * @export
      */
     this.position = null;
 
     /**
      * Position alignment of the cue.
      * @type {shaka.text.Cue.positionAlign}
-     * @exportDoc
+     * @export
      */
     this.positionAlign = Cue.positionAlign.AUTO;
 
     /**
      * Size of the cue box (in percents), where 0 means "auto".
      * @type {number}
-     * @exportDoc
+     * @export
      */
     this.size = 0;
 
     /**
      * Alignment of the text inside the cue box.
      * @type {shaka.text.Cue.textAlign}
-     * @exportDoc
+     * @export
      */
     this.textAlign = Cue.textAlign.CENTER;
 
     /**
      * Text direction of the cue.
      * @type {shaka.text.Cue.direction}
-     * @exportDoc
+     * @export
      */
     this.direction = Cue.direction.HORIZONTAL_LEFT_TO_RIGHT;
 
     /**
      * Text writing mode of the cue.
      * @type {shaka.text.Cue.writingMode}
-     * @exportDoc
+     * @export
      */
     this.writingMode = Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM;
 
@@ -101,7 +101,7 @@ shaka.text.Cue = class {
      * The way to interpret line field. (Either as an integer line number or
      * percentage from the display box).
      * @type {shaka.text.Cue.lineInterpretation}
-     * @exportDoc
+     * @export
      */
     this.lineInterpretation = Cue.lineInterpretation.LINE_NUMBER;
 
@@ -109,7 +109,7 @@ shaka.text.Cue = class {
      * The offset from the display box in either number of lines or
      * percentage depending on the value of lineInterpretation.
      * @type {?number}
-     * @exportDoc
+     * @export
      */
     this.line = null;
 
@@ -118,7 +118,7 @@ shaka.text.Cue = class {
      * (e.g. '100px'/'100em'). If not specified, this should be no less than
      * the largest font size applied to the text in the cue.
      * @type {string}.
-     * @exportDoc
+     * @export
      */
     this.lineHeight = '';
 
@@ -132,7 +132,7 @@ shaka.text.Cue = class {
      * (for vertical growing right), or left side (for vertical growing left) is
      * aligned at the line.
      * @type {shaka.text.Cue.lineAlign}
-     * @exportDoc
+     * @export
      */
     this.lineAlign = Cue.lineAlign.START;
 
@@ -141,127 +141,134 @@ shaka.text.Cue = class {
      * 'BEFORE' means displaying the captions at the top of the text display
      * container box, 'CENTER' means in the middle, 'AFTER' means at the bottom.
      * @type {shaka.text.Cue.displayAlign}
-     * @exportDoc
+     * @export
      */
     this.displayAlign = Cue.displayAlign.AFTER;
 
     /**
      * Text color as a CSS color, e.g. "#FFFFFF" or "white".
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.color = '';
 
     /**
      * Text background color as a CSS color, e.g. "#FFFFFF" or "white".
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.backgroundColor = '';
 
     /**
      * The URL of the background image, e.g. "data:[mime type];base64,[data]".
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.backgroundImage = '';
 
     /**
      * The border around this cue as a CSS border.
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.border = '';
 
     /**
      * Text font size in px or em (e.g. '100px'/'100em').
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.fontSize = '';
 
     /**
      * Text font weight. Either normal or bold.
      * @type {shaka.text.Cue.fontWeight}
-     * @exportDoc
+     * @export
      */
     this.fontWeight = Cue.fontWeight.NORMAL;
 
     /**
      * Text font style. Normal, italic or oblique.
      * @type {shaka.text.Cue.fontStyle}
-     * @exportDoc
+     * @export
      */
     this.fontStyle = Cue.fontStyle.NORMAL;
 
     /**
      * Text font family.
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.fontFamily = '';
 
     /**
      * Text letter spacing as a CSS letter-spacing value.
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.letterSpacing = '';
 
     /**
      * Text line padding as a CSS line-padding value.
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.linePadding = '';
 
     /**
      * Opacity of the cue element, from 0-1.
      * @type {number}
-     * @exportDoc
+     * @export
      */
     this.opacity = 1;
 
+    /**
+     * Text combine upright as a CSS text-combine-upright value.
+     * @type {string}
+     * @export
+     */
+    this.textCombineUpright = '';
+
     /**
      * Text decoration. A combination of underline, overline
      * and line through. Empty array means no decoration.
      * @type {!Array.<!shaka.text.Cue.textDecoration>}
-     * @exportDoc
+     * @export
      */
     this.textDecoration = [];
 
     /**
      * Text shadow color as a CSS text-shadow value.
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.textShadow = '';
 
     /**
      * Text stroke color as a CSS color, e.g. "#FFFFFF" or "white".
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.textStrokeColor = '';
 
     /**
      * Text stroke width as a CSS stroke-width value.
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.textStrokeWidth = '';
 
     /**
      * Whether or not line wrapping should be applied to the cue.
      * @type {boolean}
-     * @exportDoc
+     * @export
      */
     this.wrapLine = true;
 
     /**
      * Id of the cue.
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.id = '';
 
@@ -270,7 +277,7 @@ shaka.text.Cue = class {
      * Top-level cues are blocks, and nested cues are inline elements.
      * Cues can be nested arbitrarily deeply.
      * @type {!Array.<!shaka.text.Cue>}
-     * @exportDoc
+     * @export
      */
     this.nestedCues = [];
 
@@ -280,7 +287,7 @@ shaka.text.Cue = class {
      * in a TTML file. This controls the flow of the final cues; any nested cues
      * within an "isContainer" cue will be laid out as separate lines.
      * @type {boolean}
-     * @exportDoc
+     * @export
      */
     this.isContainer = false;
 
@@ -288,16 +295,24 @@ shaka.text.Cue = class {
      * Whether or not the cue only acts as a line break between two nested cues.
      * Should only appear in nested cues.
      * @type {boolean}
-     * @exportDoc
+     * @export
      */
     this.lineBreak = false;
 
+    /**
+     * Used to indicate the type of ruby tag that should be used when rendering
+     * the cue. Valid values: ruby, rp, rt.
+     * @type {?string}
+     * @export
+     */
+    this.rubyTag = null;
+
     /**
      * The number of horizontal and vertical cells into which the Root Container
      * Region area is divided.
      *
      * @type {{ columns: number, rows: number }}
-     * @exportDoc
+     * @export
      */
     this.cellResolution = {
       columns: 32,
@@ -551,7 +566,7 @@ shaka.text.CueRegion = class {
     /**
      * Region identifier.
      * @type {string}
-     * @exportDoc
+     * @export
      */
     this.id = '';
 
@@ -559,7 +574,7 @@ shaka.text.CueRegion = class {
      * The X offset to start the rendering area in viewportAnchorUnits of the
      * video width.
      * @type {number}
-     * @exportDoc
+     * @export
      */
     this.viewportAnchorX = 0;
 
@@ -567,7 +582,7 @@ shaka.text.CueRegion = class {
      * The X offset to start the rendering area in viewportAnchorUnits of the
      * video height.
      * @type {number}
-     * @exportDoc
+     * @export
      */
     this.viewportAnchorY = 0;
 
@@ -575,7 +590,7 @@ shaka.text.CueRegion = class {
      * The X offset to start the rendering area in percentage (0-100) of this
      * region width.
      * @type {number}
-     * @exportDoc
+     * @export
      */
     this.regionAnchorX = 0;
 
@@ -583,42 +598,42 @@ shaka.text.CueRegion = class {
      * The Y offset to start the rendering area in percentage (0-100) of the
      * region height.
      * @type {number}
-     * @exportDoc
+     * @export
      */
     this.regionAnchorY = 0;
 
     /**
      * The width of the rendering area in widthUnits.
      * @type {number}
-     * @exportDoc
+     * @export
      */
     this.width = 100;
 
     /**
      * The width of the rendering area in heightUnits.
      * @type {number}
-     * @exportDoc
+     * @export
      */
     this.height = 100;
 
     /**
      * The units (percentage, pixels or lines) the region height is in.
      * @type {shaka.text.CueRegion.units}
-     * @exportDoc
+     * @export
      */
     this.heightUnits = CueRegion.units.PERCENTAGE;
 
     /**
      * The units (percentage or pixels) the region width is in.
      * @type {shaka.text.CueRegion.units}
-     * @exportDoc
+     * @export
      */
     this.widthUnits = CueRegion.units.PERCENTAGE;
 
     /**
      * The units (percentage or pixels) the region viewportAnchors are in.
      * @type {shaka.text.CueRegion.units}
-     * @exportDoc
+     * @export
      */
     this.viewportAnchorUnits = CueRegion.units.PERCENTAGE;
 
@@ -628,7 +643,7 @@ shaka.text.CueRegion = class {
      * region up.  Otherwise (scroll=NONE) cues will stay fixed at the location
      * they were first painted in.
      * @type {shaka.text.CueRegion.scrollMode}
-     * @exportDoc
+     * @export
      */
     this.scroll = CueRegion.scrollMode.NONE;
   }

package/lib/text/ttml_text_parser.js

@@ -724,6 +724,23 @@ shaka.text.TtmlTextParser = class {
     if (textDecorationElement) {
       TtmlTextParser.addTextDecoration_(cue, textDecorationElement);
     }
+
+    const textCombine = TtmlTextParser.getStyleAttribute_(
+        cueElement, region, styles, 'textCombine', shouldInheritRegionStyles);
+    if (textCombine) {
+      cue.textCombineUpright = textCombine;
+    }
+
+    const ruby = TtmlTextParser.getStyleAttribute_(
+        cueElement, region, styles, 'ruby', shouldInheritRegionStyles);
+    switch (ruby) {
+      case 'container':
+        cue.rubyTag = 'ruby';
+        break;
+      case 'text':
+        cue.rubyTag = 'rt';
+        break;
+    }
   }
 
   /**

package/lib/text/ui_text_displayer.js

@@ -452,6 +452,9 @@ shaka.text.UITextDisplayer = class {
     if (cue.lineBreak) {
       type = 'br';
     }
+    if (cue.rubyTag) {
+      type = cue.rubyTag;
+    }
 
     const needWrapper = !isNested && cue.nestedCues.length > 0;
 
@@ -561,6 +564,7 @@ shaka.text.UITextDisplayer = class {
     style.paddingRight =
         shaka.text.UITextDisplayer.convertLengthValue_(
             cue.linePadding, cue, this.videoContainer_);
+    style.textCombineUpright = cue.textCombineUpright;
     style.textShadow = cue.textShadow;
 
     if (cue.backgroundImage) {

package/lib/text/vtt_text_parser.js

@@ -333,6 +333,10 @@ shaka.text.VttTextParser = class {
               validStyle = true;
               cue.opacity = parseFloat(value);
               break;
+            case 'text-combine-upright':
+              validStyle = true;
+              cue.textCombineUpright = value;
+              break;
             case 'text-shadow':
               validStyle = true;
               cue.textShadow = value;
@@ -417,6 +421,8 @@ shaka.text.VttTextParser = class {
       cue = new shaka.text.Cue(start, end, '');
     }
 
+    VttTextParser.parseCueStyles(payload, cue, styles);
+
     // Parse optional settings.
     parser.skipWhitespace();
     let word = parser.readWord();
@@ -430,8 +436,6 @@ shaka.text.VttTextParser = class {
       word = parser.readWord();
     }
 
-    VttTextParser.parseCueStyles(payload, cue, styles);
-
     if (id != null) {
       cue.id = id;
     }
@@ -456,8 +460,6 @@ shaka.text.VttTextParser = class {
     const xmlPayload = '<span>' + payload + '</span>';
     const element = shaka.util.XmlUtils.parseXmlString(xmlPayload, 'span');
     if (element) {
-      /** @type {!Array.<!shaka.text.Cue>} */
-      const cues = [];
       const childNodes = element.childNodes;
       if (childNodes.length == 1) {
         const childNode = childNodes[0];
@@ -468,10 +470,8 @@ shaka.text.VttTextParser = class {
         }
       }
       for (const childNode of childNodes) {
-        VttTextParser.generateCueFromElement_(
-            childNode, rootCue, cues, styles);
+        VttTextParser.generateCueFromElement_(childNode, rootCue, styles);
       }
-      rootCue.nestedCues = cues;
     } else {
       shaka.log.warning('The cue\'s markup could not be parsed: ', payload);
       rootCue.payload = VttTextParser.htmlUnescape_(payload);
@@ -688,6 +688,8 @@ shaka.text.VttTextParser = class {
     cue.fontWeight = refCue.fontWeight;
     cue.fontStyle = refCue.fontStyle;
     cue.opacity = refCue.opacity;
+    cue.rubyTag = refCue.rubyTag;
+    cue.textCombineUpright = refCue.textCombineUpright;
     cue.textShadow = refCue.textShadow;
     cue.wrapLine = refCue.wrapLine;
   }
@@ -695,13 +697,16 @@ shaka.text.VttTextParser = class {
   /**
    * @param {!Node} element
    * @param {!shaka.text.Cue} rootCue
-   * @param {Array.<!shaka.text.Cue>} cues
    * @param {!Map.<string, shaka.text.Cue>} styles
    * @private
    */
-  static generateCueFromElement_(element, rootCue, cues, styles) {
+  static generateCueFromElement_(element, rootCue, styles) {
     const VttTextParser = shaka.text.VttTextParser;
     const nestedCue = rootCue.clone();
+    // We don't want propagate some properties.
+    nestedCue.nestedCues = [];
+    nestedCue.payload = '';
+    nestedCue.rubyTag = '';
     if (element.nodeType === Node.ELEMENT_NODE && element.nodeName) {
       const bold = shaka.text.Cue.fontWeight.BOLD;
       const italic = shaka.text.Cue.fontStyle.ITALIC;
@@ -724,10 +729,10 @@ shaka.text.VttTextParser = class {
         }
         switch (tag) {
           case 'br': {
-            const lineBreakCue = rootCue.clone();
-            lineBreakCue.lineBreak = true;
-            cues.push(lineBreakCue);
-            break;
+            const lineBreakCue = shaka.text.Cue.lineBreak(
+                nestedCue.startTime, nestedCue.endTime);
+            rootCue.nestedCues.push(lineBreakCue);
+            return;
           }
           case 'b':
             nestedCue.fontWeight = bold;
@@ -758,34 +763,42 @@ shaka.text.VttTextParser = class {
             }
             break;
           }
+          case 'ruby':
+          case 'rp':
+          case 'rt':
+            nestedCue.rubyTag = tag;
+            break;
           default:
             break;
         }
       }
     }
-    const isTextNode = shaka.util.XmlUtils.isText(element);
-    if (isTextNode) {
+
+    const isTextNode = (item) => shaka.util.XmlUtils.isText(item);
+    const childNodes = element.childNodes;
+    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 = element.textContent.split('\n');
       let isFirst = true;
       for (const text of textArr) {
         if (!isFirst) {
-          const lineBreakCue = rootCue.clone();
-          lineBreakCue.lineBreak = true;
-          cues.push(lineBreakCue);
+          const lineBreakCue = shaka.text.Cue.lineBreak(
+              nestedCue.startTime, nestedCue.endTime);
+          rootCue.nestedCues.push(lineBreakCue);
         }
         if (text.length > 0) {
           const textCue = nestedCue.clone();
           textCue.payload = VttTextParser.htmlUnescape_(text);
-          cues.push(textCue);
+          rootCue.nestedCues.push(textCue);
         }
         isFirst = false;
       }
     } else {
-      for (const childNode of element.childNodes) {
-        VttTextParser.generateCueFromElement_(
-            childNode, nestedCue, cues, styles);
+      rootCue.nestedCues.push(nestedCue);
+      for (const childNode of childNodes) {
+        VttTextParser.generateCueFromElement_(childNode, nestedCue, styles);
       }
     }
   }