@multiplayer-app/session-recorder-react-native 0.0.1-beta.7 → 0.0.1-beta.8

package/scripts/generate-app-metadata.js

@@ -1,173 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Build script to automatically extract app metadata from configuration files
- * This runs without developer intervention and generates app-metadata.ts
- */
-
-const fs = require('fs')
-const path = require('path')
-
-function findProjectRoot() {
-  let currentDir = process.cwd()
-
-  // Look for package.json going up the directory tree
-  while (currentDir !== path.dirname(currentDir)) {
-    if (fs.existsSync(path.join(currentDir, 'package.json'))) {
-      return currentDir
-    }
-    currentDir = path.dirname(currentDir)
-  }
-
-  return process.cwd()
-}
-
-function extractAppMetadata(projectRoot) {
-  const metadata = {
-    name: undefined,
-    version: undefined,
-    bundleId: undefined,
-    buildNumber: undefined,
-    displayName: undefined,
-  }
-
-  try {
-    // Method 1: Try app.json
-    const appJsonPath = path.join(projectRoot, 'app.json')
-    if (fs.existsSync(appJsonPath)) {
-      const appConfig = JSON.parse(fs.readFileSync(appJsonPath, 'utf8'))
-
-      metadata.name = appConfig.name || appConfig.displayName
-      metadata.version = appConfig.version
-      metadata.displayName = appConfig.displayName
-
-      // Extract bundle ID from platform-specific configs
-      if (appConfig.ios?.bundleIdentifier) {
-        metadata.bundleId = appConfig.ios.bundleIdentifier
-      } else if (appConfig.android?.package) {
-        metadata.bundleId = appConfig.android.package
-      }
-
-      if (appConfig.ios?.buildNumber) {
-        metadata.buildNumber = appConfig.ios.buildNumber.toString()
-      } else if (appConfig.android?.versionCode) {
-        metadata.buildNumber = appConfig.android.versionCode.toString()
-      }
-
-      console.log('✅ Extracted metadata from app.json')
-      return metadata
-    }
-
-    // Method 2: Try app.config.js
-    const appConfigJsPath = path.join(projectRoot, 'app.config.js')
-    if (fs.existsSync(appConfigJsPath)) {
-      try {
-        // Clear require cache to get fresh config
-        delete require.cache[require.resolve(appConfigJsPath)]
-        const appConfig = require(appConfigJsPath)
-
-        metadata.name = appConfig.name || appConfig.displayName
-        metadata.version = appConfig.version
-        metadata.displayName = appConfig.displayName
-
-        // Extract bundle ID from platform-specific configs
-        if (appConfig.ios?.bundleIdentifier) {
-          metadata.bundleId = appConfig.ios.bundleIdentifier
-        } else if (appConfig.android?.package) {
-          metadata.bundleId = appConfig.android.package
-        }
-
-        if (appConfig.ios?.buildNumber) {
-          metadata.buildNumber = appConfig.ios.buildNumber.toString()
-        } else if (appConfig.android?.versionCode) {
-          metadata.buildNumber = appConfig.android.versionCode.toString()
-        }
-
-        console.log('✅ Extracted metadata from app.config.js')
-        return metadata
-      } catch (error) {
-        console.warn('⚠️ Could not parse app.config.js:', error.message)
-      }
-    }
-
-    // Method 3: Fallback to package.json
-    const packageJsonPath = path.join(projectRoot, 'package.json')
-    if (fs.existsSync(packageJsonPath)) {
-      const packageConfig = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
-
-      metadata.name = packageConfig.name
-      metadata.version = packageConfig.version
-
-      console.log('✅ Extracted metadata from package.json')
-      return metadata
-    }
-
-  } catch (error) {
-    console.warn('⚠️ Error extracting app metadata:', error.message)
-  }
-
-  return metadata
-}
-
-function generateAppMetadataFile(metadata, outputPath) {
-  const content = `/**
- * Auto-generated app metadata
- * This file is generated at build time to provide app metadata without developer intervention
- */
-
-// This file is automatically generated by the build process
-// It extracts metadata from app.json, app.config.js, or package.json
-
-export interface AppMetadata {
-  name?: string
-  version?: string
-  bundleId?: string
-  buildNumber?: string
-  displayName?: string
-}
-
-// Auto-detected values from project configuration files
-export const APP_METADATA: AppMetadata = {
-  name: ${metadata.name ? `'${metadata.name}'` : 'undefined'},
-  version: ${metadata.version ? `'${metadata.version}'` : 'undefined'},
-  bundleId: ${metadata.bundleId ? `'${metadata.bundleId}'` : 'undefined'},
-  buildNumber: ${metadata.buildNumber ? `'${metadata.buildNumber}'` : 'undefined'},
-  displayName: ${metadata.displayName ? `'${metadata.displayName}'` : 'undefined'},
-}
-
-/**
- * Get auto-detected app metadata
- */
-export function getAutoDetectedAppMetadata(): AppMetadata {
-  return { ...APP_METADATA }
-}
-`
-
-  fs.writeFileSync(outputPath, content, 'utf8')
-  console.log(`✅ Generated app-metadata.ts`)
-}
-
-function main() {
-  const projectRoot = findProjectRoot()
-  console.log(`🔍 Looking for app metadata in: ${projectRoot}`)
-
-  const metadata = extractAppMetadata(projectRoot)
-
-  // Show what was detected
-  console.log('📋 Detected metadata:')
-  Object.entries(metadata).forEach(([key, value]) => {
-    if (value) {
-      console.log(`  ${key}: ${value}`)
-    }
-  })
-
-  // Generate the TypeScript file
-  const outputPath = path.join(__dirname, '../src/utils/app-metadata.ts')
-  generateAppMetadataFile(metadata, outputPath)
-}
-
-if (require.main === module) {
-  main()
-}
-
-module.exports = { extractAppMetadata, generateAppMetadataFile }

