@multiplayer-app/session-recorder-react-native 1.0.0 → 1.0.1-beta.10

package/src/config/session-recorder.ts

@@ -0,0 +1,87 @@
+import {
+  LogLevel,
+  type SessionRecorderConfigs,
+  type SessionRecorderOptions,
+} from '../types';
+
+import { BASE_CONFIG } from './defaults';
+import { getMaskingConfig } from './masking';
+import {
+  isValidString,
+  isValidNumber,
+  isValidBoolean,
+  isValidArray,
+} from './validators';
+import { getWidgetConfig } from './widget';
+
+const getLoggerConfig = (config: any) => {
+  if (!config || typeof config !== 'object') {
+    return BASE_CONFIG.logger;
+  }
+  return {
+    level: isValidNumber(config.level, LogLevel.INFO),
+    enabled: isValidBoolean(config.enabled, false),
+  };
+};
+
+export const getSessionRecorderConfig = (
+  c: SessionRecorderOptions
+): SessionRecorderConfigs => {
+  if (!c) {
+    return BASE_CONFIG;
+  }
+
+  return {
+    apiKey: isValidString(c.apiKey, BASE_CONFIG.apiKey),
+    version: isValidString(c.version, BASE_CONFIG.version),
+    application: isValidString(c.application, BASE_CONFIG.application),
+    environment: isValidString(c.environment, BASE_CONFIG.environment),
+
+    exporterEndpoint: isValidString(
+      c.exporterEndpoint,
+      BASE_CONFIG.exporterEndpoint
+    ),
+    apiBaseUrl: isValidString(c.apiBaseUrl, BASE_CONFIG.apiBaseUrl),
+
+    showContinuousRecording: isValidBoolean(
+      c.showContinuousRecording,
+      BASE_CONFIG.showContinuousRecording
+    ),
+    ignoreUrls: isValidArray(c.ignoreUrls, BASE_CONFIG.ignoreUrls),
+    sampleTraceRatio: isValidNumber(
+      c.sampleTraceRatio,
+      BASE_CONFIG.sampleTraceRatio
+    ),
+    propagateTraceHeaderCorsUrls:
+      c.propagateTraceHeaderCorsUrls ||
+      BASE_CONFIG.propagateTraceHeaderCorsUrls,
+    schemifyDocSpanPayload: isValidBoolean(
+      c.schemifyDocSpanPayload,
+      BASE_CONFIG.schemifyDocSpanPayload
+    ),
+    maxCapturingHttpPayloadSize: isValidNumber(
+      c.maxCapturingHttpPayloadSize,
+      BASE_CONFIG.maxCapturingHttpPayloadSize
+    ),
+
+    captureBody: isValidBoolean(c.captureBody, BASE_CONFIG.captureBody),
+    captureHeaders: isValidBoolean(
+      c.captureHeaders,
+      BASE_CONFIG.captureHeaders
+    ),
+
+    recordScreen: isValidBoolean(c.recordScreen, BASE_CONFIG.recordScreen),
+    recordGestures: isValidBoolean(
+      c.recordGestures,
+      BASE_CONFIG.recordGestures
+    ),
+    recordNavigation: isValidBoolean(
+      c.recordNavigation,
+      BASE_CONFIG.recordNavigation
+    ),
+
+    masking: getMaskingConfig(c.masking),
+    widget: getWidgetConfig(c.widget),
+    logger: getLoggerConfig(c.logger),
+  };
+};

package/src/config/validators.ts

@@ -0,0 +1,54 @@
+/**
+ * Validation helper functions for configuration objects
+ */
+
+export const isValidStringOrRegExp = (
+  value: string | RegExp | undefined,
+  defaultValue: string | RegExp
+) => {
+  return typeof value === 'string' || value instanceof RegExp
+    ? value
+    : defaultValue;
+};
+
+export const isValidString = <T extends string>(
+  value: string | undefined | T,
+  defaultValue: string
+) => {
+  return typeof value === 'string' ? value.trim() : defaultValue;
+};
+
+export const isValidNumber = (
+  value: number | undefined,
+  defaultValue: number
+) => {
+  return typeof value === 'number' ? value : defaultValue;
+};
+
+export const isValidBoolean = (
+  value: boolean | undefined,
+  defaultValue: boolean
+) => {
+  return typeof value === 'boolean' ? value : defaultValue;
+};
+
+export const isValidArray = <T>(
+  value: ReadonlyArray<T> | undefined,
+  defaultValue: ReadonlyArray<T>
+): T[] => {
+  return Array.isArray(value)
+    ? ([...value] as T[])
+    : ([...defaultValue] as T[]);
+};
+
+export const isValidEnum = <T>(
+  value: any | T,
+  defaultValue: T,
+  enumValues: T[]
+): T => {
+  return enumValues.includes(value as T) ? (value as T) : defaultValue;
+};
+
+export const isValidFunction = (value: any, defaultValue: any) => {
+  return typeof value === 'function' ? value : defaultValue;
+};

