@playruo/embed 1.2.7 → 1.2.9

package/dist/index.cjs

@@ -42,9 +42,13 @@ module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
 
 // src/url.ts
-var buildEmbedUrl = ({ baseUrl, operation = "iframe", storeUrl }) => {
+var PLAYRUO_ORIGIN = "https://playruo.live";
+var buildEmbedUrl = ({ operation = "iframe", storeUrl }) => {
+  return buildEmbedUrlWithOrigin(PLAYRUO_ORIGIN, { operation, storeUrl });
+};
+var buildEmbedUrlWithOrigin = (origin, { operation = "iframe", storeUrl }) => {
   const operationPath = operation.startsWith("/") ? operation.slice(1) : operation;
-  const url = new URL(`/${operationPath}`, baseUrl);
+  const url = new URL(`/${operationPath}`, origin);
   url.searchParams.set("iframe", "true");
   if (storeUrl) {
     url.searchParams.set("storeUrl", storeUrl);
@@ -70,6 +74,7 @@ var PlayruoEmbed = ({
 }) => {
   const internalIframeRef = (0, import_react.useRef)(null);
   const iframeRef = externalIframeRef || internalIframeRef;
+  const wasEmbedFullscreenRef = (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);
@@ -77,7 +82,10 @@ var PlayruoEmbed = ({
   const [isValidChromium, setIsValidChromium] = (0, import_react.useState)(true);
   const [errorMessage, setErrorMessage] = (0, import_react.useState)(null);
   const [iframeState, setIframeState] = (0, import_react.useState)(null);
-  const src = (0, import_react.useMemo)(() => buildEmbedUrl({ baseUrl, operation, storeUrl }), [baseUrl, operation, storeUrl]);
+  const src = (0, import_react.useMemo)(
+    () => baseUrl != null && baseUrl !== "" ? buildEmbedUrlWithOrigin(baseUrl, { operation, storeUrl }) : buildEmbedUrl({ operation, storeUrl }),
+    [baseUrl, operation, storeUrl]
+  );
   (0, import_react.useEffect)(() => {
     if (typeof window === "undefined") return;
     const detectMobile = () => {
@@ -122,6 +130,45 @@ var PlayruoEmbed = ({
     }),
     [currentState, hasIframeConfirmed, isCompatible]
   );
+  const getKeyboardApi = (0, import_react.useCallback)(() => {
+    if (typeof navigator === "undefined") {
+      return void 0;
+    }
+    return navigator.keyboard;
+  }, []);
+  const releaseEscapeKeyLock = (0, import_react.useCallback)(() => {
+    const keyboard = getKeyboardApi();
+    try {
+      keyboard?.unlock?.();
+    } catch (error) {
+      console.warn("[PlayruoEmbed] Failed to release Escape key lock:", error);
+    }
+  }, [getKeyboardApi]);
+  const requestFullscreenWithEscapeLock = (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);
+          }
+        });
+      }
+      try {
+        await fullscreenPromise;
+        wasEmbedFullscreenRef.current = true;
+        console.log("[PlayruoEmbed] Fullscreen granted");
+      } catch (error) {
+        releaseEscapeKeyLock();
+        throw error;
+      }
+    },
+    [getKeyboardApi, releaseEscapeKeyLock]
+  );
   const handleTryNow = (0, import_react.useCallback)(async () => {
     if (!isCompatible) {
       console.warn("[PlayruoEmbed] Browser not compatible");
@@ -135,8 +182,7 @@ var PlayruoEmbed = ({
     setShowGameIframe(true);
     try {
       try {
-        await iframe.requestFullscreen();
-        console.log("[PlayruoEmbed] Fullscreen granted");
+        await requestFullscreenWithEscapeLock(iframe);
       } catch (fsError) {
         console.warn("[PlayruoEmbed] Fullscreen denied, continuing without:", fsError);
       }
@@ -157,7 +203,7 @@ var PlayruoEmbed = ({
       setErrorMessage("Failed to start game");
       onError?.("Failed to start game");
     }
-  }, [isCompatible, hasPlayedOnce, onError, iframeRef]);
+  }, [isCompatible, hasPlayedOnce, onError, iframeRef, requestFullscreenWithEscapeLock]);
   const handleBuyNow = (0, import_react.useCallback)(() => {
     if (!storeUrl) {
       console.warn("[PlayruoEmbed] No store URL provided");
@@ -286,17 +332,25 @@ var PlayruoEmbed = ({
   (0, import_react.useEffect)(() => {
     const handleFullscreenChange = () => {
       const doc = document;
-      const isFullscreen = !!(doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement);
-      if (isFullscreen) {
-        const iframe = iframeRef.current;
+      const iframe = iframeRef.current;
+      const fullscreenElement = doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement || null;
+      const isEmbedFullscreen = Boolean(iframe && fullscreenElement === iframe);
+      if (isEmbedFullscreen) {
+        wasEmbedFullscreenRef.current = true;
         if (iframe) {
           setTimeout(() => {
             iframe.focus();
             iframe.contentWindow?.focus();
           }, 200);
         }
-      } else {
-        const iframe = iframeRef.current;
+        return;
+      }
+      if (fullscreenElement) {
+        return;
+      }
+      releaseEscapeKeyLock();
+      if (wasEmbedFullscreenRef.current) {
+        wasEmbedFullscreenRef.current = false;
         if (iframe) {
           try {
             iframe.contentWindow?.postMessage({
@@ -326,7 +380,12 @@ var PlayruoEmbed = ({
       document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
       document.removeEventListener("MSFullscreenChange", handleFullscreenChange);
     };
-  }, [storeUrl, onDemoCompleted, iframeRef]);
+  }, [storeUrl, onDemoCompleted, iframeRef, releaseEscapeKeyLock]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      releaseEscapeKeyLock();
+    };
+  }, [releaseEscapeKeyLock]);
   (0, import_react.useEffect)(() => {
     const logCrossOriginStatus = () => {
       const isIsolated = self.crossOriginIsolated;
@@ -497,7 +556,7 @@ var EmbedTester = (props = {}) => {
     fullscreenSupported: false,
     keyboardLockSupported: false
   });
-  const baseUrl = props.baseUrl;
+  const displayHost = props.baseUrl ? new URL(props.baseUrl).host : "playruo.live";
   const enableConsoleLog = props.enableConsoleLog ?? false;
   const hasReadyBeenCalled = (0, import_react2.useRef)(false);
   const previousStateRef = (0, import_react2.useRef)("");
@@ -722,7 +781,7 @@ var EmbedTester = (props = {}) => {
             border: "1px solid #404040"
           }, children: [
             "\u{1F9EA} ",
-            baseUrl ? new URL(baseUrl).host : "localhost:3000"
+            displayHost
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
@@ -735,7 +794,7 @@ var EmbedTester = (props = {}) => {
         }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           PlayruoEmbed,
           {
-            baseUrl: baseUrl || "",
+            baseUrl: props.baseUrl,
             className: "w-full h-full absolute inset-0",
             iframeRef,
             onDemoCompleted: handleDemoCompleted,

package/dist/index.d.cts

@@ -34,7 +34,8 @@ interface PlayruoEmbedRenderState {
     actions: PlayruoEmbedActions;
 }
 interface PlayruoEmbedProps {
-    baseUrl: string;
+    /** Game origin (scheme + host). Omit to use production (`https://playruo.live`). */
+    baseUrl?: string;
     operation?: string;
     storeUrl?: string;
     showIframe?: boolean;
@@ -59,6 +60,7 @@ interface PlayruoEmbedProps {
 declare const PlayruoEmbed: FC<PlayruoEmbedProps>;
 
 interface EmbedTesterProps {
+    /** Override game origin (e.g. http://localhost:3000). Omit for production. */
     baseUrl?: string;
     enableConsoleLog?: boolean;
     operation?: string;
@@ -121,16 +123,15 @@ declare const isPlayruoEmbedMessage: (data: unknown) => data is PlayruoEmbedMess
 declare const isPlayruoInternalMessage: (data: unknown) => data is PlayruoInternalMessage;
 
 interface BuildUrlParams {
-    baseUrl: string;
     operation?: string;
     storeUrl?: string;
 }
 /**
- * Build direct game URL (no intermediate /embed page)
+ * Build direct game URL (no intermediate /embed page). Always targets production.
  * @example
- * buildEmbedUrl({ baseUrl: "https://playruo.live", operation: "my-game" })
+ * buildEmbedUrl({ operation: "my-game" })
  * // => "https://playruo.live/my-game?iframe=true"
  */
-declare const buildEmbedUrl: ({ baseUrl, operation, storeUrl }: BuildUrlParams) => string;
+declare const buildEmbedUrl: ({ operation, storeUrl }: BuildUrlParams) => string;
 
 export { type DemoCompletedPayload, EmbedTester, type EmbedTesterProps, type PlayruoDemoCompletedMessage, PlayruoEmbed, type PlayruoEmbedActions, type PlayruoEmbedMessage, type PlayruoEmbedProps, type PlayruoEmbedRenderState, type PlayruoEmbedState, type PlayruoErrorMessage, type PlayruoInternalMessage, type PlayruoPurchaseRequestMessage, type PlayruoReadyMessage, type PlayruoSessionOverMessage, type PlayruoStateUpdateMessage, type PlayruoStreamStartMessage, buildEmbedUrl, isPlayruoEmbedMessage, isPlayruoInternalMessage };

package/dist/index.d.ts

@@ -34,7 +34,8 @@ interface PlayruoEmbedRenderState {
     actions: PlayruoEmbedActions;
 }
 interface PlayruoEmbedProps {
-    baseUrl: string;
+    /** Game origin (scheme + host). Omit to use production (`https://playruo.live`). */
+    baseUrl?: string;
     operation?: string;
     storeUrl?: string;
     showIframe?: boolean;
@@ -59,6 +60,7 @@ interface PlayruoEmbedProps {
 declare const PlayruoEmbed: FC<PlayruoEmbedProps>;
 
 interface EmbedTesterProps {
+    /** Override game origin (e.g. http://localhost:3000). Omit for production. */
     baseUrl?: string;
     enableConsoleLog?: boolean;
     operation?: string;
@@ -121,16 +123,15 @@ declare const isPlayruoEmbedMessage: (data: unknown) => data is PlayruoEmbedMess
 declare const isPlayruoInternalMessage: (data: unknown) => data is PlayruoInternalMessage;
 
 interface BuildUrlParams {
-    baseUrl: string;
     operation?: string;
     storeUrl?: string;
 }
 /**
- * Build direct game URL (no intermediate /embed page)
+ * Build direct game URL (no intermediate /embed page). Always targets production.
  * @example
- * buildEmbedUrl({ baseUrl: "https://playruo.live", operation: "my-game" })
+ * buildEmbedUrl({ operation: "my-game" })
  * // => "https://playruo.live/my-game?iframe=true"
  */
-declare const buildEmbedUrl: ({ baseUrl, operation, storeUrl }: BuildUrlParams) => string;
+declare const buildEmbedUrl: ({ operation, storeUrl }: BuildUrlParams) => string;
 
 export { type DemoCompletedPayload, EmbedTester, type EmbedTesterProps, type PlayruoDemoCompletedMessage, PlayruoEmbed, type PlayruoEmbedActions, type PlayruoEmbedMessage, type PlayruoEmbedProps, type PlayruoEmbedRenderState, type PlayruoEmbedState, type PlayruoErrorMessage, type PlayruoInternalMessage, type PlayruoPurchaseRequestMessage, type PlayruoReadyMessage, type PlayruoSessionOverMessage, type PlayruoStateUpdateMessage, type PlayruoStreamStartMessage, buildEmbedUrl, isPlayruoEmbedMessage, isPlayruoInternalMessage };

package/dist/index.js

@@ -2,9 +2,13 @@
 import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 
 // src/url.ts
-var buildEmbedUrl = ({ baseUrl, operation = "iframe", storeUrl }) => {
+var PLAYRUO_ORIGIN = "https://playruo.live";
+var buildEmbedUrl = ({ operation = "iframe", storeUrl }) => {
+  return buildEmbedUrlWithOrigin(PLAYRUO_ORIGIN, { operation, storeUrl });
+};
+var buildEmbedUrlWithOrigin = (origin, { operation = "iframe", storeUrl }) => {
   const operationPath = operation.startsWith("/") ? operation.slice(1) : operation;
-  const url = new URL(`/${operationPath}`, baseUrl);
+  const url = new URL(`/${operationPath}`, origin);
   url.searchParams.set("iframe", "true");
   if (storeUrl) {
     url.searchParams.set("storeUrl", storeUrl);
@@ -30,6 +34,7 @@ var PlayruoEmbed = ({
 }) => {
   const internalIframeRef = useRef(null);
   const iframeRef = externalIframeRef || internalIframeRef;
+  const wasEmbedFullscreenRef = useRef(false);
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
   const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
   const [showGameIframe, setShowGameIframe] = useState(false);
@@ -37,7 +42,10 @@ var PlayruoEmbed = ({
   const [isValidChromium, setIsValidChromium] = useState(true);
   const [errorMessage, setErrorMessage] = useState(null);
   const [iframeState, setIframeState] = useState(null);
-  const src = useMemo(() => buildEmbedUrl({ baseUrl, operation, storeUrl }), [baseUrl, operation, storeUrl]);
+  const src = useMemo(
+    () => baseUrl != null && baseUrl !== "" ? buildEmbedUrlWithOrigin(baseUrl, { operation, storeUrl }) : buildEmbedUrl({ operation, storeUrl }),
+    [baseUrl, operation, storeUrl]
+  );
   useEffect(() => {
     if (typeof window === "undefined") return;
     const detectMobile = () => {
@@ -82,6 +90,45 @@ var PlayruoEmbed = ({
     }),
     [currentState, hasIframeConfirmed, isCompatible]
   );
+  const getKeyboardApi = useCallback(() => {
+    if (typeof navigator === "undefined") {
+      return void 0;
+    }
+    return navigator.keyboard;
+  }, []);
+  const releaseEscapeKeyLock = useCallback(() => {
+    const keyboard = getKeyboardApi();
+    try {
+      keyboard?.unlock?.();
+    } catch (error) {
+      console.warn("[PlayruoEmbed] Failed to release Escape key lock:", error);
+    }
+  }, [getKeyboardApi]);
+  const requestFullscreenWithEscapeLock = 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);
+          }
+        });
+      }
+      try {
+        await fullscreenPromise;
+        wasEmbedFullscreenRef.current = true;
+        console.log("[PlayruoEmbed] Fullscreen granted");
+      } catch (error) {
+        releaseEscapeKeyLock();
+        throw error;
+      }
+    },
+    [getKeyboardApi, releaseEscapeKeyLock]
+  );
   const handleTryNow = useCallback(async () => {
     if (!isCompatible) {
       console.warn("[PlayruoEmbed] Browser not compatible");
@@ -95,8 +142,7 @@ var PlayruoEmbed = ({
     setShowGameIframe(true);
     try {
       try {
-        await iframe.requestFullscreen();
-        console.log("[PlayruoEmbed] Fullscreen granted");
+        await requestFullscreenWithEscapeLock(iframe);
       } catch (fsError) {
         console.warn("[PlayruoEmbed] Fullscreen denied, continuing without:", fsError);
       }
@@ -117,7 +163,7 @@ var PlayruoEmbed = ({
       setErrorMessage("Failed to start game");
       onError?.("Failed to start game");
     }
-  }, [isCompatible, hasPlayedOnce, onError, iframeRef]);
+  }, [isCompatible, hasPlayedOnce, onError, iframeRef, requestFullscreenWithEscapeLock]);
   const handleBuyNow = useCallback(() => {
     if (!storeUrl) {
       console.warn("[PlayruoEmbed] No store URL provided");
@@ -246,17 +292,25 @@ var PlayruoEmbed = ({
   useEffect(() => {
     const handleFullscreenChange = () => {
       const doc = document;
-      const isFullscreen = !!(doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement);
-      if (isFullscreen) {
-        const iframe = iframeRef.current;
+      const iframe = iframeRef.current;
+      const fullscreenElement = doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement || null;
+      const isEmbedFullscreen = Boolean(iframe && fullscreenElement === iframe);
+      if (isEmbedFullscreen) {
+        wasEmbedFullscreenRef.current = true;
         if (iframe) {
           setTimeout(() => {
             iframe.focus();
             iframe.contentWindow?.focus();
           }, 200);
         }
-      } else {
-        const iframe = iframeRef.current;
+        return;
+      }
+      if (fullscreenElement) {
+        return;
+      }
+      releaseEscapeKeyLock();
+      if (wasEmbedFullscreenRef.current) {
+        wasEmbedFullscreenRef.current = false;
         if (iframe) {
           try {
             iframe.contentWindow?.postMessage({
@@ -286,7 +340,12 @@ var PlayruoEmbed = ({
       document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
       document.removeEventListener("MSFullscreenChange", handleFullscreenChange);
     };
-  }, [storeUrl, onDemoCompleted, iframeRef]);
+  }, [storeUrl, onDemoCompleted, iframeRef, releaseEscapeKeyLock]);
+  useEffect(() => {
+    return () => {
+      releaseEscapeKeyLock();
+    };
+  }, [releaseEscapeKeyLock]);
   useEffect(() => {
     const logCrossOriginStatus = () => {
       const isIsolated = self.crossOriginIsolated;
@@ -457,7 +516,7 @@ var EmbedTester = (props = {}) => {
     fullscreenSupported: false,
     keyboardLockSupported: false
   });
-  const baseUrl = props.baseUrl;
+  const displayHost = props.baseUrl ? new URL(props.baseUrl).host : "playruo.live";
   const enableConsoleLog = props.enableConsoleLog ?? false;
   const hasReadyBeenCalled = useRef2(false);
   const previousStateRef = useRef2("");
@@ -682,7 +741,7 @@ var EmbedTester = (props = {}) => {
             border: "1px solid #404040"
           }, children: [
             "\u{1F9EA} ",
-            baseUrl ? new URL(baseUrl).host : "localhost:3000"
+            displayHost
           ] })
         ] }),
         /* @__PURE__ */ jsx2("div", { style: {
@@ -695,7 +754,7 @@ var EmbedTester = (props = {}) => {
         }, children: /* @__PURE__ */ jsx2(
           PlayruoEmbed,
           {
-            baseUrl: baseUrl || "",
+            baseUrl: props.baseUrl,
             className: "w-full h-full absolute inset-0",
             iframeRef,
             onDemoCompleted: handleDemoCompleted,

package/package.json

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