package/src/components/GestureCaptureWrapper/GestureCaptureWrapper.tsx

@@ -1,86 +0,0 @@
-import React, { ReactNode, useCallback, useMemo } from 'react'
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
-
-export interface GestureCaptureWrapperProps {
-  children: ReactNode
-  onGestureRecord: (gestureType: string, data: any) => void
-}
-
-export const GestureCaptureWrapper: React.FC<GestureCaptureWrapperProps> = ({ children, onGestureRecord }) => {
-  const recordGesture = useCallback(
-    (gestureType: string, data: any) => {
-      // Record with session recorder
-      onGestureRecord(gestureType, data)
-    },
-    [onGestureRecord]
-  )
-
-  // Create tap gesture
-  const tapGesture = useMemo(() => {
-    return Gesture.Tap()
-      .runOnJS(true)
-      .onStart((event) => {
-        recordGesture('tap', {
-          x: event.x,
-          y: event.y,
-          timestamp: Date.now()
-        })
-      })
-  }, [recordGesture])
-
-  // Create pan gesture (for swipes and drags)
-  const panGesture = useMemo(() => {
-    return Gesture.Pan()
-      .runOnJS(true)
-      .onStart((event) => {
-        recordGesture('pan_start', {
-          x: event.x,
-          y: event.y,
-          timestamp: Date.now()
-        })
-      })
-      .onUpdate((event) => {
-        recordGesture('pan_update', {
-          x: event.x,
-          y: event.y,
-          translationX: event.translationX,
-          translationY: event.translationY,
-          velocityX: event.velocityX,
-          velocityY: event.velocityY,
-          timestamp: Date.now()
-        })
-      })
-      .onEnd((event) => {
-        recordGesture('pan_end', {
-          x: event.x,
-          y: event.y,
-          translationX: event.translationX,
-          translationY: event.translationY,
-          velocityX: event.velocityX,
-          velocityY: event.velocityY,
-          timestamp: Date.now()
-        })
-      })
-  }, [recordGesture])
-
-  // Create long press gesture
-  const longPressGesture = useMemo(() => {
-    return Gesture.LongPress()
-      .runOnJS(true)
-      .minDuration(500)
-      .onStart((event) => {
-        recordGesture('long_press', {
-          x: event.x,
-          y: event.y,
-          duration: 500,
-          timestamp: Date.now()
-        })
-      })
-  }, [recordGesture])
-
-  return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <GestureDetector gesture={Gesture.Simultaneous(tapGesture, panGesture, longPressGesture)}>{children}</GestureDetector>
-    </GestureHandlerRootView>
-  )
-}

package/src/components/GestureCaptureWrapper/index.ts

@@ -1 +0,0 @@
-export * from "./GestureCaptureWrapper";

package/src/components/ScreenRecorderView/ScreenRecorderView.tsx