package/src/config/widget.ts

@@ -0,0 +1,47 @@
+import { type SessionRecorderOptions, WidgetButtonPlacement } from '../types';
+import { BASE_CONFIG } from './defaults';
+import { isValidBoolean, isValidEnum, isValidString } from './validators';
+
+export const getWidgetConfig = (config: SessionRecorderOptions['widget']) => {
+  const textOverrides = getTextOverridesConfig(
+    config?.textOverrides,
+    BASE_CONFIG.widget.textOverrides
+  );
+
+  const def = {
+    enabled: true,
+    button: { visible: true, placement: WidgetButtonPlacement.bottomRight },
+    textOverrides,
+  };
+
+  const placementCandidate = config?.button?.placement || def.button.placement;
+
+  return {
+    textOverrides,
+    enabled: isValidBoolean(config && config.enabled, def.enabled),
+    button: {
+      visible: isValidBoolean(
+        config && config.button && config.button.visible,
+        def.button.visible
+      ),
+      placement: isValidEnum<WidgetButtonPlacement>(
+        placementCandidate,
+        def.button.placement,
+        Object.values(WidgetButtonPlacement)
+      ),
+    },
+  };
+};
+
+const getTextOverridesConfig = (config: any, defaultConfig: any) => {
+  if (!config || typeof config !== 'object') {
+    return defaultConfig;
+  }
+  return Object.keys(defaultConfig).reduce(
+    (acc, key) => {
+      acc[key] = isValidString(config[key], defaultConfig[key]);
+      return acc;
+    },
+    {} as Record<string, unknown>
+  );
+};

package/src/context/SessionRecorderContext.tsx

@@ -0,0 +1,138 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useCallback,
+  type PropsWithChildren,
+} from 'react';
+import { type SessionRecorderOptions, SessionState } from '../types';
+import sessionRecorder from '../session-recorder';
+import { ScreenRecorderView } from '../components/ScreenRecorderView';
+import SessionRecorderWidget from '../components/SessionRecorderWidget';
+import { SessionType } from '@multiplayer-app/session-recorder-common';
+import {
+  sessionRecorderStore,
+  type SessionRecorderState,
+} from './SessionRecorderStore';
+import { useStoreSelector } from './useStoreSelector';
+
+interface SessionRecorderContextType {
+  instance: typeof sessionRecorder;
+  openWidgetModal: () => void;
+  closeWidgetModal: () => void;
+  startSession: (sessionType?: SessionType) => Promise<void>;
+  stopSession: (comment?: string) => Promise<void>;
+  pauseSession: () => Promise<void>;
+  resumeSession: () => Promise<void>;
+  cancelSession: () => Promise<void>;
+  saveSession: () => Promise<void>;
+}
+
+const SessionRecorderContext = createContext<SessionRecorderContextType | null>(
+  null
+);
+
+export interface SessionRecorderProviderProps extends PropsWithChildren {
+  options?: SessionRecorderOptions;
+}
+
+export const SessionRecorderProvider: React.FC<
+  SessionRecorderProviderProps
+> = ({ children, options }) => {
+  const isInitialized = useStoreSelector<SessionRecorderState, boolean>(
+    sessionRecorderStore,
+    (s) => s.isInitialized
+  );
+
+  useEffect(() => {
+    if (options) {
+      sessionRecorder.init(options);
+    }
+    sessionRecorderStore.setState({
+      isInitialized: sessionRecorder.isInitialized,
+    });
+  }, []);
+
+  useEffect(() => {
+    sessionRecorderStore.setState({
+      sessionState: sessionRecorder.sessionState,
+      sessionType: sessionRecorder.sessionType,
+    });
+    const onStateChange = (
+      sessionState: SessionState,
+      sessionType: SessionType
+    ) => {
+      sessionRecorderStore.setState({ sessionState, sessionType });
+    };
+    sessionRecorder.on('state-change', onStateChange);
+    return () => {
+      sessionRecorder.off('state-change', onStateChange);
+    };
+  }, []);
+
+  const startSession = useCallback(
+    (sessionType: SessionType = SessionType.PLAIN) => {
+      return sessionRecorder.start(sessionType);
+    },
+    []
+  );
+
+  const stopSession = useCallback((comment?: string) => {
+    return sessionRecorder.stop(comment);
+  }, []);
+
+  const pauseSession = useCallback(() => {
+    return sessionRecorder.pause();
+  }, []);
+
+  const resumeSession = useCallback(() => {
+    return sessionRecorder.resume();
+  }, []);
+
+  const cancelSession = useCallback(() => {
+    return sessionRecorder.cancel();
+  }, []);
+
+  const saveSession = useCallback(() => {
+    return sessionRecorder.save();
+  }, []);
+
+  const openWidgetModal = useCallback(() => {
+    sessionRecorderStore.setState({ isWidgetModalVisible: true });
+  }, []);
+
+  const closeWidgetModal = useCallback(() => {
+    sessionRecorderStore.setState({ isWidgetModalVisible: false });
+  }, []);
+
+  return (
+    <SessionRecorderContext.Provider
+      value={{
+        instance: sessionRecorder,
+        openWidgetModal,
+        closeWidgetModal,
+        startSession,
+        stopSession,
+        pauseSession,
+        resumeSession,
+        cancelSession,
+        saveSession,
+      }}
+    >
+      <ScreenRecorderView>{children}</ScreenRecorderView>
+      {isInitialized && !!sessionRecorder.config.widget.enabled && (
+        <SessionRecorderWidget />
+      )}
+    </SessionRecorderContext.Provider>
+  );
+};
+
+export const useSessionRecorder = (): SessionRecorderContextType => {
+  const context = useContext(SessionRecorderContext);
+  if (!context) {
+    throw new Error(
+      'useSessionRecorder must be used within a SessionRecorderProvider'
+    );
+  }
+  return context;
+};

