yeet

modules/voice_panel/native/header/VoicePanelAudioOutputActionSheet.tsx

@@ -0,0 +1,143 @@
+// Metro module 8858 (f8859).
+import * as Module19 from "react";
+import { useCallback, useMemo, useEffect } from "react";
+import { ScrollView } from "react-native";
+import GameConsoleStore from "../../../game_console/GameConsoleStore";
+import AudioManagerStore_android from "../../../voice_calls/native/AudioManagerStore.android";
+import ChannelStore from "../../../../stores/ChannelStore";
+import SessionsStore from "../../../../stores/SessionsStore";
+import { VOICE_PANEL_AUDIO_OUTPUT_ACTION_SHEET_KEY } from "./VoicePanelHeaderConstants";
+import { PlatformTypes } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import { useStateFromStoresObject, useStateFromStores } from "../../../../_bundle/defaultAreStatesEqual";
+import { setAudioOutputDevice } from "../../../voice_calls/native/AudioManagerActionCreator";
+import { VoicePanelFormSection } from "../shared/FormComponents";
+import { intl, t } from "../../../../intl/index.native";
+import { TableRadioGroup } from "../../../../design/components/TableRow/native/TableRadioGroup.native";
+import { TableRadioRow } from "../../../../design/components/TableRow/native/TableRadioRow.native";
+import { TableRowIcon } from "../../../../design/components/TableRow/native/TableRowIcon.native";
+import { audioDeviceToIconMap, getAudioDeviceToDisplayText } from "../../../voice_calls/native/CallsUtils";
+import useGameConsoleAccounts from "../../../game_console/useGameConsoleAccounts";
+import useVoiceStateForRemoteSession from "../../../game_console/hooks/useVoiceStateForRemoteSession";
+import { onConnectToConsole } from "../../../video_calls/native/useOnConnectToConsole";
+import { useIsDismissibleContentDismissed_UNSAFE, UNSAFE_markDismissibleContentAsDismissed } from "../../../dismissible_content/DismissibleContentUnsafeUtils";
+import { DismissibleContent } from "../../../../_bundle/Module1358";
+import getConsoleIcon from "../../../game_console/native/getConsoleIcon";
+import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import NativeView from "../../../core/native/NativeView";
+let useStyles, VoicePanelAudioConsoleSection;
+const VoicePanelAudioPhoneOutputSection = function VoicePanelAudioPhoneOutputSection() {
+  let availableDevices, callback;
+  const styles = useStyles();
+  const stateFromStoresObject = useStateFromStoresObject([AudioManagerStore_android], () => ({
+    activeDevice: AudioManagerStore_android.getActiveAudioDevice(),
+    availableDevices: AudioManagerStore_android.getAudioDevices()
+  }));
+  const activeDevice = stateFromStoresObject.activeDevice;
+  availableDevices = stateFromStoresObject.availableDevices;
+  callback = useCallback((a0) => {
+    setAudioOutputDevice(a0);
+    ActionSheetActionCreators.hideActionSheet(VOICE_PANEL_AUDIO_OUTPUT_ACTION_SHEET_KEY);
+  }, []);
+  return availableDevices.length > 0 ? <VoicePanelFormSection style={styles.sectionContainer} title={intl.string(t.CxyS15)} hasIcons>
+    <TableRadioGroup value={activeDevice.deviceId} onChange={(c26300_0) => {
+      const r7 = availableDevices.find((availableDevice) => availableDevice.deviceId === c26300_0);
+      if (r7 != null) {
+        callback(r7);
+      }
+    }} hasIcons>
+      {availableDevices.map((availableDevice) => <TableRadioRow key={availableDevice.deviceId} value={availableDevice.deviceId} icon={<TableRowIcon source={audioDeviceToIconMap[availableDevice.simpleDeviceType]} />} label={getAudioDeviceToDisplayText(availableDevice)} subLabel={availableDevice.deviceName?.length > 0 ? availableDevice.deviceName : void 0} />)}
+    </TableRadioGroup>
+  </VoicePanelFormSection> : null;
+};
+VoicePanelAudioConsoleSection = function VoicePanelAudioConsoleSection(props) {
+  let stateFromStores2, c16832_5;
+  const channel = props.channel;
+  stateFromStores2 = void 0;
+  c16832_5 = void 0;
+  const styles = useStyles();
+  const gameConsoleAccounts = useGameConsoleAccounts();
+  let c16832_1 = gameConsoleAccounts;
+  let c16832_2 = useVoiceStateForRemoteSession();
+  const stateFromStores = useStateFromStores([GameConsoleStore], () => GameConsoleStore.getAwaitingRemoteSessionInfo());
+  stateFromStores2 = useStateFromStores([SessionsStore], () => {
+    let r7 = c16832_2?.sessionId;
+    if (r7 == null) {
+      r7 = "";
+    }
+    return SessionsStore.getSessionById(r7);
+  });
+  const memo = useMemo(() => {
+    let r3 = stateFromStores?.type;
+    if (r3 == null) {
+      r3 = stateFromStores2 == null ? void 0 : stateFromStores2.clientInfo?.os;
+    }
+    if (r3 == null) {
+      r3 = "";
+    }
+    return r3;
+  }, [stateFromStores, stateFromStores2]);
+  const callback2 = useCallback((c26301_0) => {
+    const r5 = c16832_1.find((item) => item.type === c26301_0);
+    if (r5 != null) {
+      onConnectToConsole(channel, r5);
+      ActionSheetActionCreators.hideActionSheet(VOICE_PANEL_AUDIO_OUTPUT_ACTION_SHEET_KEY);
+    } else {
+      ActionSheetActionCreators.hideActionSheet(VOICE_PANEL_AUDIO_OUTPUT_ACTION_SHEET_KEY);
+    }
+  }, [gameConsoleAccounts, channel]);
+  const r2 = !useIsDismissibleContentDismissed_UNSAFE(DismissibleContent.DONUT_MOBILE_NUX);
+  c16832_5 = r2;
+  useEffect(() => {
+    if (c16832_5 && c16832_1.length > 0) {
+      UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.DONUT_MOBILE_NUX);
+    }
+  }, [gameConsoleAccounts, r2]);
+  return gameConsoleAccounts.length > 0 ? <VoicePanelFormSection title={intl.string(t.q22XnQ)} style={styles.sectionContainer} hasIcons>
+    <TableRadioGroup defaultValue={memo} onChange={callback2} hasIcons>
+      {gameConsoleAccounts.map((gameConsoleAccount) => {
+        const type = gameConsoleAccount.type;
+        const r6 = PlatformTypes.XBOX === type ? {
+          label: intl.string(t.Nfvo72),
+          variant: "xbox"
+        } : PlatformTypes.PLAYSTATION === type ? {
+          label: intl.string(t.fFl4jo),
+          variant: "playstation"
+        } : null;
+        return r6 != null && <TableRadioRow key={gameConsoleAccount.type} icon={<TableRowIcon source={getConsoleIcon(gameConsoleAccount.type)} variant={r6.variant} />} label={r6.label} value={gameConsoleAccount.type} />;
+      }).filter((item) => Boolean(item))}
+    </TableRadioGroup>
+  </VoicePanelFormSection> : null;
+};
+useStyles = createStyles({
+  sectionContainer: {
+    marginTop: 0,
+    marginBottom: 24
+  }
+});
+const r46 = Module19.memo(function VoicePanelAudioOutputActionSheet(props) {
+  const channelId = props.channelId;
+  let isConnectedToVoiceChannel = props.isConnectedToVoiceChannel;
+  const stateFromStores3 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  let r20 = null;
+  if (stateFromStores3 != null) {
+    const props2 = {
+      header: <BottomSheetTitleHeader title={intl.string(t.iwxPM3)} />,
+      children: null
+    };
+    if (isConnectedToVoiceChannel) {
+      isConnectedToVoiceChannel = <VoicePanelAudioPhoneOutputSection />;
+    }
+    props2.children = <ScrollView>
+      <NativeView>
+        {isConnectedToVoiceChannel}
+        <VoicePanelAudioConsoleSection channel={stateFromStores3} />
+      </NativeView>
+    </ScrollView>;
+    r20 = <BottomSheet {...props2} />;
+  }
+  return r20;
+});
+export default r46;

modules/voice_panel/native/header/VoicePanelConsoleFacepile.tsx

