shaka-player 4.3.13 → 4.3.14

package/lib/player.js

@@ -479,6 +479,12 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
      */
     this.loadEventManager_ = new shaka.util.EventManager();
 
+    /**
+     * For listeners scoped to the lifetime of the loaded content.
+     * @private {shaka.util.EventManager}
+     */
+    this.trickPlayEventManager_ = new shaka.util.EventManager();
+
     /** @private {shaka.net.NetworkingEngine} */
     this.networkingEngine_ = null;
 
@@ -897,6 +903,10 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       this.loadEventManager_.release();
       this.loadEventManager_ = null;
     }
+    if (this.trickPlayEventManager_) {
+      this.trickPlayEventManager_.release();
+      this.trickPlayEventManager_ = null;
+    }
 
     this.abrManagerFactory_ = null;
     this.config_ = null;
@@ -1555,6 +1565,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     // be if there was an error and we, by chance, did not have a media element.
     if (has.mediaElement) {
       this.loadEventManager_.removeAll();
+      this.trickPlayEventManager_.removeAll();
     }
 
     // Stop the variant checker timer
@@ -2012,8 +2023,17 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
 
     this.drmEngine_.configure(this.config_.drm);
 
+    const tracksChanged = shaka.util.StreamUtils.applyRestrictions(
+        this.manifest_.variants, this.config_.restrictions, this.maxHwRes_);
+    if (tracksChanged && this.streamingEngine_) {
+      this.onTracksChanged_();
+    }
+
+    const playableVariants = shaka.util.StreamUtils.getPlayableVariants(
+        this.manifest_.variants);
+
     await this.drmEngine_.initForPlayback(
-        this.manifest_.variants,
+        playableVariants,
         this.manifest_.offlineSessionIds);
 
     await this.drmEngine_.attach(has.mediaElement);
@@ -2192,6 +2212,10 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       await Promise.all(createSegmentIndexPromises);
     }
 
+    if (this.parser_ && this.parser_.onInitialVariantChosen) {
+      this.parser_.onInitialVariantChosen(toLazyLoad);
+    }
+
     shaka.Player.applyPlayRange_(this.manifest_.presentationTimeline,
         this.config_.playRangeStart,
         this.config_.playRangeEnd);
@@ -3705,6 +3729,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       shaka.log.alwaysWarn('A trick play rate of 0 is unsupported!');
       return;
     }
+    this.trickPlayEventManager_.removeAll();
 
     if (this.video_.paused) {
       // Our fast forward is implemented with playbackRate and needs the video
@@ -3718,6 +3743,22 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       this.abrManager_.playbackRateChanged(rate);
       this.streamingEngine_.setTrickPlay(Math.abs(rate) > 1);
     }
+    if (this.isLive()) {
+      this.trickPlayEventManager_.listen(this.video_, 'timeupdate', () => {
+        const currentTime = this.video_.currentTime;
+        const seekRange = this.seekRange();
+        const safeSeekOffset = this.config_.streaming.safeSeekOffset;
+        if (rate > 0) {
+          if (currentTime >= seekRange.end) {
+            this.cancelTrickPlay();
+          }
+        } else {
+          if (currentTime <= (seekRange.start + safeSeekOffset)) {
+            this.cancelTrickPlay();
+          }
+        }
+      });
+    }
   }
 
   /**
@@ -3737,6 +3778,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       this.abrManager_.playbackRateChanged(defaultPlaybackRate);
       this.streamingEngine_.setTrickPlay(false);
     }
+    this.trickPlayEventManager_.removeAll();
   }
 
   /**
@@ -4635,7 +4677,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
 
       if (this.isLive()) {
         const now = this.getPresentationStartTimeAsDate().valueOf() +
-            this.seekRange().end * 1000;
+            element.currentTime * 1000;
         const latency = (Date.now() - now) / 1000;
         this.stats_.setLiveLatency(latency);
       }
@@ -4689,6 +4731,12 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
           shaka.util.Error.Code.CONTENT_NOT_LOADED);
     }
 
+    if (kind != 'subtitles' && kind != 'captions') {
+      shaka.log.alwaysWarn(
+          'Using a kind value different of `subtitles` or `captions` can ' +
+          'cause unwanted issues.');
+    }
+
     if (!mimeType) {
       mimeType = await this.getTextMimetype_(uri);
     }
@@ -4707,9 +4755,13 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       }
       await this.addSrcTrackElement_(uri, language, kind, mimeType, label || '',
           adCuePoints);
+
+      const LanguageUtils = shaka.util.LanguageUtils;
+      const languageNormalized = LanguageUtils.normalize(language);
+
       const textTracks = this.getTextTracks();
       const srcTrack = textTracks.find((t) => {
-        return t.language == language &&
+        return LanguageUtils.normalize(t.language) == languageNormalized &&
             t.label == (label || '') &&
             t.kind == kind;
       });
@@ -4871,16 +4923,22 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       vttOffset: 0,
     };
     const data = shaka.util.BufferUtils.toUint8(buffer);
-    const cues = TextParser.parseMedia(data, time);
+    const cues = TextParser.parseMedia(data, time, uri);
 
     const references = [];
     for (const cue of cues) {
-      const imageUri = shaka.util.ManifestParserUtils.resolveUris(
-          [uri], [cue.payload])[0];
+      let uris = null;
+      const getUris = () => {
+        if (uris == null) {
+          uris = shaka.util.ManifestParserUtils.resolveUris(
+              [uri], [cue.payload]);
+        }
+        return uris || [];
+      };
       const reference = new shaka.media.SegmentReference(
           cue.startTime,
           cue.endTime,
-          () => [imageUri],
+          getUris,
           /* startByte= */ 0,
           /* endByte= */ null,
           /* initSegmentReference= */ null,
