fix(UI): Prevent PiP window size issues by using relative sizing (#9633)

.csslintrc

@@ -19,7 +19,7 @@
       "selector-list-comma-newline-after": "always-multi-line",
       "selector-no-vendor-prefix": null,
       "selector-pseudo-element-colon-notation": "single",
-      "unit-allowed-list": ["em", "%", "px", "s", "deg", "vmin", "ms", "vh"],
+      "unit-allowed-list": ["em", "%", "px", "s", "deg", "vmin", "ms", "vh", "vw", "dvh", "dvw"],
       "color-function-notation": "legacy"
     }
 }

ui/controls.js

@@ -1120,8 +1120,11 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     // Move player to the Picture-in-Picture window.
     pipWindow.document.body.append(pipPlayer);
 
+    pipPlayer.classList.add('pip-mode');
+
     // Listen for the PiP closing event to move the player back.
     this.eventManager_.listenOnce(pipWindow, 'pagehide', () => {
+      pipPlayer.classList.remove('pip-mode');
       placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
     });
   }

ui/less/containers.less

@@ -35,6 +35,18 @@
   :before {
     box-sizing: revert;
   }
+
+  /* stylelint-disable max-line-length, declaration-block-no-duplicate-properties, unit-no-unknown */
+  &.pip-mode {
+    background-color: @general-background-color-opaque;
+    // Old browsers
+    width: 100vw;
+    height: 100vh;
+    // Modern browsers
+    width: 100dvw;
+    height: 100dvh;
+  }
+  /* stylelint-enable max-line-length, declaration-block-no-duplicate-properties, unit-no-unknown */
 }
 
 /* Each browser has a different prefixed pseudo-class for fullscreened elements.