@@ -0,0 +1,55 @@
+// Metro module 15951 (f15952).
+import { useMemo, useCallback } from "react";
+import { PlatformTypes } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import getConsoleIcon from "../../../game_console/native/getConsoleIcon";
+import { intl, t } from "../../../../intl/index.native";
+import useGameConsoleAccounts from "../../../game_console/useGameConsoleAccounts";
+import { isNotNullish } from "../../../../utils/GlobalUtils";
+import NativeView from "../../../core/native/NativeView";
+import { SummarizedIconRow, Icon } from "../../../../design/void/native";
+let useStyles;
+const getConsoleInfo = function getConsoleInfo(a0) {
+  const type = a0.type;
+  if (PlatformTypes.XBOX === type) {
+    return {
+      icon: getConsoleIcon(a0.type),
+      color: Module712.unsafe_rawColors.PLATFORM_XBOX,
+      connectLabel: intl.string(t.QN7HXV),
+      connectSublabel: intl.string(t["M/Ld86"])
+    };
+  }
+  if (PlatformTypes.PLAYSTATION === type) {
+    return {
+      icon: getConsoleIcon(a0.type),
+      color: Module712.unsafe_rawColors.PLATFORM_PLAYSTATION,
+      connectLabel: intl.string(t["3qLlTS"]),
+      connectSublabel: intl.string(t["/uR9x1"])
+    };
+  }
+  return null;
+};
+useStyles = createStyles({
+  consoleIconContainer: {
+    borderRadius: Module712.radii.round,
+    padding: 8,
+    margin: -3,
+    borderWidth: 3,
+    borderColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  consoleIcon: {
+    tintColor: Module712.colors.WHITE
+  }
+});
+export default function VoicePanelConsoleFacepile() {
+  const styles = useStyles();
+  const gameConsoleAccounts = useGameConsoleAccounts();
+  let c22638_1 = gameConsoleAccounts;
+  return <SummarizedIconRow items={useMemo(() => c22638_1.map(getConsoleInfo).filter(isNotNullish), [gameConsoleAccounts])} renderItem={useCallback((a0) => <NativeView style={[styles.consoleIconContainer, {
+    backgroundColor: a0.color
+  }]}>
+    <Icon style={styles.consoleIcon} size={Icon.Sizes.MEDIUM} source={a0.icon} />
+  </NativeView>, [styles])} offsetAmount={-3} />;
+};
+export { getConsoleInfo };

modules/voice_panel/native/header/VoicePanelHeader.tsx

@@ -0,0 +1,550 @@
+// Metro module 15926 (f15927).
+import * as Module19 from "react";
+import { useContext, useLayoutEffect, useState, useCallback, useMemo } from "react";
+import { StyleSheet, Platform } from "react-native";
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import ExperimentStore from "../../../experiments/ExperimentStore";
+import StageMusicStore from "../../../stage_channels/StageMusicStore";
+import AuthenticationStore from "../../../../stores/AuthenticationStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import MediaEngineStore from "../../../../stores/MediaEngineStore";
+import RelationshipStore from "../../../../stores/RelationshipStore";
+import SpeakingStore from "../../../../stores/SpeakingStore";
+import UserStore from "../../../../stores/UserStore";
+import { DRAWER_SPRING_PHYSICS_GESTURE_ACTIVE, MODE_CHANGE_PHYSICS, UI_SHOW_HIDE_PHYSICS, VoicePanelModes } from "../../VoicePanelConstants";
+import { EDGE_GUTTER } from "../card/VoicePanelCardConstants";
+import { VoicePanelControlsModes } from "../controls/VoicePanelControlsConstants";
+import { ParticipantTypes } from "../../../calls/CallConstants";
+import { ThemeTypes } from "../../../../_bundle/Module505";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useDerivedValue, useAnimatedProps, useAnimatedStyle, useSharedValue, useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import VisualEffectViewAnimated from "../../../visual_effect_view/native/VisualEffectViewAnimated";
+import NativeView from "../../../core/native/NativeView";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import useMyCurrentStageChannelRole from "../../../stage_channels/useMyCurrentStageChannelRole";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { useShowStageMusicMuteButton } from "../../../stage_channels/StageMusicManager";
+import VoicePanelIconButton from "../shared/VoicePanelIconButton";
+import { intl, t } from "../../../../intl/index.native";
+import Module10708 from "../../../../_bundle/Module10708";
+import Module9075 from "../../../../_bundle/Module9075";
+import { updateStageMusicMuted } from "../../../stage_channels/StageMusicActionCreators";
+import { useIsScreenReaderEnabled } from "../../../a11y/native/useIsScreenReaderEnabled.native";
+import useIsConnectedToVoiceChannel from "../hooks/useIsConnectedToVoiceChannel";
+import MobileGoLiveEntrypointExperiment, { MobileGoLiveEntrypointTreatment } from "../../../go_live/MobileGoLiveEntrypointExperiment";
+import { computeChannelName } from "../../../channel/useChannelName";
+import { useToken } from "../../../../design/tokens/native/useToken";
+import calculateVoicePanelHeaderSpecs from "./calculateVoicePanelHeaderSpecs";
+import * as _timing from "../../../../design/animation/reanimated/timing/timing";
+import { useCanInviteMembers } from "../hooks/useCanInviteMembers";
+import { useInviteMembersCallback } from "../hooks/useInviteMembersCallback";
+import useVoicePanelNavArrowPressed from "../hooks/useVoicePanelNavArrowPressed";
+import { useNavigatorBackPressHandler } from "../../../../design/components/Navigator/native/useNavigatorBackPressHandler.native";
+import useStableParticipant, { isStableUserParticipant, stableParticipantHasVideo } from "../utils/useStableParticipant";
+import AudioActionCreators from "../../../../actions/AudioActionCreators";
+import { useIsSecureFramesUIEnabled } from "../../../rtc/hooks/useIsSecureFramesUIEnabled";
+import { useIsUserSecureFramesVerified, useIsStreamSecureFramesVerified } from "../../../rtc/hooks/useIsSecureFramesVerified";
+import { ThemeContextProvider } from "../../../../_bundle/Module3901";
+import ThemedHeaderBackgroundGradient from "../../../main_tabs_v2/native/panels/ThemedHeaderBackgroundGradient";
+import VoicePanelHeaderUserState from "./VoicePanelHeaderUserState";
+import Module8393 from "../../../../_bundle/Module8393";
+import VoicePanelTitleButton from "../shared/VoicePanelTitleButton";
+import { ShieldLockIcon } from "../../../../design/components/Icon/native/redesign/generated/ShieldLockIcon";
+import { ChannelTypes } from "../../../../_bundle/Module692";
+import VoicePanelHeaderSpeaker from "./VoicePanelHeaderSpeaker";
+import Module10223 from "../../../../_bundle/Module10223";
+import Module15954 from "../../../../_bundle/Module15954";
+import VoicePanelHeaderChatButton from "./VoicePanelHeaderChatButton";
+let OPACITY_TIMING, useStyles, c11409_27, HEADER_CHANGE_PHYSICS, __initData, __initData2, __initData3, Component, __initData4, __initData5, Component2, __initData6, __initData7, __initData8, __initData9, __initData10, __initData11, __initData12;
+const MusicMuteButton = function MusicMuteButton(props) {
+  const channelId2 = props.channelId;
+  const speaker = useMyCurrentStageChannelRole(channelId2)?.speaker;
+  const stateFromStores = useStateFromStores([StageMusicStore], () => StageMusicStore.isMuted());
+  return useShowStageMusicMuteButton(channelId2) ? speaker ? <VoicePanelIconButton accessibilityLabel={stateFromStores ? intl.string(t.ScHlfl) : intl.string(t.zqxfrf)} icon={stateFromStores ? Module10708 : Module9075} onPress={() => updateStageMusicMuted(!stateFromStores)} /> : null : null;
+};
+Platform;
+OPACITY_TIMING = {
+  duration: 300
+};
+useStyles = createStyles({
+  headerWrapper: {
+    zIndex: 1,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    paddingBottom: EDGE_GUTTER,
+    overflow: "hidden"
+  },
+  blurStyles: {
+    ...StyleSheet.absoluteFillObject,
+    opacity: 0.7
+  },
+  leftWrapper: {
+    position: "relative",
+    justifyContent: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 1,
+    gap: 12
+  },
+  rightWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingLeft: 12
+  },
+  headerOuter: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  headerInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 1,
+    flexGrow: 1
+  },
+  headerContentWrapper: {
+    position: "relative"
+  },
+  stroke: {
+    height: StyleSheet.hairlineWidth,
+    opacity: 0.2
+  },
+  strokeAlt: {
+    height: StyleSheet.hairlineWidth,
+    opacity: 0.8
+  },
+  strokeContainer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: StyleSheet.hairlineWidth
+  },
+  focusedSpeakingDotWrapper: {
+    width: 12,
+    height: 12,
+    borderRadius: Module712.radii.round,
+    padding: 2
+  },
+  focusedSpeakingDot: {
+    width: 8,
+    height: 8,
+    borderRadius: Module712.radii.round
+  },
+  shieldIconMargin: {
+    marginLeft: -8
+  }
+});
+c11409_27 = {
+  DOWN: 0,
+  0: "DOWN",
+  LEFT: 1,
+  1: "LEFT"
+};
+HEADER_CHANGE_PHYSICS = {
+  ...MODE_CHANGE_PHYSICS,
+  overshootClamping: true
+};
+__initData = {
+  code: "function VoicePanelHeaderTsx1(){const{isHeaderHidden,focused,scrollPosition}=this.__closure;return!isHeaderHidden.get()&&(focused.get()!=null||scrollPosition.get()>0);}"
+};
+__initData2 = {
+  code: "function VoicePanelHeaderTsx2(){const{withSpring,showHeaderBlur}=this.__closure;return{blurAmount:withSpring(showHeaderBlur.get()?0.3:0)};}"
+};
+__initData3 = {
+  code: "function VoicePanelHeaderTsx3(){const{withSpring,showHeaderBlur,HEADER_CHANGE_PHYSICS}=this.__closure;return{opacity:withSpring(showHeaderBlur.get()?1:0,HEADER_CHANGE_PHYSICS)};}"
+};
+Component = Module19.memo(function({ isHeaderHidden, scrollPosition, focused }) {
+  let derivedValue;
+  derivedValue = void 0;
+  const styles = useStyles();
+  const l = function l() {
+    const r7 = isHeaderHidden.get();
+    return r7 ? !r7 : focused.get() != null || scrollPosition.get() > 0;
+  };
+  l.__closure = {
+    isHeaderHidden,
+    focused,
+    scrollPosition
+  };
+  l.__workletHash = 8127245112238;
+  l.__initData = __initData;
+  derivedValue = useDerivedValue(l);
+  const c = () => ({
+    blurAmount: _spring.withSpring(derivedValue.get() ? 0.3 : 0)
+  });
+  c.__closure = {
+    withSpring: _spring.withSpring,
+    showHeaderBlur: derivedValue
+  };
+  c.__workletHash = 10074943135400;
+  c.__initData = __initData2;
+  const animatedProps = useAnimatedProps(c);
+  const r34 = () => ({
+    opacity: _spring.withSpring(derivedValue.get() ? 1 : 0, HEADER_CHANGE_PHYSICS)
+  });
+  r34.__closure = {
+    withSpring: _spring.withSpring,
+    showHeaderBlur: derivedValue,
+    HEADER_CHANGE_PHYSICS
+  };
+  r34.__workletHash = 2825977044105;
+  r34.__initData = __initData3;
+  return <ReanimatedNativeView style={[StyleSheet.absoluteFill, useAnimatedStyle(r34)]} pointerEvents="none">
+    <VisualEffectViewAnimated style={styles.blurStyles} blurStyle="ultra-thin" blurTheme="dark" animatedProps={animatedProps} />
+    <NativeView style={styles.strokeContainer}>
+      <NativeView style={styles.stroke} />
+      <NativeView style={styles.strokeAlt} />
+    </NativeView>
+  </ReanimatedNativeView>;
+});
+__initData4 = {
+  code: "function VoicePanelHeaderTsx4(){const{focused,controlsSpecs,VoicePanelControlsModes,speaking}=this.__closure;return focused.get()!=null&&controlsSpecs.get().mode!==VoicePanelControlsModes.HIDDEN&&speaking.get();}"
+};
+__initData5 = {
+  code: "function VoicePanelHeaderTsx5(){const{showSpeakingIndicator}=this.__closure;return{opacity:showSpeakingIndicator.get()?1:0};}"
+};
+Component2 = Module19.memo(function() {
+  let derivedValue2;
+  const id = AuthenticationStore.getId();
+  const context = useContext(VoicePanelStateContext);
+  const { focused: focused2, controlsSpecs } = context;
+  const sharedValue = useSharedValue(SpeakingStore.isSpeaking(id));
+  useLayoutEffect(() => {
+    const handleChange2 = function handleChange() {
+      sharedValue.set(SpeakingStore.isSpeaking(id));
+    };
+    sharedValue.set(SpeakingStore.isSpeaking(id));
+    SpeakingStore.addReactChangeListener(handleChange2);
+    return () => {
+      SpeakingStore.removeReactChangeListener(handleChange2);
+    };
+  }, [id, sharedValue]);
+  const styles = useStyles();
+  const r33 = () => focused2.get() != null && controlsSpecs.get().mode !== VoicePanelControlsModes.HIDDEN && sharedValue.get();
+  r33.__closure = {
+    focused: focused2,
+    controlsSpecs,
+    VoicePanelControlsModes,
+    speaking: sharedValue
+  };
+  r33.__workletHash = 5466722752449;
+  r33.__initData = __initData4;
+  derivedValue2 = useDerivedValue(r33);
+  const _ = () => ({
+    opacity: derivedValue2.get() ? 1 : 0
+  });
+  _.__closure = {
+    showSpeakingIndicator: derivedValue2
+  };
+  _.__workletHash = 16177124708898;
+  _.__initData = __initData5;
+  return <ReanimatedNativeView style={[styles.focusedSpeakingDotWrapper, useAnimatedStyle(_)]} pointerEvents="none">
+    <ReanimatedNativeView style={styles.focusedSpeakingDot} />
+  </ReanimatedNativeView>;
+});
+__initData6 = {
+  code: "function VoicePanelHeaderTsx6(){const{focused}=this.__closure;var _focused$get;return(_focused$get=focused.get())===null||_focused$get===void 0?void 0:_focused$get.id;}"
+};
+__initData7 = {
+  code: "function VoicePanelHeaderTsx7(manualId,previousManualId){const{runOnJS,handleFocusChange}=this.__closure;if(manualId!==previousManualId){runOnJS(handleFocusChange)(manualId);}}"
+};
+__initData8 = {
+  code: "function VoicePanelHeaderTsx8(){const{calculateVoicePanelHeaderSpecs,safeArea,edgeGutter,mode,VoicePanelModes,gestureState,connected,EDGE_GUTTER}=this.__closure;const specs=calculateVoicePanelHeaderSpecs(safeArea.get(),edgeGutter);if(mode.get()===VoicePanelModes.PIP||gestureState.get().active&&!gestureState.get().requiresPop&&connected.get()||mode.get()===VoicePanelModes.DISMISSED&&connected.get()){return-(specs.height+EDGE_GUTTER);}return 0;}"
+};
+__initData9 = {
+  code: "function VoicePanelHeaderTsx9(){const{calculateVoicePanelHeaderSpecs,safeArea,edgeGutter,mode,VoicePanelModes,connected,EDGE_GUTTER,withTiming,OPACITY_TIMING,withSpring,yOffset,wrapperOffset,DRAWER_SPRING_PHYSICS_GESTURE_ACTIVE,UI_SHOW_HIDE_PHYSICS}=this.__closure;const specs=calculateVoicePanelHeaderSpecs(safeArea.get(),edgeGutter);const pipMode=mode.get()===VoicePanelModes.PIP;const height=!connected.get()?specs.height-specs.paddingTop+EDGE_GUTTER:specs.height;const paddingTop=!connected.get()?EDGE_GUTTER:specs.paddingTop;return{...specs,paddingTop:paddingTop,borderTopLeftRadius:!connected.get()?24:0,borderTopRightRadius:!connected.get()?24:0,height:height,opacity:withTiming(pipMode||mode.get()===VoicePanelModes.DISMISSED?0:1,OPACITY_TIMING),transform:[{translateY:withSpring(yOffset.get(),!connected.get()&&wrapperOffset.get().gestureActive?DRAWER_SPRING_PHYSICS_GESTURE_ACTIVE:UI_SHOW_HIDE_PHYSICS)}]};}"
+};
+__initData10 = {
+  code: "function VoicePanelHeaderTsx10(){const{controlsSpecs,VoicePanelControlsModes,isScreenReaderEnabled}=this.__closure;return controlsSpecs.get().mode===VoicePanelControlsModes.HIDDEN&&!isScreenReaderEnabled;}"
+};
+__initData11 = {
+  code: "function VoicePanelHeaderTsx11(){const{calculateVoicePanelHeaderSpecs,safeArea,edgeGutter,withTiming,isHeaderHidden,OPACITY_TIMING,withSpring,MODE_CHANGE_PHYSICS}=this.__closure;const{height:height}=calculateVoicePanelHeaderSpecs(safeArea.get(),edgeGutter);return{opacity:withTiming(isHeaderHidden.get()?0:1,OPACITY_TIMING),transform:[{translateY:withSpring(isHeaderHidden.get()?-height:0,MODE_CHANGE_PHYSICS)}]};}"
+};
+__initData12 = {
+  code: "function VoicePanelHeaderTsx12(){const{isHeaderHidden}=this.__closure;return{pointerEvents:isHeaderHidden.get()?'none':'box-none',importantForAccessibility:isHeaderHidden.get()?'no-hide-descendants':'auto',accessibilityElementsHidden:isHeaderHidden.get()};}"
+};
+const r127 = Module19.memo(function VoicePanelHeader(props) {
+  let setState, setState2, callback, token, derivedValue3, derivedValue4, LEFT, c22614_16;
+  const { wrapperOffset, gestureState, layout } = props;
+  setState = void 0;
+  setState2 = void 0;
+  callback = void 0;
+  token = void 0;
+  derivedValue3 = void 0;
+  derivedValue4 = void 0;
+  LEFT = void 0;
+  c22614_16 = void 0;
+  const styles = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const { guildId, channelId, channelType, focused: focused3, controlsSpecs: controlsSpecs2, mode, safeArea, connected, scrollPosition: scrollPosition2 } = context;
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  const isConnectedToVoiceChannel = useIsConnectedToVoiceChannel(channelId);
+  const treatment = MobileGoLiveEntrypointExperiment.useConfig({
+    location: "VoicePanelHeader"
+  }).treatment;
+  const stateFromStores2 = useStateFromStores([UserStore, RelationshipStore, ChannelStore, ExperimentStore], () => {
+    const channel = ChannelStore.getChannel(channelId);
+    let r11 = channel != null ? computeChannelName(channel, UserStore, RelationshipStore) : void 0;
+    if (r11 == null) {
+      r11 = intl.string(t.zLZPmk);
+    }
+    return r11;
+  }, [channelId]);
+  let state;
+  [state, setState] = useState(void 0);
+  let state2;
+  [state2, setState2] = useState(null);
+  callback = useCallback((a0) => {
+    const r0 = a0 == null;
+    let r3 = null;
+    if (!r0) {
+      const participant = ChannelRTCStore.getParticipant(channelId, a0);
+      r3 = participant == null ? null : participant.type;
+    }
+    setState2(r3);
+    setState(a0);
+  }, [channelId]);
+  const I = () => focused3.get()?.id;
+  I.__closure = {
+    focused: focused3
+  };
+  I.__workletHash = 7943480174143;
+  I.__initData = __initData6;
+  const f = function f(a0, a1) {
+    if (a0 !== a1) {
+      _ReanimatedRexport.runOnJS(callback)(a0);
+    }
+  };
+  f.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    handleFocusChange: callback
+  };
+  f.__workletHash = 13084116412140;
+  f.__initData = __initData7;
+  useAnimatedReaction(I, f);
+  token = useToken(Module712.modules.mobile.VOICE_PANEL_GUTTER);
+  const he = function he() {
+    let r14, r31;
+    L7: {
+      L6: {
+        r14 = calculateVoicePanelHeaderSpecs(safeArea.get(), token);
+        if (mode.get() !== VoicePanelModes.PIP) {
+          if (gestureState.get().active && !gestureState.get().requiresPop && connected.get()) {
+            break L6;
+          }
+          const r29 = mode.get();
+          const DISMISSED = VoicePanelModes.DISMISSED;
+          r31 = 0;
+          if (r29 !== DISMISSED) {
+            break L7;
+          }
+          const r34 = connected.get();
+          r31 = 0;
+          if (!r34) {
+            break L7;
+          }
+        }
+      }
+      r31 = -(r14.height + EDGE_GUTTER);
+    }
+    return r31;
+  };
+  he.__closure = {
+    calculateVoicePanelHeaderSpecs,
+    safeArea,
+    edgeGutter: token,
+    mode,
+    VoicePanelModes,
+    gestureState,
+    connected,
+    EDGE_GUTTER
+  };
+  he.__workletHash = 13290333964417;
+  he.__initData = __initData8;
+  derivedValue3 = useDerivedValue(he);
+  const _e = function _e() {
+    const r12 = calculateVoicePanelHeaderSpecs(safeArea.get(), token);
+    const r15 = mode.get();
+    const PIP = VoicePanelModes.PIP;
+    const r25 = connected.get();
+    const height = r12.height;
+    const height2 = r25 ? height : height - r12.paddingTop + EDGE_GUTTER;
+    const paddingTop = connected.get() ? r12.paddingTop : EDGE_GUTTER;
+    const r36 = connected.get();
+    let borderTopRightRadius = 24;
+    const borderTopLeftRadius = r36 ? 0 : 24;
+    if (connected.get()) {
+      borderTopRightRadius = 0;
+    }
+    return {
+      ...r12,
+      paddingTop,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      height: height2,
+      opacity: _timing.withTiming(r15 !== PIP ? mode.get() === VoicePanelModes.DISMISSED ? 0 : 1 : 0, OPACITY_TIMING),
+      transform: [{
+        translateY: _spring.withSpring(derivedValue3.get(), !connected.get() && wrapperOffset.get().gestureActive ? DRAWER_SPRING_PHYSICS_GESTURE_ACTIVE : UI_SHOW_HIDE_PHYSICS)
+      }]
+    };
+  };
+  _e.__closure = {
+    calculateVoicePanelHeaderSpecs,
+    safeArea,
+    edgeGutter: token,
+    mode,
+    VoicePanelModes,
+    connected,
+    EDGE_GUTTER,
+    withTiming: _timing.withTiming,
+    OPACITY_TIMING,
+    withSpring: _spring.withSpring,
+    yOffset: derivedValue3,
+    wrapperOffset,
+    DRAWER_SPRING_PHYSICS_GESTURE_ACTIVE,
+    UI_SHOW_HIDE_PHYSICS
+  };
+  _e.__workletHash = 11065699618122;
+  _e.__initData = __initData9;
+  const animatedStyle = useAnimatedStyle(_e);
+  const pe = function pe() {
+    return controlsSpecs2.get().mode === VoicePanelControlsModes.HIDDEN && !isScreenReaderEnabled;
+  };
+  pe.__closure = {
+    controlsSpecs: controlsSpecs2,
+    VoicePanelControlsModes,
+    isScreenReaderEnabled
+  };
+  pe.__workletHash = 16725581527938;
+  pe.__initData = __initData10;
+  derivedValue4 = useDerivedValue(pe);
+  const Se = function Se() {
+    const height = calculateVoicePanelHeaderSpecs(safeArea.get(), token).height;
+    return {
+      opacity: _timing.withTiming(derivedValue4.get() ? 0 : 1, OPACITY_TIMING),
+      transform: [{
+        translateY: _spring.withSpring(derivedValue4.get() ? -height : 0, MODE_CHANGE_PHYSICS)
+      }]
+    };
+  };
+  Se.__closure = {
+    calculateVoicePanelHeaderSpecs,
+    safeArea,
+    edgeGutter: token,
+    withTiming: _timing.withTiming,
+    isHeaderHidden: derivedValue4,
+    OPACITY_TIMING,
+    withSpring: _spring.withSpring,
+    MODE_CHANGE_PHYSICS
+  };
+  Se.__workletHash = 13148362186846;
+  Se.__initData = __initData11;
+  const animatedStyle2 = useAnimatedStyle(Se);
+  const fe = () => ({
+    pointerEvents: derivedValue4.get() ? "none" : "box-none",
+    importantForAccessibility: derivedValue4.get() ? "no-hide-descendants" : "auto",
+    accessibilityElementsHidden: derivedValue4.get()
+  });
+  fe.__closure = {
+    isHeaderHidden: derivedValue4
+  };
+  fe.__workletHash = 4740985143159;
+  fe.__initData = __initData12;
+  const animatedProps = useAnimatedProps(fe);
+  let r164 = useCanInviteMembers(channelId);
+  const inviteMembersCallback = useInviteMembersCallback(channelId);
+  const voicePanelNavArrowPressed = useVoicePanelNavArrowPressed();
+  useNavigatorBackPressHandler(voicePanelNavArrowPressed);
+  LEFT = state2 != null ? c11409_27.LEFT : c11409_27.DOWN;
+  const accessibilityLabel = LEFT === c11409_27.LEFT ? intl.string(t["9M6OdC"]) : isConnectedToVoiceChannel ? intl.string(t.RLCTQG) : intl.string(t["5lPjGj"]);
+  const stableParticipant = useStableParticipant(AuthenticationStore.getId(), channelId, guildId);
+  c22614_16 = stableParticipant;
+  const stateFromStores3 = useStateFromStores([MediaEngineStore], () => {
+    let r49;
+    if (c22614_16 != null && isStableUserParticipant(c22614_16) && stableParticipantHasVideo(c22614_16)) {
+      const videoDevices = MediaEngineStore.getVideoDevices();
+      const r10 = Object.keys(videoDevices);
+      if (!(r10.length < 2)) {
+        const videoDeviceId = MediaEngineStore.getVideoDeviceId();
+        const facing = videoDevices[videoDeviceId]?.facing;
+        const r32 = r10.find((item) => item !== videoDeviceId);
+        const r34 = r32 != null ? videoDevices[r32]?.facing : void 0;
+        L22: {
+          if (facing != null && r34 != null) {
+            if (facing === "back" && r34 === "front") {
+              r49 = intl.string(t["/R1SBx"]);
+              break L22;
+            }
+            if (facing === "front" && r34 === "back") {
+              r49 = intl.string(t["7YZ/Si"]);
+              break L22;
+            }
+            r49 = intl.string(t["t9eQ/g"]);
+          } else {
+            r49 = intl.string(t["t9eQ/g"]);
+          }
+        }
+        return r49;
+      }
+    }
+  }, [stableParticipant]);
+  const callback2 = useCallback(() => {
+    const videoDeviceId2 = MediaEngineStore.getVideoDeviceId();
+    const r14 = Object.keys(MediaEngineStore.getVideoDevices()).find((item) => item !== videoDeviceId2);
+    if (r14 != null) {
+      AudioActionCreators.setVideoDevice(r14);
+    }
+  }, []);
+  const memo = useMemo(() => ({
+    transform: [{
+      rotateZ: LEFT === c11409_27.LEFT ? "90deg" : "0deg"
+    }]
+  }), [LEFT]);
+  const isSecureFramesUIEnabled = useIsSecureFramesUIEnabled({
+    channelId
+  });
+  const isUserSecureFramesVerified = useIsUserSecureFramesVerified({
+    userId: state2 === ParticipantTypes.USER ? state ?? null : null,
+    channelId
+  });
+  let r38 = useIsStreamSecureFramesVerified({
+    streamKey: state2 === ParticipantTypes.STREAM ? state ?? null : null,
+    channelId
+  });
+  if (ParticipantTypes.STREAM !== state2) {
+    r38 = ParticipantTypes.USER === state2 ? isUserSecureFramesVerified : false;
+  }
+  const theme = isConnectedToVoiceChannel ? ThemeTypes.MIDNIGHT : void 0;
+  const r257 = [<Component isHeaderHidden={derivedValue4} scrollPosition={scrollPosition2} focused={focused3} />, isConnectedToVoiceChannel && <ThemedHeaderBackgroundGradient baseColor={Module712.colors.BLACK} minHeight={0} />, ,];
+  const r275 = [state2 === ParticipantTypes.USER ? <VoicePanelHeaderUserState isHeaderHidden={derivedValue4} /> : null, ,];
+  const r312 = [<NativeView style={styles.leftWrapper} pointerEvents="box-none">
+    <VoicePanelIconButton icon={Module8393} accessibilityLabel={accessibilityLabel} onPress={voicePanelNavArrowPressed} style={memo} />
+    <ReanimatedNativeView style={styles.headerInner}>
+      <VoicePanelTitleButton />
+      {isSecureFramesUIEnabled ? r38 ? <ShieldLockIcon size="xs" color={Module712.colors.TEXT_SUBTLE} style={styles.shieldIconMargin} /> : null : null}
+    </ReanimatedNativeView>
+  </NativeView>, ,];
+  const r320 = [<Component2 />, channelType === ChannelTypes.GUILD_STAGE_VOICE && <MusicMuteButton channelId={channelId} />, <VoicePanelHeaderSpeaker isConnectedToVoiceChannel={isConnectedToVoiceChannel} channelId={channelId} />, , , ,];
+  if (r164) {
+    r164 = <VoicePanelIconButton icon={Module10223} accessibilityLabel={intl.formatToPlainString(t["dHHb/2"], {
+      channelName: stateFromStores2
+    })} onPress={inviteMembersCallback} />;
+  }
+  r320[3] = r164;
+  r320[4] = stateFromStores3 != null ? <VoicePanelIconButton icon={Module15954} onPress={callback2} accessibilityLabel={stateFromStores3} /> : null;
+  r320[5] = treatment === MobileGoLiveEntrypointTreatment.SCREENSHARE_REPLACES_CHAT && <VoicePanelHeaderChatButton channelId={channelId} />;
+  r312[1] = <ReanimatedNativeView style={styles.rightWrapper} layout={layout}>{r320}</ReanimatedNativeView>;
+  r275[1] = <ReanimatedNativeView style={[styles.headerOuter, animatedStyle2]} animatedProps={animatedProps}>{r312}</ReanimatedNativeView>;
+  r257[2] = <ReanimatedNativeView style={styles.headerContentWrapper} pointerEvents="box-none" layout={layout}>{r275}</ReanimatedNativeView>;
+  return <ThemeContextProvider theme={theme}>
+    <ReanimatedNativeView style={[styles.headerWrapper, animatedStyle]} pointerEvents="box-none" layout={layout}>{r257}</ReanimatedNativeView>
+  </ThemeContextProvider>;
+});
+export default r127;

