react-native-inapp-inspector 2.3.24 → 2.4.0

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

@@ -1,38 +1,38 @@
-import{useCallback as O,useEffect as F,useRef as B,useState as W}from"react";import{Animated as s,PanResponder as de,Platform as q,StyleSheet as pe,Text as M,TouchableOpacity as Se,useWindowDimensions as xe,View as S}from"react-native";import H from"react-native-linear-gradient";import{useInspector as Re}from"./InspectorContext";import A from"../TouchableScale";import Ce from"../AppHeaderLogo";import Te from"../BrandCircleIcon";import{AndroidIcon as Ie,AppleIcon as Ve,CameraIcon as Pe,CloseWhite as Be,MaximizeIcon as Me,NpmIcon as Ae,VideoCameraIcon as $e}from"../NetworkIcons";import{ScreenCapture as V}from"../../capture";import{triggerNativeHaptic as x}from"../../native/NativeInspector";import{showToast as v}from"../../helpers/toast";import{getAppName as Ee,getAppVersionAndBuild as Le}from"../../helpers";import{LIB_VERSION as De}from"../../constants";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as _}from"../../styles/AppFonts";import $ from"../../styles";import{useTranslation as Oe}from"../../i18n";import{MediaPreviewModal as We}from"./MediaPreviewModal";const ke=()=>{const{setVisible:z,isMinimized:X,setIsMinimized:E,appIcon:Y,fabPan:J,fabPanResponder:K,fabDraggedRef:Q,pulseAnim:U,fabShineAnim:G,unreadPulseAnim:Z,logs:ee,analyticsEvents:te,refreshMediaCount:C}=Re(),{width:re}=xe(),{t:o}=Oe(),[ie]=W(()=>Le().formatted),[a,L]=W(!1),[oe,k]=W(0),T=B(null),[N,P]=W(null),n=B(new s.ValueXY({x:0,y:0})).current,D=B({x:0,y:0});F(()=>{const e=n.x.addListener(I=>D.current.x=I.value),r=n.y.addListener(I=>D.current.y=I.value);return()=>{n.x.removeListener(e),n.y.removeListener(r)}},[n]);const R=B(!1),ne=B(de.create({onStartShouldSetPanResponder:()=>!1,onMoveShouldSetPanResponder:(e,r)=>Math.abs(r.dx)>4||Math.abs(r.dy)>4,onPanResponderGrant:()=>{R.current=!0,n.setOffset({x:D.current.x,y:D.current.y}),n.setValue({x:0,y:0})},onPanResponderMove:s.event([null,{dx:n.x,dy:n.y}],{useNativeDriver:!1}),onPanResponderRelease:()=>{n.flattenOffset(),setTimeout(()=>{R.current=!1},50)},onPanResponderTerminate:()=>{n.flattenOffset(),R.current=!1}})).current;F(()=>{V.isRecording().then(e=>{L(!!e)}).catch(()=>{})},[]),F(()=>(a?(k(0),T.current=setInterval(()=>{k(e=>e+1)},1e3)):(T.current&&(clearInterval(T.current),T.current=null),k(0)),()=>{T.current&&clearInterval(T.current)}),[a]);const ae=O(async()=>{if(!R.current)try{x("light");const e=await V.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(e){x("success");const r={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};P(r),C?.().catch(()=>{}),v(o("header.screenshotCaptured","Screenshot captured"))}else v(o("header.screenshotFailed","Failed to capture screenshot"))}catch{v(o("header.screenshotError","Error capturing screenshot"))}},[C,o]),se=O(async()=>{if(!R.current)try{if(a){x("medium");const e=await V.stopRecording();if(L(!1),e){x("success");const r={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};P(r),C?.().catch(()=>{}),v(o("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else x("medium"),await V.startRecording({fps:24,audioSource:"none"})?(L(!0),v(o("header.recordingStarted","Recording started"))):v(o("header.recordingStartFailed","Failed to start recording"))}catch{v(o("header.recordingError","Error during screen recording")),L(!1)}},[a,C,o]),j=O(()=>{R.current||(x("light"),E?.(!1),z(!0))},[E,z]),le=O(()=>{R.current||(x("light"),E?.(!1),z(!1))},[E,z]),ce=e=>{const r=Math.floor(e/60),I=e%60;return`${r}:${I<10?"0":""}${I}`};return<>
+import{useCallback as W,useEffect as H,useRef as M,useState as k}from"react";import{Animated as v,PanResponder as le,Platform as X,StyleSheet as ce,Text as A,TouchableOpacity as Se,useWindowDimensions as xe,View as S}from"react-native";import _ from"react-native-linear-gradient";import{useInspector as Re}from"./InspectorContext";import $ from"../TouchableScale";import Ce from"../AppHeaderLogo";import Te from"../BrandCircleIcon";import{AndroidIcon as Ie,AppleIcon as Ve,CameraIcon as Pe,CloseWhite as Be,MaximizeIcon as Me,NpmIcon as Ae,VideoCameraIcon as $e}from"../NetworkIcons";import{ScreenCapture as z}from"../../capture";import{triggerNativeHaptic as x}from"../../native/NativeInspector";import{showToast as C}from"../../helpers/toast";import{getAppName as Ee,getAppVersionAndBuild as Le}from"../../helpers";import{LIB_VERSION as Oe}from"../../constants";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as G}from"../../styles/AppFonts";import D from"../../styles";import{useTranslation as We}from"../../i18n";import{MediaPreviewModal as De}from"./MediaPreviewModal";const Fe=()=>{const{setVisible:P,isMinimized:Y,setIsMinimized:E,appIcon:J,fabPan:K,fabPanResponder:Q,fabDraggedRef:U,pulseAnim:Z,fabShineAnim:N,refreshMediaCount:T}=Re(),{width:ee}=xe(),{t:o}=We(),[te]=k(()=>Le().formatted),[a,L]=k(!1),[re,F]=k(0),I=M(null),[j,B]=k(null),n=M(new v.ValueXY({x:0,y:0})).current,O=M({x:0,y:0});H(()=>{const e=n.x.addListener(V=>O.current.x=V.value),r=n.y.addListener(V=>O.current.y=V.value);return()=>{n.x.removeListener(e),n.y.removeListener(r)}},[n]);const R=M(!1),ie=M(le.create({onStartShouldSetPanResponder:()=>!1,onMoveShouldSetPanResponder:(e,r)=>Math.abs(r.dx)>4||Math.abs(r.dy)>4,onPanResponderGrant:()=>{R.current=!0,n.setOffset({x:O.current.x,y:O.current.y}),n.setValue({x:0,y:0})},onPanResponderMove:v.event([null,{dx:n.x,dy:n.y}],{useNativeDriver:!1}),onPanResponderRelease:()=>{n.flattenOffset(),setTimeout(()=>{R.current=!1},50)},onPanResponderTerminate:()=>{n.flattenOffset(),R.current=!1}})).current;H(()=>{z.isRecording().then(e=>{L(!!e)}).catch(()=>{})},[]),H(()=>(a?(F(0),I.current=setInterval(()=>{F(e=>e+1)},1e3)):(I.current&&(clearInterval(I.current),I.current=null),F(0)),()=>{I.current&&clearInterval(I.current)}),[a]);const oe=W(async()=>{if(!R.current)try{x("light");const e=await z.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(e){x("success");const r={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};B(r),T?.().catch(()=>{}),C(o("header.screenshotCaptured","Screenshot captured"))}else C(o("header.screenshotFailed","Failed to capture screenshot"))}catch{C(o("header.screenshotError","Error capturing screenshot"))}},[T,o]),ne=W(async()=>{if(!R.current)try{if(a){x("medium");const e=await z.stopRecording();if(L(!1),e){x("success");const r={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};B(r),T?.().catch(()=>{}),C(o("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else x("medium"),await z.startRecording({fps:24,audioSource:"none"})?(L(!0),C(o("header.recordingStarted","Recording started"))):C(o("header.recordingStartFailed","Failed to start recording"))}catch{C(o("header.recordingError","Error during screen recording")),L(!1)}},[a,T,o]),q=W(()=>{R.current||(x("light"),E?.(!1),P(!0))},[E,P]),ae=W(()=>{R.current||(x("light"),E?.(!1),P(!1))},[E,P]),se=e=>{const r=Math.floor(e/60),V=e%60;return`${r}:${V<10?"0":""}${V}`};return<>
       
-      {X?<s.View style={[t.playerContainer,{transform:n.getTranslateTransform()}]}{...ne.panHandlers}>
+      {Y?<v.View style={[t.playerContainer,{transform:n.getTranslateTransform()}]}{...ie.panHandlers}>
           
-          <H colors={[i.indigo600,i.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={t.gradientBg}pointerEvents="none"/>
+          <_ colors={[i.indigo600,i.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={t.gradientBg}pointerEvents="none"/>
 
           
           <S pointerEvents="none"style={t.playerShineClip}>
-            <s.View style={[t.playerShineStreak,{transform:[{translateX:G.interpolate({inputRange:[0,1],outputRange:[-80,re+80]})},{rotate:"28deg"}]}]}>
-              <H colors={["rgba(255, 255, 255, 0)","rgba(255, 255, 255, 0.18)","rgba(255, 255, 255, 0.70)","rgba(255, 255, 255, 1)","rgba(255, 255, 255, 0.70)","rgba(255, 255, 255, 0.18)","rgba(255, 255, 255, 0)"]}locations={[0,.22,.44,.5,.56,.78,1]}start={{x:0,y:.5}}end={{x:1,y:.5}}style={{flex:1}}/>
-            </s.View>
+            <v.View style={[t.playerShineStreak,{transform:[{translateX:N.interpolate({inputRange:[0,1],outputRange:[-80,ee+80]})},{rotate:"28deg"}]}]}>
+              <_ colors={["rgba(255, 255, 255, 0)","rgba(255, 255, 255, 0.18)","rgba(255, 255, 255, 0.70)","rgba(255, 255, 255, 1)","rgba(255, 255, 255, 0.70)","rgba(255, 255, 255, 0.18)","rgba(255, 255, 255, 0)"]}locations={[0,.22,.44,.5,.56,.78,1]}start={{x:0,y:.5}}end={{x:1,y:.5}}style={{flex:1}}/>
+            </v.View>
           </S>
 
           
-          <Se activeOpacity={.75}onPress={j}style={t.brandSection}accessibilityRole="button"accessibilityLabel={o("mediaGallery.expand","Expand Inspector")}>
-            <Ce size={36}customIcon={Y}/>
+          <Se activeOpacity={.75}onPress={q}style={t.brandSection}accessibilityRole="button"accessibilityLabel={o("mediaGallery.expand","Expand Inspector")}>
+            <Ce size={36}customIcon={J}/>
             <S style={t.titleWrapper}>
-              <M style={t.appTitle}numberOfLines={1}>
+              <A style={t.appTitle}numberOfLines={1}>
                 {Ee()}
-              </M>
+              </A>
               <S style={t.versionRow}>
                 
                 <S style={t.versionChip}>
-                  {q.OS==="ios"?<Ve color={`${i.white}E6`}size={9}/>:<Ie color={`${i.white}E6`}size={9}/>}
-                  <M style={t.versionChipText}numberOfLines={1}>
-                    {ie}
-                  </M>
+                  {X.OS==="ios"?<Ve color={`${i.white}E6`}size={9}/>:<Ie color={`${i.white}E6`}size={9}/>}
+                  <A style={t.versionChipText}numberOfLines={1}>
+                    {te}
+                  </A>
                 </S>
 
                 
                 <S style={t.versionChip}>
                   <Ae size={9}color={i.npmRedLight}/>
-                  <M style={t.versionChipText}numberOfLines={1}>
-                    v{De}
-                  </M>
+                  <A style={t.versionChipText}numberOfLines={1}>
+                    v{Oe}
+                  </A>
                 </S>
               </S>
             </S>
@@ -41,45 +41,44 @@ import{useCallback as O,useEffect as F,useRef as B,useState as W}from"react";imp
           
           <S style={t.actionsRow}>
             
-            <A onPress={ae}hitSlop={{top:6,bottom:6,left:4,right:4}}style={t.actionBtn}>
+            <$ onPress={oe}hitSlop={{top:6,bottom:6,left:4,right:4}}style={t.actionBtn}>
               <Pe size={12}color={i.white}/>
-              <M style={t.actionText}>
+              <A style={t.actionText}>
                 {o("header.photo","Photo")}
-              </M>
-            </A>
+              </A>
+            </$>
 
             
-            <A onPress={se}hitSlop={{top:6,bottom:6,left:4,right:4}}style={[t.actionBtn,a&&t.recordingBtnActive]}>
+            <$ onPress={ne}hitSlop={{top:6,bottom:6,left:4,right:4}}style={[t.actionBtn,a&&t.recordingBtnActive]}>
               {a?<S style={t.recordingDot}/>:<$e size={12}color={i.white}/>}
-              <M style={[t.actionText,a&&{color:i.red300}]}>
-                {a?`${o("header.rec","REC")} ${ce(oe)}`:o("header.record","Record")}
-              </M>
-            </A>
+              <A style={[t.actionText,a&&{color:i.red300}]}>
+                {a?`${o("header.rec","REC")} ${se(re)}`:o("header.record","Record")}
+              </A>
+            </$>
 
             
-            <A onPress={j}hitSlop={{top:6,bottom:6,left:4,right:4}}accessibilityRole="button"accessibilityLabel={o("common.expand","Expand")}style={t.actionBtnSquare}>
+            <$ onPress={q}hitSlop={{top:6,bottom:6,left:4,right:4}}accessibilityRole="button"accessibilityLabel={o("common.expand","Expand")}style={t.actionBtnSquare}>
               <Me size={12}color={i.white}/>
-            </A>
+            </$>
 
             
-            <A onPress={le}hitSlop={{top:6,bottom:6,left:4,right:6}}accessibilityRole="button"accessibilityLabel={o("common.close","Close")}style={t.actionBtnSquare}>
+            <$ onPress={ae}hitSlop={{top:6,bottom:6,left:4,right:6}}accessibilityRole="button"accessibilityLabel={o("common.close","Close")}style={t.actionBtnSquare}>
               <Be size={10}color={i.white}/>
-            </A>
+            </$>
           </S>
-        </s.View>:<s.View style={[$.fabWrapper,{transform:J.getTranslateTransform()}]}{...K.panHandlers}>
-          <A style={{alignItems:"center",justifyContent:"center"}}onPress={()=>{Q.current||(x("light"),z(!0))}}hitSlop={10}>
-            <s.View style={[$.fabPulseRing,{transform:[{scale:U}]}]}/>
+        </v.View>:<v.View style={[D.fabWrapper,{transform:K.getTranslateTransform()}]}{...Q.panHandlers}>
+          <$ style={{alignItems:"center",justifyContent:"center"}}onPress={()=>{U.current||(x("light"),P(!0))}}hitSlop={10}>
+            <v.View style={[D.fabPulseRing,{transform:[{scale:Z}]}]}/>
             <Te size={62}/>
             
-            <S pointerEvents="none"style={$.fabShineClip}>
-              <s.View style={[$.fabShineStreak,{transform:[{translateX:G.interpolate({inputRange:[0,1],outputRange:[-48,96]})},{rotate:"25deg"}]}]}>
-                <H colors={["rgba(255, 255, 255, 0)","rgba(255, 255, 255, 0.25)","rgba(255, 255, 255, 0.95)","rgba(255, 255, 255, 0.25)","rgba(255, 255, 255, 0)"]}locations={[0,.25,.5,.75,1]}start={{x:0,y:.5}}end={{x:1,y:.5}}style={{flex:1}}/>
-              </s.View>
+            <S pointerEvents="none"style={D.fabShineClip}>
+              <v.View style={[D.fabShineStreak,{transform:[{translateX:N.interpolate({inputRange:[0,1],outputRange:[-48,96]})},{rotate:"25deg"}]}]}>
+                <_ colors={["rgba(255, 255, 255, 0)","rgba(255, 255, 255, 0.25)","rgba(255, 255, 255, 0.95)","rgba(255, 255, 255, 0.25)","rgba(255, 255, 255, 0)"]}locations={[0,.25,.5,.75,1]}start={{x:0,y:.5}}end={{x:1,y:.5}}style={{flex:1}}/>
+              </v.View>
             </S>
-            {(ee.length>0||te.length>0)&&<s.View style={[$.fabGreenDot,{transform:[{scale:Z}]}]}/>}
-          </A>
-        </s.View>}
+          </$>
+        </v.View>}
 
       
-      <We item={N}visible={!!N}onClose={()=>P(null)}onDelete={async e=>{await V.deleteMedia(e.uri),C?.().catch(()=>{}),P(null)}}onConvertToGif={async e=>{const r=await V.convertToGif(e.uri,{fps:12,width:480});r&&(C?.().catch(()=>{}),P({id:`anim_${r.timestamp}.gif`,type:"gif",format:"gif",uri:r.uri,filename:r.uri.split("/").pop()||`anim_${r.timestamp}.gif`,sizeBytes:r.sizeBytes,timestamp:r.timestamp,durationMs:r.durationMs}))}}/>
-    </>},t=pe.create({playerContainer:{position:"absolute",bottom:q.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:i.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},titleWrapper:{flex:1,minWidth:0,justifyContent:"center",gap:2},appTitle:{fontFamily:_.interBold,fontSize:13.5,color:i.white,letterSpacing:-.2},versionRow:{flexDirection:"row",alignItems:"center",gap:4,minWidth:0},versionChip:{flexDirection:"row",alignItems:"center",backgroundColor:`${i.white}1F`,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${i.white}2E`,flexShrink:1,minWidth:0},versionChipText:{fontFamily:_.interMedium,fontSize:8.5,color:`${i.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:i.red500},recordingDot:{width:6,height:6,borderRadius:3,backgroundColor:i.red500},actionText:{fontFamily:_.interSemiBold,fontSize:10.5,color:i.white}});export default ke;
+      <De item={j}visible={!!j}onClose={()=>B(null)}onDelete={async e=>{await z.deleteMedia(e.uri),T?.().catch(()=>{}),B(null)}}onConvertToGif={async e=>{const r=await z.convertToGif(e.uri,{fps:12,width:480});r&&(T?.().catch(()=>{}),B({id:`anim_${r.timestamp}.gif`,type:"gif",format:"gif",uri:r.uri,filename:r.uri.split("/").pop()||`anim_${r.timestamp}.gif`,sizeBytes:r.sizeBytes,timestamp:r.timestamp,durationMs:r.durationMs}))}}/>
+    </>},t=ce.create({playerContainer:{position:"absolute",bottom:X.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:i.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},titleWrapper:{flex:1,minWidth:0,justifyContent:"center",gap:2},appTitle:{fontFamily:G.interBold,fontSize:13.5,color:i.white,letterSpacing:-.2},versionRow:{flexDirection:"row",alignItems:"center",gap:4,minWidth:0},versionChip:{flexDirection:"row",alignItems:"center",backgroundColor:`${i.white}1F`,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${i.white}2E`,flexShrink:1,minWidth:0},versionChipText:{fontFamily:G.interMedium,fontSize:8.5,color:`${i.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:i.red500},recordingDot:{width:6,height:6,borderRadius:3,backgroundColor:i.red500},actionText:{fontFamily:G.interSemiBold,fontSize:10.5,color:i.white}});export default Fe;