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

package/src/utils/rrweb-events.ts

@@ -0,0 +1,311 @@
+import { Dimensions } from 'react-native'
+import { EventType, eventWithTime, NodeType, serializedNodeWithId, IncrementalSource, mutationData } from '@rrweb/types'
+
+/**
+ * Creates a meta event to mark the start of recording
+ * @param sessionId - The session ID
+ * @param sessionType - The type of session (PLAIN or CONTINUOUS)
+ * @param additionalData - Additional data to include in the meta event
+ * @returns MetaEvent object
+ */
+export function createRecordingMetaEvent(): eventWithTime {
+  const screenDimensions = Dimensions.get('window')
+
+  return {
+    type: EventType.Meta,
+    data: {
+      href: 'https://go.multiplayer.app/session-recorder-react-native',
+      width: screenDimensions.width,
+      height: screenDimensions.height,
+    },
+    timestamp: Date.now(),
+  }
+}
+
+/**
+ * Create a full snapshot event with the given base64 image
+ * @param base64Image - Base64 encoded image data
+ * @param width - Screen width
+ * @param height - Screen height
+ * @param captureFormat - Image format (png, jpg, etc.)
+ * @param nodeIdCounter - Starting node ID counter (will be modified)
+ * @returns Full snapshot event
+ */
+export function createFullSnapshotEvent(
+  base64Image: string,
+  width: number,
+  height: number,
+  captureFormat: string = 'jpg',
+  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,
+    tagName: 'img',
+    attributes: {
+      src: `data:image/${captureFormat};base64,${base64Image}`,
+      width: width.toString(),
+      height: height.toString(),
+      style: `width: ${width}px; height: ${height}px;`,
+    },
+    childNodes: [],
+  }
+
+  // Create the root container
+  const rootNode: serializedNodeWithId = {
+    type: NodeType.Element,
+    id: nodeIdCounter.current++,
+    tagName: 'div',
+    attributes: {
+      style: `width: ${width}px; height: ${height}px; position: relative;`,
+    },
+    childNodes: [imageNode],
+  }
+
+  const domNode: serializedNodeWithId = {
+    type: NodeType.Document,
+    childNodes: [
+      {
+        type: NodeType.DocumentType,
+        name: 'html',
+        publicId: '',
+        systemId: '',
+        id: nodeIdCounter.current++,
+      },
+      {
+        type: NodeType.Element,
+        tagName: 'html',
+        attributes: {},
+        childNodes: [
+          {
+            type: NodeType.Element,
+            tagName: 'head',
+            attributes: {},
+            childNodes: [
+              {
+                type: NodeType.Element,
+                tagName: 'meta',
+                attributes: { charset: 'utf-8' },
+                childNodes: [],
+                id: nodeIdCounter.current++,
+              },
+              {
+                type: NodeType.Element,
+                tagName: 'meta',
+                attributes: {
+                  name: 'viewport',
+                  content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no',
+                },
+                childNodes: [],
+                id: nodeIdCounter.current++,
+              },
+            ],
+            id: nodeIdCounter.current++,
+          },
+          {
+            type: NodeType.Element,
+            tagName: 'body',
+            attributes: {},
+            childNodes: [rootNode],
+            id: nodeIdCounter.current++,
+          },
+        ],
+        id: nodeIdCounter.current++,
+      },
+    ],
+    id: nodeIdCounter.current++,
+  }
+
+  return {
+    type: EventType.FullSnapshot,
+    data: {
+      node: domNode,
+      initialOffset: { left: 0, top: 0 },
+    },
+    timestamp: Date.now(),
+  }
+}
+
+/**
+ * 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
+ * @param captureFormat - Image format (png, jpg, etc.)
+ * @returns Incremental snapshot event with mutation data
+ */
+export function createIncrementalSnapshotWithImageUpdate(
+  base64Image: string,
+  imageNodeId: number,
+  captureFormat: string = 'jpg',
+): eventWithTime {
+  const mutationData: mutationData = {
+    source: IncrementalSource.Mutation,
+    texts: [],
+    attributes: [
+      {
+        id: imageNodeId,
+        attributes: {
+          src: `data:image/${captureFormat};base64,${base64Image}`,
+        },
+      },
+    ],
+    removes: [],
+    adds: [],
+  }
+
+  return {
+    type: EventType.IncrementalSnapshot,
+    data: mutationData,
+    timestamp: Date.now(),
+  }
+}
+
+/**
+ * Create a simple image node for React Native screen capture
+ * @param base64Image - Base64 encoded image data
+ * @param width - Image width
+ * @param height - Image height
+ * @param captureFormat - Image format (png, jpg, etc.)
+ * @param nodeId - Node ID for the image
+ * @returns Serialized node with ID
+ */
+export function createImageNode(
+  base64Image: string,
+  width: number,
+  height: number,
+  captureFormat: string = 'jpg',
+  nodeId: number,
+): serializedNodeWithId {
+  return {
+    type: NodeType.Element,
+    id: nodeId,
+    tagName: 'img',
+    attributes: {
+      src: `data:image/${captureFormat};base64,${base64Image}`,
+      width: width.toString(),
+      height: height.toString(),
+      style: `width: ${width}px; height: ${height}px;`,
+    },
+    childNodes: [],
+  }
+}
+
+/**
+ * Create a document node for React Native screen capture
+ * @param imageNode - The image node to include
+ * @param width - Screen width
+ * @param height - Screen height
+ * @param nodeIdCounter - Node ID counter (will be modified)
+ * @returns Document node
+ */
+export function createDocumentNode(
+  imageNode: serializedNodeWithId,
+  width: number,
+  height: number,
+  nodeIdCounter: { current: number },
+): serializedNodeWithId {
+  // Create the root container
+  const rootNode: serializedNodeWithId = {
+    type: NodeType.Element,
+    id: nodeIdCounter.current++,
+    tagName: 'div',
+    attributes: {
+      style: `width: ${width}px; height: ${height}px; position: relative;`,
+    },
+    childNodes: [imageNode],
+  }
+
+  return {
+    type: NodeType.Document,
+    childNodes: [
+      {
+        type: NodeType.DocumentType,
+        name: 'html',
+        publicId: '',
+        systemId: '',
+        id: nodeIdCounter.current++,
+      },
+      {
+        type: NodeType.Element,
+        tagName: 'html',
+        attributes: {},
+        childNodes: [
+          {
+            type: NodeType.Element,
+            tagName: 'head',
+            attributes: {},
+            childNodes: [
+              {
+                type: NodeType.Element,
+                tagName: 'meta',
+                attributes: { charset: 'utf-8' },
+                childNodes: [],
+                id: nodeIdCounter.current++,
+              },
+              {
+                type: NodeType.Element,
+                tagName: 'meta',
+                attributes: {
+                  name: 'viewport',
+                  content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no',
+                },
+                childNodes: [],
+                id: nodeIdCounter.current++,
+              },
+            ],
+            id: nodeIdCounter.current++,
+          },
+          {
+            type: NodeType.Element,
+            tagName: 'body',
+            attributes: {},
+            childNodes: [rootNode],
+            id: nodeIdCounter.current++,
+          },
+        ],
+        id: nodeIdCounter.current++,
+      },
+    ],
+    id: nodeIdCounter.current++,
+  }
+}
+
+/**
+ * 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
+ * @param sampleSize - Number of characters to sample from each part
+ * @returns Hash string for comparison
+ */
+export function generateScreenHash(base64Image: string, sampleSize: number = 100): string {
+  // Use a simple hash that samples the beginning, middle, and end of the base64 string
+  // This is much faster than comparing the entire string
+  const start = base64Image.substring(0, sampleSize)
+  const middle = base64Image.substring(
+    Math.floor(base64Image.length / 2) - sampleSize / 2,
+    Math.floor(base64Image.length / 2) + sampleSize / 2,
+  )
+  const end = base64Image.substring(base64Image.length - sampleSize)
+
+  // Combine samples and create a simple hash
+  const combined = start + middle + end
+  return simpleHash(combined)
+}
+
+/**
+ * Simple hash function for string comparison
+ * @param str - String to hash
+ * @returns Hash value as string
+ */
+export function simpleHash(str: string): string {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32-bit integer
+  }
+  return Math.abs(hash).toString(36)
+}

