shaka-player 4.6.8 → 4.6.10

package/docs/tutorials/index.json

@@ -9,6 +9,7 @@
   { "license-wrapping": { "title": "License Wrapping" } },
   { "ui": { "title": "UI Library" } },
   { "ui-customization": { "title": "Configuring the UI" } },
+  { "text-displayer": { "title": "Configuring text displayer" } },
   { "errors": { "title": "Error Handling" } },
   { "a11y": { "title": "Creating accessible buttons" } },
   { "ad_monetization": { "title": "Serving ads with our IMA SDK integration" } },

package/docs/tutorials/text-displayer.md

@@ -0,0 +1,15 @@
+# Configuring text displayer`
+
+Shaka Player supports two types of Text Displayer.
+1) Using the browser's native API, Shaka Player creates a textTrack along
+   with the AUDIO or VIDEO Element.
+2) Rendering the subtitles in a container in the DOM.
+3) Providing a custom text displayer factory would allow a developer to make
+   their own custom text displayer that fits neither category.
+
+By default, if not configured otherwise, the player will use type 1.
+To configure type 2, you have to call `setVideoContainer` function before
+making `load` call in the player.
+
+Note: The UI calls setVideoContainer for you if the video's controls are
+disabled, so this isn't always necessary when using the UI.

package/lib/cast/cast_proxy.js

@@ -496,6 +496,16 @@ shaka.cast.CastProxy = class extends shaka.util.FakeEventTarget {
       startTime = this.sender_.get('video', 'currentTime');
     }
 
+    let activeTextTrack;
+    const textTracks = this.sender_.get('player', 'getTextTracks')();
+
+    if (textTracks && textTracks.length) {
+      activeTextTrack = textTracks.find((t) => t.active);
+    }
+
+    const isTextTrackVisible =
+        this.sender_.get('player', 'isTextTrackVisible')();
+
     // Now load the manifest, if present.
     if (assetUri) {
       // Don't autoplay the content until we finish setting up initial state.
@@ -527,6 +537,14 @@ shaka.cast.CastProxy = class extends shaka.util.FakeEventTarget {
         /** @type {Object} */(this.localPlayer_)[setter](value);
       }
 
+      this.localPlayer_.setTextTrackVisibility(isTextTrackVisible);
+      if (activeTextTrack) {
+        this.localPlayer_.selectTextLanguage(
+            activeTextTrack.language,
+            activeTextTrack.roles,
+            activeTextTrack.forced);
+      }
+
       // Restore the original autoplay setting.
       this.localVideo_.autoplay = autoplay;
       if (assetUri) {

package/lib/hls/hls_utils.js

@@ -47,12 +47,12 @@ shaka.hls.Utils = class {
    * @return {?shaka.hls.Tag}
    */
   static getFirstTagWithName(tags, name) {
-    const tagsWithName = shaka.hls.Utils.filterTagsByName(tags, name);
-    if (!tagsWithName.length) {
-      return null;
+    for (const tag of tags) {
+      if (tag.name === name) {
+        return tag;
+      }
     }
-
-    return tagsWithName[0];
+    return null;
   }
 
   /**

package/lib/media/media_source_engine.js

@@ -1793,7 +1793,7 @@ shaka.media.MediaSourceEngine = class {
 
       this.destroyer_.ensureNotDestroyed();
 
-      this.eventManager_.listenOnce(this.video_, 'canplay', () => {
+      this.eventManager_.listenOnce(this.video_, 'canplaythrough', () => {
         this.destroyer_.ensureNotDestroyed();
 
         this.video_.autoplay = previousAutoPlayState;

package/lib/media/play_rate_controller.js

@@ -41,6 +41,7 @@ shaka.media.PlayRateController = class {
 
   /** @override */
   release() {
+    this.set(this.getDefaultRate());
     if (this.timer_) {
       this.timer_.stop();
       this.timer_ = null;

package/lib/player.js

@@ -549,6 +549,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;
 
@@ -840,6 +846,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;
@@ -1157,6 +1167,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       // element.
       if (this.video_) {
         this.loadEventManager_.removeAll();
+        this.trickPlayEventManager_.removeAll();
       }
 
       // Stop the variant checker timer
@@ -3504,6 +3515,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
@@ -3517,6 +3529,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();
+          }
+        }
+      });
+    }
   }
 
   /**
@@ -3536,6 +3564,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       this.abrManager_.playbackRateChanged(defaultPlaybackRate);
       this.streamingEngine_.setTrickPlay(false);
     }
+    this.trickPlayEventManager_.removeAll();
   }
 
   /**
@@ -4507,13 +4536,16 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       // variant yet because we set the load mode before we select the first
       // variant to stream.
       const variant = this.streamingEngine_.getCurrentVariant();
+      const textStream = this.streamingEngine_.getCurrentTextStream();
 
       if (variant) {
         const rate = this.playRateController_ ?
            this.playRateController_.getRealRate() : 1;
         const variantBandwidth = rate * variant.bandwidth;
-        // TODO: Should include text bandwidth if it enabled.
-        const currentStreamBandwidth = variantBandwidth;
+        let currentStreamBandwidth = variantBandwidth;
+        if (textStream && textStream.bandwidth) {
+          currentStreamBandwidth += (rate * textStream.bandwidth);
+        }
         this.stats_.setCurrentStreamBandwidth(currentStreamBandwidth);
       }
 
@@ -6785,7 +6817,7 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @export
  */
 // eslint-disable-next-line no-useless-concat
