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

package/src/components/SessionRecorderWidget/ModalContainer.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { Animated, View, Pressable, StyleSheet, Dimensions, Modal } from 'react-native'
+import { Animated, Pressable, StyleSheet, Dimensions, Modal, SafeAreaView } from 'react-native'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window')
 const MODAL_HEIGHT = SCREEN_HEIGHT * 0.7
@@ -12,28 +13,86 @@ interface ModalContainerProps {
 
 const ModalContainer: React.FC<ModalContainerProps> = ({ isVisible, onClose, children }) => {
   const fadeAnim = useRef(new Animated.Value(0)).current
+  const translateY = useRef(new Animated.Value(0)).current
   const [animatedFinished, setAnimatedFinished] = useState(false)
 
+  const SWIPE_THRESHOLD = 100 // Distance to trigger close
+  const MAX_SWIPE_DISTANCE = 200 // Maximum swipe distance
+
+  const animateClose = () => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true
+      }),
+      Animated.timing(translateY, {
+        toValue: MODAL_HEIGHT,
+        duration: 250,
+        useNativeDriver: true
+      })
+    ]).start(() => {
+      onClose()
+    })
+  }
+
   useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: isVisible ? 1 : 0,
-      duration: 300,
-      useNativeDriver: true
-    }).start()
-  }, [isVisible, fadeAnim])
+    if (isVisible) {
+      // Start from bottom and animate to position
+      translateY.setValue(MODAL_HEIGHT)
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true
+        }),
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true
+        })
+      ]).start()
+    }
+  }, [isVisible, fadeAnim, translateY])
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((event) => {
+      translateY.setValue(event.translationY)
+    })
+    .onEnd((event) => {
+      const { translationY, velocityY } = event
+
+      // If swiped down with sufficient distance or velocity, close modal
+      if (translationY > SWIPE_THRESHOLD || velocityY > 500) {
+        animateClose()
+      } else {
+        // Snap back to original position
+        Animated.spring(translateY, {
+          toValue: 0,
+          useNativeDriver: true,
+          tension: 100,
+          friction: 8
+        }).start()
+      }
+    })
+    .activeOffsetY(10)
+    .runOnJS(true)
 
   return (
     <>
       {isVisible && (
         <Animated.View style={{ ...styles.backdrop, opacity: fadeAnim }}>
-          <Pressable style={styles.backdropPressable} onPress={onClose} />
+          <Pressable style={styles.backdropPressable} onPress={animateClose} />
         </Animated.View>
       )}
-      <Modal visible={isVisible} transparent animationType='slide' onRequestClose={onClose}>
-        <View style={styles.modal}>
-          <View style={styles.modalHandle} />
-          {children}
-        </View>
+      <Modal visible={isVisible} transparent animationType='none' onRequestClose={onClose}>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <GestureDetector gesture={panGesture}>
+            <Animated.View style={[styles.modal, { transform: [{ translateY }] }]}>
+              <SafeAreaView style={styles.safeArea}>{children}</SafeAreaView>
+            </Animated.View>
+          </GestureDetector>
+        </GestureHandlerRootView>
       </Modal>
     </>
   )
@@ -51,29 +110,18 @@ const styles = StyleSheet.create({
   backdropPressable: {
     flex: 1
   },
+  safeArea: {
+    flex: 1
+  },
   modal: {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
-    height: MODAL_HEIGHT,
+    height: 'auto',
     backgroundColor: 'white',
     borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    elevation: 10,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: -2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 4
-  },
-  modalHandle: {
-    width: 40,
-    height: 4,
-    backgroundColor: '#D1D5DB',
-    borderRadius: 2,
-    alignSelf: 'center',
-    marginTop: 8,
-    marginBottom: 8
+    borderTopRightRadius: 20
   }
 })
 

