@playruo/embed 1.1.3 → 1.1.5

package/dist/index.cjs

@@ -51,20 +51,84 @@ var PlayruoEmbed = ({
   onDemoCompleted,
   onPurchaseRequest,
   onError,
-  renderState
+  renderState,
+  iframeRef: externalIframeRef
 }) => {
-  const iframeRef = (0, import_react.useRef)(null);
+  const internalIframeRef = (0, import_react.useRef)(null);
+  const iframeRef = externalIframeRef || internalIframeRef;
   const [isReady, setIsReady] = (0, import_react.useState)(false);
   const [state, setState] = (0, import_react.useState)(null);
   const [errorMessage, setErrorMessage] = (0, import_react.useState)(null);
   const src = (0, import_react.useMemo)(() => buildEmbedUrl({ baseUrl, operation, storeUrl }), [baseUrl, operation, storeUrl]);
+  const checkKeyboardLockPermission = async () => {
+    if (!navigator.permissions) {
+      console.log("[PlayruoEmbed] Permissions API not supported");
+      return false;
+    }
+    try {
+      const { state: state2 } = await navigator.permissions.query({
+        name: "keyboard-lock"
+      });
+      if (state2 === "granted" || state2 === "prompt") {
+        console.log(`[PlayruoEmbed] Keyboard lock permission: ${state2}`);
+        return true;
+      }
+      console.log("[PlayruoEmbed] Keyboard lock permission denied");
+      return false;
+    } catch (error) {
+      console.warn("[PlayruoEmbed] Error checking keyboard lock permission:", error);
+      return false;
+    }
+  };
+  const requestFullscreenWithKeyboardLock = async () => {
+    const iframe = iframeRef.current;
+    if (!iframe?.requestFullscreen) {
+      console.log("[PlayruoEmbed] Fullscreen not supported on this browser");
+      return false;
+    }
+    try {
+      const fullscreenPromise = iframe.requestFullscreen();
+      if (navigator.keyboard) {
+        const permissionPromise = checkKeyboardLockPermission();
+        const keyboardLockPromise = navigator.keyboard.lock(["Escape"]);
+        void Promise.all([permissionPromise, keyboardLockPromise]).then(([hasPermission]) => {
+          if (hasPermission) {
+            console.log("[PlayruoEmbed] Keyboard locked successfully");
+          }
+        }).catch((err) => {
+          console.warn("[PlayruoEmbed] Keyboard lock failed:", err);
+        });
+      } else {
+        console.log("[PlayruoEmbed] Keyboard API not supported");
+      }
+      void fullscreenPromise.then(() => {
+        console.log("[PlayruoEmbed] Fullscreen activated successfully");
+      }).catch((err) => {
+        console.warn("[PlayruoEmbed] Fullscreen failed:", err);
+      });
+      return true;
+    } catch (error) {
+      console.error("[PlayruoEmbed] Error requesting fullscreen:", error);
+      return false;
+    }
+  };
   const sendCommand = (type) => {
     if (!iframeRef.current?.contentWindow) {
       console.warn(`PlayruoEmbed: Cannot send ${type} command, iframe not ready`);
       return;
     }
+    if (type === "try_now") {
+      requestFullscreenWithKeyboardLock();
+    }
     iframeRef.current.contentWindow.postMessage({ type }, "*");
   };
+  (0, import_react.useEffect)(() => {
+    if (!self.crossOriginIsolated) {
+      console.warn(
+        '[PlayruoEmbed] \u26A0\uFE0F Not in a cross-origin isolated context.\nSharedArrayBuffer and high-precision timers may not work.\n\nAdd these headers to your server:\n  Cross-Origin-Opener-Policy: same-origin\n  Cross-Origin-Embedder-Policy: credentialless\n\nAlternative (stricter, if not using credentialless iframes):\n  Cross-Origin-Embedder-Policy: require-corp\n\nFor Next.js, add to next.config.js:\n  async headers() {\n    return [{\n      source: "/:path*",\n      headers: [\n        { key: "Cross-Origin-Opener-Policy", value: "same-origin" },\n        { key: "Cross-Origin-Embedder-Policy", value: "credentialless" }\n      ]\n    }];\n  }'
+      );
+    }
+  }, []);
   (0, import_react.useEffect)(() => {
     const handler = (event) => {
       const msg = event?.data ?? {};
@@ -117,8 +181,9 @@ var PlayruoEmbed = ({
       {
         ref: iframeRef,
         src,
-        allow: "fullscreen *; autoplay *; gamepad *",
+        allow: "fullscreen *; autoplay *; gamepad *; clipboard-write *; web-share *; encrypted-media *; accelerometer *; gyroscope *",
         className: "w-full h-[70vh] rounded-lg border",
+        ...{ credentialless: "true" },
         title: "Playruo",
         style: {
           position: showIframe ? void 0 : "absolute",

package/dist/index.d.cts

@@ -16,6 +16,15 @@ interface DemoCompletedPayload {
     storeUrl?: string;
 }
 
+interface Keyboard {
+    lock: (keys: string[]) => Promise<void>;
+    unlock: () => void;
+}
+declare global {
+    interface Navigator {
+        keyboard?: Keyboard;
+    }
+}
 interface PlayruoEmbedActions {
     /** Start the demo session */
     tryNow: () => void;
@@ -49,6 +58,10 @@ interface PlayruoEmbedProps {
      * Provides status, message, and available actions based on current state.
      */
     renderState?: (render: PlayruoEmbedRenderState) => ReactNode;
+    /**
+     * Ref to access the iframe element for fullscreen requests
+     */
+    iframeRef?: React.RefObject<HTMLIFrameElement>;
 }
 declare const PlayruoEmbed: FC<PlayruoEmbedProps>;
 

package/dist/index.d.ts

@@ -16,6 +16,15 @@ interface DemoCompletedPayload {
     storeUrl?: string;
 }
 
+interface Keyboard {
+    lock: (keys: string[]) => Promise<void>;
+    unlock: () => void;
+}
+declare global {
+    interface Navigator {
+        keyboard?: Keyboard;
+    }
+}
 interface PlayruoEmbedActions {
     /** Start the demo session */
     tryNow: () => void;
@@ -49,6 +58,10 @@ interface PlayruoEmbedProps {
      * Provides status, message, and available actions based on current state.
      */
     renderState?: (render: PlayruoEmbedRenderState) => ReactNode;
+    /**
+     * Ref to access the iframe element for fullscreen requests
+     */
+    iframeRef?: React.RefObject<HTMLIFrameElement>;
 }
 declare const PlayruoEmbed: FC<PlayruoEmbedProps>;
 

package/dist/index.js

@@ -22,20 +22,84 @@ var PlayruoEmbed = ({
   onDemoCompleted,
   onPurchaseRequest,
   onError,
-  renderState
+  renderState,
+  iframeRef: externalIframeRef
 }) => {
-  const iframeRef = useRef(null);
+  const internalIframeRef = useRef(null);
+  const iframeRef = externalIframeRef || internalIframeRef;
   const [isReady, setIsReady] = useState(false);
   const [state, setState] = useState(null);
   const [errorMessage, setErrorMessage] = useState(null);
   const src = useMemo(() => buildEmbedUrl({ baseUrl, operation, storeUrl }), [baseUrl, operation, storeUrl]);
+  const checkKeyboardLockPermission = async () => {
+    if (!navigator.permissions) {
+      console.log("[PlayruoEmbed] Permissions API not supported");
+      return false;
+    }
+    try {
+      const { state: state2 } = await navigator.permissions.query({
+        name: "keyboard-lock"
+      });
+      if (state2 === "granted" || state2 === "prompt") {
+        console.log(`[PlayruoEmbed] Keyboard lock permission: ${state2}`);
+        return true;
+      }
+      console.log("[PlayruoEmbed] Keyboard lock permission denied");
+      return false;
+    } catch (error) {
+      console.warn("[PlayruoEmbed] Error checking keyboard lock permission:", error);
+      return false;
+    }
+  };
+  const requestFullscreenWithKeyboardLock = async () => {
+    const iframe = iframeRef.current;
+    if (!iframe?.requestFullscreen) {
+      console.log("[PlayruoEmbed] Fullscreen not supported on this browser");
+      return false;
+    }
+    try {
+      const fullscreenPromise = iframe.requestFullscreen();
+      if (navigator.keyboard) {
+        const permissionPromise = checkKeyboardLockPermission();
+        const keyboardLockPromise = navigator.keyboard.lock(["Escape"]);
+        void Promise.all([permissionPromise, keyboardLockPromise]).then(([hasPermission]) => {
+          if (hasPermission) {
+            console.log("[PlayruoEmbed] Keyboard locked successfully");
+          }
+        }).catch((err) => {
+          console.warn("[PlayruoEmbed] Keyboard lock failed:", err);
+        });
+      } else {
+        console.log("[PlayruoEmbed] Keyboard API not supported");
+      }
+      void fullscreenPromise.then(() => {
+        console.log("[PlayruoEmbed] Fullscreen activated successfully");
+      }).catch((err) => {
+        console.warn("[PlayruoEmbed] Fullscreen failed:", err);
+      });
+      return true;
+    } catch (error) {
+      console.error("[PlayruoEmbed] Error requesting fullscreen:", error);
+      return false;
+    }
+  };
   const sendCommand = (type) => {
     if (!iframeRef.current?.contentWindow) {
       console.warn(`PlayruoEmbed: Cannot send ${type} command, iframe not ready`);
       return;
     }
+    if (type === "try_now") {
+      requestFullscreenWithKeyboardLock();
+    }
     iframeRef.current.contentWindow.postMessage({ type }, "*");
   };
+  useEffect(() => {
+    if (!self.crossOriginIsolated) {
+      console.warn(
+        '[PlayruoEmbed] \u26A0\uFE0F Not in a cross-origin isolated context.\nSharedArrayBuffer and high-precision timers may not work.\n\nAdd these headers to your server:\n  Cross-Origin-Opener-Policy: same-origin\n  Cross-Origin-Embedder-Policy: credentialless\n\nAlternative (stricter, if not using credentialless iframes):\n  Cross-Origin-Embedder-Policy: require-corp\n\nFor Next.js, add to next.config.js:\n  async headers() {\n    return [{\n      source: "/:path*",\n      headers: [\n        { key: "Cross-Origin-Opener-Policy", value: "same-origin" },\n        { key: "Cross-Origin-Embedder-Policy", value: "credentialless" }\n      ]\n    }];\n  }'
+      );
+    }
+  }, []);
   useEffect(() => {
     const handler = (event) => {
       const msg = event?.data ?? {};
@@ -88,8 +152,9 @@ var PlayruoEmbed = ({
       {
         ref: iframeRef,
         src,
-        allow: "fullscreen *; autoplay *; gamepad *",
+        allow: "fullscreen *; autoplay *; gamepad *; clipboard-write *; web-share *; encrypted-media *; accelerometer *; gyroscope *",
         className: "w-full h-[70vh] rounded-lg border",
+        ...{ credentialless: "true" },
         title: "Playruo",
         style: {
           position: showIframe ? void 0 : "absolute",

package/package.json

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