@@ -1,72 +0,0 @@
-import SessionRecorder from '@multiplayer-app/session-recorder-react-native'
-import React, { PropsWithChildren, useCallback } from 'react'
-import { View } from 'react-native'
-import { SessionState } from '../../types'
-import { logger } from '../../utils'
-import { GestureCaptureWrapper } from '../GestureCaptureWrapper'
-
-interface ScreenRecorderViewProps extends PropsWithChildren {}
-
-export const ScreenRecorderView = ({ children }: ScreenRecorderViewProps) => {
-  // Set up gesture recording callback
-  const handleGestureRecord = useCallback((gestureType: string, data: any) => {
-    if (SessionRecorder.sessionState !== SessionState.started) {
-      logger.debug('SessionRecorderContext', 'Gesture recording skipped', {
-        client: !!SessionRecorder.sessionState,
-        sessionState: SessionRecorder.sessionState
-      })
-      return
-    }
-    logger.debug('SessionRecorderContext', 'Gesture recorded', { gestureType, data })
-    try {
-      // Record gesture as appropriate touch events
-      switch (gestureType) {
-        case 'tap':
-          // For tap, record both touch start and end
-          logger.debug('SessionRecorderContext', 'Recording tap as touch start + end')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_start':
-          logger.debug('SessionRecorderContext', 'Recording pan_start as touch start')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_update':
-          logger.debug('SessionRecorderContext', 'Recording pan_update as touch move')
-          SessionRecorder.recordTouchMove?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_end':
-          logger.debug('SessionRecorderContext', 'Recording pan_end as touch end')
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'long_press':
-          logger.debug('SessionRecorderContext', 'Recording long_press as touch start + end')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-        default:
-      }
-    } catch (error) {
-      logger.error('SessionRecorderContext', 'Failed to record gesture event', error)
-    }
-  }, [])
-
-  // Callback ref to set the viewshot ref immediately when available
-  const setViewShotRef = (ref: View | null) => {
-    if (ref) {
-      SessionRecorder.setViewShotRef?.(ref)
-    }
-  }
-
-  return (
-    <GestureCaptureWrapper onGestureRecord={handleGestureRecord}>
-      <View ref={setViewShotRef} style={{ flex: 1 }}>
-        {children}
-      </View>
-    </GestureCaptureWrapper>
-  )
-}

package/src/components/ScreenRecorderView/index.ts

@@ -1 +0,0 @@
-export * from "./ScreenRecorderView";

package/src/components/SessionRecorderWidget/FinalPopover.tsx

@@ -1,62 +0,0 @@
-import React, { useState } from 'react'
-import { View, Text, Pressable, TextInput, Alert } from 'react-native'
-import { WidgetTextOverridesConfig } from '../../types'
-import { sharedStyles } from './styles'
-import ModalHeader from './ModalHeader'
-
-interface FinalPopoverProps {
-  textOverrides: WidgetTextOverridesConfig
-  onStopRecording: (comment: string) => void
-  onCancelSession: () => void
-  onClose: () => void
-  isSubmitting: boolean
-}
-
-const FinalPopover: React.FC<FinalPopoverProps> = ({ textOverrides, onStopRecording, onCancelSession, isSubmitting }) => {
-  const [comment, setComment] = useState('')
-
-  const handleStopRecording = async () => {
-    try {
-      await onStopRecording(comment)
-    } catch (error) {
-      Alert.alert('Error', 'Failed to save session')
-    }
-  }
-
-  return (
-    <View style={sharedStyles.popoverContent}>
-      <ModalHeader>
-        <Pressable onPress={onCancelSession} style={sharedStyles.cancelButton}>
-          <Text style={sharedStyles.cancelButtonText}>{textOverrides.cancelButtonText}</Text>
-        </Pressable>
-      </ModalHeader>
-
-      <View style={sharedStyles.popoverBody}>
-        <Text style={sharedStyles.title}>{textOverrides.finalTitle}</Text>
-        <Text style={sharedStyles.description}>{textOverrides.finalDescription}</Text>
-
-        <TextInput
-          style={sharedStyles.commentInput}
-          placeholder={textOverrides.commentPlaceholder}
-          value={comment}
-          onChangeText={setComment}
-          multiline
-          numberOfLines={3}
-          textAlignVertical='top'
-        />
-
-        <View style={sharedStyles.popoverFooter}>
-          <Pressable
-            style={[sharedStyles.actionButton, sharedStyles.stopButton]}
-            onPress={handleStopRecording}
-            disabled={isSubmitting}
-          >
-            <Text style={sharedStyles.actionButtonText}>{isSubmitting ? 'Saving...' : textOverrides.saveButtonText}</Text>
-          </Pressable>
-        </View>
-      </View>
-    </View>
-  )
-}
-
-export default FinalPopover

