@playruo/embed 1.2.9 → 1.3.0

package/dist/index.cjs

@@ -43,11 +43,18 @@ var import_react = require("react");
 
 // src/url.ts
 var PLAYRUO_ORIGIN = "https://playruo.live";
-var buildEmbedUrl = ({ operation = "iframe", storeUrl }) => {
+var normalizeOperation = (operation) => {
+  const trimmedOperation = operation.trim();
+  if (trimmedOperation === "") {
+    throw new Error("`operation` is required to build a Playruo embed URL.");
+  }
+  return trimmedOperation.startsWith("/") ? trimmedOperation.slice(1) : trimmedOperation;
+};
+var buildEmbedUrl = ({ operation, storeUrl }) => {
   return buildEmbedUrlWithOrigin(PLAYRUO_ORIGIN, { operation, storeUrl });
 };
-var buildEmbedUrlWithOrigin = (origin, { operation = "iframe", storeUrl }) => {
-  const operationPath = operation.startsWith("/") ? operation.slice(1) : operation;
+var buildEmbedUrlWithOrigin = (origin, { operation, storeUrl }) => {
+  const operationPath = normalizeOperation(operation);
   const url = new URL(`/${operationPath}`, origin);
   url.searchParams.set("iframe", "true");
   if (storeUrl) {
@@ -60,7 +67,7 @@ var buildEmbedUrlWithOrigin = (origin, { operation = "iframe", storeUrl }) => {
 var import_jsx_runtime = require("react/jsx-runtime");
 var PlayruoEmbed = ({
   baseUrl,
-  operation = "iframe",
+  operation,
   storeUrl,
   showIframe = false,
   className,
@@ -75,6 +82,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 +152,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 +239,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 +247,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 +262,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 +396,7 @@ var PlayruoEmbed = ({
       const isEmbedFullscreen = Boolean(iframe && fullscreenElement === iframe);
       if (isEmbedFullscreen) {
         wasEmbedFullscreenRef.current = true;
+        void lockEscapeKey();
         if (iframe) {
           setTimeout(() => {
             iframe.focus();
@@ -351,12 +411,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 +446,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

@@ -36,7 +36,8 @@ interface PlayruoEmbedRenderState {
 interface PlayruoEmbedProps {
     /** Game origin (scheme + host). Omit to use production (`https://playruo.live`). */
     baseUrl?: string;
-    operation?: string;
+    /** Game operation slug used to build the iframe URL. */
+    operation: string;
     storeUrl?: string;
     showIframe?: boolean;
     className?: string;
@@ -108,6 +109,7 @@ interface PlayruoInternalMessage {
     action: "tryNowClick" | "exitFullscreen" | "mute" | "unmute";
     fromEmbed: true;
     isReplay?: boolean;
+    isFullscreen?: boolean;
     parentWillHandleFullscreen?: boolean;
 }
 /**
@@ -123,7 +125,7 @@ declare const isPlayruoEmbedMessage: (data: unknown) => data is PlayruoEmbedMess
 declare const isPlayruoInternalMessage: (data: unknown) => data is PlayruoInternalMessage;
 
 interface BuildUrlParams {
-    operation?: string;
+    operation: string;
     storeUrl?: string;
 }
 /**

package/dist/index.d.ts

@@ -36,7 +36,8 @@ interface PlayruoEmbedRenderState {
 interface PlayruoEmbedProps {
     /** Game origin (scheme + host). Omit to use production (`https://playruo.live`). */
     baseUrl?: string;
-    operation?: string;
+    /** Game operation slug used to build the iframe URL. */
+    operation: string;
     storeUrl?: string;
     showIframe?: boolean;
     className?: string;
@@ -108,6 +109,7 @@ interface PlayruoInternalMessage {
     action: "tryNowClick" | "exitFullscreen" | "mute" | "unmute";
     fromEmbed: true;
     isReplay?: boolean;
+    isFullscreen?: boolean;
     parentWillHandleFullscreen?: boolean;
 }
 /**
@@ -123,7 +125,7 @@ declare const isPlayruoEmbedMessage: (data: unknown) => data is PlayruoEmbedMess
 declare const isPlayruoInternalMessage: (data: unknown) => data is PlayruoInternalMessage;
 
 interface BuildUrlParams {
-    operation?: string;
+    operation: string;
     storeUrl?: string;
 }
 /**

package/dist/index.js

@@ -3,11 +3,18 @@ import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 
 // src/url.ts
 var PLAYRUO_ORIGIN = "https://playruo.live";
-var buildEmbedUrl = ({ operation = "iframe", storeUrl }) => {
+var normalizeOperation = (operation) => {
+  const trimmedOperation = operation.trim();
+  if (trimmedOperation === "") {
+    throw new Error("`operation` is required to build a Playruo embed URL.");
+  }
+  return trimmedOperation.startsWith("/") ? trimmedOperation.slice(1) : trimmedOperation;
+};
+var buildEmbedUrl = ({ operation, storeUrl }) => {
   return buildEmbedUrlWithOrigin(PLAYRUO_ORIGIN, { operation, storeUrl });
 };
-var buildEmbedUrlWithOrigin = (origin, { operation = "iframe", storeUrl }) => {
-  const operationPath = operation.startsWith("/") ? operation.slice(1) : operation;
+var buildEmbedUrlWithOrigin = (origin, { operation, storeUrl }) => {
+  const operationPath = normalizeOperation(operation);
   const url = new URL(`/${operationPath}`, origin);
   url.searchParams.set("iframe", "true");
   if (storeUrl) {
@@ -20,7 +27,7 @@ var buildEmbedUrlWithOrigin = (origin, { operation = "iframe", storeUrl }) => {
 import { jsx, jsxs } from "react/jsx-runtime";
 var PlayruoEmbed = ({
   baseUrl,
-  operation = "iframe",
+  operation,
   storeUrl,
   showIframe = false,
   className,
@@ -35,6 +42,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 +112,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 +199,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 +207,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 +222,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 +356,7 @@ var PlayruoEmbed = ({
       const isEmbedFullscreen = Boolean(iframe && fullscreenElement === iframe);
       if (isEmbedFullscreen) {
         wasEmbedFullscreenRef.current = true;
+        void lockEscapeKey();
         if (iframe) {
           setTimeout(() => {
             iframe.focus();
@@ -311,12 +371,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 +406,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.3.0",
   "description": "React SDK to embed Playruo with postMessage API.",
   "license": "MIT",
   "type": "module",