-shaka.Player.version = 'v4.6.8' + '-uncompiled';  // x-release-please-version
+shaka.Player.version = 'v4.6.10' + '-uncompiled';  // x-release-please-version
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/text/ttml_text_parser.js

@@ -491,6 +491,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 ?

package/lib/util/language_utils.js

@@ -192,25 +192,24 @@ shaka.util.LanguageUtils = class {
     const LanguageUtils = shaka.util.LanguageUtils;
 
     const privateusePrefix = 'x-';
-    const components = locale.split(`-${privateusePrefix}`);
-    const languageAndRegion = components[0].split('-');
+    const [languageRegion = '', privateuseSuffix = ''] =
+     locale.split(`-${privateusePrefix}`);
+    const [languageCode = '', regionCode = ''] = languageRegion.split('-');
 
     // We are only going to use the language, the region and the "privateuse" part (as per https://datatracker.ietf.org/doc/html/rfc5646).
     // Anything else is thrown away.
-    let language = languageAndRegion[0] || '';
-    let region = languageAndRegion[1] || '';
-    const privateuse = components[1] ?
-        `${privateusePrefix}${components[1]}` : '';
+    const privateuse = privateuseSuffix ?
+        `${privateusePrefix}${privateuseSuffix}` : '';
 
     // Convert the language to lower case. It is standard for the language code
     // to be in lower case, but it will also make the map look-up easier.
-    language = language.toLowerCase();
+    let language = languageCode.toLowerCase();
     language = LanguageUtils.isoMap_.get(language) || language;
 
     // Convert the region to upper case. It is standard for the region to be in
     // upper case. If there is no upper code, then it will be an empty string
     // and this will be a no-op.
-    region = region.toUpperCase();
+    const region = regionCode.toUpperCase();
 
     return `${region ? `${language}-${region}` : language}${
         privateuse ? `-${privateuse}` : ''}`;

package/lib/util/platform.js

@@ -220,6 +220,15 @@ shaka.util.Platform = class {
            !shaka.util.Platform.isLegacyEdge();
   }
 
+  /**
+   * Check if the current platform is Firefox.
+   *
+   * @return {boolean}
+   */
+  static isFirefox() {
+    return shaka.util.Platform.userAgentContains_('Firefox');
+  }
+
   /**
    * Check if the current platform is from Apple.
    *
@@ -422,6 +431,15 @@ shaka.util.Platform = class {
     return navigator.platform.toLowerCase().includes('windows');
   }
 
+  /**
+   * Return true if the platform is a Android, regardless of the browser.
+   *
+   * @return {boolean}
+   */
+  static isAndroid() {
+    return shaka.util.Platform.userAgentContains_('Android');
+  }
+
   /**
    * Check if the user agent contains a key. This is the best way we know of
    * right now to detect platforms. If there is a better way, please send a

package/lib/util/stream_utils.js

@@ -370,6 +370,9 @@ shaka.util.StreamUtils = class {
     const StreamUtils = shaka.util.StreamUtils;
     const isXboxOne = shaka.util.Platform.isXboxOne();
 
+    const isFirefoxAndroid = shaka.util.Platform.isFirefox() &&
+        shaka.util.Platform.isAndroid();
+
     manifest.variants = manifest.variants.filter((variant) => {
       // See: https://github.com/shaka-project/shaka-player/issues/3860
       const video = variant.video;
@@ -425,6 +428,17 @@ shaka.util.StreamUtils = class {
 
       const audio = variant.audio;
 
+      // See: https://github.com/shaka-project/shaka-player/issues/6111
+      // It seems that Firefox Android reports that it supports
+      // Opus + Widevine, but it is not actually supported.
+      // It makes sense to drop early.
+      if (isFirefoxAndroid && audio && audio.encrypted &&
+          audio.codecs.toLowerCase().includes('opus')) {
+        shaka.log.debug('Dropping variant - not compatible with platform',
+            StreamUtils.getVariantSummaryString_(variant));
+        return false;
+      }
+
       if (audio) {
         const codecs = StreamUtils.getCorrectAudioCodecs_(audio.codecs);
         const fullType = MimeUtils.getFullOrConvertedType(

package/package.json

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

package/test/media/media_source_engine_unit.js

@@ -1246,7 +1246,7 @@ describe('MediaSourceEngine', () => {
             const callback = addListenOnceSpy.calls.argsFor(0)[2];
             callback();
             expect(initSourceBufferSpy).toHaveBeenCalled();
-            expect(addListenOnceSpy.calls.argsFor(0)[1]).toBe('canplay');
+            expect(addListenOnceSpy.calls.argsFor(0)[1]).toBe('canplaythrough');
             expect(video.autoplay).toBe(true);
             expect(playSpy).not.toHaveBeenCalled();
           } finally {
@@ -1313,7 +1313,7 @@ describe('MediaSourceEngine', () => {
             const callback = addListenOnceSpy.calls.argsFor(0)[2];
             callback();
             expect(initSourceBufferSpy).toHaveBeenCalled();
-            expect(addListenOnceSpy.calls.argsFor(0)[1]).toBe('canplay');
+            expect(addListenOnceSpy.calls.argsFor(0)[1]).toBe('canplaythrough');
             expect(video.autoplay).toBe(false);
             expect(playSpy).toHaveBeenCalled();
           } finally {

package/test/player_unit.js

@@ -2633,6 +2633,9 @@ describe('Player', () => {
           variant.addExistingStream(1);  // audio
           variant.addExistingStream(2);  // video
         });
+        manifest.addTextStream(4, (stream) => {
+          stream.bandwidth = 10;
+        });
       });
 
       await player.load(fakeManifestUri, 0, fakeMimeType);
@@ -2649,11 +2652,15 @@ describe('Player', () => {
     });
 
     it('tracks info about current stream', () => {
-      const stats = player.getStats();
+      let stats = player.getStats();
       // Should have chosen the first of each type of stream.
       expect(stats.width).toBe(100);
       expect(stats.height).toBe(200);
       expect(stats.streamBandwidth).toBe(200);
+      const textTracks = player.getTextTracks();
+      player.selectTextTrack(textTracks[0]);
+      stats = player.getStats();
+      expect(stats.streamBandwidth).toBe(210);
     });
 
     it('tracks frame info', () => {
@@ -2768,7 +2775,7 @@ describe('Player', () => {
        * @param {!Array.<shaka.extern.TrackChoice>} additional
        */
       function checkHistory(additional) {
-        const prefix = {
+        const variantPrefix = {
           timestamp: jasmine.any(Number),
           id: 0,
           type: 'variant',
@@ -2776,10 +2783,18 @@ describe('Player', () => {
           bandwidth: 200,
         };
 
+        const textPrefix = {
+          timestamp: jasmine.any(Number),
+          id: 4,
+          type: 'text',
+          fromAdaptation: true,
+          bandwidth: null,
+        };
         const switchHistory = player.getStats().switchHistory;
 
-        expect(switchHistory[0]).toEqual(prefix);
-        expect(switchHistory.slice(1)).toEqual(additional);
+        expect(switchHistory[0]).toEqual(variantPrefix);
+        expect(switchHistory[1]).toEqual(textPrefix);
+        expect(switchHistory.slice(2)).toEqual(additional);
       }
 
       /**

package/test/text/ttml_text_parser_unit.js

@@ -638,8 +638,8 @@ describe('TtmlTextParser', () => {
             id: 'subtitleArea',
             viewportAnchorX: 50,
             viewportAnchorY: 16,
-            width: 100,
-            height: 100,
+            width: 50,
+            height: 84,
           },
           startTime: 62.05,
           endTime: 3723.2,
@@ -666,8 +666,8 @@ describe('TtmlTextParser', () => {
           region: {
             viewportAnchorX: 50,
             viewportAnchorY: 16,
-            width: 100,
-            height: 100,
+            width: 50,
+            height: 84,
           },
           startTime: 62.05,
           endTime: 3723.2,
@@ -694,8 +694,8 @@ describe('TtmlTextParser', () => {
           region: {
             viewportAnchorX: 50,
             viewportAnchorY: 16,
-            width: 100,
-            height: 100,
+            width: 50,
+            height: 84,
           },
           startTime: 62.05,
           endTime: 3723.2,
@@ -872,8 +872,8 @@ describe('TtmlTextParser', () => {
             viewportAnchorY: 16,
             regionAnchorX: 0,
             regionAnchorY: 0,
-            width: 100,
-            height: 100,
+            width: 50,
+            height: 84,
             heightUnits: CueRegion.units.PERCENTAGE,
             widthUnits: CueRegion.units.PERCENTAGE,
             viewportAnchorUnits: CueRegion.units.PERCENTAGE,
@@ -945,8 +945,8 @@ describe('TtmlTextParser', () => {
             id: 'subtitleArea',
             viewportAnchorX: 50,
             viewportAnchorY: 16,
-            width: 100,
-            height: 100,
+            width: 50,
+            height: 84,
           },
           startTime: 62.05,
           endTime: 3723.2,
@@ -973,8 +973,8 @@ describe('TtmlTextParser', () => {
           region: {
             viewportAnchorX: 50,
             viewportAnchorY: 16,
-            width: 100,
-            height: 100,
+            width: 50,
+            height: 84,
           },
           startTime: 62.05,
           endTime: 3723.2,
@@ -1001,8 +1001,8 @@ describe('TtmlTextParser', () => {
           region: {
             viewportAnchorX: 50,
             viewportAnchorY: 16,
-            width: 100,
-            height: 100,
+            width: 50,
+            height: 84,
           },
           startTime: 62.05,
           endTime: 3723.2,
@@ -1032,8 +1032,8 @@ describe('TtmlTextParser', () => {
             id: 'subtitleArea',
             viewportAnchorX: 12.2,
             viewportAnchorY: 50.005,
-            width: 100,
-            height: 100,
+            width: 87.8,
+            height: 49.995,
           },
           startTime: 62.05,
           endTime: 3723.2,

package/ui/controls.js

@@ -648,6 +648,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    * @export
    */
   isPiPAllowed() {
+    if (this.castProxy_.isCasting()) {
+      return false;
+    }
     if ('documentPictureInPicture' in window &&
         this.config_.preferDocumentPictureInPicture) {
       const video = /** @type {HTMLVideoElement} */(this.localVideo_);

package/ui/pip_button.js

@@ -98,8 +98,8 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
       this.onLeavePictureInPicture_();
     });
 
-    this.eventManager.listen(this.controls, 'caststatuschanged', (e) => {
-      this.onCastStatusChange_(e);
+    this.eventManager.listen(this.controls, 'caststatuschanged', () => {
+      this.onTracksChanged_();
     });
 
     this.eventManager.listen(this.player, 'trackschanged', () => {
@@ -164,25 +164,6 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
         this.localization.resolve(currentPipState);
   }
 
-  /**
-   * @param {Event} e
-   * @private
-   */
-  onCastStatusChange_(e) {
-    const isCasting = e['newStatus'];
-
-    if (isCasting) {
-      // Picture-in-picture is not applicable if we're casting
-      if (this.controls.isPiPAllowed()) {
-        shaka.ui.Utils.setDisplay(this.pipButton_, false);
-      }
-    } else {
-      if (this.controls.isPiPAllowed()) {
-        shaka.ui.Utils.setDisplay(this.pipButton_, true);
-      }
-    }
-  }
-
 
   /**
    * Display the picture-in-picture button only when the content contains video.
@@ -194,6 +175,9 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
   async onTracksChanged_() {
     if (!this.controls.isPiPAllowed()) {
       shaka.ui.Utils.setDisplay(this.pipButton_, false);
+      if (this.controls.isPiPEnabled()) {
+        await this.controls.togglePiP();
+      }
     } else if (this.player && this.player.isAudioOnly()) {
       shaka.ui.Utils.setDisplay(this.pipButton_, false);
       if (this.controls.isPiPEnabled()) {

package/ui/playback_rate_selection.js

@@ -44,6 +44,10 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
           this.updateLocalizedStrings_();
         });
 
+    this.eventManager.listen(this.player, 'loaded', () => {
+      this.updatePlaybackRateSelection_(this.player.getPlaybackRate());
+    });
+
     this.eventManager.listen(this.player, 'ratechange', () => {
       this.updatePlaybackRateSelection_(this.player.getPlaybackRate());
     });