package/src/context/SessionRecorderStore.ts

@@ -0,0 +1,22 @@
+import { createStore, type Store } from '../utils/createStore';
+import { SessionType } from '@multiplayer-app/session-recorder-common';
+import { SessionState } from '../types';
+
+export type SessionRecorderState = {
+  isInitialized: boolean;
+  sessionType: SessionType | null;
+  sessionState: SessionState | null;
+  isWidgetModalVisible: boolean;
+  isOnline: boolean;
+  error: string | null;
+};
+
+export const sessionRecorderStore: Store<SessionRecorderState> =
+  createStore<SessionRecorderState>({
+    isInitialized: false,
+    sessionType: null,
+    sessionState: null,
+    isWidgetModalVisible: false,
+    isOnline: true,
+    error: null,
+  });

package/src/context/useSessionRecorderStore.ts

@@ -0,0 +1,34 @@
+import { SessionType } from '@multiplayer-app/session-recorder-common';
+import { SessionState } from '../types';
+import { useStoreSelector } from './useStoreSelector';
+import {
+  type SessionRecorderState,
+  sessionRecorderStore,
+} from './SessionRecorderStore';
+
+export function useSessionRecorderStore<TSlice>(
+  selector: (s: SessionRecorderState) => TSlice,
+  equalityFn?: (a: TSlice, b: TSlice) => boolean
+): TSlice {
+  return useStoreSelector<SessionRecorderState, TSlice>(
+    sessionRecorderStore,
+    selector,
+    equalityFn
+  );
+}
+
+export function useSessionRecordingState() {
+  return useSessionRecorderStore<SessionState | null>((s) => s.sessionState);
+}
+
+export function useSessionType() {
+  return useSessionRecorderStore<SessionType | null>((s) => s.sessionType);
+}
+
+export function useIsInitialized() {
+  return useSessionRecorderStore<boolean>((s) => s.isInitialized);
+}
+
+export function useWidgetModalVisible() {
+  return useSessionRecorderStore<boolean>((s) => s.isWidgetModalVisible);
+}

package/src/context/useStoreSelector.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from 'react';
+import { type Store } from '../utils/createStore';
+import { shallowEqual } from '../utils/shallowEqual';
+
+export function useStoreSelector<TState extends object, TSlice>(
+  store: Store<TState>,
+  selector: (state: TState) => TSlice,
+  equalityFn: (a: TSlice, b: TSlice) => boolean = Object.is
+): TSlice {
+  const latestSelectorRef = useRef(selector);
+  const latestEqualityRef = useRef(equalityFn);
+  latestSelectorRef.current = selector;
+  latestEqualityRef.current = equalityFn;
+
+  const [slice, setSlice] = useState<TSlice>(() =>
+    latestSelectorRef.current(store.getState())
+  );
+
+  useEffect(() => {
+    function handleChange(nextState: TState, prevState: TState) {
+      const nextSlice = latestSelectorRef.current(nextState);
+      const prevSlice = latestSelectorRef.current(prevState);
+      if (!latestEqualityRef.current(nextSlice, prevSlice)) {
+        setSlice(nextSlice);
+      }
+    }
+    const unsubscribe = store.subscribe(handleChange);
+    // Sync once in case changed between render and effect
+    handleChange(store.getState(), store.getState());
+    return unsubscribe;
+  }, [store]);
+
+  return slice;
+}
+
+export const shallow = shallowEqual;