package/src/components/SessionRecorderWidget/FloatingButton.tsx

@@ -1,136 +0,0 @@
-import React, { useRef, useEffect, useMemo } from 'react'
-import { StyleSheet, Platform, Animated, PanResponder, View, Dimensions } from 'react-native'
-import { SessionState } from '../../types'
-import { StorageService } from '../../services/storage.service'
-import { RecordIcon, CapturingIcon, PausedIcon } from './icons'
-
-interface FloatingButtonProps {
-  sessionState: SessionState | null
-  onPress: () => void
-}
-
-const buttonSize = 52
-const rightOffset = 20
-const topOffset = Platform.OS === 'ios' ? 60 : 40
-
-const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }) => {
-  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current
-  const lastPosition = useRef({ top: topOffset, right: rightOffset })
-  const storageService = useRef(StorageService.getInstance()).current
-
-  const screenBounds = useMemo(() => {
-    const { width, height } = Dimensions.get('window')
-
-    return {
-      minTop: topOffset,
-      maxTop: height - buttonSize,
-      minRight: 0,
-      maxRight: width - buttonSize
-    }
-  }, [])
-
-  // Load saved position on component mount
-  useEffect(() => {
-    const savedPosition = storageService.getFloatingButtonPosition()
-    if (savedPosition) {
-      const { width } = Dimensions.get('window')
-      const top = savedPosition.y
-      const right = width - savedPosition.x - buttonSize
-      lastPosition.current = { top, right }
-      position.setValue({ x: right, y: top })
-    } else {
-      position.setValue({ x: lastPosition.current.right, y: lastPosition.current.top })
-    }
-  }, [])
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponder: (evt, gestureState) => {
-        const distance = Math.sqrt(gestureState.dx * gestureState.dx + gestureState.dy * gestureState.dy)
-        return distance > 5
-      },
-      onPanResponderGrant: () => {
-        // Set the initial position for this gesture
-        position.setValue({ x: lastPosition.current.right, y: lastPosition.current.top })
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        // Calculate new position based on gesture movement
-        const newTop = lastPosition.current.top + gestureState.dy
-        const newRight = lastPosition.current.right - gestureState.dx
-
-        // Update position during drag
-        position.setValue({ x: newRight, y: newTop })
-      },
-      onPanResponderRelease: (e, gestureState) => {
-        // Check if this was actually a drag (significant movement)
-        const distance = Math.sqrt(gestureState.dx * gestureState.dx + gestureState.dy * gestureState.dy)
-
-        // If it was a tap (no significant movement), trigger onPress
-        if (distance <= 5) {
-          onPress()
-        } else {
-          // Calculate new position after dragging
-          const newTop = lastPosition.current.top + gestureState.dy
-          const newRight = lastPosition.current.right - gestureState.dx
-
-          // Clamp to screen bounds
-          const clampedTop = Math.max(screenBounds.minTop, Math.min(screenBounds.maxTop, newTop))
-          const clampedRight = Math.max(screenBounds.minRight, Math.min(screenBounds.maxRight, newRight))
-
-          // Update position
-          lastPosition.current = { top: clampedTop, right: clampedRight }
-          position.setValue({ x: clampedRight, y: clampedTop })
-
-          // Convert back to x,y coordinates for storage
-          const { width } = Dimensions.get('window')
-          const storagePosition = {
-            x: width - clampedRight - buttonSize,
-            y: clampedTop
-          }
-
-          // Persist position to AsyncStorage (debounced)
-          storageService.saveFloatingButtonPosition(storagePosition)
-        }
-      }
-    })
-  ).current
-
-  // Memoized button icon and color for performance
-  const content = useMemo(() => {
-    switch (sessionState) {
-      case SessionState.started:
-        return { icon: <CapturingIcon size={28} color='white' />, color: '#FF4444' }
-      case SessionState.paused:
-        return { icon: <PausedIcon size={28} color='white' />, color: '#FFA500' }
-      default:
-        return { icon: <RecordIcon size={28} color='#718096' />, color: '#ffffff' }
-    }
-  }, [sessionState])
-
-  return (
-    <Animated.View style={[styles.draggableButton, { top: position.y, right: position.x }]} {...panResponder.panHandlers}>
-      <View style={[styles.floatingButton, { backgroundColor: content.color }]}>{content.icon}</View>
-    </Animated.View>
-  )
-}
-
-const styles = StyleSheet.create({
-  draggableButton: {
-    position: 'absolute'
-  },
-  floatingButton: {
-    elevation: 8,
-    shadowRadius: 4,
-    width: buttonSize,
-    shadowColor: '#000',
-    height: buttonSize,
-    shadowOpacity: 0.25,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: buttonSize / 2,
-    shadowOffset: { width: 0, height: 2 }
-  }
-})
-
-export default FloatingButton

