shaka-player 3.1.0 → 3.1.4

package/test/util/periods_unit.js

@@ -39,6 +39,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en', /* channels= */ 2),
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: 'ad',
@@ -49,6 +50,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en', /* channels= */ 2),
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -117,6 +119,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en', /* channels= */ 2),
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: 'main',
@@ -130,6 +133,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en', /* channels= */ 2),
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -194,6 +198,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en'),
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '2',
@@ -204,6 +209,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en'),
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -242,6 +248,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en'),
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '2',
@@ -252,6 +259,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en'),
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -289,6 +297,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('fr', /* channels= */ 2, /* primary= */ false),
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: 'ad',
@@ -299,6 +308,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en'),
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: 'show2',
@@ -311,6 +321,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('fr', /* channels= */ 2, /* primary= */ true),
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -361,6 +372,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('es'),
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: 'show2',
@@ -371,6 +383,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en'),
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -411,6 +424,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en'),
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -429,7 +443,6 @@ describe('PeriodCombiner', () => {
     expect(highBandwidth.video.originalId).toBe('480');
   });
 
-
   it('Filters out duplicate streams', async () => {
     // v1 and v3 are duplicates
     const v1 = makeVideoStream(1280);
@@ -496,6 +509,16 @@ describe('PeriodCombiner', () => {
     t3.originalId = 't3';
     t3.roles = ['role1'];
 
+    // i1 and i3 are duplicates.
+    const i1 = makeImageStream(240);
+    i1.originalId = 'i1';
+
+    const i2 = makeImageStream(480);
+    i2.originalId = 'i2';
+
+    const i3 = makeImageStream(240);
+    i3.originalId = 'i3';
+
     /** @type {!Array.<shaka.util.PeriodCombiner.Period>} */
     const periods = [
       {
@@ -517,6 +540,11 @@ describe('PeriodCombiner', () => {
           t2,
           t3,
         ],
+        imageStreams: [
+          i1,
+          i2,
+          i3,
+        ],
       },
     ];
 
@@ -544,9 +572,61 @@ describe('PeriodCombiner', () => {
     for (const id of textIds) {
       expect(id).not.toBe('t3');
     }
+
+    const imageStreams = combiner.getImageStreams();
+    expect(imageStreams.length).toBe(2);
+
+    // i3 should've been filtered out
+    const imageIds = imageStreams.map((i) => i.originalId);
+    for (const id of imageIds) {
+      expect(id).not.toBe('i3');
+    }
   });
 
-  it('Text track gaps', async () => {
+  // Regression test for #3383, where we failed on multi-period content with
+  // multiple image streams per period.
+  it('Can handle multiple image streams', async () => {
+    /** @type {!Array.<shaka.util.PeriodCombiner.Period>} */
+    const periods = [
+      {
+        id: '1',
+        videoStreams: [
+          makeVideoStream(1280),
+        ],
+        audioStreams: [],
+        textStreams: [],
+        imageStreams: [
+          makeImageStream(240),
+          makeImageStream(480),
+        ],
+      },
+      {
+        id: '2',
+        videoStreams: [
+          makeVideoStream(1280),
+        ],
+        audioStreams: [],
+        textStreams: [],
+        imageStreams: [
+          makeImageStream(240),
+          makeImageStream(480),
+        ],
+      },
+    ];
+
+    await combiner.combinePeriods(periods, /* isDynamic= */ true);
+
+    const imageStreams = combiner.getImageStreams();
+    expect(imageStreams.length).toBe(2);
+
+    const imageIds = imageStreams.map((i) => i.originalId);
+    expect(imageIds).toEqual([
+      '240,240',
+      '480,480',
+    ]);
+  });
+
+  it('handles text track gaps', async () => {
     /** @type {!Array.<shaka.util.PeriodCombiner.Period>} */
     const periods = [
       {
@@ -560,6 +640,7 @@ describe('PeriodCombiner', () => {
         textStreams: [
           makeTextStream('en'),
         ],
+        imageStreams: [],
       },
       {
         id: '2',
@@ -572,6 +653,7 @@ describe('PeriodCombiner', () => {
         textStreams: [
           /* No text streams */
         ],
+        imageStreams: [],
       },
       {
         id: '3',
@@ -585,6 +667,7 @@ describe('PeriodCombiner', () => {
           makeTextStream('en'),
           makeTextStream('es'),
         ],
+        imageStreams: [],
       },
     ];
 
@@ -608,6 +691,70 @@ describe('PeriodCombiner', () => {
     expect(english.originalId).toBe('en,,en');
   });
 
+  it('handles image track gaps', async () => {
+    /** @type {!Array.<shaka.util.PeriodCombiner.Period>} */
+    const periods = [
+      {
+        id: '1',
+        videoStreams: [
+          makeVideoStream(1080),
+        ],
+        audioStreams: [
+          makeAudioStream('en'),
+        ],
+        textStreams: [],
+        imageStreams: [
+          makeImageStream(240),
+        ],
+      },
+      {
+        id: '2',
+        videoStreams: [
+          makeVideoStream(1080),
+        ],
+        audioStreams: [
+          makeAudioStream('en'),
+        ],
+        textStreams: [],
+        imageStreams: [
+          /* No image streams in this period */
+        ],
+      },
+      {
+        id: '3',
+        videoStreams: [
+          makeVideoStream(1080),
+        ],
+        audioStreams: [
+          makeAudioStream('en'),
+        ],
+        textStreams: [],
+        imageStreams: [
+          makeImageStream(240),
+          makeImageStream(480),
+        ],
+      },
+    ];
+
+    await combiner.combinePeriods(periods, /* isDynamic= */ false);
+    const imageStreams = combiner.getImageStreams();
+    expect(imageStreams).toEqual(jasmine.arrayWithExactContents([
+      jasmine.objectContaining({
+        height: 240,
+      }),
+      jasmine.objectContaining({
+        height: 480,
+      }),
+    ]));
+
+    // We can use the originalId field to see what each track is composed of.
+
+    const i240 = imageStreams.find((s) => s.height == 240);
+    const i480 = imageStreams.find((s) => s.height == 480);
+    expect(i240.originalId).toBe('240,,240');
+    expect(i480.originalId).toBe('240,,480');
+  });
+
   it('Disjoint audio channels', async () => {
     /** @type {!Array.<shaka.util.PeriodCombiner.Period>} */
     const periods = [
@@ -620,6 +767,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en', /* channels= */ 6),
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '2',
@@ -630,6 +778,7 @@ describe('PeriodCombiner', () => {
           makeAudioStream('en', /* channels= */ 2),
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -666,6 +815,7 @@ describe('PeriodCombiner', () => {
           makeAudioStreamWithSampleRate(48000),
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '2',
@@ -676,6 +826,7 @@ describe('PeriodCombiner', () => {
           makeAudioStreamWithSampleRate(44100),
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -712,6 +863,7 @@ describe('PeriodCombiner', () => {
           makeAudioStreamWithSampleRate(44100),
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '2',
@@ -722,6 +874,7 @@ describe('PeriodCombiner', () => {
           makeAudioStreamWithSampleRate(48000),
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -752,6 +905,7 @@ describe('PeriodCombiner', () => {
         ],
         audioStreams: [],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '2',
@@ -761,6 +915,7 @@ describe('PeriodCombiner', () => {
         ],
         audioStreams: [],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -805,6 +960,7 @@ describe('PeriodCombiner', () => {
           stream2,
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '1',
@@ -816,6 +972,7 @@ describe('PeriodCombiner', () => {
           stream4,
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -864,6 +1021,7 @@ describe('PeriodCombiner', () => {
           stream2,
         ],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '2',
@@ -875,6 +1033,7 @@ describe('PeriodCombiner', () => {
           stream4,
         ],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -999,24 +1158,28 @@ describe('PeriodCombiner', () => {
         videoStreams: [v1, v2, v3, v4, v5],
         audioStreams: [],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '2',
         videoStreams: [v6, v7, v8, v9, v10],
         audioStreams: [],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '3',
         videoStreams: [v11, v12, v13, v14, v15],
         audioStreams: [],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '4',
         videoStreams: [v16, v17, v18, v19, v20],
         audioStreams: [],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '5',
@@ -1024,6 +1187,7 @@ describe('PeriodCombiner', () => {
         videoStreams: [v1, v2, v3, v4, v5],
         audioStreams: [],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '6',
@@ -1031,6 +1195,7 @@ describe('PeriodCombiner', () => {
         videoStreams: [v6, v7, v8, v9, v10],
         audioStreams: [],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '7',
@@ -1038,6 +1203,7 @@ describe('PeriodCombiner', () => {
         videoStreams: [v11, v12, v13, v14, v15],
         audioStreams: [],
         textStreams: [],
+        imageStreams: [],
       },
       {
         id: '8',
@@ -1045,6 +1211,7 @@ describe('PeriodCombiner', () => {
         videoStreams: [v16, v17, v18, v19, v20],
         audioStreams: [],
         textStreams: [],
+        imageStreams: [],
       },
       // Adding the 1st period again since it was the one that used to
       // cause trouble when repeated.
@@ -1054,6 +1221,7 @@ describe('PeriodCombiner', () => {
         videoStreams: [v1, v2, v3, v4, v5],
         audioStreams: [],
         textStreams: [],
+        imageStreams: [],
       },
     ];
 
@@ -1181,6 +1349,26 @@ describe('PeriodCombiner', () => {
     return streamGenerator.build_();
   }
 
+  /**
+   * @param {number} height
+   * @return {shaka.extern.Stream}
+   * @suppress {accessControls}
+   */
+  function makeImageStream(height) {
+    const width = height * 4 / 3;
+    const streamGenerator = new shaka.test.ManifestGenerator.Stream(
+        /* manifest= */ null,
+        /* isPartial= */ false,
+        /* id= */ nextId++,
+        /* type= */ shaka.util.ManifestParserUtils.ContentType.IMAGE,
+        /* lang= */ 'und');
+    streamGenerator.size(width, height);
+    streamGenerator.originalId = height.toString();
+    streamGenerator.mime('image/jpeg');
+    streamGenerator.tilesLayout = '1x1';
+    return streamGenerator.build_();
+  }
+
   /**
    * @param {number} height
    * @param {string} language

package/test/util/stream_utils_unit.js

@@ -16,14 +16,14 @@ describe('StreamUtils', () => {
   /** @type {!jasmine.Spy} */
   let decodingInfoSpy;
 
-  const originalDecodingInfo = navigator.mediaCapabilities.decodingInfo;
+  const originalDecodingInfo = window.shakaMediaCapabilities.decodingInfo;
 
   beforeEach(() => {
     decodingInfoSpy = jasmine.createSpy('decodingInfo');
   });
 
   afterEach(() => {
-    navigator.mediaCapabilities.decodingInfo = originalDecodingInfo;
+    window.shakaMediaCapabilities.decodingInfo = originalDecodingInfo;
   });
 
   describe('filterStreamsByLanguageAndRole', () => {
@@ -488,14 +488,30 @@ describe('StreamUtils', () => {
       });
 
       await StreamUtils.getDecodingInfosForVariants(manifest.variants,
-          /* usePersistentLicenses= */false);
+          /* usePersistentLicenses= */false, /* srcEquals= */ false);
+      expect(manifest.variants.length).toBeTruthy();
+      expect(manifest.variants[0].decodingInfos.length).toBe(1);
+      expect(manifest.variants[0].decodingInfos[0].supported).toBeTruthy();
+    });
+
+    it('for srcEquals content', async () => {
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        manifest.addVariant(0, (variant) => {
+          variant.addVideo(1, (stream) => {
+            stream.mime('video/mp4', 'avc1.4d400d');
+          });
+        });
+      });
+
+      await StreamUtils.getDecodingInfosForVariants(manifest.variants,
+          /* usePersistentLicenses= */false, /* srcEquals= */ true);
       expect(manifest.variants.length).toBeTruthy();
       expect(manifest.variants[0].decodingInfos.length).toBe(1);
       expect(manifest.variants[0].decodingInfos[0].supported).toBeTruthy();
     });
 
     it('handles decodingInfo exception', async () => {
-      navigator.mediaCapabilities.decodingInfo =
+      window.shakaMediaCapabilities.decodingInfo =
           shaka.test.Util.spyFunc(decodingInfoSpy);
       // If decodingInfo() fails, setDecodingInfo should finish without throwing
       // an exception, and the variant should have no decodingInfo result.
@@ -517,10 +533,45 @@ describe('StreamUtils', () => {
       });
 
       await StreamUtils.getDecodingInfosForVariants(manifest.variants,
-          /* usePersistentLicenses= */false);
+          /* usePersistentLicenses= */false, /* srcEquals= */ false);
       expect(manifest.variants.length).toBe(1);
       expect(manifest.variants[0].decodingInfos.length).toBe(0);
     });
+
+    it('includes transferFunction in config when hdr', async () => {
+      window.shakaMediaCapabilities.decodingInfo =
+          shaka.test.Util.spyFunc(decodingInfoSpy);
+
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        manifest.addVariant(0, (variant) => {
+          variant.addVideo(0, (stream) => {
+            stream.mime('video/mp4', 'avc1.640028');
+            stream.hdr = 'SDR';
+          });
+        });
+        manifest.addVariant(1, (variant) => {
+          variant.addVideo(1, (stream) => {
+            stream.mime('video/mp4', 'hvc1.2.4.L150.90');
+            stream.hdr = 'PQ';
+          });
+        });
+        manifest.addVariant(2, (variant) => {
+          variant.addVideo(2, (stream) => {
+            stream.mime('video/mp4', 'hvc1.2.4.L153.B0');
+            stream.hdr = 'HLG';
+          });
+        });
+      });
+
+      await StreamUtils.getDecodingInfosForVariants(manifest.variants,
+          /* usePersistentLicenses= */ false, /* srcEquals= */ false);
+      expect(decodingInfoSpy.calls.argsFor(0)[0].video.transferFunction)
+          .toBe('srgb');
+      expect(decodingInfoSpy.calls.argsFor(1)[0].video.transferFunction)
+          .toBe('pq');
+      expect(decodingInfoSpy.calls.argsFor(2)[0].video.transferFunction)
+          .toBe('hlg');
+    });
   });
 
   describe('filterManifest', () => {

package/ui/airplay_button.js

@@ -44,6 +44,11 @@ shaka.ui.AirPlayButton = class extends shaka.ui.Element {
     this.airplayIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.AIRPLAY;
     this.airplayButton_.appendChild(this.airplayIcon_);
 
+    // Don't show the button if AirPlay is not supported.
+    if (!window.WebKitPlaybackTargetAvailabilityEvent) {
+      this.airplayButton_.classList.add('shaka-hidden');
+    }
+
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
     label.classList.add('shaka-overflow-menu-only');

package/ui/big_play_button.js

@@ -7,6 +7,7 @@
 
 goog.provide('shaka.ui.BigPlayButton');
 
+goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.PlayButton');
 goog.requireType('shaka.ui.Controls');
 
@@ -40,4 +41,13 @@ shaka.ui.BigPlayButton = class extends shaka.ui.PlayButton {
       this.button.setAttribute('icon', 'pause');
     }
   }
+
+
+  /** @override */
+  updateAriaLabel() {
+    const LocIds = shaka.ui.Locales.Ids;
+    const label = this.isPaused() ? LocIds.PLAY : LocIds.PAUSE;
+
+    this.button.ariaLabel = this.localization.resolve(label);
+  }
 };

package/ui/cast_button.js

@@ -102,9 +102,8 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
       } catch (error) {
         this.castButton_.disabled = false;
         if (error.code != shaka.util.Error.Code.CAST_CANCELED_BY_USER) {
-          this.controls.dispatchEvent(new shaka.util.FakeEvent('error', {
-            detail: error,
-          }));
+          this.controls.dispatchEvent(new shaka.util.FakeEvent(
+              'error', (new Map()).set('detail', error)));
         }
       }
     }

package/ui/controls.js

@@ -198,6 +198,10 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    * @export
    */
   async destroy() {
+    if (document.pictureInPictureElement == this.localVideo_) {
+      await document.exitPictureInPicture();
+    }
+
     if (this.eventManager_) {
       this.eventManager_.release();
       this.eventManager_ = null;
@@ -569,9 +573,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
           }
         }
       } catch (error) {
-        this.dispatchEvent(new shaka.util.FakeEvent('error', {
-          detail: error,
-        }));
+        this.dispatchEvent(new shaka.util.FakeEvent(
+            'error', (new Map()).set('detail', error)));
       }
     }
   }
@@ -687,7 +690,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     });
 
     this.eventManager_.listen(this.controlsContainer_, 'dblclick', () => {
-      if (this.config_.doubleClickForFullscreen) {
+      if (this.config_.doubleClickForFullscreen && document.fullscreenEnabled) {
         this.toggleFullScreen();
       }
     });
@@ -1158,9 +1161,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
   /** @private */
   onCastStatusChange_() {
     const isCasting = this.castProxy_.isCasting();
-    this.dispatchEvent(new shaka.util.FakeEvent('caststatuschanged', {
-      newStatus: isCasting,
-    }));
+    this.dispatchEvent(new shaka.util.FakeEvent(
+        'caststatuschanged', (new Map()).set('newStatus', isCasting)));
 
     if (isCasting) {
       this.controlsContainer_.setAttribute('casting', 'true');

package/ui/less/containers.less

@@ -157,6 +157,9 @@
     /* 32px tall controls. */
     height: 32px;
 
+    /* Consistent alignment of buttons. */
+    line-height: 0.5;
+
     /* Consistent margins (external) and padding (internal) between controls. */
     .bottom-panels-elements-margin();
 
@@ -226,11 +229,13 @@
   transition-delay: 500ms;
 
   /* These are defaults which are overridden by JS or cue styles. */
-  span {
-    font-size: 20px;
-    line-height: 1.4;  // relative to font size.
-    background-color: rgba(0, 0, 0, 0.8);
-    color: rgb(255, 255, 255);
+  font-size: 20px;
+  line-height: 1.4;  // relative to font size.
+  color: rgb(255, 255, 255);
+
+  span.shaka-text-wrapper {
+    display: inline;
+    background: none;
   }
 }