react-native-inapp-inspector 2.3.17 → 2.3.19

package/android/src/main/java/com/inappinspector/NetworkInspectorModule.kt

@@ -1021,6 +1021,30 @@ class NetworkInspectorModule(private val reactContext: ReactApplicationContext)
         }
     }
 
+    @ReactMethod
+    fun playVideo(videoUri: String, promise: Promise) {
+        val currentActivity = currentActivity
+        if (currentActivity == null) {
+            promise.reject("PLAY_ERROR", "No active activity found to play video")
+            return
+        }
+        try {
+            val uri = if (videoUri.startsWith("file://") || videoUri.startsWith("content://")) {
+                Uri.parse(videoUri)
+            } else {
+                Uri.fromFile(File(videoUri))
+            }
+            val intent = Intent(Intent.ACTION_VIEW).apply {
+                setDataAndType(uri, "video/*")
+                addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION or Intent.FLAG_ACTIVITY_NEW_TASK)
+            }
+            currentActivity.startActivity(intent)
+            promise.resolve(true)
+        } catch (e: Exception) {
+            promise.reject("PLAY_ERROR", e.message ?: "Failed to launch video player", e)
+        }
+    }
+
     @ReactMethod
     fun getCapturedMedia(promise: Promise) {
         captureExecutor.execute {
@@ -1046,6 +1070,29 @@ class NetworkInspectorModule(private val reactContext: ReactApplicationContext)
                         put("sizeBytes", file.length())
                         put("timestamp", file.lastModified())
                     }
+
+                    if (type == "video") {
+                        val suffix = file.nameWithoutExtension.removePrefix("video_")
+                        val thumbFile = File(dir, "thumb_${suffix}.jpg")
+                        if (thumbFile.exists()) {
+                            obj.put("thumbnailUri", Uri.fromFile(thumbFile).toString())
+                        } else {
+                            try {
+                                val retriever = MediaMetadataRetriever()
+                                retriever.setDataSource(file.absolutePath)
+                                val bmp = retriever.getFrameAtTime(0, MediaMetadataRetriever.OPTION_CLOSEST_SYNC)
+                                if (bmp != null) {
+                                    FileOutputStream(thumbFile).use { fos ->
+                                        bmp.compress(Bitmap.CompressFormat.JPEG, 80, fos)
+                                    }
+                                    bmp.recycle()
+                                    obj.put("thumbnailUri", Uri.fromFile(thumbFile).toString())
+                                }
+                                retriever.release()
+                            } catch (e: Exception) {}
+                        }
+                    }
+
                     jsonArr.put(obj)
                 }
 

package/dist/commonjs/capture.d.ts

@@ -8,6 +8,7 @@ export declare const ScreenCapture: {
     startRecording: (options?: RecordingOptions) => Promise<boolean>;
     stopRecording: () => Promise<RecordingResult | null>;
     isRecording: () => Promise<boolean>;
+    playVideo: (videoUri: string) => Promise<boolean>;
     convertToGif: (videoUri: string, options?: GifConversionOptions) => Promise<RecordingResult | null>;
     getMediaList: () => Promise<CapturedMediaItem[]>;
     deleteMedia: (uri: string) => Promise<boolean>;
@@ -18,6 +19,7 @@ export declare const ScreenRecorder: {
     startRecording: (options?: RecordingOptions) => Promise<boolean>;
     stopRecording: () => Promise<RecordingResult | null>;
     isRecording: () => Promise<boolean>;
+    playVideo: (videoUri: string) => Promise<boolean>;
     convertToGif: (videoUri: string, options?: GifConversionOptions) => Promise<RecordingResult | null>;
     getMediaList: () => Promise<CapturedMediaItem[]>;
     deleteMedia: (uri: string) => Promise<boolean>;

package/dist/commonjs/capture.js

@@ -15,6 +15,9 @@ exports.ScreenCapture = {
     isRecording: async () => {
         return (0, NativeInspector_1.isNativeRecordingActive)();
     },
+    playVideo: async (videoUri) => {
+        return (0, NativeInspector_1.playNativeVideo)(videoUri);
+    },
     convertToGif: async (videoUri, options) => {
         return (0, NativeInspector_1.convertNativeVideoToGif)(videoUri, options);
     },

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

@@ -5,6 +5,7 @@ interface EmptyStateProps {
     customTitle?: string;
     customSub?: string;
     onClearSearch?: () => void;
+    showReload?: boolean;
 }
 declare const EmptyState: React.NamedExoticComponent<EmptyStateProps>;
 export default EmptyState;

package/dist/commonjs/components/EmptyState.js

@@ -43,7 +43,7 @@ const AnimatedEntrance_1 = __importDefault(require("./AnimatedEntrance"));
 const NetworkIcons_1 = require("./NetworkIcons");
 const AppColors_1 = require("../styles/AppColors");
 const styles_1 = __importDefault(require("../styles"));
-const EmptyState = react_1.default.memo(function EmptyState({ isSearch, searchQuery, customTitle, customSub, onClearSearch, }) {
+const EmptyState = react_1.default.memo(function EmptyState({ isSearch, searchQuery, customTitle, customSub, onClearSearch, showReload = true, }) {
     const iconPulse = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     (0, react_1.useEffect)(() => {
         const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
@@ -86,7 +86,7 @@ const EmptyState = react_1.default.memo(function EmptyState({ isSearch, searchQu
       {isSearch && onClearSearch && (<TouchableScale_1.default style={styles_1.default.reloadBtn} onPress={onClearSearch}>
           <react_native_1.Text style={styles_1.default.reloadBtnText}>Clear Search & Filters</react_native_1.Text>
         </TouchableScale_1.default>)}
-      {!isSearch && (<TouchableScale_1.default style={styles_1.default.reloadBtn} onPress={handleReload}>
+      {!isSearch && showReload && (<TouchableScale_1.default style={styles_1.default.reloadBtn} onPress={handleReload}>
           <react_native_1.Text style={styles_1.default.reloadBtnText}>Reload App</react_native_1.Text>
         </TouchableScale_1.default>)}
     </AnimatedEntrance_1.default>);

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

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