@kontextso/sdk-react-native 3.0.7-rc.1 → 3.0.7-rc.3

package/dist/index.mjs

@@ -20,52 +20,12 @@ function handleIframeMessage(handler, opts) {
 // src/formats/Format.tsx
 import {
   AdsContext,
-  convertParamsToString,
-  ErrorBoundary,
-  useBid,
-  useIframeUrl
+  useBid
 } from "@kontextso/sdk-react";
-import { useContext, useEffect, useRef, useState } from "react";
-import { Keyboard, Linking, Modal, useWindowDimensions, View } from "react-native";
-
-// src/frame-webview.tsx
-import { forwardRef } from "react";
+import { useContext, useRef } from "react";
+import { View } from "react-native";
 import { WebView } from "react-native-webview";
 import { jsx } from "react/jsx-runtime";
-var FrameWebView = forwardRef(
-  ({ iframeUrl, onMessage, style, onError, onLoad }, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      WebView,
-      {
-        ref: forwardedRef,
-        source: {
-          uri: iframeUrl
-        },
-        onMessage,
-        style,
-        allowsInlineMediaPlayback: true,
-        mediaPlaybackRequiresUserAction: false,
-        javaScriptEnabled: true,
-        domStorageEnabled: true,
-        allowsFullscreenVideo: false,
-        injectedJavaScript: `
-          window.addEventListener("message", function(event) {
-            if (window.ReactNativeWebView && event.data) {
-              // ReactNativeWebView.postMessage only supports string data
-              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
-            }
-          }, false);
-      `,
-        onError,
-        onLoad
-      }
-    );
-  }
-);
-var frame_webview_default = FrameWebView;
-
-// src/formats/Format.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var sendMessage = (webViewRef, type, code, data) => {
   const message = makeIframeMessage(type, {
     data,
@@ -77,56 +37,24 @@ var sendMessage = (webViewRef, type, code, data) => {
     }));
   `);
 };
-var getCachedContent = (context, bidId) => {
-  if (!bidId) {
+var getUrl = (code, messageId, bidId) => {
+  const context = useContext(AdsContext);
+  if (!context || !bidId) {
     return null;
   }
-  return context?.cachedContentRef?.current?.get(bidId) ?? null;
+  const adServerUrl = context?.adServerUrl;
+  const params = new URLSearchParams({
+    code,
+    messageId,
+    sdk: "sdk-react-native"
+  });
+  return `${adServerUrl}/api/frame/${bidId}?${params}`;
 };
 var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
   const context = useContext(AdsContext);
   const bid = useBid({ code, messageId });
-  const [height, setHeight] = useState(0);
-  const cachedContent = getCachedContent(context, bid?.bidId);
-  const iframeUrl = useIframeUrl(bid, code, messageId, "sdk-react-native", otherParams.theme, cachedContent);
-  const modalUrl = iframeUrl.replace("/api/frame/", "/api/modal/");
-  const [showIframe, setShowIframe] = useState(false);
-  const [iframeLoaded, setIframeLoaded] = useState(false);
-  const [modalOpen, setModalOpen] = useState(false);
-  const [modalShown, setModalShown] = useState(false);
-  const [modalLoaded, setModalLoaded] = useState(false);
-  const [containerStyles, setContainerStyles] = useState({});
-  const [iframeStyles, setIframeStyles] = useState({});
-  const containerRef = useRef(null);
+  const iframeUrl = getUrl(code, messageId, bid?.bidId);
   const webViewRef = useRef(null);
-  const modalWebViewRef = useRef(null);
-  const modalInitTimeoutRef = useRef(null);
-  const isModalInitRef = useRef(false);
-  const { height: windowHeight, width: windowWidth } = useWindowDimensions();
-  const keyboardHeightRef = useRef(0);
-  const isAdViewVisible = showIframe && iframeLoaded;
-  const reset = () => {
-    setHeight(0);
-    setShowIframe(false);
-    setContainerStyles({});
-    setIframeStyles({});
-    setIframeLoaded(false);
-    resetModal();
-    context?.resetAll();
-    context?.captureError(new Error("Processing iframe error"));
-  };
-  const resetModal = () => {
-    debugModal("Format:resetModal");
-    if (modalInitTimeoutRef.current) {
-      debugModal("Format:resetModalTimeout");
-      clearTimeout(modalInitTimeoutRef.current);
-      modalInitTimeoutRef.current = null;
-    }
-    isModalInitRef.current = false;
-    setModalOpen(false);
-    setModalLoaded(false);
-    setModalShown(false);
-  };
   const debug = (name, data = {}) => {
     context?.onDebugEventInternal?.(name, {
       code,
@@ -134,42 +62,30 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       otherParams,
       bid,
       iframeUrl,
-      iframeLoaded,
-      showIframe,
-      height,
-      containerStyles,
-      iframeStyles,
       ...data
     });
   };
-  const debugModal = (name, data = {}) => {
-    context?.onDebugEventInternal?.(name, {
-      code,
+  debug("Format:updateState", {
+    params: {
       messageId,
-      otherParams,
-      bid,
-      modalUrl,
-      modalOpen,
-      modalShown,
-      modalLoaded,
-      ...data
-    });
-  };
-  debug("Format:updateState");
+      code,
+      otherParams
+    }
+  });
   const onMessage = (event) => {
     try {
       const data = JSON.parse(event.nativeEvent.data);
       debug("Format:iframeMessage", {
         message: data,
-        params: { data }
+        params: { data, messageId, code, otherParams }
       });
       const messageHandler = handleIframeMessage(
         (message) => {
           switch (message.type) {
             case "init-iframe":
-              setIframeLoaded(true);
               debug("Format:iframePostMessage", {
                 params: {
+                  code,
                   messages: context?.messages,
                   sdk: "sdk-react-native",
                   otherParams,
@@ -183,46 +99,6 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
                 messageId
               });
               break;
-            case "error-iframe":
-              reset();
-              break;
-            case "resize-iframe":
-              setHeight(message.data.height);
-              break;
-            case "click-iframe":
-              if (message.data.url) {
-                Linking.openURL(`${context?.adServerUrl}${message.data.url}`).catch(
-                  (err) => console.error("error opening url", err)
-                );
-              }
-              context?.onAdClickInternal(message.data);
-              break;
-            case "view-iframe":
-              context?.onAdViewInternal(message.data);
-              break;
-            case "ad-done-iframe":
-              if (bid?.bidId && message.data.cachedContent) {
-                context?.cachedContentRef?.current?.set(bid.bidId, message.data.cachedContent);
-              }
-              break;
-            case "show-iframe":
-              setShowIframe(true);
-              break;
-            case "hide-iframe":
-              setShowIframe(false);
-              break;
-            case "set-styles-iframe":
-              setContainerStyles(message.data.containerStyles);
-              setIframeStyles(message.data.iframeStyles);
-              break;
-            case "open-component-iframe":
-              setModalOpen(true);
-              modalInitTimeoutRef.current = setTimeout(() => {
-                if (!isModalInitRef.current) {
-                  resetModal();
-                }
-              }, message.data.timeout ?? 5e3);
-              break;
             case "event-iframe":
               onEvent?.(message.data);
               context?.onAdEventInternal(message.data);
@@ -236,253 +112,144 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       messageHandler({ data });
     } catch (e) {
       debug("Format:iframeMessageError", {
-        params: { error: e },
+        params: { error: e, messageId, code, otherParams },
         error: e
       });
       console.error("error parsing message from webview", e);
-      reset();
     }
   };
-  const onModalMessage = (event) => {
-    try {
-      const data = JSON.parse(event.nativeEvent.data);
-      debugModal("Format:modalIframeMessage", {
-        params: { data },
-        message: data
-      });
-      const messageHandler = handleIframeMessage(
-        (message) => {
-          switch (message.type) {
-            case "close-component-iframe":
-              resetModal();
-              break;
-            case "init-component-iframe":
-              isModalInitRef.current = true;
-              if (modalInitTimeoutRef.current) {
-                clearTimeout(modalInitTimeoutRef.current);
-                modalInitTimeoutRef.current = null;
-              }
-              setModalShown(true);
-              break;
-            case "error-component-iframe":
-            case "error-iframe":
-              resetModal();
-              context?.captureError(new Error("Processing modal iframe error"));
-              break;
-            case "click-iframe":
-              if (message.data.url) {
-                Linking.openURL(`${context?.adServerUrl}${message.data.url}`).catch(
-                  (err) => console.error("error opening url", err)
-                );
-              }
-              context?.onAdClickInternal(message.data);
-              break;
-            case "event-iframe":
-              onEvent?.(message.data);
-              context?.onAdEventInternal(message.data);
-              break;
-          }
-        },
-        {
-          code,
-          component: "modal"
-        }
-      );
-      messageHandler({ data });
-    } catch (e) {
-      debugModal("Format:modalIframeMessageError", {
-        params: { error: e },
-        error: e
-      });
-      console.error("error parsing message from webview", e);
-      resetModal();
-    }
-  };
-  const paramsString = convertParamsToString(otherParams);
-  useEffect(() => {
-    if (!iframeLoaded || !context?.adServerUrl || !bid || !webViewRef.current) {
-      debug("Format:iframePostMessageNotLoaded", {
-        params: {
-          iframeLoaded,
-          contextAdServerUrl: context?.adServerUrl,
-          bid
-        }
-      });
-      return;
-    }
-    debug("Format:iframePostMessage", {
-      params: {
-        otherParams
-      }
-    });
-    sendMessage(webViewRef, "update-iframe", code, {
-      data: { otherParams },
-      code
-    });
-  }, [paramsString, iframeLoaded, context?.adServerUrl, bid, code]);
-  const checkIfInViewport = () => {
-    if (!containerRef.current) {
-      debug("Format:checkIfInViewportNoContainer");
-      return;
-    }
-    debug("Format:checkIfInViewportMeasure", {
-      params: {
-        windowWidth,
-        windowHeight
-      }
-    });
-    containerRef.current.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
-      sendMessage(webViewRef, "update-dimensions-iframe", code, {
-        windowWidth,
-        windowHeight,
-        containerWidth,
-        containerHeight,
-        containerX,
-        containerY,
-        keyboardHeight: keyboardHeightRef.current
-      });
-      debug("Format:checkIfInViewportMeasureSend", {
-        params: {
-          windowWidth,
-          windowHeight,
-          containerWidth,
-          containerHeight,
-          containerX,
-          containerY,
-          keyboardHeight: keyboardHeightRef.current
-        }
-      });
-    });
-  };
-  useEffect(() => {
-    if (!isAdViewVisible) {
-      debug("Format:checkIfInViewportNotVisible");
-      return;
-    }
-    const interval = setInterval(() => {
-      checkIfInViewport();
-    }, 250);
-    return () => {
-      clearInterval(interval);
-      debug("Format:checkIfInViewportCleanup");
-    };
-  }, [isAdViewVisible]);
-  useEffect(() => {
-    const showSubscription = Keyboard.addListener("keyboardDidShow", (e) => {
-      debug("Format:keyboardDidShow", {
-        params: {
-          keyboardHeight: e?.endCoordinates?.height ?? 0
-        }
-      });
-      keyboardHeightRef.current = e?.endCoordinates?.height ?? 0;
-    });
-    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
-      debug("Format:keyboardDidHide");
-      keyboardHeightRef.current = 0;
-    });
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-      keyboardHeightRef.current = 0;
-      debug("Format:keyboardEffectCleanup");
-    };
-  }, []);
   if (!context || !bid || !iframeUrl) {
     debug("Format:noContextOrBidOrIframeUrl", {
       params: {
         context,
         bid,
-        iframeUrl
+        iframeUrl,
+        messageId,
+        code,
+        otherParams
       }
     });
     return null;
   }
-  const inlineContent = /* @__PURE__ */ jsx2(
-    frame_webview_default,
+  return /* @__PURE__ */ jsx(
+    View,
     {
-      ref: webViewRef,
-      iframeUrl,
-      onMessage,
       style: {
-        height,
+        height: 300,
         width: "100%",
         backgroundColor: "transparent",
-        borderWidth: 0,
-        ...iframeStyles
+        borderWidth: 0
       },
-      onError: () => {
-        debug("Format:iframeError");
-        reset();
-      },
-      onLoad: () => {
-        debug("Format:iframeLoad");
-      }
-    }
-  );
-  const interstitialContent = /* @__PURE__ */ jsx2(
-    Modal,
-    {
-      visible: modalOpen,
-      transparent: true,
-      onRequestClose: resetModal,
-      animationType: "slide",
-      statusBarTranslucent: true,
-      children: /* @__PURE__ */ jsx2(
-        View,
+      children: /* @__PURE__ */ jsx(
+        WebView,
         {
+          ref: webViewRef,
+          source: {
+            uri: iframeUrl
+          },
+          onMessage,
           style: {
-            flex: 1,
-            // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
-            ...modalShown ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }
+            height: 300,
+            width: "100%",
+            backgroundColor: "transparent",
+            borderWidth: 0
           },
-          children: /* @__PURE__ */ jsx2(
-            frame_webview_default,
-            {
-              ref: modalWebViewRef,
-              iframeUrl: modalUrl,
-              onMessage: onModalMessage,
-              style: {
-                backgroundColor: "transparent",
-                height: "100%",
-                width: "100%",
-                borderWidth: 0
-              },
-              onError: () => {
-                debug("Format:modalError");
-                resetModal();
-              },
-              onLoad: () => {
-                debug("Format:modalLoad");
-                setModalLoaded(true);
-              }
+          allowsInlineMediaPlayback: true,
+          mediaPlaybackRequiresUserAction: false,
+          javaScriptEnabled: true,
+          domStorageEnabled: true,
+          allowsFullscreenVideo: false,
+          injectedJavaScript: `
+          window.addEventListener("message", function(event) {
+            if (window.ReactNativeWebView && event.data) {
+              // ReactNativeWebView.postMessage only supports string data
+              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
             }
-          )
+          }, false);
+      `,
+          onLoadStart: () => {
+            debug("Format:iframeLoadStart", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onError: () => {
+            debug("Format:iframeError", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onLoad: () => {
+            debug("Format:iframeLoad", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onLoadProgress: () => {
+            debug("Format:iframeLoadProgress", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onHttpError: () => {
+            debug("Format:iframeHttpError", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onRenderProcessGone: () => {
+            debug("Format:iframeRenderProcessGone", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onNavigationStateChange: () => {
+            debug("Format:iframeNavigationStateChange", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onContentProcessDidTerminate: () => {
+            debug("Format:iframeContentProcessDidTerminate", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          }
         }
       )
     }
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
-      View,
-      {
-        style: isAdViewVisible ? containerStyles : {
-          height: 0,
-          overflow: "hidden"
-        },
-        ref: containerRef,
-        children: wrapper ? wrapper(inlineContent) : inlineContent
-      }
-    ),
-    interstitialContent
-  ] });
 };
-var FormatWithErrorBoundary = (props) => /* @__PURE__ */ jsx2(ErrorBoundary, { children: /* @__PURE__ */ jsx2(Format, { ...props }) });
-var Format_default = FormatWithErrorBoundary;
+var Format_default = Format;
 
 // src/formats/InlineAd.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var InlineAd = ({ code, messageId, wrapper, ...props }) => {
-  return /* @__PURE__ */ jsx3(Format_default, { code, messageId, wrapper, ...props });
+  return /* @__PURE__ */ jsx2(Format_default, { code, messageId, wrapper, ...props });
 };
 var InlineAd_default = InlineAd;
 
@@ -496,14 +263,14 @@ import { Appearance, Dimensions, PixelRatio, Platform } from "react-native";
 import DeviceInfo from "react-native-device-info";
 
 // package.json
-var version = "3.0.7-rc.1";
+var version = "3.0.7-rc.3";
 
 // src/NativeRNKontext.ts
 import { TurboModuleRegistry } from "react-native";
 var NativeRNKontext_default = TurboModuleRegistry.getEnforcing("RNKontext");
 
 // src/context/AdsProvider.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 ErrorUtils.setGlobalHandler((error, isFatal) => {
   if (!isFatal) {
     log.warn(error);
@@ -597,7 +364,7 @@ var getSdk = async () => ({
   version
 });
 var AdsProvider = (props) => {
-  return /* @__PURE__ */ jsx4(AdsProviderInternal, { ...props, getDevice, getSdk, getApp });
+  return /* @__PURE__ */ jsx3(AdsProviderInternal, { ...props, getDevice, getSdk, getApp });
 };
 export {
   AdsProvider,

package/package.json

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