first commit

common/resources/client/player/state/pip/chrome-pip-adapter.ts

@@ -0,0 +1,53 @@
+import {PipAdapter} from '@common/player/state/pip/pip-adapter';
+import {IS_CLIENT} from '@common/utils/platform';
+
+export const createChromePipAdapter = (
+  host: HTMLVideoElement,
+  onChange: () => void
+): PipAdapter => {
+  return {
+    isSupported: () => canUsePiPInChrome(),
+    isPip: () => {
+      return host === document.pictureInPictureElement;
+    },
+    enter: () => {
+      if (canUsePiPInChrome()) {
+        return host.requestPictureInPicture();
+      }
+    },
+    exit: () => {
+      if (canUsePiPInChrome()) {
+        return document.exitPictureInPicture();
+      }
+    },
+    bindEvents: () => {
+      if (canUsePiPInChrome()) {
+        host.addEventListener('enterpictureinpicture', onChange);
+        host.addEventListener('leavepictureinpicture', onChange);
+      }
+    },
+    unbindEvents: () => {
+      if (canUsePiPInChrome()) {
+        host.removeEventListener('enterpictureinpicture', onChange);
+        host.removeEventListener('leavepictureinpicture', onChange);
+      }
+    },
+  };
+};
+
+/**
+ * Checks if the native HTML5 video player can enter picture-in-picture (PIP) mode when using
+ * the Chrome browser.
+ *
+ * @see  https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
+ */
+let _canUsePiPInChrome: boolean | undefined;
+const canUsePiPInChrome = (): boolean => {
+  if (!IS_CLIENT) return false;
+  if (_canUsePiPInChrome == null) {
+    const video = document.createElement('video');
+    _canUsePiPInChrome =
+      !!document.pictureInPictureEnabled && !video.disablePictureInPicture;
+  }
+  return _canUsePiPInChrome;
+};