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

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,10 @@
+import './patch';
+import SessionRecorder from './session-recorder';
+export * from '@multiplayer-app/session-recorder-common';
+export * from './context/SessionRecorderContext';
+export * from './context/useSessionRecorderStore';
+
+// Export the class for type checking
+export { SessionRecorder };
+// Export the instance as default
+export default SessionRecorder;

package/src/native/SessionRecorderNative.ts

@@ -0,0 +1,180 @@
+import {
+  NativeEventEmitter,
+  Platform,
+  TurboModuleRegistry,
+  type TurboModule,
+} from 'react-native';
+
+export interface Spec extends TurboModule {
+  /**
+   * Capture the current screen and apply masking to sensitive elements
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMask(): Promise<string>;
+
+  /**
+   * Capture the current screen and apply masking with custom options
+   * @param options Custom masking options
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMaskWithOptions(options: MaskingOptions): Promise<string>;
+
+  // Gesture recording APIs
+  startGestureRecording(): Promise<void>;
+  stopGestureRecording(): Promise<void>;
+  isGestureRecordingActive(): Promise<boolean>;
+  setGestureCallback(callback: (event: any) => void): void;
+}
+
+export interface MaskingOptions {
+  /** Quality of the captured image (0.1 to 1.0, default: 0.3 for smaller file size) */
+  quality?: number;
+  /** Scale of the captured image (0.1 to 1.0, default: 1.0) */
+  scale?: number;
+  /** Whether to mask text inputs (UITextField, UITextView, React Native text components) */
+  maskTextInputs?: boolean;
+  /** Whether to mask images (UIImageView, React Native Image components) */
+  maskImages?: boolean;
+  /** Whether to mask buttons (UIButton) */
+  maskButtons?: boolean;
+  /** Whether to mask labels (UILabel) */
+  maskLabels?: boolean;
+  /** Whether to mask web views (WKWebView) */
+  maskWebViews?: boolean;
+  /** Whether to mask sandboxed views (system views that don't belong to current process) */
+  maskSandboxedViews?: boolean;
+}
+
+export interface SessionRecorderNativeModule {
+  /**
+   * Capture the current screen and apply masking to sensitive elements
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMask(): Promise<string>;
+
+  /**
+   * Capture the current screen and apply masking with custom options
+   * @param options Custom masking options
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMaskWithOptions(options: MaskingOptions): Promise<string>;
+
+  // Gesture recording APIs
+  startGestureRecording(): Promise<void>;
+  stopGestureRecording(): Promise<void>;
+  isGestureRecordingActive(): Promise<boolean>;
+  setGestureCallback(callback: (event: any) => void): void;
+}
+
+// Check if we're on web platform
+const isWeb = Platform.OS === 'web';
+
+// Get the Turbo Module
+let SessionRecorderNative: Spec | null = null;
+let eventEmitter: NativeEventEmitter | null = null;
+
+if (!isWeb) {
+  try {
+    SessionRecorderNative = TurboModuleRegistry.getEnforcing<Spec>(
+      'SessionRecorderNative'
+    );
+    eventEmitter = new NativeEventEmitter(SessionRecorderNative as any);
+  } catch (error) {
+    console.warn('Failed to access SessionRecorderNative Turbo Module:', error);
+  }
+}
+
+// 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);
+  },
+};
+
+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';