modules/voice_panel/native/header/VoicePanelHeaderChatButton.tsx

@@ -0,0 +1,40 @@
+// Metro module 15955 (f15956).
+import { useCallback } from "react";
+import { ComponentActions } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { ComponentDispatch } from "../../../../utils/ComponentDispatchUtils";
+import useChatBadge from "../hooks/useChatBadge";
+import NativeView from "../../../core/native/NativeView";
+import VoicePanelIconButton from "../shared/VoicePanelIconButton";
+import { ChatIcon } from "../../../../design/components/Icon/native/redesign/generated/ChatIcon";
+import { intl, t } from "../../../../intl/index.native";
+const useStyles = createStyles({
+  badgeContainer: {
+    position: "absolute",
+    top: -2,
+    right: -2
+  },
+  badge: {
+    width: 8,
+    height: 8,
+    borderRadius: Module712.radii.round
+  },
+  notificationBadge: {
+    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_NOTIFICATION
+  }
+});
+export default function VoicePanelHeaderChatButton(props) {
+  const channelId = props.channelId;
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_OPEN_CHAT_TAB);
+  }, []);
+  const chatBadge = useChatBadge(channelId);
+  return <NativeView>
+    <VoicePanelIconButton icon={<ChatIcon color={Module712.colors.WHITE} size="sm" />} accessibilityLabel={intl.string(t["5KxXrK"])} onPress={callback} />
+    {chatBadge != null && <NativeView style={styles.badgeContainer}>
+      <NativeView style={[styles.badge, styles.notificationBadge]} />
+    </NativeView>}
+  </NativeView>;
+};

