@multiplayer-app/session-recorder-react-native 0.0.1 → 1.0.0

package/src/utils/rrweb-events.ts

@@ -1,309 +0,0 @@
-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 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: {},
-            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,
-  captureFormat: string = 'jpg',
-): 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: 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

@@ -1,18 +0,0 @@
-import { DEBUG_SESSION_MAX_DURATION_SECONDS } from '../config/constants'
-
-/**
- * Session-related utility functions for React Native
- */
-
-export const isSessionActive = (session: any, continuousRecording: boolean): boolean => {
-  if (!session) return false
-  if (continuousRecording) 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/time.ts

@@ -1,17 +0,0 @@
-/**
- * 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

@@ -1,75 +0,0 @@
-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

@@ -1 +0,0 @@
-export const version = "0.0.1"

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "rootDir": "./src",
-    "declaration": true,
-    "esModuleInterop": true,
-    "jsx": "react-native",
-    "incremental": false,
-    "lib": ["ESNext"],
-    "module": "ES2015",
-    "moduleResolution": "bundler",
-    "noEmitOnError": true,
-    "outDir": "./dist",
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "target": "ES2018",
-    "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["node_modules", "dist", "examples"],
-  "files": ["src/index.ts", "src/expo.ts"]
-}