@multiplayer-app/session-recorder-react-native 0.0.1-alpha.1 → 0.0.1-alpha.10

package/src/recorder/screenRecorder.ts

@@ -1,19 +1,39 @@
-import { ScreenEvent, RecorderConfig } from '../types'
+import { ScreenEvent, RecorderConfig, EventRecorder } from '../types'
+import { eventWithTime } from '@rrweb/types'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
-
-export class ScreenRecorder {
+import { Dimensions } from 'react-native'
+import { captureRef } from 'react-native-view-shot'
+import {
+  createRecordingMetaEvent,
+  createFullSnapshotEvent,
+  createIncrementalSnapshotWithImageUpdate as createIncrementalSnapshotUtil,
+  generateScreenHash,
+  logger,
+} from '../utils'
+
+export class ScreenRecorder implements EventRecorder {
   private config?: RecorderConfig
   private isRecording = false
   private events: ScreenEvent[] = []
   private captureInterval?: NodeJS.Timeout
   private captureCount: number = 0
   private maxCaptures: number = 100 // Limit captures to prevent memory issues
-  private captureQuality: number = 0.8
-  private captureFormat: 'png' | 'jpg' | 'webp' = 'png'
+  private captureQuality: number = 0.3
+  private captureFormat: 'png' | 'jpg' = 'jpg'
   private screenDimensions: { width: number; height: number } | null = null
-
-  init(config: RecorderConfig): void {
+  private currentScreen: string | null = null
+  private eventRecorder?: EventRecorder
+  private nodeIdCounter: number = 1
+  private viewShotRef: any = null
+  private lastScreenCapture: string | null = null
+  private lastScreenHash: string | null = null
+  private enableChangeDetection: boolean = true
+  private hashSampleSize: number = 100
+  private currentImageNodeId: number | null = null
+
+  init(config: RecorderConfig, eventRecorder?: EventRecorder): void {
     this.config = config
+    this.eventRecorder = eventRecorder
     this._getScreenDimensions()
   }
 
@@ -21,14 +41,26 @@ export class ScreenRecorder {
     this.isRecording = true
     this.events = []
     this.captureCount = 0
+    this.lastScreenCapture = null
+    this.lastScreenHash = null
+    this.currentImageNodeId = null // Reset image node ID for new session
+    logger.info('ScreenRecorder', 'Screen recording started')
+    // Emit screen recording started meta event
+
+    this.recordEvent(createRecordingMetaEvent())
+
     this._startPeriodicCapture()
-    console.log('Screen recording started')
+
+    // Capture initial screen immediately
+    this._captureScreen()
+
+    // Screen recording started
   }
 
   stop(): void {
     this.isRecording = false
     this._stopPeriodicCapture()
-    console.log('Screen recording stopped')
+    // Screen recording stopped
   }
 
   pause(): void {
@@ -38,15 +70,14 @@ export class ScreenRecorder {
 
   resume(): void {
     this.isRecording = true
-    this._startPeriodicCapture()
+    // this._startPeriodicCapture()
   }
 
   private _getScreenDimensions(): void {
     try {
-      const { Dimensions } = require('react-native')
       this.screenDimensions = Dimensions.get('window')
     } catch (error) {
-      console.warn('Failed to get screen dimensions:', error)
+      // Failed to get screen dimensions - silently continue
       this.screenDimensions = { width: 375, height: 667 } // Default fallback
     }
   }
@@ -56,7 +87,7 @@ export class ScreenRecorder {
       clearInterval(this.captureInterval)
     }
 
-    // Capture screen every 5 seconds
+    // Capture screen every 5 seconds (reduced frequency)
     this.captureInterval = setInterval(() => {
       this._captureScreen()
     }, 5000)
@@ -73,145 +104,166 @@ export class ScreenRecorder {
     if (!this.isRecording || this.captureCount >= this.maxCaptures) return
 
     try {
-      const startTime = Date.now()
-      const screenData = await this._performScreenCapture()
-      const captureTime = Date.now() - startTime
-
-      if (screenData) {
-        const screenEvent: ScreenEvent = {
-          type: 'screenCapture',
-          timestamp: Date.now(),
-          dataUrl: screenData,
-          metadata: {
-            captureTime,
-            captureCount: this.captureCount + 1,
-            quality: this.captureQuality,
-            format: this.captureFormat,
-            screenWidth: this.screenDimensions?.width,
-            screenHeight: this.screenDimensions?.height,
-          },
+      const base64Image = await this._captureScreenBase64()
+
+      if (base64Image) {
+        // Check if screen has changed by comparing with previous capture
+        const hasChanged = this.enableChangeDetection ? this._hasScreenChanged(base64Image) : true
+
+        if (hasChanged) {
+          // Use incremental snapshot if we have an existing image node, otherwise create full snapshot
+          if (this.currentImageNodeId !== null && this.lastScreenCapture) {
+            const success = this.updateScreenWithIncrementalSnapshot(base64Image)
+            if (!success) {
+              // Fallback to full snapshot if incremental update fails
+              this._createAndEmitFullSnapshotEvent(base64Image)
+            }
+          } else {
+            // First capture or no existing image node - create full snapshot
+            this._createAndEmitFullSnapshotEvent(base64Image)
+          }
+
+          this.lastScreenCapture = base64Image
+          this.lastScreenHash = this._generateScreenHash(base64Image)
+          this.captureCount++
         }
-
-        this.events.push(screenEvent)
-        this.captureCount++
-        this._sendEvent(screenEvent)
-        this._recordOpenTelemetrySpan(screenEvent)
       }
     } catch (error) {
-      console.error('Failed to capture screen:', error)
-      this._recordScreenCaptureError(error instanceof Error ? error : new Error(String(error)))
+      this._recordScreenCaptureError(error as Error)
     }
   }
 
-
-
-  private async _performScreenCapture(): Promise<string | null> {
+  private async _captureScreenBase64(): Promise<string | null> {
     try {
-      // Try react-native-view-shot first
-      const ViewShot = require('react-native-view-shot')
-      if (ViewShot && ViewShot.captureRef) {
-        return await this._captureWithViewShot()
+      if (!this.viewShotRef) {
+        logger.warn('ScreenRecorder', 'ViewShot ref not available for screen capture')
+        return null
       }
-    } catch (error) {
-      console.warn('react-native-view-shot not available:', error)
-    }
 
-    try {
-      // Try react-native-screenshot
-      // const Screenshot = require('react-native-screenshot')
-      // if (Screenshot && Screenshot.takeScreenshot) {
-      //   return await this._captureWithScreenshot()
-      // }
+      // Capture the screen using react-native-view-shot
+      const result = await captureRef(this.viewShotRef, {
+        format: this.captureFormat,
+        quality: this.captureQuality,
+        result: 'base64',
+      })
+
+      return result
     } catch (error) {
-      console.warn('react-native-screenshot not available:', error)
+      logger.error('ScreenRecorder', 'Failed to capture screen. Make sure react-native-view-shot is properly installed and linked:', error)
+      return null
     }
+  }
+
+  private _createAndEmitFullSnapshotEvent(base64Image: string): void {
+    if (!this.screenDimensions) return
 
-    // Fallback to placeholder
-    return this._createPlaceholderImage()
+    // Use the new createFullSnapshot method
+    const fullSnapshotEvent = this.createFullSnapshot(base64Image)
+    this.recordEvent(fullSnapshotEvent)
   }
 
-  private async _captureWithViewShot(): Promise<string | null> {
-    try {
-      const ViewShot = require('react-native-view-shot')
+  /**
+   * Create a full snapshot event with the given base64 image
+   * @param base64Image - Base64 encoded image data
+   * @returns Full snapshot event
+   */
+  createFullSnapshot(base64Image: string): eventWithTime {
+    if (!this.screenDimensions) {
+      throw new Error('Screen dimensions not available')
+    }
 
-      // Get the root view reference
-      const { findNodeHandle } = require('react-native')
-      const rootViewRef = this._getRootViewRef()
+    const { width, height } = this.screenDimensions
+    this.nodeIdCounter = 1
 
-      if (rootViewRef) {
-        const options = {
-          format: this.captureFormat,
-          quality: this.captureQuality,
-          result: 'data-uri',
-        }
+    // Use utility function to create full snapshot event
+    const fullSnapshotEvent = createFullSnapshotEvent(
+      base64Image,
+      width,
+      height,
+      this.captureFormat,
+      { current: this.nodeIdCounter },
+    )
 
-        return await ViewShot.captureRef(rootViewRef, options)
-      }
-    } catch (error) {
-      console.warn('Failed to capture with ViewShot:', error)
-    }
-    return null
+    // Store the image node ID for future incremental updates
+    // The image node ID is the first node created (after the document)
+    this.currentImageNodeId = 0 // First element node is the image
+
+    return fullSnapshotEvent
   }
 
-  private async _captureWithScreenshot(): Promise<string | null> {
-    try {
-      // const Screenshot = require('react-native-screenshot')
+  /**
+   * Create an incremental snapshot event with mutation data to update image src
+   * @param base64Image - New base64 encoded image data
+   * @param imageNodeId - ID of the image node to update
+   * @returns Incremental snapshot event with mutation data
+   */
+  createIncrementalSnapshotWithImageUpdate(base64Image: string): eventWithTime {
+    return createIncrementalSnapshotUtil(
+      base64Image,
+      this.captureFormat,
+    )
+  }
 
-      const options = {
-        format: this.captureFormat,
-        quality: this.captureQuality,
-      }
 
-      // return await Screenshot.takeScreenshot(options)
-    } catch (error) {
-      console.warn('Failed to capture with Screenshot:', error)
+  /**
+   * Update the screen with a new image using incremental snapshot
+   * @param base64Image - New base64 encoded image data
+   * @returns true if update was successful, false otherwise
+   */
+  updateScreenWithIncrementalSnapshot(base64Image: string): boolean {
+    if (this.currentImageNodeId === null) {
+      logger.warn('ScreenRecorder', 'No image node ID available for incremental update')
+      return false
     }
-    return null
+
+    const incrementalEvent = this.createIncrementalSnapshotWithImageUpdate(base64Image)
+    this.recordEvent(incrementalEvent)
+    return true
   }
 
-  private _getRootViewRef(): any {
-    try {
-      // Try to get the root view reference
-      const { AppRegistry } = require('react-native')
-      const appName = AppRegistry.getAppKeys()[0]
-      return appName ? { current: null } : null
-    } catch (error) {
-      console.warn('Failed to get root view ref:', error)
-      return null
-    }
+  /**
+   * Force a full snapshot (useful when screen dimensions change or for debugging)
+   * @param base64Image - Base64 encoded image data
+   */
+  forceFullSnapshot(base64Image: string): void {
+    this._createAndEmitFullSnapshotEvent(base64Image)
+    this.lastScreenCapture = base64Image
+    this.lastScreenHash = this._generateScreenHash(base64Image)
+    this.captureCount++
   }
 
-  private _createPlaceholderImage(): string {
-    // Create a simple placeholder image data URL
-    // Note: This won't work in React Native environment, but provides a fallback
-    const width = this.screenDimensions?.width || 375
-    const height = this.screenDimensions?.height || 667
+  /**
+   * Check if the screen has changed by comparing with the previous capture
+   * @param currentBase64 - Current screen capture as base64
+   * @returns true if screen has changed, false otherwise
+   */
+  private _hasScreenChanged(currentBase64: string): boolean {
+    // If this is the first capture, consider it changed
+    if (!this.lastScreenCapture) {
+      return true
+    }
 
-    // Return a simple data URL for placeholder
-    const svgContent = `
-      <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
-        <rect width="100%" height="100%" fill="#f0f0f0"/>
-        <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666" font-family="Arial" font-size="16">
-          Screen Capture Placeholder
-        </text>
-        <text x="50%" y="60%" text-anchor="middle" dy=".3em" fill="#666" font-family="Arial" font-size="14">
-          Captured at ${new Date().toLocaleTimeString()}
-        </text>
-      </svg>
-    `
+    // Generate hash for current capture
+    const currentHash = this._generateScreenHash(currentBase64)
 
-    // Use a simple base64 encoding alternative for React Native
-    const base64Content = Buffer.from(svgContent, 'utf8').toString('base64')
-    return `data:image/svg+xml;base64,${base64Content}`
+    // Compare with previous hash
+    return currentHash !== this.lastScreenHash
+  }
+
+  /**
+   * Generate a simple hash for screen comparison
+   * This is a lightweight hash that focuses on the beginning and end of the base64 string
+   * to detect changes without doing a full comparison
+   * @param base64Image - Base64 encoded image
+   * @returns Hash string for comparison
+   */
+  private _generateScreenHash(base64Image: string): string {
+    return generateScreenHash(base64Image, this.hashSampleSize)
   }
 
   private _sendEvent(event: ScreenEvent): void {
-    console.log('Screen event recorded:', {
-      type: event.type,
-      timestamp: event.timestamp,
-      captureCount: event.metadata?.captureCount,
-      captureTime: event.metadata?.captureTime,
-    })
+    // Screen event recorded
+    // Send event to backend or store locally
   }
 
   private _recordOpenTelemetrySpan(event: ScreenEvent): void {
@@ -233,7 +285,7 @@ export class ScreenRecorder {
       span.setStatus({ code: SpanStatusCode.OK })
       span.end()
     } catch (error) {
-      console.warn('Failed to record OpenTelemetry span for screen:', error)
+      // Failed to record OpenTelemetry span for screen - silently continue
     }
   }
 
@@ -252,36 +304,21 @@ export class ScreenRecorder {
       span.recordException(error)
       span.end()
     } catch (spanError) {
-      console.warn('Failed to record error span:', spanError)
-    }
-  }
-
-  // Manual screen capture methods
-  async captureScreenNow(): Promise<string | null> {
-    if (!this.isRecording) {
-      console.warn('Screen recording not active')
-      return null
+      // Failed to record error span - silently continue
     }
-
-    return await this._performScreenCapture()
   }
 
-  async captureSpecificElement(elementRef: any, options?: {
-    format?: 'png' | 'jpg' | 'webp'
-    quality?: number
-  }): Promise<string | null> {
+  async captureSpecificElement(
+    elementRef: any,
+    options?: {
+      format?: 'png' | 'jpg' | 'webp'
+      quality?: number
+    },
+  ): Promise<string | null> {
     try {
-      const ViewShot = require('react-native-view-shot')
-
-      const captureOptions = {
-        format: options?.format || this.captureFormat,
-        quality: options?.quality || this.captureQuality,
-        result: 'data-uri',
-      }
-
-      return await ViewShot.captureRef(elementRef, captureOptions)
+      return await captureRef(elementRef)
     } catch (error) {
-      console.error('Failed to capture specific element:', error)
+      // Failed to capture specific element - silently continue
       return null
     }
   }
@@ -303,7 +340,7 @@ export class ScreenRecorder {
     this.captureQuality = Math.max(0.1, Math.min(1.0, quality))
   }
 
-  setCaptureFormat(format: 'png' | 'jpg' | 'webp'): void {
+  setCaptureFormat(format: 'png' | 'jpg'): void {
     this.captureFormat = format
   }
 
@@ -311,9 +348,26 @@ export class ScreenRecorder {
     this.maxCaptures = Math.max(1, max)
   }
 
+  /**
+   * Enable or disable change detection
+   * @param enabled - Whether to enable change detection
+   */
+  setChangeDetection(enabled: boolean): void {
+    this.enableChangeDetection = enabled
+  }
+
+  /**
+   * Set the hash sample size for change detection
+   * @param size - Number of characters to sample from each part of the image
+   */
+  setHashSampleSize(size: number): void {
+    this.hashSampleSize = Math.max(10, Math.min(1000, size))
+  }
+
   // Performance monitoring
   recordScreenPerformance(screenName: string, loadTime: number): void {
     const event: ScreenEvent = {
+      screenName,
       type: 'screenCapture',
       timestamp: Date.now(),
       metadata: {
@@ -324,7 +378,9 @@ export class ScreenRecorder {
       },
     }
 
-    this.events.push(event); this._sendEvent(event); this._recordOpenTelemetrySpan(event)
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordOpenTelemetrySpan(event)
     this.events.push(event)
     this._sendEvent(event)
     this._recordOpenTelemetrySpan(event)
@@ -333,6 +389,7 @@ export class ScreenRecorder {
   // Error tracking
   recordScreenError(error: Error, screenName?: string): void {
     const event: ScreenEvent = {
+      screenName: screenName || 'unknown',
       type: 'screenCapture',
       timestamp: Date.now(),
       metadata: {
@@ -344,7 +401,9 @@ export class ScreenRecorder {
       },
     }
 
-    this.events.push(event); this._sendEvent(event); this._recordOpenTelemetrySpan(event)
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordOpenTelemetrySpan(event)
     this.events.push(event)
     this._sendEvent(event)
     this._recordScreenCaptureError(error)
@@ -371,15 +430,13 @@ export class ScreenRecorder {
     }
 
     if (this.events.length > 0) {
-      const captureTimes = this.events
-        .map(event => event.metadata?.captureTime || 0)
-        .filter(time => time > 0)
+      const captureTimes = this.events.map((event) => event.metadata?.captureTime || 0).filter((time) => time > 0)
 
       if (captureTimes.length > 0) {
         stats.averageCaptureTime = captureTimes.reduce((a, b) => a + b, 0) / captureTimes.length
       }
 
-      const successfulCaptures = this.events.filter(event => event.dataUrl).length
+      const successfulCaptures = this.events.filter((event) => event.dataUrl).length
       stats.successRate = (successfulCaptures / this.events.length) * 100
     }
 
@@ -406,6 +463,36 @@ export class ScreenRecorder {
   shutdown(): void {
     this.stop()
     this.clearEvents()
-    console.log('Screen recorder shutdown')
+    // Screen recorder shutdown
+  }
+
+  /**
+   * Set the viewshot ref for screen capture
+   * @param ref - React Native View ref for screen capture
+   */
+  setViewShotRef(ref: any): void {
+    this.viewShotRef = ref
+  }
+
+  /**
+   * Force capture screen (useful after touch interactions)
+   * This bypasses the change detection and always captures
+   */
+  forceCapture(): void {
+    if (!this.isRecording) {
+      return
+    }
+
+    this._captureScreen()
+  }
+
+  /**
+   * Record an rrweb event
+   * @param event - The rrweb event to record
+   */
+  recordEvent(event: any): void {
+    if (this.eventRecorder) {
+      this.eventRecorder.recordEvent(event)
+    }
   }
 }