modules/voice_panel/native/header/VoicePanelHeaderConstants.tsx

@@ -0,0 +1,3 @@
+// Metro module 8857 (f8858).
+export const VOICE_PANEL_SETTINGS_KEY = "voice-panel-settings-action-sheet";
+export const VOICE_PANEL_AUDIO_OUTPUT_ACTION_SHEET_KEY = "VoicePanelAudioOutputActionSheet";

modules/voice_panel/native/header/VoicePanelHeaderSpeaker.tsx

@@ -0,0 +1,201 @@
+// Metro module 15944 (f15945).
+import * as Module19 from "react";
+import { useMemo, useCallback, useRef } from "react";
+import { NativeModules } from "react-native";
+import { setVoiceUpsellDismissed } from "../../../game_console/ConsoleVoiceUpsellStore";
+import GameConsoleStore from "../../../game_console/GameConsoleStore";
+import StageChannelAudioStore from "../../../stage_channels/native/StageChannelAudioStore";
+import AudioRouteStore_native from "../../../voice_calls/AudioRouteStore.native";
+import ChannelStore from "../../../../stores/ChannelStore";
+import SessionsStore from "../../../../stores/SessionsStore";
+import { PlatformTypes } from "../../../../Constants";
+import useSpeakerTooltips from "../hooks/useSpeakerTooltips";
+import useControlsLock from "../controls/useControlsLock";
+import { useMaskedSpeakerStates } from "../../../voice_calls/native/CallsUtils";
+import useIsVideoMode from "../../../video_calls/native/useIsVideoMode";
+import useVoiceStateForRemoteSession from "../../../game_console/hooks/useVoiceStateForRemoteSession";
+import { useStateFromStores } from "../../../../_bundle/defaultAreStatesEqual";
+import getConsoleIcon from "../../../game_console/native/getConsoleIcon";
+import useGameConsoleAccounts from "../../../game_console/useGameConsoleAccounts";
+import useCanConnect from "../hooks/useCanConnect";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import { showAudioOutputSelector } from "../../../voice_calls/native/audio_output_selector/showAudioOutputSelector";
+import { RouteTypes } from "../../../voice_calls/VoiceCallTypes";
+import { intl, t } from "../../../../intl/index.native";
+import Module8853 from "../../../../_bundle/Module8853";
+import Module8855 from "../../../../_bundle/Module8855";
+import Module15953 from "../../../../_bundle/Module15953";
+import { onConnectToConsole } from "../../../video_calls/native/useOnConnectToConsole";
+import { UNSAFE_markDismissibleContentAsDismissed } from "../../../dismissible_content/DismissibleContentUnsafeUtils";
+import { DismissibleContent } from "../../../../_bundle/Module1358";
+import NativeView from "../../../core/native/NativeView";
+import VoicePanelIconButton from "../shared/VoicePanelIconButton";
+import { MenuPopout } from "../../../../design/components/Menu/native/MenuPopout";
+const _excluded = ["ref"];
+let c11423_17 = [];
+let Component = Module19.memo(function(a0) {
+  useSpeakerTooltips(a0.targetRef, a0.canShowTooltip);
+  return null;
+});
+const r48 = Module19.memo(function VoicePanelHeaderSpeaker(props) {
+  let stateFromStores2, stateFromStores3, memo, c22631_13, c22631_14, callback, stateFromStores4, ref;
+  const { isConnectedToVoiceChannel, channelId, style } = props;
+  stateFromStores2 = void 0;
+  stateFromStores3 = void 0;
+  memo = void 0;
+  c22631_13 = void 0;
+  c22631_14 = void 0;
+  callback = void 0;
+  stateFromStores4 = void 0;
+  ref = void 0;
+  const controlsLock = useControlsLock();
+  let c22631_3 = controlsLock;
+  const maskedSpeakerStates = useMaskedSpeakerStates();
+  const { toggleAudio, routeSource, isAudioRouteEnabled } = maskedSpeakerStates;
+  const isVideoMode = useIsVideoMode();
+  let c22631_7 = isVideoMode;
+  let c22631_8 = useVoiceStateForRemoteSession();
+  const stateFromStores = useStateFromStores([GameConsoleStore], () => GameConsoleStore.getAwaitingRemoteSessionInfo());
+  stateFromStores2 = useStateFromStores([StageChannelAudioStore], () => StageChannelAudioStore.getQueueAudioSwap());
+  stateFromStores3 = useStateFromStores([SessionsStore], () => {
+    let r7 = c22631_8?.sessionId;
+    if (r7 == null) {
+      r7 = "";
+    }
+    return SessionsStore.getSessionById(r7);
+  });
+  memo = useMemo(() => {
+    let r4 = stateFromStores?.type;
+    if (r4 == null) {
+      r4 = stateFromStores3 == null ? void 0 : stateFromStores3.clientInfo?.os;
+    }
+    return r4 != null ? getConsoleIcon(r4) : null;
+  }, [stateFromStores, stateFromStores3]);
+  const gameConsoleAccounts = useGameConsoleAccounts();
+  c22631_13 = gameConsoleAccounts;
+  const r3 = gameConsoleAccounts.length > 0;
+  const canConnect = useCanConnect(channelId);
+  let canConnect2 = canConnect.canConnect;
+  const isAtMaxCapacity = canConnect.isAtMaxCapacity;
+  if (canConnect2) {
+    canConnect2 = !isAtMaxCapacity;
+  }
+  if (canConnect2) {
+    canConnect2 = isConnectedToVoiceChannel ? isConnectedToVoiceChannel : r3;
+  }
+  c22631_14 = canConnect2;
+  callback = useCallback(() => {
+    if (isAndroid()) {
+      showAudioOutputSelector(channelId, isConnectedToVoiceChannel);
+    } else {
+      toggleAudio(channelId, isConnectedToVoiceChannel);
+    }
+  }, [channelId, isConnectedToVoiceChannel, toggleAudio]);
+  stateFromStores4 = useStateFromStores([AudioRouteStore_native], () => AudioRouteStore_native.getCurrentRouteType());
+  const memo2 = useMemo(() => {
+    if (!isAndroid()) {
+      if (c22631_13.length !== 0) {
+        const r30 = [];
+        let c28189_0 = r30;
+        let r3 = c22631_7;
+        if (!(r3 ? r3 : stateFromStores4 !== RouteTypes.SPEAKER)) {
+          r30.push({
+            label: intl.string(t.gvQIzx),
+            iconSource: Module8853,
+            showIconFirst: false,
+            action: () => {
+              const AudioRoutePicker = NativeModules.AudioRoutePicker;
+              return AudioRoutePicker == null ? void 0 : AudioRoutePicker.toggleSpeaker(false);
+            }
+          });
+        }
+        if (!r3) {
+          r3 = stateFromStores4 !== RouteTypes.RECEIVER;
+        }
+        if (!r3) {
+          r30.push({
+            label: intl.string(t.wwTN1g),
+            iconSource: Module8855,
+            showIconFirst: false,
+            action: () => {
+              const AudioRoutePicker = NativeModules.AudioRoutePicker;
+              return AudioRoutePicker == null ? void 0 : AudioRoutePicker.toggleSpeaker(true);
+            }
+          });
+        }
+        r30.push({
+          label: intl.string(t.dnI0AL),
+          iconSource: Module15953,
+          showIconFirst: false,
+          action: () => {
+            showAudioOutputSelector(channelId, isConnectedToVoiceChannel);
+          }
+        });
+        const _loop = function _loop(a0) {
+          if (a0.type === PlatformTypes.XBOX) {
+            c28189_0.push({
+              label: intl.string(t["qVE/VF"]),
+              iconSource: getConsoleIcon(a0.type),
+              showIconFirst: false,
+              action: () => {
+                const channel = ChannelStore.getChannel(channelId);
+                if (channel != null) {
+                  onConnectToConsole(channel, a0);
+                }
+              }
+            });
+          }
+          if (a0.type === PlatformTypes.PLAYSTATION) {
+            c28189_0.push({
+              label: intl.string(t.vzfxmY),
+              iconSource: getConsoleIcon(a0.type),
+              showIconFirst: false,
+              action: () => {
+                const channel = ChannelStore.getChannel(channelId);
+                if (channel != null) {
+                  onConnectToConsole(channel, a0);
+                }
+              }
+            });
+          }
+        };
+        for (const item of c22631_13) {
+          _loop(item);
+        }
+        return r30;
+      }
+    }
+    return c11423_17;
+  }, [gameConsoleAccounts, channelId, isConnectedToVoiceChannel, stateFromStores4, isVideoMode]);
+  const callback2 = useCallback(() => {
+    UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.DONUT_MOBILE_NUX);
+    setVoiceUpsellDismissed(true);
+    c22631_3.lock();
+  }, [controlsLock]);
+  ref = useRef(null);
+  if (canConnect2) {
+    const renderButton = function renderButton(a0) {
+      const r6 = a0 == null ? {
+        onPress: callback,
+        ref: void 0
+      } : a0;
+      const { ref: ref2, ...rest } = r6;
+      const r25 = [<Component targetRef={ref} canShowTooltip={c22631_14 && isConnectedToVoiceChannel} />, ,];
+      const overrideVariant = isConnectedToVoiceChannel ? isAudioRouteEnabled ? "primary-overlay" : void 0 : void 0;
+      let icon = memo;
+      if (memo == null) {
+        icon = routeSource;
+      }
+      r25[1] = <NativeView style={style} ref={ref}>
+        <VoicePanelIconButton ref={ref2} {...rest} disabled={stateFromStores2} overrideVariant={overrideVariant} loading={stateFromStores != null} icon={icon} accessibilityLabel={intl.string(t.dnI0AL)} />
+      </NativeView>;
+      return <>{r25}</>;
+    };
+    return !isAndroid() && r3 ? <>
+      <Component targetRef={ref} canShowTooltip={isConnectedToVoiceChannel} />
+      <MenuPopout menuItems={memo2} position="bottom" align="end" onRequestOpen={callback2} onRequestClose={controlsLock.unlock}>{renderButton}</MenuPopout>
+    </> : renderButton();
+  }
+  return null;
+});
+export default r48;

