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

package/src/formats/Format.tsx

@@ -7,17 +7,12 @@ import {
 } from '@kontextso/sdk-common'
 import {
   AdsContext,
-  type ContextType,
-  convertParamsToString,
-  ErrorBoundary,
   type FormatProps,
   useBid,
-  useIframeUrl,
 } from '@kontextso/sdk-react'
-import { useContext, useEffect, useRef, useState } from 'react'
-import { Keyboard, Linking, Modal, useWindowDimensions, View } from 'react-native'
-import type { WebView, WebViewMessageEvent } from 'react-native-webview'
-import FrameWebView from '../frame-webview'
+import { useContext, useRef } from 'react'
+import { View } from 'react-native'
+import { WebView, type WebViewMessageEvent } from 'react-native-webview'
 
 const sendMessage = (
   webViewRef: React.RefObject<WebView>,
@@ -37,82 +32,30 @@ const sendMessage = (
   `)
 }
 
-const getCachedContent = (context: ContextType, bidId?: string) => {
-  if (!bidId) {
+const getUrl = (code: string, messageId: string, bidId?: string) => {
+  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}`
 }
 
 const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatProps) => {
   const context = useContext(AdsContext)
 
   const bid = useBid({ code, messageId })
-  const [height, setHeight] = useState<number>(0)
+  const iframeUrl = getUrl(code, messageId, bid?.bidId)
 
-  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<boolean>(false)
-  const [iframeLoaded, setIframeLoaded] = useState<boolean>(false)
-
-  const [modalOpen, setModalOpen] = useState<boolean>(false)
-  const [modalShown, setModalShown] = useState<boolean>(false)
-  const [modalLoaded, setModalLoaded] = useState<boolean>(false)
-
-  const [containerStyles, setContainerStyles] = useState<any>({})
-  const [iframeStyles, setIframeStyles] = useState<any>({})
-
-  const containerRef = useRef<View>(null)
   const webViewRef = useRef<WebView>(null)
-  const modalWebViewRef = useRef<WebView>(null)
-  const modalInitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const isModalInitRef = useRef<boolean>(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', {
-      params: {
-        messageId,
-        code,
-        otherParams,
-      }
-    })
-    if (modalInitTimeoutRef.current) {
-      debugModal('Format:resetModalTimeout', {
-        params: {
-          messageId,
-          code,
-          otherParams,
-        }
-      })
-      clearTimeout(modalInitTimeoutRef.current)
-      modalInitTimeoutRef.current = null
-    }
-
-    isModalInitRef.current = false
-    setModalOpen(false)
-    setModalLoaded(false)
-    setModalShown(false)
-  }
 
   const debug = (name: string, data: any = {}) => {
     context?.onDebugEventInternal?.(name, {
@@ -121,25 +64,6 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
       otherParams,
       bid,
       iframeUrl,
-      iframeLoaded,
-      showIframe,
-      height,
-      containerStyles,
-      iframeStyles,
-      ...data,
-    })
-  }
-
-  const debugModal = (name: string, data: any = {}) => {
-    context?.onDebugEventInternal?.(name, {
-      code,
-      messageId,
-      otherParams,
-      bid,
-      modalUrl,
-      modalOpen,
-      modalShown,
-      modalLoaded,
       ...data,
     })
   }
@@ -165,7 +89,6 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
         (message) => {
           switch (message.type) {
             case 'init-iframe':
-              setIframeLoaded(true)
               debug('Format:iframePostMessage', {
                 params: {
                   code,
@@ -183,56 +106,6 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
               })
               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 ?? 5000)
-              break
-
             case 'event-iframe':
               onEvent?.(message.data)
               context?.onAdEventInternal(message.data)
@@ -250,219 +123,9 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
         error: e,
       })
       console.error('error parsing message from webview', e)
-      reset()
     }
   }
 
