shaka-player 4.4.3 → 4.5.0

package/test/util/stream_utils_unit.js

@@ -636,7 +636,8 @@ describe('StreamUtils', () => {
 
       const noVariant = null;
       await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, noVariant, manifest);
+          fakeDrmEngine, noVariant, manifest,
+          shaka.config.CodecSwitchingStrategy.RELOAD);
 
       // Covers a regression in which we would remove streams with codecs.
       // The last two streams should be removed because their full MIME types
@@ -673,7 +674,8 @@ describe('StreamUtils', () => {
 
       const noVariant = null;
       await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, noVariant, manifest);
+          fakeDrmEngine, noVariant, manifest,
+          shaka.config.CodecSwitchingStrategy.RELOAD);
 
       // Covers a regression in which we would remove streams with codecs.
       // The first 4 streams should be there because they are always supported.
@@ -691,6 +693,38 @@ describe('StreamUtils', () => {
           jasmine.objectContaining({id: 5}));
     });
 
+    it('does not filter manifest when codec switching is enabled', async () => {
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        manifest.addVariant(1, (variant) => {
+          variant.addAudio(10, (stream) => {
+            stream.codecs = 'mp4a.69';
+          });
+          variant.addVideo(11, (stream) => {
+            stream.codecs = 'avc1';
+          });
+        });
+      });
+
+      const originalFilterManifestByCurrentVariant =
+          shaka.util.StreamUtils.filterManifestByCurrentVariant;
+
+      try {
+        const filterManifestByCurrentVariantSpy =
+          jasmine.createSpy('filterManifestByCurrentVariant');
+        shaka.util.StreamUtils.filterManifestByCurrentVariant =
+          shaka.test.Util.spyFunc(filterManifestByCurrentVariantSpy);
+
+        await shaka.util.StreamUtils.filterManifest(
+            fakeDrmEngine, /* currentVariant= */ null, manifest,
+            shaka.config.CodecSwitchingStrategy.RELOAD);
+
+        expect(filterManifestByCurrentVariantSpy).not.toHaveBeenCalled();
+      } finally {
+        shaka.util.StreamUtils.filterManifestByCurrentVariant =
+          originalFilterManifestByCurrentVariant;
+      }
+    });
+
     it('filters transport streams', async () => {
       manifest = shaka.test.ManifestGenerator.generate((manifest) => {
         manifest.addVariant(0, (variant) => {
@@ -705,7 +739,8 @@ describe('StreamUtils', () => {
       });
 
       await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest);
+          fakeDrmEngine, /* currentVariant= */ null, manifest,
+          shaka.config.CodecSwitchingStrategy.RELOAD);
 
       // Covers a regression in which we would remove streams with codecs.
       // The last two streams should be removed because their full MIME types
@@ -732,7 +767,8 @@ describe('StreamUtils', () => {
       });
 
       await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest);
+          fakeDrmEngine, /* currentVariant= */ null, manifest,
+          shaka.config.CodecSwitchingStrategy.RELOAD);
       expect(manifest.variants.length).toBe(1);
     });
 
@@ -749,7 +785,8 @@ describe('StreamUtils', () => {
       });
 
       await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest);
+          fakeDrmEngine, /* currentVariant= */ null, manifest,
+          shaka.config.CodecSwitchingStrategy.RELOAD);
 
       expect(manifest.variants.length).toBe(1);
     });
@@ -813,148 +850,245 @@ describe('StreamUtils', () => {
       });
 
       await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest);
