@multiplayer-app/session-recorder-react-native 0.0.1-beta.7 → 0.0.1-beta.9

package/ios/ScreenMasking.swift

@@ -1,205 +0,0 @@
-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.podspec

@@ -1,21 +0,0 @@
-require "json"
-
-package = JSON.parse(File.read(File.join(__dir__, "..", "package.json")))
-
-Pod::Spec.new do |s|
-  s.name         = "SessionRecorderNative"
-  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/scripts/generate-app-metadata.js

@@ -1,173 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Build script to automatically extract app metadata from configuration files
- * This runs without developer intervention and generates app-metadata.ts
- */
-
-const fs = require('fs')
-const path = require('path')
-
-function findProjectRoot() {
-  let currentDir = process.cwd()
-
-  // Look for package.json going up the directory tree
-  while (currentDir !== path.dirname(currentDir)) {
-    if (fs.existsSync(path.join(currentDir, 'package.json'))) {
-      return currentDir
-    }
-    currentDir = path.dirname(currentDir)
-  }
-
-  return process.cwd()
-}
-
-function extractAppMetadata(projectRoot) {
-  const metadata = {
-    name: undefined,
-    version: undefined,
-    bundleId: undefined,
-    buildNumber: undefined,
-    displayName: undefined,
-  }
-
-  try {
-    // Method 1: Try app.json
-    const appJsonPath = path.join(projectRoot, 'app.json')
-    if (fs.existsSync(appJsonPath)) {
-      const appConfig = JSON.parse(fs.readFileSync(appJsonPath, 'utf8'))
-
-      metadata.name = appConfig.name || appConfig.displayName
-      metadata.version = appConfig.version
-      metadata.displayName = appConfig.displayName
-
-      // Extract bundle ID from platform-specific configs
-      if (appConfig.ios?.bundleIdentifier) {
-        metadata.bundleId = appConfig.ios.bundleIdentifier
-      } else if (appConfig.android?.package) {
-        metadata.bundleId = appConfig.android.package
-      }
-
-      if (appConfig.ios?.buildNumber) {
-        metadata.buildNumber = appConfig.ios.buildNumber.toString()
-      } else if (appConfig.android?.versionCode) {
-        metadata.buildNumber = appConfig.android.versionCode.toString()
-      }
-
-      console.log('✅ Extracted metadata from app.json')
-      return metadata
-    }
-
-    // Method 2: Try app.config.js
-    const appConfigJsPath = path.join(projectRoot, 'app.config.js')
-    if (fs.existsSync(appConfigJsPath)) {
-      try {
-        // Clear require cache to get fresh config
-        delete require.cache[require.resolve(appConfigJsPath)]
-        const appConfig = require(appConfigJsPath)
-
-        metadata.name = appConfig.name || appConfig.displayName
-        metadata.version = appConfig.version
-        metadata.displayName = appConfig.displayName
-
-        // Extract bundle ID from platform-specific configs
-        if (appConfig.ios?.bundleIdentifier) {
-          metadata.bundleId = appConfig.ios.bundleIdentifier
-        } else if (appConfig.android?.package) {
-          metadata.bundleId = appConfig.android.package
-        }
-
-        if (appConfig.ios?.buildNumber) {
-          metadata.buildNumber = appConfig.ios.buildNumber.toString()
-        } else if (appConfig.android?.versionCode) {
-          metadata.buildNumber = appConfig.android.versionCode.toString()
-        }
-
-        console.log('✅ Extracted metadata from app.config.js')
-        return metadata
-      } catch (error) {
-        console.warn('⚠️ Could not parse app.config.js:', error.message)
-      }
-    }
-
-    // Method 3: Fallback to package.json
-    const packageJsonPath = path.join(projectRoot, 'package.json')
-    if (fs.existsSync(packageJsonPath)) {
-      const packageConfig = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
-
-      metadata.name = packageConfig.name
-      metadata.version = packageConfig.version
-
-      console.log('✅ Extracted metadata from package.json')
-      return metadata
-    }
-
-  } catch (error) {
-    console.warn('⚠️ Error extracting app metadata:', error.message)
-  }
-
-  return metadata
-}
-
-function generateAppMetadataFile(metadata, outputPath) {
-  const content = `/**
- * Auto-generated app metadata
- * This file is generated at build time to provide app metadata without developer intervention
- */
-
-// This file is automatically generated by the build process
-// It extracts metadata from app.json, app.config.js, or package.json
-
-export interface AppMetadata {
-  name?: string
-  version?: string
-  bundleId?: string
-  buildNumber?: string
-  displayName?: string
-}
-
-// Auto-detected values from project configuration files
-export const APP_METADATA: AppMetadata = {
-  name: ${metadata.name ? `'${metadata.name}'` : 'undefined'},
-  version: ${metadata.version ? `'${metadata.version}'` : 'undefined'},
-  bundleId: ${metadata.bundleId ? `'${metadata.bundleId}'` : 'undefined'},
-  buildNumber: ${metadata.buildNumber ? `'${metadata.buildNumber}'` : 'undefined'},
-  displayName: ${metadata.displayName ? `'${metadata.displayName}'` : 'undefined'},
-}
-
-/**
- * Get auto-detected app metadata
- */
-export function getAutoDetectedAppMetadata(): AppMetadata {
-  return { ...APP_METADATA }
-}
-`
-
-  fs.writeFileSync(outputPath, content, 'utf8')
-  console.log(`✅ Generated app-metadata.ts`)
-}
-
-function main() {
-  const projectRoot = findProjectRoot()
-  console.log(`🔍 Looking for app metadata in: ${projectRoot}`)
-
-  const metadata = extractAppMetadata(projectRoot)
-
-  // Show what was detected
-  console.log('📋 Detected metadata:')
-  Object.entries(metadata).forEach(([key, value]) => {
-    if (value) {
-      console.log(`  ${key}: ${value}`)
-    }
-  })
-
-  // Generate the TypeScript file
-  const outputPath = path.join(__dirname, '../src/utils/app-metadata.ts')
-  generateAppMetadataFile(metadata, outputPath)
-}
-
-if (require.main === module) {
-  main()
-}
-
-module.exports = { extractAppMetadata, generateAppMetadataFile }

