From 294f31c5674906e2de60646d48cd09b6f1a325e7 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sat, 21 Oct 2023 20:17:18 +0200
Subject: [PATCH] Fix type error, only show pip if pip is available

---
 src/components/player/atoms/Pip.tsx         |  6 ++++++
 src/components/player/display/base.ts       | 10 ++--------
 src/components/player/display/chromecast.ts |  3 +++
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/player/atoms/Pip.tsx b/src/components/player/atoms/Pip.tsx
index cc9aa21b..9c3fc9ff 100644
--- a/src/components/player/atoms/Pip.tsx
+++ b/src/components/player/atoms/Pip.tsx
@@ -1,10 +1,16 @@
 import { Icons } from "@/components/Icon";
 import { VideoPlayerButton } from "@/components/player/internals/Button";
 import { usePlayerStore } from "@/stores/player/store";
+import {
+  canPictureInPicture,
+  canWebkitPictureInPicture,
+} from "@/utils/detectFeatures";
 
 export function Pip() {
   const display = usePlayerStore((s) => s.display);
 
+  if (!canPictureInPicture() && !canWebkitPictureInPicture()) return null;
+
   return (
     <VideoPlayerButton
       onClick={() => display?.togglePictureInPicture()}
diff --git a/src/components/player/display/base.ts b/src/components/player/display/base.ts
index 6f1b1a16..fac32153 100644
--- a/src/components/player/display/base.ts
+++ b/src/components/player/display/base.ts
@@ -15,7 +15,9 @@ import {
   canChangeVolume,
   canFullscreen,
   canFullscreenAnyElement,
+  canPictureInPicture,
   canWebkitFullscreen,
+  canWebkitPictureInPicture,
 } from "@/utils/detectFeatures";
 import { makeEmitter } from "@/utils/events";
 
@@ -42,14 +44,6 @@ function hlsLevelsToQualities(levels: Level[]): SourceQuality[] {
     .filter((v): v is SourceQuality => !!v);
 }
 
-export function canWebkitPictureInPicture(): boolean {
-  return "webkitSupportsPresentationMode" in document.createElement("video");
-}
-
-export function canPictureInPicture(): boolean {
-  return "pictureInPictureEnabled" in document;
-}
-
 export function makeVideoElementDisplayInterface(): DisplayInterface {
   const { emit, on, off } = makeEmitter<DisplayInterfaceEvents>();
   let source: LoadableSource | null = null;
diff --git a/src/components/player/display/chromecast.ts b/src/components/player/display/chromecast.ts
index 3c9ed562..d823e468 100644
--- a/src/components/player/display/chromecast.ts
+++ b/src/components/player/display/chromecast.ts
@@ -179,6 +179,9 @@ export function makeChromecastDisplayInterface(
         if (containerElement) fscreen.requestFullscreen(containerElement);
       }
     },
+    togglePictureInPicture() {
+      // Can't PIP while Chromecasting
+    },
     startAirplay() {
       // cant airplay while chromecasting
     },