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

package/docs/TROUBLESHOOTING.md

@@ -0,0 +1,168 @@
+# Troubleshooting Native Module Issues
+
+If you're seeing the warning "Screen masking native module is not available - auto-linking may still be in progress", follow these steps:
+
+## Quick Fix
+
+1. **Clean and Rebuild**:
+
+   ```bash
+   # Clean React Native cache
+   npx react-native start --reset-cache
+
+   # For iOS
+   cd ios && pod install && cd ..
+   npx react-native run-ios
+
+   # For Android
+   npx react-native run-android
+   ```
+
+2. **Check Auto-Linking**:
+   ```bash
+   # Check if auto-linking detected the module
+   npx react-native config
+   ```
+
+## Detailed Troubleshooting
+
+### 1. Verify Package Installation
+
+Make sure the package is properly installed:
+
+```bash
+npm list @multiplayer-app/session-recorder-react-native
+```
+
+### 2. Check Native Module Registration
+
+The native module should be named `SessionRecorderNative`. You can verify this by checking the logs for:
+
+```
+Available native modules: [..., SessionRecorderNative, ...]
+```
+
+### 3. iOS Specific Issues
+
+**Check Podfile**:
+
+```ruby
+# In your ios/Podfile, you should see:
+pod 'SessionRecorderNative', :path => '../node_modules/@multiplayer-app/session-recorder-react-native/ios'
+```
+
+**Clean iOS Build**:
+
+```bash
+cd ios
+rm -rf build
+rm -rf Pods
+rm Podfile.lock
+pod install
+cd ..
+npx react-native run-ios
+```
+
+### 4. Android Specific Issues
+
+**Check MainApplication.java**:
+
+```java
+// Should be automatically added by auto-linking:
+import com.multiplayer.sessionrecorder.SessionRecorderPackage;
+
+// In getPackages():
+new SessionRecorderPackage()
+```
+
+**Clean Android Build**:
+
+```bash
+cd android
+./gradlew clean
+cd ..
+npx react-native run-android
+```
+
+### 5. Manual Linking (If Auto-Linking Fails)
+
+If auto-linking doesn't work, you can manually link:
+
+**iOS**:
+
+1. Add to `ios/Podfile`:
+   ```ruby
+   pod 'SessionRecorderNative', :path => '../node_modules/@multiplayer-app/session-recorder-react-native/ios'
+   ```
+2. Run `pod install`
+
+**Android**:
+
+1. Add to `android/settings.gradle`:
+   ```gradle
+   include ':react-native-session-recorder'
+   project(':react-native-session-recorder').projectDir = new File(rootProject.projectDir, '../node_modules/@multiplayer-app/session-recorder-react-native/android')
+   ```
+2. Add to `android/app/build.gradle`:
+   ```gradle
+   dependencies {
+     implementation project(':react-native-session-recorder')
+   }
+   ```
+3. Add to `MainApplication.java`:
+
+   ```java
+   import com.multiplayer.sessionrecorder.SessionRecorderPackage;
+
+   @Override
+   protected List<ReactPackage> getPackages() {
+     return Arrays.<ReactPackage>asList(
+       new MainReactPackage(),
+       new SessionRecorderPackage()
+     );
+   }
+   ```
+
+### 6. Debug Native Module Availability
+
+Add this to your app to debug:
+
+```typescript
+import { testNativeModuleAvailability } from '@multiplayer-app/session-recorder-react-native/utils'
+
+// Call this in your app
+testNativeModuleAvailability()
+```
+
+This will log detailed information about native module availability.
+
+### 7. Common Issues
+
+**Issue**: "Module not found" error
+**Solution**: Ensure the package is installed and auto-linking is working
+
+**Issue**: "Method not available" error
+**Solution**: The native module is linked but methods aren't exposed. Check the native code.
+
+**Issue**: Auto-linking not working
+**Solution**: Check `react-native.config.js` and ensure React Native version is 0.60+
+
+**Issue**: Pod install fails
+**Solution**: Update CocoaPods: `sudo gem install cocoapods`
+
+### 8. Verification
+
+Once fixed, you should see:
+
+```
+✅ SessionRecorderNative module is available!
+✅ captureAndMask method is available!
+✅ captureAndMaskWithOptions method is available!
+```
+
+## Still Having Issues?
+
+1. Check the [React Native Auto-Linking documentation](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md)
+2. Verify your React Native version (0.60+ required)
+3. Check for conflicting native modules
+4. Try creating a fresh React Native project and testing the module there

package/ios/ScreenMasking.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/ScreenMasking.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/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(SessionRecorderNative, 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         = "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/ios/SessionRecorder.swift

@@ -0,0 +1,205 @@
+import UIKit
+import React
+
+@objc(SessionRecorderNative)
+class SessionRecorderNative: 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/SessionRecorderNative.podspec

@@ -0,0 +1,21 @@
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react-native",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.6",
   "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/SessionRecorderNative.podspec"
+    },
+    "android": {
+      "sourceDir": "./android",
+      "packageImportPath": "import com.multiplayer.sessionrecorder.SessionRecorderPackage;"
+    }
   }
 }