@playruo/embed 1.3.2 → 1.3.3

package/README.md

@@ -2,6 +2,21 @@
 
 React SDK to embed Playruo via iframe + postMessage.
 
+## Windowed launch
+
+`PlayruoEmbed` requests browser fullscreen on the iframe when the user starts a
+demo. This remains the default behavior.
+
+Set `enableWindowedLaunch` to `true` to skip the parent fullscreen request and
+start the experience inside the current iframe bounds:
+
+```tsx
+<PlayruoEmbed
+  operation="iframe"
+  enableWindowedLaunch
+/>
+```
+
 ## Event forwarding
 
 When the embedded Playruo iframe sends `{ type: "playruo_event", data }`, the

package/dist/index.cjs

@@ -77,6 +77,7 @@ var PlayruoEmbed = ({
   onEvent,
   onPurchaseRequest,
   onError,
+  enableWindowedLaunch = false,
   forwardEventsToParent = true,
   renderState,
   iframeRef: externalIframeRef
@@ -337,17 +338,24 @@ var PlayruoEmbed = ({
     hasNotifiedCompletionRef.current = false;
     setShowGameIframe(true);
     try {
-      try {
-        await requestImmersiveMode(iframe);
-      } catch (fsError) {
-        console.warn("[PlayruoEmbed] Fullscreen denied, continuing without:", fsError);
+      let isParentFullscreen = false;
+      if (enableWindowedLaunch) {
+        releaseEscapeKeyLock();
+        console.log("[PlayruoEmbed] Windowed launch enabled, skipping fullscreen request");
+      } else {
+        try {
+          await requestImmersiveMode(iframe);
+          isParentFullscreen = true;
+        } catch (fsError) {
+          console.warn("[PlayruoEmbed] Fullscreen denied, continuing without:", fsError);
+        }
       }
       iframe.contentWindow?.postMessage({
         type: "playruo",
         action: "tryNowClick",
         fromEmbed: true,
-        isFullscreen: true,
-        parentWillHandleFullscreen: true,
+        isFullscreen: isParentFullscreen,
+        parentWillHandleFullscreen: isParentFullscreen,
         isReplay: hasPlayedOnce
       }, "*");
       console.log("[PlayruoEmbed] Sent tryNowClick to game", hasPlayedOnce ? "(replay)" : "(first time)");
@@ -362,7 +370,15 @@ var PlayruoEmbed = ({
       setErrorMessage("Failed to start game");
       onError?.("Failed to start game");
     }
-  }, [isCompatible, hasPlayedOnce, onError, iframeRef, requestImmersiveMode]);
+  }, [
+    enableWindowedLaunch,
+    hasPlayedOnce,
+    iframeRef,
+    isCompatible,
+    onError,
+    releaseEscapeKeyLock,
+    requestImmersiveMode
+  ]);
   const handleBuyNow = (0, import_react.useCallback)(() => {
     if (!storeUrl) {
       console.warn("[PlayruoEmbed] No store URL provided");
@@ -782,10 +798,16 @@ var EmbedTester = (props = {}) => {
   const [storeUrlDraft, setStoreUrlDraft] = (0, import_react2.useState)(
     props.storeUrl ?? "https://store.steampowered.com/app/123456"
   );
+  const [enableWindowedLaunchDraft, setEnableWindowedLaunchDraft] = (0, import_react2.useState)(
+    props.enableWindowedLaunch ?? false
+  );
   const [appliedOperation, setAppliedOperation] = (0, import_react2.useState)(props.operation ?? "iframe");
   const [appliedStoreUrl, setAppliedStoreUrl] = (0, import_react2.useState)(
     props.storeUrl ?? "https://store.steampowered.com/app/123456"
   );
+  const [appliedEnableWindowedLaunch, setAppliedEnableWindowedLaunch] = (0, import_react2.useState)(
+    props.enableWindowedLaunch ?? false
+  );
   const [key, setKey] = (0, import_react2.useState)(0);
   const [hasUserClicked, setHasUserClicked] = (0, import_react2.useState)(false);
   const [showIframe, setShowIframe] = (0, import_react2.useState)(false);
@@ -800,8 +822,9 @@ var EmbedTester = (props = {}) => {
   const iframeRef = (0, import_react2.useRef)(null);
   const isOperationPending = operationDraft !== appliedOperation;
   const isStoreUrlPending = storeUrlDraft !== appliedStoreUrl;
-  const hasPendingConfigChanges = isOperationPending || isStoreUrlPending;
-  const pendingChangeCount = Number(isOperationPending) + Number(isStoreUrlPending);
+  const isWindowedLaunchPending = enableWindowedLaunchDraft !== appliedEnableWindowedLaunch;
+  const hasPendingConfigChanges = isOperationPending || isStoreUrlPending || isWindowedLaunchPending;
+  const pendingChangeCount = Number(isOperationPending) + Number(isStoreUrlPending) + Number(isWindowedLaunchPending);
   const addEvent = (0, import_react2.useCallback)(
     (message) => {
       const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
@@ -912,16 +935,24 @@ var EmbedTester = (props = {}) => {
     }
     setAppliedOperation(operationDraft);
     setAppliedStoreUrl(storeUrlDraft);
+    setAppliedEnableWindowedLaunch(enableWindowedLaunchDraft);
     resetEmbedSession("Applied updated embed settings");
-  }, [hasPendingConfigChanges, operationDraft, resetEmbedSession, storeUrlDraft]);
+  }, [
+    enableWindowedLaunchDraft,
+    hasPendingConfigChanges,
+    operationDraft,
+    resetEmbedSession,
+    storeUrlDraft
+  ]);
   const handleRestartSession = (0, import_react2.useCallback)(() => {
     resetEmbedSession("Embed restarted with applied settings");
   }, [resetEmbedSession]);
   const handleResetDrafts = (0, import_react2.useCallback)(() => {
     setOperationDraft(appliedOperation);
     setStoreUrlDraft(appliedStoreUrl);
+    setEnableWindowedLaunchDraft(appliedEnableWindowedLaunch);
     addEvent("Reverted draft changes to the applied configuration");
-  }, [addEvent, appliedOperation, appliedStoreUrl]);
+  }, [addEvent, appliedEnableWindowedLaunch, appliedOperation, appliedStoreUrl]);
   const panelStyle = {
     position: "relative",
     border: "1px solid rgba(148, 163, 184, 0.18)",
@@ -1489,6 +1520,50 @@ var EmbedTester = (props = {}) => {
                       "Applied value: ",
                       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: codeStyle, children: appliedStoreUrl })
                     ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: labelStyle, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Launch mode" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: buildIndicatorStyle(isWindowedLaunchPending), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: buildIndicatorDotStyle(isWindowedLaunchPending) }),
+                        isWindowedLaunchPending ? "Pending" : "Live"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "label",
+                      {
+                        htmlFor: "enableWindowedLaunch",
+                        style: {
+                          ...buildInputShellStyle(isWindowedLaunchPending),
+                          justifyContent: "space-between",
+                          minHeight: "48px",
+                          cursor: "pointer"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#f8fafc", fontSize: "15px", fontWeight: 600 }, children: "Windowed launch" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "input",
+                            {
+                              id: "enableWindowedLaunch",
+                              type: "checkbox",
+                              checked: enableWindowedLaunchDraft,
+                              onChange: (event) => setEnableWindowedLaunchDraft(event.target.checked),
+                              style: {
+                                width: "18px",
+                                height: "18px",
+                                accentColor: "#38bdf8",
+                                cursor: "pointer"
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: helperTextStyle, children: [
+                      "Applied value:",
+                      " ",
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: codeStyle, children: appliedEnableWindowedLaunch ? "windowed" : "fullscreen request" })
+                    ] })
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -1768,6 +1843,10 @@ var EmbedTester = (props = {}) => {
                       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { ...codeStyle, padding: "6px 10px" }, children: [
                         "Operation: ",
                         appliedOperation
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { ...codeStyle, padding: "6px 10px" }, children: [
+                        "Launch: ",
+                        appliedEnableWindowedLaunch ? "windowed" : "fullscreen request"
                       ] })
                     ] })
                   ]
