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

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

@@ -1,202 +0,0 @@
-package com.multiplayer.sessionrecorder
-
-import android.app.Activity
-import android.graphics.*
-import android.util.Base64
-import android.view.View
-import android.widget.EditText
-import android.widget.TextView
-import com.facebook.react.bridge.*
-import java.io.ByteArrayOutputStream
-
-class SessionRecorderModule(reactContext: ReactApplicationContext) :
-    ReactContextBaseJavaModule(reactContext) {
-
-    override fun getName() = "SessionRecorderNative"
-
-    @ReactMethod
-    fun captureAndMask(promise: Promise) {
-        val activity = currentActivity ?: return promise.reject("NO_ACTIVITY", "No activity found")
-
-        try {
-            val maskedImage = captureAndMaskScreen(activity, null)
-            promise.resolve(maskedImage)
-        } catch (e: Exception) {
-            promise.reject("CAPTURE_FAILED", "Failed to capture and mask screen", e)
-        }
-    }
-
-    @ReactMethod
-    fun captureAndMaskWithOptions(options: ReadableMap, promise: Promise) {
-        val activity = currentActivity ?: return promise.reject("NO_ACTIVITY", "No activity found")
-
-        try {
-            val maskedImage = captureAndMaskScreen(activity, options)
-            promise.resolve(maskedImage)
-        } catch (e: Exception) {
-            promise.reject("CAPTURE_FAILED", "Failed to capture and mask screen", e)
-        }
-    }
-
-    private fun captureAndMaskScreen(activity: Activity, options: ReadableMap?): String {
-        val rootView = activity.window.decorView.rootView
-
-        // Enable drawing cache
-        rootView.isDrawingCacheEnabled = true
-        rootView.buildDrawingCache()
-
-        val bitmap = Bitmap.createBitmap(rootView.drawingCache)
-        rootView.isDrawingCacheEnabled = false
-
-        // Apply masking
-        val maskedBitmap = applyMasking(bitmap, rootView, options)
-
-        // Convert to base64
-        val output = ByteArrayOutputStream()
-        maskedBitmap.compress(Bitmap.CompressFormat.JPEG, 70, output)
-        val base64 = Base64.encodeToString(output.toByteArray(), Base64.DEFAULT)
-
-        return base64
-    }
-
-    private fun applyMasking(bitmap: Bitmap, rootView: View, options: ReadableMap?): Bitmap {
-        val maskedBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true)
-        val canvas = Canvas(maskedBitmap)
-
-        // Find sensitive elements
-        val sensitiveElements = findSensitiveElements(rootView)
-
-        for (element in sensitiveElements) {
-            val location = IntArray(2)
-            element.getLocationOnScreen(location)
-
-            val frame = Rect(
-                location[0],
-                location[1],
-                location[0] + element.width,
-                location[1] + element.height
-            )
-
-            val maskingType = getMaskingType(element)
-
-            when (maskingType) {
-                MaskingType.BLUR -> applyBlurMask(canvas, frame)
-                MaskingType.RECTANGLE -> applyRectangleMask(canvas, frame)
-                MaskingType.PIXELATE -> applyPixelateMask(canvas, frame)
-                MaskingType.NONE -> { /* No masking */ }
-            }
-        }
-
-        return maskedBitmap
-    }
-
-    private fun findSensitiveElements(view: View): List<View> {
-        val sensitiveElements = mutableListOf<View>()
-
-        fun traverseView(currentView: View) {
-            if (shouldMaskView(currentView)) {
-                sensitiveElements.add(currentView)
-            }
-
-            if (currentView is ViewGroup) {
-                for (i in 0 until currentView.childCount) {
-                    traverseView(currentView.getChildAt(i))
-                }
-            }
-        }
-
-        traverseView(view)
-        return sensitiveElements
-    }
-
-    private fun shouldMaskView(view: View): Boolean {
-        // Check for EditText - mask all text fields when inputMasking is enabled
-        if (view is EditText) {
-            return true
-        }
-
-        // Check for TextView - mask all text views when inputMasking is enabled
-        if (view is TextView) {
-            return true
-        }
-
-        return false
-    }
-
-    private fun getMaskingType(view: View): MaskingType {
-        // Default masking type for all text inputs
-        return MaskingType.RECTANGLE
-    }
-
-    private fun applyBlurMask(canvas: Canvas, frame: Rect) {
-        val paint = Paint().apply {
-            color = Color.BLACK
-            alpha = 200 // Semi-transparent
-        }
-
-        canvas.drawRect(frame, paint)
-
-        // Add some noise to make it look blurred
-        paint.color = Color.WHITE
-        paint.alpha = 80
-
-        for (i in 0..20) {
-            val randomX = frame.left + (Math.random() * frame.width()).toFloat()
-            val randomY = frame.top + (Math.random() * frame.height()).toFloat()
-            val randomSize = (Math.random() * 6 + 2).toFloat()
-            canvas.drawCircle(randomX, randomY, randomSize, paint)
-        }
-    }
-
-    private fun applyRectangleMask(canvas: Canvas, frame: Rect) {
-        val paint = Paint().apply {
-            color = Color.GRAY
-        }
-
-        canvas.drawRect(frame, paint)
-
-        // Add some text-like pattern
-        paint.color = Color.DKGRAY
-        val lineHeight = 4f
-        val spacing = 8f
-
-        var y = frame.top + spacing
-        while (y < frame.bottom - spacing) {
-            val lineWidth = (Math.random() * frame.width() * 0.5 + frame.width() * 0.3).toFloat()
-            val x = frame.left + (Math.random() * (frame.width() - lineWidth)).toFloat()
-            canvas.drawRect(x, y, x + lineWidth, y + lineHeight, paint)
-            y += lineHeight + spacing
-        }
-    }
-
-    private fun applyPixelateMask(canvas: Canvas, frame: Rect) {
-        val pixelSize = 8f
-        val pixelCountX = (frame.width() / pixelSize).toInt()
-        val pixelCountY = (frame.height() / pixelSize).toInt()
-
-        val paint = Paint()
-
-        for (x in 0 until pixelCountX) {
-            for (y in 0 until pixelCountY) {
-                val pixelFrame = RectF(
-                    frame.left + x * pixelSize,
-                    frame.top + y * pixelSize,
-                    frame.left + (x + 1) * pixelSize,
-                    frame.top + (y + 1) * pixelSize
-                )
-
-                // Use a random color for each pixel
-                paint.color = Color.rgb(
-                    (Math.random() * 255).toInt(),
-                    (Math.random() * 255).toInt(),
-                    (Math.random() * 255).toInt()
-                )
-                canvas.drawRect(pixelFrame, paint)
-            }
-        }
-    }
-
-    private enum class MaskingType {
-        BLUR, RECTANGLE, PIXELATE, NONE
-    }
-}

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