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

package/ios/SessionRecorder.swift

@@ -0,0 +1,205 @@
+import UIKit
+import React
+
+@objc(SessionRecorder)
+class SessionRecorder: NSObject {
+
+  @objc func captureAndMask(_ resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    DispatchQueue.main.async {
+      guard let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else {
+        reject("NO_WINDOW", "Unable to get key window", nil)
+        return
+      }
+
+      UIGraphicsBeginImageContextWithOptions(window.bounds.size, false, UIScreen.main.scale)
+      window.drawHierarchy(in: window.bounds, afterScreenUpdates: true)
+      let screenshot = UIGraphicsGetImageFromCurrentImageContext()
+      UIGraphicsEndImageContext()
+
+      guard let image = screenshot else {
+        reject("CAPTURE_FAILED", "Failed to capture screen", nil)
+        return
+      }
+
+      // Apply masking to sensitive elements
+      let maskedImage = self.applyMasking(to: image, in: window)
+
+      if let data = maskedImage.jpegData(compressionQuality: 0.5) {
+        let base64 = data.base64EncodedString()
+        resolve(base64)
+      } else {
+        reject("ENCODING_FAILED", "Failed to encode image", nil)
+      }
+    }
+  }
+
+  @objc func captureAndMaskWithOptions(_ options: NSDictionary, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    DispatchQueue.main.async {
+      guard let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else {
+        reject("NO_WINDOW", "Unable to get key window", nil)
+        return
+      }
+
+      UIGraphicsBeginImageContextWithOptions(window.bounds.size, false, UIScreen.main.scale)
+      window.drawHierarchy(in: window.bounds, afterScreenUpdates: true)
+      let screenshot = UIGraphicsGetImageFromCurrentImageContext()
+      UIGraphicsEndImageContext()
+
+      guard let image = screenshot else {
+        reject("CAPTURE_FAILED", "Failed to capture screen", nil)
+        return
+      }
+
+      // Apply masking with custom options
+      let maskedImage = self.applyMaskingWithOptions(to: image, in: window, options: options)
+
+      if let data = maskedImage.jpegData(compressionQuality: 0.5) {
+        let base64 = data.base64EncodedString()
+        resolve(base64)
+      } else {
+        reject("ENCODING_FAILED", "Failed to encode image", nil)
+      }
+    }
+  }
+
+  private func applyMasking(to image: UIImage, in window: UIWindow) -> UIImage {
+    return applyMaskingWithOptions(to: image, in: window, options: [:])
+  }
+
+  private func applyMaskingWithOptions(to image: UIImage, in window: UIWindow, options: NSDictionary) -> UIImage {
+    UIGraphicsBeginImageContextWithOptions(image.size, false, image.scale)
+    guard let context = UIGraphicsGetCurrentContext() else { return image }
+
+    // Draw the original image
+    image.draw(in: CGRect(origin: .zero, size: image.size))
+
+    // Find and mask sensitive elements
+    let sensitiveElements = findSensitiveElements(in: window)
+
+    for element in sensitiveElements {
+      let frame = element.frame
+      let maskingType = getMaskingType(for: element)
+
+      switch maskingType {
+      case .blur:
+        applyBlurMask(in: context, frame: frame)
+      case .rectangle:
+        applyRectangleMask(in: context, frame: frame)
+      case .pixelate:
+        applyPixelateMask(in: context, frame: frame, image: image)
+      case .none:
+        break
+      }
+    }
+
+    let maskedImage = UIGraphicsGetImageFromCurrentImageContext() ?? image
+    UIGraphicsEndImageContext()
+
+    return maskedImage
+  }
+
+  private func findSensitiveElements(in view: UIView) -> [UIView] {
+    var sensitiveElements: [UIView] = []
+
+    func traverseView(_ view: UIView) {
+      // Check if this view should be masked
+      if shouldMaskView(view) {
+        sensitiveElements.append(view)
+      }
+
+      // Recursively check subviews
+      for subview in view.subviews {
+        traverseView(subview)
+      }
+    }
+
+    traverseView(view)
+    return sensitiveElements
+  }
+
+  private func shouldMaskView(_ view: UIView) -> Bool {
+    // Check for UITextField - mask all text fields when inputMasking is enabled
+    if view is UITextField {
+      return true
+    }
+
+    // Check for UITextView - mask all text views when inputMasking is enabled
+    if view is UITextView {
+      return true
+    }
+
+    return false
+  }
+
+  private func getMaskingType(for view: UIView) -> MaskingType {
+    // Default masking type for all text inputs
+    return .rectangle
+  }
+
+  private func applyBlurMask(in context: CGContext, frame: CGRect) {
+    // Create a blur effect
+    context.setFillColor(UIColor.black.withAlphaComponent(0.8).cgColor)
+    context.fill(frame)
+
+    // Add some noise to make it look blurred
+    context.setFillColor(UIColor.white.withAlphaComponent(0.3).cgColor)
+    for _ in 0..<20 {
+      let randomX = frame.origin.x + CGFloat.random(in: 0...frame.width)
+      let randomY = frame.origin.y + CGFloat.random(in: 0...frame.height)
+      let randomSize = CGFloat.random(in: 2...8)
+      context.fillEllipse(in: CGRect(x: randomX, y: randomY, width: randomSize, height: randomSize))
+    }
+  }
+
+  private func applyRectangleMask(in context: CGContext, frame: CGRect) {
+    // Simple rectangle fill
+    context.setFillColor(UIColor.gray.cgColor)
+    context.fill(frame)
+
+    // Add some text-like pattern
+    context.setFillColor(UIColor.darkGray.cgColor)
+    let lineHeight: CGFloat = 4
+    let spacing: CGFloat = 8
+
+    for i in stride(from: frame.origin.y + spacing, to: frame.origin.y + frame.height - spacing, by: lineHeight + spacing) {
+      let lineWidth = CGFloat.random(in: frame.width * 0.3...frame.width * 0.8)
+      let lineX = frame.origin.x + CGFloat.random(in: 0...(frame.width - lineWidth))
+      context.fill(CGRect(x: lineX, y: i, width: lineWidth, height: lineHeight))
+    }
+  }
+
+  private func applyPixelateMask(in context: CGContext, frame: CGRect, image: UIImage) {
+    // Create a pixelated effect
+    let pixelSize: CGFloat = 8
+    let pixelCountX = Int(frame.width / pixelSize)
+    let pixelCountY = Int(frame.height / pixelSize)
+
+    for x in 0..<pixelCountX {
+      for y in 0..<pixelCountY {
+        let pixelFrame = CGRect(
+          x: frame.origin.x + CGFloat(x) * pixelSize,
+          y: frame.origin.y + CGFloat(y) * pixelSize,
+          width: pixelSize,
+          height: pixelSize
+        )
+
+        // Use a random color for each pixel
+        let randomColor = UIColor(
+          red: CGFloat.random(in: 0...1),
+          green: CGFloat.random(in: 0...1),
+          blue: CGFloat.random(in: 0...1),
+          alpha: 1.0
+        )
+        context.setFillColor(randomColor.cgColor)
+        context.fill(pixelFrame)
+      }
+    }
+  }
+}
+
+private enum MaskingType {
+  case blur
+  case rectangle
+  case pixelate
+  case none
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react-native",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.5",
   "description": "Multiplayer Fullstack Session Recorder for React Native",
   "author": {
     "name": "Multiplayer Software, Inc.",
@@ -83,9 +83,19 @@
   "peerDependencies": {
     "@opentelemetry/api": "^1.9.0",
     "react": ">=18.0.0 <20.0.0",
-    "react-native": ">=0.72.0 <0.82.0"
+    "react-native": ">=0.72.0 <0.82.0",
+    "react-native-svg": "^15.13.0"
   },
   "optionalDependencies": {
     "expo-constants": "^15.0.0"
+  },
+  "react-native": {
+    "ios": {
+      "podspecPath": "./ios/SessionRecorder.podspec"
+    },
+    "android": {
+      "sourceDir": "./android",
+      "packageImportPath": "import com.multiplayer.sessionrecorder.SessionRecorderPackage;"
+    }
   }
 }

package/react-native.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  dependencies: {
+    'react-native-session-recorder': {
+      platforms: {
+        android: {
+          sourceDir: '../android',
+          packageImportPath: 'import com.multiplayer.sessionrecorder.SessionRecorderPackage;'
+        },
+        ios: {
+          podspecPath: '../ios/SessionRecorder.podspec'
+        }
+      }
+    }
+  }
+}