package/src/components/SessionRecorderWidget/InitialPopover.tsx

@@ -1,89 +0,0 @@
-import React, { useState } from 'react'
-import { View, Text, Pressable, Alert, Switch } from 'react-native'
-import { SessionType } from '@multiplayer-app/session-recorder-common'
-import { WidgetTextOverridesConfig } from '../../types'
-import { sharedStyles } from './styles'
-import ModalHeader from './ModalHeader'
-
-interface InitialPopoverProps {
-  textOverrides: WidgetTextOverridesConfig
-  showContinuousRecording: boolean
-  onStartRecording: (sessionType: SessionType) => void
-  onSaveContinuousSession: () => void
-  onClose: () => void
-  isSubmitting: boolean
-}
-
-const InitialPopover: React.FC<InitialPopoverProps> = ({
-  textOverrides,
-  showContinuousRecording,
-  onStartRecording,
-  onSaveContinuousSession,
-  onClose,
-  isSubmitting
-}) => {
-  const [continuousRecording, setContinuousRecording] = useState(false)
-
-  const handleStartRecording = async () => {
-    try {
-      const sessionType = continuousRecording ? SessionType.CONTINUOUS : SessionType.PLAIN
-      onStartRecording(sessionType)
-    } catch (error) {
-      Alert.alert('Error', 'Failed to start recording')
-    }
-  }
-
-  return (
-    <View style={sharedStyles.popoverContent}>
-      <ModalHeader />
-
-      <View style={sharedStyles.popoverBody}>
-        {showContinuousRecording && (
-          <View style={sharedStyles.continuousRecordingSection}>
-            <Text style={sharedStyles.continuousRecordingLabel}>{textOverrides.continuousRecordingLabel}</Text>
-            <Switch
-              value={continuousRecording}
-              onValueChange={setContinuousRecording}
-              trackColor={{ false: '#767577', true: '#81b0ff' }}
-              thumbColor={continuousRecording ? '#007AFF' : '#f4f3f4'}
-            />
-          </View>
-        )}
-
-        <Text style={sharedStyles.title}>
-          {showContinuousRecording ? textOverrides.initialTitleWithContinuous : textOverrides.initialTitleWithoutContinuous}
-        </Text>
-
-        <Text style={sharedStyles.description}>
-          {showContinuousRecording
-            ? textOverrides.initialDescriptionWithContinuous
-            : textOverrides.initialDescriptionWithoutContinuous}
-        </Text>
-
-        <View style={sharedStyles.popoverFooter}>
-          <Pressable style={[sharedStyles.actionButton, sharedStyles.startButton]} onPress={handleStartRecording}>
-            <Text style={sharedStyles.actionButtonText}>{textOverrides.startRecordingButtonText}</Text>
-          </Pressable>
-        </View>
-
-        {showContinuousRecording && continuousRecording && (
-          <View style={sharedStyles.continuousOverlay}>
-            <View style={sharedStyles.continuousOverlayContent}>
-              <Text style={sharedStyles.continuousOverlayTitle}>🔴 {textOverrides.continuousOverlayTitle}</Text>
-              <Text style={sharedStyles.continuousOverlayDescription}>{textOverrides.continuousOverlayDescription}</Text>
-            </View>
-            <Pressable
-              style={[sharedStyles.actionButton, sharedStyles.saveButton]}
-              onPress={onSaveContinuousSession}
-              disabled={isSubmitting}
-            >
-              <Text style={sharedStyles.actionButtonText}>{textOverrides.saveLastSnapshotButtonText}</Text>
-            </Pressable>
-          </View>
-        )}
-      </View>
-    </View>
-  )
-}
-
-export default InitialPopover