@kontextso/sdk-react-native 2.1.0 → 2.1.1-rc.1

package/src/formats/Format.tsx

@@ -0,0 +1,263 @@
+import { useContext, useEffect, useRef, useState } from 'react'
+import {
+  AdsContext,
+  convertParamsToString,
+  ErrorBoundary,
+  useBid,
+  useIframeUrl,
+  type FormatProps,
+} from '@kontextso/sdk-react'
+import { WebView, type WebViewMessageEvent } from 'react-native-webview'
+import { Linking, View, useWindowDimensions } from 'react-native'
+import {
+  handleIframeMessage,
+  IframeMessageEvent,
+  IframeMessageType,
+  makeIframeMessage,
+  type IframeMessage,
+} from '@kontextso/sdk-common'
+
+const sendMessage = (
+  webViewRef: React.RefObject<WebView>,
+  type: Extract<IframeMessageType, 'update-iframe' | 'update-dimensions-iframe'>,
+  code: string,
+  data: any
+) => {
+  const message = makeIframeMessage(type, {
+    data,
+    code,
+  })
+
+  webViewRef.current?.injectJavaScript(`
+    window.dispatchEvent(new MessageEvent('message', {
+      data: ${JSON.stringify(message)}
+    }));
+  `)
+}
+
+const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
+  const context = useContext(AdsContext)
+
+  const bid = useBid({ code, messageId })
+  const [height, setHeight] = useState<number>(0)
+  const iframeUrl = useIframeUrl(context, bid, code, messageId)
+
+  const [showIframe, setShowIframe] = useState<boolean>(false)
+  const [iframeLoaded, setIframeLoaded] = useState<boolean>(false)
+
+  const [containerStyles, setContainerStyles] = useState<any>({})
+  const [iframeStyles, setIframeStyles] = useState<any>({})
+
+  const containerRef = useRef<View>(null)
+  const webViewRef = useRef<WebView>(null)
+
+  const { height: windowHeight, width: windowWidth } = useWindowDimensions()
+
+  const reset = () => {
+    setHeight(0)
+    setShowIframe(false)
+    setContainerStyles({})
+    setIframeStyles({})
+    setIframeLoaded(false)
+    context?.resetAll()
+    context?.captureError(new Error('Processing iframe error'))
+  }
+
+  const debug = (name: string, data: any = {}) => {
+    context?.onDebugEventInternal?.(name, {
+      code,
+      messageId,
+      otherParams,
+      bid,
+      iframeUrl,
+      iframeLoaded,
+      showIframe,
+      height,
+      containerStyles,
+      iframeStyles,
+      ...data,
+    })
+  }
+
+  debug('format-update-state')
+
+  const onMessage = (event: WebViewMessageEvent) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data) as IframeMessage
+
+      debug('iframe-message', {
+        message: data,
+      })
+
+      const messageHandler = handleIframeMessage(
+        (message) => {
+          switch (message.type) {
+            case 'init-iframe':
+              setIframeLoaded(true)
+              debug('iframe-post-message')
+              sendMessage(webViewRef, 'update-iframe', code, {
+                messages: context?.messages,
+                sdk: 'sdk-react-native',
+                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 'show-iframe':
+              setShowIframe(true)
+              break
+
+            case 'hide-iframe':
+              setShowIframe(false)
+              break
+
+            case 'set-styles-iframe':
+              setContainerStyles(message.data.containerStyles)
+              setIframeStyles(message.data.iframeStyles)
+              break
+          }
+        },
+        {
+          code,
+        }
+      )
+      messageHandler({ data } as IframeMessageEvent)
+    } catch (e) {
+      debug('iframe-message-error', {
+        error: e,
+      })
+      console.error('error parsing message from webview', e)
+      reset()
+    }
+  }
+
+  const paramsString = convertParamsToString(otherParams)
+
+  useEffect(() => {
+    if (!iframeLoaded || !context?.adServerUrl || !bid || !webViewRef.current) {
+      return
+    }
+    debug('iframe-post-message')
+    sendMessage(webViewRef, 'update-iframe', code, {
+      data: { otherParams },
+      code,
+    })
+    // because we use the rest params, the object is alaways new and useEffect would be called on every render
+  }, [paramsString, iframeLoaded, context?.adServerUrl, bid, code])
+
+  const checkIfInViewport = () => {
+    if (!containerRef.current) return
+
+    containerRef.current.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
+      sendMessage(webViewRef, 'update-dimensions-iframe', code, {
+        windowWidth,
+        windowHeight,
+        containerWidth,
+        containerHeight,
+        containerX,
+        containerY,
+      })
+    })
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      checkIfInViewport()
+    }, 250)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  if (!context || !bid || !iframeUrl) {
+    return null
+  }
+
+  const getWidth = () => {
+    if (showIframe && iframeLoaded) {
+      return '100%'
+    }
+    return 0
+  }
+
+  const getHeight = () => {
+    if (showIframe && iframeLoaded) {
+      return height
+    }
+    return 0
+  }
+
+  const content = (
+    <View style={containerStyles} ref={containerRef}>
+      <WebView
+        ref={webViewRef}
+        source={{
+          uri: iframeUrl,
+        }}
+        onMessage={onMessage}
+        style={{
+          height: getHeight(),
+          width: getWidth(),
+          ...iframeStyles,
+        }}
+        allowsInlineMediaPlayback={true}
+        mediaPlaybackRequiresUserAction={false}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        allowsFullscreenVideo={false}
+        injectedJavaScript={`
+          function sendToLog(data) {
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+              type: 'log-iframe',
+              data: data
+            }));
+          }
+
+          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={() => {
+          debug('iframe-error')
+          reset()
+        }}
+        onLoad={() => {
+          debug('iframe-load')
+        }}
+      />
+    </View>
+  )
+
+  return wrapper ? wrapper(content) : content
+}
+
+const FormatWithErrorBoundary = (props: FormatProps) => (
+  <ErrorBoundary>
+    <Format {...props} />
+  </ErrorBoundary>
+)
+
+export default FormatWithErrorBoundary

package/src/formats/InlineAd.tsx

@@ -0,0 +1,8 @@
+import Format from './Format'
+import { type FormatProps } from '@kontextso/sdk-react'
+
+const InlineAd = ({ code, messageId, wrapper, ...props }: FormatProps) => {
+  return <Format code={code} messageId={messageId} wrapper={wrapper} {...props} />
+}
+
+export default InlineAd

package/src/index.ts

@@ -0,0 +1,5 @@
+import InlineAd from './formats/InlineAd'
+
+export * from './context/AdsProvider'
+
+export { InlineAd }