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

package/src/utils/platform.ts

@@ -1,6 +1,14 @@
 import { IResourceAttributes } from '../types'
 import Constants from 'expo-constants'
-import { Platform } from 'react-native'
+import { Platform, Dimensions, PixelRatio } from 'react-native'
+import { version } from '../version'
+import { getAutoDetectedAppMetadata } from './app-metadata'
+
+// Global app metadata configuration for non-Expo apps
+let globalAppMetadata: { name?: string; version?: string; bundleId?: string } = {}
+
+// Cache for auto-detected metadata to avoid repeated file reads
+let autoDetectedMetadata: { name?: string; version?: string; bundleId?: string } | null = null
 
 export interface PlatformInfo {
   isExpo: boolean
@@ -52,7 +60,7 @@ export function getPlatformAttributes(): Record<string, any> {
   const platformInfo = detectPlatform()
 
   const attributes: Record<string, any> = {
-    'platform': platformInfo.isExpo ? 'expo' : 'react-native',
+    platform: platformInfo.isExpo ? 'expo' : 'react-native',
     'device.type': platformInfo.deviceType,
   }
 
@@ -75,13 +83,302 @@ export function isReactNativeEnvironment(): boolean {
   return detectPlatform().isReactNative
 }
 
+/**
+ * Configure app metadata for non-Expo React Native apps
+ * Call this function in your app initialization to provide app information
+ *
+ * @example
+ * ```typescript
+ * import { configureAppMetadata } from '@multiplayer-app/session-recorder-react-native'
+ *
+ * // In your App.tsx or index.js
+ * configureAppMetadata({
+ *   name: 'My Awesome App',
+ *   version: '1.2.3',
+ *   bundleId: 'com.mycompany.myapp',
+ *   buildNumber: '123',
+ *   displayName: 'My App',
+ * })
+ * ```
+ */
+export function configureAppMetadata(metadata: {
+  name?: string
+  version?: string
+  bundleId?: string
+  buildNumber?: string
+  displayName?: string
+}): void {
+  globalAppMetadata = { ...globalAppMetadata, ...metadata }
+}
+
+/**
+ * Get configured app metadata
+ */
+export function getConfiguredAppMetadata(): { name?: string, version?: string, bundleId?: string, buildNumber?: string, displayName?: string, } {
+  return { ...globalAppMetadata }
+}
+
+/**
+ * Automatically detect app metadata from common configuration files
+ * This runs without developer intervention
+ */
+function autoDetectAppMetadata(): { name?: string; version?: string; bundleId?: string } {
+  if (autoDetectedMetadata) {
+    return autoDetectedMetadata
+  }
+
+  try {
+    // Get auto-detected metadata from build-time generated file
+    const autoMetadata = getAutoDetectedAppMetadata()
+
+    // Filter out undefined values
+    const metadata: { name?: string; version?: string; bundleId?: string } = {}
+    if (autoMetadata.name) metadata.name = autoMetadata.name
+    if (autoMetadata.version) metadata.version = autoMetadata.version
+    if (autoMetadata.bundleId) metadata.bundleId = autoMetadata.bundleId
+
+    autoDetectedMetadata = metadata
+    return metadata
+  } catch (error) {
+    // Silently fail - this is optional auto-detection
+    autoDetectedMetadata = {}
+    return {}
+  }
+}
+
+/**
+ * Enhanced app metadata detection with automatic fallbacks
+ */
+function getAppMetadata(): { name?: string; version?: string; bundleId?: string } {
+  // Priority order:
+  // 1. Expo config (if available)
+  // 2. Manually configured metadata
+  // 3. Auto-detected metadata
+  // 4. Fallbacks
+
+  const expoMetadata = getExpoMetadata()
+  const configuredMetadata = getConfiguredAppMetadata()
+  const autoMetadata = autoDetectAppMetadata()
+
+  return {
+    name: expoMetadata.name || configuredMetadata.name || autoMetadata.name,
+    version: expoMetadata.version || configuredMetadata.version || autoMetadata.version,
+    bundleId: expoMetadata.bundleId || configuredMetadata.bundleId || autoMetadata.bundleId,
+  }
+}
+
+/**
+ * Get metadata from Expo config
+ */
+function getExpoMetadata(): { name?: string; version?: string; bundleId?: string } {
+  const expoConfig = Constants.default?.expoConfig || Constants.expoConfig
+  if (!expoConfig) return {}
+
+  return {
+    name: expoConfig.name,
+    version: expoConfig.version,
+    bundleId: expoConfig.ios?.bundleIdentifier || expoConfig.android?.package,
+  }
+}
 
 export const getNavigatorInfo = (): IResourceAttributes => {
+  const platformInfo = detectPlatform()
+  const screenData = Dimensions.get('window')
+  const screenDataScreen = Dimensions.get('screen')
+  const pixelRatio = PixelRatio.get()
+
+  // Get device type based on screen dimensions
+  const getDeviceType = (): string => {
+    const { width, height } = screenData
+    const minDimension = Math.min(width, height)
+    const maxDimension = Math.max(width, height)
+
+    // Rough device type detection based on screen size
+    if (maxDimension >= 1024) {
+      return 'Tablet'
+    } else if (minDimension >= 600) {
+      return 'Large Phone'
+    } else {
+      return 'Phone'
+    }
+  }
+
+  // Get orientation
+  const getOrientation = (): string => {
+    const { width, height } = screenData
+    return width > height ? 'Landscape' : 'Portrait'
+  }
+
+  // Get OS version details
+  const getOSInfo = (): string => {
+    if (platformInfo.isExpo) {
+      const platform = Constants.default?.platform || Constants.platform
+      if (platform?.ios) {
+        return `iOS ${Platform.Version}`
+      } else if (platform?.android) {
+        return `Android ${Platform.Version}`
+      }
+    }
+
+    if (Platform.OS === 'ios') {
+      return `iOS ${Platform.Version}`
+    } else if (Platform.OS === 'android') {
+      return `Android ${Platform.Version}`
+    }
+
+    return `${Platform.OS} ${Platform.Version || 'Unknown'}`
+  }
+
+  // Get device info string
+  const getDeviceInfo = (): string => {
+    const deviceType = getDeviceType()
+    const osInfo = getOSInfo()
+    return `${deviceType} - ${osInfo}`
+  }
+
+  // Get browser/runtime info
+  const getBrowserInfo = (): string => {
+    if (platformInfo.isExpo) {
+      return `Expo ${platformInfo.expoVersion || 'Unknown'} - React Native`
+    }
+    return 'React Native'
+  }
+
+  // Get screen size string
+  const getScreenSize = (): string => {
+    return `${Math.round(screenData.width)}x${Math.round(screenData.height)}`
+  }
+
+  // Get app info with fallbacks for non-Expo apps
+  const getAppInfo = (): string => {
+    const appName = getAppName()
+    const appVersion = getAppVersion()
+    return `${appName} v${appVersion}`
+  }
+
+  // Get app name with automatic detection
+  const getAppName = (): string => {
+    const metadata = getAppMetadata()
+    if (metadata.name) return metadata.name
+
+    // Try configured display name as fallback
+    const configuredMetadata = getConfiguredAppMetadata()
+    if (configuredMetadata.displayName) return configuredMetadata.displayName
+
+    // Final fallback
+    return 'React Native App'
+  }
+
+  // Get app version with automatic detection
+  const getAppVersion = (): string => {
+    const metadata = getAppMetadata()
+    if (metadata.version) return metadata.version
+
+    // Final fallback
+    return 'Unknown'
+  }
+
+  // Get bundle ID with automatic detection
+  const getBundleId = (): string => {
+    const metadata = getAppMetadata()
+    if (metadata.bundleId) return metadata.bundleId
+
+    // Fallback
+    return 'com.reactnative.app'
+  }
+
+  // Get build number with multiple fallback strategies
+  const getBuildNumber = (): string => {
+    // Try Expo config first
+    const expoBuildNumber =
+      Constants.default?.expoConfig?.ios?.buildNumber ||
+      Constants.expoConfig?.ios?.buildNumber ||
+      Constants.default?.expoConfig?.android?.versionCode ||
+      Constants.expoConfig?.android?.versionCode
+    if (expoBuildNumber) return expoBuildNumber.toString()
+
+    // Try configured metadata for non-Expo apps
+    const configuredMetadata = getConfiguredAppMetadata()
+    if (configuredMetadata.buildNumber) return configuredMetadata.buildNumber
+
+    // Fallback
+    return '1'
+  }
+
+  // Get network info (basic)
+  const getNetworkInfo = (): string => {
+    // This is a basic implementation - in a real app you might want to use @react-native-community/netinfo
+    return 'Unknown'
+  }
+
+  // Get hardware info
+  const getHardwareInfo = (): string => {
+    const pixelRatioInfo = `Pixel Ratio: ${pixelRatio}`
+    const screenDensity = PixelRatio.getFontScale()
+    return `${pixelRatioInfo}, Font Scale: ${screenDensity}`
+  }
+
   return {
-    platform: 'react-native',
-    userAgent: 'React Native',
-    language: 'en',
+    // Core platform info
+    platform: platformInfo.isExpo ? 'expo' : 'react-native',
+    userAgent: getBrowserInfo(),
+    language: 'en', // Could be enhanced with react-native-localize if available
     timestamp: new Date().toISOString(),
+
+    // Device and OS information
+    deviceInfo: getDeviceInfo(),
+    osInfo: getOSInfo(),
+    browserInfo: getBrowserInfo(),
+
+    // Screen information
+    screenSize: getScreenSize(),
+    pixelRatio: pixelRatio,
+    orientation: getOrientation(),
+    screenWidth: Math.round(screenData.width),
+    screenHeight: Math.round(screenData.height),
+    screenScale: pixelRatio,
+
+    // Device capabilities
+    hardwareConcurrency: 1, // React Native doesn't expose CPU cores directly
+    cookiesEnabled: 'N/A', // Not applicable in React Native
+
+    // App information
+    packageVersion: version,
+    appInfo: getAppInfo(),
+    appName: getAppName(),
+    appVersion: getAppVersion(),
+    bundleId: getBundleId(),
+    buildNumber: getBuildNumber(),
+
+    // Platform specific
+    platformType: platformInfo.platform,
+    platformVersion: platformInfo.platformVersion,
+    expoVersion: platformInfo.expoVersion,
+    deviceType: getDeviceType(),
+
+    // Additional device info
+    deviceModel: Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
+    deviceManufacturer: Platform.OS === 'ios' ? 'Apple' : 'Android Manufacturer',
+    deviceBrand: Platform.OS === 'ios' ? 'Apple' : 'Android Brand',
+
+    // Performance and hardware
+    hardwareInfo: getHardwareInfo(),
+    networkInfo: getNetworkInfo(),
+
+    // Screen details
+    screenDensity: PixelRatio.getFontScale(),
+    screenScaleFactor: pixelRatio,
+    windowWidth: Math.round(screenData.width),
+    windowHeight: Math.round(screenData.height),
+    fullScreenWidth: Math.round(screenDataScreen.width),
+    fullScreenHeight: Math.round(screenDataScreen.height),
+
+    // Environment info
+    isExpo: platformInfo.isExpo,
+    isReactNative: platformInfo.isReactNative,
+    environment: platformInfo.isExpo ? 'expo' : 'react-native',
+
+    // Additional platform attributes
     ...getPlatformAttributes(),
   }
-}
+}

package/src/utils/rrweb-events.ts

@@ -39,10 +39,9 @@ export function createFullSnapshotEvent(
   nodeIdCounter: { current: number },
 ): eventWithTime {
   // Create a virtual DOM node representing the screen as an image
-  const imageNodeId = nodeIdCounter.current++
   const imageNode: serializedNodeWithId = {
     type: NodeType.Element,
-    id: imageNodeId,
+    id: 0,
     tagName: 'img',
     attributes: {
       src: `data:image/${captureFormat};base64,${base64Image}`,
@@ -137,7 +136,6 @@ export function createFullSnapshotEvent(
  */
 export function createIncrementalSnapshotWithImageUpdate(
   base64Image: string,
-  imageNodeId: number,
   captureFormat: string = 'jpg',
 ): eventWithTime {
   const mutationData: mutationData = {
@@ -145,7 +143,7 @@ export function createIncrementalSnapshotWithImageUpdate(
     texts: [],
     attributes: [
       {
-        id: imageNodeId,
+        id: 0,
         attributes: {
           src: `data:image/${captureFormat};base64,${base64Image}`,
         },

package/src/version.ts

@@ -1 +1 @@
-export const version = "0.0.1-alpha.8"
+export const version = "0.0.1"

package/example-usage.tsx

@@ -1,174 +0,0 @@
-/**
- * Example usage of the React Native Session Recorder with rrweb integration
- * This file demonstrates how to use the updated session recorder system
- */
-
-import React from 'react'
-import { View, Text, Button, StyleSheet, Alert } from 'react-native'
-import { SessionRecorderProvider, useSessionRecorder } from './src/context/SessionRecorderContext'
-import { EventType } from './src/types'
-
-// Example app component
-function App() {
-  return (
-    <SessionRecorderProvider
-      options={{
-        apiKey: 'your-api-key-here',
-        version: '1.0.0',
-        application: 'ExampleApp',
-        environment: 'development',
-        recordScreen: true,
-        recordGestures: true,
-        recordNavigation: true
-      }}
-    >
-      <MainContent />
-    </SessionRecorderProvider>
-  )
-}
-
-// Main content component that will be wrapped by TouchEventCapture
-function MainContent() {
-  const { client } = useSessionRecorder()
-
-  const handleStartSession = () => {
-    try {
-      client.start()
-      Alert.alert('Session Started', 'Recording has begun!')
-    } catch (error) {
-      Alert.alert('Error', `Failed to start session: ${error}`)
-    }
-  }
-
-  const handleStopSession = () => {
-    try {
-      client.stop()
-      Alert.alert('Session Stopped', 'Recording has ended!')
-    } catch (error) {
-      Alert.alert('Error', `Failed to stop session: ${error}`)
-    }
-  }
-
-  const handleRecordCustomEvent = () => {
-    // Example of recording a custom rrweb event
-    const customEvent = {
-      type: EventType.Custom,
-      data: {
-        customType: 'button_click',
-        buttonId: 'example_button',
-        timestamp: Date.now()
-      },
-      timestamp: Date.now()
-    }
-
-    client.recordEvent(customEvent)
-    Alert.alert('Custom Event', 'Custom event recorded!')
-  }
-
-  const handleGetRecordingStats = () => {
-    // This would need to be implemented in the SessionRecorder
-    // const stats = client.getRecordingStats()
-    // Alert.alert('Recording Stats', `Events recorded: ${stats.totalEvents}`)
-    Alert.alert('Recording Stats', 'Feature coming soon!')
-  }
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Session Recorder Example</Text>
-      <Text style={styles.subtitle}>This app demonstrates rrweb-compatible session recording for React Native</Text>
-
-      <View style={styles.buttonContainer}>
-        <Button title='Start Recording' onPress={handleStartSession} color='#4CAF50' />
-      </View>
-
-      <View style={styles.buttonContainer}>
-        <Button title='Stop Recording' onPress={handleStopSession} color='#F44336' />
-      </View>
-
-      <View style={styles.buttonContainer}>
-        <Button title='Record Custom Event' onPress={handleRecordCustomEvent} color='#2196F3' />
-      </View>
-
-      <View style={styles.buttonContainer}>
-        <Button title='Get Recording Stats' onPress={handleGetRecordingStats} color='#FF9800' />
-      </View>
-
-      <Text style={styles.instructions}>
-        Recording is now AUTOMATIC! When you start a session, the system will automatically:
-        {'\n'}• Capture screen snapshots periodically
-        {'\n'}• Record all touch interactions (start, move, end)
-        {'\n'}• Generate rrweb-compatible events
-        {'\n'}• No manual setup required!
-      </Text>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: '#f5f5f5',
-    justifyContent: 'center'
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    marginBottom: 10,
-    color: '#333'
-  },
-  subtitle: {
-    fontSize: 16,
-    textAlign: 'center',
-    marginBottom: 30,
-    color: '#666'
-  },
-  buttonContainer: {
-    marginVertical: 10
-  },
-  instructions: {
-    fontSize: 14,
-    textAlign: 'center',
-    marginTop: 30,
-    color: '#888',
-    fontStyle: 'italic'
-  }
-})
-
-export default App
-
-/**
- * AUTOMATIC RECORDING INTEGRATION:
- *
- * 1. Screen Capture (AUTOMATIC with react-native-view-shot):
- *    - Install: npm install react-native-view-shot
- *    - iOS: Add to Podfile and run pod install
- *    - Android: No additional setup needed
- *    - Screen capture happens automatically when session starts
- *    - Captures the same View element that handles touch events
- *
- * 2. Touch Events (AUTOMATIC):
- *    - TouchEventCapture automatically wraps your app content
- *    - Touch events are automatically converted to rrweb MouseInteraction events
- *    - Coordinates are automatically mapped from React Native to rrweb format
- *    - No manual setup required!
- *
- * 3. Event Recording (AUTOMATIC):
- *    - All events are automatically stored in the RecorderReactNativeSDK
- *    - Events can be exported using getRecordedEvents()
- *    - Events are compatible with standard rrweb players
- *    - Recording starts/stops automatically with session
- *
- * 4. ViewShot Integration (AUTOMATIC):
- *    - The TouchEventCapture View is automatically used for screen capture
- *    - No need to manually set up viewshot refs
- *    - Screen captures include all touch interactions
- *    - Perfect synchronization between touch events and screen captures
- *
- * 5. Customization (Optional):
- *    - Modify capture intervals in ScreenRecorder
- *    - Adjust touch event throttling in GestureRecorder
- *    - Add custom event types as needed
- *    - All core functionality works automatically out of the box
- */

package/src/otel/instrumentations/gestureInstrumentation.ts

@@ -1,141 +0,0 @@
-import { InstrumentationBase } from '@opentelemetry/instrumentation'
-import { trace, SpanStatusCode } from '@opentelemetry/api'
-
-export class GestureInstrumentation extends InstrumentationBase {
-  private _isEnabled = false
-
-  constructor() {
-    super('react-native-gesture', '1.0.0', {})
-  }
-
-  init(): void {
-    // Initialize the instrumentation
-  }
-
-  enable(): void {
-    this._isEnabled = true
-  }
-
-  disable(): void {
-    this._isEnabled = false
-  }
-
-  isEnabled(): boolean {
-    return this._isEnabled
-  }
-
-  // Manual gesture tracking methods
-  recordTap(x: number, y: number, target?: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan('Gesture.tap', {
-      attributes: {
-        'gesture.type': 'tap',
-        'gesture.coordinates.x': x,
-        'gesture.coordinates.y': y,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    if (target) {
-      span.setAttribute('gesture.target', target)
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  recordSwipe(direction: string, target?: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan('Gesture.swipe', {
-      attributes: {
-        'gesture.type': 'swipe',
-        'gesture.direction': direction,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    if (target) {
-      span.setAttribute('gesture.target', target)
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  recordPinch(scale: number, target?: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan('Gesture.pinch', {
-      attributes: {
-        'gesture.type': 'pinch',
-        'gesture.scale': scale,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    if (target) {
-      span.setAttribute('gesture.target', target)
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  recordPan(deltaX: number, deltaY: number, target?: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan('Gesture.pan', {
-      attributes: {
-        'gesture.type': 'pan',
-        'gesture.delta_x': deltaX,
-        'gesture.delta_y': deltaY,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    if (target) {
-      span.setAttribute('gesture.target', target)
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  recordLongPress(duration: number, target?: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan('Gesture.longPress', {
-      attributes: {
-        'gesture.type': 'longPress',
-        'gesture.duration': duration,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    if (target) {
-      span.setAttribute('gesture.target', target)
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  // Error tracking for gesture failures
-  recordGestureError(error: Error, gestureType: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan(`Gesture.${gestureType}.error`, {
-      attributes: {
-        'gesture.type': gestureType,
-        'gesture.error': true,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    span.setStatus({ code: SpanStatusCode.ERROR, message: error.message })
-    span.recordException(error)
-    span.end()
-  }
-}