feat(ABR): Use PiP window size when using documentPictureInPicture (#7880)

Close #7872

Author: avelad

lib/abr/simple_abr_manager.js

@@ -107,7 +107,8 @@ shaka.abr.SimpleAbrManager = class {
 
     /** @private {shaka.util.Timer} */
     this.resizeObserverTimer_ = new shaka.util.Timer(() => {
-      if (this.enabled_ && this.config_.restrictToElementSize) {
+      if (this.enabled_ && (this.config_.restrictToElementSize ||
+          this.config_.restrictToScreenSize)) {
         const chosenVariant = this.chooseVariant();
         if (chosenVariant) {
           this.switch_(chosenVariant, this.config_.clearBufferSwitch,
@@ -116,6 +117,26 @@ shaka.abr.SimpleAbrManager = class {
       }
     });
 
+    /** @private {Window} */
+    this.windowToCheck_ = window;
+
+    if ('documentPictureInPicture' in window) {
+      this.eventManager_.listen(
+          window.documentPictureInPicture, 'enter', () => {
+            this.windowToCheck_ = window.documentPictureInPicture.window;
+            if (this.resizeObserverTimer_) {
+              this.resizeObserverTimer_.tickNow();
+            }
+            this.eventManager_.listenOnce(
+                this.windowToCheck_, 'pagehide', () => {
+                  this.windowToCheck_ = window;
+                  if (this.resizeObserverTimer_) {
+                    this.resizeObserverTimer_.tickNow();
+                  }
+                });
+          });
+    }
+
     /** @private {?shaka.util.CmsdManager} */
     this.cmsdManager_ = null;
   }
@@ -176,15 +197,15 @@ shaka.abr.SimpleAbrManager = class {
     let maxWidth = Infinity;
 
     if (this.config_.restrictToScreenSize) {
-      const devicePixelRatio =
-          this.config_.ignoreDevicePixelRatio ? 1 : window.devicePixelRatio;
-      maxHeight = window.screen.height * devicePixelRatio;
-      maxWidth = window.screen.width * devicePixelRatio;
+      const devicePixelRatio = this.config_.ignoreDevicePixelRatio ?
+          1 : this.windowToCheck_.devicePixelRatio;
+      maxHeight = this.windowToCheck_.screen.height * devicePixelRatio;
+      maxWidth = this.windowToCheck_.screen.width * devicePixelRatio;
     }
 
     if (this.resizeObserver_ && this.config_.restrictToElementSize) {
-      const devicePixelRatio =
-          this.config_.ignoreDevicePixelRatio ? 1 : window.devicePixelRatio;
+      const devicePixelRatio = this.config_.ignoreDevicePixelRatio ?
+          1 : this.windowToCheck_.devicePixelRatio;
       maxHeight = Math.min(
           maxHeight, this.mediaElement_.clientHeight * devicePixelRatio);
       maxWidth = Math.min(