package/src/version.ts

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

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/types/rrweb.ts

@@ -1,122 +0,0 @@
-/**
- * RRWeb event types for React Native session recording
- * Based on rrweb specification: https://github.com/rrweb-io/rrweb
- */
-
-export enum EventType {
-  DomContentLoaded = 0,
-  Load = 1,
-  FullSnapshot = 2,
-  IncrementalSnapshot = 3,
-  Meta = 4,
-  Custom = 5,
-  Plugin = 6,
-}
-
-export enum IncrementalSource {
-  Mutation = 0,
-  MouseMove = 1,
-  MouseInteraction = 2,
-  Scroll = 3,
-  ViewportResize = 4,
-  Input = 5,
-  TouchMove = 6,
-  MediaInteraction = 7,
-  StyleSheetRule = 8,
-  CanvasMutation = 9,
-  Font = 10,
-  Selection = 11,
-  AdoptedStyleSheet = 12,
-}
-
-export enum MouseInteractionType {
-  MouseUp = 0,
-  MouseDown = 1,
-  Click = 2,
-  ContextMenu = 3,
-  DblClick = 4,
-  Focus = 5,
-  Blur = 6,
-  TouchStart = 7,
-  TouchMove = 8,
-  TouchEnd = 9,
-  TouchCancel = 10,
-}
-
-export interface MouseInteractionData {
-  type: MouseInteractionType
-  id: number
-  x: number
-  y: number
-}
-
-export interface TouchInteractionData {
-  type: MouseInteractionType
-  id: number
-  x: number
-  y: number
-  pressure?: number
-  target?: string
-}
-
-export interface FullSnapshotEvent {
-  type: EventType.FullSnapshot
-  data: {
-    node: SerializedNodeWithId
-    initialOffset: {
-      left: number
-      top: number
-    }
-  }
-  timestamp: number
-}
-
-export interface IncrementalSnapshotEvent {
-  type: EventType.IncrementalSnapshot
-  data: {
-    source: IncrementalSource
-    id?: number
-    x?: number
-    y?: number
-    type?: MouseInteractionType
-  } & Partial<MouseInteractionData> & Partial<TouchInteractionData>
-  timestamp: number
-}
-
-export interface SerializedNodeWithId {
-  type: number
-  id: number
-  tagName?: string
-  attributes?: Record<string, string>
-  childNodes?: SerializedNodeWithId[]
-  textContent?: string
-  style?: Record<string, string>
-}
-
-export interface RRWebEvent {
-  type: EventType
-  data: any
-  timestamp: number
-}
-
-// React Native specific types
-export interface ReactNativeScreenData {
-  width: number
-  height: number
-  base64Image: string
-  timestamp: number
-  screenName?: string
-}
-
-export interface ReactNativeTouchData {
-  pageX: number
-  pageY: number
-  target?: string
-  pressure?: number
-  timestamp: number
-}
-
-// Event recording interface
-export interface EventRecorder {
-  recordEvent(event: RRWebEvent): void
-}