shaka-player 3.3.12 → 3.3.14

package/docs/tutorials/welcome.md

@@ -29,8 +29,8 @@ You can build Shaka on Linux, Windows, or Mac.
 To get the sources and compile the library, you will need:
   * {@link https://git-scm.com/downloads Git v1.9+}
   * {@link https://www.python.org/downloads/ Python v2.7 or v3.5+}
-  * {@link https://java.com/en/download/ Java Runtime Environment v8+}
-  * {@link https://nodejs.org/en/download/ NodeJS v10+}
+  * {@link https://java.com/en/download/ Java Runtime Environment v14+}
+  * {@link https://nodejs.org/en/download/ NodeJS v14+}
   * A local web server, such as {@link https://httpd.apache.org/ Apache}
     * _NOTE: A local web server is required because browsers place restrictions
       on applications from file:/// URLs._

package/externs/shaka/player.js

@@ -123,7 +123,8 @@ shaka.extern.StateChange;
  * @property {number} manifestTimeSeconds
  *   The amount of time it took to download and parse the manifest.
  * @property {number} drmTimeSeconds
- *   The amount of time it took to download the first drm key.
+ *   The amount of time it took to download the first drm key, and load that key
+ *   into the drm system.
  * @property {number} playTime
  *   The total time spent in a playing state in seconds.
  * @property {number} pauseTime

package/lib/cast/cast_proxy.js

@@ -694,7 +694,8 @@ shaka.cast.CastProxy = class extends shaka.util.FakeEventTarget {
     // If we are casting, but the first update has not come in yet, use local
     // getters, but not local methods.
     if (this.sender_.isCasting() && !this.sender_.hasRemoteProperties()) {
-      if (shaka.cast.CastUtils.PlayerGetterMethods[name]) {
+      if (shaka.cast.CastUtils.PlayerGetterMethods[name] ||
+          shaka.cast.CastUtils.LargePlayerGetterMethods[name]) {
         const value = /** @type {Object} */(this.localPlayer_)[name];
         goog.asserts.assert(typeof value == 'function',
             'only methods on Player');

package/lib/cast/cast_receiver.js

@@ -518,6 +518,25 @@ shaka.cast.CastReceiver = class extends shaka.util.FakeEventTarget {
       update['video']['muted'] = systemVolume.muted;
     }
 
+    this.sendMessage_({
+      'type': 'update',
+      'update': update,
+    }, this.shakaBus_);
+
+    // Getters with large outputs each get sent in their own update message.
+    for (const name in shaka.cast.CastUtils.LargePlayerGetterMethods) {
+      const frequency = shaka.cast.CastUtils.LargePlayerGetterMethods[name];
+      if (this.updateNumber_ % frequency == 0) {
+        const update = {'player': {}};
+        update['player'][name] = /** @type {Object} */ (this.player_)[name]();
+
+        this.sendMessage_({
+          'type': 'update',
+          'update': update,
+        }, this.shakaBus_);
+      }
+    }
+
     // Only start progressing the update number once data is loaded,
     // just in case any of the "rarely changing" properties with less frequent
     // update messages changes significantly during the loading process.
@@ -525,11 +544,6 @@ shaka.cast.CastReceiver = class extends shaka.util.FakeEventTarget {
       this.updateNumber_ += 1;
     }
 
-    this.sendMessage_({
-      'type': 'update',
-      'update': update,
-    }, this.shakaBus_);
-
     this.maybeSendMediaInfoMessage_();
   }
 

package/lib/cast/cast_sender.js

@@ -360,7 +360,8 @@ shaka.cast.CastSender = class {
         return (...args) =>
           this.remoteAsyncCall_(targetName, property, ...args);
       }
-      if (CastUtils.PlayerGetterMethods[property]) {
+      if (CastUtils.PlayerGetterMethods[property] ||
+          CastUtils.LargePlayerGetterMethods[property]) {
         return () => this.propertyGetter_(targetName, property);
       }
     }

package/lib/cast/cast_utils.js

@@ -307,9 +307,6 @@ shaka.cast.CastUtils.PlayerGetterMethods = {
   'getAudioLanguagesAndRoles': 4,
   'getBufferFullness': 1,
   'getBufferedInfo': 2,
-  // NOTE: The 'getSharedConfiguration' property is not proxied as it would
-  //       not be possible to share a reference.
-  'getConfiguration': 4,
   'getExpiration': 2,
   'getKeyStatuses': 2,
   // NOTE: The 'getManifest' property is not proxied, as it is very large.
@@ -318,9 +315,6 @@ shaka.cast.CastUtils.PlayerGetterMethods = {
   'getPlaybackRate': 2,
   'getTextLanguages': 4,
   'getTextLanguagesAndRoles': 4,
-  'getTextTracks': 2,
-  'getStats': 5,
-  'getVariantTracks': 2,
   'getImageTracks': 2,
   'getThumbnails': 2,
   'isAudioOnly': 10,
@@ -334,6 +328,22 @@ shaka.cast.CastUtils.PlayerGetterMethods = {
 };
 
 
+/**
+ * Player getter methods with data large enough to be sent in their own update
+ * messages, to reduce the size of each message.  The format of this is
+ * identical to PlayerGetterMethods.
+ * @const {!Object.<string, number>}
+ */
+shaka.cast.CastUtils.LargePlayerGetterMethods = {
+  // NOTE: The 'getSharedConfiguration' property is not proxied as it would
+  //       not be possible to share a reference.
+  'getConfiguration': 4,
+  'getStats': 5,
+  'getTextTracks': 2,
+  'getVariantTracks': 2,
+};
+
+
 /**
  * Player getter methods that are proxied while casting, but only when casting
  * a livestream.

package/lib/cea/cea708_window.js

@@ -420,7 +420,7 @@ shaka.cea.Cea708Window.TextJustification = {
 shaka.cea.Cea708Window.MAX_COLS = 42;
 
 /**
- * Maximum of 15 rows that can be indexed from 0 to 14.
+ * Maximum of 16 rows that can be indexed from 0 to 15.
  * @private @const {number}
  */
-shaka.cea.Cea708Window.MAX_ROWS = 15;
+shaka.cea.Cea708Window.MAX_ROWS = 16;

package/lib/dash/segment_template.js

@@ -67,7 +67,7 @@ shaka.dash.SegmentTemplate = class {
         },
       };
     } else if (info.segmentDuration) {
-      if (!isUpdate) {
+      if (!isUpdate && context.adaptationSet.contentType !== 'image') {
         context.presentationTimeline.notifyMaxSegmentDuration(
             info.segmentDuration);
         context.presentationTimeline.notifyMinSegmentStartTime(

package/lib/hls/hls_parser.js

@@ -639,13 +639,19 @@ shaka.hls.HlsParser = class {
         shaka.util.ArrayUtils.remove(allCodecs, textCodecs);
       }
       if (audioGroupId) {
-        const codecs = shaka.util.ManifestParserUtils.guessCodecs(
+        let codecs = shaka.util.ManifestParserUtils.guessCodecsSafe(
             ContentType.AUDIO, allCodecs);
+        if (!codecs) {
+          codecs = this.config_.hls.defaultAudioCodec;
+        }
         this.groupIdToCodecsMap_.set(audioGroupId, codecs);
       }
       if (videoGroupId) {
-        const codecs = shaka.util.ManifestParserUtils.guessCodecs(
+        let codecs = shaka.util.ManifestParserUtils.guessCodecsSafe(
             ContentType.VIDEO, allCodecs);
+        if (!codecs) {
+          codecs = this.config_.hls.defaultVideoCodec;
+        }
         this.groupIdToCodecsMap_.set(videoGroupId, codecs);
       }
     }
@@ -866,7 +872,7 @@ shaka.hls.HlsParser = class {
       shaka.log.debug('Guessing audio-only.');
       type = ContentType.AUDIO;
       ignoreStream = true;
-    } else if (res.video.length) {
+    } else if (res.video.length && !res.audio.length) {
       // There are associated video streams.  Assume this is audio.
       shaka.log.debug('Guessing audio-only.');
       type = ContentType.AUDIO;
@@ -1487,6 +1493,7 @@ shaka.hls.HlsParser = class {
      */
     const discontinuityToMediaSequence = new Map();
 
+    const prevLowLatencyMode = this.lowLatencyMode_;
     let segments;
     try {
       segments = await this.createSegments_(verbatimMediaPlaylistUri,
@@ -1502,6 +1509,12 @@ shaka.hls.HlsParser = class {
       throw error;
     }
 
+    // This happens when autoLowLatencyMode is true, so we need set the
+    // correct lowLatencyPresentationDelay_
+    if (prevLowLatencyMode != this.lowLatencyMode_) {
+      this.determinePresentationType_(playlist);
+    }
+
     const minTimestamp = segments[0].startTime;
     const lastEndTime = segments[segments.length - 1].endTime;
     /** @type {!shaka.media.SegmentIndex} */
@@ -3028,6 +3041,7 @@ shaka.hls.HlsParser.TEXT_EXTENSIONS_TO_MIME_TYPES_ = {
   'm4f': 'application/mp4',
   'cmft': 'application/mp4',
   'vtt': 'text/vtt',
+  'webvtt': 'txt/vtt',
   'ttml': 'application/ttml+xml',
 };
 

package/lib/media/content_workarounds.js

@@ -69,6 +69,18 @@ shaka.media.ContentWorkarounds = class {
         })
         .fullBox('encv', onEncryptionMetadataBox)
         .fullBox('enca', onEncryptionMetadataBox)
+        .fullBox('hev1', (box) => {
+          boxesToModify.push({
+            box,
+            newType: ContentWorkarounds.BOX_TYPE_ENCV_,
+          });
+        })
+        .fullBox('hvc1', (box) => {
+          boxesToModify.push({
+            box,
+            newType: ContentWorkarounds.BOX_TYPE_ENCV_,
+          });
+        })
         .fullBox('avc1', (box) => {
           boxesToModify.push({
             box,

package/lib/media/playhead.js

@@ -33,6 +33,14 @@ goog.requireType('shaka.media.PresentationTimeline');
  * @interface
  */
 shaka.media.Playhead = class {
+  /**
+   * Called when the Player is ready to begin playback. Anything that depends
+   * on setStartTime() should be done here, not in the constructor.
+   *
+   * @see https://github.com/shaka-project/shaka-player/issues/4244
+   */
+  ready() {}
+
   /**
    * Set the start time. If the content has already started playback, this will
    * be ignored.
@@ -76,6 +84,14 @@ shaka.media.SrcEqualsPlayhead = class {
 
     /** @private {shaka.util.EventManager} */
     this.eventManager_ = new shaka.util.EventManager();
+  }
+
+  /** @override */
+  ready() {
+    goog.asserts.assert(
+        this.mediaElement_ != null,
+        'Playhead should not be released before calling ready()',
+    );
 
     // We listen for the loaded-data-event so that we know when we can
     // interact with |currentTime|.
@@ -88,6 +104,7 @@ shaka.media.SrcEqualsPlayhead = class {
         this.eventManager_.listenOnce(this.mediaElement_, 'seeking', () => {
           this.started_ = true;
         });
+
         const currentTime = this.mediaElement_.currentTime;
         // Using the currentTime allows using a negative number in Live HLS
         const newTime = Math.max(0, currentTime + this.startTime_);
@@ -211,7 +228,12 @@ shaka.media.MediaSourcePlayhead = class {
     /** @type {shaka.util.Timer} */
     this.checkWindowTimer_ = new shaka.util.Timer(() => {
       this.onPollWindow_();
-    }).tickEvery(/* seconds= */ 0.25);
+    });
+  }
+
+  /** @override */
+  ready() {
+    this.checkWindowTimer_.tickEvery(/* seconds= */ 0.25);
   }
 
   /** @override */

package/lib/media/streaming_engine.js

@@ -1366,16 +1366,6 @@ shaka.media.StreamingEngine = class {
         this.mediaStates_.delete(ContentType.TEXT);
       } else if (error.code == shaka.util.Error.Code.QUOTA_EXCEEDED_ERROR) {
         this.handleQuotaExceeded_(mediaState, error);
-      } else if (error.code == shaka.util.Error.Code.BAD_HTTP_STATUS &&
-          error.data && error.data[1] == 404) {
-        // The segment could not be found, does not exist, or is not available.
-        // In any case just try again.
-        // The current segment is not available. Schedule another update to
-        // fetch the segment again.
-        shaka.log.v2(logPrefix, 'segment not available.');
-        mediaState.performingUpdate = false;
-        mediaState.updateTimer = null;
-        this.scheduleUpdate_(mediaState, 1);
       } else {
         shaka.log.error(logPrefix, 'failed fetch and append: code=' +
             error.code);
@@ -1390,9 +1380,10 @@ shaka.media.StreamingEngine = class {
 
   /**
    * Clear per-stream error states and retry any failed streams.
+   * @param {number} delaySeconds
    * @return {boolean} False if unable to retry.
    */
-  retry() {
+  retry(delaySeconds) {
     if (this.destroyer_.destroyed()) {
       shaka.log.error('Unable to retry after StreamingEngine is destroyed!');
       return false;
@@ -1409,7 +1400,7 @@ shaka.media.StreamingEngine = class {
       if (mediaState.hasError) {
         shaka.log.info(logPrefix, 'Retrying after failure...');
         mediaState.hasError = false;
-        this.scheduleUpdate_(mediaState, 0.1);
+        this.scheduleUpdate_(mediaState, delaySeconds);
       }
     }
 

package/lib/player.js

@@ -2040,6 +2040,8 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
           shaka.util.StreamUtils.variantToTrack(initialVariant));
     }
 
+    this.playhead_.ready();
+
     // Decide if text should be shown automatically.
     // similar to video/audio track, we would skip switch initial text track
     // if user already pick text track (via selectTextTrack api)
@@ -2374,6 +2376,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         HTMLMediaElement.HAVE_METADATA,
         this.loadEventManager_,
         () => {
+          this.playhead_.ready();
           fullyLoaded.resolve();
         });
 
@@ -4958,12 +4961,13 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
    * If the player has loaded content, and streaming seen an error, but the
    * could not resume streaming, this will return <code>false</code>.
    *
+   * @param {number=} retryDelaySeconds
    * @return {boolean}
    * @export
    */
-  retryStreaming() {
+  retryStreaming(retryDelaySeconds = 0.1) {
     return this.loadMode_ == shaka.Player.LoadMode.MEDIA_SOURCE ?
-           this.streamingEngine_.retry() :
+           this.streamingEngine_.retry(retryDelaySeconds) :
            false;
   }
 
@@ -5059,17 +5063,26 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
    * @private
    */
   defaultStreamingFailureCallback_(error) {
-    const retryErrorCodes = [
-      shaka.util.Error.Code.BAD_HTTP_STATUS,
-      shaka.util.Error.Code.HTTP_ERROR,
-      shaka.util.Error.Code.TIMEOUT,
-    ];
+    // For live streams, we retry streaming automatically for certain errors.
+    // For VOD streams, all streaming failures are fatal.
+    if (!this.isLive()) {
+      return;
+    }
 
-    if (this.isLive() && retryErrorCodes.includes(error.code)) {
-      error.severity = shaka.util.Error.Severity.RECOVERABLE;
+    let retryDelaySeconds = null;
+    if (error.code == shaka.util.Error.Code.BAD_HTTP_STATUS ||
+        error.code == shaka.util.Error.Code.HTTP_ERROR) {
+      // These errors can be near-instant, so delay a bit before retrying.
+      retryDelaySeconds = 1;
+    } else if (error.code == shaka.util.Error.Code.TIMEOUT) {
+      // We already waited for a timeout, so retry quickly.
+      retryDelaySeconds = 0.1;
+    }
 
+    if (retryDelaySeconds != null) {
+      error.severity = shaka.util.Error.Severity.RECOVERABLE;
       shaka.log.warning('Live streaming error.  Retrying automatically...');
-      this.retryStreaming();
+      this.retryStreaming(retryDelaySeconds);
     }
   }
 
@@ -6635,7 +6648,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.12-uncompiled';
+shaka.Player.version = 'v3.3.14-uncompiled';
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/polyfill/media_capabilities.js

@@ -8,6 +8,7 @@ goog.provide('shaka.polyfill.MediaCapabilities');
 
 goog.require('shaka.log');
 goog.require('shaka.polyfill');
+goog.require('shaka.util.Error');
 goog.require('shaka.util.Platform');
 
 
@@ -84,37 +85,48 @@ shaka.polyfill.MediaCapabilities = class {
       return res;
     }
 
+    const videoConfig = mediaDecodingConfig['video'];
+    const audioConfig = mediaDecodingConfig['audio'];
+
     if (mediaDecodingConfig.type == 'media-source') {
       if (!shaka.util.Platform.supportsMediaSource()) {
         return res;
       }
       // Use 'MediaSource.isTypeSupported' to check if the stream is supported.
-      if (mediaDecodingConfig['video']) {
-        const contentType = mediaDecodingConfig['video'].contentType;
-        const isSupported = MediaSource.isTypeSupported(contentType);
+      // Cast platforms will additionally check canDisplayType(), which
+      // accepts extended MIME type parameters.
+      // See: https://github.com/shaka-project/shaka-player/issues/4726
+      if (videoConfig) {
+        let isSupported;
+        if (shaka.util.Platform.isChromecast()) {
+          isSupported =
+              shaka.polyfill.MediaCapabilities.canCastDisplayType_(videoConfig);
+        } else {
+          isSupported = MediaSource.isTypeSupported(videoConfig.contentType);
+        }
         if (!isSupported) {
           return res;
         }
       }
 
-      if (mediaDecodingConfig['audio']) {
-        const contentType = mediaDecodingConfig['audio'].contentType;
+      if (audioConfig) {
+        const contentType = audioConfig.contentType;
         const isSupported = MediaSource.isTypeSupported(contentType);
         if (!isSupported) {
           return res;
         }
       }
     } else if (mediaDecodingConfig.type == 'file') {
-      if (mediaDecodingConfig['video']) {
-        const contentType = mediaDecodingConfig['video'].contentType;
+      if (videoConfig) {
+        const contentType = videoConfig.contentType;
         const isSupported = shaka.util.Platform.supportsMediaType(contentType);
         if (!isSupported) {
           return res;
         }
       }
 
-      if (mediaDecodingConfig['audio']) {
-        const contentType = mediaDecodingConfig['audio'].contentType;
+      if (audioConfig) {
+        const contentType = audioConfig.contentType;
         const isSupported = shaka.util.Platform.supportsMediaType(contentType);
         if (!isSupported) {
           return res;
@@ -189,6 +201,44 @@ shaka.polyfill.MediaCapabilities = class {
 
     return res;
   }
+
+  /**
+   * Checks if the given media parameters of the video or audio streams are
+   * supported by the Cast platform.
+   * @param {!VideoConfiguration} videoConfig The 'video' field of the
+   *     MediaDecodingConfiguration.
+   * @return {boolean} `true` when the stream can be displayed on a Cast device.
+   * @private
+   */
+  static canCastDisplayType_(videoConfig) {
+    if (!(window.cast)) {
+      shaka.log.error('Expected cast namespace to be available!');
+      throw new shaka.util.Error(
+          shaka.util.Error.Severity.CRITICAL,
+          shaka.util.Error.Category.CAST,
+          shaka.util.Error.Code.CAST_API_UNAVAILABLE);
+    } else if (!(cast.__platform__ && cast.__platform__.canDisplayType)) {
+      shaka.log.warning('Expected cast APIs to be available! Falling back to ' +
+          'MediaSource.isTypeSupported() for type support.');
+      return MediaSource.isTypeSupported(videoConfig.contentType);
+    }
+
+    let displayType = videoConfig.contentType;
+    if (videoConfig.width && videoConfig.height) {
+      displayType +=
+          `; width=${videoConfig.width}; height=${videoConfig.height}`;
+    }
+    if (videoConfig.framerate) {
+      displayType += `; framerate=${videoConfig.framerate}`;
+    }
+    if (videoConfig.transferFunction === 'pq') {
+      // A "PQ" transfer function indicates this is an HDR-capable stream;
+      // "smpte2084" is the published standard. We need to inform the platform
+      // this query is specifically for HDR.
+      displayType += '; eotf=smpte2084';
+    }
+    return cast.__platform__.canDisplayType(displayType);
+  }
 };
 
 /**

package/lib/text/ttml_text_parser.js

@@ -128,7 +128,7 @@ shaka.text.TtmlTextParser = class {
     }
 
     const cue = TtmlTextParser.parseCue_(
-        body, time.periodStart, rateInfo, metadataElements, styles,
+        body, time, rateInfo, metadataElements, styles,
         regionElements, cueRegions, whitespaceTrim,
         cellResolutionInfo, /* parentCueElement= */ null,
         /* isContent= */ false);
@@ -149,7 +149,7 @@ shaka.text.TtmlTextParser = class {
    * Parses a TTML node into a Cue.
    *
    * @param {!Node} cueNode
-   * @param {number} offset
+   * @param {shaka.extern.TextParser.TimeContext} timeContext
    * @param {!shaka.text.TtmlTextParser.RateInfo_} rateInfo
    * @param {!Array.<!Element>} metadataElements
    * @param {!Array.<!Element>} styles
@@ -163,7 +163,7 @@ shaka.text.TtmlTextParser = class {
    * @private
    */
   static parseCue_(
-      cueNode, offset, rateInfo, metadataElements, styles, regionElements,
+      cueNode, timeContext, rateInfo, metadataElements, styles, regionElements,
       cueRegions, whitespaceTrim, cellResolution, parentCueElement, isContent) {
     /** @type {Element} */
     let cueElement;
@@ -228,7 +228,7 @@ shaka.text.TtmlTextParser = class {
       for (const childNode of cueElement.childNodes) {
         const nestedCue = shaka.text.TtmlTextParser.parseCue_(
             childNode,
-            offset,
+            timeContext,
             rateInfo,
             metadataElements,
             styles,
@@ -285,15 +285,20 @@ shaka.text.TtmlTextParser = class {
     if (start == null) {
       start = 0;
     }
-    start += offset;
+    start += timeContext.periodStart;
 
     // If end is null, that means the duration is effectively infinite.
     if (end == null) {
       end = Infinity;
     } else {
-      end += offset;
+      end += timeContext.periodStart;
     }
 
+    // Clip times to segment boundaries.
+    // https://github.com/shaka-project/shaka-player/issues/4631
+    start = Math.max(start, timeContext.segmentStart);
+    end = Math.min(end, timeContext.segmentEnd);
+
     if (!hasTimeAttributes && nestedCues.length > 0) {
       // If no time is defined for this cue, base the timing information on
       // the time of the nested cues. In the case of multiple nested cues with
@@ -561,8 +566,28 @@ shaka.text.TtmlTextParser = class {
 
     const fontFamily = TtmlTextParser.getStyleAttribute_(
         cueElement, region, styles, 'fontFamily', shouldInheritRegionStyles);
+    // See https://github.com/sandflow/imscJS/blob/1.1.3/src/main/js/html.js#L1384
     if (fontFamily) {
-      cue.fontFamily = fontFamily;
+      switch (fontFamily) {
+        case 'monospaceSerif':
+          cue.fontFamily = 'Courier New,Liberation Mono,Courier,monospace';
+          break;
+        case 'proportionalSansSerif':
+          cue.fontFamily = 'Arial,Helvetica,Liberation Sans,sans-serif';
+          break;
+        case 'sansSerif':
+          cue.fontFamily = 'sans-serif';
+          break;
+        case 'monospaceSansSerif':
+          cue.fontFamily = 'Consolas,monospace';
+          break;
+        case 'proportionalSerif':
+          cue.fontFamily = 'serif';
+          break;
+        default:
+          cue.fontFamily = fontFamily;
+          break;
+      }
     }
 
     const fontWeight = TtmlTextParser.getStyleAttribute_(

package/lib/text/ui_text_displayer.js

@@ -200,6 +200,19 @@ shaka.text.UITextDisplayer = class {
     this.isTextVisible_ = on;
   }
 
+  /**
+   * @private
+   */
+  isElementUnderTextContainer_(elemToCheck) {
+    while (elemToCheck != null) {
+      if (elemToCheck == this.textContainer_) {
+        return true;
+      }
+      elemToCheck = elemToCheck.parentElement;
+    }
+    return false;
+  }
+
   /**
    * @param {!Array.<!shaka.extern.Cue>} cues
    * @param {!HTMLElement} container
@@ -261,6 +274,9 @@ shaka.text.UITextDisplayer = class {
           cueRegistry = this.currentCuesMap_.get(cue);
           wrapper = cueRegistry.wrapper;
           updateDOM = true;
+        } else if (!this.isElementUnderTextContainer_(wrapper)) {
+          // We found that the wrapper needs to be in the DOM
+          updateDOM = true;
         }
       }
 
@@ -277,6 +293,7 @@ shaka.text.UITextDisplayer = class {
       const topCue = parents.pop();
       goog.asserts.assert(topCue == cue, 'Parent cues should be kept in order');
     }
+
     if (updateDOM) {
       for (const element of toUproot) {
         // NOTE: Because we uproot shared region elements, too, we might hit an
@@ -583,7 +600,7 @@ shaka.text.UITextDisplayer = class {
     //   (for vertical growing left) is aligned at the line.
     // TODO: Implement line alignment with line number.
     // TODO: Implement lineAlignment of 'CENTER'.
-    if (cue.line) {
+    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
@@ -596,21 +613,21 @@ shaka.text.UITextDisplayer = class {
           if (cue.lineAlign == Cue.lineAlign.START) {
             style.top = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.bottom = cue.line + '%';
+            style.bottom = (100 - 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 + '%';
+            style.right = (100 - cue.line) + '%';
           }
         } else {
           style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
             style.right = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.left = cue.line + '%';
+            style.left = (100 - cue.line) + '%';
           }
         }
       }
@@ -620,7 +637,7 @@ shaka.text.UITextDisplayer = class {
 
     // The position defines the indent of the text container in the
     // direction defined by the writing direction.
-    if (cue.position) {
+    if (cue.position != null) {
       if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
         style.paddingLeft = cue.position;
       } else {