@multiplayer-app/session-recorder-react-native 1.0.1-beta.3 → 1.0.1-beta.5

package/src/utils/rrweb-events.ts

@@ -0,0 +1,329 @@
+import { Dimensions } from 'react-native';
+import {
+  EventType,
+  type eventWithTime,
+  NodeType,
+  type serializedNodeWithId,
+  IncrementalSource,
+  type mutationData,
+} from '@rrweb/types';
+import { getAppMetadata } from './platform';
+
+/**
+ * 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');
+  const metadata = getAppMetadata();
+
+  return {
+    type: EventType.Meta,
+    data: {
+      href:
+        metadata.bundleId || metadata.name || 'https://native.multiplayer.app',
+      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)
+ * @param timestamp - Optional timestamp to use for the event
+ * @returns Full snapshot event
+ */
+export function createFullSnapshotEvent(
+  base64Image: string,
+  width: number,
+  height: number,
+  captureFormat: string = 'jpg',
+  nodeIdCounter: { current: number },
+  timestamp?: number
+): eventWithTime {
+  // Create a virtual DOM node representing the screen as an image
+  const imageNode: serializedNodeWithId = {
+    type: NodeType.Element,
+    id: 0,
+    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: {
+              style: 'margin: 0; padding: 0; width: 100%; height: 100%;',
+            },
+            childNodes: [rootNode],
+            id: nodeIdCounter.current++,
+          },
+        ],
+        id: nodeIdCounter.current++,
+      },
+    ],
+    id: nodeIdCounter.current++,
+  };
+
+  return {
+    type: EventType.FullSnapshot,
+    data: {
+      node: domNode,
+      initialOffset: { left: 0, top: 0 },
+    },
+    timestamp: timestamp || Date.now(),
+  };
+}
+
+/**
+ * Create an incremental snapshot event with mutation data to update image src
+ * @param base64Image - New base64 encoded image data
+ * @param captureFormat - Image format (png, jpg, etc.)
+ * @param timestamp - Optional timestamp to use for the event
+ * @returns Incremental snapshot event with mutation data
+ */
+export function createIncrementalSnapshotWithImageUpdate(
+  base64Image: string,
+  captureFormat: string = 'jpg',
+  timestamp?: number
+): eventWithTime {
+  const mutationData: mutationData = {
+    source: IncrementalSource.Mutation,
+    texts: [],
+    attributes: [
+      {
+        id: 0,
+        attributes: {
+          src: `data:image/${captureFormat};base64,${base64Image}`,
+        },
+      },
+    ],
+    removes: [],
+    adds: [],
+  };
+
+  return {
+    type: EventType.IncrementalSnapshot,
+    data: mutationData,
+    timestamp: 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/utils/session.ts

@@ -0,0 +1,22 @@
+import { SessionType } from '@multiplayer-app/session-recorder-common';
+import { DEBUG_SESSION_MAX_DURATION_SECONDS } from '../config/constants';
+
+/**
+ * Session-related utility functions for React Native
+ */
+
+export const isSessionActive = (
+  session: any,
+  sessionType: SessionType | null
+): boolean => {
+  if (!session) return false;
+  if (sessionType === SessionType.CONTINUOUS) return true;
+  const startedAt = new Date(session.startedAt || session.createdAt);
+  const now = new Date();
+  const diff = now.getTime() - startedAt.getTime();
+  return diff < DEBUG_SESSION_MAX_DURATION_SECONDS * 1000;
+};
+
+export const isConsoleEvent = (event: any): boolean => {
+  return event.type === 'Plugin' && event.data?.plugin === 'rrweb/console@1';
+};

package/src/utils/shallowEqual.ts

@@ -0,0 +1,20 @@
+export function shallowEqual<T extends Record<string, any>>(
+  a: T,
+  b: T
+): boolean {
+  if (Object.is(a, b)) return true;
+  if (!a || !b) return false;
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (let i = 0; i < aKeys.length; i++) {
+    const key = aKeys[i];
+    if (
+      !Object.prototype.hasOwnProperty.call(b, key!) ||
+      !Object.is(a[key!], b[key!])
+    ) {
+      return false;
+    }
+  }
+  return true;
+}

package/src/utils/time.ts

@@ -0,0 +1,20 @@
+/**
+ * Time and date utility functions for React Native
+ */
+
+export const getFormattedDate = (
+  date: number | Date,
+  options?: any
+): string => {
+  return new Date(date).toLocaleDateString(
+    'en-US',
+    options || {
+      month: 'short',
+      year: 'numeric',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      second: '2-digit',
+    }
+  );
+};

package/src/utils/type-utils.ts

@@ -0,0 +1,75 @@
+const nativeIsArray = Array.isArray;
+const ObjProto = Object.prototype;
+export const hasOwnProperty = ObjProto.hasOwnProperty;
+const toString = ObjProto.toString;
+
+export const isArray =
+  nativeIsArray ||
+  function (obj: any): obj is any[] {
+    return toString.call(obj) === '[object Array]';
+  };
+export const isUint8Array = function (x: unknown): x is Uint8Array {
+  return toString.call(x) === '[object Uint8Array]';
+};
+// from a comment on http://dbj.org/dbj/?p=286
+// fails on only one very rare and deliberate custom object:
+// let bomb = { toString : undefined, valueOf: function(o) { return "function BOMBA!"; }};
+export const isFunction = function (f: any): f is (...args: any[]) => any {
+  return typeof f === 'function';
+};
+// Underscore Addons
+export const isObject = function (x: unknown): x is Record<string, any> {
+  return x === Object(x) && !isArray(x);
+};
+export const isEmptyObject = function (x: unknown): x is Record<string, any> {
+  if (isObject(x)) {
+    for (const key in x) {
+      if (hasOwnProperty.call(x, key)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+};
+export const isUndefined = function (x: unknown): x is undefined {
+  return x === void 0;
+};
+
+export const isString = function (x: unknown): x is string {
+  return toString.call(x) == '[object String]';
+};
+
+export const isEmptyString = function (x: unknown): boolean {
+  return isString(x) && x.trim().length === 0;
+};
+
+export const isNull = function (x: unknown): x is null {
+  return x === null;
+};
+
+/*
+    sometimes you want to check if something is null or undefined
+    that's what this is for
+ */
+export const isNullish = function (x: unknown): x is null | undefined {
+  return isUndefined(x) || isNull(x);
+};
+
+export const isDate = function (x: unknown): x is Date {
+  return toString.call(x) == '[object Date]';
+};
+export const isNumber = function (x: unknown): x is number {
+  return toString.call(x) == '[object Number]';
+};
+export const isBoolean = function (x: unknown): x is boolean {
+  return toString.call(x) === '[object Boolean]';
+};
+
+export const isFormData = (x: unknown): x is FormData => {
+  return x instanceof FormData;
+};
+
+export const isFile = (x: unknown): x is File => {
+  return x instanceof File;
+};

package/src/version.ts

@@ -0,0 +1 @@
+export const version = '1.0.1-beta.3';

package/REACT_NATIVE_SETUP.md

@@ -1,91 +0,0 @@
-# React Native Setup Guide
-
-This package provides native session recording capabilities for React Native applications with automatic masking of sensitive UI elements.
-
-## Installation
-
-### For React Native CLI projects:
-
-```bash
-npm install @multiplayer-app/session-recorder-react-native
-```
-
-### For Expo projects:
-
-```bash
-npx expo install @multiplayer-app/session-recorder-react-native
-```
-
-## Platform-specific Setup
-
-### Android
-
-The Android native module is automatically linked. No additional setup required.
-
-### iOS
-
-The iOS native module uses CocoaPods for dependency management. Run:
-
-```bash
-cd ios && pod install
-```
-
-## Usage
-
-```typescript
-import { SessionRecorder } from '@multiplayer-app/session-recorder-react-native'
-
-// Initialize the session recorder
-const sessionRecorder = new SessionRecorder({
-  // Configuration options
-})
-
-// Start recording
-await sessionRecorder.start()
-
-// Stop recording
-await sessionRecorder.stop()
-```
-
-## Native Module Structure
-
-### Android
-
-- `SessionRecorderNativeModule.kt` - Main native module implementation
-- `SessionRecorderNativePackage.kt` - React Native package registration
-- `SessionRecorderNativeConfig.kt` - Configuration class
-- `ViewUtils.kt` - View utility functions
-- `TargetInfo.kt` - Data model for target information
-
-### iOS
-
-- `SessionRecorderNative.swift` - Main native module implementation
-- `GestureTargetFinder.swift` - Gesture target detection utilities
-- `SessionRecorderNative.m` - Objective-C bridge
-- `SessionRecorderNative.podspec` - CocoaPods specification
-
-## Features
-
-- **Screen Capture**: Capture screenshots with automatic masking
-- **Gesture Recording**: Record user interactions (tap, pan, long press, pinch)
-- **Sensitive Content Masking**: Automatically mask text inputs, images, and other sensitive elements
-- **Cross-platform**: Works on both Android and iOS
-- **Expo Compatible**: Supports Expo managed workflow
-
-## Troubleshooting
-
-### Android Build Issues
-
-- Ensure Android SDK is properly configured
-- Check that the package is properly linked in `MainApplication.java`
-
-### iOS Build Issues
-
-- Run `pod install` in the iOS directory
-- Ensure Xcode is properly configured
-- Check that the podspec is correctly configured
-
-### Expo Issues
-
-- Use `npx expo install` instead of `npm install`
-- Ensure you're using a compatible Expo SDK version

package/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,7 +0,0 @@
-distributionBase=GRADLE_USER_HOME
-distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.3-bin.zip
-networkTimeout=10000
-validateDistributionUrl=true
-zipStoreBase=GRADLE_USER_HOME
-zipStorePath=wrapper/dists