react-native-inapp-inspector 2.5.1 → 2.5.3

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

@@ -1,81 +1,81 @@
-import{useCallback as E,useEffect as G,useRef as d,useState as I}from"react";import{Animated as s,PanResponder as ae,Platform as b,StyleSheet as $e,Text as V,TouchableOpacity as We,useWindowDimensions as ke,View as S}from"react-native";import Ne from"react-native-linear-gradient";import{useInspector as _e}from"./InspectorContext";import F from"../TouchableScale";import Se from"../AppHeaderLogo";import{AndroidIcon as He,AppleIcon as Ye,ScreenshotCaptureIcon as Ge,ScreenRecordIcon as Xe,CloseWhite as Re,MaximizeIcon as Ze,NpmIcon as Ue}from"../NetworkIcons";import{ScreenCapture as P}from"../../capture";import{triggerNativeHaptic as u}from"../../native/NativeInspector";import{showToast as f}from"../../helpers/toast";import{getAppName as Je,getAppVersionAndBuild as Ke}from"../../helpers";import{LIB_VERSION as Qe}from"../../constants";import{AppColors as r}from"../../styles/AppColors";import{AppFonts as $}from"../../styles/AppFonts";import Ce from"../../styles";import{useTranslation as et}from"../../i18n";import{MediaPreviewModal as St}from"./MediaPreviewModal";const vt=()=>{const{setVisible:D,isMinimized:Te,setIsMinimized:W,dismissInspector:Ie,appIcon:K,fabPan:a,fabPanResponder:xt,fabDraggedRef:k,pulseAnim:Ve,fabShineAnim:Rt,refreshMediaCount:v,captureFps:Q,captureScale:ee,captureBitrate:X,captureMaxDurationSeconds:te,captureAudioMode:re}=_e(),{width:M,height:x}=ke(),{t:o}=et(),[Pe]=I(()=>Ke().formatted),[m,N]=I(!1),[De,Z]=I(0),R=d(null),[ie,O]=I(null),[Me,j]=I(!1),[q,z]=I(!1),p=d(!1),B=d(new s.Value(0)).current,_=d(new s.Value(1)).current,C=d({x:0,y:0});G(()=>{const e=a.x.addListener(n=>C.current.x=n.value),t=a.y.addListener(n=>C.current.y=n.value);return()=>{a.x.removeListener(e),a.y.removeListener(t)}},[a]);const l=68,H=8,Oe=E(()=>{const e=C.current.x,t=C.current.y,n=20,A=180,g=M-n-l/2+e,Y=x-A-l/2+t;let U=e,J=t,L=!1;g<H+l/2?(U=e+(H+l/2-g),L=!0):g>M-H-l/2&&(U=e-(g-(M-H-l/2)),L=!0);const ne=b.OS==="ios"?60:40,se=b.OS==="ios"?40:24;Y<ne+l/2?(J=t+(ne+l/2-Y),L=!0):Y>x-se-l/2&&(J=t-(Y-(x-se-l/2)),L=!0),L&&s.spring(a,{toValue:{x:U,y:J},useNativeDriver:!1,tension:80,friction:8}).start()},[a,M,x]),ze=d(ae.create({onStartShouldSetPanResponder:()=>!1,onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>4||Math.abs(t.dy)>4,onPanResponderGrant:()=>{k.current=!0,a.setOffset({x:C.current.x,y:C.current.y}),a.setValue({x:0,y:0}),p.current=!1,z(!1),j(!0),_.setValue(1),s.spring(B,{toValue:1,useNativeDriver:!0,tension:80,friction:8}).start()},onPanResponderMove:(e,t)=>{a.setValue({x:t.dx,y:t.dy});const n=t.moveY,A=t.moveX,g=n>x-140&&Math.abs(A-M/2)<85;g&&!p.current?(p.current=!0,z(!0),u("medium"),s.spring(_,{toValue:1.25,useNativeDriver:!0,tension:100,friction:6}).start()):!g&&p.current&&(p.current=!1,z(!1),s.spring(_,{toValue:1,useNativeDriver:!0,tension:100,friction:6}).start())},onPanResponderRelease:()=>{const e=p.current;a.flattenOffset(),s.timing(B,{toValue:0,duration:180,useNativeDriver:!0}).start(()=>{j(!1),z(!1),p.current=!1}),e?(u("heavy"),Ie(),f(o("common.inspectorDismissed","In-App Inspector closed for this session"))):Oe(),setTimeout(()=>{k.current=!1},100)},onPanResponderTerminate:()=>{a.flattenOffset(),k.current=!1,s.timing(B,{toValue:0,duration:180,useNativeDriver:!0}).start(()=>{j(!1),z(!1),p.current=!1})}})).current,c=d(new s.ValueXY({x:0,y:0})).current,T=d({x:0,y:0});G(()=>{const e=c.x.addListener(n=>T.current.x=n.value),t=c.y.addListener(n=>T.current.y=n.value);return()=>{c.x.removeListener(e),c.y.removeListener(t)}},[c]);const h=d(!1),Be=d(ae.create({onStartShouldSetPanResponder:()=>!1,onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>4||Math.abs(t.dy)>4,onPanResponderGrant:()=>{h.current=!0,c.setOffset({x:T.current.x,y:T.current.y}),c.setValue({x:0,y:0})},onPanResponderMove:s.event([null,{dx:c.x,dy:c.y}],{useNativeDriver:!1}),onPanResponderRelease:()=>{c.flattenOffset();const e=T.current.y,t=-(x-(b.OS==="ios"?34:18)-70),n=b.OS==="ios"?34:18;if(e<t||e>n){const A=Math.max(t,Math.min(n,e));s.spring(c,{toValue:{x:T.current.x,y:A},useNativeDriver:!1,tension:80,friction:8}).start()}setTimeout(()=>{h.current=!1},50)},onPanResponderTerminate:()=>{c.flattenOffset(),h.current=!1}})).current;G(()=>{P.isRecording().then(e=>{N(!!e)}).catch(()=>{})},[]),G(()=>(m?(Z(0),R.current=setInterval(()=>{Z(e=>e+1)},1e3)):(R.current&&(clearInterval(R.current),R.current=null),Z(0)),()=>{R.current&&clearInterval(R.current)}),[m]);const Ae=E(async()=>{if(!h.current)try{u("light");const e=await P.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(e){u("success");const t={id:`screenshot_${e.timestamp}.png`,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`screenshot_${e.timestamp}.png`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};O(t),v?.().catch(()=>{}),f(o("header.screenshotCaptured","Screenshot captured"))}else f(o("header.screenshotFailed","Failed to capture screenshot"))}catch{f(o("header.screenshotError","Error capturing screenshot"))}},[v,o]),Le=E(async()=>{if(!h.current)try{if(m){u("medium");const e=await P.stopRecording();if(N(!1),e){u("success");const t={id:`video_${e.timestamp}.${e.format}`,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`video_${e.timestamp}.${e.format}`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio,thumbnailUri:e.thumbnailUri};O(t),v?.().catch(()=>{}),f(o("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else u("medium"),await P.startRecording({fps:Q,scale:ee,audioSource:re,bitrate:X>0?X:void 0,maxDurationSeconds:te})?(N(!0),f(o("header.recordingStarted","Recording started"))):f(o("header.recordingStartFailed","Failed to start recording"))}catch{f(o("header.recordingError","Error during screen recording")),N(!1)}},[m,Q,ee,X,te,re,v,o]),oe=E(()=>{h.current||(u("light"),W?.(!1),D(!0))},[W,D]),Ee=E(()=>{h.current||(u("light"),W?.(!1),D(!1))},[W,D]),Fe=e=>{const t=Math.floor(e/60),n=e%60;return`${t}:${n<10?"0":""}${n}`};return<>
+import{useCallback as L,useEffect as X,useRef as d,useState as E}from"react";import{Animated as s,PanResponder as ce,Platform as b,StyleSheet as We,Text as I,TouchableOpacity as Ne,useWindowDimensions as He,View as S}from"react-native";import Ye from"react-native-linear-gradient";import{useInspector as $e}from"./InspectorContext";import F from"../TouchableScale";import Se from"../AppHeaderLogo";import{AndroidIcon as Ge,AppleIcon as Xe,ScreenshotCaptureIcon as Ze,ScreenRecordIcon as _e,CloseWhite as Re,MaximizeIcon as Ue,NpmIcon as Je}from"../NetworkIcons";import{ScreenCapture as V,generateCaptureId as K}from"../../capture";import{triggerNativeHaptic as u}from"../../native/NativeInspector";import{showToast as m}from"../../helpers/toast";import{getAppName as Ke,getAppVersionAndBuild as Qe}from"../../helpers";import{LIB_VERSION as et}from"../../constants";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as W}from"../../styles/AppFonts";import Ce from"../../styles";import{useTranslation as tt}from"../../i18n";import{MediaPreviewModal as St}from"./MediaPreviewModal";const vt=()=>{const{setVisible:P,isMinimized:Te,setIsMinimized:k,dismissInspector:Ie,appIcon:Q,fabPan:a,fabPanResponder:xt,fabDraggedRef:N,pulseAnim:Ve,fabShineAnim:Rt,refreshMediaCount:v,captureFps:ee,captureScale:te,captureBitrate:Z,captureMaxDurationSeconds:re,captureAudioMode:oe,previewMediaItem:ie,setPreviewMediaItem:D}=$e(),{width:M,height:x}=He(),{t:n}=tt(),[Pe]=E(()=>Qe().formatted),[p,H]=E(!1),[De,j]=E(0),R=d(null),[Me,_]=E(!1),[q,O]=E(!1),f=d(!1),z=d(new s.Value(0)).current,Y=d(new s.Value(1)).current,C=d({x:0,y:0});X(()=>{const e=a.x.addListener(r=>C.current.x=r.value),t=a.y.addListener(r=>C.current.y=r.value);return()=>{a.x.removeListener(e),a.y.removeListener(t)}},[a]);const l=68,$=8,Oe=L(()=>{const e=C.current.x,t=C.current.y,r=20,B=180,g=M-r-l/2+e,G=x-B-l/2+t;let U=e,J=t,A=!1;g<$+l/2?(U=e+($+l/2-g),A=!0):g>M-$-l/2&&(U=e-(g-(M-$-l/2)),A=!0);const se=b.OS==="ios"?60:40,ae=b.OS==="ios"?40:24;G<se+l/2?(J=t+(se+l/2-G),A=!0):G>x-ae-l/2&&(J=t-(G-(x-ae-l/2)),A=!0),A&&s.spring(a,{toValue:{x:U,y:J},useNativeDriver:!1,tension:80,friction:8}).start()},[a,M,x]),ze=d(ce.create({onStartShouldSetPanResponder:()=>!1,onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>4||Math.abs(t.dy)>4,onPanResponderGrant:()=>{N.current=!0,a.setOffset({x:C.current.x,y:C.current.y}),a.setValue({x:0,y:0}),f.current=!1,O(!1),_(!0),Y.setValue(1),s.spring(z,{toValue:1,useNativeDriver:!0,tension:80,friction:8}).start()},onPanResponderMove:(e,t)=>{a.setValue({x:t.dx,y:t.dy});const r=t.moveY,B=t.moveX,g=r>x-140&&Math.abs(B-M/2)<85;g&&!f.current?(f.current=!0,O(!0),u("medium"),s.spring(Y,{toValue:1.25,useNativeDriver:!0,tension:100,friction:6}).start()):!g&&f.current&&(f.current=!1,O(!1),s.spring(Y,{toValue:1,useNativeDriver:!0,tension:100,friction:6}).start())},onPanResponderRelease:()=>{const e=f.current;a.flattenOffset(),s.timing(z,{toValue:0,duration:180,useNativeDriver:!0}).start(()=>{_(!1),O(!1),f.current=!1}),e?(u("heavy"),Ie(),m(n("common.inspectorDismissed","In-App Inspector closed for this session"))):Oe(),setTimeout(()=>{N.current=!1},100)},onPanResponderTerminate:()=>{a.flattenOffset(),N.current=!1,s.timing(z,{toValue:0,duration:180,useNativeDriver:!0}).start(()=>{_(!1),O(!1),f.current=!1})}})).current,c=d(new s.ValueXY({x:0,y:0})).current,T=d({x:0,y:0});X(()=>{const e=c.x.addListener(r=>T.current.x=r.value),t=c.y.addListener(r=>T.current.y=r.value);return()=>{c.x.removeListener(e),c.y.removeListener(t)}},[c]);const h=d(!1),Be=d(ce.create({onStartShouldSetPanResponder:()=>!1,onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>4||Math.abs(t.dy)>4,onPanResponderGrant:()=>{h.current=!0,c.setOffset({x:T.current.x,y:T.current.y}),c.setValue({x:0,y:0})},onPanResponderMove:s.event([null,{dx:c.x,dy:c.y}],{useNativeDriver:!1}),onPanResponderRelease:()=>{c.flattenOffset();const e=T.current.y,t=-(x-(b.OS==="ios"?34:18)-70),r=b.OS==="ios"?34:18;if(e<t||e>r){const B=Math.max(t,Math.min(r,e));s.spring(c,{toValue:{x:T.current.x,y:B},useNativeDriver:!1,tension:80,friction:8}).start()}setTimeout(()=>{h.current=!1},50)},onPanResponderTerminate:()=>{c.flattenOffset(),h.current=!1}})).current;X(()=>{V.isRecording().then(e=>{H(!!e)}).catch(()=>{})},[]),X(()=>(p?(j(0),R.current=setInterval(()=>{j(e=>e+1)},1e3)):(R.current&&(clearInterval(R.current),R.current=null),j(0)),()=>{R.current&&clearInterval(R.current)}),[p]);const Ae=L(async()=>{if(!h.current)try{u("light");const e=await V.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(e){u("success");const t=K("screenshot",e.format||"png"),r={id:t,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};D(r),v?.().catch(()=>{}),m(n("header.screenshotCaptured","Screenshot captured"))}else m(n("header.screenshotFailed","Failed to capture screenshot"))}catch{m(n("header.screenshotError","Error capturing screenshot"))}},[v,n]),Le=L(async()=>{if(!h.current)try{if(p){u("medium");const e=await V.stopRecording();if(H(!1),e){u("success");const t=K("video",e.format),r={id:t,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio,thumbnailUri:e.thumbnailUri};D(r),v?.().catch(()=>{}),m(n("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else u("medium"),await V.startRecording({fps:ee,scale:te,audioSource:oe,bitrate:Z>0?Z:void 0,maxDurationSeconds:re})?(H(!0),m(n("header.recordingStarted","Recording started"))):m(n("header.recordingStartFailed","Failed to start recording"))}catch{m(n("header.recordingError","Error during screen recording")),H(!1)}},[p,ee,te,Z,re,oe,v,n]),ne=L(()=>{h.current||(u("light"),k?.(!1),P(!0))},[k,P]),Ee=L(()=>{h.current||(u("light"),k?.(!1),P(!1))},[k,P]),Fe=e=>{const t=Math.floor(e/60),r=e%60;return`${t}:${r<10?"0":""}${r}`};return<>
       
       {Te?<s.View style={[i.playerContainer,{transform:c.getTranslateTransform()}]}{...Be.panHandlers}>
           
-          <Ne colors={[r.indigo600,r.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={i.gradientBg}pointerEvents="none"/>
+          <Ye colors={[o.indigo600,o.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={i.gradientBg}pointerEvents="none"/>
 
           
-          <We activeOpacity={.75}onPress={oe}style={i.brandSection}accessibilityRole="button"accessibilityLabel={o("mediaGallery.expand","Expand Inspector")}>
-            <Se size={36}customIcon={K}shape="circle"/>
+          <Ne activeOpacity={.75}onPress={ne}style={i.brandSection}accessibilityRole="button"accessibilityLabel={n("mediaGallery.expand","Expand Inspector")}>
+            <Se size={36}customIcon={Q}shape="circle"/>
             <S style={i.titleWrapper}>
-              <V style={i.appTitle}numberOfLines={1}>
-                {Je()}
-              </V>
+              <I style={i.appTitle}numberOfLines={1}>
+                {Ke()}
+              </I>
               <S style={i.versionRow}>
                 
                 <S style={i.versionChip}>
-                  {b.OS==="ios"?<Ye color={`${r.white}E6`}size={9}/>:<He color={`${r.white}E6`}size={9}/>}
-                  <V style={i.versionChipText}numberOfLines={1}>
+                  {b.OS==="ios"?<Xe color={`${o.white}E6`}size={9}/>:<Ge color={`${o.white}E6`}size={9}/>}
+                  <I style={i.versionChipText}numberOfLines={1}>
                     {Pe}
-                  </V>
+                  </I>
                 </S>
 
                 
                 <S style={i.versionChip}>
-                  <Ue size={9}color={r.npmRedLight}/>
-                  <V style={i.versionChipText}numberOfLines={1}>
-                    v{Qe}
-                  </V>
+                  <Je size={9}color={o.npmRedLight}/>
+                  <I style={i.versionChipText}numberOfLines={1}>
+                    v{et}
+                  </I>
                 </S>
               </S>
             </S>
-          </We>
+          </Ne>
 
           
           <S style={i.actionsRow}>
             
             <F onPress={Ae}hitSlop={{top:6,bottom:6,left:4,right:4}}style={i.actionBtn}>
-              <Ge size={12}color={r.white}/>
-              <V style={i.actionText}>
-                {o("header.photo","Photo")}
-              </V>
+              <Ze size={12}color={o.white}/>
+              <I style={i.actionText}>
+                {n("header.photo","Photo")}
+              </I>
             </F>
 
             
-            <F onPress={Le}hitSlop={{top:6,bottom:6,left:4,right:4}}style={[i.actionBtn,m&&i.recordingBtnActive]}>
-              {m?<S style={i.recordingDot}/>:<Xe size={12}color={r.white}/>}
-              <V style={[i.actionText,m&&{color:r.red300}]}>
-                {m?`${o("header.rec","REC")} ${Fe(De)}`:o("header.record","Record")}
-              </V>
+            <F onPress={Le}hitSlop={{top:6,bottom:6,left:4,right:4}}style={[i.actionBtn,p&&i.recordingBtnActive]}>
+              {p?<S style={i.recordingDot}/>:<_e size={12}color={o.white}/>}
+              <I style={[i.actionText,p&&{color:o.red300}]}>
+                {p?`${n("header.rec","REC")} ${Fe(De)}`:n("header.record","Record")}
+              </I>
             </F>
 
             
-            <F onPress={oe}hitSlop={{top:6,bottom:6,left:4,right:4}}accessibilityRole="button"accessibilityLabel={o("common.expand","Expand")}style={i.actionBtnSquare}>
-              <Ze size={12}color={r.white}/>
+            <F onPress={ne}hitSlop={{top:6,bottom:6,left:4,right:4}}accessibilityRole="button"accessibilityLabel={n("common.expand","Expand")}style={i.actionBtnSquare}>
+              <Ue size={12}color={o.white}/>
             </F>
 
             
-            <F onPress={Ee}hitSlop={{top:6,bottom:6,left:4,right:6}}accessibilityRole="button"accessibilityLabel={o("common.close","Close")}style={i.actionBtnSquare}>
-              <Re size={10}color={r.white}/>
+            <F onPress={Ee}hitSlop={{top:6,bottom:6,left:4,right:6}}accessibilityRole="button"accessibilityLabel={n("common.close","Close")}style={i.actionBtnSquare}>
+              <Re size={10}color={o.white}/>
             </F>
           </S>
         </s.View>:<s.View style={[Ce.fabWrapper,{transform:a.getTranslateTransform()}]}{...ze.panHandlers}>
-          <F style={{alignItems:"center",justifyContent:"center"}}onPress={()=>{k.current||(u("light"),D(!0))}}hitSlop={10}>
+          <F style={{alignItems:"center",justifyContent:"center"}}onPress={()=>{N.current||(u("light"),P(!0))}}hitSlop={10}>
             <s.View style={[Ce.fabPulseRing,{transform:[{scale:Ve}]}]}/>
-            <Se size={68}customIcon={K}shape="circle"/>
+            <Se size={68}customIcon={Q}shape="circle"/>
           </F>
         </s.View>}
 
       
-      {Me&&<s.View pointerEvents="none"style={[i.dismissTargetContainer,{opacity:B,transform:[{translateY:B.interpolate({inputRange:[0,1],outputRange:[30,0]})},{scale:_}]}]}>
+      {Me&&<s.View pointerEvents="none"style={[i.dismissTargetContainer,{opacity:z,transform:[{translateY:z.interpolate({inputRange:[0,1],outputRange:[30,0]})},{scale:Y}]}]}>
           <S style={[i.dismissTargetCircle,q&&i.dismissTargetCircleActive]}>
-            <Re size={18}color={r.white}/>
+            <Re size={18}color={o.white}/>
           </S>
-          <V style={[i.dismissTargetLabel,q&&i.dismissTargetLabelActive]}>
-            {q?o("common.releaseToHide","Release to hide"):o("common.dragToHide","Drag here to hide")}
-          </V>
+          <I style={[i.dismissTargetLabel,q&&i.dismissTargetLabelActive]}>
+            {q?n("common.releaseToHide","Release to hide"):n("common.dragToHide","Drag here to hide")}
+          </I>
         </s.View>}
 
       
-      <St item={ie}visible={!!ie}onClose={()=>O(null)}onDelete={async e=>{await P.deleteMedia(e.uri),v?.().catch(()=>{}),O(null)}}onConvertToGif={async e=>{const t=await P.convertToGif(e.uri,{fps:12,width:480});t&&(v?.().catch(()=>{}),O({id:`anim_${t.timestamp}.gif`,type:"gif",format:"gif",uri:t.uri,filename:t.uri.split("/").pop()||`anim_${t.timestamp}.gif`,sizeBytes:t.sizeBytes,timestamp:t.timestamp,durationMs:t.durationMs}))}}/>
-    </>},i=$e.create({dismissTargetContainer:{position:"absolute",bottom:b.OS==="ios"?42:26,left:0,right:0,alignItems:"center",justifyContent:"center",zIndex:999998},dismissTargetCircle:{width:54,height:54,borderRadius:27,backgroundColor:"rgba(23, 23, 37, 0.82)",borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.28)",alignItems:"center",justifyContent:"center",shadowColor:r.black,shadowOffset:{width:0,height:6},shadowOpacity:.4,shadowRadius:10,elevation:16},dismissTargetCircleActive:{backgroundColor:r.red600,borderColor:r.red300,shadowColor:r.red600,shadowOpacity:.65,shadowRadius:18,transform:[{scale:1.06}]},dismissTargetLabel:{marginTop:6,fontFamily:$.interSemiBold,fontSize:11,color:"rgba(255, 255, 255, 0.85)",textShadowColor:"rgba(0, 0, 0, 0.6)",textShadowOffset:{width:0,height:1},textShadowRadius:3},dismissTargetLabelActive:{color:r.red300,fontFamily:$.interBold},playerContainer:{position:"absolute",bottom:b.OS==="ios"?34:18,left:12,right:12,minHeight:58,flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderRadius:16,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.28)",paddingHorizontal:12,paddingVertical:7,gap:8,zIndex:99999,elevation:25,shadowColor:r.indigo600,shadowOffset:{width:0,height:8},shadowOpacity:.45,shadowRadius:14,overflow:"hidden"},gradientBg:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16},playerShineClip:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16,overflow:"hidden"},playerShineStreak:{position:"absolute",top:-60,width:75,height:200},brandSection:{flexDirection:"row",alignItems:"center",gap:9,flex:1,minWidth:0,paddingVertical:2,overflow:"hidden"},titleWrapper:{flex:1,minWidth:0,justifyContent:"center",gap:2},appTitle:{fontFamily:$.interBold,fontSize:13.5,color:r.white,letterSpacing:-.2},versionRow:{flexDirection:"row",alignItems:"center",gap:4,minWidth:0},versionChip:{flexDirection:"row",alignItems:"center",backgroundColor:`${r.white}1F`,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${r.white}2E`,flexShrink:1,minWidth:0},versionChipText:{fontFamily:$.interMedium,fontSize:8.5,color:`${r.white}EB`,letterSpacing:.1},actionsRow:{flexDirection:"row",alignItems:"center",gap:4.5,flexShrink:0},actionBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"rgba(255, 255, 255, 0.22)",paddingHorizontal:8,paddingVertical:5.5,borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},actionBtnSquare:{alignItems:"center",justifyContent:"center",width:27,height:27,backgroundColor:"rgba(255, 255, 255, 0.22)",borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},recordingBtnActive:{backgroundColor:"rgba(239, 68, 68, 0.32)",borderColor:r.red500},recordingDot:{width:6,height:6,borderRadius:3,backgroundColor:r.red500},actionText:{fontFamily:$.interSemiBold,fontSize:10.5,color:r.white}});export default vt;
+      <St item={ie}visible={!!ie}onClose={()=>D(null)}onDelete={async e=>{await V.deleteMedia(e.uri),v?.().catch(()=>{}),D(null)}}onConvertToGif={async e=>{const t=await V.convertToGif(e.uri,{fps:12,width:480});if(t){v?.().catch(()=>{});const r=K("anim","gif");D({id:r,type:"gif",format:"gif",uri:t.uri,filename:t.uri.split("/").pop()||r,sizeBytes:t.sizeBytes,timestamp:t.timestamp,durationMs:t.durationMs})}}}/>
+    </>},i=We.create({dismissTargetContainer:{position:"absolute",bottom:b.OS==="ios"?42:26,left:0,right:0,alignItems:"center",justifyContent:"center",zIndex:999998},dismissTargetCircle:{width:54,height:54,borderRadius:27,backgroundColor:"rgba(23, 23, 37, 0.82)",borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.28)",alignItems:"center",justifyContent:"center",shadowColor:o.black,shadowOffset:{width:0,height:6},shadowOpacity:.4,shadowRadius:10,elevation:16},dismissTargetCircleActive:{backgroundColor:o.red600,borderColor:o.red300,shadowColor:o.red600,shadowOpacity:.65,shadowRadius:18,transform:[{scale:1.06}]},dismissTargetLabel:{marginTop:6,fontFamily:W.interSemiBold,fontSize:11,color:"rgba(255, 255, 255, 0.85)",textShadowColor:"rgba(0, 0, 0, 0.6)",textShadowOffset:{width:0,height:1},textShadowRadius:3},dismissTargetLabelActive:{color:o.red300,fontFamily:W.interBold},playerContainer:{position:"absolute",bottom:b.OS==="ios"?34:18,left:12,right:12,minHeight:58,flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderRadius:16,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.28)",paddingHorizontal:12,paddingVertical:7,gap:8,zIndex:99999,elevation:25,shadowColor:o.indigo600,shadowOffset:{width:0,height:8},shadowOpacity:.45,shadowRadius:14,overflow:"hidden"},gradientBg:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16},playerShineClip:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16,overflow:"hidden"},playerShineStreak:{position:"absolute",top:-60,width:75,height:200},brandSection:{flexDirection:"row",alignItems:"center",gap:9,flex:1,minWidth:0,paddingVertical:2,overflow:"hidden"},titleWrapper:{flex:1,minWidth:0,justifyContent:"center",gap:2},appTitle:{fontFamily:W.interBold,fontSize:13.5,color:o.white,letterSpacing:-.2},versionRow:{flexDirection:"row",alignItems:"center",gap:4,minWidth:0},versionChip:{flexDirection:"row",alignItems:"center",backgroundColor:`${o.white}1F`,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${o.white}2E`,flexShrink:1,minWidth:0},versionChipText:{fontFamily:W.interMedium,fontSize:8.5,color:`${o.white}EB`,letterSpacing:.1},actionsRow:{flexDirection:"row",alignItems:"center",gap:4.5,flexShrink:0},actionBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"rgba(255, 255, 255, 0.22)",paddingHorizontal:8,paddingVertical:5.5,borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},actionBtnSquare:{alignItems:"center",justifyContent:"center",width:27,height:27,backgroundColor:"rgba(255, 255, 255, 0.22)",borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},recordingBtnActive:{backgroundColor:"rgba(239, 68, 68, 0.32)",borderColor:o.red500},recordingDot:{width:6,height:6,borderRadius:3,backgroundColor:o.red500},actionText:{fontFamily:W.interSemiBold,fontSize:10.5,color:o.white}});export default vt;

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

@@ -1,54 +1,54 @@
-import{useCallback as Z,useEffect as G,useRef as x,useState as E}from"react";import{Animated as o,Dimensions as Be,PanResponder as De,Platform as _,StyleSheet as ee,Text as W,View as S}from"react-native";import Se from"react-native-linear-gradient";import{useInspector as ze}from"./InspectorContext";import N from"../TouchableScale";import{GripVerticalIcon as Ee,ScreenshotCaptureIcon as Fe,ScreenRecordIcon as $e}from"../NetworkIcons";import{ScreenCapture as V}from"../../capture";import{triggerNativeHaptic as B}from"../../native/NativeInspector";import{showToast as v}from"../../helpers/toast";import{AppColors as s}from"../../styles/AppColors";import{AppFonts as xe}from"../../styles/AppFonts";import{useTranslation as Ae}from"../../i18n";import{MediaPreviewModal as Le}from"./MediaPreviewModal";export const FloatingCaptureWidget=()=>{const{refreshMediaCount:R,captureFps:X,captureScale:Y,captureBitrate:F,captureMaxDurationSeconds:j,captureAudioMode:q,activeTab:ve,settingsPage:Re,peekMode:Oe}=ze(),{t:n}=Ae(),[M,D]=E(!1),[Ie,$]=E(!1),[Ce,A]=E(0),I=x(null),[H,T]=E(null),k=x(new o.Value(1)).current,z=x(new o.Value(0)).current,i=x(new o.ValueXY({x:0,y:0})).current,C=x({x:0,y:0});G(()=>{const e=i.x.addListener(a=>C.current.x=a.value),t=i.y.addListener(a=>C.current.y=a.value);return()=>{i.x.removeListener(e),i.y.removeListener(t)}},[i]);const P=x(!1),Ve=x(De.create({onStartShouldSetPanResponder:()=>!1,onStartShouldSetPanResponderCapture:()=>!1,onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>2||Math.abs(t.dy)>2,onMoveShouldSetPanResponderCapture:(e,t)=>Math.abs(t.dx)>2||Math.abs(t.dy)>2,onPanResponderGrant:()=>{P.current=!0,i.setOffset({x:C.current.x,y:C.current.y}),i.setValue({x:0,y:0})},onPanResponderMove:(e,t)=>{i.setValue({x:t.dx,y:t.dy})},onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderRelease:()=>{i.flattenOffset(),setTimeout(()=>{P.current=!1},150);const{width:e,height:t}=Be.get("window"),a=e/2-30,J=-a,K=20,Q=-(t-120),L=C.current.x,O=C.current.y;if(L<J||L>a||O<Q||O>K){const ke=Math.min(Math.max(L,J),a),Pe=Math.min(Math.max(O,Q),K);o.spring(i,{toValue:{x:ke,y:Pe},friction:7,tension:50,useNativeDriver:!1}).start()}},onPanResponderTerminate:()=>{i.flattenOffset(),P.current=!1}})).current;G(()=>{V.isRecording().then(e=>{D(e)}).catch(()=>{})},[]),G(()=>{let e=null;return M?(A(0),I.current=setInterval(()=>{A(t=>t+1)},1e3),e=o.loop(o.sequence([o.timing(k,{toValue:1.15,duration:500,useNativeDriver:!0}),o.timing(k,{toValue:1,duration:500,useNativeDriver:!0})])),e.start()):(I.current&&(clearInterval(I.current),I.current=null),A(0),k.setValue(1)),()=>{I.current&&clearInterval(I.current),e&&e.stop()}},[M,k]);const Me=Z(async()=>{if(!P.current)try{B("light"),$(!0),await new Promise(t=>setTimeout(t,60));const e=await V.takeScreenshot({format:"png",quality:.9,hideInspector:!1});if($(!1),o.sequence([o.timing(z,{toValue:.65,duration:70,useNativeDriver:!0}),o.timing(z,{toValue:0,duration:200,useNativeDriver:!0})]).start(),e){B("success");const t={id:`screenshot_${e.timestamp}.png`,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`screenshot_${e.timestamp}.png`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};T(t),R?.().catch(()=>{}),v(n("header.screenshotCaptured","Screenshot captured"))}else v(n("header.screenshotFailed","Failed to capture screenshot"))}catch{$(!1),v(n("header.screenshotError","Error capturing screenshot"))}},[R,z,n]),U=Z(async()=>{if(!P.current)try{if(M){B("medium");const e=await V.stopRecording();if(D(!1),e){B("success");const t={id:`video_${e.timestamp}.${e.format}`,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`video_${e.timestamp}.${e.format}`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio,thumbnailUri:e.thumbnailUri};T(t),R?.().catch(()=>{}),v(n("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else B("medium"),await V.startRecording({fps:X,scale:Y,audioSource:q,bitrate:F>0?F:void 0,maxDurationSeconds:j})?(D(!0),v(n("header.recordingStarted","Recording started"))):v(n("header.recordingStartFailed","Failed to start recording"))}catch{v(n("header.recordingError","Error during screen recording")),D(!1)}},[M,X,Y,F,j,q,R,n]),Te=e=>{const t=Math.floor(e/60),a=e%60;return`${t<10?"0":""}${t}:${a<10?"0":""}${a}`};return ve==="media"||Re==="media"?null:<>
+import{useCallback as Z,useEffect as G,useRef as v,useState as j}from"react";import{Animated as n,Dimensions as Pe,PanResponder as De,Platform as N,StyleSheet as ee,Text as W,View as S}from"react-native";import Se from"react-native-linear-gradient";import{useInspector as Fe}from"./InspectorContext";import $ from"../TouchableScale";import{GripVerticalIcon as Be,ScreenshotCaptureIcon as Le,ScreenRecordIcon as Ae}from"../NetworkIcons";import{ScreenCapture as C,generateCaptureId as q}from"../../capture";import{triggerNativeHaptic as D}from"../../native/NativeInspector";import{showToast as b}from"../../helpers/toast";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as ve}from"../../styles/AppFonts";import{useTranslation as Oe}from"../../i18n";import{MediaPreviewModal as Ee}from"./MediaPreviewModal";export const FloatingCaptureWidget=()=>{const{refreshMediaCount:x,captureFps:X,captureScale:Y,captureBitrate:B,captureMaxDurationSeconds:H,captureAudioMode:U,activeTab:be,settingsPage:xe,peekMode:Ge,previewMediaItem:z,setPreviewMediaItem:T}=Fe(),{t:s}=Oe(),[M,V]=j(!1),[Ie,L]=j(!1),[Re,A]=j(0),I=v(null),k=v(new n.Value(1)).current,F=v(new n.Value(0)).current,a=v(new n.ValueXY({x:0,y:0})).current,R=v({x:0,y:0});G(()=>{const e=a.x.addListener(o=>R.current.x=o.value),t=a.y.addListener(o=>R.current.y=o.value);return()=>{a.x.removeListener(e),a.y.removeListener(t)}},[a]);const P=v(!1),Ce=v(De.create({onStartShouldSetPanResponder:()=>!0,onStartShouldSetPanResponderCapture:()=>!1,onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>2||Math.abs(t.dy)>2,onMoveShouldSetPanResponderCapture:(e,t)=>Math.abs(t.dx)>4||Math.abs(t.dy)>4,onPanResponderGrant:()=>{P.current=!0,a.setOffset({x:R.current.x,y:R.current.y}),a.setValue({x:0,y:0})},onPanResponderMove:n.event([null,{dx:a.x,dy:a.y}],{useNativeDriver:!1}),onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderRelease:()=>{a.flattenOffset(),setTimeout(()=>{P.current=!1},100);const{width:e,height:t}=Pe.get("window"),o=e/2-20,J=-o,K=20,Q=-(t-140),O=R.current.x,E=R.current.y;if(O<J||O>o||E<Q||E>K){const Ve=Math.min(Math.max(O,J),o),ke=Math.min(Math.max(E,Q),K);n.spring(a,{toValue:{x:Ve,y:ke},friction:7,tension:50,useNativeDriver:!1}).start()}},onPanResponderTerminate:()=>{a.flattenOffset(),P.current=!1}})).current;G(()=>{C.isRecording().then(e=>{V(e)}).catch(()=>{})},[]),G(()=>{let e=null;return M?(A(0),I.current=setInterval(()=>{A(t=>t+1)},1e3),e=n.loop(n.sequence([n.timing(k,{toValue:1.15,duration:500,useNativeDriver:!0}),n.timing(k,{toValue:1,duration:500,useNativeDriver:!0})])),e.start()):(I.current&&(clearInterval(I.current),I.current=null),A(0),k.setValue(1)),()=>{I.current&&clearInterval(I.current),e&&e.stop()}},[M,k]);const Te=Z(async()=>{if(!P.current)try{D("light"),L(!0),await new Promise(t=>setTimeout(t,60));const e=await C.takeScreenshot({format:"png",quality:.9,hideInspector:!1});if(L(!1),n.sequence([n.timing(F,{toValue:.65,duration:70,useNativeDriver:!0}),n.timing(F,{toValue:0,duration:200,useNativeDriver:!0})]).start(),e){D("success");const t=q("screenshot",e.format||"png"),o={id:t,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};T(o),x?.().catch(()=>{}),b(s("header.screenshotCaptured","Screenshot captured"))}else b(s("header.screenshotFailed","Failed to capture screenshot"))}catch{L(!1),b(s("header.screenshotError","Error capturing screenshot"))}},[x,F,s]),_=Z(async()=>{if(!P.current)try{if(M){D("medium");const e=await C.stopRecording();if(V(!1),e){D("success");const t=q("video",e.format),o={id:t,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio,thumbnailUri:e.thumbnailUri};T(o),x?.().catch(()=>{}),b(s("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else D("medium"),V(!0),await C.startRecording({fps:X,scale:Y,audioSource:U,bitrate:B>0?B:void 0,maxDurationSeconds:H})?b(s("header.recordingStarted","Recording started")):(V(!1),b(s("header.recordingStartFailed","Failed to start recording")))}catch{b(s("header.recordingError","Error during screen recording")),V(!1)}},[M,X,Y,B,H,U,x,s]),Me=e=>{const t=Math.floor(e/60),o=e%60;return`${t<10?"0":""}${t}:${o<10?"0":""}${o}`};return be==="media"||xe==="media"?null:<>
       
-      <o.View pointerEvents="none"style={[r.flashOverlay,{opacity:z}]}/>
+      <n.View pointerEvents="none"style={[r.flashOverlay,{opacity:F}]}/>
 
-      {!Ie&&<o.View{...Ve.panHandlers}style={[r.container,{transform:[{translateX:i.x},{translateY:i.y}]}]}>
+      {!Ie&&!z&&<n.View{...Ce.panHandlers}style={[r.container,{transform:a.getTranslateTransform()}]}>
           
           {M?<S style={r.recordingShadowWrapper}>
-              <N onPress={U}style={r.recordingPillWrapper}>
-                <Se colors={["#E11D48","#BE123C"]}start={{x:0,y:0}}end={{x:1,y:0}}style={r.recordingPill}>
-                  <o.View style={[r.recordingDot,{transform:[{scale:k}]}]}/>
+              <$ onPress={_}style={r.recordingPillWrapper}>
+                <Se colors={[i.rose600,i.rose700]}start={{x:0,y:0}}end={{x:1,y:0}}style={r.recordingPill}>
+                  <n.View style={[r.recordingDot,{transform:[{scale:k}]}]}/>
                   <W style={r.recordingText}>
-                    REC {Te(Ce)}
+                    REC {Me(Re)}
                   </W>
                   <S style={r.stopIconBadge}>
                     <S style={r.stopIconSquare}/>
                   </S>
                 </Se>
-              </N>
+              </$>
             </S>:<S style={r.dockShadowWrapper}>
-              <Se colors={["#0E1326","#1A1E38","#0E1326"]}start={{x:0,y:0}}end={{x:1,y:0}}style={r.dockBar}>
+              <Se colors={[i.navy900,i.navy800,i.navy900]}start={{x:0,y:0}}end={{x:1,y:0}}style={r.dockBar}>
                 
-                <S style={r.dragGripArea}pointerEvents="none">
-                  <Ee size={13}color="rgba(255, 255, 255, 0.45)"/>
-                </S>
-
-                
-                <N onPress={Me}style={r.menuItemBtn}accessible={!0}accessibilityLabel="Take Screenshot">
-                  <S style={[r.menuItemIconCircle,{backgroundColor:"rgba(56, 189, 248, 0.22)"}]}>
-                    <Fe size={14}color={s.sky400}/>
+                <$ onPress={Te}style={r.menuItemBtn}accessible={!0}accessibilityLabel="Take Screenshot">
+                  <S style={[r.menuItemIconCircle,{backgroundColor:`${i.sky400}38`}]}>
+                    <Le size={14}color={i.sky400}/>
                   </S>
                   <W style={r.menuItemText}>
-                    {n("header.screenshot","Screenshot")}
+                    {s("header.screenshot","Screenshot")}
                   </W>
-                </N>
+                </$>
 
                 
                 <S style={r.dockDivider}/>
 
                 
-                <N onPress={U}style={r.menuItemBtn}accessible={!0}accessibilityLabel={n("header.recordScreen","Record Screen")}>
-                  <S style={[r.menuItemIconCircle,{backgroundColor:"rgba(244, 63, 94, 0.24)"}]}>
-                    <$e size={14}color={s.rose400||"#FB7185"}/>
+                <$ onPress={_}style={r.menuItemBtn}accessible={!0}accessibilityLabel={s("header.recordScreen","Record Screen")}>
+                  <S style={[r.menuItemIconCircle,{backgroundColor:`${i.rose500}3D`}]}>
+                    <Ae size={14}color={i.rose400}/>
                   </S>
                   <W style={r.menuItemText}>
-                    {n("header.record","Record")}
+                    {s("header.record","Record")}
                   </W>
-                </N>
+                </$>
+
+                
+                <S style={r.dragGripArea}>
+                  <Be size={14}color="rgba(255, 255, 255, 0.55)"/>
+                </S>
               </Se>
             </S>}
-        </o.View>}
+        </n.View>}
 
       
-      <Le item={H}visible={!!H}onClose={()=>T(null)}onDelete={async e=>{await V.deleteMedia(e.uri),R?.().catch(()=>{}),T(null)}}onConvertToGif={async e=>{const t=await V.convertToGif(e.uri,{fps:12,width:480});t&&(R?.().catch(()=>{}),T({id:`anim_${t.timestamp}.gif`,type:"gif",format:"gif",uri:t.uri,filename:t.uri.split("/").pop()||`anim_${t.timestamp}.gif`,sizeBytes:t.sizeBytes,timestamp:t.timestamp,durationMs:t.durationMs}))}}/>
-    </>};const r=ee.create({flashOverlay:{...ee.absoluteFillObject,backgroundColor:s.white,zIndex:999999},container:{position:"absolute",bottom:_.OS==="ios"?22:16,alignSelf:"center",alignItems:"center",justifyContent:"center",zIndex:999999,elevation:999999},dockShadowWrapper:{borderRadius:24,backgroundColor:"#0D1120",..._.select({ios:{shadowColor:s.black,shadowOffset:{width:0,height:6},shadowOpacity:.45,shadowRadius:14},android:{elevation:16}})},dockBar:{flexDirection:"row",alignItems:"center",borderRadius:24,width:272,paddingVertical:0,paddingHorizontal:0,overflow:"hidden"},dragGripArea:{paddingLeft:10,paddingRight:2,paddingVertical:10,alignItems:"center",justifyContent:"center"},dockDivider:{width:1,height:20,backgroundColor:"rgba(255, 255, 255, 0.12)"},menuItemBtn:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:7,paddingVertical:9,paddingHorizontal:10},menuItemIconCircle:{width:24,height:24,borderRadius:12,alignItems:"center",justifyContent:"center"},menuItemText:{fontFamily:xe.interSemiBold,fontSize:12,color:s.white,letterSpacing:.1},recordingShadowWrapper:{borderRadius:20,..._.select({ios:{shadowColor:s.black,shadowOffset:{width:0,height:4},shadowOpacity:.4,shadowRadius:10},android:{elevation:12}})},recordingPillWrapper:{borderRadius:20,overflow:"hidden"},recordingPill:{flexDirection:"row",alignItems:"center",gap:7,paddingVertical:6.5,paddingHorizontal:12,borderRadius:20,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.35)"},recordingDot:{width:7,height:7,borderRadius:3.5,backgroundColor:s.white},recordingText:{fontFamily:xe.interBold,fontSize:11,color:s.white,letterSpacing:.3},stopIconBadge:{width:16,height:16,borderRadius:8,backgroundColor:"rgba(255, 255, 255, 0.28)",alignItems:"center",justifyContent:"center",marginLeft:2},stopIconSquare:{width:5.5,height:5.5,borderRadius:1,backgroundColor:s.white}});export default FloatingCaptureWidget;
+      <Ee item={z}visible={!!z}onClose={()=>T(null)}onDelete={async e=>{await C.deleteMedia(e.uri),x?.().catch(()=>{}),T(null)}}onConvertToGif={async e=>{const t=await C.convertToGif(e.uri,{fps:12,width:480});if(t){x?.().catch(()=>{});const o=q("anim","gif");T({id:o,type:"gif",format:"gif",uri:t.uri,filename:t.uri.split("/").pop()||o,sizeBytes:t.sizeBytes,timestamp:t.timestamp,durationMs:t.durationMs})}}}/>
+    </>};const r=ee.create({flashOverlay:{...ee.absoluteFillObject,backgroundColor:i.white,zIndex:999999},container:{position:"absolute",bottom:N.OS==="ios"?22:16,alignSelf:"center",alignItems:"center",justifyContent:"center",zIndex:999999,elevation:999999},dockShadowWrapper:{borderRadius:24,backgroundColor:"#0D1120",...N.select({ios:{shadowColor:i.black,shadowOffset:{width:0,height:6},shadowOpacity:.45,shadowRadius:14},android:{elevation:16}})},dockBar:{flexDirection:"row",alignItems:"center",borderRadius:24,overflow:"hidden"},dragGripArea:{paddingLeft:6,paddingRight:12,paddingVertical:10,alignItems:"center",justifyContent:"center"},dockDivider:{width:1,height:18,backgroundColor:"rgba(255, 255, 255, 0.14)"},menuItemBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:7,paddingVertical:8.5,paddingHorizontal:12},menuItemIconCircle:{width:24,height:24,borderRadius:12,alignItems:"center",justifyContent:"center"},menuItemText:{fontFamily:ve.interSemiBold,fontSize:12,color:i.white,letterSpacing:.1},recordingShadowWrapper:{borderRadius:22,alignItems:"center",justifyContent:"center",...N.select({ios:{shadowColor:"#E11D48",shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:12},android:{elevation:14}})},recordingPillWrapper:{borderRadius:22,overflow:"hidden"},recordingPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:8,height:38,paddingHorizontal:14,borderRadius:22,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.45)"},recordingDot:{width:8,height:8,borderRadius:4,backgroundColor:"#FFFFFF"},recordingText:{fontFamily:ve.interBold,fontSize:12,color:i.white,letterSpacing:.4},stopIconBadge:{width:18,height:18,borderRadius:9,backgroundColor:"rgba(255, 255, 255, 0.28)",alignItems:"center",justifyContent:"center",marginLeft:3},stopIconSquare:{width:6,height:6,borderRadius:1.5,backgroundColor:i.white}});export default FloatingCaptureWidget;

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

@@ -1,4 +1,4 @@
-import j,{useMemo as G}from"react";import{Modal as U,StyleSheet as J,Text as T,View as C,ScrollView as Y,SafeAreaView as K,Platform as X}from"react-native";import E from"react-native-linear-gradient";import F from"../TouchableScale";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{exportCrashReport as Q}from"../../customHooks/crashHandler";import{copyToClipboard as Z}from"../../helpers";import{showToast as _}from"../../helpers/toast";import{useTranslation as ee}from"../../i18n";import{WarningTriangleIcon as Te,CopyIcon as Ce,RefreshCcwIcon as Se,CloseWhite as Be,CircleAlertIcon as Ve,TerminalIcon as Re,CodeBracketsIcon as Ie,RepeatIcon as Fe,ShieldAlertIcon as W,FlameIcon as He,ChipIcon as Le,LayoutIcon as D,HourglassIcon as Ae,JsIcon as Me}from"../NetworkIcons";export const GlobalCrashScreenModal=j.memo(({visible:H,crash:h,onDismiss:L,onOpenInspector:O,onRetry:A})=>{const{t:B}=ee(),M=G(()=>h?Q(h,"markdown"):"",[h]);if(!H||!h)return null;const z=h.isFatal,P=h.type||"js",R=h.parsedStack&&h.parsedStack.length>0?h.parsedStack.find(V=>V.isAppCode)||h.parsedStack[0]:null,N=()=>{M&&(Z(M,B("errors.errorReport","Crash Report")),_(B("common.copied","Copied crash diagnostics to clipboard")))},v=()=>{switch(P){case"native":return<Le size={12}color={e.cyan600}/>;case"render":return<D size={12}color={e.purple400}/>;case"promise":return<Ae size={12}color={e.amber400}/>;default:return<Me size={12}color={e.yellow400}/>}};return<U visible={H}transparent={!1}animationType="fade"statusBarTranslucent={!0}onRequestClose={L}>
+import $,{useMemo as G}from"react";import{Modal as U,StyleSheet as J,Text as T,View as C,ScrollView as Y,SafeAreaView as K,Platform as X}from"react-native";import E from"react-native-linear-gradient";import F from"../TouchableScale";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{exportCrashReport as Q}from"../../customHooks/crashHandler";import{copyToClipboard as Z}from"../../helpers";import{showToast as _}from"../../helpers/toast";import{useTranslation as ee}from"../../i18n";import{WarningTriangleIcon as Te,CopyIcon as Ce,RefreshCcwIcon as Se,CloseWhite as Be,CircleAlertIcon as Ve,TerminalIcon as Re,CodeBracketsIcon as Ie,RepeatIcon as Fe,ShieldAlertIcon as W,FlameIcon as He,ChipIcon as Le,LayoutIcon as D,HourglassIcon as Ae,JsIcon as Me}from"../NetworkIcons";export const GlobalCrashScreenModal=$.memo(({visible:H,crash:h,onDismiss:L,onOpenInspector:O,onRetry:A})=>{const{t:B}=ee(),M=G(()=>h?Q(h,"markdown"):"",[h]);if(!H||!h)return null;const z=h.isFatal,P=h.type||"js",R=h.parsedStack&&h.parsedStack.length>0?h.parsedStack.find(V=>V.isAppCode)||h.parsedStack[0]:null,N=()=>{M&&(Z(M,B("errors.errorReport","Crash Report")),_(B("common.copied","Copied crash diagnostics to clipboard")))},v=()=>{switch(P){case"native":return<Le size={12}color={e.cyan600}/>;case"render":return<D size={12}color={e.purple400}/>;case"promise":return<Ae size={12}color={e.amber400}/>;default:return<Me size={12}color={e.yellow400}/>}};return<U visible={H}transparent={!1}animationType="fade"statusBarTranslucent={!0}onRequestClose={L}>
         <K style={t.safeArea}>
           <C style={t.container}>
             
@@ -120,7 +120,7 @@ import j,{useMemo as G}from"react";import{Modal as U,StyleSheet as J,Text as T,V
                         </T>
                       </C>
                       {V.isAppCode&&<C style={t.appTag}>
-                          <T style={t.appTagText}>APP</T>
+                          <T style={t.appTagText}>{B("modals.appTag","APP")}</T>
                         </C>}
                     </C>)}
                 </C>}
@@ -150,7 +150,7 @@ import j,{useMemo as G}from"react";import{Modal as U,StyleSheet as J,Text as T,V
                     </T>
                   </C>
 
-                  {h.breadcrumbs.slice(0,6).map((V,I)=>{const $=new Date(V.timestamp).toLocaleTimeString();return<C key={I}style={t.breadcrumbItem}>
+                  {h.breadcrumbs.slice(0,6).map((V,I)=>{const j=new Date(V.timestamp).toLocaleTimeString();return<C key={I}style={t.breadcrumbItem}>
                         <C style={t.breadcrumbTag}>
                           <T style={t.breadcrumbTagText}>
                             {V.type.toUpperCase()}
@@ -159,7 +159,7 @@ import j,{useMemo as G}from"react";import{Modal as U,StyleSheet as J,Text as T,V
                         <T style={t.breadcrumbMsg}numberOfLines={2}>
                           {V.message}
                         </T>
-                        <T style={t.breadcrumbTime}>{$}</T>
+                        <T style={t.breadcrumbTime}>{j}</T>
                       </C>})}
                 </C>}
 
@@ -170,32 +170,32 @@ import j,{useMemo as G}from"react";import{Modal as U,StyleSheet as J,Text as T,V
                   </T>
                   <C style={t.telemetryGrid}>
                     <C style={t.telemetryPill}>
-                      <T style={t.telemetryLabel}>OS</T>
+                      <T style={t.telemetryLabel}>{B("modals.os","OS")}</T>
                       <T style={t.telemetryValue}>
                         {h.deviceInfo.platform?.toUpperCase()}{" "}
                         {h.deviceInfo.osVersion}
                       </T>
                     </C>
                     <C style={t.telemetryPill}>
-                      <T style={t.telemetryLabel}>RN Version</T>
+                      <T style={t.telemetryLabel}>{B("modals.rnVersion","RN Version")}</T>
                       <T style={t.telemetryValue}>
                         {h.deviceInfo.rnVersion||"N/A"}
                       </T>
                     </C>
                     <C style={t.telemetryPill}>
-                      <T style={t.telemetryLabel}>Engine</T>
+                      <T style={t.telemetryLabel}>{B("modals.engine","Engine")}</T>
                       <T style={t.telemetryValue}>
                         {h.deviceInfo.isHermes?"Hermes":"JSC"}
                       </T>
                     </C>
                     <C style={t.telemetryPill}>
-                      <T style={t.telemetryLabel}>Architecture</T>
+                      <T style={t.telemetryLabel}>{B("modals.architecture","Architecture")}</T>
                       <T style={t.telemetryValue}>
                         {h.deviceInfo.isFabric?"Fabric (New)":"Paper"}
                       </T>
                     </C>
                     {h.memoryInfo&&<C style={t.telemetryPill}>
-                        <T style={t.telemetryLabel}>JS Heap</T>
+                        <T style={t.telemetryLabel}>{B("modals.jsHeap","JS Heap")}</T>
                         <T style={t.telemetryValue}>
                           {h.memoryInfo.usedJSHeapSize} / {h.memoryInfo.totalJSHeapSize} MB
                         </T>