@@ -4888,8 +4946,8 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
           /* appendWindowStart= */ 0,
           /* appendWindowEnd= */ Infinity,
       );
-      if (imageUri.includes('#xywh')) {
-        const spriteInfo = imageUri.split('#xywh=')[1].split(',');
+      if (cue.payload.includes('#xywh')) {
+        const spriteInfo = cue.payload.split('#xywh=')[1].split(',');
         if (spriteInfo.length === 4) {
           reference.setThumbnailSprite({
             height: parseInt(spriteInfo[3], 10),
@@ -5129,7 +5187,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         vttOffset: 0,
       };
       const data = shaka.util.BufferUtils.toUint8(buffer);
-      const cues = obj.parseMedia(data, time);
+      const cues = obj.parseMedia(data, time, /* uri= */ null);
       return shaka.text.WebVttGenerator.convert(cues, adCuePoints);
     }
     throw new shaka.util.Error(
@@ -5248,7 +5306,8 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         return new shaka.text.UITextDisplayer(
             this.video_, this.videoContainer_);
       } else {
-        return new shaka.text.SimpleTextDisplayer(this.video_);
+        return new shaka.text.SimpleTextDisplayer(
+            this.video_, shaka.Player.TextTrackLabel);
       }
     };
     return config;
@@ -6263,6 +6322,8 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     const restrictedStatuses = shaka.Player.restrictedStatuses_;
     let tracksChanged = false;
 
+    goog.asserts.assert(this.drmEngine_, 'drmEngine should be non-null here.');
+
     // Only filter tracks for keys if we have some key statuses to look at.
     if (keyIds.length) {
       for (const variant of this.manifest_.variants) {
@@ -6278,8 +6339,10 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
 
             for (const keyId of stream.keyIds) {
               const keyStatus = keyStatusMap[isGlobalStatus ? '00' : keyId];
-              variant.allowedByKeySystem = variant.allowedByKeySystem &&
-                  !!keyStatus && !restrictedStatuses.includes(keyStatus);
+              if (keyStatus || this.drmEngine_.hasManifestInitData()) {
+                variant.allowedByKeySystem = variant.allowedByKeySystem &&
+                    !!keyStatus && !restrictedStatuses.includes(keyStatus);
+              }
             }
           }
 
@@ -6291,6 +6354,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     }  // if (keyIds.size)
 
     if (tracksChanged) {
+      this.onTracksChanged_();
       const variantsUpdated = this.updateAbrManagerVariants_();
       if (!variantsUpdated) {
         return;
@@ -6302,10 +6366,6 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       shaka.log.debug('Choosing new streams after key status changed');
       this.chooseVariantAndSwitch_();
     }
-
-    if (tracksChanged) {
-      this.onTracksChanged_();
-    }
   }
 
   /**
@@ -6971,7 +7031,8 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @define {string} A version number taken from git at compile time.
  * @export
  */
-shaka.Player.version = 'v4.3.13-uncompiled';
+// eslint-disable-next-line no-useless-concat
+shaka.Player.version = 'v4.3.14' + '-uncompiled';  // x-release-please-version
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/polyfill/media_capabilities.js

@@ -141,8 +141,15 @@ shaka.polyfill.MediaCapabilities = class {
       }
 
       if (audioConfig) {
-        const contentType = audioConfig.contentType;
-        const isSupported = Capabilities.isTypeSupported(contentType);
+        let isSupported;
+        if (shaka.util.Platform.isChromecast() &&
+            audioConfig.spatialRendering) {
+          const extendedType =
+              audioConfig.contentType + '; spatialRendering=true';
+          isSupported = Capabilities.isTypeSupported(extendedType);
+        } else {
+          isSupported = Capabilities.isTypeSupported(audioConfig.contentType);
+        }
         if (!isSupported) {
           return res;
         }
@@ -184,10 +191,23 @@ shaka.polyfill.MediaCapabilities = class {
       const videoCapabilities = [];
 
       if (mediaCapkeySystemConfig.audio) {
-        const capability = {
+        let capability = {
           robustness: mediaCapkeySystemConfig.audio.robustness || '',
           contentType: mediaDecodingConfig.audio.contentType,
         };
+
+        // Some Tizen devices seem to misreport AC-3 support, but correctly
+        // report EC-3 support. So query EC-3 as a fallback for AC-3.
+        // See https://github.com/shaka-project/shaka-player/issues/2989 for
+        // details.
+        if (shaka.util.Platform.isTizen() &&
+          mediaDecodingConfig.audio.contentType.includes('codecs="ac-3"')) {
+          capability = {
+            robustness: capability.robustness,
+            contentType: 'audio/mp4; codecs="ec-3"',
+          };
+        }
+
         audioCapabilities.push(capability);
       }
 

package/lib/text/mp4_ttml_parser.js

@@ -67,7 +67,7 @@ shaka.text.Mp4TtmlParser = class {
    * @override
    * @export
    */
-  parseMedia(data, time) {
+  parseMedia(data, time, uri) {
     const Mp4Parser = shaka.util.Mp4Parser;
 
     let sawMDAT = false;
@@ -78,7 +78,7 @@ shaka.text.Mp4TtmlParser = class {
           sawMDAT = true;
           // Join this to any previous payload, in case the mp4 has multiple
           // mdats.
-          payload = payload.concat(this.parser_.parseMedia(data, time));
+          payload = payload.concat(this.parser_.parseMedia(data, time, uri));
         }));
     parser.parse(data, /* partialOkay= */ false);
 

package/lib/text/simple_text_displayer.js

@@ -6,7 +6,6 @@
 
 /**
  * @fileoverview
- * @suppress {missingRequire} TODO(b/152540451): this shouldn't be needed
  */
 
 goog.provide('shaka.text.SimpleTextDisplayer');
@@ -24,8 +23,11 @@ goog.require('shaka.text.Utils');
  * @export
  */
 shaka.text.SimpleTextDisplayer = class {
-  /** @param {HTMLMediaElement} video */
-  constructor(video) {
+  /**
+   * @param {HTMLMediaElement} video
+   * @param {string} label
+   */
+  constructor(video, label) {
     /** @private {TextTrack} */
     this.textTrack_ = null;
 
@@ -39,7 +41,7 @@ shaka.text.SimpleTextDisplayer = class {
       // element.
       track.mode = 'disabled';
 
-      if (track.label == shaka.Player.TextTrackLabel) {
+      if (track.label == label) {
         this.textTrack_ = track;
       }
     }
@@ -49,8 +51,7 @@ shaka.text.SimpleTextDisplayer = class {
       // kind to 'subtitles' or 'captions' when creating the TextTrack object.
       // The individual text tracks from the manifest will still have their own
       // kinds which can be displayed in the app's UI.
-      this.textTrack_ = video.addTextTrack(
-          'subtitles', shaka.Player.TextTrackLabel);
+      this.textTrack_ = video.addTextTrack('subtitles', label);
     }
     this.textTrack_.mode = 'hidden';
   }

package/lib/text/srt_text_parser.js

@@ -47,7 +47,7 @@ shaka.text.SrtTextParser = class {
    * @override
    * @export
    */
-  parseMedia(data, time) {
+  parseMedia(data, time, uri) {
     const SrtTextParser = shaka.text.SrtTextParser;
     const BufferUtils = shaka.util.BufferUtils;
     const StringUtils = shaka.util.StringUtils;
@@ -59,7 +59,7 @@ shaka.text.SrtTextParser = class {
 
     const newData = BufferUtils.toUint8(StringUtils.toUTF8(vvtText));
 
-    return this.parser_.parseMedia(newData, time);
+    return this.parser_.parseMedia(newData, time, uri);
   }
 
   /**

package/lib/text/text_engine.js

@@ -160,9 +160,10 @@ shaka.text.TextEngine = class {
    * @param {BufferSource} buffer
    * @param {?number} startTime relative to the start of the presentation
    * @param {?number} endTime relative to the start of the presentation
+   * @param {?string=} uri
    * @return {!Promise}
    */
-  async appendBuffer(buffer, startTime, endTime) {
+  async appendBuffer(buffer, startTime, endTime, uri) {
     goog.asserts.assert(
         this.parser_, 'The parser should already be initialized');
 
@@ -192,7 +193,7 @@ shaka.text.TextEngine = class {
 
     // Parse the buffer and add the new cues.
     const allCues = this.parser_.parseMedia(
-        shaka.util.BufferUtils.toUint8(buffer), time);
+        shaka.util.BufferUtils.toUint8(buffer), time, uri);
     const cuesToAppend = allCues.filter((cue) => {
       return cue.startTime >= this.appendWindowStart_ &&
           cue.startTime < this.appendWindowEnd_;

package/lib/text/ttml_text_parser.js

@@ -7,6 +7,7 @@
 goog.provide('shaka.text.TtmlTextParser');
 
 goog.require('goog.asserts');
+goog.require('goog.Uri');
 goog.require('shaka.log');
 goog.require('shaka.text.Cue');
 goog.require('shaka.text.CueRegion');
@@ -42,7 +43,7 @@ shaka.text.TtmlTextParser = class {
    * @override
    * @export
    */
-  parseMedia(data, time) {
+  parseMedia(data, time, uri) {
     const TtmlTextParser = shaka.text.TtmlTextParser;
     const XmlUtils = shaka.util.XmlUtils;
     const ttpNs = TtmlTextParser.parameterNs_;
@@ -139,7 +140,7 @@ shaka.text.TtmlTextParser = class {
         body, time, rateInfo, metadataElements, styles,
         regionElements, cueRegions, whitespaceTrim,
         cellResolutionInfo, /* parentCueElement= */ null,
-        /* isContent= */ false);
+        /* isContent= */ false, uri);
     if (cue) {
       // According to the TTML spec, backgrounds default to transparent.
       // So default the background of the top-level element to transparent.
@@ -167,12 +168,14 @@ shaka.text.TtmlTextParser = class {
    * @param {?{columns: number, rows: number}} cellResolution
    * @param {?Element} parentCueElement
    * @param {boolean} isContent
+   * @param {?(string|undefined)} uri
    * @return {shaka.text.Cue}
    * @private
    */
   static parseCue_(
       cueNode, timeContext, rateInfo, metadataElements, styles, regionElements,
-      cueRegions, whitespaceTrim, cellResolution, parentCueElement, isContent) {
+      cueRegions, whitespaceTrim, cellResolution, parentCueElement, isContent,
+      uri) {
     /** @type {Element} */
     let cueElement;
     /** @type {Element} */
@@ -214,7 +217,21 @@ shaka.text.TtmlTextParser = class {
       }
     }
 
-    if (cueNode.nodeName == 'p' || imageElement) {
+    let imageUri = null;
+    const backgroundImage = shaka.util.XmlUtils.getAttributeNSList(
+        cueElement,
+        shaka.text.TtmlTextParser.smpteNsList_,
+        'backgroundImage');
+    if (uri && backgroundImage && !backgroundImage.startsWith('#')) {
+      const baseUri = new goog.Uri(uri);
+      const relativeUri = new goog.Uri(backgroundImage);
+      const newUri = baseUri.resolve(relativeUri).toString();
+      if (newUri) {
+        imageUri = newUri;
+      }
+    }
+
+    if (cueNode.nodeName == 'p' || imageElement || imageUri) {
       isContent = true;
     }
 
@@ -247,6 +264,7 @@ shaka.text.TtmlTextParser = class {
             cellResolution,
             cueElement,
             isContent,
+            uri,
         );
 
         // This node may or may not generate a nested cue.
@@ -380,6 +398,7 @@ shaka.text.TtmlTextParser = class {
         cueElement,
         regionElementForStyle,
         imageElement,
+        imageUri,
         styles,
         /** isNested= */ parentIsContent, // "nested in a <div>" doesn't count.
         /** isLeaf= */ (nestedCues.length == 0));
@@ -464,6 +483,11 @@ shaka.text.TtmlTextParser = class {
             region.viewportAnchorX = region.viewportAnchorX * 100 /
               globalWidth;
           }
+        } else if (!extent) {
+          region.width = 100 - region.viewportAnchorX;
+          region.widthUnits = shaka.text.CueRegion.units.PERCENTAGE;
+          region.height = 100 - region.viewportAnchorY;
+          region.heightUnits = shaka.text.CueRegion.units.PERCENTAGE;
         }
 
         region.viewportAnchorUnits = percentage || globalWidth != null ?
@@ -482,13 +506,15 @@ shaka.text.TtmlTextParser = class {
    * @param {!Element} cueElement
    * @param {Element} region
    * @param {Element} imageElement
+   * @param {?string} imageUri
    * @param {!Array.<!Element>} styles
    * @param {boolean} isNested
    * @param {boolean} isLeaf
    * @private
    */
   static addStyle_(
-      cue, cueElement, region, imageElement, styles, isNested, isLeaf) {
+      cue, cueElement, region, imageElement, imageUri, styles,
+      isNested, isLeaf) {
     const TtmlTextParser = shaka.text.TtmlTextParser;
     const Cue = shaka.text.Cue;
 
@@ -656,6 +682,8 @@ shaka.text.TtmlTextParser = class {
           backgroundImageData) {
         cue.backgroundImage = 'data:image/png;base64,' + backgroundImageData;
       }
+    } else if (imageUri) {
+      cue.backgroundImage = imageUri;
     }
 
     const textOutline = TtmlTextParser.getStyleAttribute_(

package/lib/text/ui_text_displayer.js

@@ -44,6 +44,9 @@ shaka.text.UITextDisplayer = class {
     /** @private {HTMLElement} */
     this.videoContainer_ = videoContainer;
 
+    /** @private {?number} */
+    this.aspectRatio_ = null;
+
     /** @type {HTMLElement} */
     this.textContainer_ = shaka.util.Dom.createHTMLElement('div');
     this.textContainer_.classList.add('shaka-text-container');
@@ -90,6 +93,23 @@ shaka.text.UITextDisplayer = class {
       this.updateCaptions_(/* forceUpdate= */ true);
     });
 
+    // From: https://html.spec.whatwg.org/multipage/media.html#dom-video-videowidth
+    // Whenever the natural width or natural height of the video changes
+    // (including, for example, because the selected video track was changed),
+    // if the element's readyState attribute is not HAVE_NOTHING, the user
+    // agent must queue a media element task given the media element to fire an
+    // event named resize at the media element.
+    this.eventManager_.listen(this.video_, 'resize', () => {
+      const element = /** @type {!HTMLVideoElement} */ (this.video_);
+      const width = element.videoWidth;
+      const height = element.videoHeight;
+      if (width && height) {
+        this.aspectRatio_ = width / height;
+      } else {
+        this.aspectRatio_ = null;
+      }
+    });
+
     /** @private {ResizeObserver} */
     this.resizeObserver_ = null;
     if ('ResizeObserver' in window) {
@@ -134,6 +154,11 @@ shaka.text.UITextDisplayer = class {
    * @export
    */
   destroy() {
+    // Return resolved promise if destroy() has been called.
+    if (!this.textContainer_) {
+      return Promise.resolve();
+    }
+
     // Remove the text container element from the UI.
     this.videoContainer_.removeChild(this.textContainer_);
     this.textContainer_ = null;
@@ -156,6 +181,8 @@ shaka.text.UITextDisplayer = class {
       this.resizeObserver_.disconnect();
       this.resizeObserver_ = null;
     }
+
+    return Promise.resolve();
   }
 
 
@@ -400,6 +427,10 @@ shaka.text.UITextDisplayer = class {
    */
   getRegionElement_(cue) {
     const region = cue.region;
+    // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#caption-window-size
+    // if aspect ratio is 4/3, use that value, otherwise, use the 16:9 value
+    const lineWidthMultiple = this.aspectRatio_ === 4/3 ? 2.5 : 1.9;
+    const lineHeightMultiple = 5.33;
 
     const regionId = this.generateRegionId_(region);
     if (this.regionElements_.has(regionId)) {
@@ -417,11 +448,33 @@ shaka.text.UITextDisplayer = class {
     regionElement.id = 'shaka-text-region---' + regionId;
     regionElement.classList.add('shaka-text-region');
 
-    regionElement.style.height = region.height + heightUnit;
-    regionElement.style.width = region.width + widthUnit;
     regionElement.style.position = 'absolute';
-    regionElement.style.top = region.viewportAnchorY + viewportAnchorUnit;
-    regionElement.style.left = region.viewportAnchorX + viewportAnchorUnit;
+
+    const linesUnit = shaka.text.CueRegion.units.LINES;
+    if (region.heightUnits === linesUnit && region.widthUnits === linesUnit) {
+      regionElement.style.height = region.height * lineHeightMultiple + '%';
+      regionElement.style.width = region.width * lineWidthMultiple + '%';
+    } else {
+      regionElement.style.height = region.height + heightUnit;
+      regionElement.style.width = region.width + widthUnit;
+    }
+
+    if (region.viewportAnchorUnits === linesUnit) {
+      // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-708
+      let top = region.viewportAnchorY / 75 * 100;
+      const windowWidth = this.aspectRatio_ === 4/3 ? 160 : 210;
+      let left = region.viewportAnchorX / windowWidth * 100;
+      // adjust top and left values based on the region anchor and window size
+      top -= region.regionAnchorY * region.height * lineHeightMultiple / 100;
+      left -= region.regionAnchorX * region.width * lineWidthMultiple / 100;
+      regionElement.style.top = top + '%';
+      regionElement.style.left = left + '%';
+    } else {
+      regionElement.style.top = region.viewportAnchorY -
+        region.regionAnchorY * region.height / 100 + viewportAnchorUnit;
+      regionElement.style.left = region.viewportAnchorX -
+        region.regionAnchorX * region.width / 100 + viewportAnchorUnit;
+    }
 
     regionElement.style.display = 'flex';
     regionElement.style.flexDirection = 'column';
@@ -600,6 +653,10 @@ shaka.text.UITextDisplayer = class {
           // Only do this for the text itself.
           elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
         }
+        const fontFamily = inherit((c) => c.fontFamily);
+        if (fontFamily) {
+          elem.style.fontFamily = fontFamily;
+        }
       }
       if (text) {
         elem.textContent = text;
@@ -653,37 +710,46 @@ 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 != null) {
+    let line = cue.line;
+    if (line != null) {
       let lineInterpretation = cue.lineInterpretation;
       // HACK: the current implementation of UITextDisplayer only handled
-      // PERCENTAGE, as cue.line=0 is zero, we can interpret it as percentage
-      // safely.
-      if (cue.line == 0 &&
-          lineInterpretation == Cue.lineInterpretation.LINE_NUMBER) {
+      // PERCENTAGE, so we need convert LINE_NUMBER to PERCENTAGE
+      if (lineInterpretation == Cue.lineInterpretation.LINE_NUMBER) {
         lineInterpretation = Cue.lineInterpretation.PERCENTAGE;
+        let maxLines = 16;
+        // The maximum number of lines is different if it is a vertical video.
+        if (this.aspectRatio_ && this.aspectRatio_ < 1) {
+          maxLines = 32;
+        }
+        if (line < 0) {
+          line = 100 + line / maxLines * 100;
+        } else {
+          line = line / maxLines * 100;
+        }
       }
       if (lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
         style.position = 'absolute';
         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
           style.width = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
-            style.top = cue.line + '%';
+            style.top = line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.bottom = (100 - cue.line) + '%';
+            style.bottom = (100 - line) + '%';
           }
         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
           style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
-            style.left = cue.line + '%';
+            style.left = line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.right = (100 - cue.line) + '%';
+            style.right = (100 - line) + '%';
           }
         } else {
           style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
-            style.right = cue.line + '%';
+            style.right = line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.left = (100 - cue.line) + '%';
+            style.left = (100 - line) + '%';
           }
         }
       }