react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,393 +1,166 @@
-"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}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(e,t,a,i){i===void 0&&(i=a);var r=Object.getOwnPropertyDescriptor(t,a);(!r||("get"in r?!t.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(e,i,r)}):(function(e,t,a,i){i===void 0&&(i=a),e[i]=t[a]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}):function(e,t){e.default=t}),__importStar=this&&this.__importStar||(function(){var e=function(t){return e=Object.getOwnPropertyNames||function(a){var i=[];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(i[i.length]=r);return i},e(t)};return function(t){if(t&&t.__esModule)return t;var a={};if(t!=null)for(var i=e(t),r=0;r<i.length;r++)i[r]!=="default"&&__createBinding(a,t,i[r]);return __setModuleDefault(a,t),a}})(),__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MediaPreviewModal=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),TouchableScale_1=__importDefault(require("../TouchableScale")),NetworkIcons_1=require("../NetworkIcons"),capture_1=require("../../capture"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),i18n_1=require("../../i18n"),MediaPreviewModal=({item:e,visible:t,onClose:a,onDelete:i,onConvertToGif:r})=>{const{t:o}=(0,i18n_1.useTranslation)(),[y,b]=(0,react_1.useState)(!1),[v,g]=(0,react_1.useState)(!1),[n,T]=(0,react_1.useState)(!1),[C,f]=(0,react_1.useState)(!1),[A,x]=(0,react_1.useState)("1.0x"),[c,S]=(0,react_1.useState)(!0),[h,k]=(0,react_1.useState)(.4);if(!e)return null;const u=()=>{e?.uri&&((0,helpers_1.copyToClipboard)(e.uri,e.filename||"File URI"),(0,toast_1.showToast)(o("mediaGallery.uriCopied","File URI copied to clipboard")))},w=async()=>{try{f(!0),await capture_1.ScreenCapture.playVideo(e.uri)}catch{(0,toast_1.showToast)(o("mediaGallery.playError","Unable to play video"))}finally{f(!1)}},I=()=>{react_native_1.Alert.alert(o("mediaGallery.deleteTitle"),o("mediaGallery.deleteMessage",{filename:e.filename}),[{text:o("common.cancel"),style:"cancel"},{text:o("mediaGallery.delete"),style:"destructive",onPress:()=>{i(e),a()}}])},P=async()=>{if(r){b(!0);try{await r(e),(0,toast_1.showToast)(o("mediaGallery.convertedSuccess"))}catch{(0,toast_1.showToast)(o("mediaGallery.convertFailed"))}finally{b(!1)}}},_=async()=>{try{const l=e.uri.startsWith("file://")||e.uri.startsWith("content://")||e.uri.startsWith("http")?e.uri:`file://${e.uri}`,V=react_native_1.Platform.select({ios:{url:l,title:e.filename},default:{title:e.filename,message:e.filename,url:l}});(await react_native_1.Share.share(V)).action===react_native_1.Share.sharedAction&&(0,toast_1.showToast)(o("mediaGallery.shareSuccess","Shared successfully"))}catch(l){l?.message!=="User did not share"&&(0,toast_1.showToast)(o("mediaGallery.shareUnavailable","Sharing not available on this device"))}},s=e.type==="video",d=e.type==="gif",p=e.durationMs?(e.durationMs/1e3).toFixed(1):null,F=p?`00:${Number(p)<10?"0":""}${p}`:"00:05.0",m=!0;return<react_native_1.Modal visible={t}transparent={!0}animationType="fade"onRequestClose={a}>
       <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.TouchableOpacity activeOpacity={.8}onPress={u}style={previewStyles.headerLeft}>
