react-native-inapp-inspector 2.3.18 → 2.3.19

package/dist/esm/components/Inspector/FabLauncher.js

@@ -1,49 +1,471 @@
-import React from 'react';
-import { Animated, View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, PanResponder, Platform, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View, } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
+import AppHeaderLogo from '../AppHeaderLogo';
 import BrandCircleIcon from '../BrandCircleIcon';
+import { AndroidIcon, AppleIcon, CameraIcon, NpmIcon, VideoCameraIcon, } from '../NetworkIcons';
+import { ScreenCapture } from '../../capture';
+import { triggerNativeHaptic } from '../../native/NativeInspector';
+import { showToast } from '../../helpers/toast';
+import { getAppName, getAppVersionAndBuild } from '../../helpers';
+import { LIB_VERSION } from '../../constants';
 import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
 import styles from '../../styles';
+import { useTranslation } from '../../i18n';
+import { MediaPreviewModal } from './MediaPreviewModal';
 const FabLauncher = () => {
-    const { setVisible, fabPan, fabPanResponder, fabDraggedRef, pulseAnim, fabShineAnim, unreadPulseAnim, logs, analyticsEvents, } = useInspector();
-    return (<Animated.View style={[styles.fabWrapper, { transform: fabPan.getTranslateTransform() }]} {...fabPanResponder.panHandlers}>
-      <TouchableScale style={{ alignItems: 'center', justifyContent: 'center' }} onPress={() => {
-            if (fabDraggedRef.current)
-                return;
-            setVisible(true);
-        }} hitSlop={10}>
-        <Animated.View style={[styles.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
-        <BrandCircleIcon size={62}/>
-        
-        <View pointerEvents="none" style={styles.fabShineClip}>
-          <Animated.View style={[
-            styles.fabShineStreak,
-            {
-                transform: [
-                    {
-                        translateX: fabShineAnim.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: [-48, 96],
-                        }),
-                    },
-                    { rotate: '25deg' },
-                ],
-            },
-        ]}>
-            <LinearGradient colors={[
-            `${AppColors.white}00`,
-            `${AppColors.white}8C`,
-            `${AppColors.white}00`,
-        ]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
-          </Animated.View>
-        </View>
-        {(logs.length > 0 || analyticsEvents.length > 0) && (<Animated.View style={[
-                styles.fabGreenDot,
-                { transform: [{ scale: unreadPulseAnim }] },
-            ]}/>)}
-      </TouchableScale>
-    </Animated.View>);
+    const { setVisible, isMinimized, setIsMinimized, appIcon, fabPan, fabPanResponder, fabDraggedRef, pulseAnim, fabShineAnim, unreadPulseAnim, logs, analyticsEvents, refreshMediaCount, } = useInspector();
+    const { width: screenWidth } = useWindowDimensions();
+    const { t } = useTranslation();
+    const [appVersionString] = useState(() => {
+        return getAppVersionAndBuild().formatted;
+    });
+    const [isRecording, setIsRecording] = useState(false);
+    const [recordingSeconds, setRecordingSeconds] = useState(0);
+    const recordingTimerRef = useRef(null);
+    const [previewMediaItem, setPreviewMediaItem] = useState(null);
+    const playerPan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+    const playerPanRef = useRef({ x: 0, y: 0 });
+    useEffect(() => {
+        const idX = playerPan.x.addListener(v => (playerPanRef.current.x = v.value));
+        const idY = playerPan.y.addListener(v => (playerPanRef.current.y = v.value));
+        return () => {
+            playerPan.x.removeListener(idX);
+            playerPan.y.removeListener(idY);
+        };
+    }, [playerPan]);
+    const playerDraggedRef = useRef(false);
+    const playerPanResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: () => false,
+        onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 4 || Math.abs(g.dy) > 4,
+        onPanResponderGrant: () => {
+            playerDraggedRef.current = true;
+            playerPan.setOffset({
+                x: playerPanRef.current.x,
+                y: playerPanRef.current.y,
+            });
+            playerPan.setValue({ x: 0, y: 0 });
+        },
+        onPanResponderMove: Animated.event([null, { dx: playerPan.x, dy: playerPan.y }], { useNativeDriver: false }),
+        onPanResponderRelease: () => {
+            playerPan.flattenOffset();
+            setTimeout(() => {
+                playerDraggedRef.current = false;
+            }, 50);
+        },
+        onPanResponderTerminate: () => {
+            playerPan.flattenOffset();
+            playerDraggedRef.current = false;
+        },
+    })).current;
+    useEffect(() => {
+        ScreenCapture.isRecording()
+            .then(active => {
+            setIsRecording(Boolean(active));
+        })
+            .catch(() => { });
+    }, []);
+    useEffect(() => {
+        if (isRecording) {
+            setRecordingSeconds(0);
+            recordingTimerRef.current = setInterval(() => {
+                setRecordingSeconds(prev => prev + 1);
+            }, 1000);
+        }
+        else {
+            if (recordingTimerRef.current) {
+                clearInterval(recordingTimerRef.current);
+                recordingTimerRef.current = null;
+            }
+            setRecordingSeconds(0);
+        }
+        return () => {
+            if (recordingTimerRef.current) {
+                clearInterval(recordingTimerRef.current);
+            }
+        };
+    }, [isRecording]);
+    const handleTakeScreenshot = useCallback(async () => {
+        if (playerDraggedRef.current)
+            return;
+        try {
+            triggerNativeHaptic('light');
+            const result = await ScreenCapture.takeScreenshot({
+                format: 'png',
+                quality: 0.9,
+                hideInspector: true,
+            });
+            if (result) {
+                triggerNativeHaptic('success');
+                const newItem = {
+                    id: `screenshot_${result.timestamp}.png`,
+                    type: 'image',
+                    format: result.format,
+                    uri: result.uri,
+                    filename: result.uri.split('/').pop() || `screenshot_${result.timestamp}.png`,
+                    sizeBytes: result.sizeBytes,
+                    timestamp: result.timestamp,
+                    width: result.width,
+                    height: result.height,
+                };
+                setPreviewMediaItem(newItem);
+                refreshMediaCount?.().catch(() => { });
+                showToast(t('header.screenshotCaptured', 'Screenshot captured'));
+            }
+            else {
+                showToast(t('header.screenshotFailed', 'Failed to capture screenshot'));
+            }
+        }
+        catch {
+            showToast(t('header.screenshotError', 'Error capturing screenshot'));
+        }
+    }, [refreshMediaCount, t]);
+    const handleToggleVideoRecording = useCallback(async () => {
+        if (playerDraggedRef.current)
+            return;
+        try {
+            if (isRecording) {
+                triggerNativeHaptic('medium');
+                const result = await ScreenCapture.stopRecording();
+                setIsRecording(false);
+                if (result) {
+                    triggerNativeHaptic('success');
+                    const newItem = {
+                        id: `video_${result.timestamp}.${result.format}`,
+                        type: result.format === 'gif' ? 'gif' : 'video',
+                        format: result.format,
+                        uri: result.uri,
+                        filename: result.uri.split('/').pop() ||
+                            `video_${result.timestamp}.${result.format}`,
+                        sizeBytes: result.sizeBytes,
+                        timestamp: result.timestamp,
+                        durationMs: result.durationMs,
+                        width: result.width,
+                        height: result.height,
+                        hasAudio: result.hasAudio,
+                    };
+                    setPreviewMediaItem(newItem);
+                    refreshMediaCount?.().catch(() => { });
+                    showToast(t('header.recordingSaved', {
+                        duration: (result.durationMs / 1000).toFixed(1),
+                        defaultValue: `Recording saved (${(result.durationMs / 1000).toFixed(1)}s)`,
+                    }));
+                }
+            }
+            else {
+                triggerNativeHaptic('medium');
+                const started = await ScreenCapture.startRecording({
+                    fps: 24,
+                    audioSource: 'none',
+                });
+                if (started) {
+                    setIsRecording(true);
+                    showToast(t('header.recordingStarted', 'Recording started'));
+                }
+                else {
+                    showToast(t('header.recordingStartFailed', 'Failed to start recording'));
+                }
+            }
+        }
+        catch {
+            showToast(t('header.recordingError', 'Error during screen recording'));
+            setIsRecording(false);
+        }
+    }, [isRecording, refreshMediaCount, t]);
+    const handleExpandInspector = useCallback(() => {
+        if (playerDraggedRef.current)
+            return;
+        triggerNativeHaptic('light');
+        setIsMinimized?.(false);
+        setVisible(true);
+    }, [setIsMinimized, setVisible]);
+    const formatTime = (secs) => {
+        const mins = Math.floor(secs / 60);
+        const remainingSecs = secs % 60;
+        return `${mins}:${remainingSecs < 10 ? '0' : ''}${remainingSecs}`;
+    };
+    return (<>
+      
+      {isMinimized ? (<Animated.View style={[
+                fabStyles.playerContainer,
+                { transform: playerPan.getTranslateTransform() },
+            ]} {...playerPanResponder.panHandlers}>
+          
+          <LinearGradient colors={[AppColors.indigo600, AppColors.violet600]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={fabStyles.gradientBg} pointerEvents="none"/>
+
+          
+          <View pointerEvents="none" style={fabStyles.playerShineClip}>
+            <Animated.View style={[
+                fabStyles.playerShineStreak,
+                {
+                    transform: [
+                        {
+                            translateX: fabShineAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [-80, screenWidth + 80],
+                            }),
+                        },
+                        { rotate: '28deg' },
+                    ],
+                },
+            ]}>
+              <LinearGradient colors={[
+                'rgba(255, 255, 255, 0)',
+                'rgba(255, 255, 255, 0.18)',
+                'rgba(255, 255, 255, 0.70)',
+                'rgba(255, 255, 255, 1)',
+                'rgba(255, 255, 255, 0.70)',
+                'rgba(255, 255, 255, 0.18)',
+                'rgba(255, 255, 255, 0)',
+            ]} locations={[0, 0.22, 0.44, 0.5, 0.56, 0.78, 1]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
+            </Animated.View>
+          </View>
+
+          
+          <TouchableOpacity activeOpacity={0.75} onPress={handleExpandInspector} style={fabStyles.brandSection} accessibilityRole="button" accessibilityLabel={t('mediaGallery.expand', 'Expand Inspector')}>
+            <AppHeaderLogo size={36} customIcon={appIcon}/>
+            <View style={fabStyles.titleWrapper}>
+              <Text style={fabStyles.appTitle} numberOfLines={1}>
+                {getAppName()}
+              </Text>
+              <View style={fabStyles.versionRow}>
+                
+                <View style={fabStyles.versionChip}>
+                  {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}E6`} size={9}/>) : (<AndroidIcon color={`${AppColors.white}E6`} size={9}/>)}
+                  <Text style={fabStyles.versionChipText} numberOfLines={1}>
+                    {appVersionString}
+                  </Text>
+                </View>
+
+                
+                <View style={fabStyles.versionChip}>
+                  <NpmIcon size={9} color={AppColors.npmRedLight}/>
+                  <Text style={fabStyles.versionChipText} numberOfLines={1}>
+                    v{LIB_VERSION}
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </TouchableOpacity>
+
+          
+          <View style={fabStyles.actionsRow}>
+            
+            <TouchableScale onPress={handleTakeScreenshot} hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }} style={fabStyles.actionBtn}>
+              <CameraIcon size={13} color={AppColors.white}/>
+              <Text style={fabStyles.actionText}>
+                {t('header.photo', 'Photo')}
+              </Text>
+            </TouchableScale>
+
+            
+            <TouchableScale onPress={handleToggleVideoRecording} hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }} style={[
+                fabStyles.actionBtn,
+                isRecording && fabStyles.recordingBtnActive,
+            ]}>
+              {isRecording ? (<View style={fabStyles.recordingDot}/>) : (<VideoCameraIcon size={13} color={AppColors.white}/>)}
+              <Text style={[
+                fabStyles.actionText,
+                isRecording && { color: AppColors.red300 },
+            ]}>
+                {isRecording
+                ? `${t('header.rec', 'REC')} ${formatTime(recordingSeconds)}`
+                : t('header.record', 'Record')}
+              </Text>
+            </TouchableScale>
+          </View>
+        </Animated.View>) : (<Animated.View style={[styles.fabWrapper, { transform: fabPan.getTranslateTransform() }]} {...fabPanResponder.panHandlers}>
+          <TouchableScale style={{ alignItems: 'center', justifyContent: 'center' }} onPress={() => {
+                if (fabDraggedRef.current)
+                    return;
+                triggerNativeHaptic('light');
+                setVisible(true);
+            }} hitSlop={10}>
+            <Animated.View style={[styles.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
+            <BrandCircleIcon size={62}/>
+            
+            <View pointerEvents="none" style={styles.fabShineClip}>
+              <Animated.View style={[
+                styles.fabShineStreak,
+                {
+                    transform: [
+                        {
+                            translateX: fabShineAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [-48, 96],
+                            }),
+                        },
+                        { rotate: '25deg' },
+                    ],
+                },
+            ]}>
+                <LinearGradient colors={[
+                'rgba(255, 255, 255, 0)',
+                'rgba(255, 255, 255, 0.25)',
+                'rgba(255, 255, 255, 0.95)',
+                'rgba(255, 255, 255, 0.25)',
+                'rgba(255, 255, 255, 0)',
+            ]} locations={[0, 0.25, 0.5, 0.75, 1]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
+              </Animated.View>
+            </View>
+            {(logs.length > 0 || analyticsEvents.length > 0) && (<Animated.View style={[
+                    styles.fabGreenDot,
+                    { transform: [{ scale: unreadPulseAnim }] },
+                ]}/>)}
+          </TouchableScale>
+        </Animated.View>)}
+
+      
+      <MediaPreviewModal item={previewMediaItem} visible={!!previewMediaItem} onClose={() => setPreviewMediaItem(null)} onDelete={async (item) => {
+            await ScreenCapture.deleteMedia(item.uri);
+            refreshMediaCount?.().catch(() => { });
+            setPreviewMediaItem(null);
+        }} onConvertToGif={async (item) => {
+            const gif = await ScreenCapture.convertToGif(item.uri, {
+                fps: 12,
+                width: 480,
+            });
+            if (gif) {
+                refreshMediaCount?.().catch(() => { });
+                setPreviewMediaItem({
+                    id: `anim_${gif.timestamp}.gif`,
+                    type: 'gif',
+                    format: 'gif',
+                    uri: gif.uri,
+                    filename: gif.uri.split('/').pop() || `anim_${gif.timestamp}.gif`,
+                    sizeBytes: gif.sizeBytes,
+                    timestamp: gif.timestamp,
+                    durationMs: gif.durationMs,
+                });
+            }
+        }}/>
+    </>);
 };
+const fabStyles = StyleSheet.create({
+    playerContainer: {
+        position: 'absolute',
+        bottom: Platform.OS === 'ios' ? 34 : 18,
+        left: 12,
+        right: 12,
+        minHeight: 58,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.28)',
+        paddingHorizontal: 12,
+        paddingVertical: 7,
+        gap: 8,
+        zIndex: 99999,
+        elevation: 25,
+        shadowColor: AppColors.indigo600,
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.45,
+        shadowRadius: 14,
+        overflow: 'hidden',
+    },
+    gradientBg: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: 16,
+    },
+    playerShineClip: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: 16,
+        overflow: 'hidden',
+    },
+    playerShineStreak: {
+        position: 'absolute',
+        top: -60,
+        width: 75,
+        height: 200,
+    },
+    brandSection: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 9,
+        flex: 1,
+        minWidth: 0,
+        paddingVertical: 2,
+    },
+    titleWrapper: {
+        flex: 1,
+        minWidth: 0,
+        justifyContent: 'center',
+        gap: 2,
+    },
+    appTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13.5,
+        color: AppColors.white,
+        letterSpacing: -0.2,
+    },
+    versionRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        minWidth: 0,
+    },
+    versionChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: `${AppColors.white}1F`,
+        borderRadius: 5,
+        paddingHorizontal: 5,
+        paddingVertical: 1.5,
+        gap: 3,
+        borderWidth: 1,
+        borderColor: `${AppColors.white}2E`,
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    versionChipText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 8.5,
+        color: `${AppColors.white}EB`,
+        letterSpacing: 0.1,
+    },
+    actionsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    actionBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4.5,
+        backgroundColor: 'rgba(255, 255, 255, 0.22)',
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        borderRadius: 7,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.32)',
+    },
+    recordingBtnActive: {
+        backgroundColor: 'rgba(239, 68, 68, 0.32)',
+        borderColor: AppColors.red500,
+    },
+    recordingDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: AppColors.red500,
+    },
+    actionText: {
+        fontFamily: AppFonts.interSemiBold,
+        fontSize: 11,
+        color: AppColors.white,
+    },
+});
 export default FabLauncher;