@multiplayer-app/session-recorder-react-native 0.0.1-beta.3 → 0.0.1-beta.4

package/src/components/SessionRecorderWidget/SessionRecorderWidget.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo, useState } from 'react'
+import { Alert } from 'react-native'
+import { SessionState } from '../../types'
+import { SessionType } from '@multiplayer-app/session-recorder-common'
+import { useSessionRecorder } from '../../context/SessionRecorderContext'
+import FloatingButton from './FloatingButton'
+import ModalContainer from './ModalContainer'
+import InitialPopover from './InitialPopover'
+import FinalPopover from './FinalPopover'
+
+interface SessionRecorderWidgetProps {}
+
+const SessionRecorderWidget: React.FC<SessionRecorderWidgetProps> = () => {
+  const { sessionState, instance } = useSessionRecorder()
+  const [isModalVisible, setIsModalVisible] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  // Get configuration from instance
+  const config = instance.config
+  const textOverrides = config.widgetTextOverrides
+  const showContinuousRecording = config.showContinuousRecording
+
+  const openModal = () => {
+    setIsModalVisible(true)
+  }
+
+  const closeModal = () => {
+    setIsModalVisible(false)
+  }
+
+  const onStartRecording = async (sessionType: SessionType) => {
+    try {
+      instance.start(sessionType)
+      closeModal()
+    } catch (error) {
+      Alert.alert('Error', 'Failed to start recording')
+    }
+  }
+
+  const onStopRecording = async (comment: string) => {
+    try {
+      setIsSubmitting(true)
+      await instance.stop(comment)
+      closeModal()
+      Alert.alert('Success', 'Session saved successfully')
+    } catch (error) {
+      Alert.alert('Error', 'Failed to save session')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const onCancelSession = async () => {
+    try {
+      await instance.cancel()
+      closeModal()
+    } catch (error) {
+      Alert.alert('Error', 'Failed to cancel session')
+    }
+  }
+
+  const onSaveContinuousSession = async () => {
+    try {
+      setIsSubmitting(true)
+      await instance.save()
+      closeModal()
+      Alert.alert('Success', 'Continuous session saved successfully')
+    } catch (error) {
+      Alert.alert('Error', 'Failed to save continuous session')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const renderModalContent = useMemo(() => {
+    if (sessionState === SessionState.started || sessionState === SessionState.paused) {
+      return (
+        <FinalPopover
+          isSubmitting={isSubmitting}
+          textOverrides={textOverrides}
+          onClose={closeModal}
+          onStopRecording={onStopRecording}
+          onCancelSession={onCancelSession}
+        />
+      )
+    }
+    return (
+      <InitialPopover
+        isSubmitting={isSubmitting}
+        textOverrides={textOverrides}
+        showContinuousRecording={showContinuousRecording}
+        onClose={closeModal}
+        onStartRecording={onStartRecording}
+        onSaveContinuousSession={onSaveContinuousSession}
+      />
+    )
+  }, [sessionState, isSubmitting, textOverrides, showContinuousRecording])
+
+  return (
+    <>
+      <FloatingButton sessionState={sessionState} onPress={openModal} />
+      <ModalContainer isVisible={isModalVisible} onClose={closeModal}>
+        {renderModalContent}
+      </ModalContainer>
+    </>
+  )
+}
+
+export default SessionRecorderWidget

package/src/components/SessionRecorderWidget/icons.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import Svg, { Path, Circle } from 'react-native-svg'
+
+interface IconProps {
+  size?: number
+  color?: string
+}
+
+export const RecordIcon: React.FC<IconProps> = ({ size = 19, color = 'white' }) => (
+  <Svg width={size} height={size} viewBox='0 0 19 19' fill='none'>
+    <Path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M6.68926 5.30356C6.56568 5.38721 6.39976 5.37561 6.29459 5.26937L3.58782 2.53477C3.46424 2.40992 3.47196 2.20492 3.60862 2.09483C5.2319 0.786982 7.28494 0 9.51866 0C11.7535 0 13.8066 0.787042 15.4308 2.09586C15.5674 2.20596 15.5752 2.41091 15.4516 2.53577L12.7468 5.26931C12.6416 5.37558 12.4757 5.38719 12.3521 5.30353C11.5393 4.75345 10.571 4.42281 9.52066 4.42281C8.47036 4.42281 7.50203 4.75346 6.68926 5.30356ZM16.4926 3.4303C16.6163 3.30527 16.8197 3.31303 16.9288 3.45121C18.2224 5.08933 19.0001 7.15932 19.0001 9.4116C19.0001 11.6671 18.2204 13.7392 16.9238 15.3785C16.8147 15.5165 16.6114 15.5242 16.4877 15.3992L13.7872 12.6701C13.682 12.5638 13.6708 12.3962 13.7538 12.2716C14.3006 11.451 14.6291 10.4727 14.6291 9.4116C14.6291 8.35454 14.3016 7.37925 13.756 6.56083C13.6728 6.43616 13.6841 6.26857 13.7893 6.16224L16.4926 3.4303ZM5.21676 12.6712C5.322 12.5649 5.3333 12.3974 5.2502 12.2727C4.70331 11.4522 4.374 10.4737 4.374 9.41184C4.374 8.35469 4.70232 7.37949 5.24808 6.56106C5.33123 6.43637 5.31996 6.26872 5.2147 6.16241L2.50855 3.4293C2.38482 3.30434 2.18146 3.31213 2.07236 3.45028C0.77864 5.08841 0 7.15845 0 9.41184C0 11.6684 0.78066 13.7406 2.07831 15.3799C2.18749 15.5178 2.39066 15.5255 2.51429 15.4006L5.21676 12.6712ZM12.3323 13.707C12.4559 13.6231 12.6221 13.6346 12.7273 13.741L15.4277 16.4691C15.5513 16.594 15.5435 16.7991 15.4068 16.9091C13.7837 18.215 11.7327 19 9.49998 19C7.2693 19 5.21837 18.2159 3.59619 16.9102C3.45943 16.8001 3.45169 16.595 3.57533 16.4702L6.27769 13.7409C6.38296 13.6346 6.54906 13.6231 6.67267 13.707C7.48459 14.2577 8.45278 14.5883 9.50198 14.5883C10.5522 14.5883 11.5204 14.2578 12.3323 13.707Z'
+      fill={color}
+    />
+  </Svg>
+)
+
+export const CapturingIcon: React.FC<IconProps> = ({ size = 24, color = 'white' }) => (
+  <Svg width={size} height={size} viewBox='0 0 24 24' fill='none'>
+    <Circle cx='12' cy='12' r='4' fill={color} />
+    <Circle cx='12' cy='12' r='7.5' stroke={color} strokeWidth='1' />
+    <Circle cx='12' cy='12' r='11.5' stroke={color} strokeWidth='1' opacity='0.2' />
+  </Svg>
+)
+
+export const PausedIcon: React.FC<IconProps> = ({ size = 24, color = 'white' }) => (
+  <Svg width={size} height={size} viewBox='0 0 24 24' fill='none'>
+    <Path d='M8 5V19M16 5V19' stroke={color} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+  </Svg>
+)
+
+export const CheckmarkIcon: React.FC<IconProps> = ({ size = 24, color = 'white' }) => (
+  <Svg width={size} height={size} viewBox='0 0 24 24' fill='none'>
+    <Path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M20.0481 6.35147C20.5168 6.8201 20.5168 7.5799 20.0481 8.04853L10.4481 17.6485C9.97951 18.1172 9.21971 18.1172 8.75108 17.6485L3.95108 12.8485C3.48245 12.3799 3.48245 11.6201 3.95108 11.1515C4.41971 10.6828 5.17951 10.6828 5.64814 11.1515L9.59961 15.1029L18.3511 6.35147C18.8197 5.88284 19.5795 5.88284 20.0481 6.35147Z'
+      fill={color}
+    />
+  </Svg>
+)

package/src/components/SessionRecorderWidget/index.ts

@@ -0,0 +1,3 @@
+import SessionRecorderWidget from "./SessionRecorderWidget";
+
+export default SessionRecorderWidget;

package/src/components/SessionRecorderWidget/styles.ts

@@ -0,0 +1,137 @@
+import { StyleSheet } from 'react-native'
+
+export const sharedStyles = StyleSheet.create({
+  // Popover styles
+  popoverContent: {
+    flex: 1,
+    paddingHorizontal: 20
+  },
+  popoverHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB'
+  },
+  logoText: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#007AFF'
+  },
+  closeButton: {
+    width: 30,
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  closeButtonText: {
+    fontSize: 24,
+    color: '#6B7280'
+  },
+  cancelButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+    backgroundColor: '#F3F4F6'
+  },
+  cancelButtonText: {
+    color: '#374151',
+    fontSize: 14,
+    fontWeight: '500'
+  },
+  popoverBody: {
+    flex: 1,
+    paddingVertical: 20
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#111827',
+    marginBottom: 12
+  },
+  description: {
+    fontSize: 16,
+    color: '#6B7280',
+    lineHeight: 24,
+    marginBottom: 24
+  },
+  popoverFooter: {
+    marginTop: 'auto',
+    paddingTop: 20
+  },
+  actionButton: {
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: 'center'
+  },
+  actionButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600'
+  },
+
+  // Continuous recording styles
+  continuousRecordingSection: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 20,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: '#F9FAFB',
+    borderRadius: 8
+  },
+  continuousRecordingLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#374151'
+  },
+  continuousOverlay: {
+    marginTop: 20,
+    padding: 16,
+    backgroundColor: '#FEF3C7',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#F59E0B'
+  },
+  continuousOverlayContent: {
+    marginBottom: 16
+  },
+  continuousOverlayTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#92400E',
+    marginBottom: 8
+  },
+  continuousOverlayDescription: {
+    fontSize: 14,
+    color: '#92400E',
+    lineHeight: 20
+  },
+
+  // Comment input styles
+  commentInput: {
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    color: '#374151',
+    backgroundColor: '#F9FAFB',
+    marginBottom: 24,
+    minHeight: 80
+  },
+
+  // Button color variants
+  startButton: {
+    backgroundColor: '#007AFF'
+  },
+  stopButton: {
+    backgroundColor: '#FF4444'
+  },
+  saveButton: {
+    backgroundColor: '#34C759'
+  }
+})

