@kontextso/sdk-react-native 3.0.7 → 3.0.8

package/dist/index.js

@@ -134,6 +134,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
   const containerRef = (0, import_react2.useRef)(null);
   const webViewRef = (0, import_react2.useRef)(null);
   const modalWebViewRef = (0, import_react2.useRef)(null);
+  const messageStatusRef = (0, import_react2.useRef)("none" /* None */);
   const modalInitTimeoutRef = (0, import_react2.useRef)(null);
   const isModalInitRef = (0, import_react2.useRef)(false);
   const { height: windowHeight, width: windowWidth } = (0, import_react_native.useWindowDimensions)();
@@ -200,6 +201,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
             case "init-iframe":
               setIframeLoaded(true);
               debug("iframe-post-message");
+              messageStatusRef.current = "message-received" /* MessageReceived */;
               sendMessage(webViewRef, "update-iframe", code, {
                 messages: context?.messages,
                 sdk: "sdk-react-native",
@@ -250,6 +252,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
             case "event-iframe":
               onEvent?.(message.data);
               context?.onAdEventInternal(message.data);
+              messageStatusRef.current = "message-received" /* MessageReceived */;
               break;
           }
         },
@@ -319,6 +322,31 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       resetModal();
     }
   };
+  (0, import_react2.useEffect)(() => {
+    const interval = setInterval(() => {
+      if (messageStatusRef.current === "none" /* None */) {
+        return;
+      }
+      if (messageStatusRef.current === "message-received" /* MessageReceived */) {
+        clearInterval(interval);
+        return;
+      }
+      debug("iframe-post-message-use-effect");
+      setIframeLoaded(true);
+      sendMessage(webViewRef, "update-iframe", code, {
+        messages: context?.messages,
+        sdk: "sdk-react-native",
+        otherParams: {
+          ...otherParams,
+          _useEffect: true
+        },
+        messageId
+      });
+    }, 500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
   const paramsString = (0, import_sdk_react.convertParamsToString)(otherParams);
   (0, import_react2.useEffect)(() => {
     if (!iframeLoaded || !context?.adServerUrl || !bid || !webViewRef.current) {
@@ -386,6 +414,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       },
       onLoad: () => {
         debug("iframe-load");
+        messageStatusRef.current = "initialized" /* Initialized */;
       }
     }
   );
@@ -463,7 +492,7 @@ var import_react_native3 = require("react-native");
 var import_react_native_device_info = __toESM(require("react-native-device-info"));
 
 // package.json
-var version = "3.0.7";
+var version = "3.0.8";
 
 // src/NativeRNKontext.ts
 var import_react_native2 = require("react-native");

package/dist/index.mjs

@@ -103,6 +103,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
   const containerRef = useRef(null);
   const webViewRef = useRef(null);
   const modalWebViewRef = useRef(null);
+  const messageStatusRef = useRef("none" /* None */);
   const modalInitTimeoutRef = useRef(null);
   const isModalInitRef = useRef(false);
   const { height: windowHeight, width: windowWidth } = useWindowDimensions();
@@ -169,6 +170,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
             case "init-iframe":
               setIframeLoaded(true);
               debug("iframe-post-message");
+              messageStatusRef.current = "message-received" /* MessageReceived */;
               sendMessage(webViewRef, "update-iframe", code, {
                 messages: context?.messages,
                 sdk: "sdk-react-native",
@@ -219,6 +221,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
             case "event-iframe":
               onEvent?.(message.data);
               context?.onAdEventInternal(message.data);
+              messageStatusRef.current = "message-received" /* MessageReceived */;
               break;
           }
         },
@@ -288,6 +291,31 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       resetModal();
     }
   };
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (messageStatusRef.current === "none" /* None */) {
+        return;
+      }
+      if (messageStatusRef.current === "message-received" /* MessageReceived */) {
+        clearInterval(interval);
+        return;
+      }
+      debug("iframe-post-message-use-effect");
+      setIframeLoaded(true);
+      sendMessage(webViewRef, "update-iframe", code, {
+        messages: context?.messages,
+        sdk: "sdk-react-native",
+        otherParams: {
+          ...otherParams,
+          _useEffect: true
+        },
+        messageId
+      });
+    }, 500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
   const paramsString = convertParamsToString(otherParams);
   useEffect(() => {
     if (!iframeLoaded || !context?.adServerUrl || !bid || !webViewRef.current) {
@@ -355,6 +383,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       },
       onLoad: () => {
         debug("iframe-load");
+        messageStatusRef.current = "initialized" /* Initialized */;
       }
     }
   );
@@ -435,7 +464,7 @@ import { Appearance, Dimensions, PixelRatio, Platform } from "react-native";
 import DeviceInfo from "react-native-device-info";
 
 // package.json
-var version = "3.0.7";
+var version = "3.0.8";
 
 // src/NativeRNKontext.ts
 import { TurboModuleRegistry } from "react-native";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kontextso/sdk-react-native",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "description": "Kontext SDK for React Native",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/formats/Format.tsx

@@ -44,6 +44,12 @@ const getCachedContent = (context: ContextType, bidId?: string) => {
   return context?.cachedContentRef?.current?.get(bidId) ?? null
 }
 
+enum MessageStatus {
+  None = 'none',
+  Initialized = 'initialized',
+  MessageReceived = 'message-received',
+}
+
 const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatProps) => {
   const context = useContext(AdsContext)
 
@@ -68,6 +74,7 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
   const containerRef = useRef<View>(null)
   const webViewRef = useRef<WebView>(null)
   const modalWebViewRef = useRef<WebView>(null)
+  const messageStatusRef = useRef<MessageStatus>(MessageStatus.None)
   const modalInitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const isModalInitRef = useRef<boolean>(false)
 
@@ -146,6 +153,7 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
             case 'init-iframe':
               setIframeLoaded(true)
               debug('iframe-post-message')
+              messageStatusRef.current = MessageStatus.MessageReceived
               sendMessage(webViewRef, 'update-iframe', code, {
                 messages: context?.messages,
                 sdk: 'sdk-react-native',
@@ -207,6 +215,7 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
             case 'event-iframe':
               onEvent?.(message.data)
               context?.onAdEventInternal(message.data)
+              messageStatusRef.current = MessageStatus.MessageReceived
               break
           }
         },
@@ -287,6 +296,39 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
     }
   }
 
+  /*
+  * Fix for Android issue in Saylo.
+  * When the iframe is loaded, the onLoad event is sometimes called two or more times. 
+  * When these events fire too quickly, the init-iframe response from the server gets discarded. 
+  * As a result, our SDK doesn’t send the update-iframe event back to the server, and the stream never starts.
+  * This fix will send the update-iframe event even if the init-iframe isn’t received. 
+  */
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (messageStatusRef.current === MessageStatus.None) {
+        return
+      }
+      if (messageStatusRef.current === MessageStatus.MessageReceived) {
+        clearInterval(interval)
+        return
+      }
+      debug('iframe-post-message-use-effect')
+      setIframeLoaded(true)
+      sendMessage(webViewRef, 'update-iframe', code, {
+        messages: context?.messages,
+        sdk: 'sdk-react-native',
+        otherParams: {
+          ...otherParams,
+          _useEffect: true,
+        },
+        messageId,
+      })
+    }, 500)
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+
   const paramsString = convertParamsToString(otherParams)
 
   useEffect(() => {
@@ -364,6 +406,7 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
       }}
       onLoad={() => {
         debug('iframe-load')
+        messageStatusRef.current = MessageStatus.Initialized
       }}
     />
   )