From 3fad6edaadbe04ad8472196778bd48f166e37589 Mon Sep 17 00:00:00 2001
From: zisra <100528712+zisra@users.noreply.github.com>
Date: Mon, 27 Feb 2023 03:43:14 -0600
Subject: [PATCH] Webkit support

---
 src/setup/index.css                           |  5 ----
 src/utils/detectFeatures.ts                   |  4 +++
 .../state/providers/videoStateProvider.ts     | 30 ++++++++++++-------
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/setup/index.css b/src/setup/index.css
index 3e34eec3..ebb56bec 100644
--- a/src/setup/index.css
+++ b/src/setup/index.css
@@ -54,8 +54,3 @@ body[data-no-select] {
 .google-cast-button:not(.casting) google-cast-launcher {
   @apply brightness-[500];
 }
-
-:picture-in-picture {
-  opacity: 0.3;
-  filter: blur(5px);
-}
diff --git a/src/utils/detectFeatures.ts b/src/utils/detectFeatures.ts
index 0180ae49..af62720d 100644
--- a/src/utils/detectFeatures.ts
+++ b/src/utils/detectFeatures.ts
@@ -42,3 +42,7 @@ export function canFullscreen(): boolean {
 export function canPictureInPicture(): boolean {
   return "pictureInPictureEnabled" in document;
 }
+
+export function canWebkitPictureInPicture(): boolean {
+  return "webkitSupportsPresentationMode" in document.createElement("video");
+}
diff --git a/src/video/state/providers/videoStateProvider.ts b/src/video/state/providers/videoStateProvider.ts
index 729ac0b0..cd2aa6f2 100644
--- a/src/video/state/providers/videoStateProvider.ts
+++ b/src/video/state/providers/videoStateProvider.ts
@@ -6,6 +6,7 @@ import {
   canFullscreenAnyElement,
   canWebkitFullscreen,
   canPictureInPicture,
+  canWebkitPictureInPicture,
 } from "@/utils/detectFeatures";
 import { MWStreamType } from "@/backend/helpers/streams";
 import { updateInterface } from "@/video/state/logic/interface";
@@ -205,18 +206,27 @@ export function createVideoStateProvider(
         updateSource(descriptor, state);
       }
     },
-    async togglePictureInPicture() {
-      if (!canPictureInPicture()) return;
-      if (player !== document.pictureInPictureElement) {
-        try {
-          await player.requestPictureInPicture();
-        } catch {
+    togglePictureInPicture() {
+      if (canWebkitPictureInPicture()) {
+        const webkitPlayer = player as any;
+        webkitPlayer.webkitSetPresentationMode(
+          webkitPlayer.webkitPresentationMode === "picture-in-picture"
+            ? "inline"
+            : "picture-in-picture"
+        );
+      }
+      if (canPictureInPicture()) {
+        if (player !== document.pictureInPictureElement) {
+          try {
+            player.requestPictureInPicture();
+          } catch {
+            state.interface.isPictureInPicture = false;
+          }
+          state.interface.isPictureInPicture = true;
+        } else {
+          document.exitPictureInPicture();
           state.interface.isPictureInPicture = false;
         }
-        state.interface.isPictureInPicture = true;
-      } else {
-        await document.exitPictureInPicture();
-        state.interface.isPictureInPicture = false;
       }
     },
     providerStart() {