modules/voice_panel/native/header/VoicePanelHeaderUserState.tsx

@@ -0,0 +1,92 @@
+// Metro module 15931 (f15932).
+import { memo, useContext } from "react";
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import ReanimatedRexport, { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import { BackgroundBlurView } from "../../../../design/components/experimental/native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useVoicePanelCardUserStateIcons, { VoicePanelCardUserStateIconType } from "../hooks/useVoicePanelCardUserStateIcons";
+import useStableParticipant, { isStableParticipantWithUser } from "../utils/useStableParticipant";
+import { VideoIcon, MuteDeafenIcon } from "../shared/VoiceStateIcons";
+import NativeView from "../../../core/native/NativeView";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import * as _timing from "../../../../design/animation/reanimated/timing/timing";
+let AnimatedComponent, OPACITY_TIMING, useStyles, __initData;
+const useVoicePanelHeaderUserStateIcons = function useVoicePanelHeaderUserStateIcons(participant2, a1, userIcons) {
+  const styles = useStyles();
+  const voicePanelCardUserStateIcons = useVoicePanelCardUserStateIcons(participant2?.type, isStableParticipantWithUser(participant2) ? participant2.user.id : void 0, a1);
+  const r47 = [];
+  for (const item of voicePanelCardUserStateIcons) {
+    if (item.type === VoicePanelCardUserStateIconType.USER_VIDEO_ICON) {
+      r47.push(<BackgroundBlurView key="video" blurTheme="dark" style={styles.floatingIconWrapper}>
+        <VideoIcon style={styles.floatingIcon} state={item.videoIconState} />
+      </BackgroundBlurView>);
+    }
+    if (item.type === VoicePanelCardUserStateIconType.MUTE_DEAFEN_ICON) {
+      r47.push(<BackgroundBlurView key="mute-deafen" blurTheme="dark" style={[styles.floatingIconWrapper, item.withLeftMargin ? styles.leftMargin : void 0]}>
+        <MuteDeafenIcon style={styles.floatingIcon} state={item.muteDeafenIconState} />
+      </BackgroundBlurView>);
+    }
+  }
+  if (r47.length !== 0) {
+    return <NativeView style={[styles.iconContainer, userIcons]}>{r47}</NativeView>;
+  }
+};
+AnimatedComponent = ReanimatedRexport.createAnimatedComponent(BackgroundBlurView);
+OPACITY_TIMING = {
+  duration: 100
+};
+useStyles = createStyles({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    borderRadius: Module712.radii.round,
+    padding: 6
+  },
+  iconContainer: {
+    flexDirection: "row"
+  },
+  floatingIconWrapper: {
+    width: 20,
+    height: 20,
+    borderRadius: Module712.radii.round,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  floatingIcon: {
+    width: 12,
+    height: 12,
+    tintColor: Module712.colors.WHITE
+  },
+  leftMargin: {
+    marginLeft: 4
+  }
+});
+__initData = {
+  code: "function VoicePanelHeaderUserStateTsx1(){const{withTiming,isHeaderHidden,OPACITY_TIMING}=this.__closure;return{opacity:withTiming(isHeaderHidden.get()?1:0,OPACITY_TIMING)};}"
+};
+const r54 = memo(function VoicePanelHeaderUserState(props) {
+  const isHeaderHidden = props.isHeaderHidden;
+  const context = useContext(VoicePanelStateContext);
+  const { channelId, guildId } = context;
+  const styles = useStyles();
+  const voicePanelHeaderUserStateIcons = useVoicePanelHeaderUserStateIcons(useStableParticipant(useStateFromStores([ChannelRTCStore], () => ChannelRTCStore.getSelectedParticipant(channelId)?.id), channelId, guildId), guildId);
+  const h = function h() {
+    return {
+      opacity: _timing.withTiming(isHeaderHidden.get() ? 1 : 0, OPACITY_TIMING)
+    };
+  };
+  h.__closure = {
+    withTiming: _timing.withTiming,
+    isHeaderHidden,
+    OPACITY_TIMING
+  };
+  h.__workletHash = 7032221979181;
+  h.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(h);
+  return voicePanelHeaderUserStateIcons != null ? <AnimatedComponent blurTheme="dark" style={[styles.container, animatedStyle]} pointerEvents="none">{voicePanelHeaderUserStateIcons}</AnimatedComponent> : null;
+});
+export default r54;
+export { useVoicePanelHeaderUserStateIcons };

modules/voice_panel/native/header/VoicePanelSettingsActionCreators.tsx

@@ -0,0 +1,13 @@
+// Metro module 15935 (f15936).
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+let c11416_3 = "VoicePanelSettingsActionSheet";
+export const VOICE_PANEL_SETTINGS_ACTION_SHEET_KEY = "VoicePanelSettingsActionSheet";
+export function closeVoicePanelSettingsActionSheet() {
+  ActionSheetActionCreators.hideActionSheet(c11416_3);
+}
+export function openVoicePanelSettingsActionSheet(a0, a1) {
+  ActionSheetActionCreators.openLazy(import("./VoicePanelSettingsActionSheet"), c11416_3, {
+    guildId: a0,
+    channelId: a1
+  });
+}

modules/voice_panel/native/header/VoicePanelSettingsActionSheet.tsx

@@ -0,0 +1,23 @@
+// Metro module 15936 (f15937).
+import { memo } from "react";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetScrollView } from "../../../../_bundle/Module5245";
+import { SafeAreaPaddingView } from "../../../../components_native/common/SafeAreaView";
+import VoicePanelSettingsOverview from "./VoicePanelSettingsOverview";
+const useStyles = createStyles({
+  wrapper: {
+    gap: 24
+  }
+});
+const r26 = memo(function VoicePanelSettingsActionSheet(props) {
+  const { guildId, channelId } = props;
+  return <BottomSheet startExpanded scrollable>
+    <BottomSheetScrollView>
+      <SafeAreaPaddingView bottom style={useStyles().wrapper}>
+        <VoicePanelSettingsOverview guildId={guildId} channelId={channelId} />
+      </SafeAreaPaddingView>
+    </BottomSheetScrollView>
+  </BottomSheet>;
+});
+export default r26;

