shaka-player 4.6.8 → 4.6.9

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();
   }
 
   /**
@@ -6785,7 +6814,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.9' + '-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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shaka-player",
   "description": "DASH/EME video player library",
-  "version": "4.6.8",
+  "version": "4.6.9",
   "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/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/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());
     });