@playruo/embed 1.1.3 → 1.1.4

package/dist/index.cjs

@@ -51,18 +51,49 @@ 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 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) {
+        navigator.keyboard.lock(["Escape"]).then(() => {
+          console.log("[PlayruoEmbed] Keyboard locked successfully");
+        }).catch((err) => {
+          console.warn("[PlayruoEmbed] Keyboard lock failed:", err);
+        });
+      }
+      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)(() => {

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,18 +22,49 @@ 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 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) {
+        navigator.keyboard.lock(["Escape"]).then(() => {
+          console.log("[PlayruoEmbed] Keyboard locked successfully");
+        }).catch((err) => {
+          console.warn("[PlayruoEmbed] Keyboard lock failed:", err);
+        });
+      }
+      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(() => {

package/package.json

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