-  const onModalMessage = (event: WebViewMessageEvent) => {
-    try {
-      const data = JSON.parse(event.nativeEvent.data) as IframeMessage
-
-      debugModal('Format:modalIframeMessage', {
-        params: { data, messageId, code, otherParams },
-        message: data,
-      })
-
-      const messageHandler = handleIframeMessage(
-        (message) => {
-          switch (message.type) {
-            case 'close-component-iframe':
-              resetModal()
-              break
-
-            case 'init-component-iframe':
-              // Just clearing the timeoutRef didn't work in Android, so we need to set a flag and check it in the timeout callback
-              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 } as IframeMessageEvent)
-    } catch (e) {
-      debugModal('Format:modalIframeMessageError', {
-        params: { error: e, messageId, code, otherParams },
-        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: {
-          messageId,
-          iframeLoaded,
-          contextAdServerUrl: context?.adServerUrl,
-          bid,
-          code,
-          otherParams,
-        }
-      })
-      return
-    }
-    debug('Format:iframePostMessage', {
-      params: {
-        messageId,
-        otherParams,
-        code,
-      }
-    })
-    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) {
-      debug('Format:checkIfInViewportNoContainer', {
-        params: {
-          messageId,
-          code,
-          otherParams,
-        }
-      })
-      return
-    }
-
-    debug('Format:checkIfInViewportMeasure', {
-      params: {
-        windowWidth,
-        windowHeight,
-        messageId,
-        code,
-        otherParams,
-      }
-    })
-
-    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: {
-          messageId,
-          code,
-          otherParams,
-          windowWidth,
-          windowHeight,
-          containerWidth,
-          containerHeight,
-          containerX,
-          containerY,
-          keyboardHeight: keyboardHeightRef.current,
-        }
-      })
-    })
-  }
-
-  useEffect(() => {
-    if (!isAdViewVisible) {
-      debug('Format:checkIfInViewportNotVisible', {
-        params: {
-          messageId,
-          code,
-          otherParams,
-        }
-      })
-      return
-    }
-
-    const interval = setInterval(() => {
-      checkIfInViewport()
-    }, 250)
-
-    return () => {
-      clearInterval(interval)
-      debug('Format:checkIfInViewportCleanup', {
-        params: {
-          messageId,
-          code,
-          otherParams,
-        }
-      })
-    }
-  }, [isAdViewVisible])
-
-  useEffect(() => {
-    const showSubscription = Keyboard.addListener('keyboardDidShow', (e) => {
-      debug('Format:keyboardDidShow', {
-        params: {
-          keyboardHeight: e?.endCoordinates?.height ?? 0,
-          messageId,
-          code,
-          otherParams,
-        }
-      })
-      keyboardHeightRef.current = e?.endCoordinates?.height ?? 0
-    })
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
-      debug('Format:keyboardDidHide', {
-        params: {
-          messageId,
-          code,
-          otherParams,
-        }
-      })
-      keyboardHeightRef.current = 0
-    })
-
-    return () => {
-      showSubscription.remove()
-      hideSubscription.remove()
-      keyboardHeightRef.current = 0
-      debug('Format:keyboardEffectCleanup', {
-        params: {
-          messageId,
-          code,
-          otherParams,
-        }
-      })
-    }
-  }, [])
-
   if (!context || !bid || !iframeUrl) {
     debug('Format:noContextOrBidOrIframeUrl', {
       params: {
@@ -477,115 +140,117 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
     return null
   }
 
-  const inlineContent = (
-    <FrameWebView
-      ref={webViewRef}
-      iframeUrl={iframeUrl}
-      onMessage={onMessage}
+  return (
+    <View
       style={{
-        height,
+        height: 300,
         width: '100%',
         backgroundColor: 'transparent',
         borderWidth: 0,
-        ...iframeStyles,
-      }}
-      onError={() => {
-        debug('Format:iframeError', {
-          params: {
-            messageId,
-            code,
-            otherParams,
-          }
-        })
-        reset()
-      }}
-      onLoad={() => {
-        debug('Format:iframeLoad', {
-          params: {
-            messageId,
-            code,
-            otherParams,
-          }
-        })
       }}
-    />
-  )
-
-  const interstitialContent = (
-    <Modal
-      visible={modalOpen}
-      transparent={true}
-      onRequestClose={resetModal}
-      animationType="slide"
-      statusBarTranslucent={true}
     >
-      <View
+
+      <WebView
+        ref={webViewRef}
+        source={{
+          uri: iframeUrl,
+        }}
+        onMessage={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,
         }}
-      >
-        <FrameWebView
-          ref={modalWebViewRef}
-          iframeUrl={modalUrl}
-          onMessage={onModalMessage}
-          style={{
-            backgroundColor: 'transparent',
-            height: '100%',
-            width: '100%',
-            borderWidth: 0,
-          }}
-          onError={() => {
-            debug('Format:modalError', {
-              params: {
-                messageId,
-                code,
-                otherParams,
-              }
-            })
-            resetModal()
-          }}
-          onLoad={() => {
-            debug('Format:modalLoad', {
-              params: {
-                messageId,
-                code,
-                otherParams,
-              }
-            })
-            setModalLoaded(true)
-          }}
-        />
-      </View>
-    </Modal>
-  )
-
-  return (
-    <>
-      <View
-        style={
-          isAdViewVisible
-            ? containerStyles
-            : {
-                height: 0,
-                overflow: 'hidden',
-              }
-        }
-        ref={containerRef}
-      >
-        {wrapper ? wrapper(inlineContent) : inlineContent}
-      </View>
-
-      {interstitialContent}
-    </>
+        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,
+            }
+          })
+        }}
+        
+      />
+    </View>
   )
 }
 
-const FormatWithErrorBoundary = (props: FormatProps) => (
-  <ErrorBoundary>
-    <Format {...props} />
-  </ErrorBoundary>
-)
-
-export default FormatWithErrorBoundary
+export default Format