react-native-inapp-inspector 2.3.18 → 2.3.19

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

@@ -1,9 +1,42 @@
 "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 });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
 const styles_1 = __importDefault(require("../../styles"));
@@ -15,11 +48,64 @@ const reduxLogger_1 = require("../../customHooks/reduxLogger");
 const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
 const helpers_1 = require("../../helpers");
 const TabBar = react_1.default.memo(() => {
-    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = (0, InspectorContext_1.useInspector)();
+    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, mediaCount, } = (0, InspectorContext_1.useInspector)();
     const isReduxAvail = (0, reduxLogger_1.isReduxConnected)();
     const isAnalyticsAvail = (0, analyticsLogger_1.isAnalyticsConnected)();
-    return (<react_native_1.View style={styles_1.default.tabBarContainer}>
-      <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
+    const isMediaActive = activeTab === 'media';
+    const showMediaTab = (tabVisibility?.media ?? true) && mediaCount > 0;
+    const scrollViewRef = (0, react_1.useRef)(null);
+    const [canScrollLeft, setCanScrollLeft] = (0, react_1.useState)(false);
+    const [canScrollRight, setCanScrollRight] = (0, react_1.useState)(true);
+    const scrollOffsetRef = (0, react_1.useRef)(0);
+    const handleScroll = (event) => {
+        const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
+        const x = contentOffset.x;
+        scrollOffsetRef.current = x;
+        const hasLeft = x > 8;
+        const hasRight = x < contentSize.width - layoutMeasurement.width - 8;
+        if (canScrollLeft !== hasLeft)
+            setCanScrollLeft(hasLeft);
+        if (canScrollRight !== hasRight)
+            setCanScrollRight(hasRight);
+    };
+    const scrollTabs = (offset) => {
+        scrollViewRef.current?.scrollTo({
+            x: Math.max(0, scrollOffsetRef.current + offset),
+            animated: true,
+        });
+    };
+    return (<react_native_1.View style={[
+            styles_1.default.tabBarContainer,
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingHorizontal: 0,
+            },
+        ]}>
+      
+      {canScrollLeft && (<react_native_1.TouchableOpacity onPress={() => scrollTabs(-160)} hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }} activeOpacity={0.7} style={{
+                paddingLeft: 6,
+                paddingRight: 2,
+                justifyContent: 'center',
+                alignItems: 'center',
+            }}>
+          <react_native_1.View style={{
+                width: 22,
+                height: 22,
+                borderRadius: 11,
+                backgroundColor: '#E5E7EB',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+            <NetworkIcons_1.ChevronIcon direction="left" size={13} color={AppColors_1.AppColors.purple}/>
+          </react_native_1.View>
+        </react_native_1.TouchableOpacity>)}
+
+      
+      <react_native_1.ScrollView ref={scrollViewRef} horizontal showsHorizontalScrollIndicator={false} onScroll={handleScroll} scrollEventThrottle={16} style={{ flex: 1 }} contentContainerStyle={{
+            paddingLeft: canScrollLeft ? 4 : 12,
+            paddingRight: showMediaTab ? 6 : 12,
+        }}>
         {[
             {
                 id: 1,
@@ -183,6 +269,82 @@ const TabBar = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })}
       </react_native_1.ScrollView>
+
+      
+      {canScrollRight && (<react_native_1.TouchableOpacity onPress={() => scrollTabs(160)} hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }} activeOpacity={0.7} style={{
+                paddingLeft: 2,
+                paddingRight: showMediaTab ? 4 : 8,
+                justifyContent: 'center',
+                alignItems: 'center',
+            }}>
+          <react_native_1.View style={{
+                width: 22,
+                height: 22,
+                borderRadius: 11,
+                backgroundColor: '#E5E7EB',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+            <NetworkIcons_1.ChevronIcon direction="right" size={13} color={AppColors_1.AppColors.purple}/>
+          </react_native_1.View>
+        </react_native_1.TouchableOpacity>)}
+
+      
+      {showMediaTab && (<react_native_1.View style={{
+                paddingLeft: 6,
+                paddingRight: 10,
+                borderLeftWidth: 1,
+                borderLeftColor: '#E5E7EB',
+                backgroundColor: '#ffffff',
+                justifyContent: 'center',
+                shadowColor: '#000000',
+                shadowOffset: { width: -3, height: 0 },
+                shadowOpacity: 0.12,
+                shadowRadius: 4,
+                elevation: 4,
+                zIndex: 10,
+            }}>
+          <TouchableScale_1.default key="media" onPress={() => {
+                switchActiveTab('media');
+            }} accessibilityRole="button" accessibilityLabel="Media Gallery" style={[
+                styles_1.default.contentTabButton,
+                {
+                    marginRight: 0,
+                    borderRadius: 8,
+                    backgroundColor: isMediaActive ? AppColors_1.AppColors.purple : '#eeeeee',
+                    borderColor: isMediaActive ? AppColors_1.AppColors.purple : '#E5E7EB',
+                    borderWidth: 1,
+                    paddingHorizontal: 10,
+                    paddingVertical: 7,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+                isMediaActive && styles_1.default.contentTabButtonActive,
+            ]}>
+            <react_native_1.View style={{
+                position: 'relative',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+              <NetworkIcons_1.ScreencastIcon color={isMediaActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={15}/>
+              {mediaCount > 0 && (<react_native_1.View style={{
+                    position: 'absolute',
+                    top: -3,
+                    right: -4,
+                    width: 7,
+                    height: 7,
+                    borderRadius: 3.5,
+                    backgroundColor: isMediaActive
+                        ? AppColors_1.AppColors.emerald400
+                        : AppColors_1.AppColors.purple,
+                    borderWidth: 1.2,
+                    borderColor: isMediaActive
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.white,
+                }}/>)}
+            </react_native_1.View>
+          </TouchableScale_1.default>
+        </react_native_1.View>)}
     </react_native_1.View>);
 });
 exports.default = TabBar;

package/dist/commonjs/components/JsonViewer.js

@@ -179,7 +179,7 @@ const JsonViewer = react_1.default.memo(({ data, search, forceOpen, defaultExpan
     return (<react_native_1.View style={[localStyles.container, fullHeight && { flex: 1 }]}>
       
       {!hideTabs && (<react_native_1.View style={localStyles.toolbar}>
-          <SegmentedTabs_1.default tabs={[
+          <SegmentedTabs_1.default style={{ flex: 1, minWidth: 0, marginRight: 8 }} tabs={[
                 {
                     key: 'pretty',
                     label: t('network.jsonViewer.pretty'),
@@ -296,8 +296,9 @@ const localStyles = react_native_1.StyleSheet.create({
         backgroundColor: AppColors_1.AppColors.slate50,
         borderBottomWidth: 1,
         borderBottomColor: AppColors_1.AppColors.slate200,
-        paddingHorizontal: 12,
-        paddingVertical: 8,
+        paddingHorizontal: 8,
+        paddingVertical: 6,
+        gap: 8,
     },
     contentWrapper: {
         backgroundColor: AppColors_1.AppColors.white,

package/dist/commonjs/components/NetworkIcons.d.ts

@@ -151,3 +151,7 @@ export declare const PlayIcon: ({ color, size, }: IconProps) => React.JSX.Elemen
 export declare const PauseIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const ImageIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const FilmIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ScreencastIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ListIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const GridIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const MinimizeWindowIcon: ({ color, size }: IconProps) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 exports.StackTraceIcon = exports.LayoutIcon = exports.ChipIcon = exports.SkullIcon = exports.ShieldAlertIcon = exports.CrashIcon = exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.StarIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
-exports.FilmIcon = exports.ImageIcon = exports.PauseIcon = exports.PlayIcon = exports.GifIcon = exports.MicrophoneIcon = exports.VideoCameraIcon = exports.CameraIcon = exports.LifeBuoyIcon = exports.SendIcon = exports.HelpCircleIcon = exports.HeadphonesIcon = exports.TurtleIcon = exports.RocketIcon = exports.UnlockIcon = exports.QrCodeIcon = exports.LockIcon = exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = exports.DiagnosticsIcon = void 0;
+exports.MinimizeWindowIcon = exports.GridIcon = exports.ListIcon = exports.ScreencastIcon = exports.FilmIcon = exports.ImageIcon = exports.PauseIcon = exports.PlayIcon = exports.GifIcon = exports.MicrophoneIcon = exports.VideoCameraIcon = exports.CameraIcon = exports.LifeBuoyIcon = exports.SendIcon = exports.HelpCircleIcon = exports.HeadphonesIcon = exports.TurtleIcon = exports.RocketIcon = exports.UnlockIcon = exports.QrCodeIcon = exports.LockIcon = exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = exports.DiagnosticsIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const AppColors_1 = require("../styles/AppColors");
@@ -1010,3 +1010,28 @@ const FilmIcon = ({ color = AppColors_1.AppColors.white, size = 18, }) => (<reac
     <react_native_svg_1.Line x1="17" y1="7" x2="22" y2="7" stroke={color} strokeWidth="2"/>
   </react_native_svg_1.default>);
 exports.FilmIcon = FilmIcon;
+const ScreencastIcon = ({ color = AppColors_1.AppColors.white, size = 18, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 20h.01" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.ScreencastIcon = ScreencastIcon;
+const ListIcon = ({ color = AppColors_1.AppColors.white, size = 14 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Line x1="8" y1="6" x2="21" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    <react_native_svg_1.Line x1="8" y1="12" x2="21" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    <react_native_svg_1.Line x1="8" y1="18" x2="21" y2="18" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    <react_native_svg_1.Circle cx="4" cy="6" r="1.5" fill={color}/>
+    <react_native_svg_1.Circle cx="4" cy="12" r="1.5" fill={color}/>
+    <react_native_svg_1.Circle cx="4" cy="18" r="1.5" fill={color}/>
+  </react_native_svg_1.default>);
+exports.ListIcon = ListIcon;
+const GridIcon = ({ color = AppColors_1.AppColors.white, size = 14 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Rect x="14" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+  </react_native_svg_1.default>);
+exports.GridIcon = GridIcon;
+const MinimizeWindowIcon = ({ color = AppColors_1.AppColors.white, size = 14 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.MinimizeWindowIcon = MinimizeWindowIcon;

package/dist/commonjs/components/SegmentedTabs.js

@@ -16,6 +16,7 @@ const SegmentedTabs = react_1.default.memo(({ tabs, activeKey, onChange, style }
             borderWidth: 1,
             borderColor: AppColors_1.AppColors.dividerColor,
             gap: 3,
+            minWidth: 0,
         },
         style,
     ]}>

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.18";
+export declare const LIB_VERSION = "2.3.19";

package/dist/commonjs/constants/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '2.3.18';
+exports.LIB_VERSION = '2.3.19';

package/dist/commonjs/i18n/locales/en.json

@@ -16,6 +16,8 @@
         "viewOnNpm": "View on NPM",
         "later": "Later",
         "source": "SOURCE",
+        "minimize": "Minimize",
+        "tapToExpand": "Tap to expand",
         "open": "Open",
         "openInBrowser": "Open in Browser",
         "openInBrowserPrompt": "Are you sure you want to open this URL in your external browser?"
@@ -54,7 +56,7 @@
         "crash": "Crash",
         "device": "Device",
         "storage": "Storage",
-        "media": "Media"
+        "media": "Screencast"
     },
     "settings": {
         "mainTitle": "Settings & Modules",
@@ -1109,14 +1111,30 @@
         "allPurged": "All captured media purged",
         "converting": "Converting...",
         "convertToGif": "Convert to GIF",
+        "playVideo": "Play Video",
+        "playError": "Unable to play video",
         "convertedSuccess": "Converted to Animated GIF successfully!",
         "convertFailed": "Failed to convert to GIF",
         "share": "Share",
         "copyUri": "Copy URI",
         "uriCopied": "File URI copied to clipboard",
         "delete": "Delete",
+        "deleteSelected": "Delete ({{count}})",
+        "deleteSelectedTitle": "Delete Selected",
+        "deleteSelectedMessage": "Are you sure you want to delete {{count}} selected media items?",
+        "deletedCount": "Deleted {{count}} media items",
         "deleteTitle": "Delete Media",
         "deleteMessage": "Are you sure you want to delete {{filename}}?",
-        "shareUnavailable": "Sharing not available on this device"
+        "shareUnavailable": "Sharing not available on this device",
+        "showingResults": "Showing {{count}} results",
+        "showingFilteredResults": "Showing {{count}} of {{total}} results",
+        "selectedOfResults": "Selected {{selected}} of {{total}} results",
+        "minimize": "Minimize",
+        "expand": "Expand Fullscreen",
+        "collapse": "Exit Fullscreen",
+        "speed": "Speed",
+        "loop": "Loop",
+        "pause": "Pause",
+        "play": "Play"
     }
 }

package/dist/commonjs/index.js

@@ -60,6 +60,7 @@ const performanceTracker_1 = require("./customHooks/performanceTracker");
 const bundleAnalyzer_1 = require("./customHooks/bundleAnalyzer");
 const NativeInspector_2 = require("./native/NativeInspector");
 const remoteConfig_1 = require("./helpers/remoteConfig");
+const capture_1 = require("./capture");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, environment, initialVisible = false, visible: controlledVisible, remoteConfig, }) => {
@@ -71,6 +72,11 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
     const [modalAnimationType, setModalAnimationType] = (0, react_1.useState)('slide');
     const [logs, setLogs] = (0, react_1.useState)([]);
     const [visible, setVisible] = (0, react_1.useState)(controlledVisible ?? initialVisible ?? false);
+    const [isMinimized, setIsMinimized] = (0, react_1.useState)(false);
+    const minimizeInspector = (0, react_1.useCallback)(() => {
+        setIsMinimized(true);
+        setVisible(false);
+    }, []);
     (0, react_1.useEffect)(() => {
         if (controlledVisible !== undefined) {
             setVisible(controlledVisible);
@@ -132,6 +138,24 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
     const [lastReadLogsCount, setLastReadLogsCount] = (0, react_1.useState)(0);
     const [lastReadApisCount, setLastReadApisCount] = (0, react_1.useState)(0);
     const [lastReadCrashesCount, setLastReadCrashesCount] = (0, react_1.useState)(0);
+    const [mediaCount, setMediaCount] = (0, react_1.useState)(0);
+    const refreshMediaCount = (0, react_1.useCallback)(async () => {
+        try {
+            const items = await capture_1.ScreenCapture.getMediaList();
+            const count = items ? items.length : 0;
+            setMediaCount(count);
+            return count;
+        }
+        catch {
+            setMediaCount(0);
+            return 0;
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            refreshMediaCount();
+        }
+    }, [visible, refreshMediaCount]);
     const [crashRecords, setCrashRecords] = (0, react_1.useState)(() => (0, crashHandler_1.getCrashRecords)());
     const [selectedCrash, setSelectedCrash] = (0, react_1.useState)(null);
     const [maxCrashLogs, setMaxCrashLogs] = (0, react_1.useState)(50);
@@ -212,6 +236,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         device: false,
         storage: false,
         debugging: false,
+        media: true,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = (0, react_1.useState)(250);
     const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = (0, react_1.useState)(150);
@@ -266,6 +291,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             device: false,
             storage: false,
             debugging: false,
+            media: true,
         });
         setDefaultTab('apis');
         setIsAutoRamLimitEnabled(true);
@@ -728,10 +754,11 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
             react_native_1.Animated.timing(fabShineAnim, {
                 toValue: 1,
-                duration: 1100,
+                duration: 3200,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
                 useNativeDriver: false,
             }),
-            react_native_1.Animated.delay(1600),
+            react_native_1.Animated.delay(3500),
             react_native_1.Animated.timing(fabShineAnim, {
                 toValue: 0,
                 duration: 0,
@@ -776,31 +803,10 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
     const isNativeModule = (0, react_1.useMemo)(() => (0, NativeInspector_2.isNativeModuleAvailable)(), []);
     const useNativeFab = (react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') && isNativeModule;
     (0, react_1.useEffect)(() => {
-        if (!useNativeFab || !enabled) {
-            if (useNativeFab) {
-                (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
-            }
-            return;
-        }
-        if (visible) {
+        if (useNativeFab) {
             (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
         }
-        else {
-            (0, NativeInspector_2.showNativeFloatingButton)().catch(() => { });
-            (0, NativeInspector_2.setNativeFloatingButtonBadge)(logs.length > 0 || analyticsEvents.length > 0).catch(() => { });
-        }
-        return () => {
-            if (useNativeFab) {
-                (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
-            }
-        };
-    }, [
-        useNativeFab,
-        enabled,
-        visible,
-        logs.length,
-        analyticsEvents.length,
-    ]);
+    }, [useNativeFab, visible]);
     (0, react_1.useEffect)(() => {
         if (!useNativeFab)
             return;
@@ -1527,8 +1533,9 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             analytics: `${searchedLogs.filter(l => l.message.toLowerCase().includes('[analytics error]')).length}/${total}`,
         };
     }, [visibleConsoleLogs, logSearch]);
-    function closeModal() {
+    const closeModal = (0, react_1.useCallback)(() => {
         setVisible(false);
+        setIsMinimized(false);
         setTimeout(() => {
             setSelected(null);
             setSelectedEvent(null);
@@ -1537,7 +1544,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             setSelectedReduxAction(null);
             setSelectedCrash(null);
         }, 300);
-    }
+    }, []);
     function handleClearAll() {
         (0, networkLogger_1.clearNetworkLogs)();
         setLogs([]);
@@ -1674,6 +1681,9 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         visible,
         setVisible,
         closeModal,
+        isMinimized,
+        setIsMinimized,
+        minimizeInspector,
         isReady,
         enabled,
         isEnabled: enabled,
@@ -1691,6 +1701,8 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         toggleTabVisibility,
         lastReadApisCount,
         lastReadLogsCount,
+        mediaCount,
+        refreshMediaCount,
         selected,
         setSelected,
         selectedEvent,
@@ -1856,6 +1868,8 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         toggleTabVisibility,
         lastReadApisCount,
         lastReadLogsCount,
+        mediaCount,
+        refreshMediaCount,
         selected,
         selectedEvent,
         selectedLog,
@@ -1946,6 +1960,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         deviceFreeRamMb,
         reduxAutoRefresh,
         reduxExpandDepth,
+        isMinimized,
     ]);
     return (<InspectorContext_1.InspectorContext.Provider value={contextValue}>
       <MainScreen_1.default />
@@ -2148,8 +2163,8 @@ Object.defineProperty(exports, "I18nextProvider", { enumerable: true, get: funct
 var remoteConfig_2 = require("./helpers/remoteConfig");
 Object.defineProperty(exports, "fetchRemoteConfigModuleStatus", { enumerable: true, get: function () { return remoteConfig_2.fetchRemoteConfigModuleStatus; } });
 Object.defineProperty(exports, "isFirebaseRemoteConfigAvailable", { enumerable: true, get: function () { return remoteConfig_2.isFirebaseRemoteConfigAvailable; } });
-var capture_1 = require("./capture");
-Object.defineProperty(exports, "ScreenCapture", { enumerable: true, get: function () { return capture_1.ScreenCapture; } });
-Object.defineProperty(exports, "ScreenRecorder", { enumerable: true, get: function () { return capture_1.ScreenRecorder; } });
+var capture_2 = require("./capture");
+Object.defineProperty(exports, "ScreenCapture", { enumerable: true, get: function () { return capture_2.ScreenCapture; } });
+Object.defineProperty(exports, "ScreenRecorder", { enumerable: true, get: function () { return capture_2.ScreenRecorder; } });
 var version_1 = require("./constants/version");
 Object.defineProperty(exports, "LIB_VERSION", { enumerable: true, get: function () { return version_1.LIB_VERSION; } });

package/dist/commonjs/native/NativeInspector.d.ts

@@ -100,6 +100,7 @@ export interface RecordingOptions {
 }
 export interface RecordingResult {
     uri: string;
+    thumbnailUri?: string;
     format: 'mp4' | 'gif';
     durationMs: number;
     hasAudio: boolean;
@@ -118,6 +119,7 @@ export interface CapturedMediaItem {
     type: 'image' | 'video' | 'gif';
     format: string;
     uri: string;
+    thumbnailUri?: string;
     filename: string;
     sizeBytes: number;
     timestamp: number;
@@ -130,6 +132,7 @@ export declare const takeNativeScreenshot: (options?: ScreenshotOptions) => Prom
 export declare const startNativeVideoRecording: (options?: RecordingOptions) => Promise<boolean>;
 export declare const stopNativeVideoRecording: () => Promise<RecordingResult | null>;
 export declare const isNativeRecordingActive: () => Promise<boolean>;
+export declare const playNativeVideo: (videoUri: string) => Promise<boolean>;
 export declare const convertNativeVideoToGif: (videoUri: string, options?: GifConversionOptions) => Promise<RecordingResult | null>;
 export declare const fetchCapturedMediaList: () => Promise<CapturedMediaItem[]>;
 export declare const deleteCapturedMediaFile: (uri: string) => Promise<boolean>;

package/dist/commonjs/native/NativeInspector.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearAllCapturedMediaFiles = exports.deleteCapturedMediaFile = exports.fetchCapturedMediaList = exports.convertNativeVideoToGif = exports.isNativeRecordingActive = exports.stopNativeVideoRecording = exports.startNativeVideoRecording = exports.takeNativeScreenshot = exports.fetchNativeCachedPage = exports.pushNativeLogRecord = exports.getNativeSystemMetrics = exports.triggerNativeHaptic = exports.setNativeStorageItem = exports.getNativeStorageItem = exports.subscribeNativeDeviceShake = exports.getNativeFpsMetrics = exports.stopNativeFpsMonitoring = exports.startNativeFpsMonitoring = exports.subscribeNativeFloatingButtonPress = exports.setNativeFloatingButtonBadge = exports.hideNativeFloatingButton = exports.showNativeFloatingButton = exports.subscribeNativeCrashes = exports.enableNativeCrashProtection = exports.getNativeDeviceMetrics = exports.isNativeModuleAvailable = void 0;
+exports.clearAllCapturedMediaFiles = exports.deleteCapturedMediaFile = exports.fetchCapturedMediaList = exports.convertNativeVideoToGif = exports.playNativeVideo = exports.isNativeRecordingActive = exports.stopNativeVideoRecording = exports.startNativeVideoRecording = exports.takeNativeScreenshot = exports.fetchNativeCachedPage = exports.pushNativeLogRecord = exports.getNativeSystemMetrics = exports.triggerNativeHaptic = exports.setNativeStorageItem = exports.getNativeStorageItem = exports.subscribeNativeDeviceShake = exports.getNativeFpsMetrics = exports.stopNativeFpsMonitoring = exports.startNativeFpsMonitoring = exports.subscribeNativeFloatingButtonPress = exports.setNativeFloatingButtonBadge = exports.hideNativeFloatingButton = exports.showNativeFloatingButton = exports.subscribeNativeCrashes = exports.enableNativeCrashProtection = exports.getNativeDeviceMetrics = exports.isNativeModuleAvailable = void 0;
 const react_native_1 = require("react-native");
 const NativeNetworkInspector_1 = __importDefault(require("./NativeNetworkInspector"));
 const NativeModule = NativeNetworkInspector_1.default || react_native_1.NativeModules.NetworkInspectorModule;
@@ -345,6 +345,19 @@ const isNativeRecordingActive = async () => {
     }
 };
 exports.isNativeRecordingActive = isNativeRecordingActive;
+const playNativeVideo = async (videoUri) => {
+    if (!NativeModule || !NativeModule.playVideo) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.playVideo(videoUri);
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
+exports.playNativeVideo = playNativeVideo;
 const convertNativeVideoToGif = async (videoUri, options) => {
     if (!NativeModule || !NativeModule.convertToGif) {
         return null;

package/dist/commonjs/native/NativeNetworkInspector.d.ts

@@ -20,6 +20,7 @@ export interface Spec extends TurboModule {
     stopVideoRecording(): Promise<Object>;
     isRecording(): Promise<boolean>;
     convertToGif(videoUri: string, options: Object): Promise<Object>;
+    playVideo(videoUri: string): Promise<boolean>;
     getCapturedMedia(): Promise<string>;
     deleteCapturedMedia(uri: string): Promise<boolean>;
     clearAllCapturedMedia(): Promise<boolean>;