react-native-inapp-inspector 2.5.8 → 2.5.10

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

@@ -1,82 +1,82 @@
-import{useState as $,useEffect as je,useMemo as ae,useCallback as ne}from"react";import{Dimensions as Ee,FlatList as Ne,Image as Ce,RefreshControl as _e,Share as Te,StyleSheet as qe,Text as S,TouchableOpacity as I,View as C}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as z}from"../../styles/AppFonts";import Se from"../TouchableScale";import Je from"../EmptyState";import{CameraRollIcon as Ie,CheckIcon as Be,CopyIcon as Q,FilmIcon as L,GifIcon as X,GridIcon as Qe,ImageIcon as U,ListIcon as Xe,PlayIcon as Re,ScreencastIcon as Ye,ShareIcon as Ge,TrashIcon as Y}from"../NetworkIcons";import{MediaPreviewModal as Ze}from"./MediaPreviewModal";import{ScreenCapture as A}from"../../capture";import{copyImageOrMediaToClipboard as Ke,copyToClipboard as et,formatBytes as H}from"../../helpers";import{showToast as M}from"../../helpers/toast";import{useTranslation as tt}from"../../i18n";import{useInspector as ot}from"./InspectorContext";import{ConfirmationModal as Ct}from"./ConfirmationModal";export const MediaGalleryTab=()=>{const{t:r}=tt(),{refreshMediaCount:D,switchActiveTab:N,previewMediaItem:Z,setPreviewMediaItem:j}=ot(),[x,K]=$([]),[Ve,ee]=$(!1),[v,Me]=$("all"),[B,E]=$(new Set),[R,te]=$("grid"),[P,F]=$({visible:!1,title:"",message:"",onConfirm:()=>{}}),oe=async()=>{try{const e=v==="image"?"image":v==="video"?"video":"any",i=await A.pickMedia({mediaType:e});i&&(await G(),D?.().catch(()=>{}),M(i.type==="video"?r("mediaGallery.importedVideo","Video imported from Camera Roll"):r("mediaGallery.importedPhoto","Photo imported from Camera Roll")),j(i))}catch{M(r("mediaGallery.importFailed","Failed to import media"))}},G=ne(async()=>{try{const e=await A.getMediaList();K(e),D?.().catch(()=>{})}catch{K([])}},[D]);je(()=>{G()},[G]);const De=async()=>{ee(!0),await G(),ee(!1)},V=ae(()=>v==="all"?x:x.filter(e=>e.type===v),[x,v]),_=ae(()=>x.reduce((e,i)=>e+(i.sizeBytes||0),0),[x]),ie=ne(e=>{E(i=>{const l=new Set(i);return l.has(e)?l.delete(e):l.add(e),l})},[]),re=async e=>{await A.deleteMedia(e.uri),E(l=>{const T=new Set(l);return T.delete(e.id),T}),await G(),await D?.()===0&&N("apis"),M(r("mediaGallery.deleted"))},le=e=>{e?.uri&&Ke(e.uri,e.type==="image"?"Image":"Media")},We=()=>{const e=x.filter(l=>B.has(l.id));if(e.length===0)return;const i=e.map(l=>l.uri).join(`
-`);et(i,`${e.length} Media URIs`),M(`${e.length} file URIs copied to clipboard`)},Pe=async e=>{try{const i=e.uri.startsWith("file://")||e.uri.startsWith("content://")||e.uri.startsWith("http")?e.uri:`file://${e.uri}`;await Te.share({url:i,title:e.filename,message:e.filename})}catch{M(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},$e=async()=>{const e=x.filter(i=>B.has(i.id));if(e.length!==0)try{const i=e[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:e.length===1?i.filename:`${e.length} items: ${e.map(T=>T.filename).join(", ")}`})}catch{M(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Ae=()=>{const e=B.size;e!==0&&F({visible:!0,title:r("mediaGallery.deleteSelectedTitle","Delete Selected Media"),message:r("mediaGallery.deleteSelectedMessage",{count:e,defaultValue:`Are you sure you want to permanently delete ${e} media items?`}),confirmText:r("mediaGallery.delete","Delete"),cancelText:r("common.cancel","Cancel"),onConfirm:async()=>{F(T=>({...T,visible:!1}));const i=x.filter(T=>B.has(T.id));for(const T of i)await A.deleteMedia(T.uri);E(new Set),await G(),await D?.()===0&&N("apis"),M(r("mediaGallery.deletedCount",{count:i.length}))}})},Fe=()=>{F({visible:!0,title:r("mediaGallery.purgeTitle","Purge Gallery"),message:r("mediaGallery.purgeMessage",{count:x.length,size:H(_),defaultValue:`Are you sure you want to delete all ${x.length} media files (${H(_)})? This cannot be undone.`}),confirmText:r("common.clearAll","Clear All"),cancelText:r("common.cancel","Cancel"),onConfirm:async()=>{F(e=>({...e,visible:!1})),await A.clearAllMedia(),E(new Set),await G(),await D?.(),N("apis"),M(r("mediaGallery.allPurged"))}})},Oe=async e=>{await A.convertToGif(e.uri,{fps:12,width:480})&&(await G(),D?.().catch(()=>{}))},Le=(e,i)=>{const l=i?t.sky400:t.slate400,T=12;switch(e){case"all":return<Ye size={T}color={l}/>;case"image":return<U size={T}color={l}/>;case"video":return<L size={T}color={l}/>;case"gif":return<X size={T}color={l}/>}},Ue=({item:e})=>{if(!e)return null;const i=e.type==="video",l=e.type==="gif",T=i&&e.thumbnailUri||e.uri,W=!!(e.id&&B.has(e.id)),q=(e.format||(i?"mp4":l?"gif":"png")).toUpperCase(),J=e.filename||(e.uri?e.uri.split("/").pop():"")||"Capture",O=e.timestamp?new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}):"";return<Se onPress={()=>j(e)}style={[o.card,W&&o.cardSelected]}>
+import{useState as F,useEffect as je,useMemo as se,useCallback as de}from"react";import{Dimensions as Ee,FlatList as Ne,Image as Ce,RefreshControl as _e,Share as Te,StyleSheet as qe,Text as S,TouchableOpacity as B,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as I}from"../../styles/AppFonts";import Se from"../TouchableScale";import Je from"../EmptyState";import{CameraRollIcon as Be,CheckIcon as Ie,CopyIcon as Y,FilmIcon as U,GifIcon as Z,GridIcon as Qe,ImageIcon as E,ListIcon as Xe,PlayIcon as Re,ScreencastIcon as Ye,ShareIcon as Ve,TrashIcon as K,WhiteBackNavigation as Ze,CloseWhite as Ke}from"../NetworkIcons";import{MediaPreviewModal as Ct}from"./MediaPreviewModal";import{ScreenCapture as O}from"../../capture";import{copyImageOrMediaToClipboard as Tt,copyToClipboard as St,formatBytes as N}from"../../helpers";import{showToast as M}from"../../helpers/toast";import{useTranslation as xt}from"../../i18n";import{useInspector as kt}from"./InspectorContext";import{ConfirmationModal as Bt}from"./ConfirmationModal";export const MediaGalleryTab=()=>{const{t:r}=xt(),{refreshMediaCount:W,switchActiveTab:A,previewMediaItem:ee,setPreviewMediaItem:_}=kt(),[z,te]=F([]),[Ge,oe]=F(!1),[v,De]=F("all"),[R,q]=F(new Set),[V,ie]=F("grid"),[$,L]=F({visible:!1,title:"",message:"",onConfirm:()=>{}}),re=async()=>{try{const t=v==="image"?"image":v==="video"?"video":"any",i=await O.pickMedia({mediaType:t});i&&(await G(),W?.().catch(()=>{}),M(i.type==="video"?r("mediaGallery.importedVideo","Video imported from Camera Roll"):r("mediaGallery.importedPhoto","Photo imported from Camera Roll")),_(i))}catch{M(r("mediaGallery.importFailed","Failed to import media"))}},G=de(async()=>{try{const t=await O.getMediaList();te(t),W?.().catch(()=>{})}catch{te([])}},[W]);je(()=>{G()},[G]);const Me=async()=>{oe(!0),await G(),oe(!1)},D=se(()=>v==="all"?z:z.filter(t=>t.type===v),[z,v]),J=se(()=>z.reduce((t,i)=>t+(i.sizeBytes||0),0),[z]),le=de(t=>{q(i=>{const l=new Set(i);return l.has(t)?l.delete(t):l.add(t),l})},[]),ae=async t=>{await O.deleteMedia(t.uri),q(l=>{const T=new Set(l);return T.delete(t.id),T}),await G(),await W?.()===0&&A("apis"),M(r("mediaGallery.deleted"))},ne=t=>{t?.uri&&Tt(t.uri,t.type==="image"?"Image":"Media")},We=()=>{const t=z.filter(l=>R.has(l.id));if(t.length===0)return;const i=t.map(l=>l.uri).join(`
+`);St(i,`${t.length} Media URIs`),M(`${t.length} file URIs copied to clipboard`)},Pe=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{M(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},$e=async()=>{const t=z.filter(i=>R.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{M(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Fe=()=>{const t=R.size;t!==0&&L({visible:!0,title:r("mediaGallery.deleteSelectedTitle","Delete Selected Media"),message:r("mediaGallery.deleteSelectedMessage",{count:t,defaultValue:`Are you sure you want to permanently delete ${t} media items?`}),confirmText:r("mediaGallery.delete","Delete"),cancelText:r("common.cancel","Cancel"),onConfirm:async()=>{L(T=>({...T,visible:!1}));const i=z.filter(T=>R.has(T.id));for(const T of i)await O.deleteMedia(T.uri);q(new Set),await G(),await W?.()===0&&A("apis"),M(r("mediaGallery.deletedCount",{count:i.length}))}})},Oe=()=>{L({visible:!0,title:r("mediaGallery.purgeTitle","Purge Gallery"),message:r("mediaGallery.purgeMessage",{count:z.length,size:N(J),defaultValue:`Are you sure you want to delete all ${z.length} media files (${N(J)})? This cannot be undone.`}),confirmText:r("common.clearAll","Clear All"),cancelText:r("common.cancel","Cancel"),onConfirm:async()=>{L(t=>({...t,visible:!1})),await O.clearAllMedia(),q(new Set),await G(),await W?.(),A("apis"),M(r("mediaGallery.allPurged"))}})},Ae=async t=>{await O.convertToGif(t.uri,{fps:12,width:480})&&(await G(),W?.().catch(()=>{}))},Le=(t,i)=>{const l=i?e.sky400:e.slate400,T=12;switch(t){case"all":return<Ye size={T}color={l}/>;case"image":return<E size={T}color={l}/>;case"video":return<U size={T}color={l}/>;case"gif":return<Z size={T}color={l}/>}},He=({item:t})=>{if(!t)return null;const i=t.type==="video",l=t.type==="gif",T=i&&t.thumbnailUri||t.uri,P=!!(t.id&&R.has(t.id)),Q=(t.format||(i?"mp4":l?"gif":"png")).toUpperCase(),X=t.filename||(t.uri?t.uri.split("/").pop():"")||"Capture",H=t.timestamp?new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}):"";return<Se onPress={()=>_(t)}style={[o.card,P&&o.cardSelected]}>
         <C style={o.thumbnailContainer}>
           {T?<Ce source={{uri:T}}style={o.thumbnail}resizeMode="cover"/>:<C style={o.thumbnailFallback}>
-              {i?<L size={26}color={t.sky400}/>:<U size={26}color={t.slate400}/>}
+              {i?<U size={26}color={e.sky400}/>:<E size={26}color={e.slate400}/>}
             </C>}
 
           
-          <I onPress={()=>e.id&&ie(e.id)}style={[o.checkbox,W&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            {W&&<Be size={12}color={t.white}/>}
-          </I>
+          <B onPress={()=>t.id&&le(t.id)}style={[o.checkbox,P&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            {P&&<Ie size={12}color={e.white}/>}
+          </B>
 
           {i&&<C style={o.miniPlayCircle}>
-              <Re size={14}color={t.white}/>
+              <Re size={14}color={e.white}/>
             </C>}
           <C style={o.typeBadge}>
-            {i?<L size={11}color={t.sky400}/>:l?<X size={11}color={t.warningAmber}/>:<U size={11}color={t.emerald500}/>}
+            {i?<U size={11}color={e.sky400}/>:l?<Z size={11}color={e.warningAmber}/>:<E size={11}color={e.emerald500}/>}
             <S style={o.typeBadgeText}>
-              {q}
+              {Q}
             </S>
           </C>
         </C>
 
         <C style={o.cardInfo}>
           <S style={o.cardTitle}numberOfLines={1}>
-            {J}
+            {X}
           </S>
           <C style={o.cardMetaRow}>
             <C style={{flexDirection:"row",alignItems:"center",gap:4,flex:1,minWidth:0}}>
               <S style={o.cardMeta}numberOfLines={1}>
-                {H(e.sizeBytes||0)}
+                {N(t.sizeBytes||0)}
               </S>
-              {O?<>
+              {H?<>
                   <S style={o.cardMetaDot}>•</S>
                   <S style={o.cardMeta}numberOfLines={1}>
-                    {O}
+                    {H}
                   </S>
                 </>:null}
             </C>
-            <I onPress={()=>le(e)}style={o.gridCopyBtn}hitSlop={{top:6,bottom:6,left:6,right:6}}>
-              <Q size={11}color={t.slate400}/>
-            </I>
+            <B onPress={()=>ne(t)}style={o.gridCopyBtn}hitSlop={{top:6,bottom:6,left:6,right:6}}>
+              <Y size={11}color={e.slate400}/>
+            </B>
           </C>
         </C>
-      </Se>},He=({item:e})=>{if(!e)return null;const i=e.type==="video",l=e.type==="gif",T=i&&e.thumbnailUri||e.uri,W=!!(e.id&&B.has(e.id)),q=(e.format||(i?"mp4":l?"gif":"png")).toUpperCase(),J=e.filename||(e.uri?e.uri.split("/").pop():"")||"Capture",O=e.timestamp?`${new Date(e.timestamp).toLocaleDateString([],{month:"short",day:"numeric"})} ${new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}`:"";return<Se onPress={()=>j(e)}style={[o.listRow,W&&o.listRowSelected]}>
+      </Se>},Ue=({item:t})=>{if(!t)return null;const i=t.type==="video",l=t.type==="gif",T=i&&t.thumbnailUri||t.uri,P=!!(t.id&&R.has(t.id)),Q=(t.format||(i?"mp4":l?"gif":"png")).toUpperCase(),X=t.filename||(t.uri?t.uri.split("/").pop():"")||"Capture",H=t.timestamp?`${new Date(t.timestamp).toLocaleDateString([],{month:"short",day:"numeric"})} ${new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}`:"";return<Se onPress={()=>_(t)}style={[o.listRow,P&&o.listRowSelected]}>
         
-        <I onPress={()=>e.id&&ie(e.id)}style={[o.listCheckbox,W&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-          {W&&<Be size={12}color={t.white}/>}
-        </I>
+        <B onPress={()=>t.id&&le(t.id)}style={[o.listCheckbox,P&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+          {P&&<Ie size={12}color={e.white}/>}
+        </B>
 
         
         <C style={o.listThumbContainer}>
           {T?<Ce source={{uri:T}}style={o.listThumb}resizeMode="cover"/>:<C style={o.listThumbFallback}>
-              {i?<L size={18}color={t.sky400}/>:<U size={18}color={t.slate400}/>}
+              {i?<U size={18}color={e.sky400}/>:<E size={18}color={e.slate400}/>}
             </C>}
           {i&&<C style={o.listMiniPlay}>
-              <Re size={10}color={t.white}/>
+              <Re size={10}color={e.white}/>
             </C>}
         </C>
 
         
         <C style={o.listInfo}>
           <S style={o.listTitle}numberOfLines={1}>
-            {J}
+            {X}
           </S>
           <C style={o.listMetaRow}>
             <C style={o.listBadge}>
-              {i?<L size={10}color={t.sky400}/>:l?<X size={10}color={t.warningAmber}/>:<U size={10}color={t.emerald500}/>}
+              {i?<U size={10}color={e.sky400}/>:l?<Z size={10}color={e.warningAmber}/>:<E size={10}color={e.emerald500}/>}
               <S style={o.listBadgeText}>
-                {q}
+                {Q}
               </S>
             </C>
             <S style={o.cardMeta}>
-              {H(e.sizeBytes||0)}
+              {N(t.sizeBytes||0)}
             </S>
-            {O?<>
+            {H?<>
                 <S style={o.cardMetaDot}>•</S>
                 <S style={o.cardMeta}>
-                  {O}
+                  {H}
                 </S>
               </>:null}
           </C>
@@ -84,105 +84,119 @@ import{useState as $,useEffect as je,useMemo as ae,useCallback as ne}from"react"
 
         
         <C style={o.listActionsRow}>
-          <I onPress={()=>le(e)}style={o.listCopyBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            <Q size={13}color={t.slate200}/>
-          </I>
+          <B onPress={()=>ne(t)}style={o.listCopyBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            <Y size={13}color={e.slate200}/>
+          </B>
 
-          <I onPress={()=>Pe(e)}style={o.listShareBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            <Ge size={13}color={t.sky400}/>
-          </I>
+          <B onPress={()=>Pe(t)}style={o.listShareBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            <Ve size={13}color={e.sky400}/>
+          </B>
 
-          <I onPress={()=>re(e)}style={o.listDeleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            <Y size={13}color={t.red500}/>
-          </I>
+          <B onPress={()=>ae(t)}style={o.listDeleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            <K size={13}color={e.red500}/>
+          </B>
         </C>
       </Se>};return<C style={o.container}>
       
+      <C style={o.topHeaderBar}>
+        <B onPress={()=>A("apis")}style={o.backToTabBtn}accessibilityLabel="Back to Inspector"hitSlop={{top:8,bottom:8,left:8,right:8}}>
+          <Ze size={15}color={e.purple}/>
+          <S style={o.backToTabText}>
+            {r("common.back","Back to Inspector")}
+          </S>
+        </B>
+
+        <B onPress={()=>A("apis")}style={o.closeCircleBtn}accessibilityLabel="Close Screencast"hitSlop={{top:8,bottom:8,left:8,right:8}}>
+          <Ke size={14}color={e.grayTextStrong}/>
+        </B>
+      </C>
+
+      
       <C style={o.filterBar}>
         <C style={o.chipGroup}>
-          {["all","image","video","gif"].map(e=>{const i=v===e,l=e==="all"?r("mediaGallery.all",{count:x.length}):r(e==="image"?"mediaGallery.photos":e==="video"?"mediaGallery.videos":"mediaGallery.gifs");return<I key={e}onPress={()=>Me(e)}style={[o.chip,i&&o.chipActive]}>
-                {Le(e,i)}
+          {["all","image","video","gif"].map(t=>{const i=v===t,l=t==="all"?r("mediaGallery.all",{count:z.length}):r(t==="image"?"mediaGallery.photos":t==="video"?"mediaGallery.videos":"mediaGallery.gifs");return<B key={t}onPress={()=>De(t)}style={[o.chip,i&&o.chipActive]}>
+                {Le(t,i)}
                 <S style={[o.chipText,i&&o.chipTextActive]}>
                   {l}
                 </S>
-              </I>})}
+              </B>})}
         </C>
 
         
         <C style={o.rightControls}>
-          <I onPress={oe}style={o.importBtn}accessibilityLabel="Open Camera Roll"hitSlop={{top:6,bottom:6,left:6,right:6}}>
-            <Ie size={12}color={t.sky400}/>
+          <B onPress={re}style={o.importBtn}accessibilityLabel="Open Camera Roll"hitSlop={{top:6,bottom:6,left:6,right:6}}>
+            <Be size={12}color={e.sky400}/>
             <S style={o.importBtnText}>
               {v==="image"?"Photos":v==="video"?"Videos":"Import"}
             </S>
-          </I>
+          </B>
 
           
           <C style={o.viewToggleContainer}>
-            <I onPress={()=>te("grid")}style={[o.viewToggleBtn,R==="grid"&&o.viewToggleBtnActive]}>
-              <Qe size={13}color={R==="grid"?t.white:t.slate400}/>
-            </I>
-            <I onPress={()=>te("list")}style={[o.viewToggleBtn,R==="list"&&o.viewToggleBtnActive]}>
-              <Xe size={13}color={R==="list"?t.white:t.slate400}/>
-            </I>
+            <B onPress={()=>ie("grid")}style={[o.viewToggleBtn,V==="grid"&&o.viewToggleBtnActive]}>
+              <Qe size={13}color={V==="grid"?e.white:e.slate400}/>
+            </B>
+            <B onPress={()=>ie("list")}style={[o.viewToggleBtn,V==="list"&&o.viewToggleBtnActive]}>
+              <Xe size={13}color={V==="list"?e.white:e.slate400}/>
+            </B>
           </C>
         </C>
       </C>
 
       
-      {x.length>0&&<C style={o.subBar}>
+      {z.length>0&&<C style={o.subBar}>
           <C style={o.resultCountWrapper}>
-            <S style={[o.resultCountText,B.size>0&&o.resultCountTextSelected]}>
-              {B.size>0?r("mediaGallery.selectedOfResults",{selected:B.size,total:V.length,defaultValue:`Selected ${B.size} of ${V.length} results`}):V.length!==x.length?r("mediaGallery.showingFilteredResults",{count:V.length,total:x.length,defaultValue:`Showing ${V.length} of ${x.length} results`}):r("mediaGallery.showingResults",{count:V.length,defaultValue:`Showing ${V.length} results`})}
+            <S style={[o.resultCountText,R.size>0&&o.resultCountTextSelected]}>
+              {R.size>0?r("mediaGallery.selectedOfResults",{selected:R.size,total:D.length,defaultValue:`Selected ${R.size} of ${D.length} results`}):D.length!==z.length?r("mediaGallery.showingFilteredResults",{count:D.length,total:z.length,defaultValue:`Showing ${D.length} of ${z.length} results`}):r("mediaGallery.showingResults",{count:D.length,defaultValue:`Showing ${D.length} results`})}
             </S>
           </C>
 
           <C style={o.actionsGroup}>
-            {B.size>0&&<>
-                <I onPress={We}style={o.copySelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-                  <Q size={12}color={t.slate200}/>
+            {R.size>0&&<>
+                <B onPress={We}style={o.copySelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <Y size={12}color={e.slate200}/>
                   <S style={o.copySelectedBtnText}>
                     {r("mediaGallery.copyUri","Copy URI")}
                   </S>
-                </I>
+                </B>
 
-                <I onPress={$e}style={o.shareSelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-                  <Ge size={12}color={t.sky400}/>
+                <B onPress={$e}style={o.shareSelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <Ve size={12}color={e.sky400}/>
                   <S style={o.shareSelectedBtnText}>
                     {r("mediaGallery.share","Share")}
                   </S>
-                </I>
+                </B>
 
-                <I onPress={Ae}style={o.deleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-                  <Y size={13}color={t.red500}/>
+                <B onPress={Fe}style={o.deleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <K size={13}color={e.red500}/>
                   <S style={o.deleteBtnText}>
-                    {r("mediaGallery.deleteSelected",{count:B.size})}
+                    {r("mediaGallery.deleteSelected",{count:R.size})}
                   </S>
-                </I>
+                </B>
               </>}
 
-            <I onPress={Fe}style={o.clearBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-              <Y size={13}color={t.red500}/>
+            <B onPress={Oe}style={o.clearBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+              <K size={13}color={e.red500}/>
               <S style={o.clearBtnText}>
-                {r("mediaGallery.purge",{size:H(_)})}
+                {r("mediaGallery.purge",{size:N(J)})}
               </S>
-            </I>
+            </B>
           </C>
         </C>}
 
       
-      <Ne key={R}data={V}keyExtractor={e=>e.id}renderItem={R==="grid"?Ue:He}numColumns={R==="grid"?2:1}columnWrapperStyle={R==="grid"?o.columnWrapper:void 0}style={{flex:1}}contentContainerStyle={[o.listContent,{flexGrow:1}]}nestedScrollEnabled={!0}keyboardShouldPersistTaps="handled"refreshControl={<_e refreshing={Ve}onRefresh={De}tintColor={t.sky400}/>}ListEmptyComponent={<C style={o.emptyContainer}>
+      <Ne key={V}data={D}keyExtractor={t=>t.id}renderItem={V==="grid"?He:Ue}numColumns={V==="grid"?2:1}columnWrapperStyle={V==="grid"?o.columnWrapper:void 0}style={{flex:1}}contentContainerStyle={[o.listContent,{flexGrow:1}]}nestedScrollEnabled={!0}keyboardShouldPersistTaps="handled"refreshControl={<_e refreshing={Ge}onRefresh={Me}tintColor={e.sky400}/>}ListEmptyComponent={<C style={o.emptyContainer}>
             <Je customTitle={v==="image"?"No Photos Found":v==="video"?"No Videos Found":r("mediaGallery.noMediaTitle")}customSub={v==="image"?"Take a screenshot or import photos from Camera Roll.":v==="video"?"Record a video or import videos from Camera Roll.":r("mediaGallery.noMediaDesc")}showReload={!1}/>
-            <I onPress={oe}style={o.emptyImportBtn}activeOpacity={.8}>
-              <Ie size={14}color={t.white}/>
+            <B onPress={re}style={o.emptyImportBtn}activeOpacity={.8}>
+              <Be size={14}color={e.white}/>
               <S style={o.emptyImportBtnText}>
                 {v==="image"?r("mediaGallery.importPhotos","Import Photos from Camera Roll"):v==="video"?r("mediaGallery.importVideos","Import Videos from Camera Roll"):r("mediaGallery.openCameraRoll","Open Camera Roll")}
               </S>
-            </I>
+            </B>
           </C>}/>
 
       
-      <Ze item={Z}visible={!!Z}onClose={()=>j(null)}onDelete={re}onConvertToGif={Oe}/>
+      <Ct item={ee}visible={!!ee}onClose={()=>_(null)}onDelete={ae}onConvertToGif={Ae}/>
 
-      <Ct visible={P.visible}title={P.title}message={P.message}confirmText={P.confirmText}cancelText={P.cancelText}isDestructive={!0}icon="trash"onConfirm={P.onConfirm}onCancel={()=>F(e=>({...e,visible:!1}))}/>
-    </C>};const{width:Tt}=Ee.get("window"),St=(Tt-36)/2,o=qe.create({container:{flex:1,backgroundColor:t.slate850},filterBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:9,borderBottomWidth:1,borderBottomColor:t.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:t.whiteAlpha06,borderWidth:1,borderColor:t.whiteAlpha10},chipActive:{backgroundColor:`${t.sky400}2E`,borderColor:t.sky400},chipText:{fontFamily:z.interMedium,fontSize:11,color:t.slate400},chipTextActive:{fontFamily:z.interBold,color:t.sky400},subBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:7,backgroundColor:`${t.slate900}99`,borderBottomWidth:1,borderBottomColor:t.borderGlassLight,gap:8},resultCountWrapper:{flexDirection:"row",alignItems:"center",flexShrink:1},resultCountText:{fontFamily:z.interMedium,fontSize:11,color:t.slate400},resultCountTextSelected:{fontFamily:z.interSemiBold,color:t.sky400},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},rightControls:{flexDirection:"row",alignItems:"center",gap:6},importBtn:{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${t.sky500}1F`,borderColor:`${t.sky400}44`,borderWidth:1,paddingHorizontal:8,paddingVertical:4.5,borderRadius:6},importBtnText:{fontFamily:z.interSemiBold,fontSize:11,color:t.sky400},emptyContainer:{alignItems:"center",justifyContent:"center",paddingVertical:36},emptyImportBtn:{flexDirection:"row",alignItems:"center",gap:7,backgroundColor:t.sky500,paddingHorizontal:16,paddingVertical:10,borderRadius:8,marginTop:18,shadowColor:t.sky500,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:6,elevation:3},emptyImportBtnText:{fontFamily:z.interSemiBold,fontSize:13,color:t.white},viewToggleContainer:{flexDirection:"row",alignItems:"center",backgroundColor:t.whiteAlpha06,borderRadius:6,padding:2,borderWidth:1,borderColor:t.whiteAlpha10},viewToggleBtn:{paddingHorizontal:7,paddingVertical:4,borderRadius:4,alignItems:"center",justifyContent:"center"},viewToggleBtnActive:{backgroundColor:`${t.violet600}80`},deleteBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${t.red500}26`,borderWidth:1,borderColor:`${t.red500}80`},deleteBtnText:{fontFamily:z.interBold,fontSize:10.5,color:t.red500},clearBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${t.red500}1F`,borderWidth:1,borderColor:`${t.red500}4D`},clearBtnText:{fontFamily:z.interMedium,fontSize:10.5,color:t.red500},listContent:{padding:12,gap:10},columnWrapper:{gap:12},card:{width:St,backgroundColor:t.slate800,borderRadius:8,borderWidth:1,borderColor:t.borderGlassLight,overflow:"hidden"},cardSelected:{borderColor:t.violet600,borderWidth:1.5},thumbnailContainer:{width:"100%",height:110,backgroundColor:t.slate850,position:"relative"},thumbnail:{width:"100%",height:"100%"},thumbnailFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:t.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:t.violet600,borderColor:t.violet600},miniPlayCircle:{position:"absolute",top:"50%",left:"50%",width:32,height:32,marginTop:-16,marginLeft:-16,borderRadius:16,backgroundColor:`${t.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:2,shadowColor:t.black,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:t.badgeGlassDark,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:t.borderGlassMedium},typeBadgeText:{fontFamily:z.interBold,fontSize:9,color:t.slate200},cardInfo:{padding:8,gap:3},cardTitle:{fontFamily:z.interMedium,fontSize:11.5,color:t.white},cardMetaRow:{flexDirection:"row",alignItems:"center",gap:4},cardMeta:{fontFamily:z.interRegular,fontSize:10,color:t.slate400},cardMetaDot:{fontSize:10,color:t.whiteAlpha30},listRow:{flexDirection:"row",alignItems:"center",backgroundColor:t.slate800,borderRadius:8,borderWidth:1,borderColor:t.borderGlassLight,padding:8,gap:10},listRowSelected:{borderColor:t.violet600,borderWidth:1.5,backgroundColor:`${t.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:t.slate850,overflow:"hidden",position:"relative"},listThumb:{width:"100%",height:"100%"},listThumbFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:t.slate900},listMiniPlay:{position:"absolute",top:"50%",left:"50%",width:20,height:20,marginTop:-10,marginLeft:-10,borderRadius:10,backgroundColor:`${t.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:1},listInfo:{flex:1,gap:4,minWidth:0},listTitle:{fontFamily:z.interMedium,fontSize:12,color:t.white},listMetaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},listBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:t.badgeGlassDark,paddingHorizontal:4,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:t.borderGlassMedium},listBadgeText:{fontFamily:z.interBold,fontSize:8.5,color:t.slate200},gridCopyBtn:{padding:3,borderRadius:4,backgroundColor:t.whiteAlpha08},listActionsRow:{flexDirection:"row",alignItems:"center",gap:6},listCopyBtn:{padding:6,borderRadius:6,backgroundColor:t.whiteAlpha10,borderWidth:1,borderColor:t.whiteAlpha15},listShareBtn:{padding:6,borderRadius:6,backgroundColor:`${t.sky400}18`,borderWidth:1,borderColor:`${t.sky400}40`},listDeleteBtn:{padding:6,borderRadius:6,backgroundColor:`${t.red500}14`,borderWidth:1,borderColor:`${t.red500}33`},copySelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:t.whiteAlpha10,borderWidth:1,borderColor:t.whiteAlpha20},copySelectedBtnText:{fontFamily:z.interSemiBold,fontSize:10.5,color:t.slate200},shareSelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${t.sky400}20`,borderWidth:1,borderColor:`${t.sky400}60`},shareSelectedBtnText:{fontFamily:z.interBold,fontSize:10.5,color:t.sky400}});
+      <Bt visible={$.visible}title={$.title}message={$.message}confirmText={$.confirmText}cancelText={$.cancelText}isDestructive={!0}icon="trash"onConfirm={$.onConfirm}onCancel={()=>L(t=>({...t,visible:!1}))}/>
+    </C>};const{width:It}=Ee.get("window"),zt=(It-36)/2,o=qe.create({container:{flex:1,backgroundColor:e.slate850},topHeaderBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:8,backgroundColor:e.primaryLight,borderBottomWidth:1,borderBottomColor:e.dividerColor},backToTabBtn:{flexDirection:"row",alignItems:"center",gap:6,paddingVertical:3,paddingHorizontal:6},backToTabText:{fontFamily:I.interSemiBold,fontSize:12,color:e.purple},closeCircleBtn:{width:26,height:26,borderRadius:13,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.dividerColor,alignItems:"center",justifyContent:"center"},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:I.interMedium,fontSize:11,color:e.slate400},chipTextActive:{fontFamily:I.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:I.interMedium,fontSize:11,color:e.slate400},resultCountTextSelected:{fontFamily:I.interSemiBold,color:e.sky400},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},rightControls:{flexDirection:"row",alignItems:"center",gap:6},importBtn:{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${e.sky500}1F`,borderColor:`${e.sky400}44`,borderWidth:1,paddingHorizontal:8,paddingVertical:4.5,borderRadius:6},importBtnText:{fontFamily:I.interSemiBold,fontSize:11,color:e.sky400},emptyContainer:{alignItems:"center",justifyContent:"center",paddingVertical:36},emptyImportBtn:{flexDirection:"row",alignItems:"center",gap:7,backgroundColor:e.sky500,paddingHorizontal:16,paddingVertical:10,borderRadius:8,marginTop:18,shadowColor:e.sky500,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:6,elevation:3},emptyImportBtnText:{fontFamily:I.interSemiBold,fontSize:13,color:e.white},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:I.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:I.interMedium,fontSize:10.5,color:e.red500},listContent:{padding:12,gap:10},columnWrapper:{gap:12},card:{width:zt,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:e.black,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:I.interBold,fontSize:9,color:e.slate200},cardInfo:{padding:8,gap:3},cardTitle:{fontFamily:I.interMedium,fontSize:11.5,color:e.white},cardMetaRow:{flexDirection:"row",alignItems:"center",gap:4},cardMeta:{fontFamily:I.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:I.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:I.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:I.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:I.interBold,fontSize:10.5,color:e.sky400}});