package/src/context/SessionRecorderContext.tsx

@@ -1,12 +1,13 @@
 import React, { createContext, useContext, PropsWithChildren, useState, useEffect, useRef } from 'react'
-import { Pressable, Text, View } from 'react-native'
 import { SessionRecorderOptions, SessionState } from '../types'
-import SessionRecorder from '../session-recorder'
 import sessionRecorder from '../session-recorder'
 import { ScreenRecorderView } from '../components/ScreenRecorderView'
+import SessionRecorderWidget from '../components/SessionRecorderWidget'
 
 interface SessionRecorderContextType {
-  instance: typeof SessionRecorder
+  instance: typeof sessionRecorder
+  isInitialized: boolean
+  sessionState: SessionState | null
 }
 
 const SessionRecorderContext = createContext<SessionRecorderContextType | null>(null)
@@ -16,52 +17,29 @@ export interface SessionRecorderProviderProps extends PropsWithChildren {
 }
 
 export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = ({ children, options }) => {
-  const [sessionState, setSessionState] = useState<SessionState | null>(null)
+  const [isInitialized, setIsInitialized] = useState(false)
+  const [sessionState, setSessionState] = useState<SessionState | null>(SessionState.stopped)
   const optionsRef = useRef<string>()
 
   useEffect(() => {
     const newOptions = JSON.stringify(options)
     if (optionsRef.current === JSON.stringify(options)) return
     optionsRef.current = newOptions
-    SessionRecorder.init(options)
+    sessionRecorder.init(options)
+    setIsInitialized(true)
   }, [options])
 
   useEffect(() => {
-    setSessionState(SessionRecorder.sessionState)
-    SessionRecorder.on('state-change', (state: SessionState) => {
+    setSessionState(sessionRecorder.sessionState)
+    sessionRecorder.on('state-change', (state: SessionState) => {
       setSessionState(state)
     })
   }, [])
 
-  const onToggleSession = () => {
-    if (SessionRecorder.sessionState === SessionState.started) {
-      SessionRecorder.stop()
-    } else {
-      SessionRecorder.start()
-    }
-  }
-
   return (
-    <SessionRecorderContext.Provider value={{ instance: sessionRecorder }}>
+    <SessionRecorderContext.Provider value={{ instance: sessionRecorder, sessionState, isInitialized }}>
       <ScreenRecorderView>{children}</ScreenRecorderView>
-      <Pressable onPress={onToggleSession}>
-        <View
-          style={{
-            position: 'absolute',
-            right: 0,
-            bottom: 100,
-            width: 48,
-            height: 48,
-            paddingTop: 16,
-            paddingLeft: 10,
-            backgroundColor: 'red',
-            borderTopLeftRadius: 24,
-            borderBottomLeftRadius: 24
-          }}
-        >
-          <Text style={{ color: 'white' }}>{sessionState === SessionState.started ? 'Stop' : 'Start'}</Text>
-        </View>
-      </Pressable>
+      {isInitialized && !!sessionRecorder.config.showWidget && <SessionRecorderWidget />}
     </SessionRecorderContext.Provider>
   )
 }

package/src/index.ts

@@ -3,15 +3,7 @@ import SessionRecorder from './session-recorder'
 export * from '@multiplayer-app/session-recorder-common'
 export * from './context/SessionRecorderContext'
 
-// Export platform utilities including app metadata configuration
-export {
-  detectPlatform,
-  isExpoEnvironment,
-  configureAppMetadata,
-  getPlatformAttributes,
-  getConfiguredAppMetadata,
-} from './utils/platform'
-
+// Export the class for type checking
 export { SessionRecorder }
 // Export the instance as default
 export default SessionRecorder

package/src/patch/xhr.ts

@@ -17,10 +17,10 @@ export const setMaxCapturingHttpPayloadSize = (_maxCapturingHttpPayloadSize: num
   maxCapturingHttpPayloadSize = _maxCapturingHttpPayloadSize
 }
 
-export const setShouldRecordHttpData = (shouldRecordBodyParam: boolean, shouldRecordHeaders: boolean) => {
+export const setShouldRecordHttpData = (shouldRecordBody: boolean, shouldRecordHeaders: boolean) => {
   recordRequestHeaders = shouldRecordHeaders
   recordResponseHeaders = shouldRecordHeaders
-  shouldRecordBody = shouldRecordBodyParam
+  shouldRecordBody = shouldRecordBody
 }
 
 function _tryReadXHRBody({
@@ -30,6 +30,7 @@ function _tryReadXHRBody({
   body: any | null | undefined
   url: string | URL | RequestInfo
 }): string | null {
+
   if (isNullish(body)) {
     return null
   }
@@ -38,14 +39,13 @@ function _tryReadXHRBody({
     return body
   }
 
-
   if (isFormData(body)) {
     return formDataToQuery(body)
   }
 
   if (isObject(body)) {
     try {
-      return JSON.stringify(body)
+      return JSON.stringify({ ...body })
     } catch {
       return '[XHR] Failed to stringify response object'
     }
@@ -104,11 +104,11 @@ function _tryReadXHRBody({
         return
       }
 
-
       // @ts-ignore
       const responseHeaders: Record<string, string> = {}
-      const rawHeaders = xhr.getAllResponseHeaders()
-      const headers = rawHeaders.trim().split(/[\r\n]+/)
+      const rawHeaders = xhr.getAllResponseHeaders() || ''
+      const headers = rawHeaders.trim().split(/[\r\n]+/).filter(Boolean)
+
       headers.forEach((line) => {
         const parts = line.split(': ')
         const header = parts.shift()

package/src/services/storage.service.ts

@@ -1,12 +1,14 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import { SessionType } from '@multiplayer-app/session-recorder-common'
 import { ISession, SessionState } from '../types'
+import { logger } from '../utils'
 
 interface CacheData {
   sessionId: string | null
   sessionType: SessionType | null
   sessionState: SessionState | null
   sessionObject: ISession | null
+  floatingButtonPosition: { x: number; y: number } | null
 }
 
 export class StorageService {
@@ -14,29 +16,42 @@ export class StorageService {
   private static readonly SESSION_TYPE_KEY = 'session_type'
   private static readonly SESSION_STATE_KEY = 'session_state'
   private static readonly SESSION_OBJECT_KEY = 'session_object'
+  private static readonly FLOATING_BUTTON_POSITION_KEY = 'floating_button_position'
 
   private static cache: CacheData = {
     sessionId: null,
     sessionType: null,
     sessionState: null,
     sessionObject: null,
+    floatingButtonPosition: null,
   }
 
   private static cacheInitialized = false
+  private static instance: StorageService | null = null
+  private static positionSaveTimeout: NodeJS.Timeout | null = null
 
-  constructor() {
-    StorageService.initialize()
+  private constructor() {
+    // Private constructor for singleton
+  }
+
+  static getInstance(): StorageService {
+    if (!StorageService.instance) {
+      StorageService.instance = new StorageService()
+      StorageService.initialize()
+    }
+    return StorageService.instance
   }
 
   private static async initializeCache(): Promise<void> {
     if (StorageService.cacheInitialized) return
 
     try {
-      const [sessionId, sessionType, sessionState, sessionObject] = await Promise.all([
+      const [sessionId, sessionType, sessionState, sessionObject, floatingButtonPosition] = await Promise.all([
         AsyncStorage.getItem(StorageService.SESSION_ID_KEY),
         AsyncStorage.getItem(StorageService.SESSION_TYPE_KEY),
         AsyncStorage.getItem(StorageService.SESSION_STATE_KEY),
         AsyncStorage.getItem(StorageService.SESSION_OBJECT_KEY),
+        AsyncStorage.getItem(StorageService.FLOATING_BUTTON_POSITION_KEY),
       ])
 
       StorageService.cache = {
@@ -44,6 +59,7 @@ export class StorageService {
         sessionType: sessionType as SessionType | null,
         sessionState: sessionState as SessionState | null,
         sessionObject: sessionObject ? JSON.parse(sessionObject) : null,
+        floatingButtonPosition: floatingButtonPosition ? JSON.parse(floatingButtonPosition) : null,
       }
       StorageService.cacheInitialized = true
     } catch (error) {
@@ -121,6 +137,7 @@ export class StorageService {
     try {
       // Clear cache immediately
       StorageService.cache = {
+        ...StorageService.cache,
         sessionId: null,
         sessionType: null,
         sessionState: null,
@@ -142,7 +159,7 @@ export class StorageService {
     }
   }
 
-  getAllSessionData(): CacheData {
+  getAllSessionData(): Omit<CacheData, 'floatingButtonPosition'> {
     return {
       sessionId: StorageService.cache.sessionId,
       sessionType: StorageService.cache.sessionType,
@@ -151,6 +168,30 @@ export class StorageService {
     }
   }
 
+  saveFloatingButtonPosition(position: { x: number; y: number }): void {
+    try {
+      StorageService.cache.floatingButtonPosition = position
+
+      // Debounce AsyncStorage writes to avoid excessive I/O
+      if (StorageService.positionSaveTimeout) {
+        clearTimeout(StorageService.positionSaveTimeout)
+      }
+
+      StorageService.positionSaveTimeout = setTimeout(() => {
+        AsyncStorage.setItem(StorageService.FLOATING_BUTTON_POSITION_KEY, JSON.stringify(position)).catch(error => {
+          logger.error('StorageService', 'Failed to persist floating button position', error)
+        })
+      }, 100) // 100ms debounce
+    } catch (error) {
+      logger.error('StorageService', 'Failed to save floating button position', error)
+      throw error
+    }
+  }
+
+  getFloatingButtonPosition(): { x: number; y: number } | null {
+    return StorageService.cache.floatingButtonPosition
+  }
+
   // Initialize cache on first use - call this method when the service is first used
   static async initialize(): Promise<void> {
     await StorageService.initializeCache()

package/src/session-recorder.ts

@@ -16,7 +16,7 @@ import {
 } from './types'
 import { getFormattedDate, isSessionActive, getNavigatorInfo } from './utils'
 import { setMaxCapturingHttpPayloadSize, setShouldRecordHttpData } from './patch/xhr'
-import { DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE, getSessionRecorderConfig } from './config'
+import { BASE_CONFIG, DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE, getSessionRecorderConfig } from './config'
 
 import { StorageService } from './services/storage.service'
 import { ApiService, StartSessionRequest, StopSessionRequest } from './services/api.service'
@@ -30,11 +30,11 @@ type SessionRecorderEvents =
 
 class SessionRecorder extends Observable<SessionRecorderEvents> implements ISessionRecorder, EventRecorder {
   private _isInitialized = false
-  private _configs: SessionRecorderConfigs | null = null
+  private _configs: SessionRecorderConfigs
   private _apiService = new ApiService()
   private _tracer = new TracerReactNativeSDK()
   private _recorder = new RecorderReactNativeSDK()
-  private _storageService = new StorageService()
+  private _storageService = StorageService.getInstance()
   private _startRequestController: AbortController | null = null
 
   // Session ID and state are stored in AsyncStorage
@@ -112,11 +112,16 @@ class SessionRecorder extends Observable<SessionRecorderEvents> implements ISess
     return null
   }
 
+  public get config(): SessionRecorderConfigs {
+    return this._configs
+  }
+
   /**
    * Initialize debugger with default or custom configurations
    */
   constructor() {
     super()
+    this._configs = BASE_CONFIG
     // Initialize with stored session data if available
     StorageService.initialize()
   }
@@ -154,6 +159,7 @@ class SessionRecorder extends Observable<SessionRecorderEvents> implements ISess
     this._isInitialized = true
     this._checkOperation('init')
     await this._loadStoredSessionData()
+
     setMaxCapturingHttpPayloadSize(this._configs.maxCapturingHttpPayloadSize || DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE)
     setShouldRecordHttpData(!this._configs.captureBody, this._configs.captureHeaders)