package/src/components/SessionRecorderWidget/FinalPopover.tsx

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

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

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

package/src/components/SessionRecorderWidget/ModalContainer.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated, Pressable, StyleSheet, Dimensions, Modal, SafeAreaView } from 'react-native'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window')
+const MODAL_HEIGHT = SCREEN_HEIGHT * 0.7
+
+interface ModalContainerProps {
+  isVisible: boolean
+  onClose: () => void
+  children: React.ReactNode
+}
+
+const ModalContainer: React.FC<ModalContainerProps> = ({ isVisible, onClose, children }) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current
+  const translateY = useRef(new Animated.Value(0)).current
+  const [animatedFinished, setAnimatedFinished] = useState(false)
+
+  const SWIPE_THRESHOLD = 100 // Distance to trigger close
+  const MAX_SWIPE_DISTANCE = 200 // Maximum swipe distance
+
+  const animateClose = () => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true
+      }),
+      Animated.timing(translateY, {
+        toValue: MODAL_HEIGHT,
+        duration: 250,
+        useNativeDriver: true
+      })
+    ]).start(() => {
+      onClose()
+    })
+  }
+
+  useEffect(() => {
+    if (isVisible) {
+      // Start from bottom and animate to position
+      translateY.setValue(MODAL_HEIGHT)
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true
+        }),
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true
+        })
+      ]).start()
+    }
+  }, [isVisible, fadeAnim, translateY])
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((event) => {
+      translateY.setValue(event.translationY)
+    })
+    .onEnd((event) => {
+      const { translationY, velocityY } = event
+
+      // If swiped down with sufficient distance or velocity, close modal
+      if (translationY > SWIPE_THRESHOLD || velocityY > 500) {
+        animateClose()
+      } else {
+        // Snap back to original position
+        Animated.spring(translateY, {
+          toValue: 0,
+          useNativeDriver: true,
+          tension: 100,
+          friction: 8
+        }).start()
+      }
+    })
+    .activeOffsetY(10)
+    .runOnJS(true)
+
+  return (
+    <>
+      {isVisible && (
+        <Animated.View style={{ ...styles.backdrop, opacity: fadeAnim }}>
+          <Pressable style={styles.backdropPressable} onPress={animateClose} />
+        </Animated.View>
+      )}
+      <Modal visible={isVisible} transparent animationType='none' onRequestClose={onClose}>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <GestureDetector gesture={panGesture}>
+            <Animated.View style={[styles.modal, { transform: [{ translateY }] }]}>
+              <SafeAreaView style={styles.safeArea}>{children}</SafeAreaView>
+            </Animated.View>
+          </GestureDetector>
+        </GestureHandlerRootView>
+      </Modal>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+  },
+  backdropPressable: {
+    flex: 1
+  },
+  safeArea: {
+    flex: 1
+  },
+  modal: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 'auto',
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20
+  }
+})
+
+export default ModalContainer

package/src/components/SessionRecorderWidget/ModalHeader.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { View, Pressable, Linking } from 'react-native'
+import { sharedStyles } from './styles'
+import { LogoIcon } from './icons'
+
+interface ModalHeaderProps {
+  children?: React.ReactNode
+}
+
+const ModalHeader: React.FC<ModalHeaderProps> = ({ children }) => {
+  return (
+    <View style={sharedStyles.popoverHeader}>
+      <View style={sharedStyles.modalHandle} />
+      <View style={sharedStyles.popoverHeaderContent}>
+        <Pressable onPress={() => Linking.openURL('https://www.multiplayer.app')}>
+          <LogoIcon size={42} />
+        </Pressable>
+        {children}
+      </View>
+    </View>
+  )
+}
+
+export default ModalHeader