shaka-player 3.1.3 → 3.2.2

package/lib/polyfill/aria.js

@@ -0,0 +1,82 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.provide('shaka.polyfill.Aria');
+
+goog.require('shaka.log');
+goog.require('shaka.polyfill');
+
+/**
+ * @summary A polyfill to add support for the ARIAMixin interface mixin, for
+ * browsers that do not implement it (e.g. Firefox).
+ * Note that IE also does not support ARIAMixin, but this polyfill does not work
+ * for that platform, as it relies on getters and setters.
+ * @see https://w3c.github.io/aria/#ARIAMixin
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element
+ * @export
+ */
+shaka.polyfill.Aria = class {
+  /**
+   * Install the polyfill if needed.
+   * @export
+   */
+  static install() {
+    // eslint-disable-next-line no-restricted-syntax
+    if (Object.getOwnPropertyDescriptor(Element.prototype, 'ariaHidden')) {
+      shaka.log.info('Using native ARIAMixin interface.');
+      return;
+    }
+    shaka.log.info('ARIAMixin interface not detected. Installing polyfill.');
+
+    // Define a list of all of the ARIAMixin properties that we have externs
+    // for.
+    const attributes = [
+      'ariaHidden',
+      'ariaLabel',
+      'ariaPressed',
+      'ariaSelected',
+    ];
+
+    // Add each attribute, one by one.
+    for (const attribute of attributes) {
+      shaka.polyfill.Aria.addARIAMixinAttribute_(attribute);
+    }
+  }
+
+  /**
+   * Adds an attribute with the given name.
+   * @param {string} name The name of the attribute, in camelCase.
+   * @private
+   */
+  static addARIAMixinAttribute_(name) {
+    const baseName = name.toLowerCase().replace(/^aria/, '');
+    // NOTE: All the attributes listed in the method above begin with "aria".
+    // However, to add extra protection against the possibility of XSS attacks
+    // through this method, this enforces "aria-" at the beginning of the
+    // snake-case name, even if somehow "aria" were missing from the input.
+    const snakeCaseName = `aria-${baseName}`;
+
+    /* eslint-disable no-restricted-syntax */
+    Object.defineProperty(Element.prototype, name, {
+      get() {
+        const element = /** @type {!Element} */ (this);
+        return element.getAttribute(snakeCaseName);
+      },
+      set(value) {
+        const element = /** @type {!Element} */ (this);
+        if (value == null || value == undefined) {
+          element.removeAttribute(snakeCaseName);
+        } else {
+          element.setAttribute(snakeCaseName, value);
+        }
+      },
+    });
+    /* eslint-enable no-restricted-syntax */
+  }
+};
+
+
+shaka.polyfill.register(shaka.polyfill.Aria.install);

package/lib/polyfill/media_capabilities.js

