react-native-inapp-inspector 2.3.18 → 2.3.19

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

@@ -1,20 +1,73 @@
-import React from 'react';
-import { Platform, ScrollView, Text, View, } from 'react-native';
+import React, { useRef, useState } from 'react';
+import { Platform, ScrollView, Text, TouchableOpacity, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import TouchableScale from '../TouchableScale';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, ScreencastIcon, ChevronIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 import { isLocalDebugEnvironment } from '../../helpers';
 const TabBar = React.memo(() => {
-    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = useInspector();
+    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, mediaCount, } = useInspector();
     const isReduxAvail = isReduxConnected();
     const isAnalyticsAvail = isAnalyticsConnected();
-    return (<View style={styles.tabBarContainer}>
-      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
+    const isMediaActive = activeTab === 'media';
+    const showMediaTab = (tabVisibility?.media ?? true) && mediaCount > 0;
+    const scrollViewRef = useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(true);
+    const scrollOffsetRef = 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 (<View style={[
+            styles.tabBarContainer,
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingHorizontal: 0,
+            },
+        ]}>
+      
+      {canScrollLeft && (<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',
+            }}>
+          <View style={{
+                width: 22,
+                height: 22,
+                borderRadius: 11,
+                backgroundColor: '#E5E7EB',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+            <ChevronIcon direction="left" size={13} color={AppColors.purple}/>
+          </View>
+        </TouchableOpacity>)}
+
+      
+      <ScrollView ref={scrollViewRef} horizontal showsHorizontalScrollIndicator={false} onScroll={handleScroll} scrollEventThrottle={16} style={{ flex: 1 }} contentContainerStyle={{
+            paddingLeft: canScrollLeft ? 4 : 12,
+            paddingRight: showMediaTab ? 6 : 12,
+        }}>
         {[
             {
                 id: 1,
@@ -178,6 +231,82 @@ const TabBar = React.memo(() => {
               </TouchableScale>);
         })}
       </ScrollView>
+
+      
+      {canScrollRight && (<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',
+            }}>
+          <View style={{
+                width: 22,
+                height: 22,
+                borderRadius: 11,
+                backgroundColor: '#E5E7EB',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+            <ChevronIcon direction="right" size={13} color={AppColors.purple}/>
+          </View>
+        </TouchableOpacity>)}
+
+      
+      {showMediaTab && (<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 key="media" onPress={() => {
+                switchActiveTab('media');
+            }} accessibilityRole="button" accessibilityLabel="Media Gallery" style={[
+                styles.contentTabButton,
+                {
+                    marginRight: 0,
+                    borderRadius: 8,
+                    backgroundColor: isMediaActive ? AppColors.purple : '#eeeeee',
+                    borderColor: isMediaActive ? AppColors.purple : '#E5E7EB',
+                    borderWidth: 1,
+                    paddingHorizontal: 10,
+                    paddingVertical: 7,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+                isMediaActive && styles.contentTabButtonActive,
+            ]}>
+            <View style={{
+                position: 'relative',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+              <ScreencastIcon color={isMediaActive ? AppColors.white : AppColors.grayText} size={15}/>
+              {mediaCount > 0 && (<View style={{
+                    position: 'absolute',
+                    top: -3,
+                    right: -4,
+                    width: 7,
+                    height: 7,
+                    borderRadius: 3.5,
+                    backgroundColor: isMediaActive
+                        ? AppColors.emerald400
+                        : AppColors.purple,
+                    borderWidth: 1.2,
+                    borderColor: isMediaActive
+                        ? AppColors.purple
+                        : AppColors.white,
+                }}/>)}
+            </View>
+          </TouchableScale>
+        </View>)}
     </View>);
 });
 export default TabBar;

package/dist/esm/components/JsonViewer.js

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

package/dist/esm/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/esm/components/NetworkIcons.js

@@ -828,3 +828,24 @@ export const FilmIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width
     <Line x1="17" y1="17" x2="22" y2="17" stroke={color} strokeWidth="2"/>
     <Line x1="17" y1="7" x2="22" y2="7" stroke={color} strokeWidth="2"/>
   </Svg>);
+export const ScreencastIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <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"/>
+    <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"/>
+  </Svg>);
+export const ListIcon = ({ color = AppColors.white, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Line x1="8" y1="6" x2="21" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    <Line x1="8" y1="12" x2="21" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    <Line x1="8" y1="18" x2="21" y2="18" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    <Circle cx="4" cy="6" r="1.5" fill={color}/>
+    <Circle cx="4" cy="12" r="1.5" fill={color}/>
+    <Circle cx="4" cy="18" r="1.5" fill={color}/>
+  </Svg>);
+export const GridIcon = ({ color = AppColors.white, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <Rect x="14" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+  </Svg>);
+export const MinimizeWindowIcon = ({ color = AppColors.white, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);

package/dist/esm/components/SegmentedTabs.js

@@ -11,6 +11,7 @@ const SegmentedTabs = React.memo(({ tabs, activeKey, onChange, style }) => (<Vie
             borderWidth: 1,
             borderColor: AppColors.dividerColor,
             gap: 3,
+            minWidth: 0,
         },
         style,
     ]}>

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

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

package/dist/esm/constants/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '2.3.18';
+export const LIB_VERSION = '2.3.19';

package/dist/esm/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/esm/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { Alert, Animated, PanResponder, Platform, UIManager, LogBox, } from 'react-native';
+import { Alert, Animated, Easing, PanResponder, Platform, UIManager, LogBox, } from 'react-native';
 import { NavigationContext } from '@react-navigation/native';
 import { I18nextProvider, i18n } from './i18n';
 import ErrorBoundary from './components/ErrorBoundary';
@@ -17,8 +17,9 @@ import { subscribeAnalyticsEvents, clearAnalyticsEvents, autoSetupAnalyticsLogge
 import { getReduxState, subscribeReduxState, setReduxAutoRefresh, getLastActionForReducer, clearActionHistory, isReduxConnected, setReduxModuleEnabled, } from './customHooks/reduxLogger';
 import { setPerformanceModuleEnabled } from './customHooks/performanceTracker';
 import { setBundleModuleEnabled } from './customHooks/bundleAnalyzer';
-import { showNativeFloatingButton, hideNativeFloatingButton, setNativeFloatingButtonBadge, subscribeNativeFloatingButtonPress, subscribeNativeDeviceShake, isNativeModuleAvailable, } from './native/NativeInspector';
+import { hideNativeFloatingButton, subscribeNativeFloatingButtonPress, subscribeNativeDeviceShake, isNativeModuleAvailable, } from './native/NativeInspector';
 import { fetchRemoteConfigModuleStatus, } from './helpers/remoteConfig';
+import { ScreenCapture } from './capture';
 import { LIB_VERSION } from './constants';
 import { toggleGlobalTheme } from './styles';
 const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, environment, initialVisible = false, visible: controlledVisible, remoteConfig, }) => {
@@ -30,6 +31,11 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
     const [modalAnimationType, setModalAnimationType] = useState('slide');
     const [logs, setLogs] = useState([]);
     const [visible, setVisible] = useState(controlledVisible ?? initialVisible ?? false);
+    const [isMinimized, setIsMinimized] = useState(false);
+    const minimizeInspector = useCallback(() => {
+        setIsMinimized(true);
+        setVisible(false);
+    }, []);
     useEffect(() => {
         if (controlledVisible !== undefined) {
             setVisible(controlledVisible);
@@ -91,6 +97,24 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
     const [lastReadLogsCount, setLastReadLogsCount] = useState(0);
     const [lastReadApisCount, setLastReadApisCount] = useState(0);
     const [lastReadCrashesCount, setLastReadCrashesCount] = useState(0);
+    const [mediaCount, setMediaCount] = useState(0);
+    const refreshMediaCount = useCallback(async () => {
+        try {
+            const items = await ScreenCapture.getMediaList();
+            const count = items ? items.length : 0;
+            setMediaCount(count);
+            return count;
+        }
+        catch {
+            setMediaCount(0);
+            return 0;
+        }
+    }, []);
+    useEffect(() => {
+        if (visible) {
+            refreshMediaCount();
+        }
+    }, [visible, refreshMediaCount]);
     const [crashRecords, setCrashRecords] = useState(() => getCrashRecords());
     const [selectedCrash, setSelectedCrash] = useState(null);
     const [maxCrashLogs, setMaxCrashLogs] = useState(50);
@@ -171,6 +195,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         device: false,
         storage: false,
         debugging: false,
+        media: true,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = useState(250);
     const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = useState(150);
@@ -225,6 +250,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             device: false,
             storage: false,
             debugging: false,
+            media: true,
         });
         setDefaultTab('apis');
         setIsAutoRamLimitEnabled(true);
@@ -687,10 +713,11 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         const loop = Animated.loop(Animated.sequence([
             Animated.timing(fabShineAnim, {
                 toValue: 1,
-                duration: 1100,
+                duration: 3200,
+                easing: Easing.inOut(Easing.ease),
                 useNativeDriver: false,
             }),
-            Animated.delay(1600),
+            Animated.delay(3500),
             Animated.timing(fabShineAnim, {
                 toValue: 0,
                 duration: 0,
@@ -735,31 +762,10 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
     const isNativeModule = useMemo(() => isNativeModuleAvailable(), []);
     const useNativeFab = (Platform.OS === 'ios' || Platform.OS === 'android') && isNativeModule;
     useEffect(() => {
-        if (!useNativeFab || !enabled) {
-            if (useNativeFab) {
-                hideNativeFloatingButton().catch(() => { });
-            }
-            return;
-        }
-        if (visible) {
+        if (useNativeFab) {
             hideNativeFloatingButton().catch(() => { });
         }
-        else {
-            showNativeFloatingButton().catch(() => { });
-            setNativeFloatingButtonBadge(logs.length > 0 || analyticsEvents.length > 0).catch(() => { });
-        }
-        return () => {
-            if (useNativeFab) {
-                hideNativeFloatingButton().catch(() => { });
-            }
-        };
-    }, [
-        useNativeFab,
-        enabled,
-        visible,
-        logs.length,
-        analyticsEvents.length,
-    ]);
+    }, [useNativeFab, visible]);
     useEffect(() => {
         if (!useNativeFab)
             return;
@@ -1486,8 +1492,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 = useCallback(() => {
         setVisible(false);
+        setIsMinimized(false);
         setTimeout(() => {
             setSelected(null);
             setSelectedEvent(null);
@@ -1496,7 +1503,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             setSelectedReduxAction(null);
             setSelectedCrash(null);
         }, 300);
-    }
+    }, []);
     function handleClearAll() {
         clearNetworkLogs();
         setLogs([]);
@@ -1633,6 +1640,9 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         visible,
         setVisible,
         closeModal,
+        isMinimized,
+        setIsMinimized,
+        minimizeInspector,
         isReady,
         enabled,
         isEnabled: enabled,
@@ -1650,6 +1660,8 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         toggleTabVisibility,
         lastReadApisCount,
         lastReadLogsCount,
+        mediaCount,
+        refreshMediaCount,
         selected,
         setSelected,
         selectedEvent,
@@ -1815,6 +1827,8 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         toggleTabVisibility,
         lastReadApisCount,
         lastReadLogsCount,
+        mediaCount,
+        refreshMediaCount,
         selected,
         selectedEvent,
         selectedLog,
@@ -1905,6 +1919,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         deviceFreeRamMb,
         reduxAutoRefresh,
         reduxExpandDepth,
+        isMinimized,
     ]);
     return (<InspectorContext.Provider value={contextValue}>
       <MainScreen />

package/dist/esm/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/esm/native/NativeInspector.js

@@ -317,6 +317,18 @@ export const isNativeRecordingActive = async () => {
         return false;
     }
 };
+export const playNativeVideo = async (videoUri) => {
+    if (!NativeModule || !NativeModule.playVideo) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.playVideo(videoUri);
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
 export const convertNativeVideoToGif = async (videoUri, options) => {
     if (!NativeModule || !NativeModule.convertToGif) {
         return null;

package/dist/esm/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>;