@@ -1843,6 +1922,7 @@ var EmbedTester = (props = {}) => {
                         onPurchaseRequest: handlePurchaseRequest,
                         onReady: handleReady,
                         onStateChange: handleStateChange,
+                        enableWindowedLaunch: appliedEnableWindowedLaunch,
                         operation: appliedOperation,
                         renderState: ({ actions, message, status }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: !hasUserClicked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                           "div",

package/dist/index.d.cts

@@ -55,6 +55,11 @@ interface PlayruoEmbedProps {
         storeUrl: string;
     }) => void;
     onError?: (error: string) => void;
+    /**
+     * Skip the parent fullscreen request and start the experience inside the
+     * current iframe bounds. Defaults to false to preserve the current behavior.
+     */
+    enableWindowedLaunch?: boolean;
     /**
      * Forward playruo_event messages to the parent window when the package host
      * itself is embedded in another iframe. Direct host pages already receive the
@@ -79,6 +84,8 @@ interface EmbedTesterProps {
     enableConsoleLog?: boolean;
     operation?: string;
     storeUrl?: string;
+    /** Start the experience inside the iframe without requesting parent fullscreen. */
+    enableWindowedLaunch?: boolean;
     className?: string;
 }
 declare const EmbedTester: (props?: EmbedTesterProps) => react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -55,6 +55,11 @@ interface PlayruoEmbedProps {
         storeUrl: string;
     }) => void;
     onError?: (error: string) => void;