package/src/components/GestureCaptureWrapper/GestureCaptureWrapper.tsx

@@ -1,86 +0,0 @@
-import React, { ReactNode, useCallback, useMemo } from 'react'
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
-
-export interface GestureCaptureWrapperProps {
-  children: ReactNode
-  onGestureRecord: (gestureType: string, data: any) => void
-}
-
-export const GestureCaptureWrapper: React.FC<GestureCaptureWrapperProps> = ({ children, onGestureRecord }) => {
-  const recordGesture = useCallback(
-    (gestureType: string, data: any) => {
-      // Record with session recorder
-      onGestureRecord(gestureType, data)
-    },
-    [onGestureRecord]
-  )
-
-  // Create tap gesture
-  const tapGesture = useMemo(() => {
-    return Gesture.Tap()
-      .runOnJS(true)
-      .onStart((event) => {
-        recordGesture('tap', {
-          x: event.x,
-          y: event.y,
-          timestamp: Date.now()
-        })
-      })
-  }, [recordGesture])
-
-  // Create pan gesture (for swipes and drags)
-  const panGesture = useMemo(() => {
-    return Gesture.Pan()
-      .runOnJS(true)
-      .onStart((event) => {
-        recordGesture('pan_start', {
-          x: event.x,
-          y: event.y,
-          timestamp: Date.now()
-        })
-      })
-      .onUpdate((event) => {
-        recordGesture('pan_update', {
-          x: event.x,
-          y: event.y,
-          translationX: event.translationX,
-          translationY: event.translationY,
-          velocityX: event.velocityX,
-          velocityY: event.velocityY,
-          timestamp: Date.now()
-        })
-      })
-      .onEnd((event) => {
-        recordGesture('pan_end', {
-          x: event.x,
-          y: event.y,
-          translationX: event.translationX,
-          translationY: event.translationY,
-          velocityX: event.velocityX,
-          velocityY: event.velocityY,
-          timestamp: Date.now()
-        })
-      })
-  }, [recordGesture])
-
-  // Create long press gesture
-  const longPressGesture = useMemo(() => {
-    return Gesture.LongPress()
-      .runOnJS(true)
-      .minDuration(500)
-      .onStart((event) => {
-        recordGesture('long_press', {
-          x: event.x,
-          y: event.y,
-          duration: 500,
-          timestamp: Date.now()
-        })
-      })
-  }, [recordGesture])
-
-  return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <GestureDetector gesture={Gesture.Simultaneous(tapGesture, panGesture, longPressGesture)}>{children}</GestureDetector>
-    </GestureHandlerRootView>
-  )
-}

package/src/components/GestureCaptureWrapper/index.ts

@@ -1 +0,0 @@
-export * from "./GestureCaptureWrapper";

package/src/components/ScreenRecorderView/ScreenRecorderView.tsx

