From 5bc7040ef6efb0dd288d3b0174096511d6dbb2e3 Mon Sep 17 00:00:00 2001
From: rift <32559038+warp-records@users.noreply.github.com>
Date: Thu, 27 Nov 2025 21:42:56 -0500
Subject: [PATCH] include PIP api state, only show if PIP enabled

---
 src/routes/Player/ControlBar/ControlBar.js | 11 +++++--
 src/routes/Player/Player.js                | 35 +++++++++++++++++-----
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 6f41f3c21..5deabf08d 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -168,9 +168,14 @@ const ControlBar = ({
                     <Icon className={styles['icon']} name={'more-vertical'} />
                 </Button>
                 <div className={classnames(styles['control-bar-buttons-menu-container'], { 'open': buttonsMenuOpen })}>
-                  <Button className={classnames(styles['control-bar-button'], { 'disabled': stream === null })} tabIndex={-1} onClick={onPipButtonClick}>
-                      <Icon className={styles['icon']} name={'open-in-browser'} />
-                  </Button>
+                  {
+                    document.pictureInPictureEnabled ?
+                    <Button className={classnames(styles['control-bar-button'], { 'disabled': stream === null })} tabIndex={-1} onClick={onPipButtonClick}>
+                        <Icon className={styles['icon']} name={'open-in-browser'} />
+                    </Button>
+                    :
+                    null
+                  }
                   <Button className={classnames(styles['control-bar-button'], { 'disabled': statistics === null || statistics.type === 'Err' || stream === null || typeof stream.infoHash !== 'string' || typeof stream.fileIdx !== 'number' })} tabIndex={-1} onMouseDown={onStatisticsButtonMouseDown} onClick={onToggleStatisticsMenu}>
                         <Icon className={styles['icon']} name={'network'} />
                     </Button>
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 8e92c1516..7ac40d63f 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -279,18 +279,39 @@ const Player = ({ urlParams, queryParams }) => {
     const onPipEnableRequested = React.useCallback(() => {
       console.log("Entering picture in picture");
       const videoElement = video.containerRef.current?.querySelector('video');
-      videoElement.requestPictureInPicture().then(() => {
-        video.setPictureInPicture(true);
-      });
+      if (videoElement && videoElement !== document.pictureInPictureElement) {
+        videoElement.requestPictureInPicture();
+      }
     }, []);
 
     const onPipDisableRequested = React.useCallback(() => {
-        console.log("Exiting picture in picture");
-        document.exitPictureInPicture().then(() => {
-          video.setPictureInPicture(false);
-        });
+        if (document.pictureInPictureElement) {
+          document.exitPictureInPicture();
+        }
     }, []);
 
+    // Listen to PiP events to sync state
+    React.useEffect(() => {
+        const videoElement = video.containerRef.current?.querySelector('video');
+        if (!videoElement) return;
+
+        const onEnterPip = () => {
+            video.setPictureInPicture(true);
+        };
+
+        const onLeavePip = () => {
+            video.setPictureInPicture(false);
+        };
+
+        videoElement.addEventListener('enterpictureinpicture', onEnterPip);
+        videoElement.addEventListener('leavepictureinpicture', onLeavePip);
+
+        return () => {
+            videoElement.removeEventListener('enterpictureinpicture', onEnterPip);
+            videoElement.removeEventListener('leavepictureinpicture', onLeavePip);
+        };
+    }, [video.state.stream]);
+
     const onVideoClick = React.useCallback(() => {
         if (video.state.paused !== null) {
             if (video.state.paused) {