Webkit support

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);
-}

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");
+}

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,19 +206,28 @@ export function createVideoStateProvider(
         updateSource(descriptor, state);
       }
     },
-    async togglePictureInPicture() {
-      if (!canPictureInPicture()) return;
+    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 {
-          await player.requestPictureInPicture();
+            player.requestPictureInPicture();
           } catch {
             state.interface.isPictureInPicture = false;
           }
           state.interface.isPictureInPicture = true;
         } else {
-        await document.exitPictureInPicture();
+          document.exitPictureInPicture();
           state.interface.isPictureInPicture = false;
         }
+      }
     },
     providerStart() {
       this.setVolume(getStoredVolume());