discord-decomp/components_native/calls/RTCDebugOverlay.tsx

// Metro module 10829 (f10830).
import { memo, useEffect } from "react";
import { ScrollView, View, StyleSheet } from "react-native";
import ChannelStore from "../../stores/ChannelStore";
import GuildStore from "../../stores/GuildStore";
import RTCConnectionStore from "../../stores/RTCConnectionStore";
import RTCDebugStore from "../../stores/RTCDebugStore";
import StreamRTCConnectionStore from "../../stores/StreamRTCConnectionStore";
import UserStore from "../../stores/UserStore";
import { MediaEngineContextTypes } from "../../_bundle/Module4250";
import { createStyles } from "../../design/components/Styles/native/createStyles";
import { hexWithOpacity } from "../../utils/ColorUtils";
import Module712 from "../../_bundle/Module712";
import { LegacyText } from "../../design/void/native";
import { useStateFromStoresObject, useStateFromStores } from "../../_bundle/Module589";
import useChannelName from "../../modules/channel/useChannelName";
import RTCConnectionUtils from "../../utils/RTCConnectionUtils";
import { open, close } from "../../actions/RTCDebugActionCreators";
import Dispatcher from "../../Dispatcher";
import { SafeAreaPaddingView } from "../common/SafeAreaView";
import { Button } from "../../design/components/Button/native/Button.native";
import { intl, t } from "../../intl/index.native";
let asString, useStyles, Section, ObjectKV, Component2, Component3, RTCDebugGeneral, c7276_25, RTCDebugContext;
const Text = function Text(props) {
  return <LegacyText {...props} style={useStyles().text} />;
};
Section = function Section(props) {
  const { title, children } = props;
  return <>
    <Text>
      {title}
      :
    </Text>
    <View style={useStyles().indent}>{children}</View>
  </>;
};
ObjectKV = function ObjectKV({ obj }) {
  const styles = useStyles();
  return Object.entries(obj).map((item) => {
    const [key, r30] = item;
    const obj = Array.isArray(r30) ? typeof r30.at(-1)?.value === "number" ? r30.at(-1).value : r30 : r30;
    return obj != null && typeof obj === "object" ? <Section key={key} title={key}>
      <ObjectKV obj={obj} />
    </Section> : <View key={key} style={styles.row}>
      <Text>
        {key}
        {": "}
        {"" + obj}
      </Text>
    </View>;
  });
};
RTCDebugGeneral = function RTCDebugGeneral() {
  let guildId, channelId;
  const stateFromStoresObject = useStateFromStoresObject([RTCConnectionStore], () => ({
    guildId: RTCConnectionStore.getGuildId(),
    channelId: RTCConnectionStore.getChannelId()
  }), []);
  guildId = stateFromStoresObject.guildId;
  channelId = stateFromStoresObject.channelId;
  const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId), [guildId]);
  return <Section title="general">
    <ObjectKV obj={{
      guild: {
        id: guildId,
        name: stateFromStores != null ? stateFromStores.name : null
      },
      channel: {
        id: channelId,
        name: useChannelName(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId), [channelId]))
      }
    }} />
  </Section>;
};
RTCDebugContext = function RTCDebugContext({ context }) {
  const stateFromStores = useStateFromStores([RTCDebugStore], () => RTCDebugStore.getAllStats(context), [context]);
  return stateFromStores == null ? null : stateFromStores.length !== 0 ? stateFromStores.map((stateFromStore) => {
    const Component = c7276_25[context];
    const r22 = Component != null ? <Component /> : null;
    let inbound;
    const r27 = [r22, <Section title="transport">
      <ObjectKV obj={stateFromStore.transport} />
    </Section>, <Section title="outbound">
      {stateFromStore.rtp.outbound.map((item, index) => <Component2 key={index} data={item} />)}
    </Section>, ,];
    inbound = stateFromStore.rtp.inbound;
    const r44 = Object.keys(inbound);
    r27[3] = r44.length !== 0 ? <Section title="inbound">
      {r44.map((item) => <Component3 key={item} userId={item} data={inbound[item]} />)}
    </Section> : null;
    return <Section key={stateFromStore.mediaEngineConnectionId} title={`${context} - ${stateFromStore.mediaEngineConnectionId}`}>{r27}</Section>;
  }) : null;
};
asString = (a0) => {};
useStyles = createStyles({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: hexWithOpacity(Module712.unsafe_rawColors.BLACK, 0.7)
  },
  scroller: {
    flex: 1,
    margin: 8
  },
  indent: {
    marginLeft: 16
  },
  row: {
    flexDirection: "row"
  },
  text: {
    color: Module712.unsafe_rawColors.WHITE,
    fontSize: 14
  },
  buttonClose: {
    flexGrow: 0,
    margin: 8
  }
});
Component2 = memo(({ data }) => {
  const { type, ...rest } = data;
  return <Section title={data.type}>
    <ObjectKV obj={rest} />
  </Section>;
});
Component3 = memo(({ userId, data }) => {
  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getUser(userId), [userId]);
  const r21 = `${userId}`;
  return <Section title={stateFromStores != null ? r21 + ` (${stateFromStores.toString()})` : r21}>
    {data.map((item, index) => <Component2 key={index} data={item} />)}
  </Section>;
});
const r80 = {};
r80[MediaEngineContextTypes.DEFAULT] = function DefaultContextInfo() {
  return <ObjectKV obj={useStateFromStoresObject([RTCConnectionStore], () => ({
    mediaSessionId: RTCConnectionStore.getMediaSessionId(),
    state: RTCConnectionStore.getState(),
    hostname: RTCConnectionUtils.getShortHostname(RTCConnectionStore.getHostname()),
    quality: RTCConnectionStore.getQuality(),
    averagePing: RTCConnectionStore.getAveragePing(),
    lastPing: RTCConnectionStore.getLastPing(),
    outboundLossRate: RTCConnectionStore.getOutboundLossRate(),
    duration: RTCConnectionStore.getDuration()
  }), [])} />;
};
r80[MediaEngineContextTypes.STREAM] = function StreamContextInfo() {
  const r7 = StreamRTCConnectionStore.getAllActiveStreamKeys()[0];
  let c18293_0 = r7;
  return <ObjectKV obj={useStateFromStoresObject([StreamRTCConnectionStore], () => ({
    mediaSessionId: StreamRTCConnectionStore.getMediaSessionId(c18293_0),
    hostname: RTCConnectionUtils.getShortHostname(StreamRTCConnectionStore.getHostname(c18293_0)),
    quality: StreamRTCConnectionStore.getQuality(c18293_0)
  }), [r7])} />;
};
c7276_25 = r80;
export default function RTCDebugOverlay(props) {
  const { onClose, style } = props;
  const styles2 = useStyles();
  useEffect(() => {
    open();
    return () => Dispatcher.wait(close);
  }, []);
  return <SafeAreaPaddingView top left right bottom style={[styles2.container, style]}>
    <ScrollView style={styles2.scroller} indicatorStyle="white">
      <RTCDebugGeneral />
      {Object.values(MediaEngineContextTypes).map((item) => <RTCDebugContext key={item} context={item} />)}
    </ScrollView>
    <View style={styles2.buttonClose}>
      <Button text={intl.string(t.cpT0Cq)} onPress={onClose} />
    </View>
  </SafeAreaPaddingView>;
};