@playruo/embed 1.2.9 → 1.2.10

package/dist/index.cjs

@@ -75,6 +75,7 @@ var PlayruoEmbed = ({
   const internalIframeRef = (0, import_react.useRef)(null);
   const iframeRef = externalIframeRef || internalIframeRef;
   const wasEmbedFullscreenRef = (0, import_react.useRef)(false);
+  const wasEmbedPointerLockedRef = (0, import_react.useRef)(false);
   const [isIframeLoaded, setIsIframeLoaded] = (0, import_react.useState)(false);
   const [hasPlayedOnce, setHasPlayedOnce] = (0, import_react.useState)(false);
   const [showGameIframe, setShowGameIframe] = (0, import_react.useState)(false);
@@ -144,30 +145,79 @@ var PlayruoEmbed = ({
       console.warn("[PlayruoEmbed] Failed to release Escape key lock:", error);
     }
   }, [getKeyboardApi]);
-  const requestFullscreenWithEscapeLock = (0, import_react.useCallback)(
+  const lockEscapeKey = (0, import_react.useCallback)(async () => {
+    const keyboard = getKeyboardApi();
+    if (!keyboard?.lock) {
+      return;
+    }
+    try {
+      await keyboard.lock(["Escape"]);
+      console.log("[PlayruoEmbed] Escape key locked during fullscreen");
+    } catch (error) {
+      console.warn("[PlayruoEmbed] Failed to lock Escape key:", error);
+    }
+  }, [getKeyboardApi]);
+  const getPointerLockElement = (0, import_react.useCallback)(() => {
+    const doc = document;
+    return doc.pointerLockElement || doc.mozPointerLockElement || doc.webkitPointerLockElement || null;
+  }, []);
+  const releasePointerLock = (0, import_react.useCallback)(() => {
+    const doc = document;
+    const exitPointerLock = doc.exitPointerLock?.bind(doc) || doc.mozExitPointerLock?.bind(doc) || doc.webkitExitPointerLock?.bind(doc);
+    try {
+      exitPointerLock?.();
+      wasEmbedPointerLockedRef.current = false;
+    } catch (error) {
+      console.warn("[PlayruoEmbed] Failed to release pointer lock:", error);
+    }
+  }, []);
+  const requestImmersiveMode = (0, import_react.useCallback)(
     async (iframe) => {
-      const fullscreenPromise = iframe.requestFullscreen();
-      const keyboard = getKeyboardApi();
-      if (keyboard?.lock && typeof window !== "undefined" && window.self === window.top) {
-        void keyboard.lock(["Escape"]).then(() => {
-          console.log("[PlayruoEmbed] Escape key locked during fullscreen");
-        }).catch((error) => {
-          const isTopLevelContextError = error instanceof DOMException && error.name === "InvalidStateError" && error.message.includes("top-level browsing context");
-          if (!isTopLevelContextError) {
-            console.warn("[PlayruoEmbed] Failed to lock Escape key:", error);
+      const pointerTarget = iframe;
+      if (pointerTarget.requestPointerLock) {
+        try {
+          const pointerLockResult = pointerTarget.requestPointerLock({ unadjustedMovement: true });
+          if (pointerLockResult && typeof pointerLockResult.then === "function") {
+            void pointerLockResult.then(() => {
+              wasEmbedPointerLockedRef.current = true;
+              console.log("[PlayruoEmbed] Pointer locked on iframe");
+            }).catch(async (error) => {
+              if (error instanceof DOMException && error.name === "NotSupportedError") {
+                try {
+                  const fallbackResult = pointerTarget.requestPointerLock?.();
+                  if (fallbackResult && typeof fallbackResult.then === "function") {
+                    await fallbackResult;
+                  }
+                  wasEmbedPointerLockedRef.current = true;
+                  console.log("[PlayruoEmbed] Pointer locked on iframe without raw input");
+                  return;
+                } catch (fallbackError) {
+                  console.warn("[PlayruoEmbed] Failed to lock pointer without raw input:", fallbackError);
+                  return;
+                }
+              }
+              console.warn("[PlayruoEmbed] Failed to lock pointer:", error);
+            });
+          } else {
+            wasEmbedPointerLockedRef.current = true;
+            console.log("[PlayruoEmbed] Pointer lock requested on iframe");
           }
-        });
+        } catch (error) {
+          console.warn("[PlayruoEmbed] Failed to request pointer lock:", error);
+        }
       }
+      const fullscreenPromise = iframe.requestFullscreen();
       try {
         await fullscreenPromise;
         wasEmbedFullscreenRef.current = true;
         console.log("[PlayruoEmbed] Fullscreen granted");
       } catch (error) {
         releaseEscapeKeyLock();
+        releasePointerLock();
         throw error;
       }
     },
-    [getKeyboardApi, releaseEscapeKeyLock]
+    [releaseEscapeKeyLock, releasePointerLock]
   );
   const handleTryNow = (0, import_react.useCallback)(async () => {
     if (!isCompatible) {
@@ -182,7 +232,7 @@ var PlayruoEmbed = ({
     setShowGameIframe(true);
     try {
       try {
-        await requestFullscreenWithEscapeLock(iframe);
+        await requestImmersiveMode(iframe);
       } catch (fsError) {
         console.warn("[PlayruoEmbed] Fullscreen denied, continuing without:", fsError);
       }
@@ -190,6 +240,8 @@ var PlayruoEmbed = ({
         type: "playruo",
         action: "tryNowClick",
         fromEmbed: true,
+        isFullscreen: true,
+        parentWillHandleFullscreen: true,
         isReplay: hasPlayedOnce
       }, "*");
       console.log("[PlayruoEmbed] Sent tryNowClick to game", hasPlayedOnce ? "(replay)" : "(first time)");
@@ -203,7 +255,7 @@ var PlayruoEmbed = ({
       setErrorMessage("Failed to start game");
       onError?.("Failed to start game");
     }
-  }, [isCompatible, hasPlayedOnce, onError, iframeRef, requestFullscreenWithEscapeLock]);
+  }, [isCompatible, hasPlayedOnce, onError, iframeRef, requestImmersiveMode]);
   const handleBuyNow = (0, import_react.useCallback)(() => {
     if (!storeUrl) {
       console.warn("[PlayruoEmbed] No store URL provided");
@@ -337,6 +389,7 @@ var PlayruoEmbed = ({
       const isEmbedFullscreen = Boolean(iframe && fullscreenElement === iframe);
       if (isEmbedFullscreen) {
         wasEmbedFullscreenRef.current = true;
+        void lockEscapeKey();
         if (iframe) {
           setTimeout(() => {
             iframe.focus();
@@ -351,12 +404,18 @@ var PlayruoEmbed = ({
       releaseEscapeKeyLock();
       if (wasEmbedFullscreenRef.current) {
         wasEmbedFullscreenRef.current = false;
+        const isEmbedPointerLocked = Boolean(iframe && getPointerLockElement() === iframe);
+        if (wasEmbedPointerLockedRef.current || isEmbedPointerLocked) {
+          releasePointerLock();
+        }
         if (iframe) {
           try {
             iframe.contentWindow?.postMessage({
               type: "playruo",
               action: "exitFullscreen",
-              fromEmbed: true
+              fromEmbed: true,
+              isFullscreen: false,
+              parentWillHandleFullscreen: true
             }, "*");
           } catch {
             console.error("[PlayruoEmbed] Failed to exit fullscreen");
@@ -380,12 +439,33 @@ var PlayruoEmbed = ({
       document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
       document.removeEventListener("MSFullscreenChange", handleFullscreenChange);
     };
-  }, [storeUrl, onDemoCompleted, iframeRef, releaseEscapeKeyLock]);
+  }, [storeUrl, onDemoCompleted, iframeRef, getPointerLockElement, lockEscapeKey, releaseEscapeKeyLock, releasePointerLock]);
+  (0, import_react.useEffect)(() => {
+    const handlePointerLockChange = () => {
+      const iframe = iframeRef.current;
+      wasEmbedPointerLockedRef.current = Boolean(iframe && getPointerLockElement() === iframe);
+    };
+    const handlePointerLockError = () => {
+      wasEmbedPointerLockedRef.current = false;
+      console.warn("[PlayruoEmbed] Pointer lock request was rejected");
+    };
+    document.addEventListener("pointerlockchange", handlePointerLockChange);
+    document.addEventListener("pointerlockerror", handlePointerLockError);
+    return () => {
+      document.removeEventListener("pointerlockchange", handlePointerLockChange);
+      document.removeEventListener("pointerlockerror", handlePointerLockError);
+    };
+  }, [getPointerLockElement, iframeRef]);
   (0, import_react.useEffect)(() => {
     return () => {
       releaseEscapeKeyLock();
+      const iframe = iframeRef.current;
+      const isEmbedPointerLocked = Boolean(iframe && getPointerLockElement() === iframe);
+      if (wasEmbedPointerLockedRef.current || isEmbedPointerLocked) {
+        releasePointerLock();
+      }
     };
-  }, [releaseEscapeKeyLock]);
+  }, [getPointerLockElement, iframeRef, releaseEscapeKeyLock, releasePointerLock]);
   (0, import_react.useEffect)(() => {
     const logCrossOriginStatus = () => {
       const isIsolated = self.crossOriginIsolated;

package/dist/index.d.cts

@@ -108,6 +108,7 @@ interface PlayruoInternalMessage {
     action: "tryNowClick" | "exitFullscreen" | "mute" | "unmute";
     fromEmbed: true;
     isReplay?: boolean;
+    isFullscreen?: boolean;
     parentWillHandleFullscreen?: boolean;
 }
 /**

package/dist/index.d.ts

@@ -108,6 +108,7 @@ interface PlayruoInternalMessage {
     action: "tryNowClick" | "exitFullscreen" | "mute" | "unmute";
     fromEmbed: true;
     isReplay?: boolean;
+    isFullscreen?: boolean;
     parentWillHandleFullscreen?: boolean;
 }
 /**

package/dist/index.js

@@ -35,6 +35,7 @@ var PlayruoEmbed = ({
   const internalIframeRef = useRef(null);
   const iframeRef = externalIframeRef || internalIframeRef;
   const wasEmbedFullscreenRef = useRef(false);
+  const wasEmbedPointerLockedRef = useRef(false);
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
   const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
   const [showGameIframe, setShowGameIframe] = useState(false);
@@ -104,30 +105,79 @@ var PlayruoEmbed = ({
       console.warn("[PlayruoEmbed] Failed to release Escape key lock:", error);
     }
   }, [getKeyboardApi]);
-  const requestFullscreenWithEscapeLock = useCallback(
+  const lockEscapeKey = useCallback(async () => {
+    const keyboard = getKeyboardApi();
+    if (!keyboard?.lock) {
+      return;
+    }
+    try {
+      await keyboard.lock(["Escape"]);
+      console.log("[PlayruoEmbed] Escape key locked during fullscreen");
+    } catch (error) {
+      console.warn("[PlayruoEmbed] Failed to lock Escape key:", error);
+    }
+  }, [getKeyboardApi]);
+  const getPointerLockElement = useCallback(() => {
+    const doc = document;
+    return doc.pointerLockElement || doc.mozPointerLockElement || doc.webkitPointerLockElement || null;
+  }, []);
+  const releasePointerLock = useCallback(() => {
+    const doc = document;
+    const exitPointerLock = doc.exitPointerLock?.bind(doc) || doc.mozExitPointerLock?.bind(doc) || doc.webkitExitPointerLock?.bind(doc);
+    try {
+      exitPointerLock?.();
+      wasEmbedPointerLockedRef.current = false;
+    } catch (error) {
+      console.warn("[PlayruoEmbed] Failed to release pointer lock:", error);
+    }
+  }, []);
+  const requestImmersiveMode = useCallback(
     async (iframe) => {
-      const fullscreenPromise = iframe.requestFullscreen();
-      const keyboard = getKeyboardApi();
-      if (keyboard?.lock && typeof window !== "undefined" && window.self === window.top) {
-        void keyboard.lock(["Escape"]).then(() => {
-          console.log("[PlayruoEmbed] Escape key locked during fullscreen");
-        }).catch((error) => {
-          const isTopLevelContextError = error instanceof DOMException && error.name === "InvalidStateError" && error.message.includes("top-level browsing context");
-          if (!isTopLevelContextError) {
-            console.warn("[PlayruoEmbed] Failed to lock Escape key:", error);
+      const pointerTarget = iframe;
+      if (pointerTarget.requestPointerLock) {
+        try {
+          const pointerLockResult = pointerTarget.requestPointerLock({ unadjustedMovement: true });
+          if (pointerLockResult && typeof pointerLockResult.then === "function") {
+            void pointerLockResult.then(() => {
+              wasEmbedPointerLockedRef.current = true;
+              console.log("[PlayruoEmbed] Pointer locked on iframe");
+            }).catch(async (error) => {
+              if (error instanceof DOMException && error.name === "NotSupportedError") {
+                try {
+                  const fallbackResult = pointerTarget.requestPointerLock?.();
+                  if (fallbackResult && typeof fallbackResult.then === "function") {
+                    await fallbackResult;
+                  }
+                  wasEmbedPointerLockedRef.current = true;
+                  console.log("[PlayruoEmbed] Pointer locked on iframe without raw input");
+                  return;
+                } catch (fallbackError) {
+                  console.warn("[PlayruoEmbed] Failed to lock pointer without raw input:", fallbackError);
+                  return;
+                }
+              }
+              console.warn("[PlayruoEmbed] Failed to lock pointer:", error);
+            });
+          } else {
+            wasEmbedPointerLockedRef.current = true;
+            console.log("[PlayruoEmbed] Pointer lock requested on iframe");
           }
-        });
+        } catch (error) {
+          console.warn("[PlayruoEmbed] Failed to request pointer lock:", error);
+        }
       }
+      const fullscreenPromise = iframe.requestFullscreen();
       try {
         await fullscreenPromise;
         wasEmbedFullscreenRef.current = true;
         console.log("[PlayruoEmbed] Fullscreen granted");
       } catch (error) {
         releaseEscapeKeyLock();
+        releasePointerLock();
         throw error;
       }
     },
-    [getKeyboardApi, releaseEscapeKeyLock]
+    [releaseEscapeKeyLock, releasePointerLock]
   );
   const handleTryNow = useCallback(async () => {
     if (!isCompatible) {
@@ -142,7 +192,7 @@ var PlayruoEmbed = ({
     setShowGameIframe(true);
     try {
       try {
-        await requestFullscreenWithEscapeLock(iframe);
+        await requestImmersiveMode(iframe);
       } catch (fsError) {
         console.warn("[PlayruoEmbed] Fullscreen denied, continuing without:", fsError);
       }
@@ -150,6 +200,8 @@ var PlayruoEmbed = ({
         type: "playruo",
         action: "tryNowClick",
         fromEmbed: true,
+        isFullscreen: true,
+        parentWillHandleFullscreen: true,
         isReplay: hasPlayedOnce
       }, "*");
       console.log("[PlayruoEmbed] Sent tryNowClick to game", hasPlayedOnce ? "(replay)" : "(first time)");
@@ -163,7 +215,7 @@ var PlayruoEmbed = ({
       setErrorMessage("Failed to start game");
       onError?.("Failed to start game");
     }
-  }, [isCompatible, hasPlayedOnce, onError, iframeRef, requestFullscreenWithEscapeLock]);
+  }, [isCompatible, hasPlayedOnce, onError, iframeRef, requestImmersiveMode]);
   const handleBuyNow = useCallback(() => {
     if (!storeUrl) {
       console.warn("[PlayruoEmbed] No store URL provided");
@@ -297,6 +349,7 @@ var PlayruoEmbed = ({
       const isEmbedFullscreen = Boolean(iframe && fullscreenElement === iframe);
       if (isEmbedFullscreen) {
         wasEmbedFullscreenRef.current = true;
+        void lockEscapeKey();
         if (iframe) {
           setTimeout(() => {
             iframe.focus();
@@ -311,12 +364,18 @@ var PlayruoEmbed = ({
       releaseEscapeKeyLock();
       if (wasEmbedFullscreenRef.current) {
         wasEmbedFullscreenRef.current = false;
+        const isEmbedPointerLocked = Boolean(iframe && getPointerLockElement() === iframe);
+        if (wasEmbedPointerLockedRef.current || isEmbedPointerLocked) {
+          releasePointerLock();
+        }
         if (iframe) {
           try {
             iframe.contentWindow?.postMessage({
               type: "playruo",
               action: "exitFullscreen",
-              fromEmbed: true
+              fromEmbed: true,
+              isFullscreen: false,
+              parentWillHandleFullscreen: true
             }, "*");
           } catch {
             console.error("[PlayruoEmbed] Failed to exit fullscreen");
@@ -340,12 +399,33 @@ var PlayruoEmbed = ({
       document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
       document.removeEventListener("MSFullscreenChange", handleFullscreenChange);
     };
-  }, [storeUrl, onDemoCompleted, iframeRef, releaseEscapeKeyLock]);
+  }, [storeUrl, onDemoCompleted, iframeRef, getPointerLockElement, lockEscapeKey, releaseEscapeKeyLock, releasePointerLock]);
+  useEffect(() => {
+    const handlePointerLockChange = () => {
+      const iframe = iframeRef.current;
+      wasEmbedPointerLockedRef.current = Boolean(iframe && getPointerLockElement() === iframe);
+    };
+    const handlePointerLockError = () => {
+      wasEmbedPointerLockedRef.current = false;
+      console.warn("[PlayruoEmbed] Pointer lock request was rejected");
+    };
+    document.addEventListener("pointerlockchange", handlePointerLockChange);
+    document.addEventListener("pointerlockerror", handlePointerLockError);
+    return () => {
+      document.removeEventListener("pointerlockchange", handlePointerLockChange);
+      document.removeEventListener("pointerlockerror", handlePointerLockError);
+    };
+  }, [getPointerLockElement, iframeRef]);
   useEffect(() => {
     return () => {
       releaseEscapeKeyLock();
+      const iframe = iframeRef.current;
+      const isEmbedPointerLocked = Boolean(iframe && getPointerLockElement() === iframe);
+      if (wasEmbedPointerLockedRef.current || isEmbedPointerLocked) {
+        releasePointerLock();
+      }
     };
-  }, [releaseEscapeKeyLock]);
+  }, [getPointerLockElement, iframeRef, releaseEscapeKeyLock, releasePointerLock]);
   useEffect(() => {
     const logCrossOriginStatus = () => {
       const isIsolated = self.crossOriginIsolated;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playruo/embed",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "description": "React SDK to embed Playruo with postMessage API.",
   "license": "MIT",
   "type": "module",