package/src/components/SessionRecorderWidget/ModalHeader.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { View, Pressable, Linking } from 'react-native'
+import { sharedStyles } from './styles'
+import { LogoIcon } from './icons'
+
+interface ModalHeaderProps {
+  children?: React.ReactNode
+}
+
+const ModalHeader: React.FC<ModalHeaderProps> = ({ children }) => {
+  return (
+    <View style={sharedStyles.popoverHeader}>
+      <View style={sharedStyles.modalHandle} />
+      <View style={sharedStyles.popoverHeaderContent}>
+        <Pressable onPress={() => Linking.openURL('https://www.multiplayer.app')}>
+          <LogoIcon size={42} />
+        </Pressable>
+        {children}
+      </View>
+    </View>
+  )
+}
+
+export default ModalHeader

package/src/components/SessionRecorderWidget/icons.tsx

@@ -41,3 +41,12 @@ export const CheckmarkIcon: React.FC<IconProps> = ({ size = 24, color = 'white'
     />
   </Svg>
 )
+
+export const LogoIcon: React.FC<IconProps> = ({ size = 30, color = '#473CFB' }) => (
+  <Svg width={size} height={size * 0.8} viewBox='0 0 30 24' fill='none'>
+    <Path
+      d='M28.8324 8.83643L23.5495 6.85854L21.4856 6.08553L23.6001 0.4375L15 3.65769L6.39963 0.4375L8.51441 6.08585L6.45046 6.85885L1.16757 8.83674L0.625 9.03974L9.10095 12.0981C10.0891 12.4548 10.9201 13.1265 11.4758 13.9952C11.6632 14.2883 11.8194 14.6036 11.9398 14.9369L15 23.4076L18.0602 14.9369C18.1806 14.6036 18.3368 14.288 18.5242 13.9952C19.0802 13.1265 19.9112 12.4545 20.8991 12.0981L29.375 9.03974L28.8324 8.83674V8.83643ZM19.779 10.6434C18.2872 11.1816 17.1126 12.3563 16.5744 13.848L15.014 18.173L11.5182 8.83643L10.7776 6.85854L10.2456 5.43757L9.57367 3.64272L12.3068 4.66612L18.1631 6.85885L20.8233 7.85481L23.4457 8.83674L24.104 9.08308L19.779 10.6438V10.6434Z'
+      fill={color}
+    />
+  </Svg>
+)

package/src/components/SessionRecorderWidget/styles.ts

@@ -4,31 +4,37 @@ export const sharedStyles = StyleSheet.create({
   // Popover styles
   popoverContent: {
     flex: 1,
-    paddingHorizontal: 20
+    paddingHorizontal: 0
   },
   popoverHeader: {
+    flexDirection: 'column',
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    backgroundColor: '#e3ecfd',
+    shadowColor: '#e3ecfd',
+    shadowOffset: { width: 0, height: 10, },
+    shadowOpacity: 1,
+    shadowRadius: 5,
+    elevation: 3,
+  },
+  modalHandle: {
+    marginTop: 8,
+    marginBottom: 16,
+    width: 40,
+    height: 4,
+    backgroundColor: '#D1D5DB',
+    borderRadius: 2,
+    alignSelf: 'center',
+  },
+  popoverHeaderContent: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E7EB'
-  },
-  logoText: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#007AFF'
-  },
-  closeButton: {
-    width: 30,
-    height: 30,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  closeButtonText: {
-    fontSize: 24,
-    color: '#6B7280'
+    alignItems: 'flex-start',
   },
+
+
   cancelButton: {
     paddingHorizontal: 12,
     paddingVertical: 6,
@@ -42,34 +48,34 @@ export const sharedStyles = StyleSheet.create({
   },
   popoverBody: {
     flex: 1,
-    paddingVertical: 20
+    padding: 16,
+    paddingTop: 32,
   },
   title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#111827',
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#2d3748',
     marginBottom: 12
   },
   description: {
-    fontSize: 16,
-    color: '#6B7280',
-    lineHeight: 24,
+    fontSize: 14,
+    color: '#718096',
     marginBottom: 24
   },
   popoverFooter: {
     marginTop: 'auto',
-    paddingTop: 20
+    paddingTop: 48
   },
   actionButton: {
     paddingVertical: 16,
     paddingHorizontal: 24,
-    borderRadius: 8,
+    borderRadius: 12,
     alignItems: 'center'
   },
   actionButtonText: {
     color: 'white',
     fontSize: 16,
-    fontWeight: '600'
+    fontWeight: '500'
   },
 
   // Continuous recording styles
@@ -80,8 +86,15 @@ export const sharedStyles = StyleSheet.create({
     marginBottom: 20,
     paddingVertical: 12,
     paddingHorizontal: 16,
-    backgroundColor: '#F9FAFB',
-    borderRadius: 8
+    borderWidth: 1,
+    borderColor: '#e1e8f1',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 3,
+    elevation: 3,
   },
   continuousRecordingLabel: {
     fontSize: 16,
@@ -126,12 +139,12 @@ export const sharedStyles = StyleSheet.create({
 
   // Button color variants
   startButton: {
-    backgroundColor: '#007AFF'
+    backgroundColor: '#473cfb'
   },
   stopButton: {
-    backgroundColor: '#FF4444'
+    backgroundColor: '#473cfb'
   },
   saveButton: {
-    backgroundColor: '#34C759'
+    backgroundColor: '#473cfb'
   }
 })

package/src/components/index.ts

@@ -1 +1,3 @@
-export * from './GestureCaptureWrapper'
+export * from './GestureCaptureWrapper'
+export * from './ScreenRecorderView'
+export * from './SessionRecorderWidget'

package/src/config/defaults.ts

@@ -23,6 +23,7 @@ export const DEFAULT_MASKING_CONFIG: MaskingConfig = {
   maskHeadersList: sensitiveHeaders,
   headersToInclude: [],
   headersToExclude: [],
+  inputMasking: true,
 }
 
 export const DEFAULT_WIDGET_TEXT_CONFIG: WidgetTextOverridesConfig = {

package/src/config/masking.ts

@@ -23,5 +23,6 @@ export const getMaskingConfig = (masking?: MaskingConfig): MaskingConfig => {
     isContentMaskingEnabled: isValidBoolean(masking.isContentMaskingEnabled, baseMasking.isContentMaskingEnabled ?? true),
     maskBody: isValidFunction(masking.maskBody, mask(maskBodyFieldsList)),
     maskHeaders: isValidFunction(masking.maskHeaders, mask(maskHeadersList)),
+    inputMasking: isValidBoolean(masking.inputMasking, baseMasking.inputMasking ?? true),
   }
 }

package/src/native/ScreenMasking.ts

@@ -0,0 +1,34 @@
+import { NativeModules } from 'react-native'
+
+export interface MaskingOptions {
+  /** Quality of the captured image (0.1 to 1.0) */
+  quality?: number
+  /** Whether to mask all input fields automatically */
+  inputMasking?: boolean
+}
+
+
+export interface SessionRecorderNativeModule {
+  /**
+   * Capture the current screen and apply masking to sensitive elements
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMask(): Promise<string>
+
+  /**
+   * Capture the current screen and apply masking with custom options
+   * @param options Custom masking options
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMaskWithOptions(options: MaskingOptions): Promise<string>
+}
+
+// Get the native module
+const { SessionRecorder } = NativeModules
+
+// Validate that the native module is available
+if (!SessionRecorder) {
+  console.warn('SessionRecorder native module is not available. Auto-linking may not have completed yet.')
+}
+
+export default SessionRecorder as SessionRecorderNativeModule

package/src/native/SessionRecorderNative.ts

@@ -0,0 +1,34 @@
+import { NativeModules } from 'react-native'
+
+export interface MaskingOptions {
+  /** Quality of the captured image (0.1 to 1.0) */
+  quality?: number
+  /** Whether to mask all input fields automatically */
+  inputMasking?: boolean
+}
+
+
+export interface SessionRecorderNativeModule {
+  /**
+   * Capture the current screen and apply masking to sensitive elements
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMask(): Promise<string>
+  
+  /**
+   * Capture the current screen and apply masking with custom options
+   * @param options Custom masking options
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMaskWithOptions(options: MaskingOptions): Promise<string>
+}
+
+// Get the native module
+const { SessionRecorder } = NativeModules
+
+// Validate that the native module is available
+if (!SessionRecorder) {
+  console.warn('SessionRecorder native module is not available. Auto-linking may not have completed yet.')
+}
+
+export default SessionRecorder as SessionRecorderNativeModule

package/src/recorder/screenRecorder.ts

@@ -10,6 +10,7 @@ import {
   generateScreenHash,
   logger,
 } from '../utils'
+import { screenMaskingService, ScreenMaskingConfig } from '../services/screenMaskingService'
 
 export class ScreenRecorder implements EventRecorder {
   private config?: RecorderConfig
@@ -18,7 +19,7 @@ export class ScreenRecorder implements EventRecorder {
   private captureInterval?: NodeJS.Timeout
   private captureCount: number = 0
   private maxCaptures: number = 100 // Limit captures to prevent memory issues
-  private captureQuality: number = 0.3
+  private captureQuality: number = 0.1
   private captureFormat: 'png' | 'jpg' = 'jpg'
   private screenDimensions: { width: number; height: number } | null = null
   private currentScreen: string | null = null
@@ -30,11 +31,24 @@ export class ScreenRecorder implements EventRecorder {
   private enableChangeDetection: boolean = true
   private hashSampleSize: number = 100
   private currentImageNodeId: number | null = null
+  private maskingConfig?: ScreenMaskingConfig
 
   init(config: RecorderConfig, eventRecorder?: EventRecorder): void {
     this.config = config
     this.eventRecorder = eventRecorder
     this._getScreenDimensions()
+
+    // Initialize masking configuration
+    this.maskingConfig = {
+      enabled: true,
+      inputMasking: this.config?.masking?.inputMasking ?? true,
+      defaultOptions: {
+        quality: this.captureQuality,
+      },
+    }
+
+    // Update the masking service configuration
+    screenMaskingService.updateConfig(this.maskingConfig)
   }
 
   start(): void {
@@ -135,6 +149,21 @@ export class ScreenRecorder implements EventRecorder {
 
   private async _captureScreenBase64(): Promise<string | null> {
     try {
+      // Try native masking first if available
+      if (screenMaskingService.isScreenMaskingAvailable()) {
+        logger.info('ScreenRecorder', 'Using native masking for screen capture')
+        const maskedImage = await screenMaskingService.captureMaskedScreen({
+          quality: this.captureQuality,
+        })
+
+        if (maskedImage) {
+          return maskedImage
+        }
+
+        logger.warn('ScreenRecorder', 'Native masking failed, falling back to view-shot')
+      }
+
+      // Fallback to react-native-view-shot
       if (!this.viewShotRef) {
         logger.warn('ScreenRecorder', 'ViewShot ref not available for screen capture')
         return null
@@ -451,7 +480,7 @@ export class ScreenRecorder implements EventRecorder {
   // Get current configuration
   getConfiguration(): Record<string, any> {
     return {
-      captureInterval: this.captureInterval ? 5000 : 0, // Default 5 seconds
+      captureInterval: this.captureInterval ? 2000 : 0, // Default 5 seconds
       captureQuality: this.captureQuality,
       captureFormat: this.captureFormat,
       maxCaptures: this.maxCaptures,

package/src/services/screenMaskingService.ts

@@ -0,0 +1,114 @@
+import SessionRecorderNative, { MaskingOptions } from '../native/SessionRecorderNative'
+import { logger } from '../utils'
+
+export interface ScreenMaskingConfig {
+  /** Whether screen masking is enabled */
+  enabled: boolean
+  /** Whether to mask all input fields automatically */
+  inputMasking: boolean
+  /** Default masking options */
+  defaultOptions?: MaskingOptions
+}
+
+export class ScreenMaskingService {
+  private config: ScreenMaskingConfig
+  private isAvailable: boolean = false
+
+  constructor(config: ScreenMaskingConfig = { enabled: true, inputMasking: true }) {
+    this.config = config
+    this.checkAvailability()
+  }
+
+  /**
+   * Check if the native masking module is available
+   */
+  private checkAvailability(): void {
+    try {
+      // Try to access the native module to check if it's available
+      if (SessionRecorderNative && typeof SessionRecorderNative.captureAndMask === 'function') {
+        this.isAvailable = true
+        logger.info('ScreenMaskingService', 'Screen masking native module is available')
+      } else {
+        this.isAvailable = false
+        logger.warn('ScreenMaskingService', 'Screen masking native module is not available - auto-linking may still be in progress')
+
+        // Retry after a delay for auto-linking
+        setTimeout(() => {
+          this.checkAvailability()
+        }, 2000)
+      }
+    } catch (error) {
+      this.isAvailable = false
+      logger.error('ScreenMaskingService', 'Error checking screen masking availability:', error)
+    }
+  }
+
+  /**
+   * Capture screen with masking applied
+   */
+  async captureMaskedScreen(options?: MaskingOptions): Promise<string | null> {
+    if (!this.isAvailable || !this.config.enabled) {
+      logger.warn('ScreenMaskingService', 'Screen masking is not available or disabled')
+      return null
+    }
+
+    try {
+      const maskingOptions: MaskingOptions = {
+        ...this.config.defaultOptions,
+        ...options,
+        inputMasking: this.config.inputMasking,
+      }
+
+      const maskedImageBase64 = await SessionRecorderNative.captureAndMaskWithOptions(maskingOptions)
+      logger.info('ScreenMaskingService', 'Successfully captured masked screen')
+      return maskedImageBase64
+    } catch (error) {
+      logger.error('ScreenMaskingService', 'Failed to capture masked screen:', error)
+      return null
+    }
+  }
+
+  /**
+   * Capture screen with basic masking (no custom options)
+   */
+  async captureMaskedScreenBasic(): Promise<string | null> {
+    if (!this.isAvailable || !this.config.enabled) {
+      logger.warn('ScreenMaskingService', 'Screen masking is not available or disabled')
+      return null
+    }
+
+    try {
+      const maskedImageBase64 = await SessionRecorderNative.captureAndMask()
+      logger.info('ScreenMaskingService', 'Successfully captured masked screen (basic)')
+      return maskedImageBase64
+    } catch (error) {
+      logger.error('ScreenMaskingService', 'Failed to capture masked screen (basic):', error)
+      return null
+    }
+  }
+
+  /**
+   * Update the masking configuration
+   */
+  updateConfig(config: Partial<ScreenMaskingConfig>): void {
+    this.config = { ...this.config, ...config }
+    logger.info('ScreenMaskingService', 'Screen masking configuration updated')
+  }
+
+  /**
+   * Check if screen masking is available
+   */
+  isScreenMaskingAvailable(): boolean {
+    return this.isAvailable && this.config.enabled
+  }
+
+  /**
+   * Get the current configuration
+   */
+  getConfig(): ScreenMaskingConfig {
+    return { ...this.config }
+  }
+}
+
+// Create a singleton instance
+export const screenMaskingService = new ScreenMaskingService()

package/src/types/session-recorder.ts

@@ -150,7 +150,6 @@ export interface MaskingConfig {
   /** Custom function for masking headers in traces */
   maskHeaders?: (headers: any, span: any) => any;
 
-
   /** List of body fields to mask in traces */
   maskBodyFieldsList?: string[]
   /** List of headers to mask in traces */
@@ -160,6 +159,11 @@ export interface MaskingConfig {
   headersToInclude?: string[]
   /** List of headers to exclude from traces */
   headersToExclude?: string[]
+
+  /** Whether to mask all input fields during screen recording
+   *  @default true
+  */
+  inputMasking?: boolean
 }
 
 /**
@@ -222,6 +226,8 @@ export interface RecorderConfig extends BaseConfig {
   recordNavigation?: boolean
   /** Whether to record screen */
   recordScreen?: boolean
+  /** Configuration for masking sensitive data in session recordings */
+  masking?: MaskingConfig
 }
 
 /**