Refactor PiP handling to use pipAction from player store

js/app/components/player/controls.tsx

···
     playerId,
   );
   const isIngesting = usePlayerStore((x) => x.ingestConnectionState !== null);
+  const pipAction = usePlayerStore((x) => x.pipAction);
 
   const fadeAnim = useRef(new Animated.Value(1)).current;
 
···
     if (isRefObject(videoRef)) {
       video = videoRef.current;
     }
-    if (video) {
-      setPipSupported(
-        !!document.pictureInPictureEnabled &&
-          typeof video.requestPictureInPicture === "function",
-      );
-    } else {
-      setPipSupported(false);
-    }
+    setPipSupported(
+      !!document.pictureInPictureEnabled && pipAction !== undefined,
+    );
   }, [videoRef]);
 
   useEffect(() => {
···
   }, [videoRef]);
 
   const handlePip = useCallback(() => {
-    let video: HTMLVideoElement | null = null;
-    if (isRefObject(videoRef)) {
-      video = videoRef.current;
-    }
-    if (!video) return;
-    video.requestPictureInPicture().catch((err) => {
-      console.error("Failed to enter Picture-in-Picture mode", err);
-    });
+    if (pipAction) pipAction();
   }, [videoRef]);
 
   const userInteraction = () => {

js/app/components/player/video.tsx

···
 };
 
 const VideoElement = forwardRef(
-  (props: VideoProps, ref: ForwardedRef<HTMLVideoElement | null>) => {
+  (props: VideoProps, refCallback: ForwardedRef<HTMLVideoElement | null>) => {
     const x = usePlayerStore((x) => x);
     const url = useStreamplaceStore((x) => x.url);
     const playerEvent = usePlayerStore((x) => x.playerEvent);
···
 
     const localVideoRef = useRef<HTMLVideoElement | null>(null);
 
+    // setPipAction comes from Zustand store
+    useEffect(() => {
+      if (typeof x.setPipAction === "function") {
+        const fn = () => {
+          if (localVideoRef.current) {
+            try {
+              localVideoRef.current.requestPictureInPicture?.();
+            } catch (err) {
+              console.error("Error requesting Picture-in-Picture:", err);
+            }
+          } else {
+            console.log("No video ref available for PiP");
+          }
+        };
+        x.setPipAction(fn);
+      }
+      // Cleanup on unmount
+      return () => {
+        if (typeof x.setPipAction === "function") {
+          x.setPipAction(undefined);
+        }
+      };
+    }, []);
+
+    // Memoized callback ref for video element
+    const handleVideoRef = useCallback(
+      (videoElement: HTMLVideoElement | null) => {
+        localVideoRef.current = videoElement;
+        if (typeof refCallback === "function") {
+          refCallback(videoElement);
+        } else if (refCallback && "current" in refCallback) {
+          refCallback.current = videoElement;
+        }
+      },
+      [refCallback],
+    );
+
     // attempts to autoplay the video. if that fails, it attempts
     // to play the video muted; some browsers will only let you
     // autoplay if you're muted
···
       return () => {
         setStatus(PlayerStatus.START);
       };
-    }, []);
+    }, [setStatus]);
 
     useEffect(() => {
       if (localVideoRef.current) {
···
         console.log("Setting volume to", volume);
       }
     }, [volume]);
-
-    // Use a callback ref to handle when the video element is mounted
-    const handleVideoRef = (videoElement: HTMLVideoElement | null) => {
-      if (videoElement && typeof ref === "function") {
-        ref(videoElement);
-      } else if (videoElement && ref && "current" in ref) {
-        ref.current = videoElement;
-      }
-
-      // Additional initialization can be done here when the video element is first mounted
-      if (videoElement) {
-        localVideoRef.current = videoElement;
-      }
-    };
 
     return (
       <View
···
     }
     if (typeof videoRef === "function") {
       videoRef(node);
-    } else if (videoRef) {
+    } else if (setVideoRef) {
       setVideoRef(localVideoRef);
     }
   }, []);

js/components/src/player-store/player-state.tsx

···
       | undefined,
   ) => void;
 
+  pipAction: (() => void) | undefined;
+  /** Function to set the Picture-in-Picture action */
+  setPipAction: (action: (() => void) | undefined) => void;
+
   /** Player element width (CSS value or number) */
   playerWidth?: string | number;
   /** Function to set the player width */

js/components/src/player-store/player-store.tsx

···
     pipMode: false,
     setPipMode: (pipMode: boolean) => set(() => ({ pipMode })),
 
+    // Picture-in-Picture action function (set by player component)
+    pipAction: undefined,
+    setPipAction: (action: (() => void) | undefined) =>
+      set(() => ({ pipAction: action })),
+
     // Player element width/height setters for global sync
     playerWidth: undefined,
     setPlayerWidth: (playerWidth: number) => set(() => ({ playerWidth })),