react-native-inapp-inspector 2.3.16 → 2.3.17

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

@@ -75,18 +75,6 @@ const MainScreen = () => {
         (activeTab === 'logs' && selectedLog != null) ||
         (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
-    const detailAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    (0, react_1.useEffect)(() => {
-        if (isDetailActive) {
-            detailAnim.setValue(0);
-            react_native_1.Animated.spring(detailAnim, {
-                toValue: 1,
-                friction: 8,
-                tension: 65,
-                useNativeDriver: true,
-            }).start();
-        }
-    }, [isDetailActive]);
     const settingsAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     (0, react_1.useEffect)(() => {
         if (settingsPage !== null) {
@@ -95,7 +83,7 @@ const MainScreen = () => {
                 toValue: 1,
                 friction: 8,
                 tension: 65,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }).start();
         }
     }, [settingsPage !== null]);
@@ -107,19 +95,10 @@ const MainScreen = () => {
                 toValue: 1,
                 friction: 8,
                 tension: 65,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }).start();
         }
     }, [isFeedbackOpen]);
-    const tabAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
-    (0, react_1.useEffect)(() => {
-        tabAnim.setValue(0);
-        react_native_1.Animated.timing(tabAnim, {
-            toValue: 1,
-            duration: 150,
-            useNativeDriver: true,
-        }).start();
-    }, [activeTab]);
     return (<>
       {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
             enabled &&
@@ -143,27 +122,11 @@ const MainScreen = () => {
 
               <react_native_1.View style={{ flex: 1 }}>
                 
-                {!isDetailActive && settingsPage === null && !isFeedbackOpen && <TabBar_1.default />}
-
-                {isReady ? (<react_native_1.View style={{ flex: 1 }}>
-                    
-                    <react_native_1.Animated.View style={[
-                {
-                    flex: 1,
-                    opacity: tabAnim,
-                    transform: [
-                        {
-                            translateY: tabAnim.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [6, 0],
-                            }),
-                        },
-                    ],
-                },
-                (isDetailActive || settingsPage !== null || isFeedbackOpen) && {
-                    pointerEvents: 'none',
-                },
-            ]}>
+                <react_native_1.View style={{ flex: 1 }} pointerEvents={isDetailActive || settingsPage !== null || isFeedbackOpen
+            ? 'none'
+            : 'auto'}>
+                  <TabBar_1.default />
+                  {isReady ? (<react_native_1.View style={{ flex: 1 }}>
                       {activeTab === 'apis' && <NetworkTab_1.default />}
                       {activeTab === 'logs' && <ConsoleTab_1.default />}
                       {activeTab === 'analytics' && <AnalyticsTab_1.default />}
@@ -176,31 +139,23 @@ const MainScreen = () => {
                       {react_native_1.Platform.OS === 'android' &&
                 (0, helpers_1.isLocalDebugEnvironment)() &&
                 activeTab === 'debugging' && <DebuggingTab_1.default />}
-                    </react_native_1.Animated.View>
+                    </react_native_1.View>) : (<MainScreenSkeleton />)}
+                </react_native_1.View>
 
-                    
-                    {isDetailActive && (<react_native_1.Animated.View style={[
-                    react_native_1.StyleSheet.absoluteFill,
-                    {
-                        backgroundColor: AppColors_1.AppColors.contentBg,
-                        opacity: detailAnim,
-                        transform: [
-                            {
-                                translateX: detailAnim.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [32, 0],
-                                }),
-                            },
-                        ],
-                    },
-                ]}>
-                        {activeTab === 'apis' && selected != null && (<NetworkDetail_1.default />)}
-                        {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail_1.default event={selectedEvent}/>)}
-                        {activeTab === 'logs' && selectedLog != null && (<LogDetail_1.default />)}
-                        {activeTab === 'redux' && <ReduxDetail_1.default />}
-                        {activeTab === 'crash' && selectedCrash != null && (<CrashDetail_1.default />)}
-                      </react_native_1.Animated.View>)}
-                  </react_native_1.View>) : (<MainScreenSkeleton />)}
+                
+                {isDetailActive && (<react_native_1.View style={[
+                react_native_1.StyleSheet.absoluteFill,
+                {
+                    backgroundColor: AppColors_1.AppColors.contentBg,
+                    zIndex: 10,
+                },
+            ]}>
+                    {activeTab === 'apis' && selected != null && (<NetworkDetail_1.default />)}
+                    {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail_1.default event={selectedEvent}/>)}
+                    {activeTab === 'logs' && selectedLog != null && (<LogDetail_1.default />)}
+                    {activeTab === 'redux' && <ReduxDetail_1.default />}
+                    {activeTab === 'crash' && selectedCrash != null && (<CrashDetail_1.default />)}
+                  </react_native_1.View>)}
 
                 
                 {settingsPage !== null && (<react_native_1.Animated.View style={[
@@ -268,12 +223,12 @@ const MainScreenSkeleton = react_1.default.memo(function MainScreenSkeleton() {
             react_native_1.Animated.timing(shimmerAnim, {
                 toValue: 0.85,
                 duration: 750,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             react_native_1.Animated.timing(shimmerAnim, {
                 toValue: 0.35,
                 duration: 750,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         animation.start();

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

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

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

@@ -0,0 +1,307 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaGalleryTab = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const EmptyState_1 = __importDefault(require("../EmptyState"));
+const NetworkIcons_1 = require("../NetworkIcons");
+const MediaPreviewModal_1 = require("./MediaPreviewModal");
+const capture_1 = require("../../capture");
+const helpers_1 = require("../../helpers");
+const toast_1 = require("../../helpers/toast");
+const i18n_1 = require("../../i18n");
+const MediaGalleryTab = () => {
+    const { t } = (0, i18n_1.useTranslation)();
+    const [mediaList, setMediaList] = (0, react_1.useState)([]);
+    const [refreshing, setRefreshing] = (0, react_1.useState)(false);
+    const [selectedFilter, setSelectedFilter] = (0, react_1.useState)('all');
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
+    const loadMedia = (0, react_1.useCallback)(async () => {
+        try {
+            const items = await capture_1.ScreenCapture.getMediaList();
+            setMediaList(items);
+        }
+        catch {
+            setMediaList([]);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        loadMedia();
+    }, [loadMedia]);
+    const onRefresh = async () => {
+        setRefreshing(true);
+        await loadMedia();
+        setRefreshing(false);
+    };
+    const filteredMedia = (0, react_1.useMemo)(() => {
+        if (selectedFilter === 'all')
+            return mediaList;
+        return mediaList.filter(item => item.type === selectedFilter);
+    }, [mediaList, selectedFilter]);
+    const totalStorageBytes = (0, react_1.useMemo)(() => {
+        return mediaList.reduce((sum, item) => sum + (item.sizeBytes || 0), 0);
+    }, [mediaList]);
+    const handleDeleteItem = async (item) => {
+        await capture_1.ScreenCapture.deleteMedia(item.uri);
+        await loadMedia();
+        (0, toast_1.showToast)(t('mediaGallery.deleted'));
+    };
+    const handleClearAll = () => {
+        react_native_1.Alert.alert(t('mediaGallery.purgeTitle'), t('mediaGallery.purgeMessage', { count: mediaList.length, size: (0, helpers_1.formatBytes)(totalStorageBytes) }), [
+            { text: t('common.cancel'), style: 'cancel' },
+            {
+                text: t('common.clearAll'),
+                style: 'destructive',
+                onPress: async () => {
+                    await capture_1.ScreenCapture.clearAllMedia();
+                    await loadMedia();
+                    (0, toast_1.showToast)(t('mediaGallery.allPurged'));
+                },
+            },
+        ]);
+    };
+    const handleConvertToGif = async (item) => {
+        const gifResult = await capture_1.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_1.default onPress={() => setSelectedItem(item)} style={galleryStyles.card}>
+        <react_native_1.View style={galleryStyles.thumbnailContainer}>
+          <react_native_1.Image source={{ uri: item.uri }} style={galleryStyles.thumbnail} resizeMode="cover"/>
+          <react_native_1.View style={galleryStyles.typeBadge}>
+            {isVideo ? (<NetworkIcons_1.FilmIcon size={11} color={AppColors_1.AppColors.sky400}/>) : isGif ? (<NetworkIcons_1.GifIcon size={11} color={AppColors_1.AppColors.warningAmber}/>) : (<NetworkIcons_1.ImageIcon size={11} color={AppColors_1.AppColors.emerald500}/>)}
+            <react_native_1.Text style={galleryStyles.typeBadgeText}>
+              {item.format.toUpperCase()}
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={galleryStyles.cardInfo}>
+          <react_native_1.Text style={galleryStyles.cardTitle} numberOfLines={1}>
+            {item.filename}
+          </react_native_1.Text>
+          <react_native_1.View style={galleryStyles.cardMetaRow}>
+            <react_native_1.Text style={galleryStyles.cardMeta}>
+              {(0, helpers_1.formatBytes)(item.sizeBytes)}
+            </react_native_1.Text>
+            <react_native_1.Text style={galleryStyles.cardMetaDot}>•</react_native_1.Text>
+            <react_native_1.Text style={galleryStyles.cardMeta}>
+              {new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+      </TouchableScale_1.default>);
+    };
+    return (<react_native_1.View style={galleryStyles.container}>
+      
+      <react_native_1.View style={galleryStyles.filterBar}>
+        <react_native_1.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 (<react_native_1.TouchableOpacity key={filterKey} onPress={() => setSelectedFilter(filterKey)} style={[
+                    galleryStyles.chip,
+                    isActive && galleryStyles.chipActive,
+                ]}>
+                <react_native_1.Text style={[
+                    galleryStyles.chipText,
+                    isActive && galleryStyles.chipTextActive,
+                ]}>
+                  {label}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>);
+        })}
+        </react_native_1.View>
+
+        {mediaList.length > 0 && (<react_native_1.TouchableOpacity onPress={handleClearAll} style={galleryStyles.clearBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <NetworkIcons_1.TrashIcon size={13} color={AppColors_1.AppColors.red500}/>
+            <react_native_1.Text style={galleryStyles.clearBtnText}>{t('mediaGallery.purge', { size: (0, helpers_1.formatBytes)(totalStorageBytes) })}</react_native_1.Text>
+          </react_native_1.TouchableOpacity>)}
+      </react_native_1.View>
+
+      
+      <react_native_1.FlatList data={filteredMedia} keyExtractor={item => item.id} renderItem={renderItem} numColumns={2} columnWrapperStyle={galleryStyles.columnWrapper} contentContainerStyle={galleryStyles.listContent} refreshControl={<react_native_1.RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={AppColors_1.AppColors.sky400}/>} ListEmptyComponent={<EmptyState_1.default customTitle={t('mediaGallery.noMediaTitle')} customSub={t('mediaGallery.noMediaDesc')}/>}/>
+
+
+      
+      <MediaPreviewModal_1.MediaPreviewModal item={selectedItem} visible={!!selectedItem} onClose={() => setSelectedItem(null)} onDelete={handleDeleteItem} onConvertToGif={handleConvertToGif}/>
+    </react_native_1.View>);
+};
+exports.MediaGalleryTab = MediaGalleryTab;
+const { width: WINDOW_WIDTH } = react_native_1.Dimensions.get('window');
+const CARD_WIDTH = (WINDOW_WIDTH - 36) / 2;
+const galleryStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors_1.AppColors.slate850,
+    },
+    filterBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.borderGlassLight,
+        flexWrap: 'wrap',
+        gap: 8,
+    },
+    chipGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    chip: {
+        paddingHorizontal: 9,
+        paddingVertical: 4.5,
+        borderRadius: 6,
+        backgroundColor: AppColors_1.AppColors.whiteAlpha06,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.whiteAlpha10,
+    },
+    chipActive: {
+        backgroundColor: `${AppColors_1.AppColors.sky400}2E`,
+        borderColor: AppColors_1.AppColors.sky400,
+    },
+    chipText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.slate400,
+    },
+    chipTextActive: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.sky400,
+    },
+    clearBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        backgroundColor: `${AppColors_1.AppColors.red500}1F`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.red500}4D`,
+    },
+    clearBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.red500,
+    },
+    listContent: {
+        padding: 12,
+        gap: 12,
+    },
+    columnWrapper: {
+        gap: 12,
+    },
+    card: {
+        width: CARD_WIDTH,
+        backgroundColor: AppColors_1.AppColors.slate800,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.borderGlassLight,
+        overflow: 'hidden',
+    },
+    thumbnailContainer: {
+        width: '100%',
+        height: 110,
+        backgroundColor: AppColors_1.AppColors.slate850,
+        position: 'relative',
+    },
+    thumbnail: {
+        width: '100%',
+        height: '100%',
+    },
+    typeBadge: {
+        position: 'absolute',
+        top: 6,
+        right: 6,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        backgroundColor: AppColors_1.AppColors.badgeGlassDark,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.borderGlassMedium,
+    },
+    typeBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors_1.AppColors.slate200,
+    },
+    cardInfo: {
+        padding: 8,
+        gap: 3,
+    },
+    cardTitle: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.white,
+    },
+    cardMetaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    cardMeta: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.slate400,
+    },
+    cardMetaDot: {
+        fontSize: 10,
+        color: AppColors_1.AppColors.whiteAlpha30,
+    },
+});

package/dist/commonjs/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 {};