react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,672 +1,165 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { Alert, Dimensions, FlatList, Image, RefreshControl, StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import TouchableScale from '../TouchableScale';
-import EmptyState from '../EmptyState';
-import { CheckIcon, FilmIcon, GifIcon, GridIcon, ImageIcon, ListIcon, PlayIcon, ScreencastIcon, TrashIcon, } from '../NetworkIcons';
-import { MediaPreviewModal } from './MediaPreviewModal';
-import { ScreenCapture, } from '../../capture';
-import { formatBytes } from '../../helpers';
-import { showToast } from '../../helpers/toast';
-import { useTranslation } from '../../i18n';
-import { useInspector } from './InspectorContext';
-export const MediaGalleryTab = () => {
-    const { t } = useTranslation();
-    const { refreshMediaCount, switchActiveTab } = useInspector();
-    const [mediaList, setMediaList] = useState([]);
-    const [refreshing, setRefreshing] = useState(false);
-    const [selectedFilter, setSelectedFilter] = useState('all');
-    const [selectedItem, setSelectedItem] = useState(null);
-    const [selectedIds, setSelectedIds] = useState(new Set());
-    const [viewMode, setViewMode] = useState('grid');
-    const loadMedia = useCallback(async () => {
-        try {
-            const items = await ScreenCapture.getMediaList();
-            setMediaList(items);
-            refreshMediaCount?.().catch(() => { });
-        }
-        catch {
-            setMediaList([]);
-        }
-    }, [refreshMediaCount]);
-    useEffect(() => {
-        loadMedia();
-    }, [loadMedia]);
-    const onRefresh = async () => {
-        setRefreshing(true);
-        await loadMedia();
-        setRefreshing(false);
-    };
-    const filteredMedia = useMemo(() => {
-        if (selectedFilter === 'all')
-            return mediaList;
-        return mediaList.filter(item => item.type === selectedFilter);
-    }, [mediaList, selectedFilter]);
-    const totalStorageBytes = useMemo(() => {
-        return mediaList.reduce((sum, item) => sum + (item.sizeBytes || 0), 0);
-    }, [mediaList]);
-    const toggleSelect = useCallback((id) => {
-        setSelectedIds(prev => {
-            const next = new Set(prev);
-            if (next.has(id)) {
-                next.delete(id);
-            }
-            else {
-                next.add(id);
-            }
-            return next;
-        });
-    }, []);
-    const handleDeleteItem = async (item) => {
-        await ScreenCapture.deleteMedia(item.uri);
-        setSelectedIds(prev => {
-            const next = new Set(prev);
-            next.delete(item.id);
-            return next;
-        });
-        await loadMedia();
-        const count = await refreshMediaCount?.();
-        if (count === 0) {
-            switchActiveTab('apis');
-        }
-        showToast(t('mediaGallery.deleted'));
-    };
-    const handleDeleteSelected = () => {
-        const count = selectedIds.size;
-        if (count === 0)
-            return;
-        Alert.alert(t('mediaGallery.deleteSelectedTitle'), t('mediaGallery.deleteSelectedMessage', { count }), [
-            { text: t('common.cancel'), style: 'cancel' },
-            {
-                text: t('mediaGallery.delete'),
-                style: 'destructive',
-                onPress: async () => {
-                    const itemsToDelete = mediaList.filter(item => selectedIds.has(item.id));
-                    for (const item of itemsToDelete) {
-                        await ScreenCapture.deleteMedia(item.uri);
-                    }
-                    setSelectedIds(new Set());
-                    await loadMedia();
-                    const remainingCount = await refreshMediaCount?.();
-                    if (remainingCount === 0) {
-                        switchActiveTab('apis');
-                    }
-                    showToast(t('mediaGallery.deletedCount', { count: itemsToDelete.length }));
-                },
-            },
-        ]);
-    };
-    const handleClearAll = () => {
-        Alert.alert(t('mediaGallery.purgeTitle'), t('mediaGallery.purgeMessage', { count: mediaList.length, size: formatBytes(totalStorageBytes) }), [
-            { text: t('common.cancel'), style: 'cancel' },
-            {
-                text: t('common.clearAll'),
-                style: 'destructive',
-                onPress: async () => {
-                    await ScreenCapture.clearAllMedia();
-                    setSelectedIds(new Set());
-                    await loadMedia();
-                    await refreshMediaCount?.();
-                    switchActiveTab('apis');
-                    showToast(t('mediaGallery.allPurged'));
-                },
-            },
-        ]);
-    };
-    const handleConvertToGif = async (item) => {
-        const gifResult = await ScreenCapture.convertToGif(item.uri, { fps: 12, width: 480 });
-        if (gifResult) {
-            await loadMedia();
-            refreshMediaCount?.().catch(() => { });
-        }
-    };
-    const renderFilterIcon = (filterKey, isActive) => {
-        const iconColor = isActive ? AppColors.sky400 : AppColors.slate400;
-        const iconSize = 12;
-        switch (filterKey) {
-            case 'all':
-                return <ScreencastIcon size={iconSize} color={iconColor}/>;
-            case 'image':
-                return <ImageIcon size={iconSize} color={iconColor}/>;
-            case 'video':
-                return <FilmIcon size={iconSize} color={iconColor}/>;
-            case 'gif':
-                return <GifIcon size={iconSize} color={iconColor}/>;
-        }
-    };
-    const renderGridItem = ({ item }) => {
-        const isVideo = item.type === 'video';
-        const isGif = item.type === 'gif';
-        const thumbUri = isVideo ? item.thumbnailUri : item.uri;
-        const isSelected = selectedIds.has(item.id);
-        return (<TouchableScale onPress={() => setSelectedItem(item)} style={[galleryStyles.card, isSelected && galleryStyles.cardSelected]}>
-        <View style={galleryStyles.thumbnailContainer}>
-          {thumbUri ? (<Image source={{ uri: thumbUri }} style={galleryStyles.thumbnail} resizeMode="cover"/>) : (<View style={galleryStyles.thumbnailFallback}>
-              {isVideo ? (<FilmIcon size={26} color={AppColors.sky400}/>) : (<ImageIcon size={26} color={AppColors.slate400}/>)}
-            </View>)}
+import{useState as W,useEffect as He,useMemo as te,useCallback as oe}from"react";import{Alert as ie,Dimensions as je,FlatList as Ee,Image as Ce,RefreshControl as _e,Share as Te,StyleSheet as Ne,Text as S,TouchableOpacity as I,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import Se from"../TouchableScale";import Je from"../EmptyState";import{CheckIcon as Ie,CopyIcon as E,FilmIcon as $,GifIcon as _,GridIcon as Qe,ImageIcon as F,ListIcon as Xe,PlayIcon as Be,ScreencastIcon as Ye,ShareIcon as Re,TrashIcon as N}from"../NetworkIcons";import{MediaPreviewModal as Ze}from"./MediaPreviewModal";import{ScreenCapture as P}from"../../capture";import{copyImageOrMediaToClipboard as Ke,copyToClipboard as et,formatBytes as U}from"../../helpers";import{showToast as A}from"../../helpers/toast";import{useTranslation as tt}from"../../i18n";import{useInspector as ot}from"./InspectorContext";export const MediaGalleryTab=()=>{const{t:r}=tt(),{refreshMediaCount:V,switchActiveTab:H}=ot(),[x,q]=W([]),[Ge,J]=W(!1),[O,Me]=W("all"),[Q,j]=W(null),[v,L]=W(new Set),[R,X]=W("grid"),M=oe(async()=>{try{const t=await P.getMediaList();q(t),V?.().catch(()=>{})}catch{q([])}},[V]);He(()=>{M()},[M]);const De=async()=>{J(!0),await M(),J(!1)},G=te(()=>O==="all"?x:x.filter(t=>t.type===O),[x,O]),Y=te(()=>x.reduce((t,i)=>t+(i.sizeBytes||0),0),[x]),Z=oe(t=>{L(i=>{const l=new Set(i);return l.has(t)?l.delete(t):l.add(t),l})},[]),K=async t=>{await P.deleteMedia(t.uri),L(l=>{const T=new Set(l);return T.delete(t.id),T}),await M(),await V?.()===0&&H("apis"),A(r("mediaGallery.deleted"))},ee=t=>{t?.uri&&Ke(t.uri,t.type==="image"?"Image":"Media")},Ve=()=>{const t=x.filter(l=>v.has(l.id));if(t.length===0)return;const i=t.map(l=>l.uri).join(`
+`);et(i,`${t.length} Media URIs`),A(`${t.length} file URIs copied to clipboard`)},We=async t=>{try{const i=t.uri.startsWith("file://")||t.uri.startsWith("content://")||t.uri.startsWith("http")?t.uri:`file://${t.uri}`;await Te.share({url:i,title:t.filename,message:t.filename})}catch{A(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Ae=async()=>{const t=x.filter(i=>v.has(i.id));if(t.length!==0)try{const i=t[0],l=i.uri.startsWith("file://")||i.uri.startsWith("content://")||i.uri.startsWith("http")?i.uri:`file://${i.uri}`;await Te.share({url:l,title:i.filename,message:t.length===1?i.filename:`${t.length} items: ${t.map(T=>T.filename).join(", ")}`})}catch{A(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},$e=()=>{const t=v.size;t!==0&&ie.alert(r("mediaGallery.deleteSelectedTitle"),r("mediaGallery.deleteSelectedMessage",{count:t}),[{text:r("common.cancel"),style:"cancel"},{text:r("mediaGallery.delete"),style:"destructive",onPress:async()=>{const i=x.filter(T=>v.has(T.id));for(const T of i)await P.deleteMedia(T.uri);L(new Set),await M(),await V?.()===0&&H("apis"),A(r("mediaGallery.deletedCount",{count:i.length}))}}])},Fe=()=>{ie.alert(r("mediaGallery.purgeTitle"),r("mediaGallery.purgeMessage",{count:x.length,size:U(Y)}),[{text:r("common.cancel"),style:"cancel"},{text:r("common.clearAll"),style:"destructive",onPress:async()=>{await P.clearAllMedia(),L(new Set),await M(),await V?.(),H("apis"),A(r("mediaGallery.allPurged"))}}])},Pe=async t=>{await P.convertToGif(t.uri,{fps:12,width:480})&&(await M(),V?.().catch(()=>{}))},Oe=(t,i)=>{const l=i?e.sky400:e.slate400,T=12;switch(t){case"all":return<Ye size={T}color={l}/>;case"image":return<F size={T}color={l}/>;case"video":return<$ size={T}color={l}/>;case"gif":return<_ size={T}color={l}/>}},Le=({item:t})=>{const i=t.type==="video",l=t.type==="gif",T=i?t.thumbnailUri:t.uri,D=v.has(t.id);return<Se onPress={()=>j(t)}style={[o.card,D&&o.cardSelected]}>
+        <C style={o.thumbnailContainer}>
+          {T?<Ce source={{uri:T}}style={o.thumbnail}resizeMode="cover"/>:<C style={o.thumbnailFallback}>
+              {i?<$ size={26}color={e.sky400}/>:<F size={26}color={e.slate400}/>}
+            </C>}
 
           
-          <TouchableOpacity onPress={() => toggleSelect(item.id)} style={[
-                galleryStyles.checkbox,
-                isSelected && galleryStyles.checkboxSelected,
-            ]} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-            {isSelected && <CheckIcon size={12} color={AppColors.white}/>}
-          </TouchableOpacity>
+          <I onPress={()=>Z(t.id)}style={[o.checkbox,D&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            {D&&<Ie size={12}color={e.white}/>}
+          </I>
 
-          {isVideo && (<View style={galleryStyles.miniPlayCircle}>
-              <PlayIcon size={14} color={AppColors.white}/>
-            </View>)}
-          <View style={galleryStyles.typeBadge}>
-            {isVideo ? (<FilmIcon size={11} color={AppColors.sky400}/>) : isGif ? (<GifIcon size={11} color={AppColors.warningAmber}/>) : (<ImageIcon size={11} color={AppColors.emerald500}/>)}
-            <Text style={galleryStyles.typeBadgeText}>
-              {item.format.toUpperCase()}
-            </Text>
-          </View>
-        </View>
+          {i&&<C style={o.miniPlayCircle}>
+              <Be size={14}color={e.white}/>
+            </C>}
+          <C style={o.typeBadge}>
+            {i?<$ size={11}color={e.sky400}/>:l?<_ size={11}color={e.warningAmber}/>:<F size={11}color={e.emerald500}/>}
+            <S style={o.typeBadgeText}>
+              {t.format.toUpperCase()}
+            </S>
+          </C>
+        </C>
 
-        <View style={galleryStyles.cardInfo}>
-          <Text style={galleryStyles.cardTitle} numberOfLines={1}>
-            {item.filename}
-          </Text>
-          <View style={galleryStyles.cardMetaRow}>
-            <Text style={galleryStyles.cardMeta}>
-              {formatBytes(item.sizeBytes)}
-            </Text>
-            <Text style={galleryStyles.cardMetaDot}>•</Text>
-            <Text style={galleryStyles.cardMeta}>
-              {new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-            </Text>
-          </View>
-        </View>
-      </TouchableScale>);
-    };
-    const renderListItem = ({ item }) => {
-        const isVideo = item.type === 'video';
-        const isGif = item.type === 'gif';
-        const thumbUri = isVideo ? item.thumbnailUri : item.uri;
-        const isSelected = selectedIds.has(item.id);
-        return (<TouchableScale onPress={() => setSelectedItem(item)} style={[galleryStyles.listRow, isSelected && galleryStyles.listRowSelected]}>
+        <C style={o.cardInfo}>
+          <S style={o.cardTitle}numberOfLines={1}>
+            {t.filename}
+          </S>
+          <C style={o.cardMetaRow}>
+            <C style={{flexDirection:"row",alignItems:"center",gap:4,flex:1,minWidth:0}}>
+              <S style={o.cardMeta}numberOfLines={1}>
+                {U(t.sizeBytes)}
+              </S>
+              <S style={o.cardMetaDot}>•</S>
+              <S style={o.cardMeta}numberOfLines={1}>
+                {new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}
+              </S>
+            </C>
+            <I onPress={()=>ee(t)}style={o.gridCopyBtn}hitSlop={{top:6,bottom:6,left:6,right:6}}>
+              <E size={11}color={e.slate400}/>
+            </I>
+          </C>
+        </C>
+      </Se>},Ue=({item:t})=>{const i=t.type==="video",l=t.type==="gif",T=i?t.thumbnailUri:t.uri,D=v.has(t.id);return<Se onPress={()=>j(t)}style={[o.listRow,D&&o.listRowSelected]}>
         
-        <TouchableOpacity onPress={() => toggleSelect(item.id)} style={[
-                galleryStyles.listCheckbox,
-                isSelected && galleryStyles.checkboxSelected,
-            ]} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-          {isSelected && <CheckIcon size={12} color={AppColors.white}/>}
-        </TouchableOpacity>
+        <I onPress={()=>Z(t.id)}style={[o.listCheckbox,D&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+          {D&&<Ie size={12}color={e.white}/>}
+        </I>
 
         
-        <View style={galleryStyles.listThumbContainer}>
-          {thumbUri ? (<Image source={{ uri: thumbUri }} style={galleryStyles.listThumb} resizeMode="cover"/>) : (<View style={galleryStyles.listThumbFallback}>
-              {isVideo ? (<FilmIcon size={18} color={AppColors.sky400}/>) : (<ImageIcon size={18} color={AppColors.slate400}/>)}
-            </View>)}
-          {isVideo && (<View style={galleryStyles.listMiniPlay}>
-              <PlayIcon size={10} color={AppColors.white}/>
-            </View>)}
-        </View>
+        <C style={o.listThumbContainer}>
+          {T?<Ce source={{uri:T}}style={o.listThumb}resizeMode="cover"/>:<C style={o.listThumbFallback}>
+              {i?<$ size={18}color={e.sky400}/>:<F size={18}color={e.slate400}/>}
+            </C>}
+          {i&&<C style={o.listMiniPlay}>
+              <Be size={10}color={e.white}/>
+            </C>}
+        </C>
 
         
-        <View style={galleryStyles.listInfo}>
-          <Text style={galleryStyles.listTitle} numberOfLines={1}>
-            {item.filename}
-          </Text>
-          <View style={galleryStyles.listMetaRow}>
-            <View style={galleryStyles.listBadge}>
-              {isVideo ? (<FilmIcon size={10} color={AppColors.sky400}/>) : isGif ? (<GifIcon size={10} color={AppColors.warningAmber}/>) : (<ImageIcon size={10} color={AppColors.emerald500}/>)}
-              <Text style={galleryStyles.listBadgeText}>
-                {item.format.toUpperCase()}
-              </Text>
-            </View>
-            <Text style={galleryStyles.cardMeta}>
-              {formatBytes(item.sizeBytes)}
-            </Text>
-            <Text style={galleryStyles.cardMetaDot}>•</Text>
-            <Text style={galleryStyles.cardMeta}>
-              {new Date(item.timestamp).toLocaleDateString([], { month: 'short', day: 'numeric' })}{' '}
-              {new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-            </Text>
-          </View>
-        </View>
+        <C style={o.listInfo}>
+          <S style={o.listTitle}numberOfLines={1}>
+            {t.filename}
+          </S>
+          <C style={o.listMetaRow}>
+            <C style={o.listBadge}>
+              {i?<$ size={10}color={e.sky400}/>:l?<_ size={10}color={e.warningAmber}/>:<F size={10}color={e.emerald500}/>}
+              <S style={o.listBadgeText}>
+                {t.format.toUpperCase()}
+              </S>
+            </C>
+            <S style={o.cardMeta}>
+              {U(t.sizeBytes)}
+            </S>
+            <S style={o.cardMetaDot}>•</S>
+            <S style={o.cardMeta}>
+              {new Date(t.timestamp).toLocaleDateString([],{month:"short",day:"numeric"})}{" "}
+              {new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}
+            </S>
+          </C>
+        </C>
 
         
-        <TouchableOpacity onPress={() => handleDeleteItem(item)} style={galleryStyles.listDeleteBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-          <TrashIcon size={14} color={AppColors.red500}/>
-        </TouchableOpacity>
-      </TouchableScale>);
-    };
-    return (<View style={galleryStyles.container}>
+        <C style={o.listActionsRow}>
+          <I onPress={()=>ee(t)}style={o.listCopyBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            <E size={13}color={e.slate200}/>
+          </I>
+
+          <I onPress={()=>We(t)}style={o.listShareBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            <Re size={13}color={e.sky400}/>
+          </I>
+
+          <I onPress={()=>K(t)}style={o.listDeleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            <N size={13}color={e.red500}/>
+          </I>
+        </C>
+      </Se>};return<C style={o.container}>
       
-      <View style={galleryStyles.filterBar}>
-        <View style={galleryStyles.chipGroup}>
-          {['all', 'image', 'video', 'gif'].map(filterKey => {
-            const isActive = selectedFilter === filterKey;
-            const label = filterKey === 'all'
-                ? t('mediaGallery.all', { count: mediaList.length })
-                : filterKey === 'image'
-                    ? t('mediaGallery.photos')
-                    : filterKey === 'video'
-                        ? t('mediaGallery.videos')
-                        : t('mediaGallery.gifs');
-            return (<TouchableOpacity key={filterKey} onPress={() => setSelectedFilter(filterKey)} style={[
-                    galleryStyles.chip,
-                    isActive && galleryStyles.chipActive,
-                ]}>
-                {renderFilterIcon(filterKey, isActive)}
-                <Text style={[
-                    galleryStyles.chipText,
-                    isActive && galleryStyles.chipTextActive,
-                ]}>
-                  {label}
-                </Text>
-              </TouchableOpacity>);
-        })}
-        </View>
+      <C style={o.filterBar}>
+        <C style={o.chipGroup}>
+          {["all","image","video","gif"].map(t=>{const i=O===t,l=t==="all"?r("mediaGallery.all",{count:x.length}):r(t==="image"?"mediaGallery.photos":t==="video"?"mediaGallery.videos":"mediaGallery.gifs");return<I key={t}onPress={()=>Me(t)}style={[o.chip,i&&o.chipActive]}>
+                {Oe(t,i)}
+                <S style={[o.chipText,i&&o.chipTextActive]}>
+                  {l}
+                </S>
+              </I>})}
+        </C>
 
         
-        <View style={galleryStyles.viewToggleContainer}>
-          <TouchableOpacity onPress={() => setViewMode('grid')} style={[
-            galleryStyles.viewToggleBtn,
-            viewMode === 'grid' && galleryStyles.viewToggleBtnActive,
-        ]}>
-            <GridIcon size={13} color={viewMode === 'grid' ? AppColors.white : AppColors.slate400}/>
-          </TouchableOpacity>
-          <TouchableOpacity onPress={() => setViewMode('list')} style={[
-            galleryStyles.viewToggleBtn,
-            viewMode === 'list' && galleryStyles.viewToggleBtnActive,
-        ]}>
-            <ListIcon size={13} color={viewMode === 'list' ? AppColors.white : AppColors.slate400}/>
-          </TouchableOpacity>
-        </View>
-      </View>
+        <C style={o.viewToggleContainer}>
+          <I onPress={()=>X("grid")}style={[o.viewToggleBtn,R==="grid"&&o.viewToggleBtnActive]}>
+            <Qe size={13}color={R==="grid"?e.white:e.slate400}/>
+          </I>
+          <I onPress={()=>X("list")}style={[o.viewToggleBtn,R==="list"&&o.viewToggleBtnActive]}>
+            <Xe size={13}color={R==="list"?e.white:e.slate400}/>
+          </I>
+        </C>
+      </C>
 
       
-      {mediaList.length > 0 && (<View style={galleryStyles.subBar}>
-          <View style={galleryStyles.resultCountWrapper}>
-            <Text style={[
-                galleryStyles.resultCountText,
-                selectedIds.size > 0 && galleryStyles.resultCountTextSelected,
-            ]}>
-              {selectedIds.size > 0
-                ? t('mediaGallery.selectedOfResults', {
-                    selected: selectedIds.size,
-                    total: filteredMedia.length,
-                    defaultValue: `Selected ${selectedIds.size} of ${filteredMedia.length} results`,
-                })
-                : filteredMedia.length !== mediaList.length
-                    ? t('mediaGallery.showingFilteredResults', {
-                        count: filteredMedia.length,
-                        total: mediaList.length,
-                        defaultValue: `Showing ${filteredMedia.length} of ${mediaList.length} results`,
-                    })
-                    : t('mediaGallery.showingResults', {
-                        count: filteredMedia.length,
-                        defaultValue: `Showing ${filteredMedia.length} results`,
-                    })}
-            </Text>
-          </View>
+      {x.length>0&&<C style={o.subBar}>
+          <C style={o.resultCountWrapper}>
+            <S style={[o.resultCountText,v.size>0&&o.resultCountTextSelected]}>
+              {v.size>0?r("mediaGallery.selectedOfResults",{selected:v.size,total:G.length,defaultValue:`Selected ${v.size} of ${G.length} results`}):G.length!==x.length?r("mediaGallery.showingFilteredResults",{count:G.length,total:x.length,defaultValue:`Showing ${G.length} of ${x.length} results`}):r("mediaGallery.showingResults",{count:G.length,defaultValue:`Showing ${G.length} results`})}
+            </S>
+          </C>
+
+          <C style={o.actionsGroup}>
+            {v.size>0&&<>
+                <I onPress={Ve}style={o.copySelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <E size={12}color={e.slate200}/>
+                  <S style={o.copySelectedBtnText}>
+                    {r("mediaGallery.copyUri","Copy URI")}
+                  </S>
+                </I>
+
+                <I onPress={Ae}style={o.shareSelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <Re size={12}color={e.sky400}/>
+                  <S style={o.shareSelectedBtnText}>
+                    {r("mediaGallery.share","Share")}
+                  </S>
+                </I>
 
-          <View style={galleryStyles.actionsGroup}>
-            {selectedIds.size > 0 && (<TouchableOpacity onPress={handleDeleteSelected} style={galleryStyles.deleteBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-                <TrashIcon size={13} color={AppColors.red500}/>
-                <Text style={galleryStyles.deleteBtnText}>
-                  {t('mediaGallery.deleteSelected', { count: selectedIds.size })}
-                </Text>
-              </TouchableOpacity>)}
+                <I onPress={$e}style={o.deleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <N size={13}color={e.red500}/>
+                  <S style={o.deleteBtnText}>
+                    {r("mediaGallery.deleteSelected",{count:v.size})}
+                  </S>
+                </I>
+              </>}
 
-            <TouchableOpacity onPress={handleClearAll} style={galleryStyles.clearBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-              <TrashIcon size={13} color={AppColors.red500}/>
-              <Text style={galleryStyles.clearBtnText}>
-                {t('mediaGallery.purge', { size: formatBytes(totalStorageBytes) })}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>)}
+            <I onPress={Fe}style={o.clearBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+              <N size={13}color={e.red500}/>
+              <S style={o.clearBtnText}>
+                {r("mediaGallery.purge",{size:U(Y)})}
+              </S>
+            </I>
+          </C>
+        </C>}
 
       
-      <FlatList key={viewMode} data={filteredMedia} keyExtractor={item => item.id} renderItem={viewMode === 'grid' ? renderGridItem : renderListItem} numColumns={viewMode === 'grid' ? 2 : 1} columnWrapperStyle={viewMode === 'grid' ? galleryStyles.columnWrapper : undefined} contentContainerStyle={galleryStyles.listContent} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={AppColors.sky400}/>} ListEmptyComponent={<EmptyState customTitle={t('mediaGallery.noMediaTitle')} customSub={t('mediaGallery.noMediaDesc')} showReload={false}/>}/>
+      <Ee key={R}data={G}keyExtractor={t=>t.id}renderItem={R==="grid"?Le:Ue}numColumns={R==="grid"?2:1}columnWrapperStyle={R==="grid"?o.columnWrapper:void 0}contentContainerStyle={o.listContent}refreshControl={<_e refreshing={Ge}onRefresh={De}tintColor={e.sky400}/>}ListEmptyComponent={<Je customTitle={r("mediaGallery.noMediaTitle")}customSub={r("mediaGallery.noMediaDesc")}showReload={!1}/>}/>
 
       
-      <MediaPreviewModal item={selectedItem} visible={!!selectedItem} onClose={() => setSelectedItem(null)} onDelete={handleDeleteItem} onConvertToGif={handleConvertToGif}/>
-    </View>);
-};
-const { width: WINDOW_WIDTH } = Dimensions.get('window');
-const CARD_WIDTH = (WINDOW_WIDTH - 36) / 2;
-const galleryStyles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: AppColors.slate850,
-    },
-    filterBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 12,
-        paddingVertical: 9,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.borderGlassLight,
-        gap: 8,
-    },
-    chipGroup: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flexShrink: 1,
-    },
-    chip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4.5,
-        paddingHorizontal: 8,
-        paddingVertical: 4.5,
-        borderRadius: 6,
-        backgroundColor: AppColors.whiteAlpha06,
-        borderWidth: 1,
-        borderColor: AppColors.whiteAlpha10,
-    },
-    chipActive: {
-        backgroundColor: `${AppColors.sky400}2E`,
-        borderColor: AppColors.sky400,
-    },
-    chipText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.slate400,
-    },
-    chipTextActive: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.sky400,
-    },
-    subBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 12,
-        paddingVertical: 7,
-        backgroundColor: `${AppColors.slate900}99`,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.borderGlassLight,
-        gap: 8,
-    },
-    resultCountWrapper: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        flexShrink: 1,
-    },
-    resultCountText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.slate400,
-    },
-    resultCountTextSelected: {
-        fontFamily: AppFonts.interSemiBold,
-        color: AppColors.sky400,
-    },
-    actionsGroup: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    viewToggleContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.whiteAlpha06,
-        borderRadius: 6,
-        padding: 2,
-        borderWidth: 1,
-        borderColor: AppColors.whiteAlpha10,
-    },
-    viewToggleBtn: {
-        paddingHorizontal: 7,
-        paddingVertical: 4,
-        borderRadius: 4,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    viewToggleBtnActive: {
-        backgroundColor: `${AppColors.violet600}80`,
-    },
-    deleteBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-        backgroundColor: `${AppColors.red500}26`,
-        borderWidth: 1,
-        borderColor: `${AppColors.red500}80`,
-    },
-    deleteBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.red500,
-    },
-    clearBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-        backgroundColor: `${AppColors.red500}1F`,
-        borderWidth: 1,
-        borderColor: `${AppColors.red500}4D`,
-    },
-    clearBtnText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.red500,
-    },
-    listContent: {
-        padding: 12,
-        gap: 10,
-    },
-    columnWrapper: {
-        gap: 12,
-    },
-    card: {
-        width: CARD_WIDTH,
-        backgroundColor: AppColors.slate800,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.borderGlassLight,
-        overflow: 'hidden',
-    },
-    cardSelected: {
-        borderColor: AppColors.violet600,
-        borderWidth: 1.5,
-    },
-    thumbnailContainer: {
-        width: '100%',
-        height: 110,
-        backgroundColor: AppColors.slate850,
-        position: 'relative',
-    },
-    thumbnail: {
-        width: '100%',
-        height: '100%',
-    },
-    thumbnailFallback: {
-        width: '100%',
-        height: '100%',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: AppColors.slate900,
-    },
-    checkbox: {
-        position: 'absolute',
-        top: 6,
-        left: 6,
-        width: 22,
-        height: 22,
-        borderRadius: 5,
-        borderWidth: 1.5,
-        borderColor: 'rgba(255, 255, 255, 0.65)',
-        backgroundColor: 'rgba(15, 23, 42, 0.65)',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 10,
-    },
-    checkboxSelected: {
-        backgroundColor: AppColors.violet600,
-        borderColor: AppColors.violet600,
-    },
-    miniPlayCircle: {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        width: 32,
-        height: 32,
-        marginTop: -16,
-        marginLeft: -16,
-        borderRadius: 16,
-        backgroundColor: `${AppColors.sky400}D9`,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingLeft: 2,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.4,
-        shadowRadius: 4,
-        elevation: 4,
-    },
-    typeBadge: {
-        position: 'absolute',
-        top: 6,
-        right: 6,
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3,
-        backgroundColor: AppColors.badgeGlassDark,
-        paddingHorizontal: 5,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors.borderGlassMedium,
-    },
-    typeBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.slate200,
-    },
-    cardInfo: {
-        padding: 8,
-        gap: 3,
-    },
-    cardTitle: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11.5,
-        color: AppColors.white,
-    },
-    cardMetaRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-    },
-    cardMeta: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors.slate400,
-    },
-    cardMetaDot: {
-        fontSize: 10,
-        color: AppColors.whiteAlpha30,
-    },
-    listRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.slate800,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.borderGlassLight,
-        padding: 8,
-        gap: 10,
-    },
-    listRowSelected: {
-        borderColor: AppColors.violet600,
-        borderWidth: 1.5,
-        backgroundColor: `${AppColors.violet600}14`,
-    },
-    listCheckbox: {
-        width: 20,
-        height: 20,
-        borderRadius: 4,
-        borderWidth: 1.5,
-        borderColor: 'rgba(255, 255, 255, 0.65)',
-        backgroundColor: 'rgba(15, 23, 42, 0.65)',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    listThumbContainer: {
-        width: 46,
-        height: 46,
-        borderRadius: 6,
-        backgroundColor: AppColors.slate850,
-        overflow: 'hidden',
-        position: 'relative',
-    },
-    listThumb: {
-        width: '100%',
-        height: '100%',
-    },
-    listThumbFallback: {
-        width: '100%',
-        height: '100%',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: AppColors.slate900,
-    },
-    listMiniPlay: {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        width: 20,
-        height: 20,
-        marginTop: -10,
-        marginLeft: -10,
-        borderRadius: 10,
-        backgroundColor: `${AppColors.sky400}D9`,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingLeft: 1,
-    },
-    listInfo: {
-        flex: 1,
-        gap: 4,
-        minWidth: 0,
-    },
-    listTitle: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: AppColors.white,
-    },
-    listMetaRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flexWrap: 'wrap',
-    },
-    listBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3,
-        backgroundColor: AppColors.badgeGlassDark,
-        paddingHorizontal: 4,
-        paddingVertical: 1.5,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors.borderGlassMedium,
-    },
-    listBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 8.5,
-        color: AppColors.slate200,
-    },
-    listDeleteBtn: {
-        padding: 6,
-        borderRadius: 6,
-        backgroundColor: `${AppColors.red500}14`,
-        borderWidth: 1,
-        borderColor: `${AppColors.red500}33`,
-    },
-});
+      <Ze item={Q}visible={!!Q}onClose={()=>j(null)}onDelete={K}onConvertToGif={Pe}/>
+    </C>};const{width:it}=je.get("window"),rt=(it-36)/2,o=Ne.create({container:{flex:1,backgroundColor:e.slate850},filterBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:9,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},chipGroup:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},chip:{flexDirection:"row",alignItems:"center",gap:4.5,paddingHorizontal:8,paddingVertical:4.5,borderRadius:6,backgroundColor:e.whiteAlpha06,borderWidth:1,borderColor:e.whiteAlpha10},chipActive:{backgroundColor:`${e.sky400}2E`,borderColor:e.sky400},chipText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},chipTextActive:{fontFamily:B.interBold,color:e.sky400},subBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:7,backgroundColor:`${e.slate900}99`,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},resultCountWrapper:{flexDirection:"row",alignItems:"center",flexShrink:1},resultCountText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},resultCountTextSelected:{fontFamily:B.interSemiBold,color:e.sky400},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},viewToggleContainer:{flexDirection:"row",alignItems:"center",backgroundColor:e.whiteAlpha06,borderRadius:6,padding:2,borderWidth:1,borderColor:e.whiteAlpha10},viewToggleBtn:{paddingHorizontal:7,paddingVertical:4,borderRadius:4,alignItems:"center",justifyContent:"center"},viewToggleBtnActive:{backgroundColor:`${e.violet600}80`},deleteBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}26`,borderWidth:1,borderColor:`${e.red500}80`},deleteBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.red500},clearBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}1F`,borderWidth:1,borderColor:`${e.red500}4D`},clearBtnText:{fontFamily:B.interMedium,fontSize:10.5,color:e.red500},listContent:{padding:12,gap:10},columnWrapper:{gap:12},card:{width:rt,backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,overflow:"hidden"},cardSelected:{borderColor:e.violet600,borderWidth:1.5},thumbnailContainer:{width:"100%",height:110,backgroundColor:e.slate850,position:"relative"},thumbnail:{width:"100%",height:"100%"},thumbnailFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},checkbox:{position:"absolute",top:6,left:6,width:22,height:22,borderRadius:5,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center",zIndex:10},checkboxSelected:{backgroundColor:e.violet600,borderColor:e.violet600},miniPlayCircle:{position:"absolute",top:"50%",left:"50%",width:32,height:32,marginTop:-16,marginLeft:-16,borderRadius:16,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:2,shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:4},typeBadge:{position:"absolute",top:6,right:6,flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},typeBadgeText:{fontFamily:B.interBold,fontSize:9,color:e.slate200},cardInfo:{padding:8,gap:3},cardTitle:{fontFamily:B.interMedium,fontSize:11.5,color:e.white},cardMetaRow:{flexDirection:"row",alignItems:"center",gap:4},cardMeta:{fontFamily:B.interRegular,fontSize:10,color:e.slate400},cardMetaDot:{fontSize:10,color:e.whiteAlpha30},listRow:{flexDirection:"row",alignItems:"center",backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,padding:8,gap:10},listRowSelected:{borderColor:e.violet600,borderWidth:1.5,backgroundColor:`${e.violet600}14`},listCheckbox:{width:20,height:20,borderRadius:4,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center"},listThumbContainer:{width:46,height:46,borderRadius:6,backgroundColor:e.slate850,overflow:"hidden",position:"relative"},listThumb:{width:"100%",height:"100%"},listThumbFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},listMiniPlay:{position:"absolute",top:"50%",left:"50%",width:20,height:20,marginTop:-10,marginLeft:-10,borderRadius:10,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:1},listInfo:{flex:1,gap:4,minWidth:0},listTitle:{fontFamily:B.interMedium,fontSize:12,color:e.white},listMetaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},listBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:4,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},listBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.slate200},gridCopyBtn:{padding:3,borderRadius:4,backgroundColor:e.whiteAlpha08},listActionsRow:{flexDirection:"row",alignItems:"center",gap:6},listCopyBtn:{padding:6,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha15},listShareBtn:{padding:6,borderRadius:6,backgroundColor:`${e.sky400}18`,borderWidth:1,borderColor:`${e.sky400}40`},listDeleteBtn:{padding:6,borderRadius:6,backgroundColor:`${e.red500}14`,borderWidth:1,borderColor:`${e.red500}33`},copySelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha20},copySelectedBtnText:{fontFamily:B.interSemiBold,fontSize:10.5,color:e.slate200},shareSelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.sky400}20`,borderWidth:1,borderColor:`${e.sky400}60`},shareSelectedBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.sky400}});