@@ -1,72 +0,0 @@
-import SessionRecorder from '@multiplayer-app/session-recorder-react-native'
-import React, { PropsWithChildren, useCallback } from 'react'
-import { View } from 'react-native'
-import { SessionState } from '../../types'
-import { logger } from '../../utils'
-import { GestureCaptureWrapper } from '../GestureCaptureWrapper'
-
-interface ScreenRecorderViewProps extends PropsWithChildren {}
-
-export const ScreenRecorderView = ({ children }: ScreenRecorderViewProps) => {
-  // Set up gesture recording callback
-  const handleGestureRecord = useCallback((gestureType: string, data: any) => {
-    if (SessionRecorder.sessionState !== SessionState.started) {
-      logger.debug('SessionRecorderContext', 'Gesture recording skipped', {
-        client: !!SessionRecorder.sessionState,
-        sessionState: SessionRecorder.sessionState
-      })
-      return
-    }
-    logger.debug('SessionRecorderContext', 'Gesture recorded', { gestureType, data })
-    try {
-      // Record gesture as appropriate touch events
-      switch (gestureType) {
-        case 'tap':
-          // For tap, record both touch start and end
-          logger.debug('SessionRecorderContext', 'Recording tap as touch start + end')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_start':
-          logger.debug('SessionRecorderContext', 'Recording pan_start as touch start')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_update':
-          logger.debug('SessionRecorderContext', 'Recording pan_update as touch move')
-          SessionRecorder.recordTouchMove?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_end':
-          logger.debug('SessionRecorderContext', 'Recording pan_end as touch end')
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'long_press':
-          logger.debug('SessionRecorderContext', 'Recording long_press as touch start + end')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-        default:
-      }
-    } catch (error) {
-      logger.error('SessionRecorderContext', 'Failed to record gesture event', error)
-    }
-  }, [])
-
-  // Callback ref to set the viewshot ref immediately when available
-  const setViewShotRef = (ref: View | null) => {
-    if (ref) {
-      SessionRecorder.setViewShotRef?.(ref)
-    }
-  }
-
-  return (
-    <GestureCaptureWrapper onGestureRecord={handleGestureRecord}>
-      <View ref={setViewShotRef} style={{ flex: 1 }}>
-        {children}
-      </View>
-    </GestureCaptureWrapper>
-  )
-}

package/src/components/ScreenRecorderView/index.ts

@@ -1 +0,0 @@
-export * from "./ScreenRecorderView";

package/src/components/SessionRecorderWidget/FinalPopover.tsx

@@ -1,62 +0,0 @@
-import React, { useState } from 'react'
-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
-  onStopRecording: (comment: string) => void
-  onCancelSession: () => void
-  onClose: () => void
-  isSubmitting: boolean
-}
-
-const FinalPopover: React.FC<FinalPopoverProps> = ({ textOverrides, onStopRecording, onCancelSession, isSubmitting }) => {
-  const [comment, setComment] = useState('')
-
-  const handleStopRecording = async () => {
-    try {
-      await onStopRecording(comment)
-    } catch (error) {
-      Alert.alert('Error', 'Failed to save session')
-    }
-  }
-
-  return (
-    <View style={sharedStyles.popoverContent}>
-      <ModalHeader>
-        <Pressable onPress={onCancelSession} style={sharedStyles.cancelButton}>
-          <Text style={sharedStyles.cancelButtonText}>{textOverrides.cancelButtonText}</Text>
-        </Pressable>
-      </ModalHeader>
-
-      <View style={sharedStyles.popoverBody}>
-        <Text style={sharedStyles.title}>{textOverrides.finalTitle}</Text>
-        <Text style={sharedStyles.description}>{textOverrides.finalDescription}</Text>
-
-        <TextInput
-          style={sharedStyles.commentInput}
-          placeholder={textOverrides.commentPlaceholder}
-          value={comment}
-          onChangeText={setComment}
-          multiline
-          numberOfLines={3}
-          textAlignVertical='top'
-        />
-
-        <View style={sharedStyles.popoverFooter}>
-          <Pressable
-            style={[sharedStyles.actionButton, sharedStyles.stopButton]}
-            onPress={handleStopRecording}
-            disabled={isSubmitting}
-          >
-            <Text style={sharedStyles.actionButtonText}>{isSubmitting ? 'Saving...' : textOverrides.saveButtonText}</Text>
-          </Pressable>
-        </View>
-      </View>
-    </View>
-  )
-}
-
-export default FinalPopover