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

package/src/recorder/screenRecorder.ts

@@ -0,0 +1,411 @@
+import { ScreenEvent, RecorderConfig } from '../types'
+import { trace, SpanStatusCode } from '@opentelemetry/api'
+
+export class ScreenRecorder {
+  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 screenDimensions: { width: number; height: number } | null = null
+
+  init(config: RecorderConfig): void {
+    this.config = config
+    this._getScreenDimensions()
+  }
+
+  start(): void {
+    this.isRecording = true
+    this.events = []
+    this.captureCount = 0
+    this._startPeriodicCapture()
+    console.log('Screen recording started')
+  }
+
+  stop(): void {
+    this.isRecording = false
+    this._stopPeriodicCapture()
+    console.log('Screen recording stopped')
+  }
+
+  pause(): void {
+    this.isRecording = false
+    this._stopPeriodicCapture()
+  }
+
+  resume(): void {
+    this.isRecording = true
+    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)
+      this.screenDimensions = { width: 375, height: 667 } // Default fallback
+    }
+  }
+
+  private _startPeriodicCapture(): void {
+    if (this.captureInterval) {
+      clearInterval(this.captureInterval)
+    }
+
+    // Capture screen every 5 seconds
+    this.captureInterval = setInterval(() => {
+      this._captureScreen()
+    }, 5000)
+  }
+
+  private _stopPeriodicCapture(): void {
+    if (this.captureInterval) {
+      clearInterval(this.captureInterval)
+      this.captureInterval = undefined
+    }
+  }
+
+  private async _captureScreen(): Promise<void> {
+    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,
+          },
+        }
+
+        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)))
+    }
+  }
+
+
+
+  private async _performScreenCapture(): 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()
+      }
+    } 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()
+      // }
+    } catch (error) {
+      console.warn('react-native-screenshot not available:', error)
+    }
+
+    // Fallback to placeholder
+    return this._createPlaceholderImage()
+  }
+
+  private async _captureWithViewShot(): Promise<string | null> {
+    try {
+      const ViewShot = require('react-native-view-shot')
+
+      // Get the root view reference
+      const { findNodeHandle } = require('react-native')
+      const rootViewRef = this._getRootViewRef()
+
+      if (rootViewRef) {
+        const options = {
+          format: this.captureFormat,
+          quality: this.captureQuality,
+          result: 'data-uri',
+        }
+
+        return await ViewShot.captureRef(rootViewRef, options)
+      }
+    } catch (error) {
+      console.warn('Failed to capture with ViewShot:', error)
+    }
+    return null
+  }
+
+  private async _captureWithScreenshot(): Promise<string | null> {
+    try {
+      // const Screenshot = require('react-native-screenshot')
+
+      const options = {
+        format: this.captureFormat,
+        quality: this.captureQuality,
+      }
+
+      // return await Screenshot.takeScreenshot(options)
+    } catch (error) {
+      console.warn('Failed to capture with Screenshot:', error)
+    }
+    return null
+  }
+
+  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
+    }
+  }
+
+  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
+
+    // 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>
+    `
+
+    // Use a simple base64 encoding alternative for React Native
+    const base64Content = Buffer.from(svgContent, 'utf8').toString('base64')
+    return `data:image/svg+xml;base64,${base64Content}`
+  }
+
+  private _sendEvent(event: ScreenEvent): void {
+    console.log('Screen event recorded:', {
+      type: event.type,
+      timestamp: event.timestamp,
+      captureCount: event.metadata?.captureCount,
+      captureTime: event.metadata?.captureTime,
+    })
+  }
+
+  private _recordOpenTelemetrySpan(event: ScreenEvent): void {
+    try {
+      const span = trace.getTracer('screen').startSpan(`Screen.${event.type}`, {
+        attributes: {
+          'screen.type': event.type,
+          'screen.timestamp': event.timestamp,
+          'screen.platform': 'react-native',
+        },
+      })
+
+      if (event.metadata) {
+        Object.entries(event.metadata).forEach(([key, value]) => {
+          span.setAttribute(`screen.metadata.${key}`, String(value))
+        })
+      }
+
+      span.setStatus({ code: SpanStatusCode.OK })
+      span.end()
+    } catch (error) {
+      console.warn('Failed to record OpenTelemetry span for screen:', error)
+    }
+  }
+
+  private _recordScreenCaptureError(error: Error): void {
+    try {
+      const span = trace.getTracer('screen').startSpan('Screen.capture.error', {
+        attributes: {
+          'screen.error': true,
+          'screen.error.type': error.name,
+          'screen.error.message': error.message,
+          'screen.timestamp': Date.now(),
+        },
+      })
+
+      span.setStatus({ code: SpanStatusCode.ERROR, message: error.message })
+      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
+    }
+
+    return await this._performScreenCapture()
+  }
+
+  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)
+    } catch (error) {
+      console.error('Failed to capture specific element:', error)
+      return null
+    }
+  }
+
+  // Configuration methods
+  setCaptureInterval(intervalMs: number): void {
+    if (this.captureInterval) {
+      clearInterval(this.captureInterval)
+    }
+
+    if (this.isRecording) {
+      this.captureInterval = setInterval(() => {
+        this._captureScreen()
+      }, intervalMs)
+    }
+  }
+
+  setCaptureQuality(quality: number): void {
+    this.captureQuality = Math.max(0.1, Math.min(1.0, quality))
+  }
+
+  setCaptureFormat(format: 'png' | 'jpg' | 'webp'): void {
+    this.captureFormat = format
+  }
+
+  setMaxCaptures(max: number): void {
+    this.maxCaptures = Math.max(1, max)
+  }
+
+  // Performance monitoring
+  recordScreenPerformance(screenName: string, loadTime: number): void {
+    const event: ScreenEvent = {
+      type: 'screenCapture',
+      timestamp: Date.now(),
+      metadata: {
+        screenName,
+        loadTime,
+        performance: 'monitoring',
+        captureCount: this.captureCount,
+      },
+    }
+
+    this.events.push(event); this._sendEvent(event); this._recordOpenTelemetrySpan(event)
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordOpenTelemetrySpan(event)
+  }
+
+  // Error tracking
+  recordScreenError(error: Error, screenName?: string): void {
+    const event: ScreenEvent = {
+      type: 'screenCapture',
+      timestamp: Date.now(),
+      metadata: {
+        error: true,
+        errorType: error.name,
+        errorMessage: error.message,
+        screenName,
+        captureCount: this.captureCount,
+      },
+    }
+
+    this.events.push(event); this._sendEvent(event); this._recordOpenTelemetrySpan(event)
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordScreenCaptureError(error)
+  }
+
+  // Get recorded events
+  getEvents(): ScreenEvent[] {
+    return [...this.events]
+  }
+
+  // Clear events
+  clearEvents(): void {
+    this.events = []
+    this.captureCount = 0
+  }
+
+  // Get screen capture statistics
+  getScreenStats(): Record<string, any> {
+    const stats = {
+      totalCaptures: this.captureCount,
+      totalEvents: this.events.length,
+      averageCaptureTime: 0,
+      successRate: 0,
+    }
+
+    if (this.events.length > 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
+      stats.successRate = (successfulCaptures / this.events.length) * 100
+    }
+
+    return stats
+  }
+
+  // Get recording status
+  isRecordingEnabled(): boolean {
+    return this.isRecording
+  }
+
+  // Get current configuration
+  getConfiguration(): Record<string, any> {
+    return {
+      captureInterval: this.captureInterval ? 5000 : 0, // Default 5 seconds
+      captureQuality: this.captureQuality,
+      captureFormat: this.captureFormat,
+      maxCaptures: this.maxCaptures,
+      screenDimensions: this.screenDimensions,
+    }
+  }
+
+  // Shutdown
+  shutdown(): void {
+    this.stop()
+    this.clearEvents()
+    console.log('Screen recorder shutdown')
+  }
+}

package/src/services/api.service.ts

@@ -0,0 +1,78 @@
+import { ISession, SessionRecorderOptions } from '../types'
+
+// Type definitions for fetch API
+type RequestInit = {
+  method?: string
+  headers?: Record<string, string>
+  body?: string
+  signal?: AbortSignal
+}
+
+export interface StartSessionRequest {
+  application: string
+  version: string
+  environment: string
+  metadata?: Record<string, any>
+}
+
+export interface StopSessionRequest {
+  sessionId: string
+  comment?: string
+}
+
+export class ApiService {
+  private config?: SessionRecorderOptions
+  private baseUrl: string = 'https://api.multiplayer.app'
+
+  init(config: SessionRecorderOptions): void {
+    this.config = config
+    if (config.apiBaseUrl) {
+      this.baseUrl = config.apiBaseUrl
+    }
+  }
+
+  private async makeRequest<T>(
+    endpoint: string,
+    options: RequestInit = {},
+  ): Promise<T> {
+    if (!this.config?.apiKey) {
+      throw new Error('API key not configured')
+    }
+
+    const url = `${this.baseUrl}${endpoint}`
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${this.config.apiKey}`,
+        ...options.headers,
+      },
+    })
+
+    if (!response.ok) {
+      throw new Error(`API request failed: ${response.statusText}`)
+    }
+
+    return response.json()
+  }
+
+  async startSession(request: StartSessionRequest): Promise<ISession> {
+    return this.makeRequest<ISession>('/sessions', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    })
+  }
+
+  async stopSession(request: StopSessionRequest): Promise<void> {
+    return this.makeRequest<void>(`/sessions/${request.sessionId}/stop`, {
+      method: 'POST',
+      body: JSON.stringify({ comment: request.comment }),
+    })
+  }
+
+  async saveSession(sessionId: string): Promise<ISession> {
+    return this.makeRequest<ISession>(`/sessions/${sessionId}/save`, {
+      method: 'POST',
+    })
+  }
+}