modules/voice_panel/native/header/VoicePanelSettingsOverview.tsx

@@ -0,0 +1,255 @@
+// Metro module 15937 (f15938).
+import { useCallback, memo } from "react";
+import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import ChannelCallLifecycleStore from "../../../video_calls/native/ChannelCallLifecycleStore";
+import AuthenticationStore from "../../../../stores/AuthenticationStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import MediaEngineStore from "../../../../stores/MediaEngineStore";
+import PermissionStore from "../../../../stores/PermissionStore";
+import UserStore from "../../../../stores/UserStore";
+import SortedVoiceStateStore from "../../../../stores/views/SortedVoiceStateStore";
+import { AnalyticsSections, Permissions, RPC_APPLICATION_LOGGING_CATEGORY } from "../../../../Constants";
+import { isStreamParticipant } from "../../../calls/CallConstants";
+import { SECURE_FRAMES_CALL_VERIFICATION_BOTTOM_SHEET_KEY } from "../../../rtc/SecureFramesConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores, useStateFromStoresArray } from "../../../../_bundle/Module589";
+import getChannelInfoSubtitle from "../utils/getChannelInfoSubtitle";
+import useChannelName from "../../../channel/useChannelName";
+import { useIsSecureFramesUIEnabled } from "../../../rtc/hooks/useIsSecureFramesUIEnabled";
+import { useIsCallSecureFramesVerified } from "../../../rtc/hooks/useIsSecureFramesVerified";
+import NativeView from "../../../core/native/NativeView";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { ShieldLockIcon } from "../../../../design/components/Icon/native/redesign/generated/ShieldLockIcon";
+import { intl, t } from "../../../../intl/index.native";
+import { LockIcon } from "../../../../design/components/Icon/native/redesign/generated/LockIcon";
+import { stringify } from "../../../debug/LogAggregator";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { closeVoicePanelSettingsActionSheet } from "./VoicePanelSettingsActionCreators";
+import { showShareActionSheet } from "../../../action_sheet/native/showShareActionSheet";
+import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
+import { TableRowIcon } from "../../../../design/components/TableRow/native/TableRowIcon.native";
+import { WrenchIcon } from "../../../../design/components/Icon/native/redesign/generated/WrenchIcon";
+import Module7690 from "../../../../_bundle/Module7690";
+import { TableRowArrow } from "../../../../design/components/TableRow/native/TableRowArrow.native";
+import Dispatcher from "../../../../Dispatcher";
+import { TableSwitchRow } from "../../../../design/components/TableRow/native/TableSwitchRow.native";
+import { DeveloperMode } from "../../../user_settings/UserSettings";
+import AudioActionCreators from "../../../../actions/AudioActionCreators";
+import ChannelRTCActionCreators from "../../../../actions/ChannelRTCActionCreators";
+import ChannelSettingsActionCreators from "../../../../actions/ChannelSettingsActionCreators";
+import { showVoiceSettingsActionSheet } from "../../../video_calls/native/components/ChannelCallConnectingScreen";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import SecureFramesPlatformUtils_native from "../../../rtc/SecureFramesPlatformUtils.native";
+import { useIsCallRTCConnectionEmpty, useIsStreamRTCConnectionEmpty } from "../../../rtc/hooks/useIsEmptyRTCConnection";
+import useCanSetVoiceChannelStatus from "../../../calls/useCanSetVoiceChannelStatus";
+import { useCanInviteMembers } from "../hooks/useCanInviteMembers";
+import { useInviteMembersCallback } from "../hooks/useInviteMembersCallback";
+import useShowChannelOptInNotice from "../../../opt_in_channels/useShowChannelOptInNotice";
+import { VoicePanelFormSection, MemberRowItem } from "../shared/FormComponents";
+import VoicePanelChannelOptInNotice from "../shared/VoicePanelChannelOptInNotice";
+import { SettingsIcon } from "../../../../design/components/Icon/native/redesign/generated/SettingsIcon";
+import Module15942 from "../../../../_bundle/Module15942";
+import { HeadphonesSlashIcon } from "../../../../design/components/Icon/native/redesign/generated/HeadphonesSlashIcon";
+import Module15943 from "../../../../_bundle/Module15943";
+import { VideoIcon } from "../../../../design/components/Icon/native/redesign/generated/VideoIcon";
+import Module10744 from "../../../../_bundle/Module10744";
+import { GroupPlusIcon } from "../../../../design/components/Icon/native/redesign/generated/GroupPlusIcon";
+import Module10223 from "../../../../_bundle/Module10223";
+let useStyles, ShareActivityLogsButton, ActivityDebugToggle;
+const VoicePanelSettingsOverviewHeader = function VoicePanelSettingsOverviewHeader(props) {
+  const { guildId, channelId } = props;
+  const styles = useStyles();
+  const stateFromStores5 = useStateFromStores([SortedVoiceStateStore], () => {
+    const voiceStatesForChannelAlt = SortedVoiceStateStore.getVoiceStatesForChannelAlt(channelId, guildId);
+    const r19 = voiceStatesForChannelAlt.slice(0, 2).map((item) => item.user);
+    return getChannelInfoSubtitle(guildId, channelId, r19, voiceStatesForChannelAlt.length - r19.length);
+  });
+  const channelName = useChannelName(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId), [channelId]));
+  let r39 = useIsSecureFramesUIEnabled({
+    channelId
+  });
+  let r13 = useIsCallSecureFramesVerified({
+    channelId
+  });
+  const r57 = [<Text style={styles.channelTitle} variant="heading-lg/bold" lineClamp={1} accessibilityRole="header">{channelName}</Text>, ,];
+  if (r13) {
+    r13 = <ShieldLockIcon style={styles.secureFramesIcon} size="xs" accessibilityLabel={intl.string(t.mR9cf3)} />;
+  }
+  r57[1] = r13;
+  const r71 = [<NativeView style={styles.channelTitleWrapper}>{r57}</NativeView>, <Text style={styles.channelSubtitle} variant="text-sm/medium" accessibilityRole="summary">{stateFromStores5}</Text>, ,];
+  if (r39) {
+    r39 = <NativeView style={styles.secureFrames}>
+      <LockIcon size="xxs" color="status-positive" />
+      <Text variant="text-xs/medium" color="status-positive">
+        {intl.string(t["3BogKe"])}
+      </Text>
+    </NativeView>;
+  }
+  r71[2] = r39;
+  return <NativeView style={styles.headerContainer}>{r71}</NativeView>;
+};
+ShareActivityLogsButton = function ShareActivityLogsButton() {
+  return <TableRow onPress={useCallback(() => {
+    const message = stringify([RPC_APPLICATION_LOGGING_CATEGORY]);
+    if (message === "") {
+      ToastActionCreators.open({
+        key: "EMBEDDED_ACTIVITIES_SHARE_EMPTY_LOGS_ERROR_MESSAGE",
+        content: intl.string(t["i+9VWy"])
+      });
+    } else {
+      closeVoicePanelSettingsActionSheet();
+      showShareActionSheet({
+        message
+      }, "Activity Logs");
+    }
+  }, [])} icon={<TableRowIcon IconComponent={WrenchIcon} source={Module7690} />} label={intl.string(t.iQzQs3)} trailing={<TableRowArrow />} />;
+};
+ActivityDebugToggle = function ActivityDebugToggle() {
+  const stateFromStores5 = useStateFromStores([ChannelCallLifecycleStore], () => ChannelCallLifecycleStore.getShowActivitiesDebugOverlay());
+  const callback = useCallback((a0) => {
+    Dispatcher.dispatch({
+      type: "EMBEDDED_ACTIVITY_SET_DEBUG_OVERLAY_VISIBILITY",
+      visible: a0
+    });
+  }, []);
+  return <TableSwitchRow icon={<TableRowIcon IconComponent={WrenchIcon} source={Module7690} />} accessibilityHint={intl.string(t["qv5/SP"])} value={stateFromStores5} onValueChange={callback} label={intl.string(t["qv5/SP"])} />;
+};
+useStyles = createStyles({
+  headerContainer: {
+    alignItems: "center"
+  },
+  channelTitleWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 8
+  },
+  channelTitle: {
+    textAlign: "center"
+  },
+  channelSubtitle: {
+    marginTop: 4,
+    marginHorizontal: 16,
+    textAlign: "center"
+  },
+  secureFrames: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    borderRadius: Module712.radii.sm,
+    marginTop: 8,
+    padding: 4,
+    gap: 4
+  },
+  secureFramesIcon: {
+    marginStart: 4
+  }
+});
+const r73 = memo(function VoicePanelSettingsOverview(props) {
+  let stateFromStores2, stateFromStores3, stateFromStores4, isSecureFramesUIEnabled;
+  const { guildId: guildId2, channelId: channelId2 } = props;
+  stateFromStores2 = void 0;
+  stateFromStores3 = void 0;
+  stateFromStores4 = void 0;
+  isSecureFramesUIEnabled = void 0;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId2));
+  const setting = DeveloperMode.useSetting();
+  stateFromStores2 = useStateFromStores([SortedVoiceStateStore], () => SortedVoiceStateStore.getVoiceStatesForChannelAlt(channelId2, guildId2));
+  const stateFromStoresArray = useStateFromStoresArray([UserStore], () => {
+    if (stateFromStores != null && stateFromStores.isPrivate()) {
+      const set = new Set(stateFromStores2.map((item) => item.user.id));
+      const r30 = [];
+      for (const recipient of stateFromStores.recipients) {
+        const user = UserStore.getUser(recipient);
+        if (!(user == null || set.has(recipient))) {
+          r30.push(user);
+        }
+      }
+      return r30;
+    }
+    return [];
+  }, [stateFromStores, stateFromStores2]);
+  const stateFromStores6 = useStateFromStores([MediaEngineStore], () => MediaEngineStore.isSelfDeaf());
+  const callback5 = useCallback(() => {
+    AudioActionCreators.toggleSelfDeaf();
+  }, []);
+  stateFromStores3 = useStateFromStores([ChannelRTCStore], () => ChannelRTCStore.getVoiceParticipantsHidden(channelId2));
+  stateFromStores4 = useStateFromStores([ChannelRTCStore, AuthenticationStore], () => {
+    const selectedParticipant = ChannelRTCStore.getSelectedParticipant(channelId2);
+    return isStreamParticipant(selectedParticipant) ? selectedParticipant.stream.ownerId !== AuthenticationStore.getId() ? selectedParticipant.id : null : null;
+  });
+  const callback4 = useCallback(() => {
+    ChannelRTCActionCreators.toggleVoiceParticipantsHidden(channelId2, !stateFromStores3);
+  }, [channelId2, stateFromStores3]);
+  const callback6 = useCallback(() => {
+    closeVoicePanelSettingsActionSheet();
+    ChannelSettingsActionCreators.open(channelId2);
+  }, [channelId2]);
+  const callback2 = useCallback(() => {
+    closeVoicePanelSettingsActionSheet();
+    showVoiceSettingsActionSheet(guildId2);
+  }, [guildId2]);
+  const callback3 = useCallback(() => {
+    ActionSheetActionCreators.openLazy(import("../../../rtc/native/SecureFramesCallVerificationBottomSheet"), SECURE_FRAMES_CALL_VERIFICATION_BOTTOM_SHEET_KEY, {
+      channelId: channelId2
+    });
+  }, [channelId2]);
+  const callback = useCallback(() => {
+    if (stateFromStores4 != null) {
+      SecureFramesPlatformUtils_native.openSecureFramesStreamVerification(stateFromStores4, channelId2);
+    }
+  }, [channelId2, stateFromStores4]);
+  const isCallRTCConnectionEmpty = useIsCallRTCConnectionEmpty();
+  const isStreamRTCConnectionEmpty = useIsStreamRTCConnectionEmpty(stateFromStores4);
+  const stateFromStores7 = useStateFromStores([EmbeddedActivitiesStore], () => EmbeddedActivitiesStore.getCurrentEmbeddedActivity() != null, []);
+  const canSetVoiceChannelStatus = useCanSetVoiceChannelStatus(stateFromStores);
+  const stateFromStores5 = useStateFromStores([PermissionStore], () => PermissionStore.canWithPartialContext(Permissions.MANAGE_CHANNELS, {
+    channelId: channelId2
+  }), [channelId2]);
+  const canInviteMembers = useCanInviteMembers(channelId2);
+  const inviteMembersCallback = useInviteMembersCallback(channelId2);
+  const showChannelOptInNotice = useShowChannelOptInNotice(stateFromStores);
+  let r18 = useIsSecureFramesUIEnabled({
+    channelId: channelId2
+  });
+  isSecureFramesUIEnabled = r18;
+  const r135 = [<VoicePanelSettingsOverviewHeader guildId={guildId2} channelId={channelId2} />, showChannelOptInNotice ? <VoicePanelFormSection hasIcons={false}>
+    <VoicePanelChannelOptInNotice channel={stateFromStores} analyticsSection={AnalyticsSections.CHANNEL_ACTION_SHEET} />
+  </VoicePanelFormSection> : null, (stateFromStores5 ? stateFromStores5 : canSetVoiceChannelStatus) && <VoicePanelFormSection hasIcons={false}>
+    {stateFromStores5 && <TableRow onPress={callback6} label={intl.string(t.XPDhcc)} subLabel={intl.string(t.w7ZEot)} trailing={<TableRowArrow />} />}
+  </VoicePanelFormSection>, , , ,];
+  const r220 = [<TableRow onPress={callback2} icon={<TableRowIcon IconComponent={SettingsIcon} source={Module15942} />} label={intl.string(t.NiTd0e)} subLabel={intl.string(t["16SG+O"])} trailing={<TableRowArrow />} />, <TableSwitchRow icon={<TableRowIcon IconComponent={HeadphonesSlashIcon} source={Module15943} />} accessibilityHint={intl.string(t.wjcRFX)} value={stateFromStores6} onValueChange={callback5} label={intl.string(t.wjcRFX)} subLabel={intl.string(t.M3VN2U)} />, <TableSwitchRow icon={<TableRowIcon IconComponent={VideoIcon} source={Module10744} />} accessibilityHint={intl.string(t.ZMTRyc)} value={stateFromStores3} onValueChange={callback4} label={intl.string(t.ZMTRyc)} subLabel={intl.string(t.MlpCFS)} />, (isSecureFramesUIEnabled ? stateFromStores4 == null : isSecureFramesUIEnabled) && !isCallRTCConnectionEmpty && <TableRow onPress={callback3} icon={<TableRowIcon IconComponent={LockIcon} source={Module15942} />} label={intl.string(t.cTQI5t)} subLabel={intl.string(t.Etxti2)} trailing={<TableRowArrow />} />, ,];
+  if (isSecureFramesUIEnabled) {
+    r18 = stateFromStores4 != null;
+  }
+  if (r18) {
+    r18 = !isStreamRTCConnectionEmpty;
+  }
+  if (r18) {
+    r18 = <TableRow onPress={callback} icon={<TableRowIcon IconComponent={LockIcon} source={Module15942} />} label={intl.string(t.QogHld)} subLabel={intl.string(t["j5+1ed"])} trailing={<TableRowArrow />} />;
+  }
+  r220[4] = r18;
+  r135[3] = <VoicePanelFormSection hasIcons>{r220}</VoicePanelFormSection>;
+  r135[4] = (stateFromStores2.length > 0 || canInviteMembers) && <VoicePanelFormSection title={`${intl.formatToPlainString(t.AWmdd9, {
+    count: `${stateFromStores2.length}`
+  })}`} hasIcons>
+    {canInviteMembers ? <TableRow onPress={inviteMembersCallback} icon={<TableRowIcon IconComponent={GroupPlusIcon} source={Module10223} />} label={intl.string(t["f1+QIK"])} trailing={<TableRowArrow />} /> : null}
+    {stateFromStores2.map((item) => {
+      let nick = item.nick;
+      if (nick == null) {
+        nick = void 0;
+      }
+      return <MemberRowItem key={item.user.id} user={item.user} selfStream={item.voiceState.selfStream} nick={nick} channelId={channelId2} guildId={guildId2} showSecureFramesUI={isSecureFramesUIEnabled} />;
+    })}
+    {stateFromStoresArray.map((item) => <MemberRowItem key={item.id} user={item} channelId={channelId2} guildId={guildId2} notConnected showRing />)}
+  </VoicePanelFormSection>;
+  r135[5] = setting ? <VoicePanelFormSection title={intl.string(t.J6rqB7)} hasIcons>
+    {stateFromStores7 ? <ShareActivityLogsButton /> : null}
+    <ActivityDebugToggle />
+  </VoicePanelFormSection> : null;
+  return <>{r135}</>;
+});
+export default r73;
+export { VoicePanelSettingsOverviewHeader };