+          fakeDrmEngine, /* currentVariant= */ null, manifest,
+          shaka.config.CodecSwitchingStrategy.RELOAD);
 
       expect(manifest.variants.length).toBe(1);
     });
   });
 
   describe('chooseCodecsAndFilterManifest', () => {
-    const avc1Codecs = 'avc1.640028';
-    const vp09Codecs = 'vp09.00.40.08.00.02.02.02.00';
-
-    const addVariant1080Avc1 = (manifest) => {
+    const addVariant720Avc1 = (manifest) => {
       manifest.addVariant(0, (variant) => {
         variant.bandwidth = 5058558;
         variant.addAudio(1, (stream) => {
           stream.bandwidth = 129998;
-          stream.codecs = 'opus';
+          stream.mime('audio/mp4', 'mp4a.40.2');
         });
         variant.addVideo(2, (stream) => {
           stream.bandwidth = 4928560;
-          stream.codecs = avc1Codecs;
-          stream.size(1920, 1080);
+          stream.size(1280, 720);
+          stream.mime('video/mp4', 'avc1.640028');
         });
       });
     };
 
-    const addVariant1080Vp9 = (manifest) => {
+    const addVariant720Vp9 = (manifest) => {
       manifest.addVariant(3, (variant) => {
         variant.bandwidth = 4911000;
         variant.addAudio(4, (stream) => {
           stream.bandwidth = 129998;
-          stream.codecs = 'vorbis';
+          stream.mime('audio/webm', 'vorbis');
         });
         variant.addVideo(5, (stream) => {
           stream.bandwidth = 4781002;
-          stream.codecs = vp09Codecs;
-          stream.size(1920, 1080);
+          stream.size(1280, 720);
+          stream.mime('video/webm', 'vp9');
         });
       });
     };
 
-    const addVariant2160Vp9 = (manifest) => {
+    const addVariant1080Vp9 = (manifest) => {
       manifest.addVariant(6, (variant) => {
         variant.bandwidth = 10850316;
-        variant.addAudio(7, (stream) => {
+        variant.addAudio(1, (stream) => {
           stream.bandwidth = 129998;
-          stream.codecs = 'opus';
+          stream.mime('audio/mp4', 'mp4a.40.2');
         });
         variant.addVideo(8, (stream) => {
           stream.bandwidth = 10784324;
-          stream.codecs = vp09Codecs;
-          stream.size(3840, 2160);
+          stream.size(1920, 1080);
+          stream.mime('video/webm', 'vp9');
         });
       });
     };
 
+    it('should filter variants by the best available bandwidth' +
+        ' for video resolution', () => {
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        manifest.addVariant(0, (variant) => {
+          variant.bandwidth = 4058558;
+          variant.addVideo(1, (stream) => {
+            stream.bandwidth = 300000;
+            stream.size(10, 10);
+          });
+        });
+        manifest.addVariant(2, (variant) => {
+          variant.bandwidth = 4781002;
+          variant.addVideo(3, (stream) => {
+            stream.bandwidth = 400000;
+            stream.size(10, 10);
+          });
+        });
+        manifest.addVariant(4, (variant) => {
+          variant.addVideo(5, (stream) => {
+            stream.bandwidth = 500000;
+            stream.size(20, 20);
+          });
+        });
+        manifest.addVariant(6, (variant) => {
+          variant.addVideo(7, (stream) => {
+            stream.bandwidth = 600000;
+            stream.size(20, 20);
+          });
+        });
+      });
+
+      shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
+          /* preferredVideoCodecs= */[],
+          /* preferredAudioCodecs= */[],
+          /* preferredAudioChannelCount= */2,
+          /* preferredDecodingAttributes= */[]);
+
+      expect(manifest.variants.length).toBe(2);
+      expect(manifest.variants.every((v) => [300000, 500000].includes(
+          v.video.bandwidth))).toBeTruthy();
+    });
+
+    it('should filter variants by the best available bandwidth' +
+    ' for audio language', () => {
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        manifest.addVariant(0, (variant) => {
+          variant.bandwidth = 4058558;
+          variant.addAudio(1, (stream) => {
+            stream.bandwidth = 100000;
+            stream.language = 'en';
+          });
+        });
+        manifest.addVariant(2, (variant) => {
+          variant.bandwidth = 4781002;
+          variant.addAudio(3, (stream) => {
+            stream.bandwidth = 200000;
+            stream.language = 'en';
+          });
+        });
+        manifest.addVariant(4, (variant) => {
+          variant.addAudio(5, (stream) => {
+            stream.bandwidth = 100000;
+            stream.language = 'es';
+          });
+        });
+        manifest.addVariant(6, (variant) => {
+          variant.addAudio(7, (stream) => {
+            stream.bandwidth = 500000;
+            stream.language = 'es';
+          });
+        });
+      });
+
+      shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
+      /* preferredVideoCodecs= */[],
+          /* preferredAudioCodecs= */[],
+          /* preferredAudioChannelCount= */2,
+          /* preferredDecodingAttributes= */[]);
+
+      expect(manifest.variants.length).toBe(2);
+      expect(manifest.variants.every((v) => v.audio.bandwidth == 100000))
+          .toBeTruthy();
+    });
+
+    it('should allow multiple codecs for codec switching', () => {
+      if (!MediaSource.isTypeSupported('video/webm; codecs="vp9"')) {
+        pending('Codec VP9 is not supported by the platform.');
+      }
+      if (!MediaSource.isTypeSupported('video/webm; codecs="vorbis"')) {
+        pending('Codec vorbis is not supported by the platform.');
+      }
+      // This test is flaky in some Tizen devices, due to codec restrictions.
+      if (shaka.util.Platform.isTizen()) {
+        pending('Skip flaky test in Tizen');
+      }
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        addVariant720Avc1(manifest);
+        addVariant720Vp9(manifest);
+        addVariant1080Vp9(manifest);
+      });
+
+      manifest.variants[0].video.bandwidth = 1;
+
+      shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
+          /* preferredVideoCodecs= */[],
+          /* preferredAudioCodecs= */[],
+          /* preferredAudioChannelCount= */2,
+          /* preferredDecodingAttributes= */[]);
+
+      expect(manifest.variants.length).toBe(2);
+      expect(manifest.variants[0].video.codecs)
+          .not.toBe(manifest.variants[1].video.codecs);
+    });
+
     it('chooses preferred audio and video codecs', () => {
+      if (!MediaSource.isTypeSupported('video/webm; codecs="vp9"')) {
+        pending('Codec VP9 is not supported by the platform.');
+      }
+      if (!MediaSource.isTypeSupported('video/webm; codecs="vorbis"')) {
+        pending('Codec vorbis is not supported by the platform.');
+      }
       manifest = shaka.test.ManifestGenerator.generate((manifest) => {
-        addVariant1080Avc1(manifest);
+        addVariant720Avc1(manifest);
+        addVariant720Vp9(manifest);
         addVariant1080Vp9(manifest);
-        addVariant2160Vp9(manifest);
       });
       const variants =
           shaka.util.StreamUtils.choosePreferredCodecs(manifest.variants,
-              /* preferredVideoCodecs= */['vp09'],
-              /* preferredAudioCodecs= */['opus']);
+              /* preferredVideoCodecs= */['vp9'],
+              /* preferredAudioCodecs= */['mp4a']);
 
       expect(variants.length).toBe(1);
-      expect(variants[0].video.codecs).toBe(vp09Codecs);
-      expect(variants[0].audio.codecs).toBe('opus');
+      expect(variants[0].video.codecs).toBe('vp9');
+      expect(variants[0].audio.codecs).toBe('mp4a.40.2');
     });
 
     it('chooses preferred video codecs', () => {
+      if (!MediaSource.isTypeSupported('video/webm; codecs="vp9"')) {
+        pending('Codec VP9 is not supported by the platform.');
+      }
+      if (!MediaSource.isTypeSupported('video/webm; codecs="vorbis"')) {
+        pending('Codec vorbis is not supported by the platform.');
+      }
       // If no preferred audio codecs is specified or can be found, choose the
       // variants with preferred video codecs.
       manifest = shaka.test.ManifestGenerator.generate((manifest) => {
-        addVariant1080Avc1(manifest);
+        addVariant720Avc1(manifest);
+        addVariant720Vp9(manifest);
         addVariant1080Vp9(manifest);
-        addVariant2160Vp9(manifest);
       });
       const variants =
           shaka.util.StreamUtils.choosePreferredCodecs(manifest.variants,
-              /* preferredVideoCodecs= */['vp09'],
+              /* preferredVideoCodecs= */['vp9'],
               /* preferredAudioCodecs= */[]);
 
       expect(variants.length).toBe(2);
-      expect(variants[0].video.codecs).toBe(vp09Codecs);
+      expect(variants[0].video.codecs).toBe('vp9');
       expect(variants[0].audio.codecs).toBe('vorbis');
-      expect(variants[1].video.codecs).toBe(vp09Codecs);
-      expect(variants[1].audio.codecs).toBe('opus');
+      expect(variants[1].video.codecs).toBe('vp9');
+      expect(variants[1].audio.codecs).toBe('mp4a.40.2');
     });
 
     it('chooses preferred audio codecs', () => {
+      if (!MediaSource.isTypeSupported('video/webm; codecs="vp9"')) {
+        pending('Codec VP9 is not supported by the platform.');
+      }
+      if (!MediaSource.isTypeSupported('video/webm; codecs="vorbis"')) {
+        pending('Codec vorbis is not supported by the platform.');
+      }
       // If no preferred video codecs is specified or can be found, choose the
       // variants with preferred audio codecs.
       manifest = shaka.test.ManifestGenerator.generate((manifest) => {
-        addVariant1080Avc1(manifest);
+        addVariant720Avc1(manifest);
+        addVariant720Vp9(manifest);
         addVariant1080Vp9(manifest);
-        addVariant2160Vp9(manifest);
       });
       const variants =
           shaka.util.StreamUtils.choosePreferredCodecs(manifest.variants,
               /* preferredVideoCodecs= */['foo'],
-              /* preferredAudioCodecs= */['opus']);
+              /* preferredAudioCodecs= */['mp4a.40.2']);
 
       expect(variants.length).toBe(2);
-      expect(variants[0].video.codecs).toBe(avc1Codecs);
-      expect(variants[0].audio.codecs).toBe('opus');
-      expect(variants[1].video.codecs).toBe(vp09Codecs);
-      expect(variants[1].audio.codecs).toBe('opus');
-    });
-
-    it('chooses variants with different sizes (density) by codecs', () => {
-      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
-        addVariant1080Avc1(manifest);
-        addVariant1080Vp9(manifest);
-        addVariant2160Vp9(manifest);
-      });
-
-      shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
-          /* preferredVideoCodecs= */[],
-          /* preferredAudioCodecs= */[],
-          /* preferredAudioChannelCount= */2,
-          /* preferredDecodingAttributes= */[]);
-
-      expect(manifest.variants.length).toBe(1);
-      expect(manifest.variants[0].video.codecs).toBe(vp09Codecs);
-    });
-
-    it('chooses variants with same sizes (density) by codecs', () => {
-      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
-        addVariant1080Avc1(manifest);
-        addVariant1080Vp9(manifest);
-      });
-
-      shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
-          /* preferredVideoCodecs= */[],
-          /* preferredAudioCodecs= */[],
-          /* preferredAudioChannelCount= */2,
-          /* preferredDecodingAttributes= */[]);
-
-      expect(manifest.variants.length).toBe(1);
-      expect(manifest.variants[0].video.codecs).toBe(vp09Codecs);
+      expect(variants[0].video.codecs).toBe('avc1.640028');
+      expect(variants[0].audio.codecs).toBe('mp4a.40.2');
+      expect(variants[1].video.codecs).toBe('vp9');
+      expect(variants[1].audio.codecs).toBe('mp4a.40.2');
     });
 
     it('chooses variants by decoding attributes', async () => {

package/ui/controls.js

@@ -643,6 +643,131 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     }
   }
 