package/src/index.ts

@@ -0,0 +1,13 @@
+import './patch';
+import SessionRecorder from './session-recorder';
+export * from '@multiplayer-app/session-recorder-common';
+export * from './context/SessionRecorderContext';
+export * from './context/useSessionRecorderStore';
+
+// Export TurboModule spec for codegen
+export * from './SessionRecorderNativeSpec';
+
+// Export the class for type checking
+export { SessionRecorder };
+// Export the instance as default
+export default SessionRecorder;

package/src/native/SessionRecorderNative.ts

@@ -0,0 +1,120 @@
+import { Platform, NativeEventEmitter } from 'react-native';
+import SessionRecorderNative, { type MaskingOptions, type Spec } from '../SessionRecorderNativeSpec';
+
+
+// Check if we're on web platform
+const isWeb = Platform.OS === 'web';
+
+// Get the Turbo Module
+let eventEmitter = new NativeEventEmitter(SessionRecorderNative as any);
+
+
+// Validate that the native module is available
+if (!SessionRecorderNative && !isWeb) {
+  console.warn(
+    'SessionRecorderNative Turbo Module is not available. Auto-linking may not have completed yet.'
+  );
+} else if (isWeb) {
+  console.info(
+    'SessionRecorderNative: Running on web platform, native module disabled'
+  );
+}
+
+// Create a safe wrapper that handles web platform
+const SafeSessionRecorderNative: Spec = {
+  async captureAndMask(): Promise<string> {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform');
+    }
+    return SessionRecorderNative.captureAndMask();
+  },
+
+  async captureAndMaskWithOptions(options: MaskingOptions): Promise<string> {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform');
+    }
+    return SessionRecorderNative.captureAndMaskWithOptions(options);
+  },
+
+  async startGestureRecording(): Promise<void> {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform');
+    }
+    return SessionRecorderNative.startGestureRecording();
+  },
+
+  async stopGestureRecording(): Promise<void> {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform');
+    }
+    return SessionRecorderNative.stopGestureRecording();
+  },
+
+  async isGestureRecordingActive(): Promise<boolean> {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform');
+    }
+    return SessionRecorderNative.isGestureRecordingActive();
+  },
+
+  setGestureCallback(callback: (event: any) => void): void {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform');
+    }
+    // Native side will also invoke callback if provided; also subscribe to events here
+    try {
+      SessionRecorderNative.setGestureCallback(callback as any);
+    } catch { }
+    eventEmitter?.removeAllListeners('onGestureDetected');
+    eventEmitter?.addListener('onGestureDetected', callback);
+  },
+
+  recordGesture(gestureType: string, x: number, y: number, target?: string, metadata?: any): void {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform');
+    }
+    SessionRecorderNative.recordGesture(gestureType, x, y, target, metadata);
+  },
+
+  addListener(_eventName: string): void {
+    // Required for RN event emitter contracts
+  },
+
+  removeListeners(_count: number): void {
+    // Required for RN event emitter contracts
+  },
+};
+
+export interface NativeGestureEvent {
+  type:
+  | 'tap'
+  | 'pan_start'
+  | 'pan_move'
+  | 'pan_end'
+  | 'long_press'
+  | 'pinch'
+  | 'swipe';
+  timestamp: number;
+  x: number;
+  y: number;
+  target?: string;
+  targetInfo?: {
+    identifier: string;
+    label?: string;
+    role?: string;
+    testId?: string;
+    text?: string;
+  };
+  metadata?: {
+    pressure?: number;
+    velocity?: number;
+    scale?: number;
+    direction?: string;
+    distance?: number;
+  };
+}
+
+export default SafeSessionRecorderNative;
+
+// Export event emitter for gesture events to maintain previous API
+export const gestureEventEmitter = eventEmitter;

package/src/native/index.ts

@@ -0,0 +1,5 @@
+export {
+  default as SessionRecorderNative,
+  gestureEventEmitter,
+  type NativeGestureEvent,
+} from './SessionRecorderNative';