react-native-inapp-inspector 2.5.10 → 2.5.12

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

@@ -1,54 +1,54 @@
-import{useCallback as Z,useEffect as G,useRef as b,useState as j}from"react";import{Animated as n,Dimensions as De,PanResponder as Fe,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 Be}from"./InspectorContext";import $ from"../TouchableScale";import{GripVerticalIcon as Le,ScreenshotCaptureIcon as Ae,ScreenRecordIcon as Oe}from"../NetworkIcons";import{ScreenCapture as C,generateCaptureId as q}from"../../capture";import{triggerNativeHaptic as D}from"../../native/NativeInspector";import{showToast as v}from"../../helpers/toast";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as be}from"../../styles/AppFonts";import{useTranslation as Ee}from"../../i18n";import{MediaPreviewModal as Ge}from"./MediaPreviewModal";export const FloatingCaptureWidget=()=>{const{refreshMediaCount:x,captureFps:X,captureScale:Y,captureBitrate:B,captureMaxDurationSeconds:H,captureAudioMode:U,activeTab:ve,settingsPage:xe,peekMode:je,previewMediaItem:z,setPreviewMediaItem:T,isUpdatePopupVisible:Ie}=Be(),{t:s}=Ee(),[M,V]=j(!1),[Re,L]=j(!1),[Ce,A]=j(0),I=b(null),k=b(new n.Value(1)).current,F=b(new n.Value(0)).current,a=b(new n.ValueXY({x:0,y:0})).current,R=b({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=b(!1),Te=b(Fe.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}=De.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 ke=Math.min(Math.max(O,J),o),Pe=Math.min(Math.max(E,Q),K);n.spring(a,{toValue:{x:ke,y:Pe},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 Me=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(()=>{}),v(s("header.screenshotCaptured","Screenshot captured"))}else v(s("header.screenshotFailed","Failed to capture screenshot"))}catch{L(!1),v(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(()=>{}),v(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})?v(s("header.recordingStarted","Recording started")):(V(!1),v(s("header.recordingStartFailed","Failed to start recording")))}catch{v(s("header.recordingError","Error during screen recording")),V(!1)}},[M,X,Y,B,H,U,x,s]),Ve=e=>{const t=Math.floor(e/60),o=e%60;return`${t<10?"0":""}${t}:${o<10?"0":""}${o}`};return ve==="media"||xe==="media"||Ie?null:<>
+import{useCallback as te,useEffect as W,useRef as v,useState as j}from"react";import{Animated as n,Dimensions as Be,PanResponder as ze,Platform as N,StyleSheet as re,Text as $,View as S}from"react-native";import Se from"react-native-linear-gradient";import{useInspector as Le}from"./InspectorContext";import X from"../TouchableScale";import{GripVerticalIcon as Ae,ScreenshotCaptureIcon as Ee,ScreenRecordIcon as Oe}from"../NetworkIcons";import{ScreenCapture as T,generateCaptureId as Y}from"../../capture";import{triggerNativeHaptic as F}from"../../native/NativeInspector";import{showToast as x}from"../../helpers/toast";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as ve}from"../../styles/AppFonts";import{useTranslation as Ge}from"../../i18n";import{MediaPreviewModal as We}from"./MediaPreviewModal";export const FloatingCaptureWidget=()=>{const{refreshMediaCount:I,captureFps:H,captureScale:U,captureBitrate:z,captureMaxDurationSeconds:_,captureAudioMode:J,captureWidgetEnabled:xe,activeTab:Ie,settingsPage:Re,peekMode:je,previewMediaItem:L,setPreviewMediaItem:M,isUpdatePopupVisible:Ce}=Le(),{t:s}=Ge(),[V,k]=j(!1),[Te,A]=j(!1),[Me,E]=j(0),R=v(null),P=v(new n.Value(1)).current,B=v(new n.Value(0)).current,a=v(new n.ValueXY({x:0,y:0})).current,C=v({x:0,y:0});W(()=>{const e=a.x.addListener(o=>C.current.x=o.value),t=a.y.addListener(o=>C.current.y=o.value);return()=>{a.x.removeListener(e),a.y.removeListener(t)}},[a]);const D=v(!1),Ve=v(ze.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:()=>{D.current=!0,a.setOffset({x:C.current.x,y:C.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(()=>{D.current=!1},100);const{width:e,height:t}=Be.get("window"),o=e/2-20,Q=-o,Z=20,ee=-(t-140),O=C.current.x,G=C.current.y;if(O<Q||O>o||G<ee||G>Z){const De=Math.min(Math.max(O,Q),o),Fe=Math.min(Math.max(G,ee),Z);n.spring(a,{toValue:{x:De,y:Fe},friction:7,tension:50,useNativeDriver:!1}).start()}},onPanResponderTerminate:()=>{a.flattenOffset(),D.current=!1}})).current;W(()=>{T.isRecording().then(e=>{k(e)}).catch(()=>{})},[]),W(()=>{let e=null;return V?(E(0),R.current=setInterval(()=>{E(t=>t+1)},1e3),e=n.loop(n.sequence([n.timing(P,{toValue:1.15,duration:500,useNativeDriver:!0}),n.timing(P,{toValue:1,duration:500,useNativeDriver:!0})])),e.start()):(R.current&&(clearInterval(R.current),R.current=null),E(0),P.setValue(1)),()=>{R.current&&clearInterval(R.current),e&&e.stop()}},[V,P]);const ke=te(async()=>{if(!D.current)try{F("light"),A(!0),await new Promise(t=>setTimeout(t,60));const e=await T.takeScreenshot({format:"png",quality:.9,hideInspector:!1});if(A(!1),n.sequence([n.timing(B,{toValue:.65,duration:70,useNativeDriver:!0}),n.timing(B,{toValue:0,duration:200,useNativeDriver:!0})]).start(),e){F("success");const t=Y("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};M(o),I?.().catch(()=>{}),x(s("header.screenshotCaptured","Screenshot captured"))}else x(s("header.screenshotFailed","Failed to capture screenshot"))}catch{A(!1),x(s("header.screenshotError","Error capturing screenshot"))}},[I,B,s]),K=te(async()=>{if(!D.current)try{if(V){F("medium");const e=await T.stopRecording();if(k(!1),e){F("success");const t=Y("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};M(o),I?.().catch(()=>{}),x(s("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else F("medium"),k(!0),await T.startRecording({fps:H,scale:U,audioSource:J,bitrate:z>0?z:void 0,maxDurationSeconds:_})?x(s("header.recordingStarted","Recording started")):(k(!1),x(s("header.recordingStartFailed","Failed to start recording")))}catch{x(s("header.recordingError","Error during screen recording")),k(!1)}},[V,H,U,z,_,J,I,s]),Pe=e=>{const t=Math.floor(e/60),o=e%60;return`${t<10?"0":""}${t}:${o<10?"0":""}${o}`};return!xe||Ie==="media"||Re==="media"||Ce?null:<>
       
-      <n.View pointerEvents="none"style={[r.flashOverlay,{opacity:F}]}/>
+      <n.View pointerEvents="none"style={[r.flashOverlay,{opacity:B}]}/>
 
-      {!Re&&!z&&<n.View{...Te.panHandlers}style={[r.container,{transform:a.getTranslateTransform()}]}>
+      {!Te&&!L&&<n.View{...Ve.panHandlers}style={[r.container,{transform:a.getTranslateTransform()}]}>
           
-          {M?<S style={r.recordingShadowWrapper}>
-              <$ onPress={_}style={r.recordingPillWrapper}>
+          {V?<S style={r.recordingShadowWrapper}>
+              <X onPress={K}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 {Ve(Ce)}
-                  </W>
+                  <n.View style={[r.recordingDot,{transform:[{scale:P}]}]}/>
+                  <$ style={r.recordingText}>
+                    REC {Pe(Me)}
+                  </$>
                   <S style={r.stopIconBadge}>
                     <S style={r.stopIconSquare}/>
                   </S>
                 </Se>
-              </$>
+              </X>
             </S>:<S style={r.dockShadowWrapper}>
               <Se colors={[i.navy900,i.navy800,i.navy900]}start={{x:0,y:0}}end={{x:1,y:0}}style={r.dockBar}>
                 
-                <$ onPress={Me}style={r.menuItemBtn}accessible={!0}accessibilityLabel="Take Screenshot">
+                <X onPress={ke}style={r.menuItemBtn}accessible={!0}accessibilityLabel="Take Screenshot">
                   <S style={[r.menuItemIconCircle,{backgroundColor:`${i.sky400}38`}]}>
-                    <Ae size={14}color={i.sky400}/>
+                    <Ee size={14}color={i.sky400}/>
                   </S>
-                  <W style={r.menuItemText}>
+                  <$ style={r.menuItemText}>
                     {s("header.screenshot","Screenshot")}
-                  </W>
-                </$>
+                  </$>
+                </X>
 
                 
                 <S style={r.dockDivider}/>
 
                 
-                <$ onPress={_}style={r.menuItemBtn}accessible={!0}accessibilityLabel={s("header.recordScreen","Record Screen")}>
+                <X onPress={K}style={r.menuItemBtn}accessible={!0}accessibilityLabel={s("header.recordScreen","Record Screen")}>
                   <S style={[r.menuItemIconCircle,{backgroundColor:`${i.rose500}3D`}]}>
                     <Oe size={14}color={i.rose400}/>
                   </S>
-                  <W style={r.menuItemText}>
+                  <$ style={r.menuItemText}>
                     {s("header.record","Record")}
-                  </W>
-                </$>
+                  </$>
+                </X>
 
                 
                 <S style={r.dragGripArea}>
-                  <Le size={14}color="rgba(255, 255, 255, 0.55)"/>
+                  <Ae size={14}color="rgba(255, 255, 255, 0.55)"/>
                 </S>
               </Se>
             </S>}
         </n.View>}
 
       
-      <Ge 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:be.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:be.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;
+      <We item={L}visible={!!L}onClose={()=>M(null)}onDelete={async e=>{await T.deleteMedia(e.uri),I?.().catch(()=>{}),M(null)}}onConvertToGif={async e=>{const t=await T.convertToGif(e.uri,{fps:12,width:480});if(t){I?.().catch(()=>{});const o=Y("anim","gif");M({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=re.create({flashOverlay:{...re.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;