react-native-inapp-inspector 2.3.16 → 2.3.17

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

@@ -0,0 +1,393 @@
+"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.MediaPreviewModal = 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 NetworkIcons_1 = require("../NetworkIcons");
+const helpers_1 = require("../../helpers");
+const toast_1 = require("../../helpers/toast");
+const i18n_1 = require("../../i18n");
+const MediaPreviewModal = ({ item, visible, onClose, onDelete, onConvertToGif, }) => {
+    const { t } = (0, i18n_1.useTranslation)();
+    const [isConverting, setIsConverting] = (0, react_1.useState)(false);
+    const [imageError, setImageError] = (0, react_1.useState)(false);
+    if (!item)
+        return null;
+    const handleShare = async () => {
+        try {
+            await react_native_1.Share.share(react_native_1.Platform.OS === 'ios'
+                ? { url: item.uri, title: item.filename }
+                : { message: `Captured media: ${item.filename}`, url: item.uri });
+        }
+        catch {
+            (0, toast_1.showToast)(t('mediaGallery.shareUnavailable'));
+        }
+    };
+    const handleCopyUri = () => {
+        (0, helpers_1.copyToClipboard)(item.uri);
+        (0, toast_1.showToast)(t('mediaGallery.uriCopied'));
+    };
+    const handleDelete = () => {
+        react_native_1.Alert.alert(t('mediaGallery.deleteTitle'), t('mediaGallery.deleteMessage', { filename: item.filename }), [
+            { text: t('common.cancel'), style: 'cancel' },
+            {
+                text: t('mediaGallery.delete'),
+                style: 'destructive',
+                onPress: () => {
+                    onDelete(item);
+                    onClose();
+                },
+            },
+        ]);
+    };
+    const handleConvert = async () => {
+        if (!onConvertToGif)
+            return;
+        setIsConverting(true);
+        try {
+            await onConvertToGif(item);
+            (0, toast_1.showToast)(t('mediaGallery.convertedSuccess'));
+        }
+        catch {
+            (0, toast_1.showToast)(t('mediaGallery.convertFailed'));
+        }
+        finally {
+            setIsConverting(false);
+        }
+    };
+    const isVideo = item.type === 'video';
+    const isGif = item.type === 'gif';
+    const durationSec = item.durationMs ? (item.durationMs / 1000).toFixed(1) : null;
+    return (<react_native_1.Modal visible={visible} transparent={true} animationType="fade" onRequestClose={onClose}>
+      <react_native_1.View style={previewStyles.overlay}>
+        
+        <react_native_1.View style={previewStyles.header}>
+          <react_native_1.View style={previewStyles.headerLeft}>
+            <react_native_1.View style={[
+            previewStyles.badge,
+            {
+                borderColor: isVideo
+                    ? `${AppColors_1.AppColors.sky400}80`
+                    : isGif
+                        ? `${AppColors_1.AppColors.warningAmber}80`
+                        : `${AppColors_1.AppColors.emerald500}80`,
+                backgroundColor: isVideo
+                    ? `${AppColors_1.AppColors.sky400}20`
+                    : isGif
+                        ? `${AppColors_1.AppColors.warningAmber}20`
+                        : `${AppColors_1.AppColors.emerald500}20`,
+            },
+        ]}>
+              {isVideo ? (<NetworkIcons_1.FilmIcon size={13} color={AppColors_1.AppColors.sky400}/>) : isGif ? (<NetworkIcons_1.GifIcon size={13} color={AppColors_1.AppColors.warningAmber}/>) : (<NetworkIcons_1.ImageIcon size={13} color={AppColors_1.AppColors.emerald500}/>)}
+              <react_native_1.Text style={[
+            previewStyles.badgeText,
+            {
+                color: isVideo
+                    ? AppColors_1.AppColors.sky400
+                    : isGif
+                        ? AppColors_1.AppColors.warningAmber
+                        : AppColors_1.AppColors.emerald500,
+            },
+        ]}>
+                {item.format.toUpperCase()}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={{ flex: 1, minWidth: 0 }}>
+              <react_native_1.Text style={previewStyles.title} numberOfLines={1}>
+                {item.filename}
+              </react_native_1.Text>
+              <react_native_1.Text style={previewStyles.subtitle}>
+                {(0, helpers_1.formatBytes)(item.sizeBytes)} • {new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+          <react_native_1.TouchableOpacity onPress={onClose} style={previewStyles.closeBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+            <NetworkIcons_1.CloseWhite size={14} color={AppColors_1.AppColors.white}/>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={previewStyles.stage}>
+          <react_native_1.View style={previewStyles.previewCard}>
+            <react_native_1.Image source={{ uri: item.uri }} style={previewStyles.image} resizeMode="contain" onError={() => setImageError(true)}/>
+
+            
+            {isVideo && (<react_native_1.View style={previewStyles.videoBadgeOverlay}>
+                <react_native_1.View style={previewStyles.playPill}>
+                  <NetworkIcons_1.FilmIcon size={13} color={AppColors_1.AppColors.white}/>
+                  <react_native_1.Text style={previewStyles.playPillText}>
+                    {durationSec ? `${durationSec}s` : 'VIDEO'}
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>)}
+
+            
+            {isGif && (<react_native_1.View style={previewStyles.videoBadgeOverlay}>
+                <react_native_1.View style={[previewStyles.playPill, { backgroundColor: `${AppColors_1.AppColors.warningAmber}CC` }]}>
+                  <NetworkIcons_1.GifIcon size={13} color={AppColors_1.AppColors.white}/>
+                  <react_native_1.Text style={previewStyles.playPillText}>ANIMATED GIF</react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>)}
+          </react_native_1.View>
+
+          
+          <react_native_1.View style={previewStyles.metaPillRow}>
+            {item.width && item.height ? (<react_native_1.View style={previewStyles.metaPill}>
+                <react_native_1.Text style={previewStyles.metaPillLabel}>DIMENSIONS</react_native_1.Text>
+                <react_native_1.Text style={previewStyles.metaPillValue}>{`${item.width} × ${item.height}`}</react_native_1.Text>
+              </react_native_1.View>) : null}
+            <react_native_1.View style={previewStyles.metaPill}>
+              <react_native_1.Text style={previewStyles.metaPillLabel}>SIZE</react_native_1.Text>
+              <react_native_1.Text style={previewStyles.metaPillValue}>{(0, helpers_1.formatBytes)(item.sizeBytes)}</react_native_1.Text>
+            </react_native_1.View>
+            {durationSec ? (<react_native_1.View style={previewStyles.metaPill}>
+                <react_native_1.Text style={previewStyles.metaPillLabel}>DURATION</react_native_1.Text>
+                <react_native_1.Text style={previewStyles.metaPillValue}>{`${durationSec}s`}</react_native_1.Text>
+              </react_native_1.View>) : null}
+          </react_native_1.View>
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={previewStyles.footer}>
+          {isVideo && onConvertToGif && (<TouchableScale_1.default onPress={handleConvert} disabled={isConverting} style={[
+                previewStyles.actionBtn,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.warningAmber}25`,
+                    borderColor: `${AppColors_1.AppColors.warningAmber}70`,
+                },
+            ]}>
+              <NetworkIcons_1.GifIcon size={15} color={AppColors_1.AppColors.warningAmber}/>
+              <react_native_1.Text style={[previewStyles.actionText, { color: AppColors_1.AppColors.warningAmber }]}>
+                {isConverting ? t('mediaGallery.converting') : t('mediaGallery.convertToGif')}
+              </react_native_1.Text>
+            </TouchableScale_1.default>)}
+
+          <TouchableScale_1.default onPress={handleShare} style={previewStyles.actionBtn}>
+            <NetworkIcons_1.SendIcon size={15} color={AppColors_1.AppColors.sky400}/>
+            <react_native_1.Text style={previewStyles.actionText}>{t('mediaGallery.share')}</react_native_1.Text>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default onPress={handleCopyUri} style={previewStyles.actionBtn}>
+            <NetworkIcons_1.CopyIcon size={15} color={AppColors_1.AppColors.white}/>
+            <react_native_1.Text style={previewStyles.actionText}>{t('mediaGallery.copyUri')}</react_native_1.Text>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default onPress={handleDelete} style={[
+            previewStyles.actionBtn,
+            {
+                backgroundColor: `${AppColors_1.AppColors.red500}25`,
+                borderColor: `${AppColors_1.AppColors.red500}70`,
+            },
+        ]}>
+            <NetworkIcons_1.TrashIcon size={15} color={AppColors_1.AppColors.red500}/>
+            <react_native_1.Text style={[previewStyles.actionText, { color: AppColors_1.AppColors.red500 }]}>
+              {t('mediaGallery.delete')}
+            </react_native_1.Text>
+          </TouchableScale_1.default>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Modal>);
+};
+exports.MediaPreviewModal = MediaPreviewModal;
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+const previewStyles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: '#090D16FA',
+        justifyContent: 'space-between',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingTop: react_native_1.Platform.OS === 'ios' ? 52 : 20,
+        paddingBottom: 14,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.borderGlassLight,
+        backgroundColor: AppColors_1.AppColors.headerGlassDark,
+    },
+    headerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        flex: 1,
+        minWidth: 0,
+        marginRight: 10,
+    },
+    badge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        borderWidth: 1,
+    },
+    badgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        letterSpacing: 0.4,
+    },
+    title: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        fontSize: 13.5,
+        color: AppColors_1.AppColors.white,
+    },
+    subtitle: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.whiteAlpha60,
+        marginTop: 1,
+    },
+    closeBtn: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: AppColors_1.AppColors.whiteAlpha12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stage: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    previewCard: {
+        width: SCREEN_WIDTH - 32,
+        height: SCREEN_HEIGHT * 0.60,
+        borderRadius: 12,
+        overflow: 'hidden',
+        backgroundColor: '#05070D',
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.borderGlassLight,
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    videoBadgeOverlay: {
+        position: 'absolute',
+        bottom: 12,
+        left: 12,
+    },
+    playPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        backgroundColor: `${AppColors_1.AppColors.slate900}D9`,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.whiteAlpha20,
+    },
+    playPillText: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.white,
+        letterSpacing: 0.3,
+    },
+    metaPillRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        marginTop: 14,
+        flexWrap: 'wrap',
+    },
+    metaPill: {
+        backgroundColor: AppColors_1.AppColors.whiteAlpha08,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.whiteAlpha12,
+        alignItems: 'center',
+    },
+    metaPillLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 9,
+        color: AppColors_1.AppColors.slate400,
+        letterSpacing: 0.4,
+    },
+    metaPillValue: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.white,
+        marginTop: 1,
+    },
+    footer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        gap: 8,
+        paddingHorizontal: 16,
+        paddingTop: 12,
+        paddingBottom: react_native_1.Platform.OS === 'ios' ? 36 : 20,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.borderGlassLight,
+        backgroundColor: AppColors_1.AppColors.headerGlassDark,
+    },
+    actionBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingHorizontal: 14,
+        paddingVertical: 9,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.whiteAlpha08,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.whiteAlpha15,
+    },
+    actionText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.white,
+    },
+});