@@ -34,8 +34,14 @@ shaka.polyfill.MediaCapabilities = class {
     // See: https://github.com/google/shaka-player/issues/3530
     // TODO: re-evaluate MediaCapabilities in the future versions of Apple
     // Browsers.
+    // Since MediaCapabilities implementation is buggy in PS5 browsers, we
+    // should always install polyfill for PS5 browsers.
+    // See: https://github.com/google/shaka-player/issues/3582
+    // TODO: re-evaluate MediaCapabilities in the future versions of PS5
+    // Browsers.
     if (!shaka.util.Platform.isChromecast() &&
       !shaka.util.Platform.isApple() &&
+      !shaka.util.Platform.isPS5() &&
       navigator.mediaCapabilities) {
       shaka.log.debug(
           'MediaCapabilities: Native mediaCapabilities support found.');
@@ -149,7 +155,7 @@ shaka.polyfill.MediaCapabilities = class {
         sessionTypes: mediaCapkeySystemConfig.sessionTypes,
       };
 
-      // Only add the audio video capablities if they have valid data.
+      // Only add the audio video capabilities if they have valid data.
       // Otherwise the query will fail.
       if (audioCapabilities.length) {
         mediaKeySystemConfig.audioCapabilities = audioCapabilities;

package/lib/polyfill/mediasource.js

@@ -208,6 +208,12 @@ shaka.polyfill.MediaSource = class {
   static patchVp09_() {
     const originalIsTypeSupported = MediaSource.isTypeSupported;
 
+    if (shaka.util.Platform.isWebOS()) {
+      // Don't do this on LG webOS as otherwise it is unable
+      // to play vp09 at all.
+      return;
+    }
+
     MediaSource.isTypeSupported = (mimeType) => {
       // Split the MIME type into its various parameters.
       const pieces = mimeType.split(/ *; */);

package/lib/polyfill/orientation.js

@@ -92,7 +92,7 @@ class extends shaka.util.FakeEventTarget {
 
   /** Dispatch a 'change' event. */
   dispatchChangeEvent() {
-    const event = new shaka.util.FakeEvent('change', {});
+    const event = new shaka.util.FakeEvent('change');
     this.dispatchEvent(event);
   }
 

package/lib/polyfill/patchedmediakeys_apple.js

@@ -567,10 +567,10 @@ class extends shaka.util.FakeEventTarget {
 
     const isNew = this.keyStatuses.getStatus() == undefined;
 
-    const event2 = new shaka.util.FakeEvent('message', {
-      messageType: isNew ? 'license-request' : 'license-renewal',
-      message: shaka.util.BufferUtils.toArrayBuffer(event.message),
-    });
+    const data = new Map()
+        .set('messageType', isNew ? 'license-request' : 'license-renewal')
+        .set('message', shaka.util.BufferUtils.toArrayBuffer(event.message));
+    const event2 = new shaka.util.FakeEvent('message', data);
 
     this.dispatchEvent(event2);
   }

package/lib/polyfill/patchedmediakeys_ms.js

@@ -512,10 +512,10 @@ class extends shaka.util.FakeEventTarget {
 
     const isNew = this.keyStatuses.getStatus() == undefined;
 
-    const event2 = new shaka.util.FakeEvent('message', {
-      messageType: isNew ? 'license-request' : 'license-renewal',
-      message: shaka.util.BufferUtils.toArrayBuffer(event.message),
-    });
+    const data = new Map()
+        .set('messageType', isNew ? 'license-request' : 'license-renewal')
+        .set('message', shaka.util.BufferUtils.toArrayBuffer(event.message));
+    const event2 = new shaka.util.FakeEvent('message', data);
 
     this.dispatchEvent(event2);
   }

package/lib/polyfill/patchedmediakeys_webkit.js

@@ -451,10 +451,10 @@ shaka.polyfill.PatchedMediaKeysWebkit.MediaKeys = class {
 
     const isNew = session.keyStatuses.getStatus() == undefined;
 
-    const event2 = new shaka.util.FakeEvent('message', {
-      messageType: isNew ? 'licenserequest' : 'licenserenewal',
-      message: event.message,
-    });
+    const data = new Map()
+        .set('messageType', isNew ? 'licenserequest' : 'licenserenewal')
+        .set('message', event.message);
+    const event2 = new shaka.util.FakeEvent('message', data);
 
     session.generated();
     session.dispatchEvent(event2);

package/lib/routing/walker.js

@@ -5,7 +5,6 @@
  */
 
 goog.provide('shaka.routing.Walker');
-goog.provide('shaka.routing.Walker.Implementation');
 
 goog.require('goog.asserts');
 goog.require('shaka.routing.Node');
@@ -81,7 +80,7 @@ shaka.routing.Walker = class {
      * new work is added (and this is not null) it can be resolved. The only
      * time when this should be non-null is when we are waiting for more work.
      *
-     * @private {shaka.util.PublicPromise}
+     * @private {?shaka.util.PublicPromise}
      */
     this.waitForWork_ = null;
 
@@ -91,7 +90,7 @@ shaka.routing.Walker = class {
     /** @private {?shaka.routing.Walker.ActiveRoute_} */
     this.currentRoute_ = null;
 
-    /** @private {shaka.util.AbortableOperation} */
+    /** @private {?shaka.util.AbortableOperation} */
     this.currentStep_ = null;
 
     /**

package/lib/text/mp4_ttml_parser.js

@@ -88,6 +88,9 @@ shaka.text.Mp4TtmlParser = class {
 
 shaka.text.TextEngine.registerParser(
     'application/mp4; codecs="stpp"', () => new shaka.text.Mp4TtmlParser());
+shaka.text.TextEngine.registerParser(
+    'application/mp4; codecs="stpp.ttml"',
+    () => new shaka.text.Mp4TtmlParser());
 shaka.text.TextEngine.registerParser(
     'application/mp4; codecs="stpp.ttml.im1t"',
     () => new shaka.text.Mp4TtmlParser());

package/lib/text/srt_text_parser.js

@@ -57,8 +57,8 @@ shaka.text.SrtTextParser = class {
   /**
    * Convert a SRT format to WebVTT
    *
-   * @param {!string} data
-   * @return {!string}
+   * @param {string} data
+   * @return {string}
    * @export
    */
   static srt2webvtt(data) {
@@ -87,8 +87,8 @@ shaka.text.SrtTextParser = class {
   /**
    * Convert a SRT cue into WebVTT cue
    *
-   * @param {!string} caption
-   * @return {!string}
+   * @param {string} caption
+   * @return {string}
    * @private
    */
   static convertSrtCue_(caption) {

package/lib/text/text_engine.js

@@ -12,7 +12,7 @@ goog.require('shaka.util.BufferUtils');
 goog.require('shaka.util.Functional');
 goog.require('shaka.util.IDestroyable');
 goog.require('shaka.util.MimeUtils');
-goog.requireType('shaka.cea.ICaptionDecoder.ClosedCaption');
+goog.requireType('shaka.cea.ICaptionDecoder');
 
 
 // TODO: revisit this when Closure Compiler supports partially-exported classes.
@@ -24,7 +24,7 @@ goog.requireType('shaka.cea.ICaptionDecoder.ClosedCaption');
 shaka.text.TextEngine = class {
   /** @param {shaka.extern.TextDisplayer} displayer */
   constructor(displayer) {
-    /** @private {shaka.extern.TextParser} */
+    /** @private {?shaka.extern.TextParser} */
     this.parser_ = null;
 
     /** @private {shaka.extern.TextDisplayer} */
@@ -345,6 +345,19 @@ shaka.text.TextEngine = class {
     return cues;
   }
 
+  /**
+   * @param {!shaka.text.Cue} cue the cue to apply the timestamp to recursively
+   * @param {number} videoTimestampOffset the timestamp offset of the video
+   * @private
+   */
+  applyVideoTimestampOffsetRecursive_(cue, videoTimestampOffset) {
+    cue.startTime += videoTimestampOffset;
+    cue.endTime += videoTimestampOffset;
+    for (const nested of cue.nestedCues) {
+      this.applyVideoTimestampOffsetRecursive_(nested, videoTimestampOffset);
+    }
+  }
+
   /**
    * Store the closed captions in the text engine, and append the cues to the
    * text displayer.  This is a side-channel used for embedded text only.
@@ -373,8 +386,7 @@ shaka.text.TextEngine = class {
 
       // Adjust CEA captions with respect to the timestamp offset of the video
       // stream in which they were embedded.
-      cue.startTime += videoTimestampOffset;
-      cue.endTime += videoTimestampOffset;
+      this.applyVideoTimestampOffsetRecursive_(cue, videoTimestampOffset);
 
       const keepThisCue =
           cue.startTime >= this.appendWindowStart_ &&

package/lib/text/ttml_text_parser.js

@@ -199,6 +199,11 @@ shaka.text.TtmlTextParser = class {
     /** @type {Element} */
     let parentElement = /** @type {Element} */(cueNode.parentNode);
 
+    if (cueNode.nodeType == Node.COMMENT_NODE) {
+      // The comments do not contain information that interests us here.
+      return null;
+    }
+
     if (cueNode.nodeType == Node.TEXT_NODE) {
       // This should generate an "anonymous span" according to the TTML spec.
       // So pretend the element was a <span>.  parentElement was set above, so

package/lib/text/ui_text_displayer.js

@@ -167,9 +167,14 @@ shaka.text.UITextDisplayer = class {
     }
 
     // Remove the cues out of the time range.
+    const oldNumCues = this.cues_.length;
     this.cues_ = this.cues_.filter(
         (cue) => cue.startTime < start || cue.endTime >= end);
-    this.updateCaptions_();
+    // If anything was actually removed in this process, force the captions to
+    // update. This makes sure that the currently-displayed cues will stop
+    // displaying if removed (say, due to the user changing languages).
+    const forceUpdate = oldNumCues > this.cues_.length;
+    this.updateCaptions_(forceUpdate);
 
     return true;
   }
@@ -192,13 +197,13 @@ shaka.text.UITextDisplayer = class {
   }
 
   /**
-   * @param {!Array.<!shaka.text.Cue>} cues
+   * @param {!Array.<!shaka.extern.Cue>} cues
    * @param {!HTMLElement} container
    * @param {number} currentTime
-   * @param {boolean} isNested
+   * @param {!Array.<!shaka.extern.Cue>} parents
    * @private
    */
-  updateCuesRecursive_(cues, container, currentTime, isNested) {
+  updateCuesRecursive_(cues, container, currentTime, parents) {
     // Set to true if the cues have changed in some way, which will require
     // DOM changes. E.g. if a cue was added or removed.
     let updateDOM = false;
@@ -214,10 +219,12 @@ shaka.text.UITextDisplayer = class {
      * The cues whose corresponding elements should be in the DOM.
      * Some of these might be new, some might have been displayed beforehand.
      * These will only be added if updateDOM is true.
-     * @type {!Array.<!shaka.text.Cue>}
+     * @type {!Array.<!shaka.extern.Cue>}
      */
     const toPlant = [];
     for (const cue of cues) {
+      parents.push(cue);
+
       let cueRegistry = this.currentCuesMap_.get(cue);
       const shouldBeDisplayed =
           cue.startTime <= currentTime && cue.endTime > currentTime;
@@ -241,7 +248,7 @@ shaka.text.UITextDisplayer = class {
         toPlant.push(cue);
         if (!cueRegistry) {
           // The cue has to be made!
-          this.createCue_(cue, isNested);
+          this.createCue_(cue, parents);
           cueRegistry = this.currentCuesMap_.get(cue);
           wrapper = cueRegistry.wrapper;
           updateDOM = true;
@@ -255,8 +262,11 @@ shaka.text.UITextDisplayer = class {
       // guaranteed that the children will neither need to be added nor removed.
       if (cue.nestedCues.length > 0 && wrapper) {
         this.updateCuesRecursive_(
-            cue.nestedCues, wrapper, currentTime, /* isNested= */ true);
+            cue.nestedCues, wrapper, currentTime, parents);
       }
+
+      const topCue = parents.pop();
+      goog.asserts.assert(topCue == cue, 'Parent cues should be kept in order');
     }
     if (updateDOM) {
       for (const cueElement of toUproot) {
@@ -304,7 +314,7 @@ shaka.text.UITextDisplayer = class {
 
       // Update the cues.
       this.updateCuesRecursive_(
-          this.cues_, this.textContainer_, currentTime, false);
+          this.cues_, this.textContainer_, currentTime, /* parents= */ []);
 
       if (goog.DEBUG) {
         // Previously, we had an issue (#2076) where cues sometimes were not
@@ -327,10 +337,11 @@ shaka.text.UITextDisplayer = class {
    * Creates the object for a cue.
    *
    * @param {!shaka.extern.Cue} cue
-   * @param {boolean} isNested
+   * @param {!Array.<!shaka.extern.Cue>} parents
    * @private
    */
-  createCue_(cue, isNested) {
+  createCue_(cue, parents) {
+    const isNested = parents.length > 1;
     let type = isNested ? 'span' : 'div';
     if (cue.lineBreak || cue.spacer) {
       if (cue.spacer) {
@@ -344,7 +355,7 @@ shaka.text.UITextDisplayer = class {
     // Nested cues are inline elements.  Top-level cues are block elements.
     const cueElement = shaka.util.Dom.createHTMLElement(type);
     if (type != 'br') {
-      this.setCaptionStyles_(cueElement, cue, isNested);
+      this.setCaptionStyles_(cueElement, cue, parents);
     }
 
     let wrapper = cueElement;
@@ -363,13 +374,16 @@ shaka.text.UITextDisplayer = class {
   /**
    * @param {!HTMLElement} cueElement
    * @param {!shaka.extern.Cue} cue
-   * @param {boolean} isNested
+   * @param {!Array.<!shaka.extern.Cue>} parents
    * @private
    */
-  setCaptionStyles_(cueElement, cue, isNested) {
+  setCaptionStyles_(cueElement, cue, parents) {
     const Cue = shaka.text.Cue;
-    let style = cueElement.style;
+    const inherit =
+        (cb) => shaka.text.UITextDisplayer.inheritProperty_(parents, cb);
+    const style = cueElement.style;
     const isLeaf = cue.nestedCues.length == 0;
+    const isNested = parents.length > 1;
 
     // TODO: wrapLine is not yet supported.  Lines always wrap.
 
@@ -388,16 +402,6 @@ shaka.text.UITextDisplayer = class {
       const nonBreakingSpace = '\xa0';
       return nonBreakingSpace.repeat(match.length);
     });
-    if (isNested) {
-      cueElement.textContent = text;
-    } else if (text.length) {
-      // If a top-level cue has text, move to a <span> so the background is
-      // styled correctly.
-      const span = shaka.util.Dom.createHTMLElement('span');
-      span.textContent = text;
-      cueElement.appendChild(span);
-      style = span.style;
-    }
 
     style.backgroundColor = cue.backgroundColor;
     style.border = cue.border;
@@ -406,20 +410,40 @@ shaka.text.UITextDisplayer = class {
     style.opacity = cue.opacity;
     style.paddingLeft = shaka.text.UITextDisplayer.convertLengthValue_(
         cue.linePadding, cue, this.videoContainer_);
-    style.paddingRight = shaka.text.UITextDisplayer.convertLengthValue_(
-        cue.linePadding, cue, this.videoContainer_);
+    style.paddingRight =
+        shaka.text.UITextDisplayer.convertLengthValue_(
+            cue.linePadding, cue, this.videoContainer_);
 
     if (cue.backgroundImage) {
       style.backgroundImage = 'url(\'' + cue.backgroundImage + '\')';
       style.backgroundRepeat = 'no-repeat';
       style.backgroundSize = 'contain';
       style.backgroundPosition = 'center';
+    } else {
+      // If we have both text and nested cues, then style everything; otherwise
+      // place the text in its own <span> so the background doesn't fill the
+      // whole region.
+      let elem;
+      if (cue.nestedCues.length) {
+        elem = cueElement;
+      } else {
+        elem = shaka.util.Dom.createHTMLElement('span');
+        cueElement.appendChild(elem);
+      }
 
-      if (cue.backgroundColor == '') {
-        // In text-based cues, background color can default in CSS.
-        // In bitmap-based cues, we default to a transparent background color,
-        // so that the bitmap can be the only background.
-        style.backgroundColor = 'transparent';
+      if (cue.border) {
+        elem.style.border = cue.border;
+      }
+      const bgColor = inherit((c) => c.backgroundColor);
+      if (bgColor) {
+        elem.style.backgroundColor = bgColor;
+      } else if (text) {
+        // If there is no background, default to a semi-transparent black.
+        // Only do this for the text itself.
+        elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+      }
+      if (text) {
+        elem.textContent = text;
       }
     }
 
@@ -472,20 +496,28 @@ shaka.text.UITextDisplayer = class {
     // TODO: Implement lineAlignment of 'CENTER'.
     if (cue.line) {
       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) {
             style.top = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
             style.bottom = cue.line + '%';
           }
         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
+          style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
             style.left = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
             style.right = cue.line + '%';
           }
         } else {
+          style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
             style.right = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
@@ -493,12 +525,7 @@ shaka.text.UITextDisplayer = class {
           }
         }
       }
-    } else if (cue.region && cue.region.id &&
-      ((!isNested && !isLeaf) || (cue.backgroundImage))) {
-      // In text-base cues, regions are only applied to block container
-      // (!isNested && !isLeaf).
-      // In bitmap-based cues, region settings are used to specify the size and
-      // position of the backgroundImage.
+    } else if (cue.region && cue.region.id) {
       const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
       const heightUnit = cue.region.heightUnits == percentageUnit ? '%' : 'px';
       const widthUnit = cue.region.widthUnits == percentageUnit ? '%' : 'px';
@@ -631,4 +658,25 @@ shaka.text.UITextDisplayer = class {
 
     return (containerHeight * value / cue.cellResolution.rows) + 'px';
   }
+
+  /**
+   * Inherits a property from the parent Cue elements.  If the value is falsy,
+   * it is assumed to be inherited from the parent. This returns null if the
+   * value isn't found.
+   *
+   * @param {!Array.<!shaka.extern.Cue>} parents
+   * @param {function(!shaka.extern.Cue):?T} cb
+   * @return {?T}
+   * @template T
+   * @private
+   */
+  static inheritProperty_(parents, cb) {
+    for (let i = parents.length - 1; i >= 0; i--) {
+      const val = cb(parents[i]);
+      if (val || val === 0) {
+        return val;
+      }
+    }
+    return null;
+  }
 };

package/lib/text/vtt_text_parser.js

@@ -464,8 +464,8 @@ shaka.text.VttTextParser = class {
   }
 
   /**
-   * @param {!string} value
-   * @param {!string} defaultValue
+   * @param {string} value
+   * @param {string} defaultValue
    * @private
    */
   static getOrDefault_(value, defaultValue) {

package/lib/text/web_vtt_generator.js

@@ -17,9 +17,10 @@ goog.require('shaka.text.Cue');
 shaka.text.WebVttGenerator = class {
   /**
    * @param {!Array.<!shaka.text.Cue>} cues
+   * @param {!Array.<!shaka.extern.AdCuePoint>} adCuePoints
    * @return {string}
    */
-  static convert(cues) {
+  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) => {
@@ -64,6 +65,25 @@ shaka.text.WebVttGenerator = class {
       }
     };
 
+    const webvttTimeString = (time) => {
+      let newTime = time;
+      for (const adCuePoint of adCuePoints) {
+        if (adCuePoint.end && adCuePoint.start < time) {
+          const offset = adCuePoint.end - adCuePoint.start;
+          newTime += offset;
+        }
+      }
+      const hours = Math.floor(newTime / 3600);
+      const minutes = Math.floor(newTime / 60 % 60);
+      const seconds = Math.floor(newTime % 60);
+      const milliseconds = Math.floor(newTime * 1000 % 1000);
+      return (hours < 10 ? '0' : '') + hours + ':' +
+          (minutes < 10 ? '0' : '') + minutes + ':' +
+          (seconds < 10 ? '0' : '') + seconds + '.' +
+          (milliseconds < 100 ? (milliseconds < 10 ? '00' : '0') : '') +
+          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.
@@ -80,19 +100,42 @@ shaka.text.WebVttGenerator = class {
 
     let webvttString = 'WEBVTT\n\n';
     for (const cue of flattenedCues) {
-      const webvttTimeString = (time) => {
-        const hours = Math.floor(time / 3600);
-        const minutes = Math.floor(time / 60 % 60);
-        const seconds = Math.floor(time % 60);
-        const milliseconds = Math.floor(time * 1000 % 1000);
-        return (hours < 10 ? '0' : '') + hours + ':' +
-            (minutes < 10 ? '0' : '') + minutes + ':' +
-            (seconds < 10 ? '0' : '') + seconds + '.' +
-            (milliseconds < 100 ? (milliseconds < 10 ? '00' : '0') : '') +
-            milliseconds;
+      const webvttSettings = (cue) => {
+        const settings = [];
+        const Cue = shaka.text.Cue;
+        switch (cue.textAlign) {
+          case Cue.textAlign.LEFT:
+            settings.push('align:left');
+            break;
+          case Cue.textAlign.RIGHT:
+            settings.push('align:right');
+            break;
+          case Cue.textAlign.CENTER:
+            settings.push('align:middle');
+            break;
+          case Cue.textAlign.START:
+            settings.push('align:start');
+            break;
+          case Cue.textAlign.END:
+            settings.push('align:end');
+            break;
+        }
+        switch (cue.writingMode) {
+          case Cue.writingMode.VERTICAL_LEFT_TO_RIGHT:
+            settings.push('vertical:lr');
+            break;
+          case Cue.writingMode.VERTICAL_RIGHT_TO_LEFT:
+            settings.push('vertical:rl');
+            break;
+        }
+
+        if (settings.length) {
+          return ' ' + settings.join(' ');
+        }
+        return '';
       };
       webvttString += webvttTimeString(cue.startTime) + ' --> ' +
-          webvttTimeString(cue.endTime) + '\n';
+          webvttTimeString(cue.endTime) + webvttSettings(cue) + '\n';
       webvttString += cue.payload + '\n\n';
     }
     return webvttString;

package/lib/util/error.js

@@ -814,6 +814,12 @@ shaka.util.Error.Code = {
    */
   'INIT_DATA_TRANSFORM_ERROR': 6016,
 
+  /**
+   * The server certificate request failed.
+   * <br> error.data[0] is a shaka.util.Error from the networking engine.
+   */
+  'SERVER_CERTIFICATE_REQUEST_FAILED': 6017,
+
 
   /**
    * The call to Player.load() was interrupted by a call to Player.unload()