+  /**
+   * @return {boolean}
+   * @export
+   */
+  isPiPAllowed() {
+    if ('documentPictureInPicture' in window &&
+        this.config_.preferDocumentPictureInPicture) {
+      return true;
+    }
+    if (document.pictureInPictureEnabled) {
+      const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+      return !video.disablePictureInPicture;
+    }
+    return false;
+  }
+
+  /**
+   * @return {boolean}
+   * @export
+   */
+  isPiPEnabled() {
+    if ('documentPictureInPicture' in window &&
+        this.config_.preferDocumentPictureInPicture) {
+      return !!window.documentPictureInPicture.window;
+    } else {
+      return !!document.pictureInPictureElement;
+    }
+  }
+
+  /** @export */
+  async togglePiP() {
+    try {
+      if ('documentPictureInPicture' in window &&
+        this.config_.preferDocumentPictureInPicture) {
+        await this.toggleDocumentPictureInPicture_();
+      } else if (!document.pictureInPictureElement) {
+        // If you were fullscreen, leave fullscreen first.
+        if (document.fullscreenElement) {
+          document.exitFullscreen();
+        }
+        const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+        await video.requestPictureInPicture();
+      } else {
+        await document.exitPictureInPicture();
+      }
+    } catch (error) {
+      this.dispatchEvent(new shaka.util.FakeEvent(
+          'error', (new Map()).set('detail', error)));
+    }
+  }
+
+  /**
+   * The Document Picture-in-Picture API makes it possible to open an
+   * always-on-top window that can be populated with arbitrary HTML content.
+   * https://developer.chrome.com/docs/web-platform/document-picture-in-picture
+   * @private
+   */
+  async toggleDocumentPictureInPicture_() {
+    // Close Picture-in-Picture window if any.
+    if (window.documentPictureInPicture.window) {
+      window.documentPictureInPicture.window.close();
+      return;
+    }
+
+    // Open a Picture-in-Picture window.
+    const pipPlayer = this.videoContainer_;
+    const rectPipPlayer = pipPlayer.getBoundingClientRect();
+    const pipWindow = await window.documentPictureInPicture.requestWindow({
+      width: rectPipPlayer.width,
+      height: rectPipPlayer.height,
+    });
+
+    // Copy style sheets to the Picture-in-Picture window.
+    this.copyStyleSheetsToWindow_(pipWindow);
+
+    // Add placeholder for the player.
+    const parentPlayer = pipPlayer.parentNode || document.body;
+    const placeholder = this.videoContainer_.cloneNode(true);
+    placeholder.style.visibility = 'hidden';
+    placeholder.style.height = getComputedStyle(pipPlayer).height;
+    parentPlayer.appendChild(placeholder);
+
+    // Make sure player fits in the Picture-in-Picture window.
+    const styles = document.createElement('style');
+    styles.append(`[data-shaka-player-container] {
+      width: 100% !important; max-height: 100%}`);
+    pipWindow.document.head.append(styles);
+
+    // Move player to the Picture-in-Picture window.
+    pipWindow.document.body.append(pipPlayer);
+
+    // Listen for the PiP closing event to move the player back.
+    this.eventManager_.listenOnce(pipWindow, 'pagehide', () => {
+      placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
+    });
+  }
+
+  /** @private */
+  copyStyleSheetsToWindow_(win) {
+    const styleSheets = /** @type {!Iterable<*>} */(document.styleSheets);
+    const allCSS = [...styleSheets]
+        .map((sheet) => {
+          try {
+            return [...sheet.cssRules].map((rule) => rule.cssText).join('');
+          } catch (e) {
+            const link = /** @type {!HTMLLinkElement} */(
+              document.createElement('link'));
+
+            link.rel = 'stylesheet';
+            link.type = sheet.type;
+            link.media = sheet.media;
+            link.href = sheet.href;
+            win.document.head.appendChild(link);
+          }
+          return '';
+        })
+        .filter(Boolean)
+        .join('\n');
+    const style = document.createElement('style');
+
+    style.textContent = allCSS;
+    win.document.head.appendChild(style);
+  }
+
+
   /** @export */
   showAdUI() {
     shaka.ui.Utils.setDisplay(this.adPanel_, true);

package/ui/externs/ui.js

@@ -87,7 +87,8 @@ shaka.extern.UIVolumeBarColors;
  *   enableTooltips: boolean,
  *   keyboardSeekDistance: number,
  *   keyboardLargeSeekDistance: number,
- *   fullScreenElement: HTMLElement
+ *   fullScreenElement: HTMLElement,
+ *   preferDocumentPictureInPicture: boolean
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -193,6 +194,12 @@ shaka.extern.UIVolumeBarColors;
  * @property {HTMLElement} fullScreenElement
  *   DOM element on which fullscreen will be done.
  *   Defaults to Shaka Player Container.
+ * @property {boolean} preferDocumentPictureInPicture
+ *   Indicates whether the Document Picture in Picture API is preferred or the
+ *   Video Element Picture in Picture API is preferred.
+ *   Changing this property in mid-playback may produce undesired behavior if
+ *   you are already in PiP.
+ *   Defaults to true.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;