shaka-player 4.3.13 → 4.3.14

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,
@@ -1238,6 +1238,35 @@ describe('TtmlTextParser', () => {
         });
   });
 
+  it('supports smpte:backgroundImage attribute with url', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 62.05,
+            endTime: 3723.2,
+            payload: '',
+          },
+        ],
+        '<tt ' +
+        'xmlns:ttm="http://www.w3.org/ns/ttml#metadata" ' +
+        'xmlns:smpte="http://www.smpte-ra.org/schemas/2052-1/2010/smpte-tt">' +
+        '<metadata>' +
+        '<smpte:image imageType="PNG" encoding="Base64" xml:id="img_0">' +
+        'base64EncodedImage</smpte:image>' +
+        '</metadata>' +
+        '<body><div smpte:backgroundImage="img_0.png">' +
+        '<p begin="01:02.05" end="01:02:03.200"></p>' +
+        '</div></body></tt>',
+        {periodStart: 0, segmentStart: 60, segmentEnd: 3730, vttOffset: 0},
+        {startTime: 62.05, endTime: 3723.2},
+        {
+          startTime: 62.05,
+          endTime: 3723.2,
+          backgroundImage: 'foo://bar/img_0.png',
+          isContainer: false,
+        });
+  });
+
   it('supports smpte:backgroundImage attribute in div element', () => {
     verifyHelper(
         [],
@@ -2060,7 +2089,8 @@ describe('TtmlTextParser', () => {
   function verifyHelper(cues, text, time, bodyProperties, divProperties) {
     const data =
         shaka.util.BufferUtils.toUint8(shaka.util.StringUtils.toUTF8(text));
-    const result = new shaka.text.TtmlTextParser().parseMedia(data, time);
+    const result = new shaka.text.TtmlTextParser()
+        .parseMedia(data, time, 'foo://bar');
     shaka.test.TtmlUtils.verifyHelper(
         cues, result, bodyProperties, divProperties);
   }
@@ -2087,7 +2117,8 @@ describe('TtmlTextParser', () => {
     expect(() => {
       new shaka.text.TtmlTextParser().parseMedia(
           shaka.util.BufferUtils.toUint8(data),
-          {periodStart: 0, segmentStart: 0, segmentEnd: 10, vttOffset: 0});
+          {periodStart: 0, segmentStart: 0, segmentEnd: 10, vttOffset: 0},
+          'foo://bar');
     }).toThrow(error);
   }
 });

package/test/text/ui_text_displayer_unit.js

@@ -605,4 +605,13 @@ describe('UITextDisplayer', () => {
         (e) => e.nodeType == Node.ELEMENT_NODE);
     expect(childrenOfTwo.length).toBe(3);
   });
+
+  it('textDisplayer does not crash if destroy is called more than once', () => {
+    expect(videoContainer.childNodes.length).toBe(1);
+
+    textDisplayer.destroy();
+    textDisplayer.destroy();
+
+    expect(videoContainer.childNodes.length).toBe(0);
+  });
 });

package/test/util/buffer_utils_unit.js

