@multiplayer-app/session-recorder-react-native 0.0.1-beta.4 → 0.0.1-beta.5

package/ios/ScreenMasking.swift

@@ -0,0 +1,205 @@
+import UIKit
+import React
+
+@objc(SessionRecorder)
+class SessionRecorder: NSObject {
+
+  @objc func captureAndMask(_ resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    DispatchQueue.main.async {
+      guard let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else {
+        reject("NO_WINDOW", "Unable to get key window", nil)
+        return
+      }
+
+      UIGraphicsBeginImageContextWithOptions(window.bounds.size, false, UIScreen.main.scale)
+      window.drawHierarchy(in: window.bounds, afterScreenUpdates: true)
+      let screenshot = UIGraphicsGetImageFromCurrentImageContext()
+      UIGraphicsEndImageContext()
+
+      guard let image = screenshot else {
+        reject("CAPTURE_FAILED", "Failed to capture screen", nil)
+        return
+      }
+
+      // Apply masking to sensitive elements
+      let maskedImage = self.applyMasking(to: image, in: window)
+
+      if let data = maskedImage.jpegData(compressionQuality: 0.5) {
+        let base64 = data.base64EncodedString()
+        resolve(base64)
+      } else {
+        reject("ENCODING_FAILED", "Failed to encode image", nil)
+      }
+    }
+  }
+
+  @objc func captureAndMaskWithOptions(_ options: NSDictionary, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    DispatchQueue.main.async {
+      guard let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else {
+        reject("NO_WINDOW", "Unable to get key window", nil)
+        return
+      }
+
+      UIGraphicsBeginImageContextWithOptions(window.bounds.size, false, UIScreen.main.scale)
+      window.drawHierarchy(in: window.bounds, afterScreenUpdates: true)
+      let screenshot = UIGraphicsGetImageFromCurrentImageContext()
+      UIGraphicsEndImageContext()
+
+      guard let image = screenshot else {
+        reject("CAPTURE_FAILED", "Failed to capture screen", nil)
+        return
+      }
+
+      // Apply masking with custom options
+      let maskedImage = self.applyMaskingWithOptions(to: image, in: window, options: options)
+
+      if let data = maskedImage.jpegData(compressionQuality: 0.5) {
+        let base64 = data.base64EncodedString()
+        resolve(base64)
+      } else {
+        reject("ENCODING_FAILED", "Failed to encode image", nil)
+      }
+    }
+  }
+
+  private func applyMasking(to image: UIImage, in window: UIWindow) -> UIImage {
+    return applyMaskingWithOptions(to: image, in: window, options: [:])
+  }
+
+  private func applyMaskingWithOptions(to image: UIImage, in window: UIWindow, options: NSDictionary) -> UIImage {
+    UIGraphicsBeginImageContextWithOptions(image.size, false, image.scale)
+    guard let context = UIGraphicsGetCurrentContext() else { return image }
+
+    // Draw the original image
+    image.draw(in: CGRect(origin: .zero, size: image.size))
+
+    // Find and mask sensitive elements
+    let sensitiveElements = findSensitiveElements(in: window)
+
+    for element in sensitiveElements {
+      let frame = element.frame
+      let maskingType = getMaskingType(for: element)
+
+      switch maskingType {
+      case .blur:
+        applyBlurMask(in: context, frame: frame)
+      case .rectangle:
+        applyRectangleMask(in: context, frame: frame)
+      case .pixelate:
+        applyPixelateMask(in: context, frame: frame, image: image)
+      case .none:
+        break
+      }
+    }
+
+    let maskedImage = UIGraphicsGetImageFromCurrentImageContext() ?? image
+    UIGraphicsEndImageContext()
+
+    return maskedImage
+  }
+
+  private func findSensitiveElements(in view: UIView) -> [UIView] {
+    var sensitiveElements: [UIView] = []
+
+    func traverseView(_ view: UIView) {
+      // Check if this view should be masked
+      if shouldMaskView(view) {
+        sensitiveElements.append(view)
+      }
+
+      // Recursively check subviews
+      for subview in view.subviews {
+        traverseView(subview)
+      }
+    }
+
+    traverseView(view)
+    return sensitiveElements
+  }
+
+  private func shouldMaskView(_ view: UIView) -> Bool {
+    // Check for UITextField - mask all text fields when inputMasking is enabled
+    if view is UITextField {
+      return true
+    }
+
+    // Check for UITextView - mask all text views when inputMasking is enabled
+    if view is UITextView {
+      return true
+    }
+
+    return false
+  }
+
+  private func getMaskingType(for view: UIView) -> MaskingType {
+    // Default masking type for all text inputs
+    return .rectangle
+  }
+
+  private func applyBlurMask(in context: CGContext, frame: CGRect) {
+    // Create a blur effect
+    context.setFillColor(UIColor.black.withAlphaComponent(0.8).cgColor)
+    context.fill(frame)
+
+    // Add some noise to make it look blurred
+    context.setFillColor(UIColor.white.withAlphaComponent(0.3).cgColor)
+    for _ in 0..<20 {
+      let randomX = frame.origin.x + CGFloat.random(in: 0...frame.width)
+      let randomY = frame.origin.y + CGFloat.random(in: 0...frame.height)
+      let randomSize = CGFloat.random(in: 2...8)
+      context.fillEllipse(in: CGRect(x: randomX, y: randomY, width: randomSize, height: randomSize))
+    }
+  }
+
+  private func applyRectangleMask(in context: CGContext, frame: CGRect) {
+    // Simple rectangle fill
+    context.setFillColor(UIColor.gray.cgColor)
+    context.fill(frame)
+
+    // Add some text-like pattern
+    context.setFillColor(UIColor.darkGray.cgColor)
+    let lineHeight: CGFloat = 4
+    let spacing: CGFloat = 8
+
+    for i in stride(from: frame.origin.y + spacing, to: frame.origin.y + frame.height - spacing, by: lineHeight + spacing) {
+      let lineWidth = CGFloat.random(in: frame.width * 0.3...frame.width * 0.8)
+      let lineX = frame.origin.x + CGFloat.random(in: 0...(frame.width - lineWidth))
+      context.fill(CGRect(x: lineX, y: i, width: lineWidth, height: lineHeight))
+    }
+  }
+
+  private func applyPixelateMask(in context: CGContext, frame: CGRect, image: UIImage) {
+    // Create a pixelated effect
+    let pixelSize: CGFloat = 8
+    let pixelCountX = Int(frame.width / pixelSize)
+    let pixelCountY = Int(frame.height / pixelSize)
+
+    for x in 0..<pixelCountX {
+      for y in 0..<pixelCountY {
+        let pixelFrame = CGRect(
+          x: frame.origin.x + CGFloat(x) * pixelSize,
+          y: frame.origin.y + CGFloat(y) * pixelSize,
+          width: pixelSize,
+          height: pixelSize
+        )
+
+        // Use a random color for each pixel
+        let randomColor = UIColor(
+          red: CGFloat.random(in: 0...1),
+          green: CGFloat.random(in: 0...1),
+          blue: CGFloat.random(in: 0...1),
+          alpha: 1.0
+        )
+        context.setFillColor(randomColor.cgColor)
+        context.fill(pixelFrame)
+      }
+    }
+  }
+}
+
+private enum MaskingType {
+  case blur
+  case rectangle
+  case pixelate
+  case none
+}