+    /**
+     * Skip the parent fullscreen request and start the experience inside the
+     * current iframe bounds. Defaults to false to preserve the current behavior.
+     */
+    enableWindowedLaunch?: boolean;
     /**
      * Forward playruo_event messages to the parent window when the package host
      * itself is embedded in another iframe. Direct host pages already receive the
@@ -79,6 +84,8 @@ interface EmbedTesterProps {
     enableConsoleLog?: boolean;
     operation?: string;
     storeUrl?: string;
+    /** Start the experience inside the iframe without requesting parent fullscreen. */
+    enableWindowedLaunch?: boolean;
     className?: string;
 }
 declare const EmbedTester: (props?: EmbedTesterProps) => react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -37,6 +37,7 @@ var PlayruoEmbed = ({
   onEvent,
   onPurchaseRequest,
   onError,
+  enableWindowedLaunch = false,
   forwardEventsToParent = true,
   renderState,
   iframeRef: externalIframeRef
@@ -297,17 +298,24 @@ var PlayruoEmbed = ({
     hasNotifiedCompletionRef.current = false;
     setShowGameIframe(true);
     try {
-      try {
-        await requestImmersiveMode(iframe);
-      } catch (fsError) {
-        console.warn("[PlayruoEmbed] Fullscreen denied, continuing without:", fsError);
+      let isParentFullscreen = false;
+      if (enableWindowedLaunch) {
+        releaseEscapeKeyLock();
+        console.log("[PlayruoEmbed] Windowed launch enabled, skipping fullscreen request");
+      } else {
+        try {
+          await requestImmersiveMode(iframe);
+          isParentFullscreen = true;
+        } catch (fsError) {
+          console.warn("[PlayruoEmbed] Fullscreen denied, continuing without:", fsError);
+        }
       }
       iframe.contentWindow?.postMessage({
         type: "playruo",
         action: "tryNowClick",
         fromEmbed: true,
-        isFullscreen: true,
-        parentWillHandleFullscreen: true,
+        isFullscreen: isParentFullscreen,
+        parentWillHandleFullscreen: isParentFullscreen,
         isReplay: hasPlayedOnce
       }, "*");
       console.log("[PlayruoEmbed] Sent tryNowClick to game", hasPlayedOnce ? "(replay)" : "(first time)");
@@ -322,7 +330,15 @@ var PlayruoEmbed = ({
       setErrorMessage("Failed to start game");
       onError?.("Failed to start game");
     }
-  }, [isCompatible, hasPlayedOnce, onError, iframeRef, requestImmersiveMode]);
+  }, [
+    enableWindowedLaunch,
+    hasPlayedOnce,
+    iframeRef,
+    isCompatible,
+    onError,
+    releaseEscapeKeyLock,
+    requestImmersiveMode
+  ]);
   const handleBuyNow = useCallback(() => {
     if (!storeUrl) {
       console.warn("[PlayruoEmbed] No store URL provided");
@@ -742,10 +758,16 @@ var EmbedTester = (props = {}) => {
   const [storeUrlDraft, setStoreUrlDraft] = useState2(
     props.storeUrl ?? "https://store.steampowered.com/app/123456"
   );
+  const [enableWindowedLaunchDraft, setEnableWindowedLaunchDraft] = useState2(
+    props.enableWindowedLaunch ?? false
+  );
   const [appliedOperation, setAppliedOperation] = useState2(props.operation ?? "iframe");
   const [appliedStoreUrl, setAppliedStoreUrl] = useState2(
     props.storeUrl ?? "https://store.steampowered.com/app/123456"
   );
+  const [appliedEnableWindowedLaunch, setAppliedEnableWindowedLaunch] = useState2(
+    props.enableWindowedLaunch ?? false
+  );
   const [key, setKey] = useState2(0);
   const [hasUserClicked, setHasUserClicked] = useState2(false);
   const [showIframe, setShowIframe] = useState2(false);
@@ -760,8 +782,9 @@ var EmbedTester = (props = {}) => {
   const iframeRef = useRef2(null);
   const isOperationPending = operationDraft !== appliedOperation;
   const isStoreUrlPending = storeUrlDraft !== appliedStoreUrl;
-  const hasPendingConfigChanges = isOperationPending || isStoreUrlPending;
-  const pendingChangeCount = Number(isOperationPending) + Number(isStoreUrlPending);
+  const isWindowedLaunchPending = enableWindowedLaunchDraft !== appliedEnableWindowedLaunch;
+  const hasPendingConfigChanges = isOperationPending || isStoreUrlPending || isWindowedLaunchPending;
+  const pendingChangeCount = Number(isOperationPending) + Number(isStoreUrlPending) + Number(isWindowedLaunchPending);
   const addEvent = useCallback2(
     (message) => {
       const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
@@ -872,16 +895,24 @@ var EmbedTester = (props = {}) => {
     }
     setAppliedOperation(operationDraft);
     setAppliedStoreUrl(storeUrlDraft);
+    setAppliedEnableWindowedLaunch(enableWindowedLaunchDraft);
     resetEmbedSession("Applied updated embed settings");
-  }, [hasPendingConfigChanges, operationDraft, resetEmbedSession, storeUrlDraft]);
+  }, [
+    enableWindowedLaunchDraft,
+    hasPendingConfigChanges,
+    operationDraft,
+    resetEmbedSession,
+    storeUrlDraft
+  ]);
   const handleRestartSession = useCallback2(() => {
     resetEmbedSession("Embed restarted with applied settings");
   }, [resetEmbedSession]);
   const handleResetDrafts = useCallback2(() => {
     setOperationDraft(appliedOperation);
     setStoreUrlDraft(appliedStoreUrl);
+    setEnableWindowedLaunchDraft(appliedEnableWindowedLaunch);
     addEvent("Reverted draft changes to the applied configuration");
-  }, [addEvent, appliedOperation, appliedStoreUrl]);
+  }, [addEvent, appliedEnableWindowedLaunch, appliedOperation, appliedStoreUrl]);
   const panelStyle = {
     position: "relative",
     border: "1px solid rgba(148, 163, 184, 0.18)",
@@ -1449,6 +1480,50 @@ var EmbedTester = (props = {}) => {
                       "Applied value: ",
                       /* @__PURE__ */ jsx2("code", { style: codeStyle, children: appliedStoreUrl })
                     ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs2("div", { children: [
+                    /* @__PURE__ */ jsxs2("div", { style: labelStyle, children: [
+                      /* @__PURE__ */ jsx2("span", { children: "Launch mode" }),
+                      /* @__PURE__ */ jsxs2("span", { style: buildIndicatorStyle(isWindowedLaunchPending), children: [
+                        /* @__PURE__ */ jsx2("span", { style: buildIndicatorDotStyle(isWindowedLaunchPending) }),
+                        isWindowedLaunchPending ? "Pending" : "Live"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs2(
+                      "label",
+                      {
+                        htmlFor: "enableWindowedLaunch",
+                        style: {
+                          ...buildInputShellStyle(isWindowedLaunchPending),
+                          justifyContent: "space-between",
+                          minHeight: "48px",
+                          cursor: "pointer"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx2("span", { style: { color: "#f8fafc", fontSize: "15px", fontWeight: 600 }, children: "Windowed launch" }),
+                          /* @__PURE__ */ jsx2(
+                            "input",
+                            {
+                              id: "enableWindowedLaunch",
+                              type: "checkbox",
+                              checked: enableWindowedLaunchDraft,
+                              onChange: (event) => setEnableWindowedLaunchDraft(event.target.checked),
+                              style: {
+                                width: "18px",
+                                height: "18px",
+                                accentColor: "#38bdf8",
+                                cursor: "pointer"
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs2("p", { style: helperTextStyle, children: [
+                      "Applied value:",
+                      " ",
+                      /* @__PURE__ */ jsx2("code", { style: codeStyle, children: appliedEnableWindowedLaunch ? "windowed" : "fullscreen request" })
+                    ] })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs2(
@@ -1728,6 +1803,10 @@ var EmbedTester = (props = {}) => {
                       /* @__PURE__ */ jsxs2("span", { style: { ...codeStyle, padding: "6px 10px" }, children: [
                         "Operation: ",
                         appliedOperation
+                      ] }),
+                      /* @__PURE__ */ jsxs2("span", { style: { ...codeStyle, padding: "6px 10px" }, children: [
+                        "Launch: ",
+                        appliedEnableWindowedLaunch ? "windowed" : "fullscreen request"
                       ] })
                     ] })
                   ]
@@ -1803,6 +1882,7 @@ var EmbedTester = (props = {}) => {
                         onPurchaseRequest: handlePurchaseRequest,
                         onReady: handleReady,
                         onStateChange: handleStateChange,
+                        enableWindowedLaunch: appliedEnableWindowedLaunch,
                         operation: appliedOperation,
                         renderState: ({ actions, message, status }) => /* @__PURE__ */ jsx2(Fragment, { children: !hasUserClicked && /* @__PURE__ */ jsx2(
                           "div",

package/package.json

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