modules/voice_panel/native/header/calculateVoicePanelHeaderSpecs.tsx

@@ -0,0 +1,19 @@
+// Metro module 10044 (f10045).
+const t = function t(a0, a1) {
+  const paddingTop = Math.max(a1, a0.top);
+  return {
+    height: 44 + paddingTop,
+    paddingTop,
+    paddingLeft: Math.max(a1, a0.left),
+    paddingRight: Math.max(a1, a0.right)
+  };
+};
+t.__closure = {
+  BASE_VOICE_PANEL_HEADER_HEIGHT: 44
+};
+t.__workletHash = 6201232972174;
+t.__initData = {
+  code: "function calculateVoicePanelHeaderSpecs_calculateVoicePanelHeaderSpecsTsx1(safeArea,edgeGutter){const{BASE_VOICE_PANEL_HEADER_HEIGHT}=this.__closure;const paddingTop=Math.max(edgeGutter,safeArea.top);const paddingLeft=Math.max(edgeGutter,safeArea.left);const paddingRight=Math.max(edgeGutter,safeArea.right);const height=BASE_VOICE_PANEL_HEADER_HEIGHT+paddingTop;return{height:height,paddingTop:paddingTop,paddingLeft:paddingLeft,paddingRight:paddingRight};}"
+};
+export default t;
+export const BASE_VOICE_PANEL_HEADER_HEIGHT = 44;