@@ -42,7 +42,7 @@ describe('BufferUtils', () => {
 
     it('compares with same buffer', () => {
       const a = new Uint8Array([0, 1, 2, 3]);
-      const b = new Uint16Array(a.buffer);
+      const b = BufferUtils.toUint16(a);
       expect(BufferUtils.equal(a, b)).toBe(true);
     });
 

package/test/util/periods_unit.js

@@ -598,6 +598,55 @@ describe('PeriodCombiner', () => {
     }
   });
 
+  // Regression test for #6054, where we failed on multi-period content with
+  // different numbers of forced-subtitle streams per period.
+  it('Does not combine subtitle and forced-subtitle tracks', async () => {
+    const videoStreams = [makeVideoStream(1280)];
+    const audioStreams = [makeAudioStream('en', /* channels= */ 2)];
+    const imageStreams = [];
+
+    const forcedSubtitle = makeTextStream('de');
+    forcedSubtitle.roles = ['forced-subtitle'];
+    forcedSubtitle.forced = true;
+
+    const subtitle = makeTextStream('de');
+    subtitle.roles = ['subtitle'];
+
+    /** @type {!Array.<shaka.util.PeriodCombiner.Period>} */
+    const periods = [
+      {
+        id: '1',
+        videoStreams,
+        audioStreams,
+        textStreams: [
+          forcedSubtitle,
+          subtitle,
+        ],
+        imageStreams,
+      },
+      {
+        id: '2',
+        videoStreams,
+        audioStreams,
+        textStreams: [
+          subtitle,
+        ],
+        imageStreams,
+      },
+      {
+        id: '3',
+        videoStreams,
+        audioStreams,
+        textStreams: [],
+        imageStreams,
+      },
+    ];
+
+    await combiner.combinePeriods(periods, /* isDynamic= */ true);
+    const textStreams = combiner.getTextStreams();
+    expect(textStreams.every((s) => s.roles.length === 1)).toBe(true);
+  });
+
   // Regression test for #3383, where we failed on multi-period content with
   // multiple image streams per period.
   it('Can handle multiple image streams', async () => {
@@ -1004,6 +1053,70 @@ describe('PeriodCombiner', () => {
     expect(audio2.originalId).toBe('2,4');
   });
 
+  it('Matches streams with labels', async () => {
+    const stream1 = makeAudioStream('en', /* channels= */ 2);
+    stream1.originalId = '1';
+    stream1.bandwidth = 129597;
+    stream1.codecs = 'mp4a.40.2';
+
+    const stream2 = makeAudioStream('en', /* channels= */ 2);
+    stream2.originalId = '2';
+    stream2.bandwidth = 129637;
+    stream2.codecs = 'mp4a.40.2';
+    stream2.label = 'description';
+
+    const stream3 = makeAudioStream('en', /* channels= */ 2);
+    stream3.originalId = '3';
+    stream3.bandwidth = 131037;
+    stream3.codecs = 'mp4a.40.2';
+
+    const stream4 = makeAudioStream('en', /* channels= */ 2);
+    stream4.originalId = '4';
+    stream4.bandwidth = 131034;
+    stream4.codecs = 'mp4a.40.2';
+    stream4.label = 'description';
+
+    /** @type {!Array.<shaka.util.PeriodCombiner.Period>} */
+    const periods = [
+      {
+        id: '0',
+        videoStreams: [
+          makeVideoStream(1080),
+        ],
+        audioStreams: [
+          stream1,
+          stream2,
+        ],
+        textStreams: [],
+        imageStreams: [],
+      },
+      {
+        id: '1',
+        videoStreams: [
+          makeVideoStream(1080),
+        ],
+        audioStreams: [
+          stream3,
+          stream4,
+        ],
+        textStreams: [],
+        imageStreams: [],
+      },
+    ];
+
+    await combiner.combinePeriods(periods, /* isDynamic= */ true);
+    const variants = combiner.getVariants();
+    expect(variants.length).toBe(2);
+    // We can use the originalId field to see what each track is composed of.
+    const audio1 = variants[0].audio;
+    expect(audio1.label).toBe(null);
+    expect(audio1.originalId).toBe('1,3');
+
+    const audio2 = variants[1].audio;
+    expect(audio2.label).toBe('description');
+    expect(audio2.originalId).toBe('2,4');
+  });
+
   it('Matches streams with related codecs', async () => {
     const stream1 = makeVideoStream(1080);
     stream1.originalId = '1';

package/third_party/closure-uri/uri.js

@@ -8,7 +8,7 @@
  *
  * Use new goog.Uri(string) to parse a URI string.
  *
- * e.g: <code>var myUri = new goog.Uri(window.location);</code>
+ * e.g.: <code>var myUri = new goog.Uri(window.location);</code>
  *
  * Implements RFC 3986 for parsing/formatting URIs.
  * http://www.ietf.org/rfc/rfc3986.txt

package/ui/externs/ui.js

@@ -443,3 +443,27 @@ shaka.extern.IUISeekBar.Factory = class {
    */
   create(rootElement, controls) {}
 };
+
+/**
+ * @interface
+ * @exportDoc
+ */
+shaka.extern.IUIPlayButton = class {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    /**
+     * @protected {!HTMLButtonElement}
+     * @exportDoc
+     */
+    this.button;
+  }
+
+  /** @return {boolean} */
+  isPaused() {}
+
+  /** @return {boolean} */
+  isEnded() {}
+};

package/ui/language_utils.js

@@ -55,7 +55,11 @@ shaka.ui.LanguageUtils = class {
       }
     };
 
-    const getCombination = (language, rolesString) => {
+    const getCombination = (language, rolesString, label) => {
+      if (label &&
+          trackLabelFormat == shaka.ui.Overlay.TrackLabelFormat.LABEL) {
+        return language + ': ' + label + ': ' + rolesString;
+      }
       return language + ': ' + rolesString;
     };
 
@@ -72,7 +76,8 @@ shaka.ui.LanguageUtils = class {
     /** @type {!Set.<string>} */
     const combinationsMade = new Set();
     const selectedCombination = selectedTrack ? getCombination(
-        selectedTrack.language, getRolesString(selectedTrack)) : '';
+        selectedTrack.language, getRolesString(selectedTrack),
+        selectedTrack.label) : '';
 
     for (const track of tracks) {
       const language = track.language;
@@ -80,7 +85,8 @@ shaka.ui.LanguageUtils = class {
       const LocIds = shaka.ui.Locales.Ids;
       const forcedString = localization.resolve(LocIds.SUBTITLE_FORCED);
       const rolesString = getRolesString(track);
-      const combinationName = getCombination(language, rolesString);
+      const label = track.label;
+      const combinationName = getCombination(language, rolesString, label);
       if (combinationsMade.has(combinationName)) {
         continue;
       }
@@ -124,8 +130,8 @@ shaka.ui.LanguageUtils = class {
           }
           break;
         case shaka.ui.Overlay.TrackLabelFormat.LABEL:
-          if (track.label) {
-            span.textContent = track.label;
+          if (label) {
+            span.textContent = label;
           } else {
             // Fallback behavior. This probably shouldn't happen.
             shaka.log.alwaysWarn('Track #' + track.id + ' does not have a ' +

package/ui/play_button.js

@@ -16,6 +16,7 @@ goog.requireType('shaka.ui.Controls');
 
 /**
  * @extends {shaka.ui.Element}
+ * @implements {shaka.extern.IUIPlayButton}
  * @export
  */
 shaka.ui.PlayButton = class extends shaka.ui.Element {
@@ -72,6 +73,11 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
       this.updateIcon();
     });
 
+    this.eventManager.listen(this.adManager, AdManager.AD_STOPPED, () => {
+      this.updateAriaLabel();
+      this.updateIcon();
+    });
+
     this.eventManager.listen(this.button, 'click', () => {
       if (this.ad && this.ad.isLinear()) {
         this.controls.playPauseAd();
@@ -90,6 +96,7 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
   /**
    * @return {boolean}
    * @protected
+   * @override
    */
   isPaused() {
     if (this.ad && this.ad.isLinear()) {
@@ -99,6 +106,19 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
     return this.controls.presentationIsPaused();
   }
 
+  /**
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  isEnded() {
+    if (this.ad && this.ad.isLinear()) {
+      return false;
+    }
+
+    return this.video.ended;
+  }
+
   /**
    * Called when the button's aria label needs to change.
    * To be overridden by subclasses.

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());
     });

package/ui/presentation_time.js

@@ -64,7 +64,6 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
   updateTime_() {
     const isSeeking = this.controls.isSeeking();
     let displayTime = this.controls.getDisplayTime();
-    const duration = this.video.duration;
     const seekRange = this.player.seekRange();
     const seekRangeSize = seekRange.end - seekRange.start;
     const Utils = shaka.ui.Utils;
@@ -89,11 +88,12 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
         this.currentTime_.disabled = true;
       }
     } else {
-      const showHour = duration >= 3600;
+      const showHour = seekRangeSize >= 3600;
 
-      let value = Utils.buildTimeString(displayTime, showHour);
-      if (duration) {
-        value += ' / ' + Utils.buildTimeString(duration, showHour);
+      const currentTime = Math.max(0, displayTime - seekRange.start);
+      let value = Utils.buildTimeString(currentTime, showHour);
+      if (seekRangeSize) {
+        value += ' / ' + Utils.buildTimeString(seekRangeSize, showHour);
       }
       this.setValue_(value);
       this.currentTime_.disabled = true;

package/ui/small_play_button.js

@@ -38,7 +38,7 @@ shaka.ui.SmallPlayButton = class extends shaka.ui.PlayButton {
   /** @override */
   updateIcon() {
     const Icons = shaka.ui.Enums.MaterialDesignIcons;
-    if (this.video.ended) {
+    if (this.isEnded()) {
       this.button.textContent = Icons.REPLAY;
     } else {
       this.button.textContent = this.isPaused() ? Icons.PLAY : Icons.PAUSE;
@@ -48,7 +48,7 @@ shaka.ui.SmallPlayButton = class extends shaka.ui.PlayButton {
   /** @override */
   updateAriaLabel() {
     const LocIds = shaka.ui.Locales.Ids;
-    if (this.video.ended) {
+    if (this.isEnded()) {
       this.button.ariaLabel = this.localization.resolve(LocIds.REPLAY);
     } else {
       const label = this.isPaused() ? LocIds.PLAY : LocIds.PAUSE;

package/ui/volume_bar.js

@@ -32,6 +32,10 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
     /** @private {!shaka.extern.UIConfiguration} */
     this.config_ = this.controls.getConfig();
 
+    // We use a range of 100 to avoid problems with Firefox.
+    // See https://github.com/shaka-project/shaka-player/issues/3987
+    this.setRange(0, 100);
+
     this.eventManager.listen(this.video,
         'volumechange',
         () => this.onPresentationVolumeChange_());
@@ -74,9 +78,9 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
    */
   onChange() {
     if (this.ad && this.ad.isLinear()) {
-      this.ad.setVolume(this.getValue());
+      this.ad.setVolume(this.getValue() / 100);
     } else {
-      this.video.volume = this.getValue();
+      this.video.volume = this.getValue() / 100;
       if (this.video.volume == 0) {
         this.video.muted = true;
       } else {
@@ -90,7 +94,7 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
     if (this.video.muted) {
       this.setValue(0);
     } else {
-      this.setValue(this.video.volume);
+      this.setValue(this.video.volume * 100);
     }
 
     this.updateColors_();
@@ -102,7 +106,7 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
         'This.ad should exist at this point!');
 
     const volume = this.ad.getVolume();
-    this.setValue(volume);
+    this.setValue(volume * 100);
     this.updateColors_();
   }
 
@@ -110,8 +114,8 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
   updateColors_() {
     const colors = this.config_.volumeBarColors;
     const gradient = ['to right'];
-    gradient.push(colors.level + (this.getValue() * 100) + '%');
-    gradient.push(colors.base + (this.getValue() * 100) + '%');
+    gradient.push(colors.level + this.getValue() + '%');
+    gradient.push(colors.base + this.getValue() + '%');
     gradient.push(colors.base + '100%');
 
     this.container.style.background =