react-native-inapp-inspector 2.3.16 → 2.3.17

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

@@ -37,18 +37,6 @@ const MainScreen = () => {
         (activeTab === 'logs' && selectedLog != null) ||
         (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
-    const detailAnim = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        if (isDetailActive) {
-            detailAnim.setValue(0);
-            Animated.spring(detailAnim, {
-                toValue: 1,
-                friction: 8,
-                tension: 65,
-                useNativeDriver: true,
-            }).start();
-        }
-    }, [isDetailActive]);
     const settingsAnim = useRef(new Animated.Value(0)).current;
     useEffect(() => {
         if (settingsPage !== null) {
@@ -57,7 +45,7 @@ const MainScreen = () => {
                 toValue: 1,
                 friction: 8,
                 tension: 65,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }).start();
         }
     }, [settingsPage !== null]);
@@ -69,19 +57,10 @@ const MainScreen = () => {
                 toValue: 1,
                 friction: 8,
                 tension: 65,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }).start();
         }
     }, [isFeedbackOpen]);
-    const tabAnim = useRef(new Animated.Value(1)).current;
-    useEffect(() => {
-        tabAnim.setValue(0);
-        Animated.timing(tabAnim, {
-            toValue: 1,
-            duration: 150,
-            useNativeDriver: true,
-        }).start();
-    }, [activeTab]);
     return (<>
       {(Platform.OS === 'ios' || Platform.OS === 'android') &&
             enabled &&
@@ -105,27 +84,11 @@ const MainScreen = () => {
 
               <View style={{ flex: 1 }}>
                 
-                {!isDetailActive && settingsPage === null && !isFeedbackOpen && <TabBar />}
-
-                {isReady ? (<View style={{ flex: 1 }}>
-                    
-                    <Animated.View style={[
-                {
-                    flex: 1,
-                    opacity: tabAnim,
-                    transform: [
-                        {
-                            translateY: tabAnim.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [6, 0],
-                            }),
-                        },
-                    ],
-                },
-                (isDetailActive || settingsPage !== null || isFeedbackOpen) && {
-                    pointerEvents: 'none',
-                },
-            ]}>
+                <View style={{ flex: 1 }} pointerEvents={isDetailActive || settingsPage !== null || isFeedbackOpen
+            ? 'none'
+            : 'auto'}>
+                  <TabBar />
+                  {isReady ? (<View style={{ flex: 1 }}>
                       {activeTab === 'apis' && <NetworkTab />}
                       {activeTab === 'logs' && <ConsoleTab />}
                       {activeTab === 'analytics' && <AnalyticsTab />}
@@ -138,31 +101,23 @@ const MainScreen = () => {
                       {Platform.OS === 'android' &&
                 isLocalDebugEnvironment() &&
                 activeTab === 'debugging' && <DebuggingTab />}
-                    </Animated.View>
+                    </View>) : (<MainScreenSkeleton />)}
+                </View>
 
-                    
-                    {isDetailActive && (<Animated.View style={[
-                    StyleSheet.absoluteFill,
-                    {
-                        backgroundColor: AppColors.contentBg,
-                        opacity: detailAnim,
-                        transform: [
-                            {
-                                translateX: detailAnim.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [32, 0],
-                                }),
-                            },
-                        ],
-                    },
-                ]}>
-                        {activeTab === 'apis' && selected != null && (<NetworkDetail />)}
-                        {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail event={selectedEvent}/>)}
-                        {activeTab === 'logs' && selectedLog != null && (<LogDetail />)}
-                        {activeTab === 'redux' && <ReduxDetail />}
-                        {activeTab === 'crash' && selectedCrash != null && (<CrashDetail />)}
-                      </Animated.View>)}
-                  </View>) : (<MainScreenSkeleton />)}
+                
+                {isDetailActive && (<View style={[
+                StyleSheet.absoluteFill,
+                {
+                    backgroundColor: AppColors.contentBg,
+                    zIndex: 10,
+                },
+            ]}>
+                    {activeTab === 'apis' && selected != null && (<NetworkDetail />)}
+                    {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail event={selectedEvent}/>)}
+                    {activeTab === 'logs' && selectedLog != null && (<LogDetail />)}
+                    {activeTab === 'redux' && <ReduxDetail />}
+                    {activeTab === 'crash' && selectedCrash != null && (<CrashDetail />)}
+                  </View>)}
 
                 
                 {settingsPage !== null && (<Animated.View style={[
@@ -230,12 +185,12 @@ const MainScreenSkeleton = React.memo(function MainScreenSkeleton() {
             Animated.timing(shimmerAnim, {
                 toValue: 0.85,
                 duration: 750,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.timing(shimmerAnim, {
                 toValue: 0.35,
                 duration: 750,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         animation.start();

package/dist/esm/components/Inspector/MediaGalleryTab.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MediaGalleryTab: React.FC;

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

@@ -0,0 +1,267 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { Alert, Dimensions, FlatList, Image, RefreshControl, StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
+import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
+import TouchableScale from '../TouchableScale';
+import EmptyState from '../EmptyState';
+import { FilmIcon, GifIcon, ImageIcon, TrashIcon, } from '../NetworkIcons';
+import { MediaPreviewModal } from './MediaPreviewModal';
+import { ScreenCapture, } from '../../capture';
+import { formatBytes } from '../../helpers';
+import { showToast } from '../../helpers/toast';
+import { useTranslation } from '../../i18n';
+export const MediaGalleryTab = () => {
+    const { t } = useTranslation();
+    const [mediaList, setMediaList] = useState([]);
+    const [refreshing, setRefreshing] = useState(false);
+    const [selectedFilter, setSelectedFilter] = useState('all');
+    const [selectedItem, setSelectedItem] = useState(null);
+    const loadMedia = useCallback(async () => {
+        try {
+            const items = await ScreenCapture.getMediaList();
+            setMediaList(items);
+        }
+        catch {
+            setMediaList([]);
+        }
+    }, []);
+    useEffect(() => {
+        loadMedia();
+    }, [loadMedia]);
+    const onRefresh = async () => {
+        setRefreshing(true);
+        await loadMedia();
+        setRefreshing(false);
+    };
+    const filteredMedia = useMemo(() => {
+        if (selectedFilter === 'all')
+            return mediaList;
+        return mediaList.filter(item => item.type === selectedFilter);
+    }, [mediaList, selectedFilter]);
+    const totalStorageBytes = useMemo(() => {
+        return mediaList.reduce((sum, item) => sum + (item.sizeBytes || 0), 0);
+    }, [mediaList]);
+    const handleDeleteItem = async (item) => {
+        await ScreenCapture.deleteMedia(item.uri);
+        await loadMedia();
+        showToast(t('mediaGallery.deleted'));
+    };
+    const handleClearAll = () => {
+        Alert.alert(t('mediaGallery.purgeTitle'), t('mediaGallery.purgeMessage', { count: mediaList.length, size: formatBytes(totalStorageBytes) }), [
+            { text: t('common.cancel'), style: 'cancel' },
+            {
+                text: t('common.clearAll'),
+                style: 'destructive',
+                onPress: async () => {
+                    await ScreenCapture.clearAllMedia();
+                    await loadMedia();
+                    showToast(t('mediaGallery.allPurged'));
+                },
+            },
+        ]);
+    };
+    const handleConvertToGif = async (item) => {
+        const gifResult = await ScreenCapture.convertToGif(item.uri, { fps: 12, width: 480 });
+        if (gifResult) {
+            await loadMedia();
+        }
+    };
+    const renderItem = ({ item }) => {
+        const isVideo = item.type === 'video';
+        const isGif = item.type === 'gif';
+        return (<TouchableScale onPress={() => setSelectedItem(item)} style={galleryStyles.card}>
+        <View style={galleryStyles.thumbnailContainer}>
+          <Image source={{ uri: item.uri }} style={galleryStyles.thumbnail} resizeMode="cover"/>
+          <View style={galleryStyles.typeBadge}>
+            {isVideo ? (<FilmIcon size={11} color={AppColors.sky400}/>) : isGif ? (<GifIcon size={11} color={AppColors.warningAmber}/>) : (<ImageIcon size={11} color={AppColors.emerald500}/>)}
+            <Text style={galleryStyles.typeBadgeText}>
+              {item.format.toUpperCase()}
+            </Text>
+          </View>
+        </View>
+
+        <View style={galleryStyles.cardInfo}>
+          <Text style={galleryStyles.cardTitle} numberOfLines={1}>
+            {item.filename}
+          </Text>
+          <View style={galleryStyles.cardMetaRow}>
+            <Text style={galleryStyles.cardMeta}>
+              {formatBytes(item.sizeBytes)}
+            </Text>
+            <Text style={galleryStyles.cardMetaDot}>•</Text>
+            <Text style={galleryStyles.cardMeta}>
+              {new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+            </Text>
+          </View>
+        </View>
+      </TouchableScale>);
+    };
+    return (<View style={galleryStyles.container}>
+      
+      <View style={galleryStyles.filterBar}>
+        <View style={galleryStyles.chipGroup}>
+          {['all', 'image', 'video', 'gif'].map(filterKey => {
+            const isActive = selectedFilter === filterKey;
+            const label = filterKey === 'all'
+                ? t('mediaGallery.all', { count: mediaList.length })
+                : filterKey === 'image'
+                    ? t('mediaGallery.photos')
+                    : filterKey === 'video'
+                        ? t('mediaGallery.videos')
+                        : t('mediaGallery.gifs');
+            return (<TouchableOpacity key={filterKey} onPress={() => setSelectedFilter(filterKey)} style={[
+                    galleryStyles.chip,
+                    isActive && galleryStyles.chipActive,
+                ]}>
+                <Text style={[
+                    galleryStyles.chipText,
+                    isActive && galleryStyles.chipTextActive,
+                ]}>
+                  {label}
+                </Text>
+              </TouchableOpacity>);
+        })}
+        </View>
+
+        {mediaList.length > 0 && (<TouchableOpacity onPress={handleClearAll} style={galleryStyles.clearBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <TrashIcon size={13} color={AppColors.red500}/>
+            <Text style={galleryStyles.clearBtnText}>{t('mediaGallery.purge', { size: formatBytes(totalStorageBytes) })}</Text>
+          </TouchableOpacity>)}
+      </View>
+
+      
+      <FlatList data={filteredMedia} keyExtractor={item => item.id} renderItem={renderItem} numColumns={2} columnWrapperStyle={galleryStyles.columnWrapper} contentContainerStyle={galleryStyles.listContent} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={AppColors.sky400}/>} ListEmptyComponent={<EmptyState customTitle={t('mediaGallery.noMediaTitle')} customSub={t('mediaGallery.noMediaDesc')}/>}/>
+
+
+      
+      <MediaPreviewModal item={selectedItem} visible={!!selectedItem} onClose={() => setSelectedItem(null)} onDelete={handleDeleteItem} onConvertToGif={handleConvertToGif}/>
+    </View>);
+};
+const { width: WINDOW_WIDTH } = Dimensions.get('window');
+const CARD_WIDTH = (WINDOW_WIDTH - 36) / 2;
+const galleryStyles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors.slate850,
+    },
+    filterBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.borderGlassLight,
+        flexWrap: 'wrap',
+        gap: 8,
+    },
+    chipGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    chip: {
+        paddingHorizontal: 9,
+        paddingVertical: 4.5,
+        borderRadius: 6,
+        backgroundColor: AppColors.whiteAlpha06,
+        borderWidth: 1,
+        borderColor: AppColors.whiteAlpha10,
+    },
+    chipActive: {
+        backgroundColor: `${AppColors.sky400}2E`,
+        borderColor: AppColors.sky400,
+    },
+    chipText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors.slate400,
+    },
+    chipTextActive: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.sky400,
+    },
+    clearBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        backgroundColor: `${AppColors.red500}1F`,
+        borderWidth: 1,
+        borderColor: `${AppColors.red500}4D`,
+    },
+    clearBtnText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors.red500,
+    },
+    listContent: {
+        padding: 12,
+        gap: 12,
+    },
+    columnWrapper: {
+        gap: 12,
+    },
+    card: {
+        width: CARD_WIDTH,
+        backgroundColor: AppColors.slate800,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors.borderGlassLight,
+        overflow: 'hidden',
+    },
+    thumbnailContainer: {
+        width: '100%',
+        height: 110,
+        backgroundColor: AppColors.slate850,
+        position: 'relative',
+    },
+    thumbnail: {
+        width: '100%',
+        height: '100%',
+    },
+    typeBadge: {
+        position: 'absolute',
+        top: 6,
+        right: 6,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        backgroundColor: AppColors.badgeGlassDark,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: AppColors.borderGlassMedium,
+    },
+    typeBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors.slate200,
+    },
+    cardInfo: {
+        padding: 8,
+        gap: 3,
+    },
+    cardTitle: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11.5,
+        color: AppColors.white,
+    },
+    cardMetaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    cardMeta: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors.slate400,
+    },
+    cardMetaDot: {
+        fontSize: 10,
+        color: AppColors.whiteAlpha30,
+    },
+});

package/dist/esm/components/Inspector/MediaPreviewModal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CapturedMediaItem } from '../../capture';
+interface MediaPreviewModalProps {
+    item: CapturedMediaItem | null;
+    visible: boolean;
+    onClose: () => void;
+    onDelete: (item: CapturedMediaItem) => void;
+    onConvertToGif?: (item: CapturedMediaItem) => void;
+}
+export declare const MediaPreviewModal: React.FC<MediaPreviewModalProps>;
+export {};