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

package/src/components/SessionRecorderWidget/FloatingButton.tsx

@@ -0,0 +1,176 @@
+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: (_, 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: (_, 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: (_, 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,167 @@
+import React, { useMemo, useState } from 'react';
+import { View, Text, Pressable, Switch } from 'react-native';
+import { SessionType } from '@multiplayer-app/session-recorder-common';
+import { type TextOverridesOptions } from '../../types';
+import { sharedStyles } from './styles';
+import ModalHeader from './ModalHeader';
+import { CapturingIcon } from './icons';
+import { logger } from '../../utils';
+
+interface InitialPopoverProps extends React.PropsWithChildren {
+  isContinuous: boolean;
+  showContinuousRecording: boolean;
+  textOverrides: TextOverridesOptions;
+  onStartRecording: (sessionType: SessionType) => void;
+  onStopRecording: (comment?: string) => void;
+  onSaveContinuousSession: () => void;
+  onClose: () => void;
+  isSubmitting: boolean;
+  isOnline: boolean;
+}
+
+const InitialPopover: React.FC<InitialPopoverProps> = ({
+  isContinuous,
+  textOverrides,
+  showContinuousRecording,
+  onStartRecording,
+  onStopRecording,
+  onSaveContinuousSession,
+  isOnline,
+  children,
+}) => {
+  const [saving, setSaving] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [continuousRecording, setContinuousRecording] = useState(isContinuous);
+
+  const handleStartRecording = async () => {
+    try {
+      setLoading(true);
+      await onStartRecording(SessionType.PLAIN);
+    } catch (error) {
+      logger.error('InitialPopover', 'Failed to start recording', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleToggleContinuousRecording = async (value: boolean) => {
+    try {
+      setLoading(true);
+      setContinuousRecording(value);
+      if (value) {
+        await onStartRecording(SessionType.CONTINUOUS);
+      } else {
+        await onStopRecording();
+      }
+    } catch (error) {
+      logger.error(
+        'InitialPopover',
+        'Failed to toggle continuous recording',
+        error
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSaveContinuousSession = async () => {
+    try {
+      setSaving(true);
+      await onSaveContinuousSession();
+    } catch (error) {
+      logger.error(
+        'InitialPopover',
+        'Failed to save continuous session',
+        error
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const textContent = useMemo(() => {
+    return {
+      label: textOverrides.continuousRecordingLabel,
+      title: showContinuousRecording
+        ? textOverrides.initialTitleWithContinuous
+        : textOverrides.initialTitleWithoutContinuous,
+      description: showContinuousRecording
+        ? textOverrides.initialDescriptionWithContinuous
+        : textOverrides.initialDescriptionWithoutContinuous,
+    };
+  }, [showContinuousRecording, textOverrides]);
+
+  return (
+    <View style={sharedStyles.popoverContent}>
+      <ModalHeader />
+      <View style={sharedStyles.popoverBody}>
+        {children}
+        {showContinuousRecording && (
+          <View style={sharedStyles.continuousRecordingSection}>
+            <Text style={sharedStyles.continuousRecordingLabel}>
+              {textContent.label}
+            </Text>
+            <Switch
+              disabled={loading || !isOnline}
+              value={continuousRecording}
+              ios_backgroundColor="#e2e8f0"
+              onValueChange={handleToggleContinuousRecording}
+              trackColor={{ false: '#e2e8f0', true: '#493bff' }}
+              thumbColor={'#ffffff'}
+            />
+          </View>
+        )}
+        {!continuousRecording ? (
+          <>
+            <Text style={sharedStyles.title}>{textContent.title}</Text>
+            <Text style={sharedStyles.description}>
+              {textContent.description}
+            </Text>
+            <View style={sharedStyles.popoverFooter}>
+              <Pressable
+                disabled={loading || !isOnline}
+                onPress={handleStartRecording}
+                style={[sharedStyles.actionButton, sharedStyles.startButton]}
+              >
+                <Text style={sharedStyles.actionButtonText}>
+                  {loading
+                    ? 'Starting to record...'
+                    : textOverrides.startRecordingButtonText}
+                </Text>
+              </Pressable>
+            </View>
+          </>
+        ) : (
+          <>
+            <View style={sharedStyles.continuousOverlay}>
+              <View style={sharedStyles.continuousOverlayHeader}>
+                <CapturingIcon size={20} color="red" />
+                <Text style={sharedStyles.continuousOverlayTitle}>
+                  {textOverrides.continuousOverlayTitle}
+                </Text>
+              </View>
+              <Text style={sharedStyles.continuousOverlayDescription}>
+                {textOverrides.continuousOverlayDescription}
+              </Text>
+            </View>
+            <View style={sharedStyles.popoverFooter}>
+              <Pressable
+                disabled={saving || !isOnline}
+                onPress={handleSaveContinuousSession}
+                style={[sharedStyles.actionButton, sharedStyles.saveButton]}
+              >
+                <Text style={sharedStyles.actionButtonText}>
+                  {saving
+                    ? 'Saving...'
+                    : textOverrides.saveLastSnapshotButtonText}
+                </Text>
+              </Pressable>
+            </View>
+          </>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default InitialPopover;

package/src/components/SessionRecorderWidget/ModalContainer.tsx

@@ -0,0 +1,189 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  Dimensions,
+  Modal,
+  PanResponder,
+  Platform,
+} from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+
+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 [visible, setVisible] = useState<boolean>(isVisible);
+
+  const SWIPE_THRESHOLD = 100; // Distance to trigger close
+
+  const animateClose = () => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateY, {
+        toValue: MODAL_HEIGHT,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      setVisible(false);
+      onClose();
+    });
+  };
+
+  useEffect(() => {
+    if (isVisible) {
+      setVisible(true);
+      // 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();
+    } else if (visible) {
+      // If external isVisible turned false, animate close then hide
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: MODAL_HEIGHT,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setVisible(false);
+      });
+    }
+  }, [isVisible, fadeAnim, translateY, visible]);
+
+  // PanResponder for swipe-to-dismiss functionality
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        // Only respond to downward swipes
+        return gestureState.dy > 10;
+      },
+      onPanResponderGrant: () => {
+        // Reset any ongoing animations
+        translateY.stopAnimation();
+      },
+      onPanResponderMove: (_, gestureState) => {
+        // Only allow downward movement
+        if (gestureState.dy > 0) {
+          translateY.setValue(gestureState.dy);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        const { dy, vy } = gestureState;
+
+        // If swiped down with sufficient distance or velocity, close modal
+        if (dy > SWIPE_THRESHOLD || vy > 500) {
+          animateClose();
+        } else {
+          // Snap back to original position
+          Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+            tension: 100,
+            friction: 8,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      onRequestClose={onClose}
+    >
+      <SafeAreaProvider>
+        <Animated.View style={{ ...styles.backdrop, opacity: fadeAnim }}>
+          <Pressable style={styles.backdropPressable} onPress={animateClose} />
+          <Animated.View
+            style={[styles.modal, { transform: [{ translateY }] }]}
+            {...panResponder.panHandlers}
+          >
+            <SafeAreaView style={styles.safeArea} edges={['bottom']}>
+              {children}
+            </SafeAreaView>
+          </Animated.View>
+        </Animated.View>
+      </SafeAreaProvider>
+    </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,
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  modal: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    maxHeight: MODAL_HEIGHT,
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: -2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  },
+});
+
+export default ModalContainer;

package/src/components/SessionRecorderWidget/ModalHeader.tsx

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

package/src/components/SessionRecorderWidget/SessionRecorderWidget.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useCallback, memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { SessionState } from '../../types';
+import { SessionType } from '@multiplayer-app/session-recorder-common';
+import { useSessionRecorder } from '../../context/SessionRecorderContext';
+
+import FinalPopover from './FinalPopover';
+import ModalContainer from './ModalContainer';
+import InitialPopover from './InitialPopover';
+import FloatingButton from './FloatingButton';
+import ErrorBanner from './ErrorBanner';
+import { logger } from '../../utils';
+import { useSessionRecorderStore } from '../../context/useSessionRecorderStore';
+import { sessionRecorderStore } from '../../context/SessionRecorderStore';
+
+interface SessionRecorderWidgetProps {}
+
+const SessionRecorderWidget: React.FC<SessionRecorderWidgetProps> = memo(() => {
+  const { instance, openWidgetModal, closeWidgetModal } = useSessionRecorder();
+  const isOnline = useSessionRecorderStore<boolean>((s) => s.isOnline);
+  const sessionType = useSessionRecorderStore<SessionType | null>(
+    (s) => s.sessionType
+  );
+  const isModalVisible = useSessionRecorderStore<boolean>(
+    (s) => s.isWidgetModalVisible
+  );
+  const sessionState = useSessionRecorderStore<SessionState | null>(
+    (s) => s.sessionState
+  );
+  const error = useSessionRecorderStore<string | null>((s) => s.error);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Get configuration from instance
+  const { widget, showContinuousRecording } = instance.config;
+
+  const dismissError = useCallback(() => {
+    sessionRecorderStore.setState({ error: null });
+  }, []);
+
+  const handleError = useCallback((error: any, message: string) => {
+    const errorMessage = error instanceof Error ? error.message : message;
+    logger.error('SessionRecorderWidget', message, error);
+    sessionRecorderStore.setState({ error: errorMessage });
+  }, []);
+
+  const onStartRecording = useCallback(
+    async (sessionType: SessionType) => {
+      if (!isOnline) {
+        handleError(
+          new Error('Cannot start recording while offline'),
+          'Cannot start recording while offline'
+        );
+        return;
+      }
+      try {
+        await instance.start(sessionType);
+        closeWidgetModal();
+      } catch (error) {
+        handleError(error, 'Failed to start recording');
+      }
+    },
+    [isOnline, handleError]
+  );
+
+  const onStopRecording = useCallback(
+    async (comment?: string) => {
+      try {
+        setIsSubmitting(true);
+        await instance.stop(comment);
+        closeWidgetModal();
+      } catch (error) {
+        handleError(error, 'Failed to stop recording');
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [handleError]
+  );
+
+  const onCancelSession = useCallback(async () => {
+    try {
+      await instance.cancel();
+      closeWidgetModal();
+    } catch (error) {
+      handleError(error, 'Failed to cancel session');
+    }
+  }, [handleError]);
+
+  const onSaveContinuousSession = useCallback(async () => {
+    try {
+      await instance.save();
+    } catch (error) {
+      handleError(error, 'Failed to save continuous session');
+    }
+  }, [handleError]);
+
+  const isStarted =
+    sessionState === SessionState.started ||
+    sessionState === SessionState.paused;
+  const isContinuous = sessionType === SessionType.CONTINUOUS;
+
+  return (
+    <>
+      {widget.button?.visible && (
+        <View pointerEvents="box-none" style={styles.overlayContainer}>
+          <FloatingButton
+            sessionState={sessionState}
+            onPress={openWidgetModal}
+          />
+        </View>
+      )}
+      <ModalContainer isVisible={isModalVisible} onClose={closeWidgetModal}>
+        {isStarted && !isContinuous ? (
+          <FinalPopover
+            isOnline={isOnline}
+            isSubmitting={isSubmitting}
+            textOverrides={widget.textOverrides}
+            onClose={closeWidgetModal}
+            onStopRecording={onStopRecording}
+            onCancelSession={onCancelSession}
+          >
+            {error && <ErrorBanner error={error} onDismiss={dismissError} />}
+          </FinalPopover>
+        ) : (
+          <InitialPopover
+            isOnline={isOnline}
+            isSubmitting={isSubmitting}
+            textOverrides={widget.textOverrides}
+            isContinuous={isStarted && isContinuous}
+            showContinuousRecording={showContinuousRecording}
+            onClose={closeWidgetModal}
+            onStopRecording={onStopRecording}
+            onStartRecording={onStartRecording}
+            onSaveContinuousSession={onSaveContinuousSession}
+          >
+            {error && <ErrorBanner error={error} onDismiss={dismissError} />}
+          </InitialPopover>
+        )}
+      </ModalContainer>
+    </>
+  );
+});
+
+export default SessionRecorderWidget;
+
+const styles = StyleSheet.create({
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});