+            <react_native_1.View style={[previewStyles.badge,{borderColor:s?`${AppColors_1.AppColors.sky400}80`:d?`${AppColors_1.AppColors.warningAmber}80`:`${AppColors_1.AppColors.emerald500}80`,backgroundColor:s?`${AppColors_1.AppColors.sky400}20`:d?`${AppColors_1.AppColors.warningAmber}20`:`${AppColors_1.AppColors.emerald500}20`}]}>
+              {s?<NetworkIcons_1.FilmIcon size={13}color={AppColors_1.AppColors.sky400}/>:d?<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:s?AppColors_1.AppColors.sky400:d?AppColors_1.AppColors.warningAmber:AppColors_1.AppColors.emerald500}]}>
+                {e.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.View style={{flex:1,minWidth:0}}>
+              <react_native_1.Text style={previewStyles.title}numberOfLines={1}>
+                {e.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' })}
+                {(0,helpers_1.formatBytes)(e.sizeBytes)} • {new Date(e.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 style={previewStyles.headerRight}>
+            <TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={o("mediaGallery.copyUri","Copy URI")}onPress={u}style={previewStyles.headerActionBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <NetworkIcons_1.CopyIcon size={14}color={AppColors_1.AppColors.slate200}/>
+            </TouchableScale_1.default>
+
+            <TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={o("mediaGallery.share","Share")}onPress={_}style={[previewStyles.headerActionBtn,{backgroundColor:`${AppColors_1.AppColors.sky400}20`,borderColor:`${AppColors_1.AppColors.sky400}60`}]}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <NetworkIcons_1.ShareIcon size={14}color={AppColors_1.AppColors.sky400}/>
+            </TouchableScale_1.default>
+
+            <TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={o("mediaGallery.delete")}onPress={I}style={previewStyles.headerDeleteBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <NetworkIcons_1.TrashIcon size={14}color={AppColors_1.AppColors.red500}/>
+            </TouchableScale_1.default>
+
+            <react_native_1.TouchableOpacity accessible={!0}accessibilityRole="button"accessibilityLabel={n?o("mediaGallery.collapse","Exit Fullscreen"):o("mediaGallery.expand","Expand Fullscreen")}onPress={()=>T(!n)}style={[previewStyles.headerIconBtn,n&&{backgroundColor:`${AppColors_1.AppColors.sky400}30`,borderColor:`${AppColors_1.AppColors.sky400}70`}]}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <NetworkIcons_1.ExpandCollapseIcon size={14}isExpanded={n}color={n?AppColors_1.AppColors.sky400:AppColors_1.AppColors.white}/>
+            </react_native_1.TouchableOpacity>
+
+            <react_native_1.TouchableOpacity accessible={!0}accessibilityRole="button"accessibilityLabel={o("mediaGallery.minimize","Minimize")}onPress={a}style={previewStyles.headerIconBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <NetworkIcons_1.ChevronDownIcon size={15}color={AppColors_1.AppColors.white}/>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
         </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)}/>
+        <react_native_1.View style={[previewStyles.stage,n&&previewStyles.stageExpanded,!m&&{paddingBottom:react_native_1.Platform.OS==="ios"?34:16}]}>
+          <react_native_1.TouchableOpacity activeOpacity={s?.9:1}onPress={s?w:void 0}style={[previewStyles.previewCard,n&&previewStyles.previewCardExpanded]}>
+            {s?e.thumbnailUri&&!v?<>
+                  <react_native_1.Image source={{uri:e.thumbnailUri}}style={previewStyles.image}resizeMode="contain"onError={()=>g(!0)}/>
+                  <react_native_1.View style={previewStyles.videoImageOverlay}/>
+                </>:<react_native_1.View style={previewStyles.videoFallbackBackdrop}>
+                  <react_native_1.View style={previewStyles.videoFallbackGlow}/>
+                  <NetworkIcons_1.FilmIcon size={44}color={AppColors_1.AppColors.sky400}/>
+                  <react_native_1.Text style={previewStyles.videoFallbackSubtitle}>
+                    {e.width&&e.height?`${e.width} \xD7 ${e.height}`:"HD Video"} • MP4
+                  </react_native_1.Text>
+                </react_native_1.View>:<react_native_1.Image source={{uri:e.uri}}style={previewStyles.image}resizeMode="contain"onError={()=>g(!0)}/>}
+
+            
+            {s&&<react_native_1.View style={previewStyles.centerPlayOverlay}>
+                <react_native_1.View style={previewStyles.centerPlayCircle}>
+                  <NetworkIcons_1.PlayIcon size={28}color={AppColors_1.AppColors.white}/>
+                </react_native_1.View>
+                <react_native_1.Text style={previewStyles.centerPlayText}>
+                  {o("mediaGallery.playVideo","Play Video")}
+                </react_native_1.Text>
+              </react_native_1.View>}
 
             
-            {isVideo && (<react_native_1.View style={previewStyles.videoBadgeOverlay}>
+            {s&&<react_native_1.View style={previewStyles.videoBadgeOverlay}>
                 <react_native_1.View style={previewStyles.playPill}>
-                  <NetworkIcons_1.FilmIcon size={13} color={AppColors_1.AppColors.white}/>
+                  <NetworkIcons_1.FilmIcon size={12}color={AppColors_1.AppColors.sky400}/>
                   <react_native_1.Text style={previewStyles.playPillText}>
-                    {durationSec ? `${durationSec}s` : 'VIDEO'}
+                    {p?`${p}s`:"VIDEO"}
                   </react_native_1.Text>
                 </react_native_1.View>
-              </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}/>
+            {d&&<react_native_1.View style={previewStyles.videoBadgeOverlay}>
+                <react_native_1.View style={[previewStyles.playPill,{backgroundColor:`${AppColors_1.AppColors.warningAmber}CC`}]}>
+                  <NetworkIcons_1.GifIcon size={12}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>}
 
-          
-          <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.TouchableOpacity activeOpacity={.8}onPress={u}style={previewStyles.floatingMetaBadge}>
+              <NetworkIcons_1.CopyIcon size={11}color={AppColors_1.AppColors.sky400}/>
+              <react_native_1.Text style={previewStyles.floatingMetaText}>
+                {e.width&&e.height?`${e.width} \xD7 ${e.height}  \u2022  `:""}
+                {(0,helpers_1.formatBytes)(e.sizeBytes)}
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.TouchableOpacity>
         </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')}
+        {s&&<react_native_1.View style={previewStyles.videoControlsPanel}>
+            
+            <react_native_1.View style={previewStyles.progressSection}>
+              <react_native_1.Text style={previewStyles.timeLabel}>
+                00:0{Math.floor(h*(Number(p)||5))}
               </react_native_1.Text>
-            </TouchableScale_1.default>)}
+              <react_native_1.TouchableOpacity activeOpacity={.8}onPress={()=>k(l=>l>=.9?.1:l+.3)}style={previewStyles.progressTrack}>
+                <react_native_1.View style={[previewStyles.progressFill,{width:`${Math.max(10,Math.min(100,h*100))}%`}]}/>
+                <react_native_1.View style={[previewStyles.scrubberThumb,{left:`${Math.max(8,Math.min(96,h*100))}%`}]}/>
+              </react_native_1.TouchableOpacity>
+              <react_native_1.Text style={previewStyles.timeLabel}>{F}</react_native_1.Text>
+            </react_native_1.View>
 
-          <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>
+            
+            <react_native_1.View style={previewStyles.controlsRow}>
+              
+              <react_native_1.TouchableOpacity onPress={w}style={previewStyles.controlActionPill}>
+                {C?<NetworkIcons_1.PauseIcon size={14}color={AppColors_1.AppColors.sky400}/>:<NetworkIcons_1.PlayIcon size={14}color={AppColors_1.AppColors.sky400}/>}
+                <react_native_1.Text style={[previewStyles.controlActionText,{color:AppColors_1.AppColors.sky400}]}>
+                  {C?o("mediaGallery.pause","Pause"):o("mediaGallery.play","Play")}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>
 
-          <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>
+              
+              <react_native_1.View style={previewStyles.speedGroup}>
+                {["1.0x","1.5x","2.0x"].map(l=><react_native_1.TouchableOpacity key={l}onPress={()=>x(l)}style={[previewStyles.speedBtn,A===l&&previewStyles.speedBtnActive]}>
+                    <react_native_1.Text style={[previewStyles.speedText,A===l&&previewStyles.speedTextActive]}>
+                      {l}
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>)}
+              </react_native_1.View>
 
-          <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.TouchableOpacity onPress={()=>S(!c)}style={[previewStyles.loopPill,c&&previewStyles.loopPillActive]}>
+                <NetworkIcons_1.RepeatIcon size={12}color={c?AppColors_1.AppColors.sky400:AppColors_1.AppColors.whiteAlpha60}/>
+                <react_native_1.Text style={[previewStyles.loopText,c&&previewStyles.loopTextActive]}>
+                  {c?"Loop: ON":"Loop: OFF"}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+          </react_native_1.View>}
+
+        
+        {m&&<react_native_1.View style={previewStyles.footer}>
+            <TouchableScale_1.default onPress={u}style={[previewStyles.actionBtn,{backgroundColor:AppColors_1.AppColors.whiteAlpha08,borderColor:AppColors_1.AppColors.whiteAlpha15}]}>
+              <NetworkIcons_1.CopyIcon size={14}color={AppColors_1.AppColors.slate200}/>
+              <react_native_1.Text style={[previewStyles.actionText,{color:AppColors_1.AppColors.slate200}]}>
+                {o("mediaGallery.copyUri","Copy URI")}
+              </react_native_1.Text>
+            </TouchableScale_1.default>
+
+            {r&&s&&<TouchableScale_1.default onPress={P}disabled={y}style={[previewStyles.actionBtn,{backgroundColor:`${AppColors_1.AppColors.warningAmber}22`,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}]}>
+                  {o(y?"mediaGallery.converting":"mediaGallery.convertToGif")}
+                </react_native_1.Text>
+              </TouchableScale_1.default>}
+
+            <TouchableScale_1.default onPress={_}style={[previewStyles.actionBtn,{backgroundColor:`${AppColors_1.AppColors.sky400}22`,borderColor:`${AppColors_1.AppColors.sky400}70`}]}>
+              <NetworkIcons_1.ShareIcon size={14}color={AppColors_1.AppColors.sky400}/>
+              <react_native_1.Text style={[previewStyles.actionText,{color:AppColors_1.AppColors.sky400,fontFamily:AppFonts_1.AppFonts.interSemiBold}]}>
+                {o("mediaGallery.share","Share")}
+              </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,
-    },
-});
+    </react_native_1.Modal>};exports.MediaPreviewModal=MediaPreviewModal;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},headerRight:{flexDirection:"row",alignItems:"center",gap:8},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:.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},headerActionBtn:{width:32,height:32,borderRadius:16,backgroundColor:AppColors_1.AppColors.whiteAlpha12,borderWidth:1,borderColor:AppColors_1.AppColors.whiteAlpha20,alignItems:"center",justifyContent:"center"},headerShareBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${AppColors_1.AppColors.sky400}20`,borderWidth:1,borderColor:`${AppColors_1.AppColors.sky400}60`,alignItems:"center",justifyContent:"center"},headerDeleteBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${AppColors_1.AppColors.red500}20`,borderWidth:1,borderColor:`${AppColors_1.AppColors.red500}60`,alignItems:"center",justifyContent:"center"},headerIconBtn:{width:32,height:32,borderRadius:16,backgroundColor:AppColors_1.AppColors.whiteAlpha12,borderWidth:1,borderColor:AppColors_1.AppColors.whiteAlpha20,alignItems:"center",justifyContent:"center"},stage:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:10,paddingTop:10,paddingBottom:10},stageExpanded:{paddingHorizontal:0,paddingTop:0,paddingBottom:0},previewCard:{flex:1,width:"100%",borderRadius:14,overflow:"hidden",backgroundColor:"#05070D",borderWidth:1,borderColor:AppColors_1.AppColors.borderGlassLight,alignItems:"center",justifyContent:"center",position:"relative"},previewCardExpanded:{borderRadius:0,borderWidth:0},image:{width:"100%",height:"100%"},videoImageOverlay:{...react_native_1.StyleSheet.absoluteFillObject,backgroundColor:"rgba(5, 7, 13, 0.25)"},videoFallbackBackdrop:{flex:1,width:"100%",backgroundColor:"#070C18",alignItems:"center",justifyContent:"center",gap:8},videoFallbackGlow:{position:"absolute",width:140,height:140,borderRadius:70,backgroundColor:`${AppColors_1.AppColors.sky400}18`},videoFallbackTitle:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:15,color:AppColors_1.AppColors.white,marginTop:8},videoFallbackSubtitle:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12,color:AppColors_1.AppColors.whiteAlpha60},centerPlayOverlay:{position:"absolute",alignItems:"center",justifyContent:"center",gap:8},centerPlayCircle:{width:64,height:64,borderRadius:32,backgroundColor:`${AppColors_1.AppColors.sky400}E0`,alignItems:"center",justifyContent:"center",paddingLeft:3,shadowColor:AppColors_1.AppColors.sky400,shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:10,elevation:8},centerPlayText:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:13,color:AppColors_1.AppColors.white,letterSpacing:.3,textShadowColor:"rgba(0,0,0,0.7)",textShadowOffset:{width:0,height:1},textShadowRadius:3},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:.3},floatingMetaBadge:{position:"absolute",bottom:10,backgroundColor:`${AppColors_1.AppColors.slate900}D9`,paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.whiteAlpha15,alignItems:"center",justifyContent:"center"},floatingMetaText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.slate200,letterSpacing:.2},videoControlsPanel:{paddingHorizontal:16,paddingTop:8,paddingBottom:6,backgroundColor:AppColors_1.AppColors.headerGlassDark,borderTopWidth:1,borderTopColor:AppColors_1.AppColors.borderGlassLight,gap:8},progressSection:{flexDirection:"row",alignItems:"center",gap:10},timeLabel:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.whiteAlpha60,minWidth:42},progressTrack:{flex:1,height:6,borderRadius:3,backgroundColor:AppColors_1.AppColors.whiteAlpha15,justifyContent:"center",position:"relative"},progressFill:{height:"100%",borderRadius:3,backgroundColor:AppColors_1.AppColors.sky400},scrubberThumb:{position:"absolute",width:12,height:12,borderRadius:6,backgroundColor:AppColors_1.AppColors.white,borderWidth:2,borderColor:AppColors_1.AppColors.sky400,top:-3,marginLeft:-6},controlsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:2},controlActionPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:10,paddingVertical:5,borderRadius:6,backgroundColor:`${AppColors_1.AppColors.sky400}18`,borderWidth:1,borderColor:`${AppColors_1.AppColors.sky400}50`},controlActionText:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:11.5},speedGroup:{flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.whiteAlpha08,borderRadius:6,borderWidth:1,borderColor:AppColors_1.AppColors.whiteAlpha12,padding:2,gap:2},speedBtn:{paddingHorizontal:7,paddingVertical:3,borderRadius:4},speedBtnActive:{backgroundColor:`${AppColors_1.AppColors.sky400}30`},speedText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.whiteAlpha60},speedTextActive:{color:AppColors_1.AppColors.sky400,fontFamily:AppFonts_1.AppFonts.interBold},loopPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:5,borderRadius:6,backgroundColor:AppColors_1.AppColors.whiteAlpha08,borderWidth:1,borderColor:AppColors_1.AppColors.whiteAlpha12},loopPillActive:{backgroundColor:`${AppColors_1.AppColors.sky400}18`,borderColor:`${AppColors_1.AppColors.sky400}50`},loopText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.whiteAlpha60},loopTextActive:{color:AppColors_1.AppColors.sky400,fontFamily:AppFonts_1.AppFonts.interSemiBold},footer:{flexDirection:"row",alignItems:"center",justifyContent:"center",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:8,paddingBottom:react_native_1.Platform.OS==="ios"?34:16,borderTopWidth:1,borderTopColor:AppColors_1.AppColors.borderGlassLight,backgroundColor:AppColors_1.AppColors.headerGlassDark},actionBtn:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:16,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}});

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

@@ -1,12 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const native_1 = require("@react-navigation/native");
-const NavigationTracker = ({ onStateChange }) => {
-    const navState = (0, native_1.useNavigationState)(state => state);
-    (0, react_1.useEffect)(() => {
-        onStateChange(navState);
-    }, [navState, onStateChange]);
-    return null;
-};
-exports.default = NavigationTracker;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const react_1=require("react"),native_1=require("@react-navigation/native"),NavigationTracker=({onStateChange:e})=>{const t=(0,native_1.useNavigationState)(r=>r);return(0,react_1.useEffect)(()=>{e(t)},[t,e]),null};exports.default=NavigationTracker;