package/src/services/storage.service.ts

@@ -0,0 +1,130 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { ISession, SessionState } from '../types'
+import { SessionType } from '@multiplayer-app/session-recorder-common'
+
+export class StorageService {
+  private static readonly SESSION_ID_KEY = 'session_id'
+  private static readonly SESSION_TYPE_KEY = 'session_type'
+  private static readonly SESSION_STATE_KEY = 'session_state'
+  private static readonly SESSION_OBJECT_KEY = 'session_object'
+
+  async saveSessionId(sessionId: string): Promise<void> {
+    try {
+      await AsyncStorage.setItem(StorageService.SESSION_ID_KEY, sessionId)
+    } catch (error) {
+      console.error('Failed to save session ID:', error)
+      throw error
+    }
+  }
+
+  async getSessionId(): Promise<string | null> {
+    try {
+      return await AsyncStorage.getItem(StorageService.SESSION_ID_KEY)
+    } catch (error) {
+      console.error('Failed to get session ID:', error)
+      return null
+    }
+  }
+
+  async saveSessionType(sessionType: SessionType): Promise<void> {
+    try {
+      await AsyncStorage.setItem(StorageService.SESSION_TYPE_KEY, sessionType)
+    } catch (error) {
+      console.error('Failed to save session type:', error)
+      throw error
+    }
+  }
+
+  async getSessionType(): Promise<SessionType | null> {
+    try {
+      const type = await AsyncStorage.getItem(StorageService.SESSION_TYPE_KEY)
+      return type as SessionType | null
+    } catch (error) {
+      console.error('Failed to get session type:', error)
+      return null
+    }
+  }
+
+  async saveSessionState(state: SessionState): Promise<void> {
+    try {
+      await AsyncStorage.setItem(StorageService.SESSION_STATE_KEY, state)
+    } catch (error) {
+      console.error('Failed to save session state:', error)
+      throw error
+    }
+  }
+
+  async getSessionState(): Promise<SessionState | null> {
+    try {
+      const state = await AsyncStorage.getItem(StorageService.SESSION_STATE_KEY)
+      return state as SessionState | null
+    } catch (error) {
+      console.error('Failed to get session state:', error)
+      return null
+    }
+  }
+
+  async saveSessionObject(session: ISession): Promise<void> {
+    try {
+      await AsyncStorage.setItem(StorageService.SESSION_OBJECT_KEY, JSON.stringify(session))
+    } catch (error) {
+      console.error('Failed to save session object:', error)
+      throw error
+    }
+  }
+
+  async getSessionObject(): Promise<ISession | null> {
+    try {
+      const sessionData = await AsyncStorage.getItem(StorageService.SESSION_OBJECT_KEY)
+      return sessionData ? JSON.parse(sessionData) : null
+    } catch (error) {
+      console.error('Failed to get session object:', error)
+      return null
+    }
+  }
+
+  async clearSessionData(): Promise<void> {
+    try {
+      await AsyncStorage.multiRemove([
+        StorageService.SESSION_ID_KEY,
+        StorageService.SESSION_TYPE_KEY,
+        StorageService.SESSION_STATE_KEY,
+        StorageService.SESSION_OBJECT_KEY,
+      ])
+    } catch (error) {
+      console.error('Failed to clear session data:', error)
+      throw error
+    }
+  }
+
+  async getAllSessionData(): Promise<{
+    sessionId: string | null
+    sessionType: SessionType | null
+    sessionState: SessionState | null
+    sessionObject: ISession | null
+  }> {
+    try {
+      const [sessionId, sessionType, sessionState, sessionObject] = await Promise.all([
+        this.getSessionId(),
+        this.getSessionType(),
+        this.getSessionState(),
+        this.getSessionObject(),
+      ])
+
+      return {
+        sessionId,
+        sessionType,
+        sessionState,
+        sessionObject,
+      }
+    } catch (error) {
+      console.error('Failed to get all session data:', error)
+      return {
+        sessionId: null,
+        sessionType: null,
+        sessionState: null,
+        sessionObject: null,
+      }
+    }
+  }
+}