react-native-inapp-inspector 2.4.2 → 2.5.0

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

@@ -0,0 +1,43 @@
+import{useEffect as H,useMemo as Y,useRef as v,useState as V}from"react";import{StyleSheet as $,Text as I,TouchableOpacity as Z,View as M}from"react-native";import _ from"react-native-linear-gradient";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as K}from"../../styles/AppFonts";import{ActivityIcon as Me,BatteryChargingIcon as Be,BatteryFullIcon as Se,BoltIcon as Fe,SpeedIcon as Ae}from"../NetworkIcons";import{getNativeDeviceMetrics as ve}from"../../native/NativeInspector";import{subscribeNetworkLogs as xe}from"../../customHooks/networkLogger";import{useInspector as Ie}from"./InspectorContext";import{useTranslation as Re}from"../../i18n";export const SecondaryTelemetryStrip=()=>{const{t:L}=Re(),{switchActiveTab:j,peekMode:Ce}=Ie(),[R,U]=V(60),[n,Q]=V(null),[S,F]=V(0),C=v(0),N=v(Date.now());H(()=>{let r;const i=()=>{C.current++;const s=Date.now(),a=s-N.current;if(a>=1e3){const D=Math.min(60,Math.round(C.current*1e3/a));U(D),C.current=0,N.current=s}r=requestAnimationFrame(i)};return r=requestAnimationFrame(i),()=>cancelAnimationFrame(r)},[]);const w=v(0),G=v(Date.now());H(()=>{const r=xe(s=>{if(!s||s.length===0){F(0);return}const a=Date.now(),D=s.slice(0,10);let k=0,z=0,A=0;for(const o of D){let W=0,E=0;o.request&&(W=typeof o.request=="string"?o.request.length:JSON.stringify(o.request).length),o.response&&(E=typeof o.response=="string"?o.response.length:JSON.stringify(o.response).length);const q=W+E;if(q>0&&o.duration&&o.duration>0){const J=q*8/(o.duration/1e3)/1e3;J>0&&A===0&&(A=J),k+=q,z+=o.duration}}let B=0;z>0&&k>0?B=k*8/(z/1e3)/1e3:A>0&&(B=A),B>0?(w.current=B,G.current=a,F(Math.round(B*10)/10)):w.current>0&&a-G.current<12e3&&F(Math.round(w.current*10)/10)}),i=setInterval(()=>{Date.now()-G.current>15e3&&w.current>0&&(w.current=0,F(0))},3e3);return()=>{r(),clearInterval(i)}},[]),H(()=>{let r=!0;const i=async()=>{try{const a=await ve();r&&a&&Q(a)}catch{}};i();const s=setInterval(i,4e3);return()=>{r=!1,clearInterval(s)}},[]);const O=R>=55?e.emerald400:R>=30?e.amber400:e.rose400,P=Y(()=>{if(n?.usedRAM&&n?.totalRAM){const r=(n.usedRAM/1073741824).toFixed(2),i=(n.totalRAM/(1024*1024*1024)).toFixed(1);return`${r} / ${i} GB RAM`}return n?.residentMemory?`${(n.residentMemory/1073741824).toFixed(2)} GB RAM`:n?.usedRAM?`${(n.usedRAM/1073741824).toFixed(2)} GB RAM`:null},[n]),T=n?.batteryPercent,X=n?.isCharging;return<_ colors={[e.telemetrySubHeaderGradStart||"#0B0F1C",e.telemetrySubHeaderGradMid||"#111524",e.telemetrySubHeaderGradEnd||"#0B0F1C"]}start={{x:0,y:0}}end={{x:1,y:0}}style={t.container}>
+      <Z activeOpacity={.8}onPress={()=>j?.("device")}style={t.inner}>
+        
+        <M style={t.item}>
+          <Me size={11.5}color={O}/>
+          <I style={[t.label,{color:O,fontFamily:K.interBold}]}>
+            {R} {L("telemetry.fps","FPS")}
+          </I>
+        </M>
+
+        <M style={t.divider}/>
+
+        
+        <M style={t.item}>
+          <Ae size={11.5}color={e.sky300||"#7DD3FC"}/>
+          <I style={[t.label,{color:e.sky300||"#7DD3FC"}]}>
+            {S>=1e3?`${(S/1e3).toFixed(2)} Mbps`:S>0?`${S.toFixed(1)} kbps`:"0.0 kbps"}
+          </I>
+        </M>
+
+        
+        {P&&<>
+            <M style={t.divider}/>
+            <M style={t.item}>
+              <Fe size={11}color={e.purple400||"#A78BFA"}/>
+              <I style={[t.label,{color:e.purple400||"#A78BFA"}]}>
+                {P}
+              </I>
+            </M>
+          </>}
+
+        
+        {T!==void 0&&T>=0&&<>
+            <M style={t.divider}/>
+            <M style={t.item}>
+              {X?<Be size={11.5}color={e.emerald400}/>:<Se size={11.5}color={e.slate400}/>}
+              <I style={t.label}>
+                {Math.round(T)}%
+              </I>
+            </M>
+          </>}
+      </Z>
+    </_>};const t=$.create({container:{width:"100%",borderBottomWidth:$.hairlineWidth,borderBottomColor:e.telemetrySubHeaderBorder||"rgba(255, 255, 255, 0.07)",borderTopWidth:$.hairlineWidth,borderTopColor:"rgba(0, 0, 0, 0.25)",zIndex:9},inner:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:3.5,minHeight:23},item:{flexDirection:"row",alignItems:"center",gap:4},divider:{width:1,height:10,backgroundColor:"rgba(255, 255, 255, 0.08)"},label:{fontFamily:K.interMedium,fontSize:9,lineHeight:11.5,color:"rgba(255, 255, 255, 0.85)",letterSpacing:.1}});