Fix type error, only show pip if pip is available

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

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;

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
     },