package/ios/SessionRecorder.m

@@ -0,0 +1,12 @@
+#import <React/RCTBridgeModule.h>
+
+@interface RCT_EXTERN_MODULE(SessionRecorder, NSObject)
+
+RCT_EXTERN_METHOD(captureAndMask:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(captureAndMaskWithOptions:(NSDictionary *)options
+                  resolve:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject)
+
+@end

package/ios/SessionRecorder.podspec

@@ -0,0 +1,21 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "..", "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "SessionRecorder"
+  s.version      = package["version"]
+  s.summary      = "Native session recorder module for React Native"
+  s.description  = "A native module that provides session recording with automatic masking of sensitive UI elements"
+  s.homepage     = "https://github.com/multiplayer-app/multiplayer-session-recorder-javascript"
+  s.license      = "MIT"
+  s.authors      = { "Multiplayer Software, Inc." => "https://www.multiplayer.app" }
+  s.platforms    = { :ios => "12.0" }
+  s.source       = { :git => "https://github.com/multiplayer-app/multiplayer-session-recorder-javascript.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.requires_arc = true
+
+  s.dependency "React-Core"
+  s.dependency "React"
+end

package/ios/SessionRecorder.swift

@@ -0,0 +1,205 @@
+import UIKit
+import React
+
+@objc(SessionRecorder)
+class SessionRecorder: NSObject {
+
+  @objc func captureAndMask(_ resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    DispatchQueue.main.async {
+      guard let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else {
+        reject("NO_WINDOW", "Unable to get key window", nil)
+        return
+      }
+
+      UIGraphicsBeginImageContextWithOptions(window.bounds.size, false, UIScreen.main.scale)
+      window.drawHierarchy(in: window.bounds, afterScreenUpdates: true)
+      let screenshot = UIGraphicsGetImageFromCurrentImageContext()
+      UIGraphicsEndImageContext()
+
+      guard let image = screenshot else {
+        reject("CAPTURE_FAILED", "Failed to capture screen", nil)
+        return
+      }
+
+      // Apply masking to sensitive elements
+      let maskedImage = self.applyMasking(to: image, in: window)
+
+      if let data = maskedImage.jpegData(compressionQuality: 0.5) {
+        let base64 = data.base64EncodedString()
+        resolve(base64)
+      } else {
+        reject("ENCODING_FAILED", "Failed to encode image", nil)
+      }
+    }
+  }
+
+  @objc func captureAndMaskWithOptions(_ options: NSDictionary, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    DispatchQueue.main.async {
+      guard let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else {
+        reject("NO_WINDOW", "Unable to get key window", nil)
+        return
+      }
+
+      UIGraphicsBeginImageContextWithOptions(window.bounds.size, false, UIScreen.main.scale)
+      window.drawHierarchy(in: window.bounds, afterScreenUpdates: true)
+      let screenshot = UIGraphicsGetImageFromCurrentImageContext()
+      UIGraphicsEndImageContext()
+
+      guard let image = screenshot else {
+        reject("CAPTURE_FAILED", "Failed to capture screen", nil)
+        return
+      }
+
+      // Apply masking with custom options
+      let maskedImage = self.applyMaskingWithOptions(to: image, in: window, options: options)
+
+      if let data = maskedImage.jpegData(compressionQuality: 0.5) {
+        let base64 = data.base64EncodedString()
+        resolve(base64)
+      } else {
+        reject("ENCODING_FAILED", "Failed to encode image", nil)
+      }
+    }
+  }
+
+  private func applyMasking(to image: UIImage, in window: UIWindow) -> UIImage {
+    return applyMaskingWithOptions(to: image, in: window, options: [:])
+  }
+
+  private func applyMaskingWithOptions(to image: UIImage, in window: UIWindow, options: NSDictionary) -> UIImage {
+    UIGraphicsBeginImageContextWithOptions(image.size, false, image.scale)
+    guard let context = UIGraphicsGetCurrentContext() else { return image }
+
+    // Draw the original image
+    image.draw(in: CGRect(origin: .zero, size: image.size))
+
+    // Find and mask sensitive elements
+    let sensitiveElements = findSensitiveElements(in: window)
+
+    for element in sensitiveElements {
+      let frame = element.frame
+      let maskingType = getMaskingType(for: element)
+
+      switch maskingType {
+      case .blur:
+        applyBlurMask(in: context, frame: frame)
+      case .rectangle:
+        applyRectangleMask(in: context, frame: frame)
+      case .pixelate:
+        applyPixelateMask(in: context, frame: frame, image: image)
+      case .none:
+        break
+      }
+    }
+
+    let maskedImage = UIGraphicsGetImageFromCurrentImageContext() ?? image
+    UIGraphicsEndImageContext()
+
+    return maskedImage
+  }
+
+  private func findSensitiveElements(in view: UIView) -> [UIView] {
+    var sensitiveElements: [UIView] = []
+
+    func traverseView(_ view: UIView) {
+      // Check if this view should be masked
+      if shouldMaskView(view) {
+        sensitiveElements.append(view)
+      }
+
+      // Recursively check subviews
+      for subview in view.subviews {
+        traverseView(subview)
+      }
+    }
+
+    traverseView(view)
+    return sensitiveElements
+  }
+
+  private func shouldMaskView(_ view: UIView) -> Bool {
+    // Check for UITextField - mask all text fields when inputMasking is enabled
+    if view is UITextField {
+      return true
+    }
+
+    // Check for UITextView - mask all text views when inputMasking is enabled
+    if view is UITextView {
+      return true
+    }
+
+    return false
+  }
+
+  private func getMaskingType(for view: UIView) -> MaskingType {
+    // Default masking type for all text inputs
+    return .rectangle
+  }
+
+  private func applyBlurMask(in context: CGContext, frame: CGRect) {
+    // Create a blur effect
+    context.setFillColor(UIColor.black.withAlphaComponent(0.8).cgColor)
+    context.fill(frame)
+
+    // Add some noise to make it look blurred
+    context.setFillColor(UIColor.white.withAlphaComponent(0.3).cgColor)
+    for _ in 0..<20 {
+      let randomX = frame.origin.x + CGFloat.random(in: 0...frame.width)
+      let randomY = frame.origin.y + CGFloat.random(in: 0...frame.height)
+      let randomSize = CGFloat.random(in: 2...8)
+      context.fillEllipse(in: CGRect(x: randomX, y: randomY, width: randomSize, height: randomSize))
+    }
+  }
+
+  private func applyRectangleMask(in context: CGContext, frame: CGRect) {
+    // Simple rectangle fill
+    context.setFillColor(UIColor.gray.cgColor)
+    context.fill(frame)
+
+    // Add some text-like pattern
+    context.setFillColor(UIColor.darkGray.cgColor)
+    let lineHeight: CGFloat = 4
+    let spacing: CGFloat = 8
+
+    for i in stride(from: frame.origin.y + spacing, to: frame.origin.y + frame.height - spacing, by: lineHeight + spacing) {
+      let lineWidth = CGFloat.random(in: frame.width * 0.3...frame.width * 0.8)
+      let lineX = frame.origin.x + CGFloat.random(in: 0...(frame.width - lineWidth))
+      context.fill(CGRect(x: lineX, y: i, width: lineWidth, height: lineHeight))
+    }
+  }
+
+  private func applyPixelateMask(in context: CGContext, frame: CGRect, image: UIImage) {
+    // Create a pixelated effect
+    let pixelSize: CGFloat = 8
+    let pixelCountX = Int(frame.width / pixelSize)
+    let pixelCountY = Int(frame.height / pixelSize)
+
+    for x in 0..<pixelCountX {
+      for y in 0..<pixelCountY {
+        let pixelFrame = CGRect(
+          x: frame.origin.x + CGFloat(x) * pixelSize,
+          y: frame.origin.y + CGFloat(y) * pixelSize,
+          width: pixelSize,
+          height: pixelSize
+        )
+
+        // Use a random color for each pixel
+        let randomColor = UIColor(
+          red: CGFloat.random(in: 0...1),
+          green: CGFloat.random(in: 0...1),
+          blue: CGFloat.random(in: 0...1),
+          alpha: 1.0
+        )
+        context.setFillColor(randomColor.cgColor)
+        context.fill(pixelFrame)
+      }
+    }
+  }
+}
+
+private enum MaskingType {
+  case blur
+  case rectangle
+  case pixelate
+  case none
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react-native",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.5",
   "description": "Multiplayer Fullstack Session Recorder for React Native",
   "author": {
     "name": "Multiplayer Software, Inc.",
@@ -88,5 +88,14 @@
   },
   "optionalDependencies": {
     "expo-constants": "^15.0.0"
+  },
+  "react-native": {
+    "ios": {
+      "podspecPath": "./ios/SessionRecorder.podspec"
+    },
+    "android": {
+      "sourceDir": "./android",
+      "packageImportPath": "import com.multiplayer.sessionrecorder.SessionRecorderPackage;"
+    }
   }
 }

package/react-native.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  dependencies: {
+    'react-native-session-recorder': {
+      platforms: {
+        android: {
+          sourceDir: '../android',
+          packageImportPath: 'import com.multiplayer.sessionrecorder.SessionRecorderPackage;'
+        },
+        ios: {
+          podspecPath: '../ios/SessionRecorder.podspec'
+        }
+      }
+    }
+  }
+}

package/src/components/SessionRecorderWidget/FinalPopover.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
-import { View, Text, Pressable, TextInput, Linking, Alert } from 'react-native'
+import { View, Text, Pressable, TextInput, Alert } from 'react-native'
 import { WidgetTextOverridesConfig } from '../../types'
 import { sharedStyles } from './styles'
+import ModalHeader from './ModalHeader'
 
 interface FinalPopoverProps {
   textOverrides: WidgetTextOverridesConfig
@@ -11,13 +12,7 @@ interface FinalPopoverProps {
   isSubmitting: boolean
 }
 
-const FinalPopover: React.FC<FinalPopoverProps> = ({
-  textOverrides,
-  onStopRecording,
-  onCancelSession,
-  onClose,
-  isSubmitting
-}) => {
+const FinalPopover: React.FC<FinalPopoverProps> = ({ textOverrides, onStopRecording, onCancelSession, isSubmitting }) => {
   const [comment, setComment] = useState('')
 
   const handleStopRecording = async () => {
@@ -30,17 +25,11 @@ const FinalPopover: React.FC<FinalPopoverProps> = ({
 
   return (
     <View style={sharedStyles.popoverContent}>
-      <View style={sharedStyles.popoverHeader}>
-        <Pressable onPress={() => Linking.openURL('https://www.multiplayer.app')}>
-          <Text style={sharedStyles.logoText}>Multiplayer</Text>
-        </Pressable>
+      <ModalHeader>
         <Pressable onPress={onCancelSession} style={sharedStyles.cancelButton}>
           <Text style={sharedStyles.cancelButtonText}>{textOverrides.cancelButtonText}</Text>
         </Pressable>
-        <Pressable onPress={onClose} style={sharedStyles.closeButton}>
-          <Text style={sharedStyles.closeButtonText}>×</Text>
-        </Pressable>
-      </View>
+      </ModalHeader>
 
       <View style={sharedStyles.popoverBody}>
         <Text style={sharedStyles.title}>{textOverrides.finalTitle}</Text>

package/src/components/SessionRecorderWidget/FloatingButton.tsx

@@ -8,20 +8,21 @@ interface FloatingButtonProps {
   sessionState: SessionState | null
   onPress: () => void
 }
-const buttonSize = 60
+
+const buttonSize = 52
 const rightOffset = 20
 const topOffset = Platform.OS === 'ios' ? 60 : 40
 
 const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }) => {
-  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current // For tracking position
-  const lastPosition = useRef({ top: topOffset, right: rightOffset }) // Track the last saved position
-  const storageService = useRef(StorageService.getInstance()).current // Singleton instance
+  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current
+  const lastPosition = useRef({ top: topOffset, right: rightOffset })
+  const storageService = useRef(StorageService.getInstance()).current
 
   const screenBounds = useMemo(() => {
     const { width, height } = Dimensions.get('window')
 
     return {
-      minTop: topOffset, // Account for status bar
+      minTop: topOffset,
       maxTop: height - buttonSize,
       minRight: 0,
       maxRight: width - buttonSize
@@ -32,14 +33,12 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }
   useEffect(() => {
     const savedPosition = storageService.getFloatingButtonPosition()
     if (savedPosition) {
-      // Convert from x,y coordinates to top,right coordinates
-      const { width, height } = Dimensions.get('window')
+      const { width } = Dimensions.get('window')
       const top = savedPosition.y
       const right = width - savedPosition.x - buttonSize
       lastPosition.current = { top, right }
       position.setValue({ x: right, y: top })
     } else {
-      // Set default position
       position.setValue({ x: lastPosition.current.right, y: lastPosition.current.top })
     }
   }, [])
@@ -48,7 +47,6 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }
     PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: (evt, gestureState) => {
-        // Only start dragging if movement is significant enough
         const distance = Math.sqrt(gestureState.dx * gestureState.dx + gestureState.dy * gestureState.dy)
         return distance > 5
       },
@@ -59,7 +57,7 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }
       onPanResponderMove: (evt, gestureState) => {
         // Calculate new position based on gesture movement
         const newTop = lastPosition.current.top + gestureState.dy
-        const newRight = lastPosition.current.right - gestureState.dx // Invert dx for right positioning
+        const newRight = lastPosition.current.right - gestureState.dx
 
         // Update position during drag
         position.setValue({ x: newRight, y: newTop })
@@ -74,7 +72,7 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }
         } else {
           // Calculate new position after dragging
           const newTop = lastPosition.current.top + gestureState.dy
-          const newRight = lastPosition.current.right - gestureState.dx // Invert dx for right positioning
+          const newRight = lastPosition.current.right - gestureState.dx
 
           // Clamp to screen bounds
           const clampedTop = Math.max(screenBounds.minTop, Math.min(screenBounds.maxTop, newTop))
@@ -99,31 +97,20 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }
   ).current
 
   // Memoized button icon and color for performance
-  const buttonIcon = useMemo(() => {
-    switch (sessionState) {
-      case SessionState.started:
-        return <CapturingIcon size={24} color='white' />
-      case SessionState.paused:
-        return <PausedIcon size={24} color='white' />
-      default:
-        return <RecordIcon size={19} color='white' />
-    }
-  }, [sessionState])
-
-  const buttonColor = useMemo(() => {
+  const content = useMemo(() => {
     switch (sessionState) {
       case SessionState.started:
-        return '#FF4444'
+        return { icon: <CapturingIcon size={28} color='white' />, color: '#FF4444' }
       case SessionState.paused:
-        return '#FFA500'
+        return { icon: <PausedIcon size={28} color='white' />, color: '#FFA500' }
       default:
-        return '#007AFF'
+        return { icon: <RecordIcon size={28} color='#718096' />, color: '#ffffff' }
     }
   }, [sessionState])
 
   return (
     <Animated.View style={[styles.draggableButton, { top: position.y, right: position.x }]} {...panResponder.panHandlers}>
-      <View style={[styles.floatingButton, { backgroundColor: buttonColor }]}>{buttonIcon}</View>
+      <View style={[styles.floatingButton, { backgroundColor: content.color }]}>{content.icon}</View>
     </Animated.View>
   )
 }

package/src/components/SessionRecorderWidget/InitialPopover.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import { View, Text, Pressable, Switch, Linking, Alert } from 'react-native'
+import { View, Text, Pressable, Alert, Switch } from 'react-native'
 import { SessionType } from '@multiplayer-app/session-recorder-common'
 import { WidgetTextOverridesConfig } from '../../types'
 import { sharedStyles } from './styles'
+import ModalHeader from './ModalHeader'
 
 interface InitialPopoverProps {
   textOverrides: WidgetTextOverridesConfig
@@ -34,14 +35,7 @@ const InitialPopover: React.FC<InitialPopoverProps> = ({
 
   return (
     <View style={sharedStyles.popoverContent}>
-      <View style={sharedStyles.popoverHeader}>
-        <Pressable onPress={() => Linking.openURL('https://www.multiplayer.app')}>
-          <Text style={sharedStyles.logoText}>Multiplayer</Text>
-        </Pressable>
-        <Pressable onPress={onClose} style={sharedStyles.closeButton}>
-          <Text style={sharedStyles.closeButtonText}>×</Text>
-        </Pressable>
-      </View>
+      <ModalHeader />
 
       <View style={sharedStyles.popoverBody}>
         {showContinuousRecording && (