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

package/android/src/main/java/com/multiplayer/sessionrecorder/SessionRecorderPackage.kt

@@ -1,16 +0,0 @@
-package com.multiplayer.sessionrecorder
-
-import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.NativeModule
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ViewManager
-
-class SessionRecorderPackage : ReactPackage {
-    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-        return listOf(SessionRecorderModule(reactContext))
-    }
-
-    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return emptyList()
-    }
-}

package/babel.config.js

@@ -1,13 +0,0 @@
-module.exports = {
-  presets: [
-    '@react-native/babel-preset',
-    '@babel/preset-env',
-    '@babel/preset-typescript',
-    ['@babel/preset-react', { runtime: 'automatic' }],
-  ],
-  plugins: [
-    ['@babel/plugin-transform-private-property-in-object', { loose: true }],
-    ['@babel/plugin-transform-private-methods', { loose: true }],
-    ['@babel/plugin-transform-class-properties', { loose: true }],
-  ],
-}

package/docs/AUTO_METADATA_DETECTION.md

@@ -1,108 +0,0 @@
-# Automatic App Metadata Detection
-
-The session recorder automatically detects app metadata from your project configuration files **without requiring any developer intervention**.
-
-## How It Works
-
-The library automatically extracts app information from common configuration files in this priority order:
-
-1. **`app.json`** - Expo/React Native app configuration
-2. **`app.config.js`** - Dynamic Expo configuration
-3. **`package.json`** - Node.js package configuration (fallback)
-
-## Supported Configuration Files
-
-### app.json
-
-```json
-{
-  "name": "My Awesome App",
-  "version": "1.2.3",
-  "displayName": "My App",
-  "ios": {
-    "bundleIdentifier": "com.mycompany.myapp",
-    "buildNumber": "123"
-  },
-  "android": {
-    "package": "com.mycompany.myapp",
-    "versionCode": 123
-  }
-}
-```
-
-### app.config.js
-
-```javascript
-export default {
-  name: 'My Awesome App',
-  version: '1.2.3',
-  displayName: 'My App',
-  ios: {
-    bundleIdentifier: 'com.mycompany.myapp',
-    buildNumber: '123'
-  },
-  android: {
-    package: 'com.mycompany.myapp',
-    versionCode: 123
-  }
-}
-```
-
-### package.json (fallback)
-
-```json
-{
-  "name": "my-awesome-app",
-  "version": "1.2.3"
-}
-```
-
-## Detected Metadata
-
-The following information is automatically extracted:
-
-- **App Name** - From `name` or `displayName`
-- **App Version** - From `version`
-- **Bundle ID** - From `ios.bundleIdentifier` or `android.package`
-- **Build Number** - From `ios.buildNumber` or `android.versionCode`
-
-## Build Process
-
-The metadata detection happens automatically during the build process:
-
-1. The build script scans your project root for configuration files
-2. Extracts relevant metadata from the first found configuration
-3. Generates a TypeScript file with the detected metadata
-4. The session recorder uses this metadata in all recordings
-
-## No Developer Action Required
-
-✅ **Zero configuration** - Works out of the box
-✅ **Automatic detection** - Scans common config files
-✅ **Build-time generation** - No runtime file reading
-✅ **Fallback support** - Graceful degradation
-
-## Manual Override (Optional)
-
-If you need to override the auto-detected metadata, you can still use the manual configuration:
-
-```typescript
-import { configureAppMetadata } from '@multiplayer-app/session-recorder-react-native'
-
-configureAppMetadata({
-  name: 'Custom App Name',
-  version: '2.0.0',
-  bundleId: 'com.custom.app'
-})
-```
-
-## Priority Order
-
-The metadata detection follows this priority:
-
-1. **Expo Config** (if using Expo)
-2. **Manual Configuration** (if `configureAppMetadata` was called)
-3. **Auto-detected Metadata** (from config files)
-4. **Fallback Values** (defaults)
-
-This ensures maximum compatibility across different React Native setups while providing rich metadata for debugging sessions.

package/docs/TROUBLESHOOTING.md

@@ -1,168 +0,0 @@
-# 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

@@ -1,12 +0,0 @@
-#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

@@ -1,21 +0,0 @@
-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

@@ -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