yeet

modules/voice_panel/SpatialAudioForVoiceExperiment.tsx

@@ -0,0 +1,15 @@
+// Metro module 12884 (f12885).
+import { createApexExperiment } from "../experiments/apex/index";
+const apexExperiment = createApexExperiment({
+  name: "2026-05-spatial-audio-for-voice",
+  kind: "user",
+  defaultConfig: {
+    enabled: false
+  },
+  variations: {
+    1: {
+      enabled: true
+    }
+  }
+});
+export default apexExperiment;

modules/voice_panel/VoicePanelConstants.tsx

@@ -0,0 +1,107 @@
+// Metro module 10038 (f10039).
+import * as _PlatformUtils from "../../utils/PlatformUtils";
+let c6674_0 = {
+  DISMISSED: "dismissed",
+  PIP: "pip",
+  PANEL: "panel"
+};
+const r14 = {
+  mass: 0.5,
+  damping: 80,
+  stiffness: 200
+};
+const r13 = {
+  ...r14,
+  overshootClamping: true
+};
+const r12 = {
+  ...r14,
+  overshootClamping: true
+};
+const r11 = {
+  ...r14,
+  mass: 0.3
+};
+const r10 = {
+  USER: "USER",
+  STREAM: "STREAM",
+  ACTIVITY: "ACTIVIY"
+};
+const r9 = {
+  NO_VIDEO_PARTICIPANTS: "no_video_participants",
+  CALLER_DISCONNECTED: "caller_disconnected"
+};
+const r8 = {};
+r8[r9.NO_VIDEO_PARTICIPANTS] = {
+  width: 2,
+  height: 1
+};
+const set = new Set(Object.keys(r8));
+const r48 = {
+  PARTICIPANT: "participant",
+  CTA: "cta"
+};
+const isAndroid = _PlatformUtils.isAndroid();
+const isIOS = _PlatformUtils.isIOS();
+export { c6674_0 as VoicePanelModes };
+export function getAnalyticsNameForVoicePanelMode(a0) {
+  if (c6674_0.DISMISSED === a0) {
+    return "dismissed";
+  }
+  if (c6674_0.PIP === a0) {
+    return "pip";
+  }
+  if (c6674_0.PANEL === a0) {
+    return "grid";
+  }
+}
+export const VOICE_PANEL_CHUNK_DIVISOR = 3;
+export const DEFAULT_BORDER_RADIUS = 24;
+export const DEFAULT_BORDER_RADIUS_PIP = 24;
+export const DRAWER_SPRING_PHYSICS = {
+  mass: 0.2,
+  damping: 10,
+  stiffness: 200
+};
+export const LAYOUT_PHYSICS = {
+  mass: 0.3,
+  damping: 25,
+  stiffness: 150
+};
+export const UI_SHOW_HIDE_PHYSICS = {
+  mass: 0.4,
+  damping: 60,
+  stiffness: 150
+};
+export { r14 as MODE_CHANGE_PHYSICS };
+export { r13 as MODE_CHANGE_PHYSICS_CLAMPED };
+export { r12 as BORDER_RADIUS_PHYSICS };
+export { r11 as PANEL_CONTROLS_HEIGHT_PHYSICS };
+export const SPEAKING_PHYSICS = {
+  mass: 0.32,
+  damping: 10,
+  stiffness: 300,
+  restDisplacementThreshold: 0.001,
+  restSpeedThreshold: 0.001,
+  overshootClamping: true
+};
+export const PUSH_TO_TALK_PIP_PHYSICS = {
+  damping: 20,
+  mass: 0.1,
+  stiffness: 100
+};
+export const DRAWER_SPRING_PHYSICS_GESTURE_ACTIVE = {
+  mass: 0.1,
+  damping: 20,
+  stiffness: 500
+};
+export { r10 as GridItemTypes };
+export const BASE_TARGET_CARD_SIZE = 165;
+export { r9 as VoicePanelCTACard };
+export { r8 as VoicePanelCTACardDimensions };
+export { set as VoicePanelCTACardDimensionKeys };
+export { r48 as VoicePanelCardItemType };
+export { isAndroid as IS_ANDROID };
+export { isIOS as IS_IOS };
+export const SECONDARY_PIP_TOP_MARGIN = 8;
+export const VOICE_PANEL_DRAWER_MAX_WIDTH = 540;

modules/voice_panel/VoicePanelManager.native.tsx

@@ -0,0 +1,28 @@
+// Metro module 16640 (f16641).
+import RTCConnectionStore from "../../stores/RTCConnectionStore";
+import VoicePanelStore from "./VoicePanelStore";
+import AutomaticLifecycleManager from "../../lib/AutomaticLifecycleManager";
+class VoicePanelManager extends AutomaticLifecycleManager {
+  actions = {
+    VOICE_CHANNEL_SELECT: () => {
+      const channelId = RTCConnectionStore.getChannelId();
+      if (channelId != null) {
+        const state = VoicePanelStore.getState();
+        if (!state.channels.has(channelId)) {
+          state.openChannel(channelId);
+        }
+      }
+    },
+    RTC_CONNECTION_STATE: () => {
+      const channelId = RTCConnectionStore.getChannelId();
+      if (channelId != null) {
+        const state = VoicePanelStore.getState();
+        if (!state.channels.has(channelId)) {
+          state.openChannel(channelId);
+        }
+      }
+    }
+  };
+}
+const voicePanelManager = new VoicePanelManager();
+export default voicePanelManager;

modules/voice_panel/VoicePanelStore.tsx

@@ -0,0 +1,163 @@
+// Metro module 4400 (f4401).
+import ChannelStore from "../../stores/ChannelStore";
+import { createWithEqualityFn } from "../../_bundle/identity_700";
+import { isStageVoicePanelEnabled } from "../stage_channels/StageVoicePanelExperiment";
+import { batchUpdates } from "../../_bundle/Module705";
+const withEqualityFn = createWithEqualityFn((c14232_0, c14232_1) => ({
+  channels: new Set(),
+  isActivityFocused: false,
+  isVoicePanelFullscreen: () => c14232_1().voicePanelsFullscreen.size > 0,
+  isAnyVoicePanelOpen: () => c14232_1().voicePanelsOpened.size > 0,
+  voicePanelsFullscreen: new Set(),
+  voicePanelsOpened: new Set(),
+  voicePanelsPIP: new Set(),
+  openChannel: (a0) => {
+    let c25157_0 = a0;
+    let r11 = isStageVoicePanelEnabled("voice_panel_store");
+    if (!r11) {
+      const channel = ChannelStore.getChannel(a0);
+      r11 = (channel == null ? void 0 : channel.isGuildStageVoice()) !== true;
+    }
+    if (r11 && !c14232_1().channels.has(a0)) {
+      batchUpdates(() => {
+        c14232_0((a0) => {
+          const r8 = Set;
+          return {
+            ...a0,
+            channels: new r8([c25157_0, ...Array.from(a0.channels)]),
+            voicePanelsOpened: new Set([c25157_0, ...Array.from(a0.voicePanelsOpened)])
+          };
+        });
+      });
+    }
+  },
+  closeChannel: (c25158_0) => {
+    batchUpdates(() => {
+      c14232_0((a0) => {
+        let r17;
+        L10: {
+          const { channels, voicePanelsFullscreen, voicePanelsOpened } = a0;
+          if (!channels.has(c25158_0) && !voicePanelsFullscreen.has(c25158_0)) {
+            const r16 = voicePanelsOpened.has(c25158_0);
+            r17 = a0;
+            if (!r16) {
+              break L10;
+            }
+          }
+          const r19 = channels.has(c25158_0);
+          let channels2 = channels;
+          if (r19) {
+            const set = new Set(channels);
+            set.delete(c25158_0);
+            channels2 = set;
+          }
+          const r27 = voicePanelsFullscreen.has(c25158_0);
+          let voicePanelsFullscreen2 = voicePanelsFullscreen;
+          if (r27) {
+            const set2 = new Set(voicePanelsFullscreen);
+            set2.delete(c25158_0);
+            voicePanelsFullscreen2 = set2;
+          }
+          const r39 = voicePanelsOpened.has(c25158_0);
+          let voicePanelsOpened2 = voicePanelsOpened;
+          if (r39) {
+            const set3 = new Set(voicePanelsOpened);
+            set3.delete(c25158_0);
+            voicePanelsOpened2 = set3;
+          }
+          r17 = {
+            ...a0,
+            channels: channels2,
+            voicePanelsFullscreen: voicePanelsFullscreen2,
+            voicePanelsOpened: voicePanelsOpened2
+          };
+        }
+        return r17;
+      });
+    });
+  },
+  isMounted: (a0) => c14232_1().channels.has(a0),
+  setIsActivityFocused: (isActivityFocused) => {
+    batchUpdates(() => {
+      c14232_0((a0) => a0.isActivityFocused !== isActivityFocused ? {
+        ...a0,
+        isActivityFocused
+      } : a0);
+    });
+  },
+  setChannelPanelFullscreen: (c25160_0, c25160_1) => {
+    batchUpdates(() => {
+      c14232_0((a0) => {
+        const set = new Set(a0.voicePanelsFullscreen);
+        const r13 = set.has(c25160_0);
+        if (c25160_1) {
+          if (r13) {
+            return a0;
+          }
+          set.add(c25160_0);
+        } else {
+          if (!r13) {
+            return a0;
+          }
+          set.delete(c25160_0);
+        }
+        return {
+          ...a0,
+          voicePanelsFullscreen: set
+        };
+      });
+    });
+  },
+  setChannelPanelOpen: (c25161_0, c25161_1) => {
+    batchUpdates(() => {
+      c14232_0((a0) => {
+        const channels = a0.channels;
+        if (channels.has(c25161_0)) {
+          const set = new Set(a0.voicePanelsOpened);
+          const r16 = set.has(c25161_0);
+          if (c25161_1) {
+            if (r16) {
+              return a0;
+            }
+            set.add(c25161_0);
+          } else {
+            if (!r16) {
+              return a0;
+            }
+            set.delete(c25161_0);
+          }
+          return {
+            ...a0,
+            voicePanelsOpened: set
+          };
+        }
+        return a0;
+      });
+    });
+  },
+  isChannelOpen: (a0) => c14232_1().voicePanelsOpened.has(a0),
+  setChannelPanelPIP: (c25162_0, c25162_1) => {
+    batchUpdates(() => {
+      c14232_0((a0) => {
+        const set = new Set(a0.voicePanelsPIP);
+        const r13 = set.has(c25162_0);
+        if (c25162_1) {
+          if (r13) {
+            return a0;
+          }
+          set.add(c25162_0);
+        } else {
+          if (!r13) {
+            return a0;
+          }
+          set.delete(c25162_0);
+        }
+        return {
+          ...a0,
+          voicePanelsPIP: set
+        };
+      });
+    });
+  }
+}));
+export default withEqualityFn;

modules/voice_panel/VoicePanelUtils.native.tsx

@@ -0,0 +1,33 @@
+// Metro module 10689 (f10690).
+import ChannelStore from "../../stores/ChannelStore";
+import RTCConnectionStore from "../../stores/RTCConnectionStore";
+import VoicePanelStore from "./VoicePanelStore";
+import * as _StageVoicePanelExperiment from "../stage_channels/StageVoicePanelExperiment";
+import { useStateFromStores } from "../../_bundle/defaultAreStatesEqual";
+export function isVoicePanelEnabled(a0) {
+  const isStageVoicePanelEnabled = _StageVoicePanelExperiment.isStageVoicePanelEnabled("voice_panel_utils");
+  return !(isStageVoicePanelEnabled ? !isStageVoicePanelEnabled : a0 == null ? void 0 : a0.isGuildStageVoice());
+}
+export function useIsVoicePanelShowing() {
+  return useStateFromStores([ChannelStore, RTCConnectionStore], () => {
+    const channel = ChannelStore.getChannel(RTCConnectionStore.getChannelId());
+    let r8 = channel != null;
+    if (r8) {
+      const isGuildStageVoice = channel.isGuildStageVoice();
+      r8 = isGuildStageVoice ? _StageVoicePanelExperiment.isStageVoicePanelEnabled("voice_panel_utils") : !isGuildStageVoice;
+    }
+    return r8;
+  });
+}
+export function useIsVoicePanelFullscreen() {
+  return VoicePanelStore((a0) => a0.isVoicePanelFullscreen());
+}
+export function useIsVoicePanelOpen(c18194_0) {
+  return VoicePanelStore((a0) => a0.isChannelOpen(c18194_0));
+}
+export function useIsAnyVoicePanelOpen() {
+  return VoicePanelStore((a0) => a0.isAnyVoicePanelOpen());
+}
+export function useIsVoicePanelMounted(c18195_0) {
+  return VoicePanelStore((a0) => a0.isMounted(c18195_0));
+}

modules/voice_panel/native/HomeIndicator.tsx

@@ -0,0 +1,81 @@
+// Metro module 10516 (f10517).
+import { Component } from "react";
+import { NativeModules } from "react-native";
+import { create } from "../../../_bundle/Module644";
+import { batchUpdates } from "../../../_bundle/Module705";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import Module1593 from "../../../_bundle/Module1593";
+let c7058_4 = create(() => ({
+  autoHideHomeIndicator: false
+}));
+class HomeIndicator extends Component {
+  static defaultProps = {
+    prefersHidden: false,
+    prefersDeferringSystemGestures: false
+  };
+  static _propsStack = [];
+  static _updateImmediate = null;
+  _stackEntry = null;
+  static pushStackEntry(a0) {
+    const r0 = {
+      prefersHidden: a0.prefersHidden,
+      prefersDeferringSystemGestures: a0.prefersDeferringSystemGestures
+    };
+    HomeIndicator._propsStack.push(r0);
+    HomeIndicator._updatePropsStack();
+    return r0;
+  }
+  static popStackEntry(a0) {
+    const r5 = a0 != null ? HomeIndicator._propsStack.indexOf(a0) : -1;
+    if (r5 !== -1) {
+      HomeIndicator._propsStack.splice(r5, 1);
+      HomeIndicator._updatePropsStack();
+    }
+  }
+  static replaceStackEntry(a0, a1) {
+    const r2 = {
+      prefersHidden: a1.prefersHidden,
+      prefersDeferringSystemGestures: a1.prefersDeferringSystemGestures
+    };
+    const r10 = a0 != null ? HomeIndicator._propsStack.indexOf(a0) : -1;
+    if (r10 !== -1) {
+      HomeIndicator._propsStack[r10] = r2;
+    }
+    HomeIndicator._updatePropsStack();
+    return r2;
+  }
+  static _updatePropsStack() {
+    clearImmediate(HomeIndicator._updateImmediate);
+    HomeIndicator._updateImmediate = setImmediate(() => {
+      let r14 = HomeIndicator._propsStack[HomeIndicator._propsStack.length - 1];
+      if (r14 == null) {
+        r14 = {};
+      }
+      const { prefersHidden = false, prefersDeferringSystemGestures = false } = r14;
+      batchUpdates(() => c7058_4.setState({
+        autoHideHomeIndicator: prefersHidden
+      }));
+      if (isAndroid()) {
+        Module1593.setNavigationBarVisible(!prefersHidden);
+      } else if (NativeModules.DCDHomeIndicator) {
+        NativeModules.DCDHomeIndicator.setPrefersAutoHidden(prefersHidden);
+        NativeModules.DCDHomeIndicator.setPrefersDeferringSystemGestures(prefersDeferringSystemGestures);
+      }
+    });
+  }
+  componentDidMount() {
+    this._stackEntry = HomeIndicator.pushStackEntry(this.props);
+  }
+  componentDidUpdate() {
+    this._stackEntry = HomeIndicator.replaceStackEntry(this._stackEntry, this.props);
+  }
+  componentWillUnmount() {
+    HomeIndicator.popStackEntry(this._stackEntry);
+    this._stackEntry = null;
+  }
+  render() {
+    return null;
+  }
+}
+export default HomeIndicator;
+export { c7058_4 as useHomeIndicatorStore };

modules/voice_panel/native/VoicePanelAccessibilityView.tsx

@@ -0,0 +1,15 @@
+// Metro module 15923 (f15924).
+import { memo } from "react";
+import { VoicePanelPIPModes } from "./pip/VoicePanelPIPConstants";
+import { AccessibilityViewAnimated } from "../../../design/components/AccessibilityView/AccessibilityView.native";
+import { usePIPState } from "./pip/VoicePanelPIPStateContext";
+let Component = memo(AccessibilityViewAnimated);
+export default function VoicePanelAccessibilityView(props) {
+  const { style, pointerEvents = "box-none", nativeID, accessibilityViewIsModal: _accessibilityViewIsModal, onAccessibilityEscape, ...props2 } = props;
+  let accessibilityViewIsModal = props.accessibilityViewIsModal;
+  const pIPState = usePIPState();
+  if (accessibilityViewIsModal) {
+    accessibilityViewIsModal = pIPState.mode !== VoicePanelPIPModes.IN_APP;
+  }
+  return <Component style={style} pointerEvents={pointerEvents} nativeID={nativeID} accessibilityViewIsModal={accessibilityViewIsModal} onAccessibilityEscape={onAccessibilityEscape} {...props2} />;
+};

modules/voice_panel/native/VoicePanelContainer.tsx

@@ -0,0 +1,26 @@
+// Metro module 15877 (f15878).
+import { useMemo, memo } from "react";
+import ChannelStore from "../../../stores/ChannelStore";
+import VoicePanelStore from "../VoicePanelStore";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import VoicePanelController from "./VoicePanelController";
+import VoicePanelUI from "./VoicePanelUI";
+import { shallow } from "../../../_bundle/Module3802";
+import { TransitionGroup } from "../../../design/components/TransitionGroup/TransitionGroup";
+let getChannelKey, renderVoicePanel;
+const VoicePanel = function VoicePanel(props) {
+  let c22536_0 = props;
+  return <VoicePanelController {...props} guildId={useStateFromStores([ChannelStore], () => ChannelStore.getChannel(c22536_0.channelId)?.guild_id)}>
+    {useMemo(() => <VoicePanelUI />, [])}
+  </VoicePanelController>;
+};
+getChannelKey = function getChannelKey(a0) {
+  return a0;
+};
+renderVoicePanel = function renderVoicePanel(a0, a1, a2, a3) {
+  return <VoicePanel key={a1} channelId={a1} transitionState={a2} transitionCleanUp={a3} />;
+};
+const r27 = memo(function VoicePanelContainer() {
+  return <TransitionGroup items={VoicePanelStore((a0) => Array.from(a0.channels), shallow)} getItemKey={getChannelKey} renderItem={renderVoicePanel} />;
+});
+export default r27;

modules/voice_panel/native/VoicePanelStateContext.tsx

@@ -0,0 +1,95 @@
+// Metro module 10037 (f10038).
+import { createContext } from "react";
+import { VoicePanelModes } from "../VoicePanelConstants";
+import * as _VoicePanelControlsConstants from "./controls/VoicePanelControlsConstants";
+import { MorphablePanelModes } from "../../panels/morphable/native/MorphablePanelConstants";
+import { createFakeSharedValue } from "../../reanimated/ReanimatedHelperTypes";
+import VoicePanelCardLayoutManager from "./card/VoicePanelCardLayoutManager";
+import { EMPTY_SAFE_AREA_INSETS } from "../../safe_area/SafeAreaConstants.native";
+const { CONTROLS_HEIGHT, VoicePanelControlsModes } = _VoicePanelControlsConstants;
+const context = createContext({
+  channelId: "context-not-initialized",
+  channelType: void 0,
+  connected: createFakeSharedValue(false),
+  contentDimensions: createFakeSharedValue({
+    width: 0,
+    height: 0
+  }),
+  controlsSpecs: createFakeSharedValue({
+    mode: VoicePanelControlsModes.FLOATING_DEFAULT,
+    locked: false,
+    height: CONTROLS_HEIGHT,
+    pushToTalk: false
+  }),
+  dismissPanel: () => {
+    throw new Error("VoicePanelContextType.Provider.dismissDrawer: not called within a context provider");
+  },
+  dismissToPIPGestureRef: {
+    current: void 0
+  },
+  dragScrolling: createFakeSharedValue(false),
+  focused: createFakeSharedValue(null),
+  generateStateLocker: () => {
+    throw new Error("VoicePanelContextType.Provider.generateStateLocker: not called within a context provider");
+  },
+  guildId: void 0,
+  hideControls: () => {
+    throw new Error("VoicePanelContextType.Provider.hideControls: not called within a context provider");
+  },
+  isCall: false,
+  isFocusedVideoZoomed: createFakeSharedValue(false),
+  layoutManager: new VoicePanelCardLayoutManager("invalid"),
+  mode: createFakeSharedValue(VoicePanelModes.PANEL),
+  morphablePanelMode: createFakeSharedValue(MorphablePanelModes.PANEL),
+  mountedCards: new Set(),
+  pipAvoidanceSpecs: createFakeSharedValue({
+    top: 0,
+    bottom: 0
+  }),
+  preJoinContentSize: createFakeSharedValue(0),
+  safeArea: createFakeSharedValue(EMPTY_SAFE_AREA_INSETS),
+  scrollPosition: createFakeSharedValue(0),
+  setControlsMode: () => {
+    throw new Error("VoicePanelContextType.Provider.setControlsMode: not called within a context provider");
+  },
+  setFocused: () => {
+    throw new Error("VoicePanelContextType.Provider.setFocused: not called within a context provider");
+  },
+  setIsFocusedVideoZoomed: () => {
+    throw new Error("VoicePanelContextType.Provider.showControls: not called within a context provider");
+  },
+  setMode: () => {
+    throw new Error("VoicePanelContextType.Provider.setMode: not called within a context provider");
+  },
+  setShowFloatingCTA: () => {
+    throw new Error("VoicePanelContextType.Provider.showFloatingCTA: not called within a context provider");
+  },
+  showControls: () => {
+    throw new Error("VoicePanelContextType.Provider.showControls: not called within a context provider");
+  },
+  showFloatingCTA: createFakeSharedValue(null),
+  streamOutputSinkStack: {},
+  windowDimensions: createFakeSharedValue({
+    width: 0,
+    height: 0,
+    landscape: false
+  }),
+  wrapperDimensions: createFakeSharedValue({
+    drawerWidth: 0,
+    drawerHeight: 0,
+    drawerX: 0,
+    drawerY: 0,
+    pipX: 0,
+    pipY: 0,
+    animated: true,
+    mode: VoicePanelModes.PANEL
+  }),
+  useReducedMotion: createFakeSharedValue(false),
+  wrapperOffset: createFakeSharedValue({
+    gestureActive: false,
+    x: 0,
+    y: 0
+  }),
+  panelCardStillInPIP: createFakeSharedValue(false)
+});
+export default context;

modules/voice_panel/native/VoicePanelSystemUIManager.tsx

@@ -0,0 +1,158 @@
+// Metro module 15922 (f15923).
+import _slicedToArray from "../../../_bundle/_slicedToArray";
+import * as Module19 from "react";
+import { useContext, useState, useMemo, useEffect } from "react";
+import "../../calls/ChannelRTCStore";
+import "../VoicePanelConstants";
+import "./controls/VoicePanelControlsConstants";
+import "../../calls/CallConstants";
+import { jsx } from "react/jsx-runtime";
+import VoicePanelStateContext from "./VoicePanelStateContext";
+import { batchUpdates } from "../../../_bundle/Module705";
+import debounce from "../../../_bundle/debounce";
+import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
+import { useAnimatedReaction } from "../../reanimated/ReanimatedRexport";
+import * as _cheapWorkletShallowEqual from "../../reanimated/native/cheapWorkletShallowEqual";
+import StatusBar_android from "../../status_bar/native/components/StatusBar.android";
+import HomeIndicator from "./HomeIndicator";
+function $mk117102($env) {
+  return () => {
+    const r8 = $env;
+    const r4 = $env.$parent;
+    const r5 = r4[6];
+    const r9 = r8[1];
+    const r7 = $env.$parent.$parent;
+    r5(r9 !== r7[6].PIP);
+    const r13 = r8[2];
+    const HIDDEN = r7[7].HIDDEN;
+    const r10 = r8[0];
+    const r0 = !(r10 != null) && !r8[3] || r13 !== HIDDEN;
+    (0, r4[5])(r0);
+    const type = (r10 != null ? r7[5].getParticipant(r4[1], r10) : void 0)?.type;
+    const ACTIVITY = r7[8].ACTIVITY;
+    const r36 = !!(0, r7[0])(r7[2][9]).isIOS() && type === ACTIVITY;
+    (0, r4[8])(r36);
+    r4[7](r0 ? !r0 : !r36);
+  };
+}
+let env11405 = {};
+const c11405_12 = {
+  code: "function VoicePanelSystemUIManagerTsx1(){const{focused,mode,controlsSpecs,windowDimensions}=this.__closure;var _focused$get;return{focusedId:(_focused$get=focused.get())===null||_focused$get===void 0?void 0:_focused$get.id,mode:mode.get(),controlsMode:controlsSpecs.get().mode,landscape:windowDimensions.get().landscape};}"
+};
+const c11405_13 = {
+  code: "function VoicePanelSystemUIManagerTsx2(props,previous){const{cheapWorkletShallowEqual,runOnJS,handleStateChange}=this.__closure;if(cheapWorkletShallowEqual(props,previous!==null&&previous!==void 0?previous:undefined))return;runOnJS(handleStateChange)(props);}"
+};
+const r37 = Module19.memo(function VoicePanelSystemUIManager() {
+  let env22608 = {
+    $parent: env11405
+  };
+  const context = useContext(VoicePanelStateContext);
+  const focused = context.focused;
+  env22608[0] = focused;
+  const channelId = context.channelId;
+  env22608[1] = channelId;
+  const mode = context.mode;
+  env22608[2] = mode;
+  const controlsSpecs = context.controlsSpecs;
+  env22608[3] = controlsSpecs;
+  const windowDimensions = context.windowDimensions;
+  env22608[4] = windowDimensions;
+  const r26 = _slicedToArray(useState(true), 2);
+  const r14 = r26[0];
+  env22608[5] = r26[1];
+  const r6 = _slicedToArray(useState(true), 2);
+  const r30 = r6[0];
+  env22608[6] = r6[1];
+  const r35 = _slicedToArray(useState(false), 2);
+  const prefersHidden = r35[0];
+  env22608[7] = r35[1];
+  const r39 = _slicedToArray(useState(false), 2);
+  const prefersDeferringSystemGestures = r39[0];
+  env22608[8] = r39[1];
+  const memo = useMemo(() => {
+    let focusedId;
+    let c28184_0 = debounce(function updateState(a0) {
+      let env30934;
+      const r1 = env30934 = {
+        $parent: env22608
+      };
+      env30934[0] = a0.focusedId;
+      env30934[1] = a0.mode;
+      env30934[2] = a0.controlsMode;
+      env30934[3] = a0.landscape;
+      batchUpdates($mk117102(r1));
+    }, 500, {
+      maxWait: 2000
+    });
+    focusedId = void 0;
+    return {
+      cancelPendingDebounce: () => {
+        c28184_0.cancel();
+      },
+      handleStateChange: (a0) => {
+        if (focusedId !== a0.focusedId) {
+          focusedId = a0.focusedId;
+          c28184_0(a0);
+        } else {
+          let env30935;
+          c28184_0.cancel();
+          const r10 = env30935 = {
+            $parent: env22608
+          };
+          env30935[0] = void 0;
+          env30935[1] = void 0;
+          env30935[2] = void 0;
+          env30935[3] = void 0;
+          env30935[0] = a0.focusedId;
+          env30935[1] = a0.mode;
+          env30935[2] = a0.controlsMode;
+          env30935[3] = a0.landscape;
+          batchUpdates($mk117102(r10));
+        }
+      }
+    };
+  }, [channelId]);
+  const cancelPendingDebounce2 = memo.cancelPendingDebounce;
+  env22608[9] = cancelPendingDebounce2;
+  const handleStateChange2 = memo.handleStateChange;
+  env22608[10] = handleStateChange2;
+  useEffect(() => () => (0, env22608[9])(), [cancelPendingDebounce2]);
+  const v = () => ({
+    focusedId: env22608[0].get()?.id,
+    mode: env22608[2].get(),
+    controlsMode: env22608[3].get().mode,
+    landscape: env22608[4].get().landscape
+  });
+  v.__closure = {
+    focused,
+    mode,
+    controlsSpecs,
+    windowDimensions
+  };
+  v.__workletHash = 2478376475717;
+  v.__initData = c11405_12;
+  const u = function u(a0, a1) {
+    if (!_cheapWorkletShallowEqual.cheapWorkletShallowEqual(a0, a1 == null ? void 0 : a1)) {
+      _ReanimatedRexport.runOnJS(env22608[10])(a0);
+    }
+  };
+  u.__closure = {
+    cheapWorkletShallowEqual: _cheapWorkletShallowEqual.cheapWorkletShallowEqual,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    handleStateChange: handleStateChange2
+  };
+  u.__workletHash = 3592680244658;
+  u.__initData = c11405_13;
+  useAnimatedReaction(v, u);
+  return <>
+    {r30 ? (0, jsx)(StatusBar_android, {
+      hidden: !r14,
+      barStyle: "light-content"
+    }) : null}
+    {(0, jsx)(HomeIndicator, {
+      prefersHidden,
+      prefersDeferringSystemGestures
+    })}
+  </>;
+});
+export default r37;

modules/voice_panel/native/alerts/VoicePanelLockedIcon.tsx

@@ -0,0 +1,24 @@
+// Metro module 16009 (f16010).
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import NativeView from "../../../core/native/NativeView";
+import { Icon, IconSizes } from "../../../../design/void/native";
+import Module16010 from "../../../../_bundle/Module16010";
+const useStyles = createStyles({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "center",
+    width: 64,
+    height: 64,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    borderRadius: Module712.radii.round
+  },
+  icon: {}
+});
+export default function VoicePanelLockedIcon() {
+  const styles = useStyles();
+  return <NativeView style={styles.container}>
+    <Icon style={styles.icon} source={Module16010} size={IconSizes.LARGE} />
+  </NativeView>;
+};

modules/voice_panel/native/alerts/VoicePanelMaxCapacityAlert.tsx

@@ -0,0 +1,22 @@
+// Metro module 16011 (f16012).
+import ChannelStore from "../../../../stores/ChannelStore";
+import { useStateFromStores } from "../../../../_bundle/defaultAreStatesEqual";
+import { useDismissModalCallback, AlertActionButton } from "../../../../design/components/AlertModal/native/AlertModal.native";
+import { AlertModal } from "../../../../design/components/AlertModal/native/AlertModal.native";
+import VoicePanelLockedIcon from "./VoicePanelLockedIcon";
+import { intl, t } from "../../../../intl/index.native";
+export default function VoicePanelMaxCapacityAlert(props) {
+  const channelId = props.channelId;
+  const stateFromStores = useStateFromStores([ChannelStore], () => {
+    let r9 = ChannelStore.getChannel(channelId)?.userLimit;
+    if (r9 == null) {
+      r9 = 0;
+    }
+    return r9;
+  }, [channelId]);
+  const dismissModalCallback = useDismissModalCallback();
+  return <AlertModal header={<VoicePanelLockedIcon />} title={intl.string(t.hHbsQj)} content={intl.formatToPlainString(t["387SQH"], {
+    count: stateFromStores
+  })} actions={<AlertActionButton variant="secondary" text={intl.string(t["NX+WJN"])} onPress={dismissModalCallback} />} />;
+};
+export const VOICE_PANEL_MAX_CAPACITY_KEY = "voice-panel-max-capacity";

modules/voice_panel/native/alerts/VoicePanelNoJoinPermissionsAlert.tsx

@@ -0,0 +1,10 @@
+// Metro module 16008 (f16009).
+import { useDismissModalCallback, AlertActionButton } from "../../../../design/components/AlertModal/native/AlertModal.native";
+import { AlertModal } from "../../../../design/components/AlertModal/native/AlertModal.native";
+import VoicePanelLockedIcon from "./VoicePanelLockedIcon";
+import { intl, t } from "../../../../intl/index.native";
+export default function VoicePanelNoJoinPermissionsAlert() {
+  const dismissModalCallback = useDismissModalCallback();
+  return <AlertModal header={<VoicePanelLockedIcon />} title={intl.string(t["7/2/3M"])} content={intl.string(t.xsenup)} actions={<AlertActionButton variant="secondary" text={intl.string(t["NX+WJN"])} onPress={dismissModalCallback} />} />;
+};
+export const VOICE_PANEL_NO_JOIN_PERMS_KEY = "voice-panel-no-join-perms";

modules/voice_panel/native/alerts/VoicePanelNoVideoPermissionsAlert.tsx

@@ -0,0 +1,9 @@
+// Metro module 16018 (f16019).
+import { useDismissModalCallback } from "../../../../design/components/AlertModal/native/AlertModal.native";
+import { AlertModal, AlertActionButton } from "../../../../design/components/AlertModal/native/AlertModal.native";
+import { intl, t } from "../../../../intl/index.native";
+export default function VoicePanelNoVideoPermissionsAlert() {
+  const dismissModalCallback = useDismissModalCallback();
+  return <AlertModal title={intl.string(t.OYzPcW)} content={intl.string(t.oBH7Y2)} actions={<AlertActionButton variant="secondary" text={intl.string(t["NX+WJN"])} onPress={dismissModalCallback} />} />;
+};
+export const VOICE_PANEL_NO_VIDEO_PERMS_KEY = "voice-panel-no-video-perms";

modules/voice_panel/native/alerts/VoicePanelNsfwAlert.tsx

@@ -0,0 +1,25 @@
+// Metro module 16012 (f16013).
+import { isGuildNSFW } from "../../../../records/GuildRecord";
+import GuildStore from "../../../../stores/GuildStore";
+import { useDismissModalCallback, AlertActions } from "../../../../design/components/AlertModal/native/AlertModal.native";
+import { AlertModal, AlertActionButton } from "../../../../design/components/AlertModal/native/AlertModal.native";
+import { intl, t } from "../../../../intl/index.native";
+import GuildActionCreators from "../../../../actions/GuildActionCreators";
+import SelectedChannelActionCreators from "../../../../actions/SelectedChannelActionCreators";
+export default function VoicePanelNsfwAlert(props) {
+  const { guildId, channelId } = props;
+  const dismissModalCallback = useDismissModalCallback();
+  const isGuildNSFW2 = isGuildNSFW(GuildStore.getGuild(guildId));
+  return <AlertModal title={isGuildNSFW2 ? intl.string(t.xi46lg) : intl.string(t.ZmwvDc)} content={isGuildNSFW2 ? intl.string(t.ZtuRts) : intl.string(t.E4Cd5I)} actions={<AlertActions>
+    <AlertActionButton key="confirm" variant="primary" onPress={function onPress() {
+      GuildActionCreators.nsfwAgree(guildId);
+      SelectedChannelActionCreators.selectVoiceChannel(channelId);
+      dismissModalCallback();
+    }} text={intl.string(t.wVq7uo)} />
+    <AlertActionButton key="add-profile-picture" variant="secondary" onPress={function onPress() {
+      GuildActionCreators.nsfwReturnToSafety(guildId);
+      dismissModalCallback();
+    }} text={intl.string(t["/g10LC"])} />
+  </AlertActions>} />;
+};
+export const VOICE_PANEL_NSFW_KEY = "voice-panel-nsfw";

modules/voice_panel/native/card/ActivityAccessibilityLayer.tsx

@@ -0,0 +1,60 @@
+// Metro module 15970 (f15971).
+import { useState, useRef, useCallback } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { IS_IOS } from "../../VoicePanelConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { setAccessibilityFocus } from "../../../a11y/native/setAccessibilityFocus.android";
+import { intl, t } from "../../../../intl/index.native";
+import { AccessibilityView } from "../../../../design/components/AccessibilityView/AccessibilityView.native";
+import { useIsScreenReaderEnabled } from "../../../a11y/native/useIsScreenReaderEnabled.native";
+let useStyles;
+const FocusedActivityAccessibilityLayer = function FocusedActivityAccessibilityLayer(props) {
+  const { channelId, activityName, children } = props;
+  const styles = useStyles();
+  const [accessibilityViewIsModal, setState] = useState(false);
+  const ref = useRef(null);
+  const callback = useCallback(() => {
+    setState(true);
+  }, []);
+  const callback2 = useCallback(() => {
+    setState(false);
+    setAccessibilityFocus({
+      ref,
+      delay: 300
+    });
+  }, []);
+  const accessibilityLabel = activityName != null ? intl.formatToPlainString(t.XSfwGL, {
+    name: activityName
+  }) : intl.string(t.KYNi2m);
+  const r75 = [<AccessibilityView nativeID={`voice-panel-activity-${channelId}`} accessibilityViewIsModal={accessibilityViewIsModal} onAccessibilityEscape={accessibilityViewIsModal ? callback2 : void 0} accessibilityElementsHidden={!accessibilityViewIsModal} importantForAccessibility={accessibilityViewIsModal ? "auto" : "no-hide-descendants"} style={styles.fill}>{children}</AccessibilityView>, ,];
+  let importantForAccessibility = "auto";
+  const props2 = {
+    ref,
+    style: StyleSheet.absoluteFill,
+    pointerEvents: accessibilityViewIsModal ? "none" : "auto",
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityLabel,
+    accessibilityHint: intl.string(t["8DaKO6"]),
+    accessibilityElementsHidden: accessibilityViewIsModal,
+    importantForAccessibility: null,
+    onPress: null
+  };
+  if (accessibilityViewIsModal) {
+    importantForAccessibility = "no-hide-descendants";
+  }
+  props2.importantForAccessibility = importantForAccessibility;
+  props2.onPress = callback;
+  r75[1] = <Pressable {...props2} />;
+  return <View style={styles.fill}>{r75}</View>;
+};
+useStyles = createStyles({
+  fill: {
+    flex: 1
+  }
+});
+export default function ActivityAccessibilityLayer(props) {
+  const { isActivityFocused, ...props2 } = props;
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  return IS_IOS && (isScreenReaderEnabled && isActivityFocused) ? <FocusedActivityAccessibilityLayer {...props2} /> : props2.children;
+};

modules/voice_panel/native/card/DominantColorUtils.tsx

@@ -0,0 +1,128 @@
+// Metro module 8054 (f8055).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import { useRef, useEffect, useState } from "react";
+import LRUCache from "../../../../_bundle/LRUCache";
+import { hexToRgb } from "../../../../utils/ColorUtils";
+import Module712 from "../../../../_bundle/Module712";
+function $mk79771($env) {
+  return () => $mk105580($env);
+}
+function $mk79772($env) {
+  return () => {
+    const r3 = $env;
+    const uri = r3[0];
+    const r5 = uri != null ? $env.$parent[7].get(uri) : void 0;
+    let env26099 = {
+      $parent: $env
+    };
+    env26099[0] = r5;
+    if (uri != null) {
+      if (r5 == null) {
+        const r17 = $env.$parent;
+        const r7 = r17[8];
+        let r19 = r7.get(uri);
+        if (r19 == null) {
+          let r20 = uri;
+          if (typeof r20 !== "number") {
+            r20 = uri == null ? null : uri.trim() !== "" ? {
+              uri
+            } : null;
+          }
+          r19 = r20;
+        }
+        r7.set(uri, r19);
+        const r26 = r19;
+        if (r26 != null) {
+          (typeof r26 === "number" ? r17[5].ImageManager.getDominantColorsLocalAsset(r17[6].resolveAssetSource(r26)) : r17[5].ImageManager.getDominantColors(r17[6].resolveAssetSource(r26))).then($mk105581(r3)).catch(() => {});
+        }
+      } else {
+        (0, r3[2])((a0) => {
+          let r5 = env26099[0];
+          if (r5 !== a0) {
+            const r3 = env26099.$parent.$parent;
+            if ((0, r3[1])(r3[2][6])(r5, a0)) {
+              r5 = a0;
+            }
+          } else {
+            r5 = a0;
+          }
+          return r5;
+        });
+      }
+    }
+  };
+}
+function $mk105580($env) {
+  return () => {
+    $env[1].current = false;
+  };
+}
+function $mk105581($env) {
+  return (a0) => {
+    const r2 = $env;
+    const r4 = $env.$parent;
+    const r8 = (0, r4[3])(a0[0], 3);
+    const r9 = {
+      r: r8[0],
+      g: r8[1],
+      b: r8[2]
+    };
+    r4[7].set(r2[0], r9);
+    if (r2[1].current) {
+      (0, r2[2])(r9);
+    }
+  };
+}
+let env5105 = {};
+const c5105_7 = new LRUCache({
+  max: 1000
+});
+const c5105_8 = new LRUCache({
+  max: 1000
+});
+export function getCachedSourceFromURI(a0) {
+  let r10 = c5105_8.get(a0);
+  if (r10 == null) {
+    r10 = typeof a0 !== "number" ? a0 == null ? null : a0.trim() !== "" ? {
+      uri: a0
+    } : null : a0;
+  }
+  c5105_8.set(a0, r10);
+  return r10;
+}
+export function useDominantRGBFromImage(a0) {
+  let env16222;
+  const r5 = env16222 = {
+    $parent: env5105
+  };
+  env16222[0] = a0;
+  env16222[1] = useRef(true);
+  useEffect($mk79771(r5), []);
+  let r19 = a0 != null ? c5105_7.get(a0) : void 0;
+  if (r19 == null) {
+    r19 = hexToRgb(Module712.unsafe_rawColors.PRIMARY_800);
+  }
+  const r31 = _slicedToArray(useState(r19), 2);
+  const r32 = r31[0];
+  env16222[2] = r31[1];
+  useEffect($mk79772(r5), [a0]);
+  return r32;
+}
+export function useDominantColorFromImage(a0) {
+  let env16223;
+  const r5 = env16223 = {
+    $parent: env5105
+  };
+  env16223[0] = a0;
+  env16223[1] = useRef(true);
+  useEffect($mk79771(r5), []);
+  let r26 = a0 != null ? c5105_7.get(a0) : void 0;
+  if (r26 == null) {
+    r26 = hexToRgb(Module712.unsafe_rawColors.PRIMARY_800);
+  }
+  const r38 = _slicedToArray(useState(r26), 2);
+  const r39 = r38[0];
+  env16223[2] = r38[1];
+  useEffect($mk79772(r5), [a0]);
+  return `rgb(${r39.r}, ${r39.g}, ${r39.b})`;
+}

modules/voice_panel/native/card/VoicePanelAnimatedActivityCard.tsx

@@ -0,0 +1,336 @@
+// Metro module 15968 (f15969).
+import * as Module19 from "react";
+import { useState, useContext, useMemo, useEffect, useCallback, useLayoutEffect } from "react";
+import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
+import ChannelCallLifecycleStore from "../../../video_calls/native/ChannelCallLifecycleStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import { IS_IOS, VoicePanelModes } from "../../VoicePanelConstants";
+import { VoicePanelControlsModes } from "../controls/VoicePanelControlsConstants";
+import { ThemeTypes } from "../../../../Constants";
+import { ACTIVITY_PORTRAIT_ASPECT_RATIO, ActivityLayoutMode, OrientationLockState } from "../../../activities/Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import useAnimatedKeyboardHeight from "../../../keyboard/native/useAnimatedKeyboardHeight";
+import { useStateFromStores, useStateFromStoresObject } from "../../../../_bundle/Module589";
+import { useActivityShelfItemData } from "../../../activities/useActivityShelfItemData";
+import { fetchShelf } from "../../../activities/EmbeddedActivitiesActionCreators";
+import useGetOrFetchApplications from "../../../applications/useGetOrFetchApplications";
+import useCurrentEmbeddedApplication from "../../../activities/utils/useCurrentEmbeddedApplication";
+import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import { useAnalyticsContext } from "../../../../hooks/analytics";
+import { isActivityParticipantCurrentUserCurrentSession } from "../../../activities/isActivityParticipantCurrentUserCurrentSession";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useAnimatedReaction, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import { getEmbeddedActivityParticipantId } from "../../../calls/ChannelRTCParticipants";
+import { Gesture, GestureDetector } from "../../../../_bundle/Module5273";
+import { getWindowDimensions } from "../../../screen/useWindowDimensions.native";
+import { getIsTabletActivitySurface } from "../../../activities/native/getDefaultOrientationLockState";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import ActivityAccessibilityLayer from "./ActivityAccessibilityLayer";
+import EmbeddedActivityView from "../../../activities/native/EmbeddedActivityView";
+import ActivitiesDebugOverlay from "../../../activities/native/ActivitiesDebugOverlay";
+import ActivityItemMissingCard from "../controls/activities/ActivityItemMissingCard";
+import ActivityShelfItem from "../controls/activities/ActivityShelfItem";
+import { ThemeContextProvider } from "../../../../_bundle/Module3901";
+let useStyles, __initData, __initData2, __initData3, __initData4, __initData5, __initData6, __initData7, __initData8;
+const VoicePanelAnimatedActivityCardInner = function VoicePanelAnimatedActivityCardInner(props) {
+  let guild_id, c22661_13, gridOrientationLockState, focusedOrientationLockState, c22661_16, callback, state, setState2, embeddedActivityParticipantId, callback2, setState3, callback3, isTabletActivitySurface, backgroundColor;
+  const { applicationId, sharedVisible, layout } = props;
+  guild_id = void 0;
+  c22661_13 = void 0;
+  gridOrientationLockState = void 0;
+  focusedOrientationLockState = void 0;
+  c22661_16 = void 0;
+  callback = void 0;
+  state = void 0;
+  setState2 = void 0;
+  embeddedActivityParticipantId = void 0;
+  callback2 = void 0;
+  setState3 = void 0;
+  callback3 = void 0;
+  isTabletActivitySurface = void 0;
+  backgroundColor = void 0;
+  const styles = useStyles();
+  const [key, setState] = useState(0);
+  const context = useContext(VoicePanelStateContext);
+  const { channelId, focused, layoutManager, mode, windowDimensions, hideControls, controlsSpecs } = context;
+  const animatedKeyboardHeight = useAnimatedKeyboardHeight();
+  let c22661_10 = animatedKeyboardHeight;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  const memo = useMemo(() => ({
+    channel: stateFromStores,
+    type: "channel"
+  }), [stateFromStores]);
+  guild_id = stateFromStores?.guild_id;
+  let r65 = stateFromStores?.guild_id;
+  if (r65 == null) {
+    r65 = null;
+  }
+  const activityShelfItemData = useActivityShelfItemData(r65, applicationId);
+  useEffect(() => {
+    fetchShelf({
+      guildId: guild_id
+    });
+  }, [guild_id]);
+  const [application] = useGetOrFetchApplications([applicationId]);
+  c22661_13 = application;
+  const stateFromStoresObject = useStateFromStoresObject([EmbeddedActivitiesStore], () => ({
+    gridOrientationLockState: EmbeddedActivitiesStore.getGridOrientationLockStateForApp(applicationId),
+    focusedOrientationLockState: EmbeddedActivitiesStore.getOrientationLockStateForApp(applicationId)
+  }), [applicationId]);
+  gridOrientationLockState = stateFromStoresObject.gridOrientationLockState;
+  focusedOrientationLockState = stateFromStoresObject.focusedOrientationLockState;
+  const currentEmbeddedApplication = useCurrentEmbeddedApplication();
+  const stateFromStores2 = useStateFromStores([EmbeddedActivitiesStore], () => EmbeddedActivitiesStore.getEmbeddedActivitiesForChannel(channelId).find((item) => item.applicationId === c22661_13?.id));
+  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.ACTIVITY_TILE).analyticsLocations;
+  const analyticsContext = useAnalyticsContext();
+  let hasJoined = currentEmbeddedApplication != null && currentEmbeddedApplication.id === application?.id;
+  if (!hasJoined) {
+    const r103 = stateFromStores2 == null;
+    let r104 = void 0;
+    if (!r103) {
+      const participants = stateFromStores2.participants;
+      r104 = participants == null ? void 0 : participants.find((participant) => isActivityParticipantCurrentUserCurrentSession(participant));
+    }
+    hasJoined = r104 != null;
+  }
+  c22661_16 = hasJoined;
+  callback = useCallback(() => {
+    if (c22661_16) {
+      setState((prevState) => prevState + 1);
+    }
+  }, [hasJoined]);
+  const q = () => ({
+    visible: sharedVisible.get(),
+    mode: mode.get()
+  });
+  q.__closure = {
+    sharedVisible,
+    mode
+  };
+  q.__workletHash = 2072430391020;
+  q.__initData = __initData;
+  const r119 = function({ visible, mode: mode2 }, a1) {
+    if (visible === 1 && a1 != null && a1.visible === 0 || mode2 !== VoicePanelModes.PIP && a1?.mode === VoicePanelModes.PIP) {
+      _ReanimatedRexport.runOnJS(callback)();
+    }
+  };
+  r119.__closure = {
+    VoicePanelModes,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    incrementActivityKey: callback
+  };
+  r119.__workletHash = 9732208421749;
+  r119.__initData = __initData2;
+  useAnimatedReaction(q, r119);
+  [state, setState2] = useState(false);
+  embeddedActivityParticipantId = stateFromStores2 != null ? getEmbeddedActivityParticipantId({
+    applicationId: stateFromStores2.applicationId,
+    instanceId: stateFromStores2.compositeInstanceId
+  }) : null;
+  const de = function de() {
+    return embeddedActivityParticipantId != null && focused.get()?.id === embeddedActivityParticipantId && mode.get() === VoicePanelModes.PANEL;
+  };
+  de.__closure = {
+    activityParticipantId: embeddedActivityParticipantId,
+    focused,
+    mode,
+    VoicePanelModes
+  };
+  de.__workletHash = 2833167890519;
+  de.__initData = __initData3;
+  const re = function re(a0, a1) {
+    if (a0 !== a1) {
+      _ReanimatedRexport.runOnJS(setState2)(a0);
+    }
+  };
+  re.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    setIsActivityFocused: setState2
+  };
+  re.__workletHash = 12291590020155;
+  re.__initData = __initData4;
+  useAnimatedReaction(de, re);
+  const memo2 = useMemo(() => Gesture.Tap(), []);
+  callback2 = useCallback((a0, a1, a2) => {
+    L11: {
+      if (a2) {
+        if (OrientationLockState.LANDSCAPE === a1) {
+          layoutManager.setTargetAspectRatio(applicationId, "landscape");
+        } else if (OrientationLockState.PORTRAIT === a1) {
+          layoutManager.setTargetAspectRatio(applicationId, "portrait");
+        } else {
+          if (OrientationLockState.UNLOCKED !== a1 && a1 !== null) {
+            break L11;
+          }
+          layoutManager.setTargetAspectRatio(applicationId, a0 ? "landscape" : "portrait");
+        }
+      } else {
+        layoutManager.setTargetAspectRatio(applicationId, "square");
+      }
+    }
+  }, [layoutManager, applicationId]);
+  useLayoutEffect(() => {
+    const windowDimensions2 = getWindowDimensions();
+    callback2(windowDimensions2.width > windowDimensions2.height, gridOrientationLockState, c22661_16);
+  }, [callback2, windowDimensions, gridOrientationLockState, hasJoined]);
+  let itemDimensions;
+  [itemDimensions, setState3] = useState(layoutManager.getDefaultTargetDimensions());
+  callback3 = useCallback(() => {
+    setState3(layoutManager.getDefaultTargetDimensions());
+  }, [layoutManager, setState3]);
+  const Se = () => windowDimensions.get();
+  Se.__closure = {
+    windowDimensions
+  };
+  Se.__workletHash = 12220613662042;
+  Se.__initData = __initData5;
+  const he = function he(a0, a1) {
+    if (a0.landscape !== a1?.landscape) {
+      _ReanimatedRexport.runOnJS(callback2)(a0.landscape, gridOrientationLockState, c22661_16);
+    }
+    _ReanimatedRexport.runOnJS(callback3)();
+  };
+  he.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    handleTargetAspectRatioParams: callback2,
+    gridOrientationLockState,
+    hasJoined,
+    updateNotJoinedActivityDimensions: callback3
+  };
+  he.__workletHash = 13125606009235;
+  he.__initData = __initData6;
+  useAnimatedReaction(Se, he);
+  isTabletActivitySurface = getIsTabletActivitySurface();
+  backgroundColor = styles.activityContainerBackground.backgroundColor;
+  const fe = function fe() {
+    let paddingHorizontal, paddingVertical;
+    const r8 = IS_IOS ? c22661_10.get() : 0;
+    const landscape = windowDimensions.get().landscape;
+    const width = windowDimensions.get().width;
+    const height = windowDimensions.get().height;
+    let r24 = isTabletActivitySurface;
+    const r10 = (isTabletActivitySurface ? focusedOrientationLockState === OrientationLockState.LANDSCAPE : isTabletActivitySurface) && !landscape;
+    if (isTabletActivitySurface) {
+      r24 = focusedOrientationLockState === OrientationLockState.PORTRAIT;
+    }
+    if (r24) {
+      r24 = landscape;
+    }
+    if (r10) {
+      paddingVertical = (height - width * ACTIVITY_PORTRAIT_ASPECT_RATIO) / 2;
+      paddingHorizontal = 0;
+    } else {
+      paddingHorizontal = 0;
+      paddingVertical = 0;
+      if (r24) {
+        paddingHorizontal = (width - height * ACTIVITY_PORTRAIT_ASPECT_RATIO) / 2;
+        paddingVertical = 0;
+      }
+    }
+    const flex = state ? 0 : 1;
+    let height2 = "auto";
+    const width2 = state ? width : "auto";
+    if (state) {
+      height2 = height - r8;
+    }
+    return {
+      flex,
+      backgroundColor,
+      paddingVertical,
+      paddingHorizontal,
+      width: width2,
+      height: height2,
+      maxHeight: "100%",
+      maxWidth: "100%"
+    };
+  };
+  fe.__closure = {
+    IS_IOS,
+    animatedKeyboardHeight,
+    windowDimensions,
+    isTabletActivitySurface,
+    focusedOrientationLockState,
+    OrientationLockState,
+    ACTIVITY_PORTRAIT_ASPECT_RATIO,
+    isActivityFocused: state,
+    backgroundColor
+  };
+  fe.__workletHash = 13392050824169;
+  fe.__initData = __initData7;
+  const animatedStyle = useAnimatedStyle(fe);
+  const stateFromStores3 = useStateFromStores([ChannelCallLifecycleStore], () => ChannelCallLifecycleStore.getShowActivitiesDebugOverlay());
+  const memo3 = useMemo(() => {
+    const r15 = Gesture.Manual().enabled(state);
+    const t = function t(a0, a1) {
+      a1.fail();
+      if (controlsSpecs.get().mode !== VoicePanelControlsModes.HIDDEN) {
+        _ReanimatedRexport.runOnJS(hideControls)({
+          debounce: true
+        });
+      }
+    };
+    t.__closure = {
+      controlsSpecs,
+      VoicePanelControlsModes,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      hideControls
+    };
+    t.__workletHash = 14924492513532;
+    t.__initData = __initData8;
+    return r15.onTouchesDown(t);
+  }, [controlsSpecs, state, hideControls]);
+  if (stateFromStores == null) {
+    return null;
+  }
+  const layoutMode = state ? ActivityLayoutMode.FOCUSED : ActivityLayoutMode.GRID;
+  return <AnalyticsLocationProvider value={analyticsLocations}>
+    {hasJoined ? <GestureDetector gesture={memo3}>
+      <ReanimatedNativeView layout={layout} pointerEvents={state ? "auto" : "none"} style={animatedStyle}>
+        <ActivityAccessibilityLayer channelId={channelId} activityName={application?.name} isActivityFocused={state}>
+          <EmbeddedActivityView key={key} channel={stateFromStores} layoutMode={layoutMode} />
+        </ActivityAccessibilityLayer>
+        {stateFromStores3 ? <ActivitiesDebugOverlay /> : null}
+      </ReanimatedNativeView>
+    </GestureDetector> : activityShelfItemData == null ? <ActivityItemMissingCard activity={stateFromStores2} application={application} /> : <GestureDetector gesture={memo2}>
+      <ActivityShelfItem context={memo} guildId={stateFromStores.guild_id} activityItem={activityShelfItemData} locationObject={analyticsContext.location} itemDimensions={itemDimensions} disableBadges />
+    </GestureDetector>}
+  </AnalyticsLocationProvider>;
+};
+useStyles = createStyles({
+  activityContainerBackground: {
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  }
+});
+__initData = {
+  code: "function VoicePanelAnimatedActivityCardTsx1(){const{sharedVisible,mode}=this.__closure;return{visible:sharedVisible.get(),mode:mode.get()};}"
+};
+__initData2 = {
+  code: "function VoicePanelAnimatedActivityCardTsx2({visible:visible,mode:mode},prev){const{VoicePanelModes,runOnJS,incrementActivityKey}=this.__closure;if(visible===1&&prev!=null&&prev.visible===0||mode!==VoicePanelModes.PIP&&(prev===null||prev===void 0?void 0:prev.mode)===VoicePanelModes.PIP){runOnJS(incrementActivityKey)();}}"
+};
+__initData3 = {
+  code: "function VoicePanelAnimatedActivityCardTsx3(){const{activityParticipantId,focused,mode,VoicePanelModes}=this.__closure;var _focused$get;return activityParticipantId!=null&&((_focused$get=focused.get())===null||_focused$get===void 0?void 0:_focused$get.id)===activityParticipantId&&mode.get()===VoicePanelModes.PANEL;}"
+};
+__initData4 = {
+  code: "function VoicePanelAnimatedActivityCardTsx4(isActivityFocused,wasActivityFocused){const{runOnJS,setIsActivityFocused}=this.__closure;if(isActivityFocused!==wasActivityFocused){runOnJS(setIsActivityFocused)(isActivityFocused);}}"
+};
+__initData5 = {
+  code: "function VoicePanelAnimatedActivityCardTsx5(){const{windowDimensions}=this.__closure;return windowDimensions.get();}"
+};
+__initData6 = {
+  code: "function VoicePanelAnimatedActivityCardTsx6(windowDimensionsValue,prevWindowDimensionsValue){const{runOnJS,handleTargetAspectRatioParams,gridOrientationLockState,hasJoined,updateNotJoinedActivityDimensions}=this.__closure;if(windowDimensionsValue.landscape!==(prevWindowDimensionsValue===null||prevWindowDimensionsValue===void 0?void 0:prevWindowDimensionsValue.landscape)){runOnJS(handleTargetAspectRatioParams)(windowDimensionsValue.landscape,gridOrientationLockState,hasJoined);}runOnJS(updateNotJoinedActivityDimensions)();}"
+};
+__initData7 = {
+  code: "function VoicePanelAnimatedActivityCardTsx7(){const{IS_IOS,animatedKeyboardHeight,windowDimensions,isTabletActivitySurface,focusedOrientationLockState,OrientationLockState,ACTIVITY_PORTRAIT_ASPECT_RATIO,isActivityFocused,backgroundColor}=this.__closure;const keyboardHeight=IS_IOS?animatedKeyboardHeight.get():0;const isScreenLandscape=windowDimensions.get().landscape;const screenWidth=windowDimensions.get().width;const screenHeight=windowDimensions.get().height;const shouldLetterBox=isTabletActivitySurface&&focusedOrientationLockState===OrientationLockState.LANDSCAPE&&!isScreenLandscape;const shouldPillarBox=isTabletActivitySurface&&focusedOrientationLockState===OrientationLockState.PORTRAIT&&isScreenLandscape;let containerPaddingVertical=0;let containerPaddingHorizontal=0;if(shouldLetterBox){containerPaddingVertical=(screenHeight-screenWidth*ACTIVITY_PORTRAIT_ASPECT_RATIO)/2;}else if(shouldPillarBox){containerPaddingHorizontal=(screenWidth-screenHeight*ACTIVITY_PORTRAIT_ASPECT_RATIO)/2;}return{flex:isActivityFocused?0:1,backgroundColor:backgroundColor,paddingVertical:containerPaddingVertical,paddingHorizontal:containerPaddingHorizontal,width:isActivityFocused?screenWidth:'auto',height:isActivityFocused?screenHeight-keyboardHeight:'auto',maxHeight:'100%',maxWidth:'100%'};}"
+};
+__initData8 = {
+  code: "function VoicePanelAnimatedActivityCardTsx8(event,manager){const{controlsSpecs,VoicePanelControlsModes,runOnJS,hideControls}=this.__closure;manager.fail();if(controlsSpecs.get().mode!==VoicePanelControlsModes.HIDDEN){runOnJS(hideControls)({debounce:true});}}"
+};
+const r63 = Module19.memo(function VoicePanelAnimatedActivityCard(props) {
+  return <ThemeContextProvider theme={ThemeTypes.DARK}>
+    <VoicePanelAnimatedActivityCardInner {...props} />
+  </ThemeContextProvider>;
+});
+export default r63;

modules/voice_panel/native/card/VoicePanelCTACardCallerDisconnected.tsx

@@ -0,0 +1,107 @@
+// Metro module 15966 (f15967).
+import { memo, useContext } from "react";
+import AuthenticationStore from "../../../../stores/AuthenticationStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import UserStore from "../../../../stores/UserStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { useStateFromStoresArray } from "../../../../_bundle/Module589";
+import NicknameUtils from "../../../../utils/NicknameUtils";
+import NativeView from "../../../core/native/NativeView";
+import FastImage from "../../../../components_native/common/FastImage";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+const useStyles = createStyles({
+  container: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Module712.colors.VOICE_VIDEO_VIDEO_TILE_BACKGROUND
+  },
+  avatarContainer: {
+    flexDirection: "row",
+    gap: 24
+  },
+  avatarWrapper: {
+    width: 80,
+    height: 80,
+    borderRadius: Module712.radii.round,
+    overflow: "hidden"
+  },
+  avatar: {
+    width: 80,
+    height: 80
+  },
+  disconnectedAvatar: {
+    opacity: 0.2
+  },
+  textContainer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    padding: 16,
+    width: "100%"
+  },
+  text: {
+    textAlign: "center"
+  }
+});
+const r49 = memo(function VoicePanelCTACardCallerDisconnected() {
+  const channelId = useContext(VoicePanelStateContext).channelId;
+  const styles = useStyles();
+  let r30 = ChannelStore.getChannel(channelId)?.recipients;
+  if (r30 == null) {
+    r30 = [];
+  }
+  const [r12] = r30;
+  let c22659_1 = r12;
+  const id = AuthenticationStore.getId();
+  const [uri, uri2, username] = useStateFromStoresArray([UserStore], () => {
+    const user = UserStore.getUser(id);
+    const user2 = UserStore.getUser(c22659_1);
+    return [user == null ? void 0 : user.getAvatarURL(void 0, 80), user2 == null ? void 0 : user2.getAvatarURL(void 0, 80), NicknameUtils.getName(void 0, channelId, user2)];
+  }, [channelId, id, r12]);
+  let r52 = uri != null;
+  if (r52) {
+    let source = uri;
+    if (typeof source !== "number") {
+      source = {
+        uri
+      };
+    }
+    r52 = <NativeView style={styles.avatarWrapper}>
+      <FastImage source={source} style={styles.avatar} />
+    </NativeView>;
+  }
+  const r62 = [r52, ,];
+  let r63 = uri2 != null;
+  if (r63) {
+    let source2 = uri2;
+    if (typeof source2 !== "number") {
+      source2 = {
+        uri: uri2
+      };
+    }
+    r63 = <NativeView style={styles.avatarWrapper}>
+      <FastImage source={source2} style={[styles.avatar, styles.disconnectedAvatar]} />
+    </NativeView>;
+  }
+  r62[1] = r63;
+  return <NativeView style={styles.container}>
+    <NativeView style={styles.avatarContainer}>{r62}</NativeView>
+    <NativeView style={styles.textContainer}>
+      <Text style={styles.text} variant="heading-sm/semibold" color="text-overlay-light">
+        {intl.string(t.WkAgPU)}
+      </Text>
+      {username != null && <Text style={styles.text} variant="text-xs/medium" color="text-overlay-light">
+        {intl.format(t.kXrAqz, {
+          username
+        })}
+      </Text>}
+    </NativeView>
+  </NativeView>;
+});
+export default r49;

modules/voice_panel/native/card/VoicePanelCardConstants.tsx

@@ -0,0 +1,18 @@
+// Metro module 10041 (f10042).
+import Module712 from "../../../../_bundle/Module712";
+export const CARD_SIZE = 165;
+export const CALL_TILE_GUTTER = 12;
+export const EDGE_GUTTER = 12;
+export function getCallTileGutter(enabledExperiments = []) {
+  return Module712.modules.mobile.VOICE_PANEL_GUTTER.resolve({
+    enabledExperiments
+  });
+}
+export function getEdgeGutter(enabledExperiments = []) {
+  return Module712.modules.mobile.VOICE_PANEL_GUTTER.resolve({
+    enabledExperiments
+  });
+}
+export const CARD_BACKGROUND_OPACITY_ANDROID = 0.32;
+export const VOICE_PANEL_CONTROLS_OPACITY_ANDROID = 0.54;
+export const VOICE_PANEL_CARD_INNER_PADDING = 8;

modules/voice_panel/native/card/VoicePanelCardFloatingControls.tsx

@@ -0,0 +1,620 @@
+// Metro module 15978 (f15979).
+import { useContext, memo, useCallback } from "react";
+import { Pressable, Platform } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
+import ApplicationStreamingStore from "../../../../stores/ApplicationStreamingStore";
+import RTCConnectionStore from "../../../../stores/RTCConnectionStore";
+import { MODE_CHANGE_PHYSICS, VoicePanelModes } from "../../VoicePanelConstants";
+import { VoicePanelControlsModes } from "../controls/VoicePanelControlsConstants";
+import { VOICE_PANEL_CARD_INNER_PADDING } from "./VoicePanelCardConstants";
+import { ThemeTypes } from "../../../../Constants";
+import { ParticipantTypes, VoicePlatforms } from "../../../calls/CallConstants";
+import ReanimatedRexport, { useAnimatedStyle, useSharedValue, useAnimatedReaction, useDerivedValue } from "../../../reanimated/ReanimatedRexport";
+import { Icon, IconSizes } from "../../../../design/void/native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import MobileVisualRefreshExperiment from "../../../themes/experiments/MobileVisualRefreshExperiment";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import Module15934 from "../../../../_bundle/Module15934";
+import Module15979 from "../../../../_bundle/Module15979";
+import Module10855 from "../../../../_bundle/Module10855";
+import Module15980 from "../../../../_bundle/Module15980";
+import useVoicePanelCardUserStateIcons, { VoicePanelCardUserStateIconType } from "../hooks/useVoicePanelCardUserStateIcons";
+import { VoiceXIcon } from "../../../../design/components/Icon/native/redesign/generated/VoiceXIcon";
+import { VideoIcon, MuteDeafenIcon } from "../shared/VoiceStateIcons";
+import NativeView from "../../../core/native/NativeView";
+import { CircleErrorIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
+import { intl, t } from "../../../../intl/index.native";
+import { MuteDeafenIconState } from "../utils/VoiceStateIconUtils";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import { isStableStreamParticipant, isStableActivityParticipant, isStableParticipantWithUser } from "../utils/useStableParticipant";
+import { stopStream } from "../../../../actions/StreamActionCreators";
+import { encodeStreamKey } from "../../../go_live/utils/StreamKeyUtils";
+import EmbeddedActivitiesNativeManager from "../../../activities/native/EmbeddedActivitiesNativeManager";
+import VoicePanelIconButton from "../shared/VoicePanelIconButton";
+import Module15981 from "../../../../_bundle/Module15981";
+import Module15982 from "../../../../_bundle/Module15982";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import getRandomNumberInRange from "../utils/getRandomNumberInRange";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import Module15983 from "../../../../_bundle/Module15983";
+import { ThemeContextProvider } from "../../../../_bundle/Module3901";
+import { useIsScreenReaderEnabled } from "../../../a11y/native/useIsScreenReaderEnabled.native";
+import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
+import showUserProfileActionSheet from "../../../user_profile/native/showUserProfileActionSheet";
+import { useIsUserSecureFramesVerified } from "../../../rtc/hooks/useIsSecureFramesVerified";
+import useDisplayNameStyles from "../../../display_name_styles/hooks/useDisplayNameStyles";
+import { useDisplayNameStylesFont } from "../../../display_name_styles/native/useDisplayNameStylesFont";
+import { Text } from "../../../../design/components/Text/native/Text";
+import GuildTag from "../../../guild_tag/native/GuildTag";
+import { ShieldLockIcon } from "../../../../design/components/Icon/native/redesign/generated/ShieldLockIcon";
+import useIsVoicePanelParticipantFocusable from "../utils/useIsVoicePanelParticipantFocusable";
+let AnimatedComponent, AnimatedComponent2, height, useStyles, __initData, AnimatedLabelIcon, __initData2, Component4, __initData3, Component5, RING_PHYSICS, __initData4, __initData5, __initData6, __initData7, __initData8, __initData9, Component, Component3, __initData10, __initData11, __initData12, __initData13, __initData14, Component2, __initData15;
+const StreamIcon = function StreamIcon(props) {
+  const voicePlatform = props.voicePlatform;
+  const styles = useStyles(MobileVisualRefreshExperiment("VoicePanelCardFloatingControls"));
+  const controlsSpecs = useContext(VoicePanelStateContext).controlsSpecs;
+  const r24 = function() {
+    const r2 = controlsSpecs.get().mode === VoicePanelControlsModes.HIDDEN;
+    return {
+      marginLeft: r2 ? 2 : 4,
+      marginRight: r2 ? 2 : 0
+    };
+  };
+  r24.__closure = {
+    controlsSpecs,
+    VoicePanelControlsModes,
+    GAP: 4
+  };
+  r24.__workletHash = 3270040588948;
+  r24.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(r24);
+  let source = Module15934;
+  if (voicePlatform === VoicePlatforms.XBOX) {
+    source = Module15979;
+  } else if (voicePlatform === VoicePlatforms.MOBILE) {
+    source = Module10855;
+  } else if (voicePlatform === VoicePlatforms.QUEST) {
+    source = Module15980;
+  }
+  return <AnimatedComponent source={source} style={[styles.iconWithoutBackground, animatedStyle]} />;
+};
+AnimatedLabelIcon = function AnimatedLabelIcon(props) {
+  const icon = props.icon;
+  const styles = useStyles(MobileVisualRefreshExperiment("VoicePanelCardFloatingControls"));
+  const type = icon.type;
+  if (VoicePanelCardUserStateIconType.STREAM_ICON === type) {
+    return <StreamIcon voicePlatform={icon.voicePlatform} />;
+  }
+  if (VoicePanelCardUserStateIconType.SPEAKER_MUTE_ICON === type) {
+    return <Pressable style={styles.speakerMuteIcon} hitSlop={12} onPress={icon.onPress}>
+      <VoiceXIcon style={styles.iconWithoutBackground} />
+    </Pressable>;
+  }
+  if (VoicePanelCardUserStateIconType.USER_VIDEO_ICON === type) {
+    return <Pressable style={styles.iconContainer} onPress={icon.onPress}>
+      <VideoIcon style={styles.icon} state={icon.videoIconState} />
+    </Pressable>;
+  }
+  if (VoicePanelCardUserStateIconType.MUTE_DEAFEN_ICON === type) {
+    return <NativeView style={styles.iconContainer}>
+      <Pressable onPress={icon.onPress} hitSlop={12}>
+        <MuteDeafenIcon style={styles.icon} state={icon.muteDeafenIconState} alwaysWhite />
+      </Pressable>
+    </NativeView>;
+  }
+  if (VoicePanelCardUserStateIconType.USER_DISCONNECTED_ICON === type) {
+    return <Pressable style={styles.iconContainer} onPress={icon.onPress}>
+      <CircleErrorIcon size="xs" color={Module712.colors.TEXT_FEEDBACK_WARNING} />
+    </Pressable>;
+  }
+};
+Platform;
+AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Icon);
+AnimatedComponent2 = ReanimatedRexport.createAnimatedComponent(Pressable);
+height = 28;
+useStyles = createStyles((a0) => ({
+  labelPositionContainer: {
+    position: "absolute",
+    left: 8,
+    right: 8,
+    bottom: 8,
+    justifyContent: "center",
+    alignItems: "center",
+    marginHorizontal: 8
+  },
+  labelOuterContainer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    borderRadius: a0 ? Module712.radii.sm : Module712.radii.round,
+    overflow: "hidden",
+    paddingHorizontal: 8,
+    backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT,
+    height,
+    gap: 4
+  },
+  initialIcons: {
+    display: "flex",
+    flexDirection: "row",
+    marginStart: -4,
+    marginEnd: -4
+  },
+  icon: {
+    width: 12,
+    height: 12,
+    tintColor: Module712.colors.WHITE
+  },
+  iconWithoutBackground: {
+    width: 16,
+    height: 16,
+    tintColor: Module712.colors.WHITE
+  },
+  iconContainer: {
+    width: 20,
+    height: 20,
+    borderRadius: Module712.radii.round,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  speakerMuteIcon: {
+    marginRight: 4
+  },
+  floatingContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    overflow: "hidden",
+    flexShrink: 1
+  },
+  floatingText: {
+    overflow: "hidden",
+    paddingStart: 4,
+    paddingEnd: 4,
+    flexShrink: 1,
+    lineHeight: 14
+  },
+  ringingIconContainer: {
+    position: "absolute",
+    top: 8,
+    right: 8,
+    padding: 6,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  },
+  ringingIcon: {
+    tintColor: Module712.colors.STATUS_POSITIVE
+  },
+  secureFramesIcon: {
+    marginEnd: -2
+  }
+}));
+__initData = {
+  code: "function VoicePanelCardFloatingControlsTsx1(){const{controlsSpecs,VoicePanelControlsModes,GAP}=this.__closure;const hidden=controlsSpecs.get().mode===VoicePanelControlsModes.HIDDEN;return{marginLeft:hidden?2:GAP,marginRight:hidden?2:0};}"
+};
+__initData2 = {
+  code: "function VoicePanelCardFloatingControlsTsx2(){const{controlsHidden,FLOATING_BAR_HEIGHT,VOICE_PANEL_CARD_INNER_PADDING,withSpring,MODE_CHANGE_PHYSICS}=this.__closure;const hidden=controlsHidden.get();return{position:'absolute',top:hidden?-(FLOATING_BAR_HEIGHT+VOICE_PANEL_CARD_INNER_PADDING*2):VOICE_PANEL_CARD_INNER_PADDING,left:VOICE_PANEL_CARD_INNER_PADDING,opacity:withSpring(hidden?0:1,MODE_CHANGE_PHYSICS),zIndex:1};}"
+};
+Component4 = memo(function({ participant, controlsHidden: controlsHidden5, isSelf, layout }) {
+  const guildId = useContext(VoicePanelStateContext).guildId;
+  const controlsHidden = controlsHidden5;
+  const r24 = function n() {
+    const r7 = controlsHidden.get();
+    return {
+      position: "absolute",
+      top: r7 ? -(height + 2 * VOICE_PANEL_CARD_INNER_PADDING) : VOICE_PANEL_CARD_INNER_PADDING,
+      left: VOICE_PANEL_CARD_INNER_PADDING,
+      opacity: _spring.withSpring(r7 ? 0 : 1, MODE_CHANGE_PHYSICS),
+      zIndex: 1
+    };
+  };
+  r24.__closure = {
+    controlsHidden,
+    FLOATING_BAR_HEIGHT: height,
+    VOICE_PANEL_CARD_INNER_PADDING,
+    withSpring: _spring.withSpring,
+    MODE_CHANGE_PHYSICS
+  };
+  r24.__workletHash = 4080439075039;
+  r24.__initData = __initData2;
+  const animatedStyle = useAnimatedStyle(r24);
+  return <VoicePanelIconButton icon={Module15981} onPress={useCallback(() => {
+    if (isStableStreamParticipant(participant)) {
+      const streamForUser = ApplicationStreamingStore.getStreamForUser(participant.user.id, guildId);
+      if (streamForUser == null) {
+        return void 0;
+      }
+      stopStream(encodeStreamKey(streamForUser));
+    }
+    if (isStableActivityParticipant(participant)) {
+      EmbeddedActivitiesNativeManager.leaveActivity({
+        location: EmbeddedActivitiesStore.getCurrentEmbeddedActivity()?.location,
+        applicationId: participant.applicationId
+      });
+    }
+  }, [guildId, participant])} style={animatedStyle} layout={layout} accessibilityLabel={isStableActivityParticipant(participant) ? intl.string(t["R/FK4A"]) : isSelf ? intl.string(t.S5anIc) : intl.string(t.q3O3J8)} />;
+});
+__initData3 = {
+  code: "function VoicePanelCardFloatingControlsTsx3(){const{controlsHidden,mode,VoicePanelModes,FLOATING_BAR_HEIGHT,VOICE_PANEL_CARD_INNER_PADDING,withSpring,MODE_CHANGE_PHYSICS}=this.__closure;const hidden=controlsHidden.get()||mode.get()===VoicePanelModes.PIP;return{position:'absolute',top:hidden?-(FLOATING_BAR_HEIGHT+VOICE_PANEL_CARD_INNER_PADDING*2):VOICE_PANEL_CARD_INNER_PADDING,right:VOICE_PANEL_CARD_INNER_PADDING,opacity:withSpring(hidden?0:1,MODE_CHANGE_PHYSICS),zIndex:1};}"
+};
+Component5 = memo(function({ participantId, controlsHidden: controlsHidden2, targetName, isActivityParticipant, layout }) {
+  const context = useContext(VoicePanelStateContext);
+  const { setFocused, mode } = context;
+  const callback = useCallback(() => {
+    setFocused(participantId);
+  }, [setFocused, participantId]);
+  const r28 = function _() {
+    const r7 = controlsHidden2.get() || mode.get() === VoicePanelModes.PIP;
+    return {
+      position: "absolute",
+      top: r7 ? -(height + 2 * VOICE_PANEL_CARD_INNER_PADDING) : VOICE_PANEL_CARD_INNER_PADDING,
+      right: VOICE_PANEL_CARD_INNER_PADDING,
+      opacity: _spring.withSpring(r7 ? 0 : 1, MODE_CHANGE_PHYSICS),
+      zIndex: 1
+    };
+  };
+  r28.__closure = {
+    controlsHidden: controlsHidden2,
+    mode,
+    VoicePanelModes,
+    FLOATING_BAR_HEIGHT: height,
+    VOICE_PANEL_CARD_INNER_PADDING,
+    withSpring: _spring.withSpring,
+    MODE_CHANGE_PHYSICS
+  };
+  r28.__workletHash = 12421495364262;
+  r28.__initData = __initData3;
+  return <VoicePanelIconButton icon={Module15982} onPress={callback} style={useAnimatedStyle(r28)} layout={layout} accessibilityLabel={isActivityParticipant ? intl.string(t["3ejJer"]) : targetName != null ? intl.formatToPlainString(t.OervdV, {
+    targetName
+  }) : intl.string(t["77cRN4"])} />;
+});
+RING_PHYSICS = {
+  mass: 0.1,
+  stiffness: 400,
+  overshootClamping: true
+};
+__initData4 = {
+  code: "function VoicePanelCardFloatingControlsTsx4(){const{flip}=this.__closure;return flip.get();}"
+};
+__initData5 = {
+  code: "function VoicePanelCardFloatingControlsTsx5(flipped){const{angle,withSpring,getRandomNumberInRange,RING_PHYSICS,flip}=this.__closure;if(flipped){angle.set(withSpring(getRandomNumberInRange(45-10,45+10),RING_PHYSICS,'respect-motion-settings',function(finished){if(!finished)return;flip.set(!flip.get());}));}else{angle.set(withSpring(getRandomNumberInRange(0-10,0+10),RING_PHYSICS,'respect-motion-settings',function(finished){if(!finished)return;flip.set(!flip.get());}));}}"
+};
+__initData6 = {
+  code: "function VoicePanelCardFloatingControlsTsx6(finished){const{flip}=this.__closure;if(!finished)return;flip.set(!flip.get());}"
+};
+__initData7 = {
+  code: "function VoicePanelCardFloatingControlsTsx7(finished){const{flip}=this.__closure;if(!finished)return;flip.set(!flip.get());}"
+};
+__initData8 = {
+  code: "function VoicePanelCardFloatingControlsTsx8(){const{controlsHidden,FLOATING_BAR_HEIGHT,VOICE_PANEL_CARD_INNER_PADDING}=this.__closure;return{top:controlsHidden.get()?-(FLOATING_BAR_HEIGHT+VOICE_PANEL_CARD_INNER_PADDING*2):0};}"
+};
+__initData9 = {
+  code: "function VoicePanelCardFloatingControlsTsx9(){const{angle}=this.__closure;return{transform:[{rotate:angle.get()+\"deg\"}]};}"
+};
+Component = memo(function({ controlsHidden: controlsHidden3 }) {
+  const styles = useStyles(MobileVisualRefreshExperiment("VoicePanelCardFloatingControls"));
+  const sharedValue = useSharedValue(true);
+  const sharedValue2 = useSharedValue(0);
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const r36 = () => sharedValue.get();
+  r36.__closure = {
+    flip: sharedValue
+  };
+  r36.__workletHash = 7663309832237;
+  r36.__initData = __initData4;
+  const r40 = function n(a0) {
+    if (a0) {
+      const randomNumberInRange2 = getRandomNumberInRange(35, 55);
+      const r35 = function(a0) {
+        if (a0) {
+          sharedValue.set(!sharedValue.get());
+        }
+      };
+      r35.__closure = {
+        flip: sharedValue
+      };
+      r35.__workletHash = 17264907521028;
+      r35.__initData = __initData6;
+      sharedValue2.set(_spring.withSpring(randomNumberInRange2, RING_PHYSICS, "respect-motion-settings", r35));
+    } else {
+      const randomNumberInRange = getRandomNumberInRange(-10, 10);
+      const r8 = function n(a0) {
+        if (a0) {
+          sharedValue.set(!sharedValue.get());
+        }
+      };
+      r8.__closure = {
+        flip: sharedValue
+      };
+      r8.__workletHash = 1799436949573;
+      r8.__initData = __initData7;
+      sharedValue2.set(_spring.withSpring(randomNumberInRange, RING_PHYSICS, "respect-motion-settings", r8));
+    }
+  };
+  r40.__closure = {
+    angle: sharedValue2,
+    withSpring: _spring.withSpring,
+    getRandomNumberInRange,
+    RING_PHYSICS,
+    flip: sharedValue
+  };
+  r40.__workletHash = 15646860695268;
+  r40.__initData = __initData5;
+  useAnimatedReaction(r36, r40);
+  const r52 = () => ({
+    top: controlsHidden3.get() ? -(height + 2 * VOICE_PANEL_CARD_INNER_PADDING) : 0
+  });
+  r52.__closure = {
+    controlsHidden: controlsHidden3,
+    FLOATING_BAR_HEIGHT: height,
+    VOICE_PANEL_CARD_INNER_PADDING
+  };
+  r52.__workletHash = 726627995932;
+  r52.__initData = __initData8;
+  const animatedStyle = useAnimatedStyle(r52);
+  const C = () => ({
+    transform: [{
+      rotate: `${sharedValue2.get()}deg`
+    }]
+  });
+  C.__closure = {
+    angle: sharedValue2
+  };
+  C.__workletHash = 791392364030;
+  C.__initData = __initData9;
+  const animatedStyle2 = useAnimatedStyle(C);
+  return <ReanimatedNativeView style={[animatedStyle, styles.ringingIconContainer]}>
+    <ReanimatedNativeView style={stateFromStores ? !stateFromStores : animatedStyle2} pointerEvents="none">
+      <Icon source={Module15983} size={IconSizes.SMALL_20} style={styles.ringingIcon} />
+    </ReanimatedNativeView>
+  </ReanimatedNativeView>;
+});
+Component3 = memo(function(a0) {
+  return <ThemeContextProvider theme={ThemeTypes.LIGHT}>
+    <Component controlsHidden={a0.controlsHidden} />
+  </ThemeContextProvider>;
+});
+__initData10 = {
+  code: "function VoicePanelCardFloatingControlsTsx10(){const{hasHiddenVisibleIcon,focused,connected,mode,VoicePanelModes,controlsHidden}=this.__closure;const showIcon=hasHiddenVisibleIcon&&focused.get()==null;return!connected.get()||mode.get()===VoicePanelModes.PIP||!showIcon&&controlsHidden.get();}"
+};
+__initData11 = {
+  code: "function VoicePanelCardFloatingControlsTsx11(){const{isPillHidden}=this.__closure;return isPillHidden.get();}"
+};
+__initData12 = {
+  code: "function VoicePanelCardFloatingControlsTsx12(hidden){const{pillOpacity,withSpring,MODE_CHANGE_PHYSICS}=this.__closure;pillOpacity.set(withSpring(hidden?0:1,MODE_CHANGE_PHYSICS));}"
+};
+__initData13 = {
+  code: "function VoicePanelCardFloatingControlsTsx13(){const{pillOpacity,isPillHidden,FLOATING_BAR_HEIGHT,VOICE_PANEL_CARD_INNER_PADDING}=this.__closure;return{opacity:pillOpacity.get(),top:isPillHidden.get()?FLOATING_BAR_HEIGHT+VOICE_PANEL_CARD_INNER_PADDING:0,height:FLOATING_BAR_HEIGHT,pointerEvents:isPillHidden.get()?'none':'auto'};}"
+};
+__initData14 = {
+  code: "function VoicePanelCardFloatingControlsTsx14(){const{connected,isScreenReaderEnabled,controlsSpecs,VoicePanelControlsModes,hasIcon,GAP}=this.__closure;const hidden=!connected.get()||!isScreenReaderEnabled&&controlsSpecs.get().mode===VoicePanelControlsModes.HIDDEN&&hasIcon;const shouldCollapseWidth=hidden&&hasIcon;return{width:shouldCollapseWidth?0:'auto',marginRight:hidden?-GAP:0};}"
+};
+Component2 = memo(function({ controlsHidden: controlsHidden4, label, layout, participant: participant3 }) {
+  let accessibilityLabel, props4;
+  let c22672_9, c22672_10, derivedValue, sharedValue3;
+  c22672_9 = void 0;
+  c22672_10 = void 0;
+  derivedValue = void 0;
+  sharedValue3 = void 0;
+  const context = useContext(VoicePanelStateContext);
+  const { guildId: guildId3, channelId, controlsSpecs: controlsSpecs2, focused, connected, mode: mode2 } = context;
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  const styles = useStyles(MobileVisualRefreshExperiment("VoicePanelCardFloatingControls"));
+  const id = isStableParticipantWithUser(participant3) ? participant3.user.id : void 0;
+  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  const callback = useCallback(() => {
+    if (id != null) {
+      showUserProfileActionSheet({
+        userId: id,
+        channelId,
+        isVoiceContext: true,
+        sourceAnalyticsLocations: analyticsLocations
+      });
+    }
+  }, [id, channelId, analyticsLocations]);
+  let r15 = useIsUserSecureFramesVerified({
+    userId: id,
+    channelId
+  });
+  const voicePanelCardUserStateIcons = useVoicePanelCardUserStateIcons(participant3.type, isStableParticipantWithUser(participant3) ? participant3.user.id : void 0, guildId3, channelId);
+  const displayNameStylesFont = useDisplayNameStylesFont({
+    displayNameStyles: useDisplayNameStyles({
+      userId: id,
+      guildId: guildId3
+    })
+  });
+  const length = voicePanelCardUserStateIcons.length;
+  let r0 = 1;
+  const hasIcon = length >= 1;
+  c22672_9 = hasIcon;
+  const hasHiddenVisibleIcon = voicePanelCardUserStateIcons.filter((voicePanelCardUserStateIcon) => voicePanelCardUserStateIcon.type !== VoicePanelCardUserStateIconType.STREAM_ICON).length >= 1;
+  c22672_10 = hasHiddenVisibleIcon;
+  const c = function c() {
+    const r0 = c22672_10 && focused.get() == null;
+    const r9 = connected.get();
+    return (r9 ? mode2.get() === VoicePanelModes.PIP : !r9) || (r0 ? !r0 : controlsHidden4.get());
+  };
+  c.__closure = {
+    hasHiddenVisibleIcon,
+    focused,
+    connected,
+    mode: mode2,
+    VoicePanelModes,
+    controlsHidden: controlsHidden4
+  };
+  c.__workletHash = 14354852732719;
+  c.__initData = __initData10;
+  derivedValue = useDerivedValue(c);
+  if (derivedValue.get()) {
+    r0 = 0;
+  }
+  sharedValue3 = useSharedValue(r0);
+  const u = () => derivedValue.get();
+  u.__closure = {
+    isPillHidden: derivedValue
+  };
+  u.__workletHash = 653298163833;
+  u.__initData = __initData11;
+  const r106 = function _(a0) {
+    sharedValue3.set(_spring.withSpring(a0 ? 0 : 1, MODE_CHANGE_PHYSICS));
+  };
+  r106.__closure = {
+    pillOpacity: sharedValue3,
+    withSpring: _spring.withSpring,
+    MODE_CHANGE_PHYSICS
+  };
+  r106.__workletHash = 158794425133;
+  r106.__initData = __initData12;
+  useAnimatedReaction(u, r106);
+  const Q = () => ({
+    opacity: sharedValue3.get(),
+    top: derivedValue.get() ? height + VOICE_PANEL_CARD_INNER_PADDING : 0,
+    height,
+    pointerEvents: derivedValue.get() ? "none" : "auto"
+  });
+  Q.__closure = {
+    pillOpacity: sharedValue3,
+    isPillHidden: derivedValue,
+    FLOATING_BAR_HEIGHT: height,
+    VOICE_PANEL_CARD_INNER_PADDING
+  };
+  Q.__workletHash = 12355778282621;
+  Q.__initData = __initData13;
+  const animatedStyle = useAnimatedStyle(Q);
+  const r127 = function() {
+    const r8 = connected.get();
+    const r3 = r8 ? (isScreenReaderEnabled ? !isScreenReaderEnabled : controlsSpecs2.get().mode === VoicePanelControlsModes.HIDDEN) && c22672_9 : !r8;
+    return {
+      width: r3 ? c22672_9 ? 0 : "auto" : "auto",
+      marginRight: r3 ? -4 : 0
+    };
+  };
+  r127.__closure = {
+    connected,
+    isScreenReaderEnabled,
+    controlsSpecs: controlsSpecs2,
+    VoicePanelControlsModes,
+    hasIcon,
+    GAP: 4
+  };
+  r127.__workletHash = 10013340978870;
+  r127.__initData = __initData14;
+  const animatedStyle2 = useAnimatedStyle(r127);
+  const props = {
+    style: [styles.labelPositionContainer],
+    layout,
+    pointerEvents: "box-none",
+    children: null
+  };
+  const props2 = {
+    onPress: id != null ? callback : void 0,
+    style: [styles.labelOuterContainer, animatedStyle],
+    layout,
+    children: null
+  };
+  const children = [voicePanelCardUserStateIcons.length > 0 && <NativeView style={styles.initialIcons}>
+    {voicePanelCardUserStateIcons.map((voicePanelCardUserStateIcon) => <AnimatedLabelIcon key={voicePanelCardUserStateIcon.type} icon={voicePanelCardUserStateIcon} />)}
+  </NativeView>, ,];
+  const props3 = {
+    style: [styles.floatingContainer, animatedStyle2],
+    layout,
+    children: null
+  };
+  const style = [styles.floatingText, ,];
+  const r168 = displayNameStylesFont != null && {
+    fontFamily: displayNameStylesFont
+  };
+  L19: {
+    style[1] = r168;
+    props4 = {
+      variant: "heading-sm/semibold",
+      color: "text-overlay-light",
+      lineClamp: 1,
+      style,
+      ellipsizeMode: "tail",
+      accessibilityLabel: null,
+      children: null
+    };
+    if (voicePanelCardUserStateIcons.find((voicePanelCardUserStateIcon) => voicePanelCardUserStateIcon.type === VoicePanelCardUserStateIconType.STREAM_ICON) != null) {
+      accessibilityLabel = intl.formatToPlainString(t.I0mOAs, {
+        username: label
+      });
+    } else {
+      const r176 = voicePanelCardUserStateIcons.find((voicePanelCardUserStateIcon) => voicePanelCardUserStateIcon.type === VoicePanelCardUserStateIconType.MUTE_DEAFEN_ICON);
+      accessibilityLabel = label;
+      if (r176 != null) {
+        const muteDeafenIconState = r176.muteDeafenIconState;
+        if (MuteDeafenIconState.DEAFENED !== muteDeafenIconState && MuteDeafenIconState.DEAFENED_SERVER !== muteDeafenIconState) {
+          accessibilityLabel = intl.formatToPlainString(t.Hd1oVG, {
+            username: label
+          });
+          break L19;
+        }
+        accessibilityLabel = intl.formatToPlainString(t["9hDjai"], {
+          username: label
+        });
+      }
+    }
+  }
+  props4.accessibilityLabel = accessibilityLabel;
+  props4.children = label;
+  const children2 = [<Text {...props4} />, participant3.type === ParticipantTypes.USER && <GuildTag userId={participant3.user.id} textColor="text-overlay-light" />, ,];
+  if (r15) {
+    r15 = <ShieldLockIcon style={styles.secureFramesIcon} size="xs" accessibilityLabel={intl.string(t.mR9cf3)} />;
+  }
+  children2[2] = r15;
+  props3.children = children2;
+  children[1] = <ReanimatedNativeView {...props3} />;
+  props2.children = children;
+  props.children = <AnimatedComponent2 {...props2} />;
+  return <ReanimatedNativeView {...props} />;
+});
+__initData15 = {
+  code: "function VoicePanelCardFloatingControlsTsx15(){const{controlsSpecs,VoicePanelControlsModes,focused,mode,VoicePanelModes}=this.__closure;return controlsSpecs.get().mode===VoicePanelControlsModes.HIDDEN||focused.get()!=null||mode.get()===VoicePanelModes.PIP;}"
+};
+const r101 = memo(function FloatingControls(props) {
+  const { label, participant: participant2 } = props;
+  let isRinging = props.isRinging;
+  const layout = props.layout;
+  const context = useContext(VoicePanelStateContext);
+  const { guildId: guildId2, channelId: channelId2, controlsSpecs: controlsSpecs3, focused: focused2, mode: mode3 } = context;
+  let r31 = useStateFromStores([RTCConnectionStore], () => RTCConnectionStore.isConnected());
+  const isSelf = !!isStableParticipantWithUser(participant2) && participant2.isSelf;
+  const stateFromStores = useStateFromStores([EmbeddedActivitiesStore, ApplicationStreamingStore], () => {
+    if (isStableActivityParticipant(participant2)) {
+      return participant2.applicationId === EmbeddedActivitiesStore.getCurrentEmbeddedActivity()?.applicationId;
+    }
+    return !!isStableStreamParticipant(participant2) && ApplicationStreamingStore.getActiveStreamForUser(participant2.user.id, guildId2) != null;
+  });
+  const isVoicePanelParticipantFocusable = useIsVoicePanelParticipantFocusable(guildId2, channelId2, participant2.id);
+  const I = function I() {
+    return controlsSpecs3.get().mode === VoicePanelControlsModes.HIDDEN || focused2.get() != null || mode3.get() === VoicePanelModes.PIP;
+  };
+  I.__closure = {
+    controlsSpecs: controlsSpecs3,
+    VoicePanelControlsModes,
+    focused: focused2,
+    mode: mode3,
+    VoicePanelModes
+  };
+  I.__workletHash = 8765031976276;
+  I.__initData = __initData15;
+  const derivedValue2 = useDerivedValue(I);
+  const r57 = label != null && <Component2 controlsHidden={derivedValue2} label={label} layout={layout} participant={participant2} />;
+  if (isRinging) {
+    isRinging = <Component3 controlsHidden={derivedValue2} />;
+  }
+  const r66 = [isRinging, (r31 ? stateFromStores : r31) && <Component4 controlsHidden={derivedValue2} participant={participant2} isSelf={isSelf} layout={layout} />, , ,];
+  if (r31) {
+    r31 = isVoicePanelParticipantFocusable;
+  }
+  if (r31) {
+    r31 = <Component5 controlsHidden={derivedValue2} participantId={participant2.id} targetName={label} isActivityParticipant={isStableActivityParticipant(participant2)} layout={layout} />;
+  }
+  r66[2] = r31;
+  r66[3] = r57;
+  return <>{r66}</>;
+});
+export default r101;

modules/voice_panel/native/card/VoicePanelCardLayoutManager.tsx

@@ -0,0 +1,793 @@
+// Metro module 10040 (f10041).
+import { useLayoutEffect, useState } from "react";
+import { PixelRatio } from "react-native";
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import { BASE_TARGET_CARD_SIZE, VOICE_PANEL_CHUNK_DIVISOR, VoicePanelCTACardDimensionKeys, VoicePanelCTACardDimensions, VoicePanelCardItemType } from "../../VoicePanelConstants";
+import { CALL_TILE_GUTTER, EDGE_GUTTER } from "./VoicePanelCardConstants";
+import { ParticipantTypes } from "../../../calls/CallConstants";
+import { useSharedValue } from "../../../reanimated/ReanimatedRexport";
+import updateSharedValueIfChanged_native from "../../../reanimated/utils/updateSharedValueIfChanged.native";
+import shallowEqual from "../../../../_bundle/shallowEqual";
+import participantHasVideo from "../../../video_calls/participantHasVideo";
+import calculateVoicePanelHeaderSpecs from "../header/calculateVoicePanelHeaderSpecs";
+import fitCardsInGrid from "../utils/fitCardsInGrid";
+import { batchUpdates } from "../../../../_bundle/Module705";
+let c6675_15, c6675_16, c6675_17, c6675_18;
+const getTargetCardSize = function getTargetCardSize({ windowWidth: windowWidth2, windowHeight: windowHeight2, safeAreaLeft, safeAreaRight }) {
+  const r1 = windowWidth2 > windowHeight2 ? 4 : 3;
+  return Math.max(BASE_TARGET_CARD_SIZE, (windowWidth2 - safeAreaLeft - safeAreaRight - CALL_TILE_GUTTER * (r1 - 1)) / r1);
+};
+c6675_15 = {
+  id: "invalid",
+  type: VoicePanelCardItemType.PARTICIPANT,
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  zIndex: 0
+};
+c6675_16 = new Set();
+c6675_17 = {
+  enlargeSquare: false,
+  fillAspectRatio: false
+};
+c6675_18 = [{
+  match: new Set(["1,camera", "2,camera", "2,camera,camera"]),
+  layouts: [{
+    enlargeSquare: true,
+    fillAspectRatio: false
+  }],
+  global: true
+}, {
+  match: new Set(["1,stream", "2,stream", "3,stream", "2,stream,camera", "3,stream,camera", "3,stream,camera,camera", "3,camera", "3,camera,stream"]),
+  layouts: [{
+    enlargeSquare: true,
+    fillAspectRatio: true
+  }, {
+    enlargeSquare: false,
+    fillAspectRatio: false
+  }, {
+    enlargeSquare: false,
+    fillAspectRatio: false
+  }]
+}];
+class VoicePanelCardLayoutManager {
+  constructor(a0) {
+    const r8 = {
+      __proto__: new.target.prototype,
+      dirty: true,
+      targetDimensions: new Map(),
+      cardCoords: null,
+      chunkedCoords: null,
+      contentDimensions: null,
+      layoutCallbacks: null,
+      managerSubscriptions: null,
+      items: null,
+      emitItemChanges: true,
+      mounted: false,
+      layoutKey: 0,
+      emitTimeout: -1,
+      props: null,
+      defaultTargetCoords: null
+    };
+    r8.cardCoords = new Map();
+    r8.chunkedCoords = new Map();
+    r8.contentDimensions = {
+      width: 0,
+      height: 0
+    };
+    r8.layoutCallbacks = new Set();
+    r8.managerSubscriptions = new Set();
+    r8.items = [];
+    r8.props = {
+      windowWidth: 0,
+      windowHeight: 0,
+      chunkSize: 0,
+      safeAreaLeft: 0,
+      safeAreaRight: 0,
+      safeAreaTop: 0,
+      safeAreaBottom: 0,
+      gutter: 0,
+      controlBarSize: 0
+    };
+    r8.defaultTargetCoords = {
+      width: 0,
+      height: 0
+    };
+    r8.channelId = a0;
+    return r8;
+  }
+  setDirty(a0) {
+    if (a0 ? !this.dirty : a0) {
+      this.dirty = true;
+      this.emitItemChanges = true;
+    }
+  }
+  handleLayoutEffect() {
+    this.mounted = true;
+    this.emitLayoutChanges();
+  }
+  cleanUp() {
+    this.mounted = false;
+  }
+  updateState(a0, { windowWidth: windowWidth2, windowHeight: windowHeight2, safeAreaLeft, safeAreaRight, safeAreaTop, safeAreaBottom, controlBarSize }) {
+    const props = {
+      windowHeight: windowHeight2,
+      windowWidth: windowWidth2,
+      chunkSize: windowHeight2 / VOICE_PANEL_CHUNK_DIVISOR,
+      safeAreaLeft: Math.max(safeAreaLeft, EDGE_GUTTER),
+      safeAreaRight: Math.max(safeAreaRight, EDGE_GUTTER),
+      safeAreaBottom: Math.max(safeAreaBottom, EDGE_GUTTER),
+      safeAreaTop,
+      gutter: CALL_TILE_GUTTER,
+      controlBarSize
+    };
+    if (!shallowEqual(props, this.props)) {
+      this.props = props;
+      this.setDirty(true);
+    }
+    const setDirty2 = this.setDirty;
+    const items = this.items;
+    setDirty2.call(this, !(a0.length === items.length && !a0.some((item, index) => items[index] !== item)));
+    this.items = a0;
+    return this.getContentDimensions();
+  }
+  getLayoutKey() {
+    return this.layoutKey;
+  }
+  getChunk(a0) {
+    let r5 = this.chunkedCoords.get(a0);
+    if (r5 == null) {
+      r5 = c6675_16;
+    }
+    return r5;
+  }
+  getContentDimensions() {
+    this.computeCardsLayout();
+    return this.contentDimensions;
+  }
+  getCardCoords(a0) {
+    this.computeCardsLayout();
+    return this.cardCoords.get(a0);
+  }
+  getCardCoordsMap() {
+    this.computeCardsLayout();
+    return this.cardCoords;
+  }
+  getDefaultTargetDimensions() {
+    return this.defaultTargetCoords;
+  }
+  getTargetDimensions(a0) {
+    let defaultTargetCoords;
+    if (a0 == null) {
+      defaultTargetCoords = this.defaultTargetCoords;
+    } else if (VoicePanelCTACardDimensionKeys.has(a0)) {
+      defaultTargetCoords = VoicePanelCTACardDimensions[a0];
+    } else {
+      defaultTargetCoords = this.targetDimensions.get(a0);
+      if (defaultTargetCoords == null) {
+        defaultTargetCoords = this.defaultTargetCoords;
+      }
+    }
+    return defaultTargetCoords;
+  }
+  setTargetDimensions(a0, a1, a2) {
+    const targetDimensions = this.getTargetDimensions(a0);
+    if (!(targetDimensions.width === a1 && targetDimensions.height === a2)) {
+      this.targetDimensions.set(a0, {
+        width: a1,
+        height: a2
+      });
+      this.setDirty(true);
+      this.deferredLayoutChange();
+    }
+  }
+  resetTargetDimensions(a0) {
+    if (this.targetDimensions.has(a0)) {
+      this.targetDimensions.delete(a0);
+      this.setDirty(true);
+      this.deferredLayoutChange();
+    }
+  }
+  setTargetAspectRatio(a0, a1) {
+    const r6 = a1 === "portrait" ? {
+      width: 1,
+      height: 2
+    } : a1 === "landscape" ? {
+      width: 2,
+      height: 1
+    } : a1 === "square" ? {
+      width: 1,
+      height: 1
+    } : void 0;
+    const targetDimensions = this.getTargetDimensions(a0);
+    if (!(targetDimensions.width === r6.width && targetDimensions.height === r6.height)) {
+      this.targetDimensions.set(a0, r6);
+      this.setDirty(true);
+      this.deferredLayoutChange();
+    }
+  }
+  computeCardsLayout() {
+    let r48, availableHeight, cardSize, columns2;
+    let c17643_0, windowWidth, windowHeight, gutter, c17643_5, c17643_6, c17643_7, c17643_8, c17643_9, columns, c17643_11, c17643_12, c17643_13, c17643_14, c17643_15, c17643_16, c17643_17, c17643_18, c17643_19, placeItem2;
+    const _this2 = this;
+    const _this = this;
+    if (this.dirty) {
+      this.cardCoords = new Map();
+      this.chunkedCoords = new Map();
+      const props = this.props;
+      windowWidth = props.windowWidth;
+      windowHeight = props.windowHeight;
+      const { safeAreaLeft, safeAreaRight, safeAreaTop, safeAreaBottom } = props;
+      gutter = props.gutter;
+      const controlBarSize = props.controlBarSize;
+      const set4 = new Set();
+      c17643_5 = set4;
+      const set3 = new Set();
+      c17643_6 = set3;
+      const set2 = new Set();
+      c17643_7 = set2;
+      const set = new Set(this.items);
+      c17643_8 = set;
+      c17643_9 = `${this.items.length}`;
+      columns = 0;
+      const _loop = function _loop(a0) {
+        let r17, participant;
+        L10: {
+          participant = ChannelRTCStore.getParticipant(_this.channelId, a0.id);
+          if (a0.type === VoicePanelCardItemType.CTA) {
+            r17 = _this.getTargetDimensions(a0.id);
+          } else {
+            const r2 = participant == null;
+            r17 = void 0;
+            if (!r2) {
+              if (participant.type === ParticipantTypes.USER) {
+                const r24 = participantHasVideo(participant);
+                r17 = void 0;
+                if (!r24) {
+                  break L10;
+                }
+              }
+              r17 = participant.type === ParticipantTypes.USER ? _this.defaultTargetCoords : _this.getTargetDimensions(a0.id);
+            }
+          }
+        }
+        if (r17 != null && participant != null) {
+          const r37 = {
+            type: "custom",
+            item: a0,
+            forceSquare: participant.type === ParticipantTypes.USER
+          };
+          const type = participant.type;
+          if (ParticipantTypes.ACTIVITY === type) {
+            c17643_5.add(r37);
+          } else if (ParticipantTypes.STREAM === type) {
+            c17643_6.add(r37);
+          } else if (ParticipantTypes.USER === type) {
+            c17643_7.add(r37);
+          }
+          c17643_9 = c17643_9 + ("," + (participant.type !== ParticipantTypes.STREAM ? participant.type === ParticipantTypes.USER ? "camera" : "activity" : "stream"));
+          c17643_8.delete(a0);
+          return void 0;
+        }
+        return 1;
+      };
+      for (const item of set) {
+        if (!_loop(item)) {
+          continue;
+        }
+        break;
+      }
+      const r29 = set4.size === 0 ? c6675_18.find((item) => item.match.has(c17643_9)) : null;
+      L16: {
+        c17643_12 = r29;
+        availableHeight = Math.max(120, windowHeight - calculateVoicePanelHeaderSpecs({
+          top: safeAreaTop,
+          left: safeAreaLeft,
+          right: safeAreaRight,
+          bottom: safeAreaBottom
+        }, EDGE_GUTTER).height - EDGE_GUTTER - controlBarSize - safeAreaBottom);
+        const availableWidth = Math.max(120, windowWidth - safeAreaLeft - safeAreaRight);
+        if (r29 == null && !(set4.size > 0)) {
+          const targetCardSize = getTargetCardSize({
+            windowWidth,
+            windowHeight,
+            safeAreaLeft,
+            safeAreaRight
+          });
+          if (!(this.items.length >= 7) && this.items.length !== 0) {
+            const r126 = fitCardsInGrid({
+              cardCount: this.items.length,
+              gutterSize: gutter,
+              availableWidth,
+              availableHeight
+            });
+            columns2 = r126.columns;
+            columns = columns2;
+            cardSize = r126.cardSize;
+            break L16;
+          }
+          columns = Math.max((windowWidth - safeAreaLeft - safeAreaRight) / targetCardSize | 0, 1);
+          cardSize = PixelRatio.roundToNearestPixel((windowWidth - safeAreaLeft - safeAreaRight - CALL_TILE_GUTTER * (columns - 1)) / columns);
+          columns2 = columns;
+        } else {
+          columns = Math.max(Math.min((windowWidth - safeAreaLeft - safeAreaRight) / getTargetCardSize({
+            windowWidth,
+            windowHeight,
+            safeAreaLeft,
+            safeAreaRight
+          }) | 0, 4), 1);
+          cardSize = PixelRatio.roundToNearestPixel((windowWidth - safeAreaLeft - safeAreaRight - gutter * (columns - 1)) / columns);
+          columns2 = columns;
+        }
+      }
+      if (r29?.global === true) {
+        c17643_11 = r29.layouts[0];
+      }
+      const r183 = Math.floor(this.items.length / columns2) + (this.items.length % columns2 == 0 ? 0 : 1);
+      const defaultTargetCoords = {
+        width: r29 == null ? columns2 === 1 ? r183 > 1 ? set4.size === 0 ? windowWidth - safeAreaLeft - safeAreaRight : cardSize : cardSize : cardSize : cardSize,
+        height: r29 == null ? r183 === 1 ? columns2 > 1 ? set4.size === 0 ? availableHeight : cardSize : cardSize : cardSize : cardSize
+      };
+      if (!shallowEqual(defaultTargetCoords, this.defaultTargetCoords)) {
+        this.defaultTargetCoords = defaultTargetCoords;
+      }
+      c17643_13 = {
+        cardWidth: this.defaultTargetCoords.width,
+        cardHeight: this.defaultTargetCoords.height,
+        gutter,
+        totalItems: this.items.length,
+        windowWidth
+      };
+      const r209 = [new Array(columns2).fill(0)];
+      c17643_14 = r209;
+      c17643_15 = -1;
+      c17643_16 = -1;
+      c17643_17 = -1;
+      c17643_18 = 0;
+      const r211 = [];
+      c17643_19 = r211;
+      placeItem2 = (a0, a1, a2, a3) => {};
+      c17643_0 = this.items.length === 1;
+      for (const item2 of [set4, set3, set2, set]) {
+        const _loop2 = function _loop2(a0) {
+          let r46, r125, r126, r127, r128, r149, r151, length2;
+          if (a0.type === "custom") {
+            let r53 = c17643_11;
+            if (r53 == null) {
+              r53 = c17643_12 == null ? void 0 : c17643_12.layouts[c17643_18];
+            }
+            if (r53 == null) {
+              r53 = c6675_17;
+            }
+            const forceSquare = a0.forceSquare;
+            let r60 = "square";
+            if (!forceSquare) {
+              const targetDimensions = _this.getTargetDimensions(a0.item.id);
+              const r66 = targetDimensions.width / targetDimensions.height;
+              r60 = r66 >= 1.3 ? "landscape" : r66 <= 0.8 ? "portrait" : "square";
+            }
+            const r74 = windowWidth > windowHeight;
+            r46 = {
+              item: a0.item,
+              dimensions: r60 === "portrait" ? r53.fillAspectRatio ? r74 ? {
+                width: 2,
+                height: 2
+              } : {
+                width: 2,
+                height: 3 + (c17643_0 ? 1 : 0)
+              } : {
+                width: 1,
+                height: 2
+              } : r60 === "landscape" ? r53.fillAspectRatio ? r74 ? {
+                width: 3 + (c17643_0 ? 1 : 0),
+                height: 2
+              } : {
+                width: 2,
+                height: 2
+              } : {
+                width: 2,
+                height: 1
+              } : r60 === "square" ? r53.enlargeSquare ? {
+                width: 2,
+                height: 2
+              } : {
+                width: 1,
+                height: 1
+              } : void 0
+            };
+          } else {
+            windowWidth > windowHeight;
+            let r48 = c17643_11;
+            if (r48 == null) {
+              r48 = c6675_17;
+            }
+            r46 = {
+              item: a0,
+              dimensions: r48.enlargeSquare ? {
+                width: 2,
+                height: 2
+              } : {
+                width: 1,
+                height: 1
+              }
+            };
+          }
+          const { item, dimensions } = r46;
+          const width = dimensions.width;
+          let height = dimensions.height;
+          const { id, type } = item;
+          const r101 = c17643_15;
+          const width3 = Math.min(width, columns);
+          if (columns === 1) {
+            height = 1;
+          }
+          let r21 = r101 + 1;
+          let r20 = -1;
+          let r19 = -1;
+          let r111 = void 0;
+          while (true) {
+            let r38 = c17643_14[r21];
+            const r15 = r20;
+            const r16 = r19;
+            const r18 = r21;
+            const r37 = r111;
+            if (r38 == null) {
+              const r117 = new Array(columns).fill(0);
+              c17643_14.push(r117);
+              r38 = r117;
+            }
+            const r24 = 0 < r38.length;
+            let r10 = 0;
+            let r12 = r15;
+            let r11 = r16;
+            if (r24) {
+              do {
+                const r121 = r38[r10];
+                const r8 = r10;
+                if (r121 !== 1) {
+                  const r9 = width3 - 1;
+                  const length = r38.length;
+                  const r123 = r8 + r9;
+                  r12 = r8;
+                  r11 = r18;
+                  if (!(r123 >= length)) {
+                    break;
+                  }
+                }
+                r10 = r8 + 1;
+                length2 = r38.length;
+                r12 = r15;
+                r11 = r16;
+              } while (r10 < length2);
+            }
+            L72: {
+              if (r11 !== -1 && r12 !== -1) {
+                const r130 = r11 + (height - 1);
+                let r13 = r11;
+                let r14 = r12;
+                let r131 = r13;
+                let startCol2 = r14;
+                let startRow2 = r131;
+                if (startRow2 <= r130) {
+                  do {
+                    let r134 = c17643_14[r13];
+                    const r135 = r13;
+                    const r5 = r14;
+                    const r6 = r131;
+                    if (r134 == null) {
+                      const r142 = new Array(columns).fill(0);
+                      c17643_14.push(r142);
+                      r134 = r142;
+                    }
+                    const r145 = r5 + (width3 - 1);
+                    let r0 = r5;
+                    let r2 = r0;
+                    let r3 = r6;
+                    if (r5 <= r145) {
+                      do {
+                        const r146 = r134[r0];
+                        const r147 = r0;
+                        r2 = -1;
+                        r3 = -1;
+                        if (r146 !== 0) {
+                          break;
+                        }
+                        r0 = r147 + 1;
+                        r149 = r5 + (width3 - 1);
+                        r2 = r5;
+                        r3 = r6;
+                      } while (r0 <= r149);
+                    }
+                    startCol2 = r2;
+                    startRow2 = r3;
+                    if (r2 === -1) {
+                      break;
+                    }
+                    startCol2 = r2;
+                    startRow2 = r3;
+                    if (startRow2 === -1) {
+                      break;
+                    }
+                    r13 = r135 + 1;
+                    r151 = r3 + (height - 1);
+                    r14 = r2;
+                    r131 = r3;
+                    startCol2 = r14;
+                    startRow2 = r131;
+                  } while (r13 <= r151);
+                }
+                if (startRow2 !== -1 && startCol2 !== -1) {
+                  const r152 = {
+                    startRow: startRow2,
+                    startCol: startCol2,
+                    width: width3,
+                    height
+                  };
+                  r126 = startCol2;
+                  r127 = startRow2;
+                  r125 = r18;
+                  r128 = r152;
+                  break L72;
+                }
+                r125 = r18 + 1;
+                r126 = startCol2;
+                r127 = startRow2;
+                r128 = r37;
+              } else {
+                r125 = r18 + 1;
+                r126 = -1;
+                r127 = -1;
+                r128 = r37;
+              }
+            }
+            r20 = r126;
+            r19 = r127;
+            r21 = r125;
+            r111 = r128;
+            if (r111 != null) {
+              let r23 = c17643_15;
+              const { startRow, startCol, width: width2, height: height2 } = r128;
+              const r157 = startRow + height2;
+              let r158 = startRow;
+              if (r158 < r157) {
+                do {
+                  const r159 = startCol + width2;
+                  const r160 = r158;
+                  let r41 = startCol;
+                  if (r41 < r159) {
+                    do {
+                      c17643_14[r160][r41] = 1;
+                      r41 = r41 + 1;
+                    } while (r41 < startCol + width2);
+                  }
+                  r158 = r160 + 1;
+                } while (r158 < startRow + height2);
+              }
+              let r164 = r23 + 1;
+              while (true) {
+                const r165 = c17643_14[r164];
+                const r166 = r164;
+                const r167 = r23;
+                if (r165 != null && r165.indexOf(0) === -1) {
+                  r164 = r166 + 1;
+                  r23 = r166;
+                  continue;
+                }
+                c17643_15 = r167;
+                c17643_17 = Math.min(Math.max(c17643_17, r128.startCol + (r128.width - 1)), columns);
+                const r183 = {
+                  id,
+                  type,
+                  x: r128.startCol * (c17643_13.gutter + c17643_13.cardWidth),
+                  y: r128.startRow * (c17643_13.gutter + c17643_13.cardHeight),
+                  width: c17643_13.cardWidth * r128.width + (r128.width - 1) * c17643_13.gutter,
+                  height: c17643_13.cardHeight * r128.height + (r128.height - 1) * c17643_13.gutter,
+                  zIndex: c17643_13.totalItems - c17643_18
+                };
+                const { y: r212, height: height3 } = r183;
+                const chunkSize = _this2.props.chunkSize;
+                const r219 = [r212 / chunkSize | 0, (r212 + height3) / chunkSize | 0];
+                let r223 = r219[0];
+                while (r223 <= r219[1]) {
+                  let r228 = _this2.chunkedCoords.get(r223);
+                  const r229 = r223;
+                  if (r228 == null) {
+                    const set = new Set();
+                    _this2.chunkedCoords.set(r229, set);
+                    r228 = set;
+                  }
+                  r228.add(r183);
+                  r223 = r229 + 1;
+                }
+                _this2.cardCoords.set(id, r183);
+                const r252 = Math.max(c17643_16, r128.startRow + r128.height - 1);
+                c17643_16 = r252;
+                if (r252 !== c17643_15 && (r128.height === 1 && r128.startRow === c17643_16)) {
+                  c17643_19.push(id);
+                } else {
+                  c17643_19.length = 0;
+                }
+                c17643_18 = c17643_18 + 1;
+                return void 0;
+              }
+            }
+          }
+        };
+        for (const item3 of item2) {
+          _loop2(item3);
+        }
+      }
+      const r234 = c17643_15;
+      const r235 = c17643_16;
+      if (r234 !== r235 && r234 !== -1) {
+        const r236 = r209[r235];
+        let r238 = r236[0] === 0;
+        let r239 = false;
+        let r240 = 0;
+        let r242 = r236[Symbol.iterator]();
+        const next = r242.next;
+        while (true) {
+          const r245 = r242 === void 0 ? void 0 : (r48 = next.call(r242)).done ? r242 = void 0 : r48.value;
+          if (r242 === void 0) {
+            if (r238) {
+              break;
+            }
+            const r254 = columns2 - r240;
+            const r264 = PixelRatio.roundToNearestPixel((r254 * this.defaultTargetCoords.width + r254 * gutter) / 2);
+            for (const item4 of r211) {
+              const r273 = this.cardCoords.get(item4);
+              if (r273 != null) {
+                r273.x = r273.x + r264;
+              }
+            }
+            break;
+          }
+          try {
+            r240 = r240 + r245;
+            if (!r238) {
+              if (r245 === 1 && r239) {
+                r238 = true;
+              }
+              if (r245 === 0) {
+                r239 = true;
+              }
+            }
+          } catch (r253) {
+            if (r242 !== void 0 && typeof r242.return === "function") {
+              try {
+                r242.return();
+              } catch {}
+            }
+            throw r253;
+          }
+        }
+      }
+      this.contentDimensions = {
+        width: (() => {
+          let r17;
+          if (_this2.items.length === 0) {
+            const width = _this2.defaultTargetCoords.width;
+            r17 = width * columns + (columns - 1) * gutter;
+          } else {
+            c17643_17 = c17643_17 + 1;
+            r17 = _this2.defaultTargetCoords.width * c17643_17 + (c17643_17 - 1) * gutter;
+          }
+          return r17;
+        })(),
+        height: (() => {
+          if (_this2.items.length === 0) {
+            return 0;
+          }
+          let r0 = c17643_14.length - 1;
+          let r1 = r0;
+          while (0 <= r1) {
+            const r8 = c17643_14[r0];
+            const r2 = r0;
+            r1 = r2;
+            if (r8 == null) {
+              break;
+            }
+            const r15 = r8.indexOf(1);
+            r1 = r2;
+            if (r15 >= 0) {
+              break;
+            }
+            r0 = r2 - 1;
+            r1 = r0;
+          }
+          const r16 = r1 + 1;
+          return r16 * _this2.defaultTargetCoords.height + gutter * (r16 - 1);
+        })()
+      };
+      this.dirty = false;
+      this.layoutKey = this.layoutKey + 1;
+    }
+  }
+  subscribeFromItem(a0) {
+    this.layoutCallbacks.add(a0);
+    return () => {
+      this.layoutCallbacks.delete(a0);
+    };
+  }
+  subscribeToManager(a0) {
+    this.managerSubscriptions.add(a0);
+    return () => {
+      this.managerSubscriptions.delete(a0);
+    };
+  }
+  emitLayoutChanges() {
+    if (this.emitItemChanges && this.mounted) {
+      this.emitItemChanges = false;
+      batchUpdates(() => {
+        for (const managerSubscription of this.managerSubscriptions) {
+          managerSubscription();
+        }
+        for (const layoutCallback of this.layoutCallbacks) {
+          layoutCallback();
+        }
+      });
+    }
+  }
+  deferredLayoutChange() {
+    if (this.emitItemChanges && this.mounted) {
+      this.emitTimeout = setTimeout(() => {
+        const r4 = clearTimeout;
+        r4(this.emitTimeout);
+        this.emitTimeout = -1;
+        this.emitLayoutChanges();
+      }, 1);
+    }
+  }
+  checkDimensionsMismatch(a0, a1) {
+    return this.props.windowWidth === a0 ? this.props.windowHeight !== a1 ? {
+      staleWidth: this.props.windowWidth,
+      staleHeight: this.props.windowHeight,
+      wasDirty: this.dirty
+    } : null : {
+      staleWidth: this.props.windowWidth,
+      staleHeight: this.props.windowHeight,
+      wasDirty: this.dirty
+    };
+  }
+}
+export default VoicePanelCardLayoutManager;
+export function useCardLayoutCoordsSubscription(a0, a1) {
+  let r8 = a1.getCardCoords(a0);
+  if (r8 == null) {
+    r8 = c6675_15;
+  }
+  const sharedValue = useSharedValue({
+    ...r8
+  });
+  useLayoutEffect(() => {
+    const cardCoords = a1.getCardCoords(a0);
+    if (cardCoords != null) {
+      updateSharedValueIfChanged_native(sharedValue, cardCoords);
+    }
+    return a1.subscribeFromItem(function updateSharedValues() {
+      const cardCoords = a1.getCardCoords(a0);
+      if (cardCoords != null) {
+        updateSharedValueIfChanged_native(sharedValue, cardCoords);
+      }
+    });
+  }, [a0, a1, sharedValue]);
+  return sharedValue;
+}
+export function useTargetDimensionsSubscription(a0, a1) {
+  const sharedValue2 = useSharedValue({
+    ...a1.getTargetDimensions(a0)
+  });
+  useLayoutEffect(() => {
+    updateSharedValueIfChanged_native(sharedValue2, a1.getTargetDimensions(a0));
+    return a1.subscribeFromItem(function updateSharedValues() {
+      updateSharedValueIfChanged_native(sharedValue2, a1.getTargetDimensions(a0));
+    });
+  }, [a0, a1, sharedValue2]);
+  return sharedValue2;
+}
+export function useManagerSubscription(a0) {
+  const [state, setState] = useState(a0.getLayoutKey());
+  useLayoutEffect(() => a0.subscribeToManager(() => setState(a0.getLayoutKey())));
+  return state;
+}

modules/voice_panel/native/card/VoicePanelCardView.tsx

@@ -0,0 +1,235 @@
+// Metro module 15957 (f15958).
+import { useRef, useState, useEffect, useContext, useMemo, memo, useCallback } from "react";
+import { StyleSheet, View } from "react-native";
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import * as _VoicePanelConstants from "../../VoicePanelConstants";
+import { LAYOUT_PHYSICS, VoicePanelModes } from "../../VoicePanelConstants";
+import { VoicePanelControlsModes } from "../controls/VoicePanelControlsConstants";
+import { VoicePanelPIPModes } from "../pip/VoicePanelPIPConstants";
+import { EDGE_GUTTER } from "./VoicePanelCardConstants";
+import { isUserParticipant } from "../../../calls/CallConstants";
+import VoicePanelCard from "./VoicePanelCard";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useAnimatedStyle, useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
+import * as _cheapWorkletShallowEqual from "../../../reanimated/native/cheapWorkletShallowEqual";
+import MobileVisualRefreshExperiment from "../../../themes/experiments/MobileVisualRefreshExperiment";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { useToken } from "../../../../design/tokens/native/useToken";
+import Module712 from "../../../../_bundle/Module712";
+import calculateVoicePanelHeaderSpecs from "../header/calculateVoicePanelHeaderSpecs";
+import roundToNearestPixel from "../utils/roundToNearestPixel";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import { usePIPState } from "../pip/VoicePanelPIPStateContext";
+import useRefValue from "../../../../hooks/useRefValue";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import { Freeze } from "../../../../_bundle/Suspender";
+import { useChunkedParticipants } from "../hooks/useVoicePanelParticipants";
+import { useStateFromStoresArray } from "../../../../_bundle/Module589";
+import Module12 from "../../../../_bundle/Module12";
+import { AccessibilityAnnouncer } from "../../../../_bundle/Module3902";
+import { intl, t } from "../../../../intl/index.native";
+import { TransitionGroup } from "../../../../design/components/TransitionGroup/TransitionGroup";
+let SCALE_PHYSICS, renderCard, c11433_18, __initData, __initData2, __initData3, CardContentFreezer;
+const getCardKey = function getCardKey(a0) {
+  return `${a0.type}-${a0.id}`;
+};
+renderCard = function renderCard(a0, a1, a2, a3) {
+  return <VoicePanelCard key={a0} item={a1} transitionState={a2} cleanUp={a3} />;
+};
+CardContentFreezer = function CardContentFreezer({ children }) {
+  let freeze, animatedStyle;
+  freeze = void 0;
+  animatedStyle = void 0;
+  const mode = usePIPState().mode;
+  const ref = useRef(mode === VoicePanelPIPModes.IN_APP);
+  const [, setState] = useState({});
+  useEffect(() => {
+    if (mode === VoicePanelPIPModes.IN_APP) {
+      let c30937_0 = setTimeout(() => {
+        if (!ref.current) {
+          ref.current = true;
+          setState({});
+        }
+      }, 700);
+      return () => {
+        clearTimeout(c30937_0);
+      };
+    }
+    ref.current = false;
+  }, [mode]);
+  const refValue = useRefValue(ref);
+  freeze = mode === VoicePanelPIPModes.IN_APP && refValue;
+  let c22643_0 = freeze;
+  const isRefreshEnabled = MobileVisualRefreshExperiment("VoicePanelCardView");
+  let c22643_1 = isRefreshEnabled;
+  const context = useContext(VoicePanelStateContext);
+  const { connected, controlsSpecs, safeArea, contentDimensions, windowDimensions, mode: mode2, focused, wrapperOffset } = context;
+  const token = useToken(Module712.modules.mobile.VOICE_PANEL_GUTTER);
+  const r65 = function() {
+    let r95;
+    const mode3 = controlsSpecs.get().mode;
+    const HIDDEN = VoicePanelControlsModes.HIDDEN;
+    const r20 = Math.max(safeArea.get().bottom, EDGE_GUTTER);
+    const r38 = calculateVoicePanelHeaderSpecs(safeArea.get(), token);
+    const { height, paddingTop } = r38;
+    const r41 = connected.get();
+    let opacity = 1;
+    let r1 = 0;
+    let r42 = 1;
+    let r43 = 0;
+    if (r41) {
+      let r48 = 0 + paddingTop + contentDimensions.get().height + r20;
+      if (r48 - windowDimensions.get().height < 8) {
+        r48 = windowDimensions.get().height;
+      }
+      const r55 = mode2.get();
+      const PIP = VoicePanelModes.PIP;
+      r1 = 0;
+      r42 = 1;
+      r43 = r48;
+      if (r55 !== PIP) {
+        r1 = 0;
+        r42 = 1;
+        r43 = r48;
+        if (mode3 !== HIDDEN) {
+          const r61 = focused.get() == null;
+          r1 = 0;
+          r42 = 1;
+          r43 = r48;
+          if (r61) {
+            const r68 = r48 - height - EDGE_GUTTER - controlsSpecs.get().height - r20;
+            const r73 = windowDimensions.get().height - paddingTop - r20;
+            const r82 = windowDimensions.get().height - height - controlsSpecs.get().height - r20;
+            if (contentDimensions.get().height > r68) {
+              r95 = r68 / contentDimensions.get().height;
+            } else {
+              const width = windowDimensions.get().width;
+              r95 = c22643_1 ? width / windowDimensions.get().width : (width - 48) / windowDimensions.get().width;
+            }
+            const r109 = contentDimensions.get().height < r73 && contentDimensions.get().height > r82 ? height - ((r73 - contentDimensions.get().height) / 2 - (r82 - contentDimensions.get().height * r95) / 2) * r95 : height;
+            r1 = (contentDimensions.get().height > r68 ? r109 + (r48 * r95 - r48) / 2 : r109 + (r68 - (windowDimensions.get().height - paddingTop - r20)) / 2) - paddingTop * r95;
+            r42 = r95;
+            r43 = r48;
+          }
+        }
+      }
+    }
+    const r145 = {
+      position: "relative",
+      width: windowDimensions.get().width,
+      height: roundToNearestPixel(r43),
+      transform: [{
+        translateY: _spring.withSpring(r1 + wrapperOffset.get().y, !wrapperOffset.get().gestureActive && mode2.get() !== VoicePanelModes.PIP ? SCALE_PHYSICS : LAYOUT_PHYSICS)
+      }, {
+        scale: _spring.withSpring(r42, SCALE_PHYSICS)
+      }],
+      opacity: null
+    };
+    if (c22643_0) {
+      opacity = 0;
+    }
+    r145.opacity = opacity;
+    return r145;
+  };
+  r65.__closure = {
+    controlsSpecs,
+    VoicePanelControlsModes,
+    safeArea,
+    EDGE_GUTTER,
+    calculateVoicePanelHeaderSpecs,
+    edgeGutter: token,
+    connected,
+    contentDimensions,
+    windowDimensions,
+    mode: mode2,
+    VoicePanelModes,
+    focused,
+    isRefreshEnabled,
+    roundToNearestPixel,
+    withSpring: _spring.withSpring,
+    wrapperOffset,
+    LAYOUT_PHYSICS,
+    SCALE_PHYSICS,
+    freeze
+  };
+  r65.__workletHash = 495797244676;
+  r65.__initData = __initData3;
+  animatedStyle = useAnimatedStyle(r65);
+  return useMemo(() => <ReanimatedNativeView style={animatedStyle}>
+    <Freeze freeze={freeze}>
+      <View collapsable={false} style={StyleSheet.absoluteFill}>{children}</View>
+    </Freeze>
+  </ReanimatedNativeView>, [animatedStyle, freeze, children]);
+};
+const { UI_SHOW_HIDE_PHYSICS, VOICE_PANEL_CHUNK_DIVISOR } = _VoicePanelConstants;
+SCALE_PHYSICS = {
+  ...UI_SHOW_HIDE_PHYSICS,
+  mass: 1,
+  restSpeedThreshold: 0.00001
+};
+c11433_18 = {
+  start: 0,
+  end: VOICE_PANEL_CHUNK_DIVISOR
+};
+__initData = {
+  code: "function VoicePanelCardViewTsx1(){const{viewableChunks}=this.__closure;return viewableChunks.get();}"
+};
+__initData2 = {
+  code: "function VoicePanelCardViewTsx2(newChunks,previous){const{cheapWorkletShallowEqual,runOnJS,updateValueIfChange}=this.__closure;if(cheapWorkletShallowEqual(newChunks,previous!==null&&previous!==void 0?previous:undefined))return;runOnJS(updateValueIfChange)(newChunks);}"
+};
+__initData3 = {
+  code: "function VoicePanelCardViewTsx3(){const{controlsSpecs,VoicePanelControlsModes,safeArea,EDGE_GUTTER,calculateVoicePanelHeaderSpecs,edgeGutter,connected,contentDimensions,windowDimensions,mode,VoicePanelModes,focused,isRefreshEnabled,roundToNearestPixel,withSpring,wrapperOffset,LAYOUT_PHYSICS,SCALE_PHYSICS,freeze}=this.__closure;const hidden=controlsSpecs.get().mode===VoicePanelControlsModes.HIDDEN;let height=0;let scale=1;let top=0;const safeAreaBottom=Math.max(safeArea.get().bottom,EDGE_GUTTER);const{height:headerBarHeight,paddingTop:safeAreaTop}=calculateVoicePanelHeaderSpecs(safeArea.get(),edgeGutter);if(connected.get()){height+=safeAreaTop;height+=contentDimensions.get().height;height+=safeAreaBottom;if(height-windowDimensions.get().height<8){height=windowDimensions.get().height;}if(mode.get()!==VoicePanelModes.PIP&&!hidden&&focused.get()==null){const targetHeight=height-headerBarHeight-EDGE_GUTTER-controlsSpecs.get().height-safeAreaBottom;const fullView=windowDimensions.get().height-safeAreaTop-safeAreaBottom;const controlsView=windowDimensions.get().height-headerBarHeight-controlsSpecs.get().height-safeAreaBottom;top=headerBarHeight;scale=function(){if(contentDimensions.get().height>targetHeight){return targetHeight/contentDimensions.get().height;}return isRefreshEnabled?windowDimensions.get().width/windowDimensions.get().width:(windowDimensions.get().width-48)/windowDimensions.get().width;}();if(contentDimensions.get().height<fullView&&contentDimensions.get().height>controlsView){const offsetOriginal=(fullView-contentDimensions.get().height)/2;const scaledContent=contentDimensions.get().height*scale;const scaledOffset=(controlsView-scaledContent)/2;top-=(offsetOriginal-scaledOffset)*scale;}if(contentDimensions.get().height>targetHeight){top+=(height*scale-height)/2;}else{top+=(targetHeight-(windowDimensions.get().height-safeAreaTop-safeAreaBottom))/2;}top-=safeAreaTop*scale;}}return{position:'relative',width:windowDimensions.get().width,height:roundToNearestPixel(height),transform:[{translateY:withSpring(top+wrapperOffset.get().y,wrapperOffset.get().gestureActive||mode.get()===VoicePanelModes.PIP?LAYOUT_PHYSICS:SCALE_PHYSICS)},{scale:withSpring(scale,SCALE_PHYSICS)}],opacity:freeze?0:1};}"
+};
+const r59 = memo(function VoicePanelCardView({ viewableChunks: viewableChunks2 }) {
+  let chunkedParticipants, stateFromStoresArray, ref2;
+  chunkedParticipants = void 0;
+  stateFromStoresArray = void 0;
+  ref2 = void 0;
+  const channelId = useContext(VoicePanelStateContext).channelId;
+  const viewableChunks = viewableChunks2;
+  const [state, setState2] = useState(c11433_18);
+  const callback = useCallback((c30938_0) => {
+    setState2((prevState2) => {
+      const start = prevState2.start;
+      return start === c30938_0.start ? prevState2.end === c30938_0.end ? prevState2 : c30938_0 : c30938_0;
+    });
+  }, []);
+  const h = () => viewableChunks.get();
+  h.__closure = {
+    viewableChunks
+  };
+  h.__workletHash = 1074173860641;
+  h.__initData = __initData;
+  const r34 = function(a0, a1) {
+    if (!_cheapWorkletShallowEqual.cheapWorkletShallowEqual(a0, a1 == null ? void 0 : a1)) {
+      _ReanimatedRexport.runOnJS(callback)(a0);
+    }
+  };
+  r34.__closure = {
+    cheapWorkletShallowEqual: _cheapWorkletShallowEqual.cheapWorkletShallowEqual,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    updateValueIfChange: callback
+  };
+  r34.__workletHash = 13543715159803;
+  r34.__initData = __initData2;
+  useAnimatedReaction(h, r34);
+  chunkedParticipants = useChunkedParticipants(channelId, state);
+  stateFromStoresArray = useStateFromStoresArray([ChannelRTCStore], () => ChannelRTCStore.getParticipants(channelId).filter((item) => isUserParticipant(item)), [channelId]);
+  ref2 = useRef(stateFromStoresArray);
+  useEffect(() => {
+    if (!Module12.isEqual(ref2.current, stateFromStoresArray)) {
+      const r21 = Module12.differenceWith(ref2.current, stateFromStoresArray, (a0, a1) => a0.id === a1.id);
+      const r12 = r21.length > 0 ? r21[0].user : null;
+      if (r12 != null) {
+        AccessibilityAnnouncer.announce(intl.formatToPlainString(t["9NqwWZ"], {
+          username: r12.username
+        }));
+      }
+    }
+    ref2.current = stateFromStoresArray;
+  }, [stateFromStoresArray, channelId]);
+  return useMemo(() => <CardContentFreezer>
+    <TransitionGroup items={chunkedParticipants} renderItem={renderCard} getItemKey={getCardKey} lazyCleanUpDelay={1000} />
+  </CardContentFreezer>, [chunkedParticipants]);
+});
+export default r59;

modules/voice_panel/native/card/VoicePanelNoVideoParticipantsCard.tsx

@@ -0,0 +1,51 @@
+// Metro module 15965 (f15966).
+import { memo, useContext, useCallback } from "react";
+import { Pressable } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import ChannelRTCActionCreators from "../../../../actions/ChannelRTCActionCreators";
+import NativeView from "../../../core/native/NativeView";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+const useStyles = createStyles({
+  container: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 16,
+    backgroundColor: Module712.colors.VOICE_VIDEO_VIDEO_TILE_BACKGROUND
+  },
+  label: {
+    marginBottom: 16,
+    textAlign: "center"
+  },
+  button: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    backgroundColor: "white",
+    borderRadius: Module712.radii.round
+  },
+  buttonText: {
+    color: Module712.unsafe_rawColors.PRIMARY_860
+  }
+});
+const r45 = memo(function VoicePanelNoVideoParticipantsCard() {
+  const channelId = useContext(VoicePanelStateContext).channelId;
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    ChannelRTCActionCreators.toggleVoiceParticipantsHidden(channelId, false);
+  }, [channelId]);
+  return <NativeView style={styles.container}>
+    <Text style={styles.label} variant="text-md/semibold" color="text-overlay-light">
+      {intl.string(t["8eBJ73"])}
+    </Text>
+    <Pressable style={styles.button} onPress={callback} accessibilityRole="button" accessibilityLabel={intl.string(t.kLQySL)}>
+      <Text variant="text-sm/semibold" style={styles.buttonText}>
+        {intl.string(t.kLQySL)}
+      </Text>
+    </Pressable>
+  </NativeView>;
+});
+export default r45;

modules/voice_panel/native/controller/VoicePanelStreamOutputSinkStack.tsx

@@ -0,0 +1,78 @@
+// Metro module 15908 (f15909).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import { useId, useCallback, useEffect } from "react";
+class VoicePanelStreamOutputSinkStack {
+  constructor(a0, r6 = false) {
+    this.activeSinks = new Map();
+    this.timer = -1;
+    this.mediaEngine = a0;
+    if (r6) {
+      this.timer = setInterval(() => this.logSinks(), 2000);
+    }
+  }
+  cleanUp() {
+    clearInterval(this.timer);
+  }
+  logSinks() {
+    const r9 = [];
+    for (const activeSink of this.activeSinks) {
+      const r35 = _slicedToArray(activeSink, 2);
+      r9.push(`[Stream:${r35[0]}, Locks:[${Array.from(r35[1]).join(",")}]]`);
+    }
+  }
+  setHasActiveVideoOutputSink(a0, a1, a2) {
+    let r13 = this.activeSinks.get(a1);
+    if (r13 == null) {
+      r13 = new Set();
+    }
+    const r19 = r13.has(a0);
+    if (a2) {
+      if (r19) {
+        return void 0;
+      }
+      r13.add(a0);
+      if (r13.size === 1) {
+        this.setActive(a1, true, this.sourceId(a0));
+        this.activeSinks.set(a1, r13);
+      }
+    } else {
+      if (!r19) {
+        return void 0;
+      }
+      r13.delete(a0);
+      if (r13.size === 0) {
+        this.setActive(a1, false, this.sourceId(a0));
+        this.activeSinks.delete(a1);
+      }
+    }
+  }
+  clearLock(a0) {
+    for (const activeSink of this.activeSinks) {
+      const [r32, r33] = activeSink;
+      if (r33.has(a0)) {
+        r33.delete(a0);
+        if (r33.size === 0) {
+          const setActive2 = this.setActive;
+          setActive2.call(this, r32, false, this.sourceId(a0));
+          this.activeSinks.delete(r32);
+        }
+      }
+    }
+  }
+  setActive(c22592_0, c22592_1, c22592_2) {
+    this.mediaEngine.eachConnection((a0) => a0.setHasActiveVideoOutputSink(c22592_0, c22592_1, c22592_2));
+  }
+  sourceId(a0) {
+    return `VoicePanelStreamOutputSinkStack-${a0}`;
+  }
+}
+export default VoicePanelStreamOutputSinkStack;
+export function useSetHasActiveVideoOutputSink(a0) {
+  let c22593_0 = a0;
+  const id = useId();
+  const callback = useCallback((a0, a1) => {
+    c22593_0.setHasActiveVideoOutputSink(id, a0, a1);
+  }, [id, a0]);
+  useEffect(() => () => c22593_0.clearLock(id), [id, callback, a0]);
+  return callback;
+}

modules/voice_panel/native/controller/usePanelOpenState.tsx

@@ -0,0 +1,86 @@
+// Metro module 15917 (f15918).
+import { useEffect, useState } from "react";
+import VoicePanelStore from "../../VoicePanelStore";
+import { VoicePanelModes } from "../../VoicePanelConstants";
+import { ComponentActions, Routes } from "../../../../Constants";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
+import { ComponentDispatch } from "../../../../utils/ComponentDispatchUtils";
+import RouteManager from "../../../routing/RouteManager";
+import { matchPath } from "../../../routing/matchPathCompat";
+import { RouteParam } from "../../../routing/RouteUtils";
+import { extractParamsFromVoiceModalRoute } from "../../../routing/native/RouteManagerUtils";
+import closeVoicePanels from "../utils/closeVoicePanels";
+const __initData = {
+  code: "function usePanelOpenStateTsx1(){const{connected}=this.__closure;return{connected:connected.get()};}"
+};
+const __initData2 = {
+  code: "function usePanelOpenStateTsx2(props,previous){const{runOnJS,doCloseChannel}=this.__closure;const isConnected=props.connected;const wasConnected=(previous===null||previous===void 0?void 0:previous.connected)===true;if(wasConnected&&!isConnected){runOnJS(doCloseChannel)();}}"
+};
+export default function usePanelOpenState(a0, a1, a2, a3) {
+  let c22602_0 = a0;
+  let c22602_1 = a1;
+  const doCloseChannel2 = function doCloseChannel() {
+    return VoicePanelStore.getState().closeChannel(c22602_0);
+  };
+  const f = () => ({
+    connected: a3.get()
+  });
+  f.__closure = {
+    connected: a3
+  };
+  f.__workletHash = 8350408810765;
+  f.__initData = __initData;
+  const O = function O({ connected }, a1) {
+    if (a1?.connected === true && !connected) {
+      _ReanimatedRexport.runOnJS(doCloseChannel2)();
+    }
+  };
+  O.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    doCloseChannel: doCloseChannel2
+  };
+  O.__workletHash = 9166012598595;
+  O.__initData = __initData2;
+  useAnimatedReaction(f, O);
+  useEffect(() => {
+    let componentActionClose2;
+    const componentActionOpen2 = function componentActionOpen(a0) {
+      if (c22602_0 === a0.channelId && c22602_1.get() !== VoicePanelModes.PANEL) {
+        a2(VoicePanelModes.PANEL);
+      }
+    };
+    componentActionClose2 = function componentActionClose() {
+      if (a3.get()) {
+        if (c22602_1.get() !== VoicePanelModes.PIP) {
+          a2(VoicePanelModes.PIP);
+        }
+      } else {
+        VoicePanelStore.getState().closeChannel(c22602_0);
+      }
+    };
+    ComponentDispatch.subscribe(ComponentActions.VOICE_PANEL_OPEN, componentActionOpen2);
+    ComponentDispatch.subscribe(ComponentActions.VOICE_PANEL_CLOSE, componentActionClose2);
+    return () => {
+      ComponentDispatch.unsubscribe(ComponentActions.VOICE_PANEL_OPEN, componentActionOpen2);
+      ComponentDispatch.unsubscribe(ComponentActions.VOICE_PANEL_CLOSE, componentActionClose2);
+    };
+  }, [a0, a1, a2, a3]);
+  const [state, setState] = useState(() => RouteManager.getHistory().location.pathname);
+  useEffect(() => {
+    let c28182_0 = RouteManager.addRouteChangeListener((a0) => {
+      if (state !== a0.pathname) {
+        setState(state);
+        const r30 = matchPath(a0.pathname, {
+          path: Routes.CHANNEL(RouteParam.guildId(), RouteParam.channelId())
+        });
+        if (extractParamsFromVoiceModalRoute(a0).voiceChannelId == null && !(r30 != null && r30.params.channelId === c22602_0)) {
+          closeVoicePanels();
+        }
+      }
+    });
+    return () => {
+      c28182_0();
+    };
+  }, [a0, state]);
+};

modules/voice_panel/native/controls/VoicePanelChatView.tsx

@@ -0,0 +1,127 @@
+// Metro module 11432 (f11433).
+import { memo, useCallback, useContext, useRef, useEffect } from "react";
+import { Platform } from "react-native";
+import { CONTROLS_DRAWER_HEADER_SIZE } from "./VoicePanelControlsConstants";
+import { ComponentActions, ME } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import ChannelRTCActionCreators from "../../../../actions/ChannelRTCActionCreators";
+import MobileVisualRefreshExperiment from "../../../themes/experiments/MobileVisualRefreshExperiment";
+import { ComponentDispatch } from "../../../../utils/ComponentDispatchUtils";
+import ChatFloatingNavButton from "../../../chat_input/native/ChatFloatingNavButton";
+import { intl, t } from "../../../../intl/index.native";
+import Module4144 from "../../../../_bundle/Module4144";
+import { IconButton } from "../../../../design/components/Button/native/IconButton.native";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import ThemedGradient from "../../../client_themes/native/ThemedGradient";
+import { useGradientTop } from "../../../client_themes/native/ClientThemesOverrides";
+import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { getControlsDrawerOpenWidth } from "../utils/VoicePanelControlsUtils";
+import ChannelActionCreators from "../../../../actions/ChannelActionCreators";
+import useColorThemeBackground from "../../../client_themes/native/useColorThemeBackground";
+import ChatViewWidthContext from "../../../chat/native/ChatViewWidthContext";
+import { ThemeContextProvider } from "../../../../_bundle/Module3901";
+import { AccessibilityView } from "../../../../design/components/AccessibilityView/AccessibilityView.native";
+import VoicePanelControlsDrawerTitle from "./VoicePanelControlsDrawerTitle";
+import ChatView from "../../../chat/native/ChatView";
+let __initData, Component;
+Platform;
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    overflow: "hidden",
+    paddingTop: CONTROLS_DRAWER_HEADER_SIZE
+  },
+  gradientWrapper: {
+    position: "absolute",
+    top: CONTROLS_DRAWER_HEADER_SIZE,
+    left: 0
+  },
+  titleBlur: {
+    opacity: 0
+  }
+});
+const r39 = memo(function VoicePanelDismissChatButton() {
+  const r13 = MobileVisualRefreshExperiment("VoicePanelDismissChatButton");
+  const callback = useCallback(() => {
+    ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_TIV_CLOSE);
+  }, []);
+  return r13 ? <ChatFloatingNavButton accessibilityLabel={intl.string(t["5MstTl"])} icon={Module4144} onPress={callback} /> : <IconButton accessibilityLabel={intl.string(t["5MstTl"])} icon={Module4144} onPress={callback} variant="primary-overlay" />;
+});
+__initData = {
+  code: "function VoicePanelChatViewTsx1(){const{windowDimensions}=this.__closure;return{width:windowDimensions.get().width,height:windowDimensions.get().height};}"
+};
+Component = memo(function() {
+  const windowDimensions = useContext(VoicePanelStateContext).windowDimensions;
+  const styles = useStyles();
+  const n = () => ({
+    width: windowDimensions.get().width,
+    height: windowDimensions.get().height
+  });
+  n.__closure = {
+    windowDimensions
+  };
+  n.__workletHash = 16775846409623;
+  n.__initData = __initData;
+  return <ReanimatedNativeView style={[styles.gradientWrapper, useAnimatedStyle(n)]}>
+    <ThemedGradient absolute />
+  </ReanimatedNativeView>;
+});
+const r46 = memo(function VoicePanelChatView(props) {
+  const shown = props.shown;
+  const styles = useStyles();
+  const ref = useRef(null);
+  const context = useContext(VoicePanelStateContext);
+  let guildId2 = context.guildId;
+  const guildId = guildId2;
+  const channelId = context.channelId;
+  const gradientTop = useGradientTop();
+  const width = useWindowDimensions_native().width;
+  const safeAreaInsets_native = useSafeAreaInsets_native();
+  const controlsDrawerOpenWidth = getControlsDrawerOpenWidth(width, safeAreaInsets_native.left, safeAreaInsets_native.right);
+  useEffect(() => {
+    let r8 = guildId;
+    if (guildId == null) {
+      r8 = ME;
+    }
+    ChannelActionCreators.preload(r8, channelId);
+    return () => {
+      ChannelRTCActionCreators.updateChatOpen(channelId, false);
+    };
+  }, [guildId, channelId]);
+  useEffect(() => {
+    ChannelRTCActionCreators.updateChatOpen(channelId, shown);
+    const current = ref.current;
+    if (shown) {
+      if (current != null) {
+        current.chatInputTrackerRegister();
+      }
+    } else {
+      if (current != null) {
+        current.chatInputTrackerUnregister();
+      }
+      const current2 = ref.current;
+      if (current2 != null) {
+        current2.blur();
+      }
+    }
+  }, [channelId, shown]);
+  const callback = useCallback(() => {
+    ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_TIV_CLOSE);
+  }, []);
+  const colorThemeBackground = useColorThemeBackground();
+  const r74 = [<Component />, <VoicePanelControlsDrawerTitle title={intl.string(t["/VQax8"])} disablePill blurStyle={styles.titleBlur} />, ,];
+  if (guildId == null) {
+    guildId2 = ME;
+  }
+  r74[2] = <ChatView disableGradient alwaysRespectKeyboard={false} setNoExtractUI={false} guildId={guildId2} channelId={channelId} chatInputRef={ref} screenIndex="voice-panel" />;
+  return <ChatViewWidthContext.Provider value={controlsDrawerOpenWidth}>
+    <ThemeContextProvider gradient={colorThemeBackground}>
+      <AccessibilityView nativeID="voice-panel-chat-view" accessibilityViewIsModal={shown} onAccessibilityEscape={callback} style={[styles.container, gradientTop]}>{r74}</AccessibilityView>
+    </ThemeContextProvider>
+  </ChatViewWidthContext.Provider>;
+});
+export default r46;
+export { r39 as MemoedVoicePanelDismissChatButton };

modules/voice_panel/native/controls/VoicePanelConsoleStatus.tsx

@@ -0,0 +1,158 @@
+// Metro module 16000 (f16001).
+import { useContext, useEffect } from "react";
+import { MODE_CHANGE_PHYSICS } from "../../VoicePanelConstants";
+import { EDGE_GUTTER } from "../card/VoicePanelCardConstants";
+import { CONTROLS_HEIGHT } from "./VoicePanelControlsConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import useConsoleConnectingInfo from "../hooks/useConsoleConnectingInfo";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import { TransitionStates } from "../../../../design/components/TransitionGroup/TransitionGroup";
+import useControlsTranslation from "../hooks/useControlsTranslation";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import NativeView from "../../../core/native/NativeView";
+import { Icon, IconSizes } from "../../../../design/void/native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import { disconnectRemote } from "../../../game_console/GameConsoleActionCreators";
+import { intl, t } from "../../../../intl/index.native";
+import { VoicePanelVisualEffectView } from "../shared/VoicePanelVisualEffectView";
+let useStyles, FADE_IN_MODE_PHYSICS, __initData, __initData2, __initData3;
+const VoicePanelConsoleStatus = function VoicePanelConsoleStatus(props) {
+  const { wrapperSpecs, accessoryHeights, state, cleanUp } = props;
+  const styles = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const { channelId, windowDimensions, mode } = context;
+  const consoleConnectingInfo = useConsoleConnectingInfo(channelId);
+  const { icon, text, color, displayCancel } = consoleConnectingInfo;
+  const sharedValue = useSharedValue(false);
+  useEffect(() => {
+    sharedValue.set(state !== TransitionStates.YEETED);
+  }, [sharedValue, state]);
+  const controlsTranslation = useControlsTranslation(mode, wrapperSpecs, accessoryHeights);
+  const v = function v() {
+    const r3 = {
+      backgroundColor: color,
+      width: windowDimensions.get().width - 2 * EDGE_GUTTER,
+      height: CONTROLS_HEIGHT + 36,
+      borderRadius: 32,
+      transform: null
+    };
+    const r32 = sharedValue.get() ? 0 : 100;
+    const n = function n(a0) {
+      if (a0 ? !sharedValue.get() : a0) {
+        _ReanimatedRexport.runOnJS(cleanUp)();
+      }
+    };
+    n.__closure = {
+      shouldShow: sharedValue,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      cleanUp
+    };
+    n.__workletHash = 9820708059867;
+    n.__initData = __initData2;
+    r3.transform = [{
+      translateY: _spring.withSpring(r32, FADE_IN_MODE_PHYSICS, "respect-motion-settings", n)
+    }];
+    return r3;
+  };
+  v.__closure = {
+    color,
+    windowDimensions,
+    EDGE_GUTTER,
+    CONTROLS_HEIGHT,
+    CONSOLE_STATUS_HEIGHT: 36,
+    withSpring: _spring.withSpring,
+    shouldShow: sharedValue,
+    FADE_IN_MODE_PHYSICS,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    cleanUp
+  };
+  v.__workletHash = 14156265059426;
+  v.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(v);
+  const V = function V() {
+    return {
+      width: windowDimensions.get().width - 2 * EDGE_GUTTER
+    };
+  };
+  V.__closure = {
+    windowDimensions,
+    EDGE_GUTTER
+  };
+  V.__workletHash = 2418678233810;
+  V.__initData = __initData3;
+  const animatedStyle2 = useAnimatedStyle(V);
+  return <ReanimatedRexport.View style={[styles.consoleParentContainer, controlsTranslation]}>
+    <NativeView style={[styles.consoleContainer]}>
+      <ReanimatedRexport.View style={animatedStyle}>
+        <NativeView style={styles.consoleItemContainer}>
+          <Icon source={icon} color={Module712.unsafe_rawColors.WHITE} size={IconSizes.SMALL} />
+          <Text variant="text-sm/medium" color="text-overlay-light" style={styles.consoleText}>{text}</Text>
+          {displayCancel ? <PressableOpacity hitSlop={4} onPress={disconnectRemote}>
+            <Text variant="text-sm/medium" color="text-overlay-light">
+              {intl.string(t["ETE/oC"])}
+            </Text>
+          </PressableOpacity> : null}
+        </NativeView>
+      </ReanimatedRexport.View>
+    </NativeView>
+    <ReanimatedRexport.View style={[styles.blockingControlCover, animatedStyle2]}>
+      <VoicePanelVisualEffectView />
+    </ReanimatedRexport.View>
+  </ReanimatedRexport.View>;
+};
+useStyles = createStyles({
+  consoleParentContainer: {
+    zIndex: 1,
+    position: "absolute",
+    bottom: 0,
+    overflow: "hidden",
+    left: -0.5,
+    right: 0,
+    alignItems: "center"
+  },
+  consoleContainer: {
+    borderRadius: Module712.modules.mobile.VOICE_PANEL_CONTROLS_BORDER_RADIUS,
+    overflow: "hidden"
+  },
+  consoleItemContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 36,
+    marginHorizontal: 18
+  },
+  consoleText: {
+    textAlign: "left",
+    marginStart: 4,
+    flex: 1
+  },
+  blockingControlCover: {
+    position: "absolute",
+    bottom: 0,
+    borderRadius: Module712.modules.mobile.VOICE_PANEL_CONTROLS_BORDER_RADIUS,
+    flex: 1,
+    height: CONTROLS_HEIGHT,
+    overflow: "hidden"
+  }
+});
+FADE_IN_MODE_PHYSICS = {
+  ...MODE_CHANGE_PHYSICS,
+  overshootClamping: true
+};
+__initData = {
+  code: "function VoicePanelConsoleStatusTsx1(){const{color,windowDimensions,EDGE_GUTTER,CONTROLS_HEIGHT,CONSOLE_STATUS_HEIGHT,withSpring,shouldShow,FADE_IN_MODE_PHYSICS,runOnJS,cleanUp}=this.__closure;return{backgroundColor:color,width:windowDimensions.get().width-EDGE_GUTTER*2,height:CONTROLS_HEIGHT+CONSOLE_STATUS_HEIGHT,borderRadius:32,transform:[{translateY:withSpring(shouldShow.get()?0:100,FADE_IN_MODE_PHYSICS,'respect-motion-settings',function(finished){if(finished&&!shouldShow.get()){runOnJS(cleanUp)();}})}]};}"
+};
+__initData2 = {
+  code: "function VoicePanelConsoleStatusTsx2(finished){const{shouldShow,runOnJS,cleanUp}=this.__closure;if(finished&&!shouldShow.get()){runOnJS(cleanUp)();}}"
+};
+__initData3 = {
+  code: "function VoicePanelConsoleStatusTsx3(){const{windowDimensions,EDGE_GUTTER}=this.__closure;return{width:windowDimensions.get().width-EDGE_GUTTER*2};}"
+};
+export default VoicePanelConsoleStatus;
+export const CONSOLE_STATUS_HEIGHT = 36;
+export function renderVoicePanelConsoleStatus(a0, a1, a2, a3) {
+  return <VoicePanelConsoleStatus key={a0} {...a1} state={a2} cleanUp={a3} />;
+}

modules/voice_panel/native/controls/VoicePanelControls.tsx

@@ -0,0 +1,927 @@
+// Metro module 15991 (f15992).
+import * as Module19 from "react";
+import { useMemo, useLayoutEffect, useRef, useContext, useEffect, useState, useCallback, useId } from "react";
+import { View, StyleSheet } from "react-native";
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import { BORDER_RADIUS_PHYSICS, MODE_CHANGE_PHYSICS, PANEL_CONTROLS_HEIGHT_PHYSICS, UI_SHOW_HIDE_PHYSICS, VoicePanelModes } from "../../VoicePanelConstants";
+import { CALL_TILE_GUTTER, EDGE_GUTTER } from "../card/VoicePanelCardConstants";
+import { CONTROLS_DRAWER_HEADER_EXPANDED_SIZE, VoicePanelControlsModes } from "./VoicePanelControlsConstants";
+import { ComponentActions, ThemeTypes } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { isMetaQuest } from "../../../device/MetaQuestUtils.android";
+import useDrawerToggle from "./useDrawerToggle";
+import { ActionSheetDragHandle } from "../../../../design/components/experimental/native";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useAnimatedStyle, LayoutAnimationConfig, useSharedValue, useAnimatedProps, useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
+import { createUseAnimatedScrollLock, ControlsGestureScrollLock } from "./utils/createUseAnimatedScrollLock";
+import useControlsLock from "./useControlsLock";
+import { useToken } from "../../../../design/tokens/native/useToken";
+import * as _Module5273 from "../../../../_bundle/Module5273";
+import { Gesture, GestureDetector } from "../../../../_bundle/Module5273";
+import * as _trackVoicePanelTabOpened from "./trackVoicePanelTabOpened";
+import trackVoicePanelTabOpened from "./trackVoicePanelTabOpened";
+import calculateVoicePanelHeaderSpecs from "../header/calculateVoicePanelHeaderSpecs";
+import * as _VoicePanelControlsUtils from "../utils/VoicePanelControlsUtils";
+import * as _HapticUtils_native from "../../../haptics/HapticUtils.native";
+import { useIsScreenReaderEnabled } from "../../../a11y/native/useIsScreenReaderEnabled.native";
+import useWindowDimensionsSharedValue_native from "../../../screen/useWindowDimensionsSharedValue.native";
+import * as _cheapWorkletShallowEqual from "../../../reanimated/native/cheapWorkletShallowEqual";
+import * as _VoicePanelControlUtils from "./utils/VoicePanelControlUtils";
+import { useShouldShowFloatingCTA } from "./utils/VoicePanelFloatingCTAUtils";
+import useConsoleConnectingInfo from "../hooks/useConsoleConnectingInfo";
+import { TransitionItem } from "../../../../design/components/TransitionGroup/TransitionGroup";
+import { renderVoicePanelFloatingCTA } from "./VoicePanelFloatingCTAContainer";
+import { renderVoicePanelConsoleStatus } from "./VoicePanelConsoleStatus";
+import useRefValue from "../../../../hooks/useRefValue";
+import useControlsButtons from "./useControlsButtons";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import MobileVisualRefreshExperiment from "../../../themes/experiments/MobileVisualRefreshExperiment";
+import useIsConnectedToVoiceChannel from "../hooks/useIsConnectedToVoiceChannel";
+import { useMaybeFetchSoundboardSounds } from "../../../soundboard/native/SoundboardHooks";
+import { batchUpdates } from "../../../../_bundle/Module705";
+import useControlAccessoryHeight from "../hooks/useControlAccessoryHeight";
+import { ComponentDispatch } from "../../../../utils/ComponentDispatchUtils";
+import { getSafeAreaInsets } from "../../../safe_area/useSafeAreaInsets.native";
+import { getWindowDimensions } from "../../../screen/useWindowDimensions.native";
+import roundToNearestPixel from "../utils/roundToNearestPixel";
+import VoicePanelControlsDimOverlay from "./VoicePanelControlsDimOverlay";
+import VoicePanelAccessibilityView from "../VoicePanelAccessibilityView";
+import { ThemeContextProvider } from "../../../../_bundle/Module3901";
+import { VoicePanelVisualEffectView } from "../shared/VoicePanelVisualEffectView";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import VoicePanelControlsDrawer from "./VoicePanelControlsDrawer";
+let __initData, __initData2, __initData3, __initData4, __initData5, __initData6, __initData7, __initData8, __initData9, __initData10, __initData11, Component, __initData12, VoicePanelButtonsInner, __initData13, __initData14, __initData15, __initData16, __initData17, __initData18;
+const useStyles = createStyles({
+  accessibilityWrapper: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1
+  },
+  wrapper: {
+    position: "absolute",
+    bottom: 0,
+    left: "50%",
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: Module712.modules.mobile.VOICE_PANEL_CONTROLS_BORDER_RADIUS
+  },
+  buttonsWrapper: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    zIndex: 20,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginHorizontal: Module712.space.PX_16
+  },
+  actionSheetDragHandleWrapper: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 21
+  }
+});
+const TRANSITIONAL_HEIGHT = 200;
+const interFloatingTransitionHeight = 200;
+const SCROLL_BEGIN_GRACE_TICKS = isMetaQuest() ? 15 : 5;
+let Component2 = Module19.memo(function({ openTab: openTab2 }) {
+  const styles = useStyles();
+  const drawerToggle = useDrawerToggle(openTab2);
+  return <View style={styles.actionSheetDragHandleWrapper}>
+    <ActionSheetDragHandle onPress={drawerToggle.handlePress} overlay accessibilityLabel={drawerToggle.accessibilityLabel} aria-hidden={drawerToggle.ariaHidden} />
+  </View>;
+});
+__initData = {
+  code: "function VoicePanelControlsTsx1(){const{scrollLock,isDragScrolling,runOnJS,gestureLock}=this.__closure;scrollLock.set(false);isDragScrolling.set(false);runOnJS(gestureLock.unlock)();}"
+};
+__initData2 = {
+  code: "function VoicePanelControlsTsx2({velocityY:velocityY}){const{wrapperSpecs,wrapperDimensions,calculateVoicePanelHeaderSpecs,safeArea,edgeGutter,controlsSpecs,VoicePanelControlsModes,gestureSpecs,scrollLock,isDragScrolling,runOnJS,gestureLock}=this.__closure;const absoluteVelocity=Math.abs(velocityY);let resultingControlMode;if(absoluteVelocity>200&&velocityY<0){wrapperSpecs.set({...wrapperSpecs.get(),height:wrapperDimensions.get().drawerHeight-calculateVoicePanelHeaderSpecs(safeArea.get(),edgeGutter).height});if(controlsSpecs.get().mode===VoicePanelControlsModes.DRAWER){resultingControlMode=VoicePanelControlsModes.RESET;}else{resultingControlMode=VoicePanelControlsModes.DRAWER;}}else if(absoluteVelocity<200&&gestureSpecs.get().isDrawer){if(controlsSpecs.get().mode===VoicePanelControlsModes.DRAWER){resultingControlMode=VoicePanelControlsModes.RESET;}else{resultingControlMode=VoicePanelControlsModes.DRAWER;}}else{if(controlsSpecs.get().mode===VoicePanelControlsModes.FLOATING_DEFAULT){resultingControlMode=VoicePanelControlsModes.RESET;}else{resultingControlMode=VoicePanelControlsModes.FLOATING_DEFAULT;}}scrollLock.set(false);isDragScrolling.set(false);runOnJS(gestureLock.unlock)(resultingControlMode);}"
+};
+__initData3 = {
+  code: "function VoicePanelControlsTsx3(){const{scrollLock,isDragScrolling,gestureSpecs,runOnJS,gestureLock}=this.__closure;console.log('ZZZZZ - ControlsGesture.onTouchesCancelled');scrollLock.set(false);isDragScrolling.set(false);gestureSpecs.set({...gestureSpecs.get(),active:false});runOnJS(gestureLock.unlock)();}"
+};
+__initData4 = {
+  code: "function VoicePanelControlsTsx4(event){const{gestureSpecs,calculateVoicePanelHeaderSpecs,safeArea,edgeGutter,wrapperSpecs,getControlsDrawerOpenWidth,windowDimensions,wrapperDimensions,controlsSpecs,runOnJS,triggerHapticFeedback,HapticFeedbackTypes,getControlsDefaultWidth}=this.__closure;const change=event.absoluteY-gestureSpecs.get().absoluteY;const newHeight=gestureSpecs.get().height-gestureSpecs.get().y-change;if(newHeight>gestureSpecs.get().drawerTransitionHeight){if(!gestureSpecs.get().isDrawer){gestureSpecs.set({...gestureSpecs.get(),isDrawer:true});}const headerHeight=calculateVoicePanelHeaderSpecs(safeArea.get(),edgeGutter).height;wrapperSpecs.set({...wrapperSpecs.get(),x:0,y:0,width:getControlsDrawerOpenWidth(windowDimensions.get().width,safeArea.get().left,safeArea.get().right),height:Math.min(newHeight,wrapperDimensions.get().drawerHeight-headerHeight),drawerMode:true});}else{const progress=newHeight/gestureSpecs.get().drawerTransitionHeight;const floatingHeight=controlsSpecs.get().height;const yOffset=Math.max(newHeight-safeArea.get().bottom-floatingHeight,0)*-1;const newChange=yOffset*(1-progress/1.5);if(gestureSpecs.get().isDrawer){gestureSpecs.set({...gestureSpecs.get(),isDrawer:false});}if(floatingHeight!==wrapperSpecs.get().height&&!wrapperSpecs.get().drawerMode){runOnJS(triggerHapticFeedback)(HapticFeedbackTypes.IMPACT_MEDIUM);}wrapperSpecs.set({...wrapperSpecs.get(),x:0,y:safeArea.get().bottom*-1+newChange,width:getControlsDefaultWidth(windowDimensions.get().width,safeArea.get().left,safeArea.get().right),height:floatingHeight,drawerMode:false});}}"
+};
+__initData5 = {
+  code: "function VoicePanelControlsTsx5(event,manager){const{State,gestureSpecs,controlsSpecs,VoicePanelControlsModes,touchMoveCount,SCROLL_BEGIN_GRACE_TICKS,isDragScrolling,sharedTab,scrollOffsetValue,GESTURE_VERTICAL_MINIMUM,wrapperSpecs,TRANSITIONAL_HEIGHT,INTER_FLOATING_TRANSITIONAL_HEIGHT,tab,runOnJS,openTab,VoicePanelTabAnalyticsSources,scrollLock}=this.__closure;if(event.state!==State.BEGAN||gestureSpecs.get().active)return;if(controlsSpecs.get().mode===VoicePanelControlsModes.HIDDEN){manager.fail();return;}touchMoveCount.set(touchMoveCount.get()+1);const isDragging=touchMoveCount.get()<=SCROLL_BEGIN_GRACE_TICKS?true:isDragScrolling.get();const scrollOffset=function(){switch(sharedTab.get()){case'settings':case'app_launcher':return scrollOffsetValue.get();default:return 0;}}();const{absoluteY:absoluteY,absoluteX:absoluteX}=event.changedTouches[0];const computed=gestureSpecs.get().absoluteY-absoluteY;if(controlsSpecs.get().mode===VoicePanelControlsModes.DRAWER&&isDragging&&(computed>=0||scrollOffset>0)){return;}if(controlsSpecs.get().mode===VoicePanelControlsModes.FLOATING_DEFAULT&&computed>GESTURE_VERTICAL_MINIMUM||controlsSpecs.get().mode===VoicePanelControlsModes.DRAWER&&(computed<-GESTURE_VERTICAL_MINIMUM||computed>GESTURE_VERTICAL_MINIMUM)){gestureSpecs.set({absoluteX:absoluteX,absoluteY:absoluteY,x:wrapperSpecs.get().x,y:wrapperSpecs.get().y,height:wrapperSpecs.get().height,isDrawer:controlsSpecs.get().mode===VoicePanelControlsModes.DRAWER,active:true,drawerTransitionHeight:TRANSITIONAL_HEIGHT,interFloatingTransitionHeight:INTER_FLOATING_TRANSITIONAL_HEIGHT});if(controlsSpecs.get().mode!==VoicePanelControlsModes.DRAWER&&tab!=='settings'){runOnJS(openTab)({tab:'settings',source:VoicePanelTabAnalyticsSources.GESTURE,disableControlsUpdate:true});}scrollLock.set(true);manager.activate();}else if(Math.abs(computed)>Math.abs(GESTURE_VERTICAL_MINIMUM)){manager.fail();}}"
+};
+__initData6 = {
+  code: "function VoicePanelControlsTsx6(){const{runOnJS,gestureLock}=this.__closure;runOnJS(gestureLock.lock)();}"
+};
+__initData7 = {
+  code: "function VoicePanelControlsTsx7(event){const{touchMoveCount,gestureSpecs,wrapperSpecs,controlsSpecs,VoicePanelControlsModes,TRANSITIONAL_HEIGHT,INTER_FLOATING_TRANSITIONAL_HEIGHT}=this.__closure;touchMoveCount.set(0);gestureSpecs.set({absoluteX:event.changedTouches[0].absoluteX,absoluteY:event.changedTouches[0].absoluteY,x:wrapperSpecs.get().x,y:wrapperSpecs.get().y,height:wrapperSpecs.get().height,isDrawer:controlsSpecs.get().mode===VoicePanelControlsModes.DRAWER,active:false,drawerTransitionHeight:TRANSITIONAL_HEIGHT,interFloatingTransitionHeight:INTER_FLOATING_TRANSITIONAL_HEIGHT});}"
+};
+__initData8 = {
+  code: "function VoicePanelControlsTsx8(){const{wrapperSpecs}=this.__closure;return wrapperSpecs.get().drawerMode;}"
+};
+__initData9 = {
+  code: "function VoicePanelControlsTsx9(current,previous){const{runOnJS,triggerHapticFeedback,HapticFeedbackTypes}=this.__closure;if(current===previous)return;runOnJS(triggerHapticFeedback)(HapticFeedbackTypes.IMPACT_MEDIUM);}"
+};
+__initData10 = {
+  code: "function VoicePanelControlsTsx10(){const{connected,controlsSpecs,mode,windowDimensions,windowDimensionsIgnoringKeyboard,safeArea}=this.__closure;return{connected:connected.get(),currentControlsMode:controlsSpecs.get().mode,mode:mode.get(),windowWidth:windowDimensions.get().width,windowHeight:windowDimensions.get().height,windowHeightIgnoringKeyboard:windowDimensionsIgnoringKeyboard.get().height,controlsHeightValue:controlsSpecs.get().height,safeArea:safeArea.get()};}"
+};
+__initData11 = {
+  code: "function VoicePanelControlsTsx11(props,previous){const{cheapWorkletShallowEqual,VoicePanelModes,wrapperSpecs,VoicePanelControlsModes,runOnJS,setControlsMode,isScreenReaderEnabled,EDGE_GUTTER,getControlsDefaultWidth,getDrawerSpec,getControlsDrawerOpenWidth}=this.__closure;var _previous$currentCont;if(cheapWorkletShallowEqual(props,previous!==null&&previous!==void 0?previous:undefined))return;const{currentControlsMode:currentControlsMode,mode:mode,windowWidth:windowWidth,windowHeightIgnoringKeyboard:windowHeightIgnoringKeyboard,controlsHeightValue:controlsHeightValue,safeArea:safeArea}=props;switch(mode){case VoicePanelModes.DISMISSED:case VoicePanelModes.PIP:if(!wrapperSpecs.get().hidden){wrapperSpecs.set({...wrapperSpecs.get(),hidden:true});}return;case VoicePanelModes.PANEL:default:break;}switch(currentControlsMode){case VoicePanelControlsModes.RESET:runOnJS(setControlsMode)({mode:(_previous$currentCont=previous===null||previous===void 0?void 0:previous.currentControlsMode)!==null&&_previous$currentCont!==void 0?_previous$currentCont:VoicePanelControlsModes.FLOATING_DEFAULT});return;case VoicePanelControlsModes.HIDDEN:if(isScreenReaderEnabled){wrapperSpecs.set({...wrapperSpecs.get(),hidden:false});break;}if(!wrapperSpecs.get().hidden){wrapperSpecs.set({...wrapperSpecs.get(),hidden:true});}break;case VoicePanelControlsModes.FLOATING_DEFAULT:wrapperSpecs.set({x:0,y:Math.max(safeArea.bottom,EDGE_GUTTER)*-1,width:getControlsDefaultWidth(windowWidth,safeArea.left,safeArea.right),height:controlsHeightValue,drawerMode:false,hidden:false});break;case VoicePanelControlsModes.DRAWER:const{minHeight:minHeight,maxHeight:maxHeight}=getDrawerSpec(windowHeightIgnoringKeyboard,safeArea.top);const heightMidpoint=(maxHeight+minHeight)/2;let height;if(wrapperSpecs.get().height<=controlsHeightValue){height=maxHeight;}else if(previous!=null&&wrapperSpecs.get().height===getDrawerSpec(previous.windowHeight,previous.safeArea.top).maxHeight){height=maxHeight;}else if(wrapperSpecs.get().height>=heightMidpoint){height=maxHeight;}else{height=minHeight;}wrapperSpecs.set({x:0,y:0,width:getControlsDrawerOpenWidth(windowWidth,safeArea.left,safeArea.right),height:height,drawerMode:true,hidden:false});break;}}"
+};
+Component = Module19.memo(function({ channelId: channelId2, wrapperSpecs, controlsSpecs, accessoryHeights, gestureState }) {
+  const shouldShowFloatingCTA = useShouldShowFloatingCTA(channelId2);
+  const controlsLock = useControlsLock();
+  let c22699_4 = controlsLock;
+  const consoleConnectingInfo = useConsoleConnectingInfo(channelId2);
+  const { isConnectingToConsole, isConnectingOrConnectedToConsole } = consoleConnectingInfo;
+  const memo = useMemo(() => ({
+    wrapperSpecs,
+    controlsSpecs,
+    accessoryHeights,
+    gestureState
+  }), [wrapperSpecs, controlsSpecs, accessoryHeights, gestureState]);
+  useLayoutEffect(() => {
+    if (isConnectingToConsole) {
+      c22699_4.lock();
+    } else {
+      c22699_4.unlock();
+    }
+  }, [isConnectingToConsole, controlsLock]);
+  return <>
+    {[<TransitionItem item={shouldShowFloatingCTA ? memo : void 0} renderItem={renderVoicePanelFloatingCTA} />, <TransitionItem item={isConnectingOrConnectedToConsole ? memo : void 0} renderItem={renderVoicePanelConsoleStatus} />]}
+  </>;
+});
+__initData12 = {
+  code: "function VoicePanelControlsTsx12(){const{controlsSpecs,connected,sharedTab,wrapperSpecs,TRANSITIONAL_HEIGHT,CONTROLS_DRAWER_HEADER_EXPANDED_SIZE,withSpring,MODE_CHANGE_PHYSICS}=this.__closure;const showPushToTalkText=controlsSpecs.get().pushToTalk&&connected.get();const height=sharedTab.get()==='settings'&&wrapperSpecs.get().height>=TRANSITIONAL_HEIGHT?CONTROLS_DRAWER_HEADER_EXPANDED_SIZE:controlsSpecs.get().height;const translateY=function(){return sharedTab.get()!=='settings'&&wrapperSpecs.get().height>=TRANSITIONAL_HEIGHT?-controlsSpecs.get().height:0;}();return{top:showPushToTalkText?-4:0,height:withSpring(height,MODE_CHANGE_PHYSICS),opacity:withSpring(sharedTab.get()!=='settings'&&wrapperSpecs.get().height>=TRANSITIONAL_HEIGHT?0:1,MODE_CHANGE_PHYSICS),transform:[{translateY:withSpring(translateY,MODE_CHANGE_PHYSICS)},{scale:withSpring(sharedTab.get()!=='settings'&&wrapperSpecs.get().height>=TRANSITIONAL_HEIGHT?0.95:1,MODE_CHANGE_PHYSICS)}]};}"
+};
+VoicePanelButtonsInner = Module19.memo(function VoicePanelButtonsInner(props) {
+  const { openTab, wrapperSpecs: wrapperSpecs2, sharedTab } = props;
+  const ref = useRef(true);
+  const refValue = useRefValue(ref);
+  const styles = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const { controlsSpecs: controlsSpecs2, connected } = context;
+  const controlsButtons = useControlsButtons();
+  const c = function c() {
+    const r19 = controlsSpecs2.get().pushToTalk && connected.get();
+    const r15 = sharedTab.get() === "settings" && wrapperSpecs2.get().height >= TRANSITIONAL_HEIGHT ? CONTROLS_DRAWER_HEADER_EXPANDED_SIZE : controlsSpecs2.get().height;
+    const r16 = sharedTab.get() !== "settings" ? wrapperSpecs2.get().height >= TRANSITIONAL_HEIGHT ? -controlsSpecs2.get().height : 0 : 0;
+    return {
+      top: r19 ? -4 : 0,
+      height: _spring.withSpring(r15, MODE_CHANGE_PHYSICS),
+      opacity: _spring.withSpring(sharedTab.get() !== "settings" ? wrapperSpecs2.get().height >= TRANSITIONAL_HEIGHT ? 0 : 1 : 1, MODE_CHANGE_PHYSICS),
+      transform: [{
+        translateY: _spring.withSpring(r16, MODE_CHANGE_PHYSICS)
+      }, {
+        scale: _spring.withSpring(sharedTab.get() !== "settings" ? wrapperSpecs2.get().height >= TRANSITIONAL_HEIGHT ? 0.95 : 1 : 1, MODE_CHANGE_PHYSICS)
+      }]
+    };
+  };
+  c.__closure = {
+    controlsSpecs: controlsSpecs2,
+    connected,
+    sharedTab,
+    wrapperSpecs: wrapperSpecs2,
+    TRANSITIONAL_HEIGHT,
+    CONTROLS_DRAWER_HEADER_EXPANDED_SIZE,
+    withSpring: _spring.withSpring,
+    MODE_CHANGE_PHYSICS
+  };
+  c.__workletHash = 17578996123721;
+  c.__initData = __initData12;
+  const animatedStyle = useAnimatedStyle(c);
+  useEffect(() => {
+    ref.current = false;
+  }, []);
+  return <LayoutAnimationConfig skipEntering={refValue}>
+    <ReanimatedNativeView style={[styles.buttonsWrapper, animatedStyle]}>
+      {controlsButtons.map((controlsButton) => controlsButton.render(controlsButton.key, {
+        props: controlsButton,
+        openTab,
+        wrapperSpecs: wrapperSpecs2
+      }))}
+    </ReanimatedNativeView>
+  </LayoutAnimationConfig>;
+});
+__initData13 = {
+  code: "function VoicePanelControlsTsx13(){const{withSpring,wrapperSpecs,borderRadius,BORDER_RADIUS_PHYSICS,PANEL_CONTROLS_HEIGHT_PHYSICS,MODE_CHANGE_PHYSICS,roundToNearestPixel,UI_SHOW_HIDE_PHYSICS,useReducedMotion,gestureState,CALL_TILE_GUTTER,accessoryHeights}=this.__closure;return{borderBottomRightRadius:withSpring(!wrapperSpecs.get().drawerMode?borderRadius:0,BORDER_RADIUS_PHYSICS),borderBottomLeftRadius:withSpring(!wrapperSpecs.get().drawerMode?borderRadius:0,BORDER_RADIUS_PHYSICS),height:withSpring(wrapperSpecs.get().height,PANEL_CONTROLS_HEIGHT_PHYSICS),width:withSpring(wrapperSpecs.get().width,MODE_CHANGE_PHYSICS),marginLeft:withSpring(roundToNearestPixel(wrapperSpecs.get().width/2)*-1,MODE_CHANGE_PHYSICS),opacity:withSpring(wrapperSpecs.get().hidden?0:1,MODE_CHANGE_PHYSICS),transform:[{translateX:withSpring(wrapperSpecs.get().x,UI_SHOW_HIDE_PHYSICS)},{translateY:withSpring(!useReducedMotion.get()&&(wrapperSpecs.get().hidden||gestureState.get().active&&!gestureState.get().requiresPop)?wrapperSpecs.get().height+CALL_TILE_GUTTER+accessoryHeights.get():wrapperSpecs.get().y,UI_SHOW_HIDE_PHYSICS)}]};}"
+};
+__initData14 = {
+  code: "function VoicePanelControlsTsx14(){const{mode,VoicePanelModes,wrapperSpecs}=this.__closure;return{pointerEvents:mode.get()!==VoicePanelModes.PANEL||wrapperSpecs.get().hidden?'none':'auto'};}"
+};
+__initData15 = {
+  code: "function VoicePanelControlsTsx15(){const{controlsSpecs}=this.__closure;return controlsSpecs.get().mode;}"
+};
+__initData16 = {
+  code: "function VoicePanelControlsTsx16(mode,previousMode){const{isScreenReaderEnabled,VoicePanelControlsModes,runOnJS,setIsDrawer}=this.__closure;if(mode===previousMode||!isScreenReaderEnabled)return;if(mode===VoicePanelControlsModes.DRAWER&&previousMode!==VoicePanelControlsModes.DRAWER){runOnJS(setIsDrawer)(true);}else if(mode!==VoicePanelControlsModes.DRAWER&&previousMode===VoicePanelControlsModes.DRAWER){runOnJS(setIsDrawer)(false);}}"
+};
+__initData17 = {
+  code: "function VoicePanelControlsTsx17(){const{wrapperSpecs}=this.__closure;return wrapperSpecs.get().drawerMode;}"
+};
+__initData18 = {
+  code: "function VoicePanelControlsTsx18(drawerMode,previousDrawerMode){const{isRefreshEnabled,runOnJS,setIsDrawerActive}=this.__closure;if(drawerMode===previousDrawerMode)return;if(!isRefreshEnabled)return;if(drawerMode){runOnJS(setIsDrawerActive)(true);}else{runOnJS(setIsDrawerActive)(false);}}"
+};
+const r106 = Module19.memo(function VoicePanelControls(props) {
+  let callback, c22701_12, sharedValue2, token, setState2, setState3;
+  let state2, sharedValue3, sharedValue4, callback2, controlsSpecs4, windowDimensions, wrapperDimensions, safeArea, sharedValue5, sharedValue6, sharedValue7, sharedValue8, ref2, sharedValue9, gestureLock, token2;
+  let sharedValue10, isScreenReaderEnabled2, c22703_2, controlsSpecs5, windowDimensions2, mode2, setControlsMode2, safeArea2, connected2;
+  const gestureState2 = props.gestureState;
+  callback = void 0;
+  c22701_12 = void 0;
+  sharedValue2 = void 0;
+  token = void 0;
+  setState2 = void 0;
+  setState3 = void 0;
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  const isRefreshEnabled = MobileVisualRefreshExperiment("VoicePanelControls");
+  let c22701_2 = isRefreshEnabled;
+  const context = useContext(VoicePanelStateContext);
+  const { channelId, controlsSpecs: controlsSpecs3, mode, setControlsMode, useReducedMotion } = context;
+  const styles = useStyles();
+  const [state, setState] = useState(null);
+  const sharedValue = useSharedValue(state);
+  useLayoutEffect(() => {
+    sharedValue.set(state);
+  });
+  const isConnectedToVoiceChannel = useIsConnectedToVoiceChannel(channelId);
+  useMaybeFetchSoundboardSounds({
+    shouldFetch: isConnectedToVoiceChannel
+  });
+  callback = useCallback((a0) => {
+    const { tab, source, disableControlsUpdate = false } = a0;
+    let c28201_2 = disableControlsUpdate;
+    const controlsProps = a0.controlsProps;
+    batchUpdates(() => {
+      let c30941_0 = false;
+      const mode3 = controlsSpecs3.get().mode;
+      const DRAWER = VoicePanelControlsModes.DRAWER;
+      setState((prevState) => {
+        c30941_0 = prevState !== tab;
+        return tab;
+      });
+      if (!c28201_2) {
+        setControlsMode({
+          mode: VoicePanelControlsModes.DRAWER,
+          ...controlsProps
+        });
+      }
+      if (c30941_0 || mode3 !== DRAWER) {
+        trackVoicePanelTabOpened(channelId, tab, source);
+      }
+    });
+  }, [channelId, controlsSpecs3, setControlsMode]);
+  const controlAccessoryHeight = useControlAccessoryHeight();
+  c22701_12 = controlAccessoryHeight;
+  useLayoutEffect(() => {
+    let chatOpen;
+    const handleStoreChange2 = function handleStoreChange() {
+      const chatOpen2 = ChannelRTCStore.getChatOpen(channelId);
+      if (chatOpen2 !== chatOpen) {
+        chatOpen = chatOpen2;
+        if (chatOpen2) {
+          callback({
+            tab: "chat",
+            source: _trackVoicePanelTabOpened.VoicePanelTabAnalyticsSources.STORE,
+            controlsProps: {
+              debounce: true
+            }
+          });
+        }
+      }
+    };
+    const chatOpen2 = ChannelRTCStore.getChatOpen(channelId);
+    if (chatOpen2 !== chatOpen) {
+      chatOpen = chatOpen2;
+      if (chatOpen2) {
+        callback({
+          tab: "chat",
+          source: _trackVoicePanelTabOpened.VoicePanelTabAnalyticsSources.STORE,
+          controlsProps: {
+            debounce: true
+          }
+        });
+      }
+    }
+    ChannelRTCStore.addChangeListener(handleStoreChange2);
+    return () => {
+      ChannelRTCStore.removeChangeListener(handleStoreChange2);
+    };
+  }, [channelId, controlsSpecs3, callback, state]);
+  useEffect(() => {
+    const handleOpenChatTab2 = function handleOpenChatTab() {
+      callback({
+        tab: "chat",
+        source: _trackVoicePanelTabOpened.VoicePanelTabAnalyticsSources.HEADER_BUTTON
+      });
+    };
+    ComponentDispatch.subscribe(ComponentActions.VOICE_PANEL_OPEN_CHAT_TAB, handleOpenChatTab2);
+    return () => {
+      ComponentDispatch.unsubscribe(ComponentActions.VOICE_PANEL_OPEN_CHAT_TAB, handleOpenChatTab2);
+    };
+  }, [callback]);
+  const safeAreaInsets = getSafeAreaInsets();
+  sharedValue2 = useSharedValue({
+    width: _VoicePanelControlsUtils.getControlsDefaultWidth(getWindowDimensions().width, safeAreaInsets.left, safeAreaInsets.right),
+    height: 0,
+    x: 0,
+    y: 0,
+    drawerMode: false,
+    hidden: false
+  });
+  token = useToken(Module712.modules.mobile.VOICE_PANEL_CONTROLS_BORDER_RADIUS);
+  const ge = () => {
+    let r98, transform;
+    const r18 = {
+      borderBottomRightRadius: _spring.withSpring(sharedValue2.get().drawerMode ? 0 : token, BORDER_RADIUS_PHYSICS),
+      borderBottomLeftRadius: _spring.withSpring(sharedValue2.get().drawerMode ? 0 : token, BORDER_RADIUS_PHYSICS),
+      height: _spring.withSpring(sharedValue2.get().height, PANEL_CONTROLS_HEIGHT_PHYSICS),
+      width: _spring.withSpring(sharedValue2.get().width, MODE_CHANGE_PHYSICS),
+      marginLeft: _spring.withSpring(-1 * roundToNearestPixel(sharedValue2.get().width / 2), MODE_CHANGE_PHYSICS),
+      opacity: null,
+      transform: null
+    };
+    const r62 = sharedValue2.get().hidden ? 0 : 1;
+    L12: {
+      L11: {
+        r18.opacity = _spring.withSpring(r62, MODE_CHANGE_PHYSICS);
+        transform = [{
+          translateX: _spring.withSpring(sharedValue2.get().x, UI_SHOW_HIDE_PHYSICS)
+        }, ,];
+        if (!useReducedMotion.get()) {
+          if (!sharedValue2.get().hidden) {
+            if (!gestureState2.get().active) {
+              break L11;
+            }
+            if (gestureState2.get().requiresPop) {
+              break L11;
+            }
+          }
+          r98 = sharedValue2.get().height + CALL_TILE_GUTTER + c22701_12.get();
+          break L12;
+        }
+      }
+      r98 = sharedValue2.get().y;
+    }
+    transform[1] = {
+      translateY: _spring.withSpring(r98, UI_SHOW_HIDE_PHYSICS)
+    };
+    r18.transform = transform;
+    return r18;
+  };
+  ge.__closure = {
+    withSpring: _spring.withSpring,
+    wrapperSpecs: sharedValue2,
+    borderRadius: token,
+    BORDER_RADIUS_PHYSICS,
+    PANEL_CONTROLS_HEIGHT_PHYSICS,
+    MODE_CHANGE_PHYSICS,
+    roundToNearestPixel,
+    UI_SHOW_HIDE_PHYSICS,
+    useReducedMotion,
+    gestureState: gestureState2,
+    CALL_TILE_GUTTER,
+    accessoryHeights: controlAccessoryHeight
+  };
+  ge.__workletHash = 14734014706335;
+  ge.__initData = __initData13;
+  const animatedStyle = useAnimatedStyle(ge);
+  const de = () => ({
+    pointerEvents: mode.get() === VoicePanelModes.PANEL ? sharedValue2.get().hidden ? "none" : "auto" : "none"
+  });
+  de.__closure = {
+    mode,
+    VoicePanelModes,
+    wrapperSpecs: sharedValue2
+  };
+  de.__workletHash = 5608048435620;
+  de.__initData = __initData14;
+  const animatedProps = useAnimatedProps(de);
+  state2 = state;
+  sharedValue3 = sharedValue;
+  sharedValue4 = sharedValue2;
+  callback2 = callback;
+  controlsSpecs4 = void 0;
+  windowDimensions = void 0;
+  wrapperDimensions = void 0;
+  safeArea = void 0;
+  sharedValue5 = void 0;
+  sharedValue6 = void 0;
+  sharedValue7 = void 0;
+  sharedValue8 = void 0;
+  ref2 = void 0;
+  sharedValue9 = void 0;
+  gestureLock = void 0;
+  token2 = void 0;
+  const context2 = useContext(VoicePanelStateContext);
+  controlsSpecs4 = context2.controlsSpecs;
+  windowDimensions = context2.windowDimensions;
+  wrapperDimensions = context2.wrapperDimensions;
+  safeArea = context2.safeArea;
+  sharedValue5 = useSharedValue({
+    absoluteX: 0,
+    absoluteY: 0,
+    x: 0,
+    y: 0,
+    height: 0,
+    isDrawer: false,
+    active: false,
+    drawerTransitionHeight: TRANSITIONAL_HEIGHT,
+    interFloatingTransitionHeight
+  });
+  sharedValue6 = useSharedValue(0);
+  sharedValue7 = useSharedValue(false);
+  sharedValue8 = useSharedValue(0);
+  ref2 = useRef(void 0);
+  sharedValue9 = useSharedValue(false);
+  const [value] = useState(() => createUseAnimatedScrollLock(ref2, sharedValue9, sharedValue8, sharedValue7));
+  gestureLock = useControlsLock();
+  token2 = useToken(Module712.modules.mobile.VOICE_PANEL_GUTTER);
+  const memo = useMemo(() => {
+    const r36 = Gesture.Pan().manualActivation(true).maxPointers(1).shouldCancelWhenOutside(false).withRef(ref2);
+    const b = function b(a0) {
+      sharedValue6.set(0);
+      sharedValue5.set({
+        absoluteX: a0.changedTouches[0].absoluteX,
+        absoluteY: a0.changedTouches[0].absoluteY,
+        x: sharedValue4.get().x,
+        y: sharedValue4.get().y,
+        height: sharedValue4.get().height,
+        isDrawer: controlsSpecs4.get().mode === VoicePanelControlsModes.DRAWER,
+        active: false,
+        drawerTransitionHeight: TRANSITIONAL_HEIGHT,
+        interFloatingTransitionHeight
+      });
+    };
+    b.__closure = {
+      touchMoveCount: sharedValue6,
+      gestureSpecs: sharedValue5,
+      wrapperSpecs: sharedValue4,
+      controlsSpecs: controlsSpecs4,
+      VoicePanelControlsModes,
+      TRANSITIONAL_HEIGHT,
+      INTER_FLOATING_TRANSITIONAL_HEIGHT: interFloatingTransitionHeight
+    };
+    b.__workletHash = 3524850376026;
+    b.__initData = __initData7;
+    const r42 = r36.onTouchesDown(b);
+    const R = function R() {
+      _ReanimatedRexport.runOnJS(gestureLock.lock)();
+    };
+    R.__closure = {
+      runOnJS: _ReanimatedRexport.runOnJS,
+      gestureLock
+    };
+    R.__workletHash = 11720944776433;
+    R.__initData = __initData6;
+    const r51 = r42.onStart(R);
+    const h = function h(a0, a1) {
+      L28: {
+        if (a0.state === _Module5273.State.BEGAN && !sharedValue5.get().active) {
+          if (controlsSpecs4.get().mode !== VoicePanelControlsModes.HIDDEN) {
+            sharedValue6.set(sharedValue6.get() + 1);
+            const r17 = sharedValue6.get() <= SCROLL_BEGIN_GRACE_TICKS || sharedValue7.get();
+            const r16 = sharedValue3.get();
+            const r45 = r16 !== "settings" ? r16 === "app_launcher" ? sharedValue8.get() : 0 : sharedValue8.get();
+            const r49 = a0.changedTouches[0];
+            const { absoluteY, absoluteX } = r49;
+            const r18 = sharedValue5.get().absoluteY - absoluteY;
+            if (!(controlsSpecs4.get().mode === VoicePanelControlsModes.DRAWER && r17 && (r18 >= 0 || r45 > 0))) {
+              L23: {
+                if (!(controlsSpecs4.get().mode === VoicePanelControlsModes.FLOATING_DEFAULT && r18 > 30)) {
+                  if (controlsSpecs4.get().mode === VoicePanelControlsModes.DRAWER) {
+                    if (r18 < -30) {
+                      break L23;
+                    }
+                    if (r18 > 30) {
+                      break L23;
+                    }
+                  }
+                  if (!(Math.abs(r18) > Math.abs(30))) {
+                    break L28;
+                  }
+                  a1.fail();
+                  break L28;
+                }
+              }
+              sharedValue5.set({
+                absoluteX,
+                absoluteY,
+                x: sharedValue4.get().x,
+                y: sharedValue4.get().y,
+                height: sharedValue4.get().height,
+                isDrawer: controlsSpecs4.get().mode === VoicePanelControlsModes.DRAWER,
+                active: true,
+                drawerTransitionHeight: TRANSITIONAL_HEIGHT,
+                interFloatingTransitionHeight
+              });
+              if (controlsSpecs4.get().mode !== VoicePanelControlsModes.DRAWER && state2 !== "settings") {
+                _ReanimatedRexport.runOnJS(callback2)({
+                  tab: "settings",
+                  source: _trackVoicePanelTabOpened.VoicePanelTabAnalyticsSources.GESTURE,
+                  disableControlsUpdate: true
+                });
+              }
+              sharedValue9.set(true);
+              a1.activate();
+            }
+          } else {
+            a1.fail();
+          }
+        }
+      }
+    };
+    h.__closure = {
+      State: _Module5273.State,
+      gestureSpecs: sharedValue5,
+      controlsSpecs: controlsSpecs4,
+      VoicePanelControlsModes,
+      touchMoveCount: sharedValue6,
+      SCROLL_BEGIN_GRACE_TICKS,
+      isDragScrolling: sharedValue7,
+      sharedTab: sharedValue3,
+      scrollOffsetValue: sharedValue8,
+      GESTURE_VERTICAL_MINIMUM: 30,
+      wrapperSpecs: sharedValue4,
+      TRANSITIONAL_HEIGHT,
+      INTER_FLOATING_TRANSITIONAL_HEIGHT: interFloatingTransitionHeight,
+      tab: state2,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      openTab: callback2,
+      VoicePanelTabAnalyticsSources: _trackVoicePanelTabOpened.VoicePanelTabAnalyticsSources,
+      scrollLock: sharedValue9
+    };
+    h.__workletHash = 13965683053434;
+    h.__initData = __initData5;
+    const r71 = r51.onTouchesMove(h);
+    const r73 = function(a0) {
+      const r24 = a0.absoluteY - sharedValue5.get().absoluteY;
+      const r11 = sharedValue5.get().height - sharedValue5.get().y - r24;
+      if (r11 > sharedValue5.get().drawerTransitionHeight) {
+        if (!sharedValue5.get().isDrawer) {
+          sharedValue5.set({
+            ...sharedValue5.get(),
+            isDrawer: true
+          });
+        }
+        const height2 = calculateVoicePanelHeaderSpecs(safeArea.get(), token2).height;
+        sharedValue4.set({
+          ...sharedValue4.get(),
+          x: 0,
+          y: 0,
+          width: _VoicePanelControlsUtils.getControlsDrawerOpenWidth(windowDimensions.get().width, safeArea.get().left, safeArea.get().right),
+          height: Math.min(r11, wrapperDimensions.get().drawerHeight - height2),
+          drawerMode: true
+        });
+      } else {
+        const r12 = r11 / sharedValue5.get().drawerTransitionHeight;
+        const height = controlsSpecs4.get().height;
+        const r3 = -1 * Math.max(r11 - safeArea.get().bottom - height, 0);
+        if (sharedValue5.get().isDrawer) {
+          sharedValue5.set({
+            ...sharedValue5.get(),
+            isDrawer: false
+          });
+        }
+        if (!(height === sharedValue4.get().height || sharedValue4.get().drawerMode)) {
+          _ReanimatedRexport.runOnJS(_HapticUtils_native.triggerHapticFeedback)(_HapticUtils_native.HapticFeedbackTypes.IMPACT_MEDIUM);
+        }
+        sharedValue4.set({
+          ...sharedValue4.get(),
+          x: 0,
+          y: -1 * safeArea.get().bottom + r3 * (1 - r12 / 1.5),
+          width: _VoicePanelControlsUtils.getControlsDefaultWidth(windowDimensions.get().width, safeArea.get().left, safeArea.get().right),
+          height,
+          drawerMode: false
+        });
+      }
+    };
+    r73.__closure = {
+      gestureSpecs: sharedValue5,
+      calculateVoicePanelHeaderSpecs,
+      safeArea,
+      edgeGutter: token2,
+      wrapperSpecs: sharedValue4,
+      getControlsDrawerOpenWidth: _VoicePanelControlsUtils.getControlsDrawerOpenWidth,
+      windowDimensions,
+      wrapperDimensions,
+      controlsSpecs: controlsSpecs4,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      triggerHapticFeedback: _HapticUtils_native.triggerHapticFeedback,
+      HapticFeedbackTypes: _HapticUtils_native.HapticFeedbackTypes,
+      getControlsDefaultWidth: _VoicePanelControlsUtils.getControlsDefaultWidth
+    };
+    r73.__workletHash = 10007030283382;
+    r73.__initData = __initData4;
+    const r94 = r71.onChange(r73);
+    const r96 = function u() {
+      sharedValue9.set(false);
+      sharedValue7.set(false);
+      sharedValue5.set({
+        ...sharedValue5.get(),
+        active: false
+      });
+      _ReanimatedRexport.runOnJS(gestureLock.unlock)();
+    };
+    r96.__closure = {
+      scrollLock: sharedValue9,
+      isDragScrolling: sharedValue7,
+      gestureSpecs: sharedValue5,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      gestureLock
+    };
+    r96.__workletHash = 9808165597638;
+    r96.__initData = __initData3;
+    const r103 = r94.onTouchesCancelled(r96);
+    const r105 = function({ velocityY }) {
+      let r30;
+      const r17 = Math.abs(velocityY);
+      if (r17 > 200 && velocityY < 0) {
+        sharedValue4.set({
+          ...sharedValue4.get(),
+          height: wrapperDimensions.get().drawerHeight - calculateVoicePanelHeaderSpecs(safeArea.get(), token2).height
+        });
+        r30 = controlsSpecs4.get().mode === VoicePanelControlsModes.DRAWER ? VoicePanelControlsModes.RESET : VoicePanelControlsModes.DRAWER;
+      } else {
+        r30 = r17 < 200 && sharedValue5.get().isDrawer ? controlsSpecs4.get().mode === VoicePanelControlsModes.DRAWER ? VoicePanelControlsModes.RESET : VoicePanelControlsModes.DRAWER : controlsSpecs4.get().mode === VoicePanelControlsModes.FLOATING_DEFAULT ? VoicePanelControlsModes.RESET : VoicePanelControlsModes.FLOATING_DEFAULT;
+      }
+      sharedValue9.set(false);
+      sharedValue7.set(false);
+      _ReanimatedRexport.runOnJS(gestureLock.unlock)(r30);
+    };
+    r105.__closure = {
+      wrapperSpecs: sharedValue4,
+      wrapperDimensions,
+      calculateVoicePanelHeaderSpecs,
+      safeArea,
+      edgeGutter: token2,
+      controlsSpecs: controlsSpecs4,
+      VoicePanelControlsModes,
+      gestureSpecs: sharedValue5,
+      scrollLock: sharedValue9,
+      isDragScrolling: sharedValue7,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      gestureLock
+    };
+    r105.__workletHash = 12106761920053;
+    r105.__initData = __initData2;
+    const r114 = r103.onEnd(r105);
+    const t = function t() {
+      sharedValue9.set(false);
+      sharedValue7.set(false);
+      _ReanimatedRexport.runOnJS(gestureLock.unlock)();
+    };
+    t.__closure = {
+      scrollLock: sharedValue9,
+      isDragScrolling: sharedValue7,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      gestureLock
+    };
+    t.__workletHash = 15918380969837;
+    t.__initData = __initData;
+    return r114.onFinalize(t);
+  }, [controlsSpecs4, gestureLock, sharedValue5, sharedValue7, callback, safeArea, sharedValue9, sharedValue8, sharedValue, state, sharedValue6, windowDimensions, wrapperDimensions, sharedValue2, token2]);
+  const r184 = () => sharedValue4.get().drawerMode;
+  r184.__closure = {
+    wrapperSpecs: sharedValue2
+  };
+  r184.__workletHash = 2949834828607;
+  r184.__initData = __initData8;
+  const r188 = function u(a0, a1) {
+    if (a0 !== a1) {
+      _ReanimatedRexport.runOnJS(_HapticUtils_native.triggerHapticFeedback)(_HapticUtils_native.HapticFeedbackTypes.IMPACT_MEDIUM);
+    }
+  };
+  r188.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    triggerHapticFeedback: _HapticUtils_native.triggerHapticFeedback,
+    HapticFeedbackTypes: _HapticUtils_native.HapticFeedbackTypes
+  };
+  r188.__workletHash = 10186886451735;
+  r188.__initData = __initData9;
+  useAnimatedReaction(r184, r188);
+  sharedValue10 = sharedValue2;
+  isScreenReaderEnabled2 = void 0;
+  c22703_2 = void 0;
+  controlsSpecs5 = void 0;
+  windowDimensions2 = void 0;
+  mode2 = void 0;
+  setControlsMode2 = void 0;
+  safeArea2 = void 0;
+  connected2 = void 0;
+  isScreenReaderEnabled2 = useIsScreenReaderEnabled();
+  const windowDimensionsSharedValue_native = useWindowDimensionsSharedValue_native({
+    ignoreKeyboard: true
+  });
+  c22703_2 = windowDimensionsSharedValue_native;
+  const context3 = useContext(VoicePanelStateContext);
+  controlsSpecs5 = context3.controlsSpecs;
+  windowDimensions2 = context3.windowDimensions;
+  mode2 = context3.mode;
+  setControlsMode2 = context3.setControlsMode;
+  safeArea2 = context3.safeArea;
+  connected2 = context3.connected;
+  const n = () => ({
+    connected: connected2.get(),
+    currentControlsMode: controlsSpecs5.get().mode,
+    mode: mode2.get(),
+    windowWidth: windowDimensions2.get().width,
+    windowHeight: windowDimensions2.get().height,
+    windowHeightIgnoringKeyboard: c22703_2.get().height,
+    controlsHeightValue: controlsSpecs5.get().height,
+    safeArea: safeArea2.get()
+  });
+  n.__closure = {
+    connected: connected2,
+    controlsSpecs: controlsSpecs5,
+    mode: mode2,
+    windowDimensions: windowDimensions2,
+    windowDimensionsIgnoringKeyboard: windowDimensionsSharedValue_native,
+    safeArea: safeArea2
+  };
+  n.__workletHash = 11588370229444;
+  n.__initData = __initData10;
+  const r227 = function(a0, a1) {
+    let maxHeight, minHeight;
+    const r24 = a1 == null ? void 0 : a1;
+    L28: {
+      if (!_cheapWorkletShallowEqual.cheapWorkletShallowEqual(a0, r24)) {
+        const { currentControlsMode, mode: mode3, windowWidth, windowHeightIgnoringKeyboard, controlsHeightValue, safeArea: safeArea3 } = a0;
+        if (VoicePanelModes.DISMISSED !== mode3 && VoicePanelModes.PIP !== mode3) {
+          VoicePanelModes.PANEL;
+          if (VoicePanelControlsModes.RESET === currentControlsMode) {
+            const r109 = _ReanimatedRexport.runOnJS(setControlsMode2);
+            let mode4 = a1?.currentControlsMode;
+            if (mode4 == null) {
+              mode4 = VoicePanelControlsModes.FLOATING_DEFAULT;
+            }
+            r109({
+              mode: mode4
+            });
+            return void 0;
+          }
+          if (VoicePanelControlsModes.HIDDEN === currentControlsMode) {
+            if (isScreenReaderEnabled2) {
+              sharedValue10.set({
+                ...sharedValue10.get(),
+                hidden: false
+              });
+              break L28;
+            }
+            if (sharedValue10.get().hidden) {
+              break L28;
+            }
+            sharedValue10.set({
+              ...sharedValue10.get(),
+              hidden: true
+            });
+            break L28;
+          }
+          if (VoicePanelControlsModes.FLOATING_DEFAULT === currentControlsMode) {
+            sharedValue10.set({
+              x: 0,
+              y: -1 * Math.max(safeArea3.bottom, EDGE_GUTTER),
+              width: _VoicePanelControlsUtils.getControlsDefaultWidth(windowWidth, safeArea3.left, safeArea3.right),
+              height: controlsHeightValue,
+              drawerMode: false,
+              hidden: false
+            });
+            break L28;
+          }
+          if (VoicePanelControlsModes.DRAWER !== currentControlsMode) {
+            break L28;
+          }
+          L14: {
+            L13: {
+              const drawerSpec = _VoicePanelControlUtils.getDrawerSpec(windowHeightIgnoringKeyboard, safeArea3.top);
+              minHeight = drawerSpec.minHeight;
+              maxHeight = drawerSpec.maxHeight;
+              if (!(sharedValue10.get().height <= controlsHeightValue)) {
+                if (a1 != null && sharedValue10.get().height === _VoicePanelControlUtils.getDrawerSpec(a1.windowHeight, a1.safeArea.top).maxHeight) {
+                  break L13;
+                }
+                if (!(sharedValue10.get().height >= (maxHeight + minHeight) / 2)) {
+                  break L14;
+                }
+              }
+            }
+            minHeight = maxHeight;
+          }
+          sharedValue10.set({
+            x: 0,
+            y: 0,
+            width: _VoicePanelControlsUtils.getControlsDrawerOpenWidth(windowWidth, safeArea3.left, safeArea3.right),
+            height: minHeight,
+            drawerMode: true,
+            hidden: false
+          });
+          break L28;
+        }
+        if (!sharedValue10.get().hidden) {
+          sharedValue10.set({
+            ...sharedValue10.get(),
+            hidden: true
+          });
+        }
+        return void 0;
+      }
+    }
+  };
+  r227.__closure = {
+    cheapWorkletShallowEqual: _cheapWorkletShallowEqual.cheapWorkletShallowEqual,
+    VoicePanelModes,
+    wrapperSpecs: sharedValue2,
+    VoicePanelControlsModes,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    setControlsMode: setControlsMode2,
+    isScreenReaderEnabled: isScreenReaderEnabled2,
+    EDGE_GUTTER,
+    getControlsDefaultWidth: _VoicePanelControlsUtils.getControlsDefaultWidth,
+    getDrawerSpec: _VoicePanelControlUtils.getDrawerSpec,
+    getControlsDrawerOpenWidth: _VoicePanelControlsUtils.getControlsDrawerOpenWidth
+  };
+  r227.__workletHash = 1154430392188;
+  r227.__initData = __initData11;
+  useAnimatedReaction(n, r227);
+  let accessibilityViewIsModal;
+  [accessibilityViewIsModal, setState2] = useState(false);
+  const Ae = () => controlsSpecs3.get().mode;
+  Ae.__closure = {
+    controlsSpecs: controlsSpecs3
+  };
+  Ae.__workletHash = 7719878249076;
+  Ae.__initData = __initData15;
+  const De = function De(a0, a1) {
+    const r3 = a0 !== a1 && isScreenReaderEnabled;
+    L10: {
+      if (r3) {
+        if (a0 === VoicePanelControlsModes.DRAWER && a1 !== VoicePanelControlsModes.DRAWER) {
+          _ReanimatedRexport.runOnJS(setState2)(true);
+          break L10;
+        }
+        if (a0 !== VoicePanelControlsModes.DRAWER && a1 === VoicePanelControlsModes.DRAWER) {
+          _ReanimatedRexport.runOnJS(setState2)(false);
+        }
+      }
+    }
+  };
+  De.__closure = {
+    isScreenReaderEnabled,
+    VoicePanelControlsModes,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    setIsDrawer: setState2
+  };
+  De.__workletHash = 12036469956927;
+  De.__initData = __initData16;
+  useAnimatedReaction(Ae, De);
+  let state3;
+  [state3, setState3] = useState(false);
+  const Me = () => sharedValue2.get().drawerMode;
+  Me.__closure = {
+    wrapperSpecs: sharedValue2
+  };
+  Me.__workletHash = 2374715205601;
+  Me.__initData = __initData17;
+  const be = function be(a0, a1) {
+    if (a0 !== a1 && c22701_2) {
+      const r13 = _ReanimatedRexport.runOnJS(setState3);
+      if (a0) {
+        r13(true);
+      } else {
+        r13(false);
+      }
+    }
+  };
+  be.__closure = {
+    isRefreshEnabled,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    setIsDrawerActive: setState3
+  };
+  be.__workletHash = 1721919006032;
+  be.__initData = __initData18;
+  useAnimatedReaction(Me, be);
+  const id = useId();
+  const callback3 = useCallback(() => {
+    setControlsMode({
+      mode: VoicePanelControlsModes.FLOATING_DEFAULT
+    });
+  }, [setControlsMode]);
+  return <ControlsGestureScrollLock.Provider value={value}>
+    <VoicePanelControlsDimOverlay wrapperSpecs={sharedValue2} />
+    <Component channelId={channelId} wrapperSpecs={sharedValue2} controlsSpecs={controlsSpecs3} accessoryHeights={controlAccessoryHeight} gestureState={gestureState2} />
+    <VoicePanelAccessibilityView nativeID={id} style={styles.accessibilityWrapper} accessibilityViewIsModal={accessibilityViewIsModal} onAccessibilityEscape={callback3} pointerEvents="box-none">
+      <GestureDetector gesture={memo}>
+        <ReanimatedNativeView style={[styles.wrapper, animatedStyle]} animatedProps={animatedProps}>
+          <ThemeContextProvider theme={isRefreshEnabled ? isConnectedToVoiceChannel ? state3 ? void 0 : ThemeTypes.MIDNIGHT : void 0 : void 0}>
+            <VoicePanelVisualEffectView matchAppTheme={isConnectedToVoiceChannel ? !isConnectedToVoiceChannel : isAndroid() || isRefreshEnabled} />
+            <VoicePanelButtonsInner openTab={callback} wrapperSpecs={sharedValue2} sharedTab={sharedValue} />
+          </ThemeContextProvider>
+          <VoicePanelControlsDrawer wrapperSpecs={sharedValue2} tab={state} sharedTab={sharedValue} gestureSpecs={sharedValue5} openTab={callback} />
+          {isMetaQuest() ? null : <Component2 openTab={callback} />}
+        </ReanimatedNativeView>
+      </GestureDetector>
+    </VoicePanelAccessibilityView>
+  </ControlsGestureScrollLock.Provider>;
+});
+export default r106;

modules/voice_panel/native/controls/VoicePanelControlsAppLauncher.tsx

@@ -0,0 +1,102 @@
+// Metro module 16039 (f16040).
+import { memo, useContext, useCallback, useRef } from "react";
+import ChannelStore from "../../../../stores/ChannelStore";
+import { VoicePanelControlsModes, CONTROLS_DRAWER_HEADER_SIZE } from "./VoicePanelControlsConstants";
+import { ComponentActions } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { useGradientTop } from "../../../client_themes/native/ClientThemesOverrides";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import useStateFromSharedValue from "../../../reanimated/native/useStateFromSharedValue";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import Module38 from "../../../../_bundle/Module38";
+import { getControlsDrawerOpenWidth } from "../utils/VoicePanelControlsUtils";
+import { ComponentDispatch } from "../../../../utils/ComponentDispatchUtils";
+import { useAppLauncherChatInputRefDummy, AppLauncherKeyboardCloseReason } from "../../../app_launcher/native/AppLauncherContext";
+import { AppLauncherEntrypoint } from "../../../app_launcher/AppLauncherTypes";
+import ReanimatedRexport, { useSharedValue, useDerivedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import AppLauncherNavigator from "../../../app_launcher/native/AppLauncherNavigator";
+import VoicePanelControlsDrawerTitle from "./VoicePanelControlsDrawerTitle";
+import { intl, t } from "../../../../intl/index.native";
+const useStyles = createStyles({
+  container: {
+    width: "100%",
+    paddingTop: CONTROLS_DRAWER_HEADER_SIZE
+  }
+});
+const __initData = {
+  code: "function VoicePanelControlsAppLauncherTsx1(){const{gestureSpecs}=this.__closure;return gestureSpecs.get().active;}"
+};
+const __initData2 = {
+  code: "function VoicePanelControlsAppLauncherTsx2(){const{gestureSpecs}=this.__closure;return gestureSpecs.get().isDrawer;}"
+};
+const __initData3 = {
+  code: "function VoicePanelControlsAppLauncherTsx3(){const{isGestureActive,isGestureDrawerMode,windowDimensions,safeArea}=this.__closure;const height=isGestureActive.get()||!isGestureDrawerMode.get()?windowDimensions.height-safeArea.top:'100%';return{height:height};}"
+};
+const r40 = memo(function VoicePanelControlsAppLauncher(props) {
+  let derivedValue, derivedValue2;
+  const gestureSpecs = props.gestureSpecs;
+  derivedValue = void 0;
+  derivedValue2 = void 0;
+  const styles = useStyles();
+  const gradientTop = useGradientTop();
+  const context = useContext(VoicePanelStateContext);
+  const { setControlsMode, safeArea, windowDimensions, channelId } = context;
+  const stateFromSharedValue = useStateFromSharedValue(windowDimensions);
+  let c22748_3 = stateFromSharedValue;
+  const stateFromSharedValue2 = useStateFromSharedValue(safeArea);
+  let c22748_4 = stateFromSharedValue2;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  Module38(stateFromStores != null, "channel should not be null");
+  const controlsDrawerOpenWidth = getControlsDrawerOpenWidth(stateFromSharedValue.width, stateFromSharedValue2.left, stateFromSharedValue2.right);
+  const callback = useCallback(() => {
+    ComponentDispatch.dispatch(ComponentActions.SELECT_ACTIVITY);
+    setControlsMode({
+      mode: VoicePanelControlsModes.HIDDEN
+    });
+  }, [setControlsMode]);
+  const appLauncherChatInputRefDummy = useAppLauncherChatInputRefDummy({
+    noop: true
+  });
+  const VOICE = AppLauncherEntrypoint.VOICE;
+  const ref2 = useRef(AppLauncherKeyboardCloseReason.DISMISSED);
+  const ref = useRef(void 0);
+  const sharedValue = useSharedValue(0);
+  const sharedValue2 = useSharedValue(0);
+  const y = () => gestureSpecs.get().active;
+  y.__closure = {
+    gestureSpecs
+  };
+  y.__workletHash = 1130089519653;
+  y.__initData = __initData;
+  derivedValue = useDerivedValue(y);
+  const E = () => gestureSpecs.get().isDrawer;
+  E.__closure = {
+    gestureSpecs
+  };
+  E.__workletHash = 13970291088135;
+  E.__initData = __initData2;
+  derivedValue2 = useDerivedValue(E);
+  const L = function L() {
+    return {
+      height: derivedValue.get() ? c22748_3.height - c22748_4.top : derivedValue2.get() ? "100%" : c22748_3.height - c22748_4.top
+    };
+  };
+  L.__closure = {
+    isGestureActive: derivedValue,
+    isGestureDrawerMode: derivedValue2,
+    windowDimensions: stateFromSharedValue,
+    safeArea: stateFromSharedValue2
+  };
+  L.__workletHash = 3671157204025;
+  L.__initData = __initData3;
+  return <>
+    <ReanimatedRexport.View style={[styles.container, gradientTop, useAnimatedStyle(L)]}>
+      <AppLauncherNavigator bottomSheetIndex={sharedValue2} bottomSheetPosition={sharedValue} bottomSheetExpandReasonRef={ref} context={{
+        type: "channel",
+        channel: stateFromStores
+      }} chatInputRef={appLauncherChatInputRefDummy} entrypoint={VOICE} keyboardCloseReasonRef={ref2} onActivityItemSelected={callback} width={controlsDrawerOpenWidth} />
+      <VoicePanelControlsDrawerTitle title={intl.string(t.shUONg)} disablePill />
+    </ReanimatedRexport.View>
+  </>;
+});
+export default r40;

modules/voice_panel/native/controls/VoicePanelControlsConstants.tsx

@@ -0,0 +1,17 @@
+// Metro module 10036 (f10037).
+const r9 = {
+  FLOATING_DEFAULT: "floating-default",
+  DRAWER: "drawer",
+  HIDDEN: "hidden",
+  RESET: "reset"
+};
+export { r9 as VoicePanelControlsModes };
+export const CONTROLS_HEIGHT_PTT = 112;
+export const CONTROLS_HEIGHT = 80;
+export const CONTROLS_MAX_WIDTH = 400;
+export const CONTROLS_HIDE_TIMEOUT = 3000;
+export const CONTROLS_BACKGROUND_OPACITY_ANDROID = 0.9;
+export const CONTROLS_BUTTON_SIZE_NORMAL = 48;
+export const CONTROLS_BUTTON_SIZE_LARGE = 72;
+export const CONTROLS_DRAWER_HEADER_SIZE = 60;
+export const CONTROLS_DRAWER_HEADER_EXPANDED_SIZE = 104;

modules/voice_panel/native/controls/VoicePanelControlsDimOverlay.tsx

@@ -0,0 +1,91 @@
+// Metro module 16026 (f16027).
+import { memo, useContext, useCallback } from "react";
+import { BACKDROP_OPAQUE_MAX_OPACITY } from "../../../../design/components/Backdrop/native/BackdropConstants";
+import { PANEL_CONTROLS_HEIGHT_PHYSICS, VoicePanelModes } from "../../VoicePanelConstants";
+import { VoicePanelControlsModes } from "./VoicePanelControlsConstants";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useDerivedValue, useAnimatedStyle, useAnimatedProps } from "../../../reanimated/ReanimatedRexport";
+import * as _VoicePanelControlUtils from "./utils/VoicePanelControlUtils";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import * as _AccessibilityPreferencesSharedValue from "../../../a11y/native/AccessibilityPreferencesSharedValue";
+import { Backdrop } from "../../../../design/components/Backdrop/native/Backdrop.native";
+const __initData = {
+  code: "function VoicePanelControlsDimOverlayTsx1(){const{windowDimensions,getDrawerSpec,safeArea,controlsSpecs,VoicePanelControlsModes,mode,VoicePanelModes,interpolate,wrapperSpecs,BACKDROP_OPAQUE_MAX_OPACITY}=this.__closure;const{height:height}=windowDimensions.get();const{minHeight:minHeight,maxHeight:maxHeight}=getDrawerSpec(height,safeArea.get().top);if(controlsSpecs.get().mode!==VoicePanelControlsModes.DRAWER||mode.get()!==VoicePanelModes.PANEL){return 0;}return interpolate(wrapperSpecs.get().height,[minHeight,maxHeight],[0,BACKDROP_OPAQUE_MAX_OPACITY],'clamp');}"
+};
+const __initData2 = {
+  code: "function VoicePanelControlsDimOverlayTsx2(){const{overlayOpacity}=this.__closure;return overlayOpacity.get()>=0.35;}"
+};
+const __initData3 = {
+  code: "function VoicePanelControlsDimOverlayTsx3(){const{withSpring,overlayOpacity,PANEL_CONTROLS_HEIGHT_PHYSICS,accessibilityPreferencesSharedValue,overlayActive}=this.__closure;return{zIndex:1,opacity:withSpring(overlayOpacity.get(),PANEL_CONTROLS_HEIGHT_PHYSICS),display:accessibilityPreferencesSharedValue.get().screenReaderEnabled&&!overlayActive.get()?'none':'flex'};}"
+};
+const __initData4 = {
+  code: "function VoicePanelControlsDimOverlayTsx4(){const{overlayActive}=this.__closure;return{pointerEvents:!overlayActive.get()?'none':'auto'};}"
+};
+const r34 = memo(function VoicePanelControlsDimOverlay(props) {
+  let derivedValue, derivedValue2;
+  const wrapperSpecs = props.wrapperSpecs;
+  derivedValue = void 0;
+  derivedValue2 = void 0;
+  const context = useContext(VoicePanelStateContext);
+  const { windowDimensions, setControlsMode, controlsSpecs, safeArea, mode } = context;
+  const A = function A() {
+    const drawerSpec = _VoicePanelControlUtils.getDrawerSpec(windowDimensions.get().height, safeArea.get().top);
+    const { minHeight, maxHeight } = drawerSpec;
+    return controlsSpecs.get().mode === VoicePanelControlsModes.DRAWER ? mode.get() === VoicePanelModes.PANEL ? _ReanimatedRexport.interpolate(wrapperSpecs.get().height, [minHeight, maxHeight], [0, BACKDROP_OPAQUE_MAX_OPACITY], "clamp") : 0 : 0;
+  };
+  A.__closure = {
+    windowDimensions,
+    getDrawerSpec: _VoicePanelControlUtils.getDrawerSpec,
+    safeArea,
+    controlsSpecs,
+    VoicePanelControlsModes,
+    mode,
+    VoicePanelModes,
+    interpolate: _ReanimatedRexport.interpolate,
+    wrapperSpecs,
+    BACKDROP_OPAQUE_MAX_OPACITY
+  };
+  A.__workletHash = 17386741533055;
+  A.__initData = __initData;
+  derivedValue = useDerivedValue(A);
+  const y = () => derivedValue.get() >= 0.35;
+  y.__closure = {
+    overlayOpacity: derivedValue
+  };
+  y.__workletHash = 733654137262;
+  y.__initData = __initData2;
+  derivedValue2 = useDerivedValue(y);
+  const S = function S() {
+    return {
+      zIndex: 1,
+      opacity: _spring.withSpring(derivedValue.get(), PANEL_CONTROLS_HEIGHT_PHYSICS),
+      display: _AccessibilityPreferencesSharedValue.accessibilityPreferencesSharedValue.get().screenReaderEnabled ? derivedValue2.get() ? "flex" : "none" : "flex"
+    };
+  };
+  S.__closure = {
+    withSpring: _spring.withSpring,
+    overlayOpacity: derivedValue,
+    PANEL_CONTROLS_HEIGHT_PHYSICS,
+    accessibilityPreferencesSharedValue: _AccessibilityPreferencesSharedValue.accessibilityPreferencesSharedValue,
+    overlayActive: derivedValue2
+  };
+  S.__workletHash = 7500180433000;
+  S.__initData = __initData3;
+  const animatedStyle = useAnimatedStyle(S);
+  const v = () => ({
+    pointerEvents: derivedValue2.get() ? "auto" : "none"
+  });
+  v.__closure = {
+    overlayActive: derivedValue2
+  };
+  v.__workletHash = 873976025930;
+  v.__initData = __initData4;
+  const animatedProps = useAnimatedProps(v);
+  return <Backdrop onDismiss={useCallback(() => {
+    setControlsMode({
+      mode: VoicePanelControlsModes.FLOATING_DEFAULT
+    });
+  }, [setControlsMode])} style={animatedStyle} animatedProps={animatedProps} opaque aria-hidden />;
+});
+export default r34;

modules/voice_panel/native/controls/VoicePanelControlsDrawer.tsx

@@ -0,0 +1,121 @@
+// Metro module 16027 (f16028).
+import * as Module19 from "react";
+import { useState, useRef, useEffect, useMemo, useContext, useCallback } from "react";
+import { StyleSheet, View } from "react-native";
+import { MODE_CHANGE_PHYSICS, VoicePanelModes } from "../../VoicePanelConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useRefValue from "../../../../hooks/useRefValue";
+import { Freeze } from "../../../../_bundle/Suspender";
+import VoicePanelChatView from "./VoicePanelChatView";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useAnimatedStyle, useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
+import * as _VoicePanelControlsUtils from "../utils/VoicePanelControlsUtils";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import * as _cheapWorkletShallowEqual from "../../../reanimated/native/cheapWorkletShallowEqual";
+import VoicePanelVoiceControls from "./VoicePanelVoiceControls";
+import VoicePanelControlsAppLauncher from "./VoicePanelControlsAppLauncher";
+let useStyles, Component, __initData, __initData2, __initData3;
+const renderChat = function renderChat(a0) {
+  return <View collapsable={false} style={StyleSheet.absoluteFill}>
+    <VoicePanelChatView shown={a0} />
+  </View>;
+};
+useStyles = createStyles({
+  drawer: {
+    flex: 1,
+    zIndex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
+  }
+});
+Component = Module19.memo(function({ shown, renderContent }) {
+  const [freeze, setState] = useState(!shown);
+  if (shown ? freeze : shown) {
+    setState(false);
+  }
+  const ref = useRef(shown);
+  useEffect(() => {
+    ref.current = ref.current || shown;
+  });
+  useEffect(() => {
+    if (!shown) {
+      setState(true);
+    }
+  }, [shown]);
+  const memo = useMemo(() => renderContent(shown), [renderContent, shown]);
+  return useRefValue(ref) ? <Freeze freeze={freeze}>{memo}</Freeze> : shown ? <Freeze freeze={freeze}>{memo}</Freeze> : null;
+});
+__initData = {
+  code: "function VoicePanelControlsDrawerTsx1(){const{getControlsDrawerOpenWidth,windowDimensions,safeArea,withSpring,wrapperSpecs,TRANSITIONAL_HEIGHT,MODE_CHANGE_PHYSICS}=this.__closure;return{width:getControlsDrawerOpenWidth(windowDimensions.get().width,safeArea.get().left,safeArea.get().right),opacity:withSpring(wrapperSpecs.get().height>=TRANSITIONAL_HEIGHT?1:0,MODE_CHANGE_PHYSICS)};}"
+};
+__initData2 = {
+  code: "function VoicePanelControlsDrawerTsx2(){const{wrapperSpecs,mode}=this.__closure;return[wrapperSpecs.get().drawerMode,mode.get()];}"
+};
+__initData3 = {
+  code: "function VoicePanelControlsDrawerTsx3(props,previous){const{cheapWorkletArrayShallowEqual,VoicePanelModes,runOnJS,setFreeze}=this.__closure;if(cheapWorkletArrayShallowEqual(props,previous!==null&&previous!==void 0?previous:undefined))return;const[isDrawer,mode]=props;if(previous!=null&&isDrawer===previous[0]&&mode===previous[1]){return;}if(mode!==VoicePanelModes.PANEL||!isDrawer){runOnJS(setFreeze)(true);}else{runOnJS(setFreeze)(false);}}"
+};
+const r48 = Module19.memo(function VoicePanelControlsDrawer(props) {
+  const { tab, sharedTab, wrapperSpecs, gestureSpecs, openTab } = props;
+  const context = useContext(VoicePanelStateContext);
+  const { mode, windowDimensions, safeArea } = context;
+  const styles = useStyles();
+  const [state, setState2] = useState(tab == null);
+  if (tab !== sharedTab.get() && state) {
+    setState2(false);
+  }
+  const b = () => ({
+    width: _VoicePanelControlsUtils.getControlsDrawerOpenWidth(windowDimensions.get().width, safeArea.get().left, safeArea.get().right),
+    opacity: _spring.withSpring(wrapperSpecs.get().height >= 200 ? 1 : 0, MODE_CHANGE_PHYSICS)
+  });
+  b.__closure = {
+    getControlsDrawerOpenWidth: _VoicePanelControlsUtils.getControlsDrawerOpenWidth,
+    windowDimensions,
+    safeArea,
+    withSpring: _spring.withSpring,
+    wrapperSpecs,
+    TRANSITIONAL_HEIGHT: 200,
+    MODE_CHANGE_PHYSICS
+  };
+  b.__workletHash = 8777106499672;
+  b.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(b);
+  const V = () => [wrapperSpecs.get().drawerMode, mode.get()];
+  V.__closure = {
+    wrapperSpecs,
+    mode
+  };
+  V.__workletHash = 16802013961309;
+  V.__initData = __initData2;
+  const M = function M(a0, a1) {
+    const r12 = a1 == null ? void 0 : a1;
+    L12: {
+      if (!_cheapWorkletShallowEqual.cheapWorkletArrayShallowEqual(a0, r12)) {
+        const [r16, r17] = a0;
+        if (!(a1 != null && r16 === a1[0] && r17 === a1[1])) {
+          if (r17 === VoicePanelModes.PANEL && r16) {
+            _ReanimatedRexport.runOnJS(setState2)(false);
+            break L12;
+          }
+          _ReanimatedRexport.runOnJS(setState2)(true);
+        }
+      }
+    }
+  };
+  M.__closure = {
+    cheapWorkletArrayShallowEqual: _cheapWorkletShallowEqual.cheapWorkletArrayShallowEqual,
+    VoicePanelModes,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    setFreeze: setState2
+  };
+  M.__workletHash = 10375596551326;
+  M.__initData = __initData3;
+  useAnimatedReaction(V, M);
+  return <ReanimatedRexport.View style={[styles.drawer, animatedStyle]}>
+    <Component shown={state ? !state : tab === "chat"} renderContent={renderChat} />
+    <Component shown={state ? !state : tab === "settings"} renderContent={useCallback((a0) => <VoicePanelVoiceControls isVisible={a0} openTab={openTab} />, [openTab])} />
+    <Component shown={state ? !state : tab === "app_launcher"} renderContent={useCallback(() => <VoicePanelControlsAppLauncher gestureSpecs={gestureSpecs} />, [gestureSpecs])} />
+  </ReanimatedRexport.View>;
+});
+export default r48;
+export { Component as LazyContentFreezer };

modules/voice_panel/native/controls/VoicePanelControlsDrawerTitle.tsx

@@ -0,0 +1,73 @@
+// Metro module 11434 (f11435).
+import { memo } from "react";
+import { StyleSheet } from "react-native";
+import { CONTROLS_DRAWER_HEADER_SIZE } from "./VoicePanelControlsConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import NativeView from "../../../core/native/NativeView";
+import VoicePanelHeaderGlassBlur from "../shared/VoicePanelHeaderGlassBlur";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import { Text } from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  titleWrapper: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16,
+    height: CONTROLS_DRAWER_HEADER_SIZE
+  },
+  titlePill: {
+    borderRadius: Module712.radii.round,
+    paddingHorizontal: 12,
+    paddingTop: 1,
+    paddingBottom: 2
+  },
+  titlePillBG: {
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  }
+});
+const __initData = {
+  code: "function VoicePanelControlsDrawerTitleTsx1(){const{shown,_shown,disablePill,backgroundColor}=this.__closure;const showBGColor=shown!=null?shown.get():_shown.get();return{backgroundColor:showBGColor&&!disablePill?backgroundColor:'transparent'};}"
+};
+const r44 = memo(function VoicePanelControlsDrawerTitle(props) {
+  const title = props.title;
+  let shown2 = props.shown;
+  const shown = shown2;
+  let disablePill = props.disablePill;
+  if (disablePill === void 0) {
+    disablePill = false;
+  }
+  let c18833_1 = disablePill;
+  const { style, blurStyle } = props;
+  const styles = useStyles();
+  const sharedValue = useSharedValue(true);
+  const backgroundColor = styles.titlePillBG.backgroundColor;
+  const r26 = function() {
+    return {
+      backgroundColor: (shown != null ? shown.get() : sharedValue.get()) ? c18833_1 ? "transparent" : backgroundColor : "transparent"
+    };
+  };
+  r26.__closure = {
+    shown,
+    _shown: sharedValue,
+    disablePill,
+    backgroundColor
+  };
+  r26.__workletHash = 14837285839887;
+  r26.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(r26);
+  if (shown == null) {
+    shown2 = sharedValue;
+  }
+  return <NativeView style={[styles.titleWrapper, style]}>
+    <VoicePanelHeaderGlassBlur shown={shown2} style={StyleSheet.absoluteFillObject} blurStyle={blurStyle} />
+    <ReanimatedNativeView style={[styles.titlePill, animatedStyle]}>
+      <Text variant="redesign/heading-18/bold" color="mobile-text-heading-primary" accessibilityRole="header">{title}</Text>
+    </ReanimatedNativeView>
+  </NativeView>;
+});
+export default r44;

modules/voice_panel/native/controls/VoicePanelFloatingCTAContainer.tsx

@@ -0,0 +1,149 @@
+// Metro module 15999 (f16000).
+import { useContext, useMemo } from "react";
+import ChannelStore from "../../../../stores/ChannelStore";
+import { UI_SHOW_HIDE_PHYSICS, MODE_CHANGE_PHYSICS } from "../../VoicePanelConstants";
+import { CALL_TILE_GUTTER } from "../card/VoicePanelCardConstants";
+import { ThemeTypes } from "../../../../_bundle/Module505";
+import { resolveRefreshToken } from "../../../themes/experiments/MobileVisualRefreshExperiment";
+import Module712 from "../../../../_bundle/Module712";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { Stack } from "../../../../design/components/Stack/native/Stack.native";
+import { RowButton } from "../../../../design/components/TableRow/native/RowButton.native";
+import { ThemeContextProvider } from "../../../../_bundle/Module3901";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import useChannelFloatingCTAContent from "../../../video_calls/native/useChannelFloatingCTAContent";
+import { useGetDismissibleContent } from "../../../dismissible_content/useGetDismissibleContent";
+import { useStateFromStores } from "../../../../_bundle/defaultAreStatesEqual";
+import { getDismissableCTAProps, useFloatingCTAProps } from "./utils/VoicePanelFloatingCTAUtils";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import * as _VoicePanelControlsUtils from "../utils/VoicePanelControlsUtils";
+import * as _TransitionGroup from "../../../../design/components/TransitionGroup/TransitionGroup";
+import roundToNearestPixel from "../utils/roundToNearestPixel";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import SelectedDismissibleContent from "../../../dismissible_content/native/SelectedDismissibleContent";
+let useStyles, OPACITY_CHANGE_PHYSICS, __initData, __initData2, VoicePanelFloatingCTAContainer;
+const FloatingCTA = function FloatingCTA(props) {
+  const { trailing, ...rest } = props;
+  return <Stack>
+    <RowButton experimental_withBlurBackground arrow={trailing == null} trailing={trailing} {...rest} />
+  </Stack>;
+};
+VoicePanelFloatingCTAContainer = function VoicePanelFloatingCTAContainer(props) {
+  let memo;
+  const { wrapperSpecs, accessoryHeights, controlsSpecs, state, cleanUp, gestureState } = props;
+  memo = void 0;
+  const styles = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const { windowDimensions, channelId, safeArea } = context;
+  const channelFloatingCTAContent = useChannelFloatingCTAContent(channelId);
+  const [dismissableContent] = useGetDismissibleContent(channelFloatingCTAContent);
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  memo = useMemo(() => getDismissableCTAProps({
+    dismissableContent,
+    channel: stateFromStores
+  }), [dismissableContent, stateFromStores]);
+  const floatingCTAProps = useFloatingCTAProps(stateFromStores);
+  const A = function A() {
+    let r37, r87, transform;
+    const controlsDefaultWidth = _VoicePanelControlsUtils.getControlsDefaultWidth(windowDimensions.get().width, safeArea.get().left, safeArea.get().right);
+    const r1 = state === _TransitionGroup.TransitionStates.YEETED ? 0 : 1;
+    L7: {
+      L6: {
+        r37 = {
+          bottom: controlsSpecs.get().height + 16,
+          width: controlsDefaultWidth,
+          marginLeft: -1 * roundToNearestPixel(controlsDefaultWidth / 2),
+          opacity: null,
+          transform: null
+        };
+        const t = function t(a0) {
+          if (a0 ? state === _TransitionGroup.TransitionStates.YEETED : a0) {
+            _ReanimatedRexport.runOnJS(cleanUp)();
+          }
+        };
+        t.__closure = {
+          state,
+          TransitionStates: _TransitionGroup.TransitionStates,
+          runOnJS: _ReanimatedRexport.runOnJS,
+          cleanUp
+        };
+        t.__workletHash = 7334460639890;
+        t.__initData = __initData2;
+        r37.opacity = _spring.withSpring(r1, OPACITY_CHANGE_PHYSICS, "respect-motion-settings", t);
+        transform = [{
+          translateX: _spring.withSpring(wrapperSpecs.get().x, UI_SHOW_HIDE_PHYSICS)
+        }, ,];
+        if (!wrapperSpecs.get().hidden) {
+          if (gestureState.get().active && !gestureState.get().requiresPop) {
+            break L6;
+          }
+          r87 = wrapperSpecs.get().y;
+          break L7;
+        }
+      }
+      r87 = wrapperSpecs.get().height + CALL_TILE_GUTTER + accessoryHeights.get();
+    }
+    transform[1] = {
+      translateY: _spring.withSpring(r87, UI_SHOW_HIDE_PHYSICS)
+    };
+    r37.transform = transform;
+    return r37;
+  };
+  A.__closure = {
+    getControlsDefaultWidth: _VoicePanelControlsUtils.getControlsDefaultWidth,
+    windowDimensions,
+    safeArea,
+    state,
+    TransitionStates: _TransitionGroup.TransitionStates,
+    controlsSpecs,
+    roundToNearestPixel,
+    withSpring: _spring.withSpring,
+    OPACITY_CHANGE_PHYSICS,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    cleanUp,
+    wrapperSpecs,
+    UI_SHOW_HIDE_PHYSICS,
+    gestureState,
+    CALL_TILE_GUTTER,
+    accessoryHeights
+  };
+  A.__workletHash = 3338259366067;
+  A.__initData = __initData;
+  return <ReanimatedNativeView style={[styles.container, useAnimatedStyle(A)]}>
+    {memo != null ? <SelectedDismissibleContent contentTypes={channelFloatingCTAContent}>
+      {() => <FloatingCTA {...memo} />}
+    </SelectedDismissibleContent> : floatingCTAProps != null ? <FloatingCTA {...floatingCTAProps} /> : null}
+  </ReanimatedNativeView>;
+};
+useStyles = createStyles({
+  container: {
+    zIndex: 1,
+    position: "absolute",
+    bottom: 0,
+    left: "50%",
+    overflow: "hidden",
+    alignItems: "center",
+    borderRadius: Module712.radii.lg
+  }
+});
+OPACITY_CHANGE_PHYSICS = {
+  ...MODE_CHANGE_PHYSICS,
+  overshootClamping: true
+};
+__initData = {
+  code: "function VoicePanelFloatingCTAContainerTsx1(){const{getControlsDefaultWidth,windowDimensions,safeArea,state,TransitionStates,controlsSpecs,roundToNearestPixel,withSpring,OPACITY_CHANGE_PHYSICS,runOnJS,cleanUp,wrapperSpecs,UI_SHOW_HIDE_PHYSICS,gestureState,CALL_TILE_GUTTER,accessoryHeights}=this.__closure;const width=getControlsDefaultWidth(windowDimensions.get().width,safeArea.get().left,safeArea.get().right);const opacity=state===TransitionStates.YEETED?0:1;return{bottom:controlsSpecs.get().height+16,width:width,marginLeft:roundToNearestPixel(width/2)*-1,opacity:withSpring(opacity,OPACITY_CHANGE_PHYSICS,'respect-motion-settings',function(finished){if(finished&&state===TransitionStates.YEETED){runOnJS(cleanUp)();}}),transform:[{translateX:withSpring(wrapperSpecs.get().x,UI_SHOW_HIDE_PHYSICS)},{translateY:withSpring(wrapperSpecs.get().hidden||gestureState.get().active&&!gestureState.get().requiresPop?wrapperSpecs.get().height+CALL_TILE_GUTTER+accessoryHeights.get():wrapperSpecs.get().y,UI_SHOW_HIDE_PHYSICS)}]};}"
+};
+__initData2 = {
+  code: "function VoicePanelFloatingCTAContainerTsx2(finished){const{state,TransitionStates,runOnJS,cleanUp}=this.__closure;if(finished&&state===TransitionStates.YEETED){runOnJS(cleanUp)();}}"
+};
+export default VoicePanelFloatingCTAContainer;
+export function getFloatingCTATotalViewHeight(a0) {
+  return resolveRefreshToken(Module712.modules.mobile.TABLE_ROW_HEIGHT, a0) + 16;
+}
+export function renderVoicePanelFloatingCTA(a0, a1, a2, a3) {
+  return <ThemeContextProvider key={a0} theme={ThemeTypes.DARK}>
+    <VoicePanelFloatingCTAContainer {...a1} state={a2} cleanUp={a3} />
+  </ThemeContextProvider>;
+}

modules/voice_panel/native/controls/VoicePanelVoiceControls.tsx

@@ -0,0 +1,148 @@
+// Metro module 16028 (f16029).
+import { memo, useContext, useCallback, useEffect, useMemo } from "react";
+import { ScrollView } from "react-native";
+import ChannelStore from "../../../../stores/ChannelStore";
+import { CONTROLS_DRAWER_HEADER_EXPANDED_SIZE } from "./VoicePanelControlsConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import ReanimatedRexport, { useSharedValue } from "../../../reanimated/ReanimatedRexport";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import useIsConnectedToVoiceChannel from "../hooks/useIsConnectedToVoiceChannel";
+import { useEmbeddedActivityLaunchability, EmbeddedActivityLaunchability } from "../../../activities/utils/getEmbeddedActivityLaunchability";
+import { DeveloperMode } from "../../../user_settings/UserSettings";
+import MobileGoLiveEntrypointExperiment, { MobileGoLiveEntrypointTreatment } from "../../../go_live/MobileGoLiveEntrypointExperiment";
+import MobileAudioOutputExperiment from "../../../media_engine/MobileAudioOutputExperiment";
+import useSelectedActiveStream from "../../../video_calls/native/useSelectedActiveStream";
+import { Stack } from "../../../../design/components/Stack/native/Stack.native";
+import { TableRowGroup } from "../../../../design/components/TableRow/native/TableRowGroup.native";
+import { ActivitiesButton, ChatButton, SoundboardButton, ScreenshareButton, GameConsoles, StreamVolumeItem, DeafenSwitch, AudioRouteButton, HideNonVideoParticipants, HideSelfVideo, InviteButton, VoiceSettingsButton, ReportStreamIssueButton, LeaveActivitiesButton, ShareActivityLogsButton, ToggleShowActivitiesDebugOverlay } from "./VoicePanelVoiceControlsButtons";
+import { intl, t } from "../../../../intl/index.native";
+import { VoiceProcessingOptions } from "../../../user_settings/voice/native/UserSettingsVoiceProcessing";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { ControlsGestureScrollLock } from "./utils/createUseAnimatedScrollLock";
+import { useIsScreenReaderEnabled } from "../../../a11y/native/useIsScreenReaderEnabled.native";
+import { GestureDetector, Gesture } from "../../../../_bundle/Module5273";
+import { isMetaQuest } from "../../../device/MetaQuestUtils.android";
+import NativeView from "../../../core/native/NativeView";
+import { SafeAreaPaddingView } from "../../../../components_native/common/SafeAreaView";
+import VoicePanelHeaderGlassBlur from "../shared/VoicePanelHeaderGlassBlur";
+let useStyles, AnimatedComponent, Component, scrollIndicatorInsets, __initData;
+const NOOP = function NOOP() {};
+useStyles = createStyles({
+  scrollView: {
+    flex: 1,
+    paddingHorizontal: Module712.space.PX_16
+  },
+  scrollViewScreenReader: {
+    flex: 1,
+    paddingHorizontal: Module712.space.PX_16,
+    marginTop: CONTROLS_DRAWER_HEADER_EXPANDED_SIZE
+  },
+  blurRegion: {
+    height: CONTROLS_DRAWER_HEADER_EXPANDED_SIZE
+  }
+});
+AnimatedComponent = ReanimatedRexport.createAnimatedComponent(ScrollView);
+Component = memo(function({ channel, openTab }) {
+  const channelId2 = useContext(VoicePanelStateContext).channelId;
+  const isConnectedToVoiceChannel = useIsConnectedToVoiceChannel(channelId2);
+  const embeddedActivityLaunchability = useEmbeddedActivityLaunchability(channelId2);
+  const setting = DeveloperMode.useSetting();
+  const treatment = MobileGoLiveEntrypointExperiment.useConfig({
+    location: "VoicePanelVoiceControls"
+  }).treatment;
+  let nonContextualStreamOutputPresent = MobileAudioOutputExperiment.useConfig({
+    location: "VoicePanelVoiceControls"
+  }).nonContextualStreamOutputPresent;
+  const selectedActiveStream = useSelectedActiveStream(channel);
+  const r79 = [isConnectedToVoiceChannel ? <TableRowGroup hasIcons>
+    <ActivitiesButton openTab={openTab} />
+    {MobileGoLiveEntrypointTreatment.SCREENSHARE_REPLACES_CHAT === treatment ? <ChatButton openTab={openTab} /> : MobileGoLiveEntrypointTreatment.SCREENSHARE_REPLACES_SOUNDBOARD === treatment ? <SoundboardButton channel={channel} /> : <ScreenshareButton channel={channel} />}
+  </TableRowGroup> : isConnectedToVoiceChannel, <GameConsoles channel={channel} connected={isConnectedToVoiceChannel} />, , , , , ,];
+  if (nonContextualStreamOutputPresent) {
+    nonContextualStreamOutputPresent = <StreamVolumeItem />;
+  }
+  r79[2] = nonContextualStreamOutputPresent;
+  r79[3] = <TableRowGroup title={intl.string(t.NiTd0e)} hasIcons>
+    <DeafenSwitch />
+    <AudioRouteButton channel={channel} connected={isConnectedToVoiceChannel} />
+    <HideNonVideoParticipants channelId={channelId2} />
+    <HideSelfVideo />
+    {isConnectedToVoiceChannel && <InviteButton channel={channel} connected={isConnectedToVoiceChannel} />}
+  </TableRowGroup>;
+  r79[4] = <VoiceProcessingOptions />;
+  r79[5] = <TableRowGroup hasIcons>
+    <VoiceSettingsButton guildId={channel.guild_id} />
+    {selectedActiveStream != null && <ReportStreamIssueButton stream={selectedActiveStream} />}
+  </TableRowGroup>;
+  r79[6] = isConnectedToVoiceChannel ? setting ? embeddedActivityLaunchability === EmbeddedActivityLaunchability.CAN_LAUNCH ? <TableRowGroup title={intl.string(t.J6rqB7)} hasIcons>
+    <LeaveActivitiesButton />
+    <ShareActivityLogsButton />
+    <ToggleShowActivitiesDebugOverlay />
+  </TableRowGroup> : null : null : null;
+  return <Stack spacing={24}>{r79}</Stack>;
+});
+scrollIndicatorInsets = {
+  top: CONTROLS_DRAWER_HEADER_EXPANDED_SIZE
+};
+__initData = {
+  code: "function VoicePanelVoiceControlsTsx1({offset:offset}){const{isScrolled}=this.__closure;isScrolled.set(offset>0);}"
+};
+const r56 = memo(function VoicePanelVoiceControls(props) {
+  let sharedValue, gestureRef, scrollerRef;
+  const { isVisible, openTab } = props;
+  sharedValue = void 0;
+  gestureRef = void 0;
+  scrollerRef = void 0;
+  const styles = useStyles();
+  const channelId = useContext(VoicePanelStateContext).channelId;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  sharedValue = useSharedValue(false);
+  const r37 = function(a0) {
+    sharedValue.set(a0.offset > 0);
+  };
+  r37.__closure = {
+    isScrolled: sharedValue
+  };
+  r37.__workletHash = 16758626276795;
+  r37.__initData = __initData;
+  const callback = useCallback(r37, [sharedValue]);
+  const r48 = useContext(ControlsGestureScrollLock)({
+    onScrollHandlerWorkletized: callback
+  });
+  const onScroll = r48.onScroll;
+  gestureRef = r48.gestureRef;
+  scrollerRef = r48.scrollerRef;
+  const animatedProps = r48.animatedProps;
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  useEffect(() => {
+    let r2 = isVisible;
+    if (isVisible) {
+      r2 = scrollerRef != null;
+    }
+    if (r2) {
+      const current = scrollerRef.current;
+      if (current != null) {
+        current.scrollTo({
+          x: 0,
+          y: 0,
+          animated: false
+        });
+      }
+    }
+  }, [isVisible, scrollerRef]);
+  return <>
+    <GestureDetector gesture={useMemo(() => {
+      const r15 = Gesture.Native().enabled(!isMetaQuest());
+      return gestureRef != null ? r15.simultaneousWithExternalGesture(gestureRef) : r15;
+    }, [gestureRef])}>
+      <AnimatedComponent style={isScreenReaderEnabled ? styles.scrollViewScreenReader : styles.scrollView} ref={scrollerRef} onScroll={onScroll} animatedProps={animatedProps} onMomentumScrollEnd={NOOP} scrollEventThrottle={8.333333333333334} scrollIndicatorInsets={scrollIndicatorInsets}>
+        {isScreenReaderEnabled ? !isScreenReaderEnabled : <NativeView style={styles.blurRegion} />}
+        {stateFromStores != null && <Component channel={stateFromStores} openTab={openTab} />}
+        <SafeAreaPaddingView bottom />
+      </AnimatedComponent>
+    </GestureDetector>
+    {isScreenReaderEnabled ? !isScreenReaderEnabled : <VoicePanelHeaderGlassBlur shown={sharedValue} style={styles.blurRegion} />}
+  </>;
+});
+export default r56;

modules/voice_panel/native/controls/VoicePanelVoiceControlsButtons.tsx

@@ -0,0 +1,238 @@
+// Metro module 16029 (f16030).
+import { useCallback, useContext } from "react";
+import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import UnsyncedUserSettingsStore from "../../../user_settings/UnsyncedUserSettingsStore";
+import ChannelCallLifecycleStore from "../../../video_calls/native/ChannelCallLifecycleStore";
+import ApplicationStreamingStore from "../../../../stores/ApplicationStreamingStore";
+import AuthenticationStore from "../../../../stores/AuthenticationStore";
+import MediaEngineStore from "../../../../stores/MediaEngineStore";
+import VoiceStateStore from "../../../../stores/VoiceStateStore";
+import { AnalyticEvents, PlatformTypes } from "../../../../Constants";
+import { SelfStreamAndVideoAlertType } from "../../../calls/HideSelfStreamAndVideoConstants";
+import { MediaEngineContextTypes } from "../../../../_bundle/Module4250";
+import AlertActionCreators from "../../../../actions/native/AlertActionCreators";
+import { intl, t } from "../../../../intl/index.native";
+import useGameConsoleAccounts from "../../../game_console/useGameConsoleAccounts";
+import { TableRowGroup } from "../../../../design/components/TableRow/native/TableRowGroup.native";
+import useIsVoiceChannelFull, { useIsVoiceChannelLocked } from "../../../voice_calls/useIsVoiceChannelFull";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { useOnConnectToConsole } from "../../../video_calls/native/useOnConnectToConsole";
+import getConsoleIcon from "../../../game_console/native/getConsoleIcon";
+import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
+import { TableRowIcon } from "../../../../design/components/TableRow/native/TableRowIcon.native";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { VoicePanelTabAnalyticsSources } from "./trackVoicePanelTabOpened";
+import { AppsIcon } from "../../../../design/components/Icon/native/redesign/generated/AppsIcon";
+import { ChatIcon } from "../../../../design/components/Icon/native/redesign/generated/ChatIcon";
+import useSoundboardConfig, { SoundboardButtonLocation } from "../hooks/useSoundboardConfig";
+import { SoundboardIcon } from "../../../../design/components/Icon/native/redesign/generated/SoundboardIcon";
+import useScreenshareUtils from "../../../video_calls/native/useScreenshareUtils";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import useMuteAwareLocalVolume from "../../../media_engine/useMuteAwareLocalVolume";
+import VolumeSlider from "../../../../components_native/common/VolumeSlider";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import Module712 from "../../../../_bundle/Module712";
+import AudioActionCreators from "../../../../actions/AudioActionCreators";
+import { TableSwitchRow } from "../../../../design/components/TableRow/native/TableSwitchRow.native";
+import { HeadphonesSlashIcon } from "../../../../design/components/Icon/native/redesign/generated/HeadphonesSlashIcon";
+import Module15943 from "../../../../_bundle/Module15943";
+import { useMaskedSpeakerStates } from "../../../voice_calls/native/CallsUtils";
+import { showAudioOutputSelector } from "../../../voice_calls/native/audio_output_selector/showAudioOutputSelector";
+import { TableRowArrow } from "../../../../design/components/TableRow/native/TableRowArrow.native";
+import { useCanInviteMembers } from "../hooks/useCanInviteMembers";
+import { useInviteMembersCallback } from "../hooks/useInviteMembersCallback";
+import { GroupPlusIcon } from "../../../../design/components/Icon/native/redesign/generated/GroupPlusIcon";
+import Module10795 from "../../../../_bundle/Module10795";
+import ChannelRTCActionCreators from "../../../../actions/ChannelRTCActionCreators";
+import { VideoIcon } from "../../../../design/components/Icon/native/redesign/generated/VideoIcon";
+import Module10744 from "../../../../_bundle/Module10744";
+import useHideSelfVideo from "../../../calls/useHideSelfVideo";
+import { UserSquareIcon } from "../../../../design/components/Icon/native/redesign/generated/UserSquareIcon";
+import Module10440 from "../../../../_bundle/Module10440";
+import EmbeddedActivitiesNativeManager from "../../../activities/native/EmbeddedActivitiesNativeManager";
+import { shareActivityLogs, reportStreamIssue, rtcDebugPanel } from "../../../video_calls/native/ChannelCallUtils";
+import Module7690 from "../../../../_bundle/Module7690";
+import Dispatcher from "../../../../Dispatcher";
+import { showVoiceSettingsActionSheet } from "../../../video_calls/native/components/ChannelCallConnectingScreen";
+import { SettingsIcon } from "../../../../design/components/Icon/native/redesign/generated/SettingsIcon";
+import Module15942 from "../../../../_bundle/Module15942";
+let toggleDeaf;
+const GameConsoleAccountButton = function GameConsoleAccountButton(props) {
+  let onConnectToConsole;
+  const { channel, account, connected: connected3 } = props;
+  onConnectToConsole = void 0;
+  const isVoiceChannelFull = useIsVoiceChannelFull(channel);
+  const r21 = useIsVoiceChannelLocked(channel) && !channel.isPrivate();
+  let c22730_1 = r21;
+  const stateFromStores3 = useStateFromStores([VoiceStateStore], () => VoiceStateStore.isInChannel(channel.id));
+  const disabled = (stateFromStores3 ? !stateFromStores3 : isVoiceChannelFull) || r21;
+  const callback = useCallback(() => {
+    ToastActionCreators.open({
+      key: c22730_1 ? intl.string(t.rimHDW) : intl.string(t.rZfiNq),
+      content: c22730_1 ? intl.string(t.rimHDW) : intl.string(t.rZfiNq)
+    });
+  }, [r21]);
+  onConnectToConsole = useOnConnectToConsole(channel, account);
+  let onPress3 = useCallback(() => {
+    onConnectToConsole();
+  }, [onConnectToConsole]);
+  const type = account.type;
+  const label = type === PlatformTypes.XBOX ? connected3 ? intl.string(t["qVE/VF"]) : intl.string(t.E8euSk) : type === PlatformTypes.PLAYSTATION ? connected3 ? intl.string(t.vzfxmY) : intl.string(t.QxEYDj) : type === PlatformTypes.PLAYSTATION_STAGING ? connected3 ? intl.string(t.BDiXtV) : intl.string(t["bhdB9+"]) : void 0;
+  const consoleIcon = getConsoleIcon(account.type);
+  const r2 = label == null;
+  let r82 = null;
+  if (!r2) {
+    const icon = consoleIcon != null ? <TableRowIcon source={consoleIcon} /> : void 0;
+    if (disabled) {
+      onPress3 = callback;
+    }
+    r82 = <TableRow icon={icon} label={label} disabled={disabled} onPress={onPress3} />;
+  }
+  return r82;
+};
+toggleDeaf = function toggleDeaf() {
+  AudioActionCreators.toggleSelfDeaf();
+};
+export function GameConsoles(props) {
+  const { channel: channel2, connected } = props;
+  const gameConsoleAccounts = useGameConsoleAccounts();
+  return gameConsoleAccounts.length > 0 ? <TableRowGroup title={intl.string(t["mbi/fB"])} hasIcons>
+    {gameConsoleAccounts.map((gameConsoleAccount) => <GameConsoleAccountButton key={gameConsoleAccount.type} account={gameConsoleAccount} channel={channel2} connected={connected} />)}
+  </TableRowGroup> : null;
+}
+export { GameConsoleAccountButton };
+export function ActivitiesButton(props) {
+  const openTab = props.openTab;
+  const dismissPanel = useContext(VoicePanelStateContext).dismissPanel;
+  return <TableRow onPress={useCallback(() => {
+    dismissPanel();
+    setTimeout(() => {
+      openTab({
+        tab: "app_launcher",
+        source: VoicePanelTabAnalyticsSources.VOICE_CONTROLS
+      });
+    }, 200);
+  }, [dismissPanel, openTab])} icon={<TableRowIcon IconComponent={AppsIcon} />} label={intl.string(t.aeuOoh)} />;
+}
+export function ChatButton(props) {
+  const openTab2 = props.openTab;
+  const dismissPanel2 = useContext(VoicePanelStateContext).dismissPanel;
+  return <TableRow onPress={useCallback(() => {
+    dismissPanel2();
+    setTimeout(() => {
+      openTab2({
+        tab: "chat",
+        source: VoicePanelTabAnalyticsSources.VOICE_CONTROLS
+      });
+    }, 200);
+  }, [dismissPanel2, openTab2])} icon={<TableRowIcon IconComponent={ChatIcon} />} label={intl.string(t["5KxXrK"])} />;
+}
+export function SoundboardButton(props) {
+  const soundboardConfig = useSoundboardConfig(props.channel.id, SoundboardButtonLocation.VOICE_CONTROLS);
+  const { visible, handlePress, disabled } = soundboardConfig;
+  return visible ? <TableRow label={intl.string(t.ABjMWI)} onPress={handlePress} disabled={disabled} icon={<TableRowIcon IconComponent={SoundboardIcon} />} /> : null;
+}
+export function ScreenshareButton(props) {
+  const channel4 = props.channel;
+  const screenshareUtils = useScreenshareUtils(channel4);
+  const { onPress: onPress2, imgSource, text, isFeatureEnabled, isActive } = screenshareUtils;
+  return <TableRow disabled={!isFeatureEnabled} onPress={useCallback(() => {
+    AnalyticsUtils.track(AnalyticEvents.VOICE_PANEL_SCREENSHARE_BUTTON_TAPPED, {
+      source: "voice controls",
+      was_active: isActive
+    });
+    onPress2();
+  }, [isActive, onPress2])} icon={<TableRowIcon source={imgSource} />} label={text} />;
+}
+export function StreamVolumeItem() {
+  const stateFromStores3 = useStateFromStores([ApplicationStreamingStore, AuthenticationStore], () => {
+    const lastActiveStream = ApplicationStreamingStore.getLastActiveStream();
+    return lastActiveStream != null ? lastActiveStream.ownerId !== AuthenticationStore.getId() ? lastActiveStream : null : null;
+  });
+  const muteAwareLocalVolume = useMuteAwareLocalVolume(stateFromStores3?.ownerId, MediaEngineContextTypes.STREAM);
+  const { effectiveVolume, handleVolumeChange } = muteAwareLocalVolume;
+  return stateFromStores3 == null ? null : <TableRowGroup title={intl.string(t.pEAl4b)} hasIcons={false}>
+    <TableRow label={<VolumeSlider onResponderGrant={isAndroid() ? () => true : void 0} value={effectiveVolume} onValueChange={handleVolumeChange} color={Module712.unsafe_rawColors.WHITE} maxTrackTintColor={Module712.unsafe_rawColors.PRIMARY_300} />} />
+  </TableRowGroup>;
+}
+export function DeafenSwitch() {
+  const stateFromStores3 = useStateFromStores([MediaEngineStore], () => MediaEngineStore.isSelfDeaf());
+  return <TableSwitchRow icon={<TableRowIcon IconComponent={HeadphonesSlashIcon} source={Module15943} />} accessibilityHint={intl.string(t.wjcRFX)} value={stateFromStores3} onValueChange={toggleDeaf} label={intl.string(t.wjcRFX)} subLabel={intl.string(t.M3VN2U)} />;
+}
+export function AudioRouteButton(props) {
+  const { channel: channel3, connected: connected2 } = props;
+  return <TableRow icon={<TableRowIcon source={useMaskedSpeakerStates().routeSource} />} onPress={() => {
+    showAudioOutputSelector(channel3.id, connected2);
+  }} label={intl.string(t["A/Ly/2"])} trailing={<TableRowArrow />} />;
+}
+export function InviteButton(props) {
+  const { channel: channel4, connected: connected3 } = props;
+  const canInviteMembers = useCanInviteMembers(channel4.id);
+  const isVoiceChannelFull = useIsVoiceChannelFull(channel4);
+  const inviteMembersCallback = useInviteMembersCallback(channel4.id);
+  return isVoiceChannelFull ? null : canInviteMembers ? connected3 ? <TableRow onPress={inviteMembersCallback} icon={<TableRowIcon IconComponent={GroupPlusIcon} source={Module10795} />} label={intl.string(t["f1+QIK"])} trailing={<TableRowArrow />} /> : null : null;
+}
+export function HideNonVideoParticipants(props) {
+  const channelId = props.channelId;
+  const stateFromStores = useStateFromStores([ChannelRTCStore], () => ChannelRTCStore.getVoiceParticipantsHidden(channelId));
+  const callback = useCallback(() => {
+    ChannelRTCActionCreators.toggleVoiceParticipantsHidden(channelId, !stateFromStores);
+  }, [channelId, stateFromStores]);
+  return <TableSwitchRow icon={<TableRowIcon IconComponent={VideoIcon} source={Module10744} />} accessibilityHint={intl.string(t.ZMTRyc)} value={stateFromStores} onValueChange={callback} label={intl.string(t.ZMTRyc)} subLabel={intl.string(t.MlpCFS)} />;
+}
+export function HideSelfVideo() {
+  let [r20, r9, c22737_1] = useHideSelfVideo(AuthenticationStore.getId());
+  let c22737_0 = r9;
+  const stateFromStores2 = useStateFromStores([UnsyncedUserSettingsStore], () => UnsyncedUserSettingsStore.disableHideSelfStreamAndVideoConfirmationAlert);
+  return r20 ? <TableSwitchRow icon={<TableRowIcon IconComponent={UserSquareIcon} />} value={!r9} onValueChange={function onValueChange() {
+    if (!stateFromStores2 && !c22737_0) {
+      const VIDEO = SelfStreamAndVideoAlertType.VIDEO;
+      const onConfirm = () => c22737_1(!c22737_0);
+      AlertActionCreators.openLazy({
+        importer: () => import("../../../video_calls/native/components/HideSelfStreamAndVideoConfirmDialog").then(({ default: Component }) => (a0) => <Component {...a0} type={VIDEO} onConfirm={onConfirm} />)
+      });
+      return void 0;
+    }
+    return c22737_1(!c22737_0);
+  }} label={intl.string(t.MH8ESU)} /> : null;
+}
+export function LeaveActivitiesButton() {
+  return <TableRow icon={<TableRowIcon source={Module10440} />} label={intl.string(t["R/FK4A"])} onPress={function onPress() {
+    const currentEmbeddedActivity = EmbeddedActivitiesStore.getCurrentEmbeddedActivity();
+    EmbeddedActivitiesNativeManager.leaveActivity({
+      location: currentEmbeddedActivity?.location,
+      applicationId: currentEmbeddedActivity?.applicationId
+    });
+  }} />;
+}
+export function ShareActivityLogsButton() {
+  const r11 = shareActivityLogs();
+  const { label, icon } = r11;
+  return <TableRow icon={icon != null ? <TableRowIcon source={icon} /> : void 0} label={label} onPress={r11.onPress} />;
+}
+export function ToggleShowActivitiesDebugOverlay() {
+  return <TableSwitchRow icon={<TableRowIcon source={Module7690} />} value={useStateFromStores([ChannelCallLifecycleStore], () => ChannelCallLifecycleStore.getShowActivitiesDebugOverlay())} onValueChange={function onValueChange(value) {
+    Dispatcher.dispatch({
+      type: "EMBEDDED_ACTIVITY_SET_DEBUG_OVERLAY_VISIBILITY",
+      visible: value
+    });
+  }} label={intl.string(t["qv5/SP"])} />;
+}
+export function VoiceSettingsButton(props) {
+  const guildId = props.guildId;
+  return <TableRow onPress={useCallback(() => {
+    showVoiceSettingsActionSheet(guildId);
+  }, [guildId])} icon={<TableRowIcon IconComponent={SettingsIcon} source={Module15942} />} label={intl.string(t.NiTd0e)} subLabel={intl.string(t["16SG+O"])} trailing={<TableRowArrow />} />;
+}
+export function ReportStreamIssueButton(props) {
+  const r12 = reportStreamIssue(props.stream);
+  const { label, icon } = r12;
+  return <TableRow icon={icon != null ? <TableRowIcon source={icon} /> : void 0} label={label} onPress={r12.onPress} />;
+}
+export function RTCDebugPanelButton() {
+  const r11 = rtcDebugPanel(() => {});
+  const { label, onPress: onPress3, icon } = r11;
+  return <TableRow icon={icon != null ? <TableRowIcon source={icon} /> : void 0} label={label} onPress={onPress3} />;
+}

modules/voice_panel/native/controls/activities/ActivityItemMissingCard.tsx

@@ -0,0 +1,61 @@
+// Metro module 15972 (f15973).
+import { useContext, useCallback, memo } from "react";
+import { ActivityIndicator } from "react-native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import VoicePanelStateContext from "../../VoicePanelStateContext";
+import useAnalyticsLocations from "../../../../app_analytics/useAnalyticsLocations";
+import { maybeJoinEmbeddedActivity } from "../../../../activities/handlePressJoinActivity";
+import useEmbeddedActivityBackground from "../../../../activities/utils/useEmbeddedActivityBackground";
+import { PressableOpacity } from "../../../../../design/void/Pressables/native/Pressables";
+import ActivityShelfItemBackground from "./ActivityShelfItemBackground";
+import ActivityShelfItemSummary from "./ActivityShelfItemSummary";
+import NativeView from "../../../../core/native/NativeView";
+let useStyles;
+const ActivityItemEmptyCard = function ActivityItemEmptyCard(props) {
+  const { activity, application } = props;
+  const styles = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const channelId = context.channelId;
+  const targetDimensions = context.layoutManager.getTargetDimensions(void 0);
+  const { width, height } = targetDimensions;
+  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  return <PressableOpacity activeOpacity={0.7} onPress={useCallback(async () => {
+    await maybeJoinEmbeddedActivity({
+      channelId,
+      applicationId: application.id,
+      launchId: activity.launchId,
+      inputApplication: application,
+      analyticsLocations
+    });
+  }, [activity.launchId, analyticsLocations, application, channelId])} style={styles.disabledActivity}>
+    <ActivityShelfItemBackground imageBackground={useEmbeddedActivityBackground({
+      applicationId: activity.applicationId,
+      size: width,
+      names: ["embedded_background"]
+    })} aspectRatio={width / height} />
+    <ActivityShelfItemSummary channelId={channelId} applicationId={application.id} applicationName={application.name} />
+  </PressableOpacity>;
+};
+useStyles = createStyles({
+  loadingActivity: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  },
+  disabledActivity: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  }
+});
+const r42 = memo(function ActivityItemMissingCard(props) {
+  const { activity: activity2, application: application2 } = props;
+  const styles = useStyles();
+  return activity2 != null && application2 != null ? <ActivityItemEmptyCard activity={activity2} application={application2} /> : <NativeView style={styles.loadingActivity}>
+    <ActivityIndicator size="large" />
+  </NativeView>;
+});
+export default r42;

modules/voice_panel/native/controls/activities/ActivityShelfItem.tsx

@@ -0,0 +1,176 @@
+// Metro module 15976 (f15977).
+import { useId } from "react";
+import { ANDROID_FOREGROUND_RIPPLE } from "../../../../../design/void/Form/native/FormConstants";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import { hexWithOpacity } from "../../../../../utils/ColorUtils";
+import useLaunchingActivityButtonState from "../../../../app_launcher/utils/useLaunchingActivityButtonState";
+import useActivityShelfItem, { ActivityAction } from "../../../../activities/utils/useActivityShelfItem";
+import NativeView from "../../../../core/native/NativeView";
+import ActivityShelfItemSummary from "./ActivityShelfItemSummary";
+import getDevicePixelRatio_native from "../../../../../utils/getDevicePixelRatio.native";
+import EmbeddedActivitiesNativeManager from "../../../../activities/native/EmbeddedActivitiesNativeManager";
+import { CommandOrigin } from "../../../../application_commands/ApplicationCommandTypes";
+import useEmbeddedActivityBackground from "../../../../activities/utils/useEmbeddedActivityBackground";
+import { useIsTestModeForApplication } from "../../../../game_store/TestModeUtils";
+import { PressableOpacity } from "../../../../../design/void/Pressables/native/Pressables";
+import { ThemeContextProvider } from "../../../../../_bundle/Module3901";
+import ActivityShelfItemBackground from "./ActivityShelfItemBackground";
+import ActivityShelfBadge from "../../../../activities/native/ActivityShelfBadge";
+import { Icon } from "../../../../../design/void/native";
+import Module15977 from "../../../../../_bundle/Module15977";
+import useActivityUsers from "../../../../activities/useActivityUsers";
+import NicknameUtils from "../../../../../utils/NicknameUtils";
+import Module11876 from "../../../../../_bundle/Module11876";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import { getItemSubtitleForMaxPlayersShort } from "../../../../activities/utils/getItemSubtitleForMaxPlayers";
+import { intl, t } from "../../../../../intl/index.native";
+let useStyles, ParticipantsText;
+const ActivityActionOverlay = function ActivityActionOverlay(props) {
+  const { action, applicationId, context, activityItem } = props;
+  const submitting = useLaunchingActivityButtonState({
+    applicationId,
+    context,
+    launchingComponentId: props.launchingComponentId
+  }).submitting;
+  const styles = useStyles();
+  const application = activityItem.application;
+  const { id, name } = application;
+  if (ActivityAction.JOIN !== action && ActivityAction.LEAVE !== action) {
+    return null;
+  }
+  return <>
+    {[action === ActivityAction.LEAVE && <NativeView style={styles.ongoingActivityJoinedContainer} />, <ActivityShelfItemSummary channelId={context.type === "channel" ? context.channel.id : void 0} applicationId={id} applicationName={name} submitting={submitting} />]}
+  </>;
+};
+ParticipantsText = function ParticipantsText(props) {
+  let r58;
+  const { action, activityItem, channelId, guildId } = props;
+  const styles = useStyles();
+  const activityUsers = useActivityUsers(activityItem.application.id, channelId);
+  const name = NicknameUtils.getName(guildId, channelId, activityUsers == null ? void 0 : activityUsers[0]);
+  const r47 = [<Icon source={Module11876} size={Icon.Sizes.EXTRA_SMALL} color="white" />, ,];
+  if (action === ActivityAction.START) {
+    let maxParticipants = activityItem.application.maxParticipants;
+    if (maxParticipants == null) {
+      maxParticipants = 0;
+    }
+    r58 = getItemSubtitleForMaxPlayersShort(maxParticipants);
+  } else {
+    r58 = activityUsers.length <= 1 ? name : intl.formatToPlainString(t.cpe6CK, {
+      count: activityUsers.length - 1,
+      username: name
+    });
+  }
+  r47[1] = <Text lineClamp={1} style={styles.participantsText} variant="text-xxs/medium" color="text-overlay-light">{r58}</Text>;
+  return <NativeView style={[styles.participantsContainer, styles.overlayBubble]}>{r47}</NativeView>;
+};
+useStyles = createStyles({
+  container: {
+    borderRadius: Module712.radii.md,
+    overflow: "hidden",
+    height: 120,
+    position: "relative",
+    backgroundColor: "black",
+    justifyContent: "center"
+  },
+  imageOuterContainer: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  ongoingActivityJoinedContainer: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(255,255,255,0.5)",
+    zIndex: 1
+  },
+  overlayBubble: {
+    backgroundColor: hexWithOpacity(Module712.unsafe_rawColors.BLACK, 0.5),
+    borderRadius: Module712.radii.round
+  },
+  participantsContainer: {
+    paddingHorizontal: 8,
+    position: "absolute",
+    left: 8,
+    bottom: 8,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 20
+  },
+  participantsText: {
+    marginLeft: 4,
+    lineHeight: 20
+  },
+  developerIconContainer: {
+    position: "absolute",
+    top: 4,
+    right: 4,
+    width: 22,
+    height: 22,
+    borderRadius: Module712.radii.md,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  developerIconColor: {
+    color: Module712.colors.WHITE
+  }
+});
+export default function ActivityShelfItem(props) {
+  const { itemDimensions, activityItem, context, guildId, locationObject, onActivityItemSelected, disableBadges = false } = props;
+  const styles = useStyles();
+  const r15 = context.type === "channel" ? context.channel : null;
+  const { width, height } = itemDimensions;
+  const backgroundResolution = width * getDevicePixelRatio_native();
+  const id = useId();
+  const activityShelfItem = useActivityShelfItem({
+    activityItem,
+    context,
+    guildId,
+    locationObject,
+    onActivityItemSelected,
+    embeddedActivitiesManager: EmbeddedActivitiesNativeManager,
+    backgroundResolution,
+    assetNames: ["embedded_cover"],
+    launchingComponentId: id,
+    commandOrigin: CommandOrigin.VOICE_UI
+  });
+  const { imageBackground, activityAction, onActivityItemSelected: onActivityItemSelected2, labelType } = activityShelfItem;
+  let imageBackground2 = useEmbeddedActivityBackground({
+    applicationId: activityItem.application.id,
+    size: backgroundResolution,
+    names: ["embedded_background"]
+  });
+  const r1 = disableBadges ? !disableBadges : ![ActivityAction.LEAVE, ActivityAction.JOIN].includes(activityAction);
+  const isTestModeForApplication = useIsTestModeForApplication(activityItem.application.id);
+  if (activityAction === ActivityAction.START) {
+    imageBackground2 = imageBackground;
+  }
+  const r134 = [<ThemeContextProvider theme="dark">
+    <NativeView style={styles.imageOuterContainer}>
+      <ActivityShelfItemBackground accessibilityLabel={activityItem.application.name} imageBackground={imageBackground2} aspectRatio={width / height} />
+      <ActivityActionOverlay action={activityAction} applicationId={activityItem.application.id} context={context} activityItem={activityItem} launchingComponentId={id} />
+    </NativeView>
+    {r1 ? <ActivityShelfBadge labelType={labelType} /> : null}
+    {r1 ? isTestModeForApplication ? <NativeView style={styles.developerIconContainer}>
+      <Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module15977} color={styles.developerIconColor.color} />
+    </NativeView> : null : null}
+  </ThemeContextProvider>, ,];
+  let r139 = activityAction === ActivityAction.START;
+  if (r139) {
+    const id2 = r15?.id;
+    let guildId2 = r15 == null ? void 0 : r15.getGuildId();
+    if (guildId2 == null) {
+      guildId2 = void 0;
+    }
+    r139 = <ParticipantsText action={activityAction} channelId={id2} guildId={guildId2} activityItem={activityItem} />;
+  }
+  r134[1] = r139;
+  return <PressableOpacity activeOpacity={0.7} onPress={onActivityItemSelected2} disabled={activityAction === ActivityAction.LEAVE} androidRippleConfig={ANDROID_FOREGROUND_RIPPLE} style={[styles.container, {
+    width,
+    height
+  }]}>{r134}</PressableOpacity>;
+};

modules/voice_panel/native/controls/activities/ActivityShelfItemBackground.tsx

@@ -0,0 +1,57 @@
+// Metro module 15973 (f15974).
+import { memo, useState } from "react";
+import { Image as Image2 } from "react-native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import NativeView from "../../../../core/native/NativeView";
+import BrokenImage from "../../../../image/native/BrokenImage";
+const useStyles = createStyles((a0) => ({
+  previewImage: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "black"
+  },
+  activityImage: {
+    width: "100%",
+    aspectRatio: a0
+  }
+}));
+const r30 = memo(function ActivityShelfItemBackground(props) {
+  let r38;
+  let setState;
+  L10: {
+    const { imageBackground, aspectRatio } = props;
+    let accessibilityLabel = props.accessibilityLabel;
+    setState = void 0;
+    const styles = useStyles(aspectRatio);
+    let state;
+    [state, setState] = useState(false);
+    if (imageBackground.state !== "not-found" && !state) {
+      if (imageBackground.state !== "loading" && imageBackground.url != null) {
+        const props2 = {
+          onError: () => setState(true),
+          source: {
+            uri: imageBackground.url
+          },
+          style: styles.activityImage,
+          accessibilityRole: "image",
+          accessibilityLabel: null
+        };
+        if (accessibilityLabel == null) {
+          accessibilityLabel = "";
+        }
+        props2.accessibilityLabel = accessibilityLabel;
+        r38 = <NativeView style={styles.previewImage}>
+          <Image2 {...props2} />
+        </NativeView>;
+        break L10;
+      }
+      r38 = <NativeView style={styles.previewImage} />;
+    } else {
+      r38 = <NativeView style={styles.previewImage}>
+        <BrokenImage />
+      </NativeView>;
+    }
+  }
+  return r38;
+});
+export default r30;

modules/voice_panel/native/controls/activities/ActivityShelfItemSummary.tsx

@@ -0,0 +1,66 @@
+// Metro module 15974 (f15975).
+import { View } from "react-native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import { hexWithOpacity } from "../../../../../utils/ColorUtils";
+import useActivityUsers from "../../../../activities/useActivityUsers";
+import UserSummaryItem from "../../../../../components_native/common/UserSummaryItem";
+import { AvatarSizes } from "../../../../../design/void/native";
+import { useLoadingStyles } from "../../../../../design/components/Button/native/ButtonPill.native";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import ReanimatedRexport from "../../../../reanimated/ReanimatedRexport";
+import { Ellipsis } from "../../../../../design/components/Button/native/ButtonEllipsis.native";
+let useStyles;
+const ParticipantsSummary = function ParticipantsSummary(props) {
+  return <UserSummaryItem users={useActivityUsers(props.applicationId, props.channelId)} max={5} avatarSize={AvatarSizes.REFRESH_MEDIUM_32} withPlusCount style={{
+    marginBottom: 8
+  }} cutout={{
+    inset: -8
+  }} />;
+};
+useStyles = createStyles({
+  ongoingActivityContainer: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0,0,0,0.4)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  overlayActivityName: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: Module712.radii.round,
+    backgroundColor: hexWithOpacity(Module712.unsafe_rawColors.BLACK, 0.64),
+    marginBottom: 8
+  },
+  overlayActivityNameText: {
+    color: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY
+  },
+  loadingTextColor: {
+    color: "transparent"
+  },
+  ellipsis: {
+    flex: 1,
+    flexShrink: 1,
+    flexGrow: 0,
+    justifyContent: "center",
+    alignItems: "center",
+    top: -12
+  }
+});
+export default function ActivityShelfItemSummary(props) {
+  const { channelId, applicationId, applicationName, submitting = false } = props;
+  const styles = useStyles();
+  const [, r18] = useLoadingStyles(submitting, "md");
+  let r14 = submitting;
+  const r36 = [<Text variant="text-md/semibold" style={r14 ? styles.loadingTextColor : styles.overlayActivityNameText} lineClamp={2}>{applicationName}</Text>, ,];
+  if (r14) {
+    r14 = <Ellipsis variant="active" size="md" />;
+  }
+  r36[1] = <ReanimatedRexport.View style={[styles.ellipsis, r18]}>{r14}</ReanimatedRexport.View>;
+  return <View style={styles.ongoingActivityContainer}>
+    <View style={styles.overlayActivityName}>{r36}</View>
+    <ParticipantsSummary channelId={channelId} applicationId={applicationId} />
+  </View>;
+};

modules/voice_panel/native/controls/buttons/VoicePanelAnimatedButtonWrapper.tsx

@@ -0,0 +1,136 @@
+// Metro module 16006 (f16007).
+import { useMemo } from "react";
+import { Pressable } from "react-native";
+import { MODE_CHANGE_PHYSICS } from "../../../VoicePanelConstants";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import ReanimatedRexport, { useSharedValue } from "../../../../reanimated/ReanimatedRexport";
+import useControlsLock from "../useControlsLock";
+import { isAndroid } from "../../../../../utils/PlatformUtils";
+import * as _spring from "../../../../../design/animation/reanimated/spring/spring";
+import * as _timing from "../../../../../design/animation/reanimated/timing/timing";
+const useStyles = createStyles({
+  pressableWrapper: {
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: Module712.modules.button.BORDER_RADIUS_LG
+  }
+});
+const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Pressable);
+const __initData = {
+  code: "function VoicePanelAnimatedButtonWrapperTsx1(values){const{offsetFromCenter,withSpring,MODE_CHANGE_PHYSICS,withTiming}=this.__closure;offsetFromCenter.set(values.windowWidth/2-values.targetGlobalOriginX-values.targetWidth/2);return{initialValues:{originX:values.targetOriginX+offsetFromCenter.get(),opacity:0,transform:[{scale:0.5}]},animations:{originX:withSpring(values.targetOriginX,MODE_CHANGE_PHYSICS),opacity:withTiming(1,{duration:100}),transform:[{scale:withSpring(1,MODE_CHANGE_PHYSICS)}]}};}"
+};
+const __initData2 = {
+  code: "function VoicePanelAnimatedButtonWrapperTsx2(values){const{withSpring,offsetFromCenter,MODE_CHANGE_PHYSICS,withTiming}=this.__closure;return{initialValues:{originX:values.currentOriginX,opacity:1,transform:[{scale:1}]},animations:{originX:withSpring(values.currentOriginX+offsetFromCenter.get(),MODE_CHANGE_PHYSICS),opacity:withTiming(0,{duration:100}),transform:[{scale:withSpring(0.5,MODE_CHANGE_PHYSICS)}]}};}"
+};
+export default function AnimatedButtonWrapper(props) {
+  let width, height, sharedValue2;
+  const { props: props2, onPress, onLongPress, onPressIn, onPressOut, accessibilityLabel, style, children } = props;
+  let pressed = props.pressed;
+  const disabled = props.disabled;
+  width = void 0;
+  height = void 0;
+  sharedValue2 = void 0;
+  const sharedValue3 = useSharedValue(false);
+  if (pressed == null) {
+    pressed = sharedValue3;
+  }
+  const sharedValue = pressed;
+  const controlsLock = useControlsLock();
+  let c22716_4 = controlsLock;
+  const styles = useStyles();
+  const memo = useMemo(() => {
+    let onPressIn2 = onPressIn;
+    if (onPressIn == null) {
+      onPressIn2 = () => {
+        c22716_4.lock();
+        sharedValue.set(true);
+      };
+    }
+    let onPressOut2 = onPressOut;
+    if (onPressOut == null) {
+      onPressOut2 = () => {
+        c22716_4.unlock();
+        sharedValue.set(false);
+      };
+    }
+    return {
+      onPressIn: onPressIn2,
+      onPressOut: onPressOut2
+    };
+  }, [sharedValue, controlsLock, onPressIn, onPressOut]);
+  width = props2.width;
+  height = props2.height;
+  sharedValue2 = useSharedValue(0);
+  return <AnimatedComponent entering={useMemo(() => {
+    if (isAndroid()) {
+      return void 0;
+    }
+    const r10 = function t(a0) {
+      sharedValue2.set(a0.windowWidth / 2 - a0.targetGlobalOriginX - a0.targetWidth / 2);
+      return {
+        initialValues: {
+          originX: a0.targetOriginX + sharedValue2.get(),
+          opacity: 0,
+          transform: [{
+            scale: 0.5
+          }]
+        },
+        animations: {
+          originX: _spring.withSpring(a0.targetOriginX, MODE_CHANGE_PHYSICS),
+          opacity: _timing.withTiming(1, {
+            duration: 100
+          }),
+          transform: [{
+            scale: _spring.withSpring(1, MODE_CHANGE_PHYSICS)
+          }]
+        }
+      };
+    };
+    r10.__closure = {
+      offsetFromCenter: sharedValue2,
+      withSpring: _spring.withSpring,
+      MODE_CHANGE_PHYSICS,
+      withTiming: _timing.withTiming
+    };
+    r10.__workletHash = 16238937246135;
+    r10.__initData = __initData;
+    return r10;
+  }, [sharedValue2])} exiting={useMemo(() => {
+    if (isAndroid()) {
+      return void 0;
+    }
+    const r11 = function t(a0) {
+      return {
+        initialValues: {
+          originX: a0.currentOriginX,
+          opacity: 1,
+          transform: [{
+            scale: 1
+          }]
+        },
+        animations: {
+          originX: _spring.withSpring(a0.currentOriginX + sharedValue2.get(), MODE_CHANGE_PHYSICS),
+          opacity: _timing.withTiming(0, {
+            duration: 100
+          }),
+          transform: [{
+            scale: _spring.withSpring(0.5, MODE_CHANGE_PHYSICS)
+          }]
+        }
+      };
+    };
+    r11.__closure = {
+      withSpring: _spring.withSpring,
+      offsetFromCenter: sharedValue2,
+      MODE_CHANGE_PHYSICS,
+      withTiming: _timing.withTiming
+    };
+    r11.__workletHash = 17504057367727;
+    r11.__initData = __initData2;
+    return r11;
+  }, [sharedValue2])} onPress={onPress} onLongPress={onLongPress} disabled={disabled} {...memo} accessibilityRole="button" accessibilityLabel={accessibilityLabel} style={useMemo(() => [styles.pressableWrapper, {
+    width,
+    height
+  }, style], [style, styles.pressableWrapper, width, height])}>{children}</AnimatedComponent>;
+};

modules/voice_panel/native/controls/buttons/VoicePanelChatButton.tsx

@@ -0,0 +1,61 @@
+// Metro module 16013 (f16014).
+import { useContext, useCallback, useMemo } from "react";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import VoicePanelStateContext from "../../VoicePanelStateContext";
+import { useVoicePanelButtonStyles } from "./VoicePanelStyles";
+import useChatBadge from "../../hooks/useChatBadge";
+import { VoicePanelTabAnalyticsSources } from "../trackVoicePanelTabOpened";
+import VoicePanelAnimatedButtonWrapper from "./VoicePanelAnimatedButtonWrapper";
+import { intl, t } from "../../../../../intl/index.native";
+import CircleWithCutout from "../../shared/CircleWithCutout";
+import NativeView from "../../../../core/native/NativeView";
+import { ChatIcon } from "../../../../../design/components/Icon/native/redesign/generated/ChatIcon";
+const useStyles = createStyles({
+  iconContainer: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%"
+  },
+  badge: {
+    position: "absolute",
+    zIndex: 1,
+    width: 10,
+    height: 10,
+    borderRadius: Module712.radii.round,
+    top: 0,
+    right: 0
+  },
+  notificationBadge: {
+    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_NOTIFICATION
+  }
+});
+export default function ChatButton(props2) {
+  const { props, openTab, wrapperSpecs } = props2;
+  const context = useContext(VoicePanelStateContext);
+  const { channelId, connected } = context;
+  const styles = useStyles();
+  const styles2 = useVoicePanelButtonStyles(wrapperSpecs);
+  const chatBadge = useChatBadge(channelId);
+  let c22720_5 = chatBadge;
+  const backgroundColor = styles2.iconBg.backgroundColor;
+  return <VoicePanelAnimatedButtonWrapper onPress={useCallback(() => {
+    openTab({
+      tab: "chat",
+      source: connected.get() ? VoicePanelTabAnalyticsSources.CONNECTED_BUTTON : VoicePanelTabAnalyticsSources.PREJOIN_BUTTON
+    });
+  }, [openTab, connected])} props={props} accessibilityLabel={intl.string(t["5KxXrK"])}>
+    {useMemo(() => {
+      const circleRadius = props.width / 2;
+      return <>
+        <CircleWithCutout fill={backgroundColor} circleRadius={circleRadius} cutoutRadius={8} enableCutout={c22720_5 != null} cutoutPositionInDegrees={45} alignBadgeEdgeWithCircleEdge badgeRadius={5} scaleToPixelDensity />
+        <NativeView style={styles.iconContainer}>
+          <ChatIcon color={styles2.iconFill.color} />
+        </NativeView>
+        {c22720_5 != null && <NativeView style={[styles.badge, styles.notificationBadge]} />}
+      </>;
+    }, [backgroundColor, props.width, chatBadge, styles.iconContainer, styles.badge, styles.notificationBadge, styles2.iconFill.color])}
+  </VoicePanelAnimatedButtonWrapper>;
+};

modules/voice_panel/native/controls/buttons/VoicePanelConnectButton.tsx

@@ -0,0 +1,64 @@
+// Metro module 16007 (f16008).
+import { useContext, useCallback, useMemo } from "react";
+import ChannelStore from "../../../../../stores/ChannelStore";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import VoicePanelStateContext from "../../VoicePanelStateContext";
+import useCanConnect from "../../hooks/useCanConnect";
+import { useStateFromStores } from "../../../../../_bundle/Module589";
+import { useIsChannelContentGated } from "../../../../age_gate/AgeGateUtils";
+import { useIsChannelSpoilerGated } from "../../../../spoiler_channels/SpoilerChannelUtils";
+import SelectedChannelActionCreators from "../../../../../actions/SelectedChannelActionCreators";
+import { openAlert } from "../../../../../design/components/AlertModal/native/useAlertStore.native";
+import VoicePanelNoJoinPermissionsAlert, { VOICE_PANEL_NO_JOIN_PERMS_KEY } from "../../alerts/VoicePanelNoJoinPermissionsAlert";
+import VoicePanelMaxCapacityAlert, { VOICE_PANEL_MAX_CAPACITY_KEY } from "../../alerts/VoicePanelMaxCapacityAlert";
+import VoicePanelNsfwAlert, { VOICE_PANEL_NSFW_KEY } from "../../alerts/VoicePanelNsfwAlert";
+import VoicePanelSpoilerAlert, { VOICE_PANEL_SPOILER_KEY } from "../../../../spoiler_channels/native/VoicePanelSpoilerAlert";
+import VoicePanelAnimatedButtonWrapper from "./VoicePanelAnimatedButtonWrapper";
+import { intl, t } from "../../../../../intl/index.native";
+import { Text } from "../../../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  connectButton: {
+    backgroundColor: Module712.unsafe_rawColors.GREEN_360,
+    paddingLeft: Module712.space.PX_8,
+    paddingRight: Module712.space.PX_8
+  },
+  connectText: {
+    textAlign: "center"
+  }
+});
+export default function ConnectButton(props) {
+  let c22717_5, c22717_6;
+  const props2 = props.props;
+  c22717_5 = void 0;
+  c22717_6 = void 0;
+  const styles = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const { channelId, guildId } = context;
+  const canConnect2 = useCanConnect(channelId);
+  const { canConnect, isAtMaxCapacity } = canConnect2;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  const r33 = useIsChannelContentGated(stateFromStores) && guildId != null && channelId != null;
+  c22717_5 = r33;
+  const r38 = useIsChannelSpoilerGated(stateFromStores) && guildId != null && channelId != null;
+  c22717_6 = r38;
+  return <VoicePanelAnimatedButtonWrapper onPress={useCallback(() => {
+    if (canConnect && (!isAtMaxCapacity && (!c22717_5 && !c22717_6))) {
+      SelectedChannelActionCreators.selectVoiceChannel(channelId);
+    } else if (canConnect) {
+      if (isAtMaxCapacity) {
+        openAlert(VOICE_PANEL_MAX_CAPACITY_KEY, <VoicePanelMaxCapacityAlert channelId={channelId} />);
+      } else if (c22717_5) {
+        openAlert(VOICE_PANEL_NSFW_KEY, <VoicePanelNsfwAlert guildId={guildId} channelId={channelId} />);
+      } else if (c22717_6) {
+        openAlert(VOICE_PANEL_SPOILER_KEY, <VoicePanelSpoilerAlert channelId={channelId} />);
+      }
+    } else {
+      openAlert(VOICE_PANEL_NO_JOIN_PERMS_KEY, <VoicePanelNoJoinPermissionsAlert />);
+    }
+  }, [canConnect, isAtMaxCapacity, channelId, r33, r38, guildId])} props={props2} accessibilityLabel={intl.string(t["96ANUN"])} style={styles.connectButton}>
+    {useMemo(() => <Text variant="text-sm/semibold" color="text-overlay-light" style={styles.connectText}>
+      {intl.string(t["96ANUN"])}
+    </Text>, [styles.connectText])}
+  </VoicePanelAnimatedButtonWrapper>;
+};

modules/voice_panel/native/controls/buttons/VoicePanelDisconnectCancelButton.tsx

@@ -0,0 +1,124 @@
+// Metro module 16015 (f16016).
+import { useContext, useState, useCallback, useMemo } from "react";
+import EmbeddedActivitiesStore from "../../../../activities/EmbeddedActivitiesStore";
+import ApplicationStreamingStore from "../../../../../stores/ApplicationStreamingStore";
+import VoicePanelStore from "../../../VoicePanelStore";
+import { VoicePanelModes } from "../../../VoicePanelConstants";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import VoicePanelStateContext from "../../VoicePanelStateContext";
+import { getEmbeddedActivityParticipantId, activityParticipantIdToApplicationId } from "../../../../calls/ChannelRTCParticipants";
+import * as _ReanimatedRexport from "../../../../reanimated/ReanimatedRexport";
+import { useAnimatedReaction } from "../../../../reanimated/ReanimatedRexport";
+import EmbeddedActivitiesNativeManager from "../../../../activities/native/EmbeddedActivitiesNativeManager";
+import ChannelRTCActionCreators from "../../../../../actions/ChannelRTCActionCreators";
+import { stopStream } from "../../../../../actions/StreamActionCreators";
+import SelectedChannelActionCreators from "../../../../../actions/SelectedChannelActionCreators";
+import * as _DoorExitIcon from "../../../../../design/components/Icon/native/redesign/generated/DoorExitIcon";
+import { ScreenXIcon } from "../../../../../design/components/Icon/native/redesign/generated/ScreenXIcon";
+import { PhoneHangUpIcon } from "../../../../../design/components/Icon/native/redesign/generated/PhoneHangUpIcon";
+import VoicePanelAnimatedButtonWrapper from "./VoicePanelAnimatedButtonWrapper";
+import { intl, t } from "../../../../../intl/index.native";
+let c11482_10 = {
+  USER: 0,
+  0: "USER",
+  STREAM: 1,
+  1: "STREAM",
+  ACTIVITY: 2,
+  2: "ACTIVITY"
+};
+const useStyles = createStyles({
+  disconnectCancelBG: {
+    backgroundColor: Module712.colors.CONTROL_CRITICAL_PRIMARY_BACKGROUND_DEFAULT
+  },
+  icon: {
+    tintColor: Module712.colors.WHITE
+  }
+});
+const __initData = {
+  code: "function VoicePanelDisconnectCancelButtonTsx1(){const{mode,VoicePanelModes,focused}=this.__closure;var _focused$get$id,_focused$get;if(mode.get()!==VoicePanelModes.PANEL){return null;}return(_focused$get$id=(_focused$get=focused.get())===null||_focused$get===void 0?void 0:_focused$get.id)!==null&&_focused$get$id!==void 0?_focused$get$id:null;}"
+};
+const __initData2 = {
+  code: "function VoicePanelDisconnectCancelButtonTsx2(focusId,lastFocusId){const{runOnJS,handleFocusChange}=this.__closure;if(focusId!==lastFocusId){runOnJS(handleFocusChange)(focusId);}}"
+};
+export default function DisconnectCancelButton(props) {
+  let DoorExitIcon;
+  const props2 = props.props;
+  DoorExitIcon = void 0;
+  const styles = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const { channelId, focused, mode } = context;
+  const [state, setState] = useState(null);
+  const callback = useCallback((a0) => {
+    L11: {
+      if (a0 != null) {
+        const currentEmbeddedActivity = EmbeddedActivitiesStore.getCurrentEmbeddedActivity();
+        if (currentEmbeddedActivity?.applicationId != null && a0 === getEmbeddedActivityParticipantId({
+          applicationId: currentEmbeddedActivity.applicationId,
+          instanceId: currentEmbeddedActivity.compositeInstanceId
+        })) {
+          setState(c11482_10.ACTIVITY);
+          break L11;
+        }
+        setState(ApplicationStreamingStore.getActiveStreamForStreamKey(a0) == null ? c11482_10.USER : c11482_10.STREAM);
+      } else {
+        setState(null);
+      }
+    }
+  }, []);
+  const r34 = function() {
+    const r5 = mode.get();
+    const PANEL = VoicePanelModes.PANEL;
+    let r9 = null;
+    if (r5 === PANEL) {
+      let r13 = focused.get()?.id;
+      if (r13 == null) {
+        r13 = null;
+      }
+      r9 = r13;
+    }
+    return r9;
+  };
+  r34.__closure = {
+    mode,
+    VoicePanelModes,
+    focused
+  };
+  r34.__workletHash = 1109426015268;
+  r34.__initData = __initData;
+  const T = function T(a0, a1) {
+    if (a0 !== a1) {
+      _ReanimatedRexport.runOnJS(callback)(a0);
+    }
+  };
+  T.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    handleFocusChange: callback
+  };
+  T.__workletHash = 16719769067952;
+  T.__initData = __initData2;
+  useAnimatedReaction(r34, T);
+  const callback2 = useCallback(() => {
+    const id = focused.get()?.id;
+    if (state !== c11482_10.ACTIVITY) {
+      if (state === c11482_10.STREAM) {
+        ChannelRTCActionCreators.selectParticipant(channelId, null);
+        if (id != null) {
+          stopStream(id);
+        }
+        return void 0;
+      }
+      SelectedChannelActionCreators.disconnect();
+      VoicePanelStore.getState().closeChannel(channelId);
+    } else {
+      EmbeddedActivitiesNativeManager.leaveActivity({
+        location: EmbeddedActivitiesStore.getCurrentEmbeddedActivity()?.location,
+        applicationId: activityParticipantIdToApplicationId(id)
+      });
+    }
+  }, [channelId, state, focused]);
+  DoorExitIcon = state === c11482_10.ACTIVITY ? _DoorExitIcon.DoorExitIcon : state === c11482_10.STREAM ? ScreenXIcon : PhoneHangUpIcon;
+  return <VoicePanelAnimatedButtonWrapper onPress={callback2} props={props2} style={styles.disconnectCancelBG} accessibilityLabel={state === c11482_10.ACTIVITY ? intl.string(t["R/FK4A"]) : state === c11482_10.STREAM ? intl.string(t.q3O3J8) : intl.string(t["6vrfgt"])}>
+    {useMemo(() => <DoorExitIcon style={styles.icon} />, [DoorExitIcon, styles.icon])}
+  </VoicePanelAnimatedButtonWrapper>;
+};

modules/voice_panel/native/controls/buttons/VoicePanelDrawerToggleButton.tsx

@@ -0,0 +1,39 @@
+// Metro module 16024 (f16025).
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import { useVoicePanelButtonStyles } from "./VoicePanelStyles";
+import useDrawerToggle from "../useDrawerToggle";
+import VoicePanelAnimatedButtonWrapper from "./VoicePanelAnimatedButtonWrapper";
+import NativeView from "../../../../core/native/NativeView";
+import { ChevronSmallDownIcon } from "../../../../../design/components/Icon/native/redesign/generated/ChevronSmallDownIcon";
+import { ChevronSmallUpIcon } from "../../../../../design/components/Icon/native/redesign/generated/ChevronSmallUpIcon";
+const useStyles = createStyles({
+  circle: {
+    width: "100%",
+    height: "100%",
+    borderRadius: Module712.radii.round
+  },
+  iconContainer: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%"
+  }
+});
+export default function VoicePanelDrawerToggleButton(props) {
+  const { props: props2, openTab, wrapperSpecs } = props;
+  const styles = useStyles();
+  const styles2 = useVoicePanelButtonStyles(wrapperSpecs);
+  const backgroundColor = styles2.iconBg.backgroundColor;
+  const color = styles2.iconFill.color;
+  const drawerToggle = useDrawerToggle(openTab);
+  return <VoicePanelAnimatedButtonWrapper onPress={drawerToggle.handlePress} props={props2} accessibilityLabel={drawerToggle.accessibilityLabel}>
+    <NativeView style={[styles.circle, {
+      backgroundColor
+    }]} />
+    <NativeView style={styles.iconContainer}>
+      {drawerToggle.isDrawerOpen ? <ChevronSmallDownIcon color={color} /> : <ChevronSmallUpIcon color={color} />}
+    </NativeView>
+  </VoicePanelAnimatedButtonWrapper>;
+};

modules/voice_panel/native/controls/buttons/VoicePanelMicButton.tsx

@@ -0,0 +1,215 @@
+// Metro module 16004 (f16005).
+import { useContext, useState, useRef, useCallback, useMemo, useEffect } from "react";
+import GameConsoleStore from "../../../../game_console/GameConsoleStore";
+import ImpersonateStore from "../../../../impersonate/ImpersonateStore";
+import AuthenticationStore from "../../../../../stores/AuthenticationStore";
+import ChannelStore from "../../../../../stores/ChannelStore";
+import MediaEngineStore from "../../../../../stores/MediaEngineStore";
+import PermissionStore from "../../../../../stores/PermissionStore";
+import "../../../../../stores/UserStore";
+import VoiceStateStore from "../../../../../stores/VoiceStateStore";
+import { jsx } from "react/jsx-runtime";
+import Logger from "../../../../debug/Logger";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import { useStateFromStoresObject } from "../../../../../_bundle/Module589";
+import { createDeafHandler, DominantMuteState } from "../../../../video_calls/native/VoiceActionUtils";
+import { getDeafStates } from "../../../../video_calls/useDeafStates";
+import VoicePanelStateContext from "../../VoicePanelStateContext";
+import * as _ReanimatedRexport from "../../../../reanimated/ReanimatedRexport";
+import { useSharedValue } from "../../../../reanimated/ReanimatedRexport";
+import useControlsLock from "../useControlsLock";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../../../haptics/HapticUtils.native";
+import { setPushToTalkState } from "../../../../media_engine/MediaEngineActionCreators";
+import * as _Module5273 from "../../../../../_bundle/Module5273";
+import { Gesture, GestureDetector } from "../../../../../_bundle/Module5273";
+import { useVoicePanelButtonStyles } from "./VoicePanelStyles";
+import VoicePanelAnimatedButtonWrapper from "./VoicePanelAnimatedButtonWrapper";
+import * as _index_native from "../../../../../intl/index.native";
+import { intl } from "../../../../../intl/index.native";
+import { MicrophoneIcon } from "../../../../../design/components/Icon/native/redesign/generated/MicrophoneIcon";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import { MicrophoneDenyIcon } from "../../../../../design/components/Icon/native/redesign/generated/MicrophoneDenyIcon";
+import { VoicePanelRiveMicButton } from "./VoicePanelRiveMicButton";
+function $mk98477($env) {
+  return () => {
+    const r3 = $env;
+    const r6 = $env.$parent;
+    const channel = r6[8].getChannel(r3[0]);
+    const current = channel != null ? (0, r6[0])(r6[2][14]).getMuteStates({
+      channel,
+      authenticationStore: r6[7],
+      voiceStateStore: r6[12],
+      mediaEngineStore: r6[9],
+      permissionStore: r6[10],
+      impersonateStore: r6[6]
+    }) : {
+      selfMute: false,
+      suppress: false,
+      mute: false
+    };
+    const r28 = r3[1];
+    let r33 = r28.current?.selfMute !== current.selfMute;
+    if (r33) {
+      const currentUser = r6[11].getCurrentUser();
+      r33 = currentUser == null ? void 0 : currentUser.isStaff();
+    }
+    if (r33) {
+      r6[16].info("Self mute changed", r28.current?.selfMute, ">", current.selfMute);
+    }
+    r28.current = current;
+    return (0, r6[0])(r6[2][15]).createMuteHandler(current, r6[5].getAwaitingRemoteSessionInfo() != null);
+  };
+}
+let env11472 = {};
+const c11472_16 = new Logger("VoicePanelMicButton");
+const useStyles = createStyles({
+  text: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 4,
+    textAlign: "center",
+    opacity: 0.5
+  }
+});
+const c11472_18 = {
+  code: "function VoicePanelMicButtonTsx1(){const{runOnJS,handlePTTEnd}=this.__closure;runOnJS(handlePTTEnd)();}"
+};
+const c11472_19 = {
+  code: "function VoicePanelMicButtonTsx2(event,manager){const{State,runOnJS,handleDragStart}=this.__closure;if(event.state!==State.BEGAN)return;manager.activate();runOnJS(handleDragStart)();}"
+};
+export function PTTButton(props) {
+  let onPress, sharedValue, c22711_3, ref, callback, callback2, callback3;
+  let env22712;
+  const { props: props2, wrapperSpecs } = props;
+  onPress = void 0;
+  sharedValue = void 0;
+  c22711_3 = void 0;
+  ref = void 0;
+  callback = void 0;
+  callback2 = void 0;
+  callback3 = void 0;
+  const styles2 = useStyles();
+  const channelId2 = useContext(VoicePanelStateContext).channelId;
+  const [state, setState] = useState(false);
+  const r37 = env22712 = {
+    $parent: env11472
+  };
+  env22712[0] = channelId2;
+  env22712[1] = void 0;
+  env22712[1] = useRef(null);
+  const stateFromStoresObject = useStateFromStoresObject([ChannelStore, AuthenticationStore, VoiceStateStore, MediaEngineStore, PermissionStore, ImpersonateStore, GameConsoleStore], $mk98477(r37), [channelId2]);
+  const { mute: mute2, onPress: onPress2 } = stateFromStoresObject;
+  const channelId = channelId2;
+  const stateFromStoresObject2 = useStateFromStoresObject([ChannelStore, AuthenticationStore, VoiceStateStore, MediaEngineStore, PermissionStore, ImpersonateStore], () => {
+    const channel = ChannelStore.getChannel(channelId);
+    return createDeafHandler(channel != null ? getDeafStates(channel, VoiceStateStore, MediaEngineStore, AuthenticationStore) : {
+      selfDeaf: false,
+      deaf: false
+    });
+  }, [channelId]);
+  const deaf = stateFromStoresObject2.deaf;
+  let onPress3 = stateFromStoresObject2.onPress;
+  if (!deaf) {
+    onPress3 = mute2 ? onPress2 : void 0;
+  }
+  onPress = onPress3;
+  sharedValue = useSharedValue(false);
+  const controlsLock = useControlsLock();
+  c22711_3 = controlsLock;
+  ref = useRef({
+    active: false,
+    dragging: false
+  });
+  callback = useCallback(() => {
+    if (!ref.current.active) {
+      if (onPress != null) {
+        onPress();
+      }
+      ref.current.active = true;
+      triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+      setPushToTalkState(true);
+      c22711_3.lock();
+      sharedValue.set(true);
+      setState(true);
+    }
+  }, [controlsLock, sharedValue, onPress]);
+  callback2 = useCallback(() => {
+    if (ref.current.active) {
+      ref.current.active = false;
+      ref.current.dragging = false;
+      setPushToTalkState(false);
+      c22711_3.unlock();
+      sharedValue.set(false);
+      setState(false);
+    }
+  }, [controlsLock, sharedValue]);
+  const callback4 = useCallback(() => {
+    if (!ref.current.dragging) {
+      callback2();
+    }
+  }, [callback2]);
+  callback3 = useCallback(() => {
+    if (!ref.current.dragging) {
+      ref.current.dragging = true;
+      callback();
+    }
+  }, [callback]);
+  const memo = useMemo(() => {
+    const r5 = Gesture.Pan().manualActivation(true);
+    const n = function n(a0, a1) {
+      if (a0.state === _Module5273.State.BEGAN) {
+        a1.activate();
+        _ReanimatedRexport.runOnJS(callback3)();
+      }
+    };
+    n.__closure = {
+      State: _Module5273.State,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      handleDragStart: callback3
+    };
+    n.__workletHash = 13866422602014;
+    n.__initData = c11472_19;
+    const r25 = r5.onTouchesMove(n);
+    const t = function t() {
+      _ReanimatedRexport.runOnJS(callback2)();
+    };
+    t.__closure = {
+      runOnJS: _ReanimatedRexport.runOnJS,
+      handlePTTEnd: callback2
+    };
+    t.__workletHash = 12941114426646;
+    t.__initData = c11472_18;
+    return r25.onFinalize(t);
+  }, [callback3, callback2]);
+  useEffect(() => () => callback2(), [callback2]);
+  const styles3 = useVoicePanelButtonStyles(wrapperSpecs);
+  return <>
+    <GestureDetector gesture={memo}>
+      <VoicePanelAnimatedButtonWrapper onPressIn={callback} onPressOut={callback4} props={props2} pressed={sharedValue} accessibilityLabel={intl.string(_index_native.t.Q8gkVL)} style={state ? styles3.iconBgSelected : styles3.iconBg}>
+        <MicrophoneIcon color={state ? styles3.iconFillSelected.color : styles3.iconFill.color} size="lg" />
+      </VoicePanelAnimatedButtonWrapper>
+    </GestureDetector>
+    <Text style={[styles2.text, styles3.iconFill]} variant="text-xxs/medium">
+      {intl.string(_index_native.t.Q8gkVL)}
+    </Text>
+  </>;
+}
+export function MicButton(props) {
+  let env22715;
+  const { props: props2, wrapperSpecs } = props;
+  const channelId2 = useContext(VoicePanelStateContext).channelId;
+  const r19 = env22715 = {
+    $parent: env11472
+  };
+  env22715[0] = channelId2;
+  env22715[1] = void 0;
+  env22715[1] = useRef(null);
+  const stateFromStoresObject = useStateFromStoresObject([ChannelStore, AuthenticationStore, VoiceStateStore, MediaEngineStore, PermissionStore, ImpersonateStore, GameConsoleStore], $mk98477(r19), [channelId2]);
+  const { mute, onPress: onPress2, dominantMuteState } = stateFromStoresObject;
+  const styles = useVoicePanelButtonStyles(wrapperSpecs);
+  const memo = useMemo(() => dominantMuteState === DominantMuteState.SERVER_MUTE ? (0, jsx)(MicrophoneDenyIcon, {
+    color: styles.iconFillRed.color
+  }) : <VoicePanelRiveMicButton color={mute ? styles.iconFillRed.color : styles.iconFill.color} muted={mute} />, [styles, mute, dominantMuteState]);
+  return <VoicePanelAnimatedButtonWrapper props={props2} onPress={onPress2} accessibilityLabel={mute ? intl.string(_index_native.t.YqAjXy) : intl.string(_index_native.t.w4m945)} style={mute ? styles.iconBgVoiceMuted : styles.iconBg}>{memo}</VoicePanelAnimatedButtonWrapper>;
+}

modules/voice_panel/native/controls/buttons/VoicePanelRiveMicButton.tsx

@@ -0,0 +1,18 @@
+// Metro module 10798 (f10799).
+import { View } from "react-native";
+import { MicrophoneRive } from "../../../../../_bundle/Module3901";
+import { MicrophoneSlashIcon } from "../../../../../design/components/Icon/native/redesign/generated/MicrophoneSlashIcon";
+import { MicrophoneIcon } from "../../../../../design/components/Icon/native/redesign/generated/MicrophoneIcon";
+export function VoicePanelRiveMicButton(props) {
+  const { color, muted } = props;
+  return <View style={{
+    width: 24,
+    height: 24,
+    pointerEvents: "none"
+  }}>
+    <MicrophoneRive dataBinding={{
+      fill: color,
+      on: !muted
+    }} defaultViewModelInstance={muted ? "Off" : "On"} fallback={muted ? <MicrophoneSlashIcon color={color} /> : <MicrophoneIcon color={color} />} />
+  </View>;
+}

modules/voice_panel/native/controls/buttons/VoicePanelScreenshareButton.tsx

@@ -0,0 +1,82 @@
+// Metro module 16021 (f16022).
+import { useContext, useCallback } from "react";
+import { Image as Image2 } from "react-native";
+import ChannelStore from "../../../../../stores/ChannelStore";
+import { AnalyticEvents } from "../../../../../Constants";
+import { isMetaQuest } from "../../../../device/MetaQuestUtils.android";
+import * as _ScreenArrowIcon from "../../../../../design/components/Icon/native/redesign/generated/ScreenArrowIcon";
+import { MobilePhoneShareIcon } from "../../../../../design/components/Icon/native/redesign/generated/MobilePhoneShareIcon";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import VoicePanelStateContext from "../../VoicePanelStateContext";
+import { useVoicePanelButtonStyles } from "./VoicePanelStyles";
+import { useStateFromStores } from "../../../../../_bundle/Module589";
+import Module38 from "../../../../../_bundle/Module38";
+import useScreenshareUtils from "../../../../video_calls/native/useScreenshareUtils";
+import AnalyticsUtils from "../../../../../utils/AnalyticsUtils";
+import MobileVisualRefreshExperiment from "../../../../themes/experiments/MobileVisualRefreshExperiment";
+import VoicePanelAnimatedButtonWrapper from "./VoicePanelAnimatedButtonWrapper";
+import { intl, t } from "../../../../../intl/index.native";
+import NativeView from "../../../../core/native/NativeView";
+const ScreenArrowIcon = isMetaQuest() ? _ScreenArrowIcon.ScreenArrowIcon : MobilePhoneShareIcon;
+const useStyles = createStyles({
+  circle: {
+    width: "100%",
+    height: "100%",
+    borderRadius: Module712.radii.round
+  },
+  iconContainer: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%"
+  },
+  icon: {
+    width: 24,
+    height: 24
+  }
+});
+export default function ScreenshareButton(props) {
+  let isActive, isFeatureEnabled, onPress;
+  const { props: props2, wrapperSpecs } = props;
+  isActive = void 0;
+  isFeatureEnabled = void 0;
+  onPress = void 0;
+  const channelId = useContext(VoicePanelStateContext).channelId;
+  const styles = useStyles();
+  const styles2 = useVoicePanelButtonStyles(wrapperSpecs);
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  Module38(stateFromStores != null, "null channel in VoicePanelScreenshareButton");
+  const screenshareUtils = useScreenshareUtils(stateFromStores);
+  isActive = screenshareUtils.isActive;
+  isFeatureEnabled = screenshareUtils.isFeatureEnabled;
+  onPress = screenshareUtils.onPress;
+  const imgSource = screenshareUtils.imgSource;
+  const callback = useCallback(() => {
+    if (isFeatureEnabled) {
+      AnalyticsUtils.track(AnalyticEvents.VOICE_PANEL_SCREENSHARE_BUTTON_TAPPED, {
+        source: "connected button",
+        was_active: isActive
+      });
+      onPress();
+    }
+  }, [isActive, isFeatureEnabled, onPress]);
+  const disabled = !isFeatureEnabled;
+  let color = isFeatureEnabled ? styles2.iconFill.color : styles2.iconFillMuted.color;
+  const backgroundColor = isActive ? styles2.iconBgSelected.backgroundColor : styles2.iconBg.backgroundColor;
+  if (isActive) {
+    color = styles2.iconFillSelected.color;
+  }
+  const r57 = MobileVisualRefreshExperiment("ScreenshareButton");
+  return <VoicePanelAnimatedButtonWrapper onPress={callback} disabled={disabled} props={props2} accessibilityLabel={isActive ? intl.string(t.CpkXwZ) : intl.string(t.fjBNo1)} style={isActive ? styles2.iconBgSelected : void 0}>
+    <NativeView style={[styles.circle, {
+      backgroundColor
+    }]} />
+    <NativeView style={styles.iconContainer}>
+      {r57 ? <ScreenArrowIcon color={color} /> : <Image2 source={imgSource} style={[styles.icon, {
+        tintColor: color
+      }]} />}
+    </NativeView>
+  </VoicePanelAnimatedButtonWrapper>;
+};

modules/voice_panel/native/controls/buttons/VoicePanelSoundboardButton.tsx

@@ -0,0 +1,43 @@
+// Metro module 16019 (f16020).
+import { useContext } from "react";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import VoicePanelStateContext from "../../VoicePanelStateContext";
+import { useVoicePanelButtonStyles } from "./VoicePanelStyles";
+import useSoundboardConfig, { SoundboardButtonLocation } from "../../hooks/useSoundboardConfig";
+import VoicePanelAnimatedButtonWrapper from "./VoicePanelAnimatedButtonWrapper";
+import { intl, t } from "../../../../../intl/index.native";
+import NativeView from "../../../../core/native/NativeView";
+import { SoundboardIcon } from "../../../../../design/components/Icon/native/redesign/generated/SoundboardIcon";
+const useStyles = createStyles({
+  circle: {
+    width: "100%",
+    height: "100%",
+    borderRadius: Module712.radii.round
+  },
+  iconContainer: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%"
+  }
+});
+export default function SoundboardButton(props) {
+  const { props: props2, wrapperSpecs } = props;
+  const channelId = useContext(VoicePanelStateContext).channelId;
+  const styles = useStyles();
+  const styles2 = useVoicePanelButtonStyles(wrapperSpecs);
+  const backgroundColor = styles2.iconBg.backgroundColor;
+  const soundboardConfig = useSoundboardConfig(channelId, SoundboardButtonLocation.VOICE_PANEL_CONTROLS);
+  const { handlePress, disabled, visible } = soundboardConfig;
+  const color = disabled ? Module712.colors.ICON_MUTED : styles2.iconFill.color;
+  return visible ? <VoicePanelAnimatedButtonWrapper onPress={handlePress} disabled={disabled} props={props2} accessibilityLabel={intl.string(t["6EJvHt"])}>
+    <NativeView style={[styles.circle, {
+      backgroundColor
+    }]} />
+    <NativeView style={styles.iconContainer}>
+      <SoundboardIcon color={color} />
+    </NativeView>
+  </VoicePanelAnimatedButtonWrapper> : null;
+};

modules/voice_panel/native/controls/buttons/VoicePanelStyles.tsx

@@ -0,0 +1,36 @@
+// Metro module 16005 (f16006).
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import { useDerivedStateFromSharedValue } from "../../../../reanimated/native/useStateFromSharedValue";
+import MobileVisualRefreshExperiment from "../../../../themes/experiments/MobileVisualRefreshExperiment";
+const useStyles = createStyles((a0, a1) => ({
+  iconBg: {
+    backgroundColor: a1 ? "transparent" : Module712.colors.BACKGROUND_MOD_STRONG
+  },
+  iconBgSelected: {
+    backgroundColor: Module712.colors.WHITE
+  },
+  iconBgVoiceMuted: {
+    borderWidth: 1,
+    borderColor: Module712.colors.BACKGROUND_VOICE_MUTED,
+    backgroundColor: Module712.colors.BACKGROUND_VOICE_MUTED
+  },
+  iconFill: {
+    color: a0 ? Module712.colors.INTERACTIVE_TEXT_DEFAULT : a1 ? Module712.colors.ICON_STRONG : Module712.colors.WHITE
+  },
+  iconFillMuted: {
+    color: Module712.colors.ICON_MUTED
+  },
+  iconFillRed: {
+    color: Module712.unsafe_rawColors.RED_400
+  },
+  iconFillSelected: {
+    color: Module712.colors.BLACK
+  },
+  iconBadgeIndicator: {
+    backgroundColor: a0 ? Module712.colors.CONTROL_BRAND_FOREGROUND : Module712.colors.WHITE
+  }
+}));
+export function useVoicePanelButtonStyles(a0) {
+  return useStyles(useDerivedStateFromSharedValue(a0, (a0) => a0.drawerMode), MobileVisualRefreshExperiment("VoicePanelStyles"));
+}

modules/voice_panel/native/controls/buttons/VoicePanelVideoButton.tsx

@@ -0,0 +1,70 @@
+// Metro module 16017 (f16018).
+import { useContext, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import ChannelCallLifecycleStore from "../../../../video_calls/native/ChannelCallLifecycleStore";
+import ChannelStore from "../../../../../stores/ChannelStore";
+import GuildStore from "../../../../../stores/GuildStore";
+import MediaEngineStore from "../../../../../stores/MediaEngineStore";
+import PermissionStore from "../../../../../stores/PermissionStore";
+import VoicePanelStateContext from "../../VoicePanelStateContext";
+import { useVoicePanelButtonStyles } from "./VoicePanelStyles";
+import { useStateFromStores } from "../../../../../_bundle/Module589";
+import { canStreamInChannel } from "../../../../go_live/utils/StreamPermissionUtils";
+import { openAlert } from "../../../../../design/components/AlertModal/native/useAlertStore.native";
+import VoicePanelNoVideoPermissionsAlert, { VOICE_PANEL_NO_VIDEO_PERMS_KEY } from "../../alerts/VoicePanelNoVideoPermissionsAlert";
+import { handleToggleVideo } from "../../../../voice_calls/native/CallsUtils";
+import { openIgnoreThermalStateAlert } from "../../../../activities/native/openIgnoreThermalStateAlert";
+import VoicePanelAnimatedButtonWrapper from "./VoicePanelAnimatedButtonWrapper";
+import { intl, t } from "../../../../../intl/index.native";
+import { CameraRive } from "../../../../../_bundle/Module3901";
+import { VideoIcon } from "../../../../../design/components/Icon/native/redesign/generated/VideoIcon";
+import { VideoSlashIcon } from "../../../../../design/components/Icon/native/redesign/generated/VideoSlashIcon";
+const VideoButtonRive = function VideoButtonRive(props) {
+  const { isVideoEnabled, color } = props;
+  return <View style={{
+    width: 24,
+    height: 24,
+    pointerEvents: "none"
+  }}>
+    <CameraRive dataBinding={{
+      fill: color,
+      on: isVideoEnabled
+    }} defaultViewModelInstance={isVideoEnabled ? "CamOn" : "CamOff"} fallback={isVideoEnabled ? <VideoIcon color={color} /> : <VideoSlashIcon color={color} />} />
+  </View>;
+};
+export default function VideoButton(props) {
+  let stateFromStores2;
+  const { props: props2, wrapperSpecs } = props;
+  stateFromStores2 = void 0;
+  const channelId = useContext(VoicePanelStateContext).channelId;
+  const styles = useVoicePanelButtonStyles(wrapperSpecs);
+  const stateFromStores = useStateFromStores([GuildStore, PermissionStore, ChannelStore], () => {
+    const channel2 = ChannelStore.getChannel(channelId);
+    return channel2 != null && (channel2.isPrivate() || canStreamInChannel(channel2, GuildStore, PermissionStore, false));
+  });
+  stateFromStores2 = useStateFromStores([MediaEngineStore], () => MediaEngineStore.isVideoEnabled());
+  return <VoicePanelAnimatedButtonWrapper onPress={useCallback(() => {
+    L8: {
+      if (stateFromStores) {
+        const channel = ChannelStore.getChannel(channelId);
+        if (channel != null) {
+          if (!stateFromStores2 && ChannelCallLifecycleStore.isReactingToThermalState()) {
+            openIgnoreThermalStateAlert(() => {
+              if (channel != null) {
+                handleToggleVideo(channel);
+              }
+            });
+            break L8;
+          }
+          if (channel != null) {
+            handleToggleVideo(channel);
+          }
+        }
+      } else {
+        openAlert(VOICE_PANEL_NO_VIDEO_PERMS_KEY, <VoicePanelNoVideoPermissionsAlert />);
+      }
+    }
+  }, [channelId, stateFromStores2, stateFromStores])} props={props2} accessibilityLabel={stateFromStores2 ? intl.string(t.EnX2Jl) : intl.string(t["v8K+8W"])} style={stateFromStores2 ? styles.iconBgSelected : styles.iconBg}>
+    {useMemo(() => <VideoButtonRive isVideoEnabled={stateFromStores2} color={stateFromStores2 ? styles.iconFillSelected.color : styles.iconFill.color} />, [styles.iconFill.color, styles.iconFillSelected.color, stateFromStores2])}
+  </VoicePanelAnimatedButtonWrapper>;
+};

modules/voice_panel/native/controls/trackVoicePanelTabOpened.tsx

@@ -0,0 +1,20 @@
+// Metro module 15993 (f15994).
+import ReadStateStore from "../../../../stores/ReadStateStore";
+import { AnalyticEvents } from "../../../../Constants";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+const r17 = {
+  STORE: "store",
+  GESTURE: "gesture",
+  PREJOIN_BUTTON: "prejoin button",
+  CONNECTED_BUTTON: "connected button",
+  VOICE_CONTROLS: "voice controls",
+  HEADER_BUTTON: "header button"
+};
+export default function trackVoicePanelTabOpened(a0, a1, a2) {
+  AnalyticsUtils.track(AnalyticEvents.VOICE_PANEL_TAB_OPENED, {
+    tab: a1,
+    source: a2,
+    is_chat_badged: ReadStateStore.hasUnread(a0) || ReadStateStore.getMentionCount(a0) > 0
+  });
+};
+export { r17 as VoicePanelTabAnalyticsSources };

modules/voice_panel/native/controls/useControlsButtons.tsx

@@ -0,0 +1,174 @@
+// Metro module 16003 (f16004).
+import { useContext, useMemo } from "react";
+import MediaEngineStore from "../../../../stores/MediaEngineStore";
+import { CONTROLS_BUTTON_SIZE_LARGE, CONTROLS_BUTTON_SIZE_NORMAL } from "./VoicePanelControlsConstants";
+import { InputModes } from "../../../../Constants";
+import { MicButton, PTTButton } from "./buttons/VoicePanelMicButton";
+import VoicePanelConnectButton from "./buttons/VoicePanelConnectButton";
+import VoicePanelChatButton from "./buttons/VoicePanelChatButton";
+import VoicePanelDisconnectCancelButton from "./buttons/VoicePanelDisconnectCancelButton";
+import VoicePanelVideoButton from "./buttons/VoicePanelVideoButton";
+import VoicePanelSoundboardButton from "./buttons/VoicePanelSoundboardButton";
+import VoicePanelScreenshareButton from "./buttons/VoicePanelScreenshareButton";
+import VoicePanelDrawerToggleButton from "./buttons/VoicePanelDrawerToggleButton";
+import MobileGoLiveEntrypointExperiment, { MobileGoLiveEntrypointTreatment } from "../../../go_live/MobileGoLiveEntrypointExperiment";
+import { isMetaQuest } from "../../../device/MetaQuestUtils.android";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import useIsConnectedToVoiceChannel from "../hooks/useIsConnectedToVoiceChannel";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { useDerivedValue } from "../../../reanimated/ReanimatedRexport";
+import * as _VoicePanelControlsUtils from "../utils/VoicePanelControlsUtils";
+import useStateFromSharedValue from "../../../reanimated/native/useStateFromSharedValue";
+let __initData;
+let c11471_9 = {
+  mic: (a0, a1) => <MicButton key={a0} {...a1} />,
+  ptt: (a0, a1) => <PTTButton key={a0} {...a1} />,
+  micConnected: (a0, a1) => <MicButton key={a0} {...a1} />,
+  connect: (a0, a1) => <VoicePanelConnectButton key={a0} {...a1} />,
+  chat: (a0, a1) => <VoicePanelChatButton key={a0} {...a1} />,
+  disconnectCancel: (a0, a1) => <VoicePanelDisconnectCancelButton key={a0} {...a1} />,
+  video: (a0, a1) => <VoicePanelVideoButton key={a0} {...a1} />,
+  soundboard: (a0, a1) => <VoicePanelSoundboardButton key={a0} {...a1} />,
+  screenshare: (a0, a1) => <VoicePanelScreenshareButton key={a0} {...a1} />,
+  drawerToggle: (a0, a1) => <VoicePanelDrawerToggleButton key={a0} {...a1} />
+};
+__initData = {
+  code: "function useControlsButtonsTsx1(){const{getControlsDefaultWidth,windowDimensions,safeArea}=this.__closure;return getControlsDefaultWidth(windowDimensions.get().width,safeArea.get().left,safeArea.get().right);}"
+};
+export default function useControlsButtons() {
+  let c22710_5;
+  const context = useContext(VoicePanelStateContext);
+  const { channelId, windowDimensions, safeArea } = context;
+  const isConnectedToVoiceChannel = useIsConnectedToVoiceChannel(channelId);
+  let c22710_2 = isConnectedToVoiceChannel;
+  const treatment = MobileGoLiveEntrypointExperiment.useConfig({
+    location: "VoicePanelControlButtons"
+  }).treatment;
+  const stateFromStores = useStateFromStores([MediaEngineStore], () => MediaEngineStore.getMode() === InputModes.PUSH_TO_TALK);
+  const r36 = () => _VoicePanelControlsUtils.getControlsDefaultWidth(windowDimensions.get().width, safeArea.get().left, safeArea.get().right);
+  r36.__closure = {
+    getControlsDefaultWidth: _VoicePanelControlsUtils.getControlsDefaultWidth,
+    windowDimensions,
+    safeArea
+  };
+  r36.__workletHash = 16456936876254;
+  r36.__initData = __initData;
+  const stateFromSharedValue = useStateFromSharedValue(useDerivedValue(r36));
+  c22710_5 = stateFromSharedValue;
+  return useMemo(() => {
+    let c28205_0 = false;
+    let c28205_1 = 0;
+    const r36 = (function getButtons(a0, a1, a2) {
+      const r1 = [];
+      if (a0) {
+        r1.push({
+          type: "icon-normal",
+          key: "connected-video",
+          render: c11471_9.video
+        });
+        if (!a1) {
+          r1.push({
+            type: "icon-normal",
+            key: "connected-mic",
+            render: c11471_9.micConnected
+          });
+        }
+        if (a2 === MobileGoLiveEntrypointTreatment.SCREENSHARE_REPLACES_CHAT) {
+          r1.push({
+            type: "icon-normal",
+            key: "connected-screenshare",
+            render: c11471_9.screenshare
+          });
+        } else {
+          r1.push({
+            type: "icon-normal",
+            key: "connected-chat",
+            render: c11471_9.chat
+          });
+        }
+        if (a1) {
+          r1.push({
+            type: "icon-large",
+            key: "connected-ptt",
+            render: c11471_9.ptt
+          });
+        }
+        if (a2 === MobileGoLiveEntrypointTreatment.SCREENSHARE_REPLACES_SOUNDBOARD) {
+          r1.push({
+            type: "icon-normal",
+            key: "connected-screenshare",
+            render: c11471_9.screenshare
+          });
+        } else {
+          r1.push({
+            type: "icon-normal",
+            key: "connected-soundboard",
+            render: c11471_9.soundboard
+          });
+        }
+        r1.push({
+          type: "icon-normal",
+          key: "connected-disconnect",
+          render: c11471_9.disconnectCancel
+        });
+      } else {
+        r1.push({
+          type: "icon-normal",
+          key: "disconnected-mute",
+          render: c11471_9.mic
+        });
+        r1.push({
+          type: "label",
+          key: "disconnected-connect",
+          render: c11471_9.connect
+        });
+        r1.push({
+          type: "icon-normal",
+          key: "disconnected-chat",
+          render: c11471_9.chat
+        });
+      }
+      if (isMetaQuest()) {
+        r1.push({
+          type: "icon-normal",
+          key: "drawer-toggle",
+          render: c11471_9.drawerToggle
+        });
+      }
+      return r1;
+    })(c22710_2, stateFromStores, treatment).map((item) => {
+      if (item.type === "label") {
+        c28205_0 = true;
+      }
+      let height = CONTROLS_BUTTON_SIZE_NORMAL;
+      if (item.type === "icon-large") {
+        c28205_1 = c28205_1 + 1;
+        height = CONTROLS_BUTTON_SIZE_LARGE;
+      }
+      return {
+        ...item,
+        height,
+        width: item.type !== "label" ? height : -1,
+        x: 0,
+        y: 0
+      };
+    });
+    const r7 = c28205_0 ? 16 : (c22710_5 - c28205_1 * CONTROLS_BUTTON_SIZE_LARGE - (r36.length - c28205_1) * CONTROLS_BUTTON_SIZE_NORMAL - 32) / (r36.length - 1);
+    let r55 = 16;
+    for (const item of r36) {
+      const width = item.width;
+      let r65 = width;
+      if (width === -1) {
+        const width2 = c22710_5 - (32 + (r36.length - 1) * CONTROLS_BUTTON_SIZE_NORMAL + (r36.length - 1) * r7);
+        r65 = width2;
+        item.width = width2;
+      }
+      const r77 = r55;
+      const r79 = c22710_5 / 2;
+      const r80 = r65;
+      item.x = r77 - r79 + r80 / 2;
+      r55 = r77 + (r80 + r7);
+    }
+    return r36;
+  }, [isConnectedToVoiceChannel, stateFromStores, stateFromSharedValue, treatment]);
+};

modules/voice_panel/native/controls/useControlsLock.tsx

@@ -0,0 +1,9 @@
+// Metro module 15921 (f15922).
+import { useContext, useState, useLayoutEffect } from "react";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+export default function useControlsLock(c22607_0) {
+  const generateStateLocker = useContext(VoicePanelStateContext).generateStateLocker;
+  const state = useState(() => generateStateLocker(c22607_0))[0];
+  useLayoutEffect(() => () => state.unlock(), [state]);
+  return state;
+};

modules/voice_panel/native/controls/useDrawerToggle.tsx

@@ -0,0 +1,40 @@
+// Metro module 15992 (f15993).
+import { useContext, useCallback } from "react";
+import { VoicePanelControlsModes } from "./VoicePanelControlsConstants";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { useDerivedValue } from "../../../reanimated/ReanimatedRexport";
+import useStateFromSharedValue from "../../../reanimated/native/useStateFromSharedValue";
+import { VoicePanelTabAnalyticsSources } from "./trackVoicePanelTabOpened";
+import { intl, t } from "../../../../intl/index.native";
+const __initData = {
+  code: "function useDrawerToggleTsx1(){const{controlsSpecs,VoicePanelControlsModes}=this.__closure;return controlsSpecs.get().mode===VoicePanelControlsModes.DRAWER;}"
+};
+export default function useDrawerToggle(a0) {
+  const context = useContext(VoicePanelStateContext);
+  const { controlsSpecs, connected, dismissPanel } = context;
+  const l = () => controlsSpecs.get().mode === VoicePanelControlsModes.DRAWER;
+  l.__closure = {
+    controlsSpecs,
+    VoicePanelControlsModes
+  };
+  l.__workletHash = 900483810235;
+  l.__initData = __initData;
+  const stateFromSharedValue = useStateFromSharedValue(useDerivedValue(l));
+  const callback = useCallback(() => {
+    if (controlsSpecs.get().mode === VoicePanelControlsModes.DRAWER) {
+      dismissPanel();
+    } else {
+      a0({
+        tab: "settings",
+        source: connected.get() ? VoicePanelTabAnalyticsSources.CONNECTED_BUTTON : VoicePanelTabAnalyticsSources.PREJOIN_BUTTON
+      });
+    }
+  }, [a0, dismissPanel, connected, controlsSpecs]);
+  const stateFromSharedValue2 = useStateFromSharedValue(connected);
+  return {
+    isDrawerOpen: stateFromSharedValue,
+    handlePress: callback,
+    accessibilityLabel: stateFromSharedValue ? intl.string(t["awDmr/"]) : intl.string(t.OXW7dL),
+    ariaHidden: !stateFromSharedValue2
+  };
+};

modules/voice_panel/native/controls/utils/VoicePanelControlUtils.tsx

@@ -0,0 +1,16 @@
+// Metro module 15994 (f15995).
+import roundToNearestPixel from "../../utils/roundToNearestPixel";
+export function getDrawerSpec(a0, a1) {
+  const maxHeight = a0 - a1;
+  return {
+    minHeight: roundToNearestPixel(0.65 * maxHeight),
+    maxHeight
+  };
+}
+getDrawerSpec.__closure = {
+  roundToNearestPixel
+};
+getDrawerSpec.__workletHash = 3647675988513;
+getDrawerSpec.__initData = {
+  code: "function getDrawerSpec_VoicePanelControlUtilsTsx1(height,top){const{roundToNearestPixel}=this.__closure;const maxHeight=height-top;return{minHeight:roundToNearestPixel(maxHeight*0.65),maxHeight:maxHeight};}"
+};

modules/voice_panel/native/controls/utils/VoicePanelFloatingCTAUtils.tsx

@@ -0,0 +1,190 @@
+// Metro module 15883 (f15884).
+import { useContext, useMemo, useCallback } from "react";
+import { Pressable } from "react-native";
+import ChannelRTCStore from "../../../../calls/ChannelRTCStore";
+import EventBannerStore from "../../../../guild_scheduled_events/EventBannerStore";
+import { isGuildScheduledEventActive } from "../../../../guild_scheduled_events/GuildScheduledEventStore";
+import ChannelStore from "../../../../../stores/ChannelStore";
+import { GuildScheduledEventEntityTypes } from "../../../../guild_scheduled_events/GuildScheduledEventsConstants";
+import useTheme from "../../../../../hooks/useTheme";
+import VoicePanelStateContext from "../../VoicePanelStateContext";
+import useIsConnectedToVoiceChannel from "../../hooks/useIsConnectedToVoiceChannel";
+import { useImminentUpcomingGuildEvents } from "../../../../guild_scheduled_events/useGuildScheduledEvents";
+import { useStateFromStores } from "../../../../../_bundle/defaultAreStatesEqual";
+import { useManageResourcePermissions } from "../../../../permissions/useManageResourcePermissions";
+import { getNextRecurrenceIdInEvent, getEventTimeData } from "../../../../guild_scheduled_events/utils/ScheduleUtils";
+import useGuildScheduledEventUserCount from "../../../../guild_scheduled_events/useGuildScheduledEventUserCount";
+import ActionSheetActionCreators from "../../../../action_sheet/native/ActionSheetActionCreators";
+import { openStartGuildEventModal } from "../../../../guild_scheduled_events/native/GuildScheduledEventModalActionCreators";
+import { dismissEventBanner } from "../../../../guild_scheduled_events/GuildScheduledEventsNoticesActionCreators";
+import { getGuildScheduledEventHeaderProps } from "../../../../guild_scheduled_events/native/GuildScheduledEventHeaderUtils";
+import { RowButton } from "../../../../../design/components/TableRow/native/RowButton.native";
+import { CalendarIcon } from "../../../../../design/components/Icon/native/redesign/generated/CalendarIcon";
+import { intl, t } from "../../../../../intl/index.native";
+import { XSmallIcon } from "../../../../../design/components/Icon/native/redesign/generated/XSmallIcon";
+import { useInviteMembersCallback } from "../../hooks/useInviteMembersCallback";
+import { GroupPlusIcon } from "../../../../../design/components/Icon/native/redesign/generated/GroupPlusIcon";
+import useChannelFloatingCTAContent from "../../../../video_calls/native/useChannelFloatingCTAContent";
+import { useGetDismissibleContent } from "../../../../dismissible_content/useGetDismissibleContent";
+import useStateFromSharedValue from "../../../../reanimated/native/useStateFromSharedValue";
+import { UNSAFE_markDismissibleContentAsDismissed } from "../../../../dismissible_content/DismissibleContentUnsafeUtils";
+import { CircleErrorIcon } from "../../../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
+import { DismissibleContent } from "../../../../../_bundle/Module1358";
+import { showSoundboardSoundPickerActionSheet } from "../../../../soundboard/native/SoundboardActionCreators";
+import { SoundboardIcon } from "../../../../../design/components/Icon/native/redesign/generated/SoundboardIcon";
+import { getDeviceSpecificString } from "../../../../intl/overrides/getDeviceSpecificString";
+let c11371_12, getBadConnectionCTAProps, handleSoundboardMobileFloatingCtaClose, CloseSoundboardMobileFloatingCtaIcon, getDismissableCTAProps;
+const useFloatingCTAProps = function useFloatingCTAProps(a0) {
+  let imminentUpcomingGuildEvents, stateFromStores, c22557_2;
+  const stateFromSharedValue = useStateFromSharedValue(useContext(VoicePanelStateContext).showFloatingCTA);
+  let c22556_0 = stateFromSharedValue;
+  const setShowFloatingCTA = useContext(VoicePanelStateContext).setShowFloatingCTA;
+  let r37 = useMemo(() => c22556_0 === c11371_12.BAD_CONNECTION ? getBadConnectionCTAProps(() => setShowFloatingCTA(null)) : null, [setShowFloatingCTA, stateFromSharedValue]);
+  imminentUpcomingGuildEvents = void 0;
+  stateFromStores = void 0;
+  c22557_2 = void 0;
+  const theme = useTheme();
+  const isConnectedToVoiceChannel = useIsConnectedToVoiceChannel(useContext(VoicePanelStateContext).channelId);
+  imminentUpcomingGuildEvents = useImminentUpcomingGuildEvents(a0?.id);
+  stateFromStores = useStateFromStores([EventBannerStore], () => {
+    let r6 = imminentUpcomingGuildEvents.find((imminentUpcomingGuildEvent) => !EventBannerStore.isEventDismissed(imminentUpcomingGuildEvent.id));
+    if (r6 == null) {
+      r6 = null;
+    }
+    return r6;
+  }, [imminentUpcomingGuildEvents]);
+  const r63 = (0, useManageResourcePermissions(a0).canManageGuildEvent)(stateFromStores);
+  const r64 = stateFromStores != null && isGuildScheduledEventActive(stateFromStores);
+  let r69 = getNextRecurrenceIdInEvent(stateFromStores);
+  if (r69 == null) {
+    r69 = void 0;
+  }
+  c22557_2 = r69;
+  const guildScheduledEventUserCount = useGuildScheduledEventUserCount(stateFromStores?.guild_id, stateFromStores?.id, r69);
+  const callback = useCallback(() => {
+    if (stateFromStores != null) {
+      ActionSheetActionCreators.hideActionSheet();
+      openStartGuildEventModal(stateFromStores, c22557_2);
+    }
+  }, [stateFromStores, r69]);
+  const callback2 = useCallback(() => {
+    if (stateFromStores != null) {
+      dismissEventBanner(stateFromStores.id);
+    }
+  }, [stateFromStores]);
+  let r84 = void 0;
+  if (isConnectedToVoiceChannel) {
+    const r85 = stateFromStores != null;
+    r84 = void 0;
+    if (r85) {
+      r84 = void 0;
+      if (r63) {
+        r84 = void 0;
+        if (!r64) {
+          const { scheduled_start_time, name, entity_type } = stateFromStores;
+          const STAGE_INSTANCE = GuildScheduledEventEntityTypes.STAGE_INSTANCE;
+          r84 = {
+            onPress: callback,
+            icon: <RowButton.Icon IconComponent={CalendarIcon} variant="translucent" />,
+            label: name,
+            subLabel: `${getGuildScheduledEventHeaderProps({
+              eventTimeData: getEventTimeData(scheduled_start_time),
+              isStage: entity_type === STAGE_INSTANCE,
+              theme,
+              event: stateFromStores
+            }).text} • ${intl.formatToPlainString(t.NywdIj, {
+              count: guildScheduledEventUserCount
+            })}`,
+            trailing: <Pressable accessibilityRole="button" accessibilityLabel={intl.string(t.cpT0Cq)} onPress={callback2}>
+              <XSmallIcon color="interactive-icon-default" />
+            </Pressable>
+          };
+        }
+      }
+    }
+  }
+  let c22558_0 = a0;
+  const isConnectedToVoiceChannel2 = useIsConnectedToVoiceChannel(useContext(VoicePanelStateContext).channelId);
+  const stateFromStores3 = useStateFromStores([ChannelRTCStore], () => c22558_0?.id != null && ChannelRTCStore.getParticipants(c22558_0.id).length === 1);
+  const inviteMembersCallback = useInviteMembersCallback(a0?.id);
+  const r164 = a0 != null ? isConnectedToVoiceChannel2 ? stateFromStores3 ? {
+    label: intl.string(t.N4nebq),
+    subLabel: intl.string(t.o2XPr2),
+    icon: <RowButton.Icon IconComponent={GroupPlusIcon} variant="translucent" />,
+    onPress: inviteMembersCallback
+  } : void 0 : void 0 : void 0;
+  if (r37 == null) {
+    r37 = r84;
+  }
+  if (r37 == null) {
+    r37 = r164;
+  }
+  return r37;
+};
+getBadConnectionCTAProps = function getBadConnectionCTAProps(c22559_0) {
+  return {
+    label: intl.string(t.uv1tVh),
+    subLabel: intl.string(t["gQ14+g"]),
+    icon: <RowButton.Icon IconComponent={CircleErrorIcon} variant="translucent" />,
+    onPress: () => c22559_0 == null ? void 0 : c22559_0(),
+    trailing: <Pressable accessibilityRole="button" accessibilityLabel={intl.string(t.cpT0Cq)} hitSlop={4} onPress={() => {
+      UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.VOICE_PANEL_BAD_CONNECTION_CTA);
+      if (c22559_0 != null) {
+        c22559_0();
+      }
+    }}>
+      <XSmallIcon color="interactive-icon-default" />
+    </Pressable>
+  };
+};
+handleSoundboardMobileFloatingCtaClose = function handleSoundboardMobileFloatingCtaClose() {
+  UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.SOUNDBOARD_MOBILE_FLOATING_CTA);
+};
+CloseSoundboardMobileFloatingCtaIcon = function CloseSoundboardMobileFloatingCtaIcon() {
+  return <Pressable accessibilityRole="button" accessibilityLabel={intl.string(t.cpT0Cq)} onPress={handleSoundboardMobileFloatingCtaClose}>
+    <XSmallIcon color="interactive-icon-default" />
+  </Pressable>;
+};
+getDismissableCTAProps = function getDismissableCTAProps({ dismissableContent: dismissableContent2, channel }) {
+  if (DismissibleContent.VOICE_PANEL_BAD_CONNECTION_CTA === dismissableContent2) {
+    return getBadConnectionCTAProps();
+  }
+  if (DismissibleContent.SOUNDBOARD_MOBILE_FLOATING_CTA === dismissableContent2) {
+    return {
+      icon: <SoundboardIcon color="interactive-icon-default" />,
+      onPress: () => {
+        if (channel != null) {
+          showSoundboardSoundPickerActionSheet({
+            channel,
+            analyticsSource: "SOUNDBOARD_MOBILE_FLOATING_CTA"
+          });
+        }
+        UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.SOUNDBOARD_MOBILE_FLOATING_CTA);
+      },
+      label: getDeviceSpecificString({
+        quest: t.XLlWUe
+      }, t.IJgkPX),
+      trailing: <CloseSoundboardMobileFloatingCtaIcon />
+    };
+  }
+  DismissibleContent.DONUT_MOBILE_NUX;
+  return null;
+};
+c11371_12 = {
+  BAD_CONNECTION: "BAD_CONNECTION"
+};
+export const FLOATING_CTA_HIDE_TIMEOUT = 5000;
+export { c11371_12 as OverrideFloatingCTA };
+export function useShouldShowFloatingCTA(a0) {
+  const [dismissableContent] = useGetDismissibleContent(useChannelFloatingCTAContent(a0));
+  const stateFromStores2 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(a0));
+  const memo = useMemo(() => getDismissableCTAProps({
+    dismissableContent,
+    channel: stateFromStores2
+  }), [dismissableContent, stateFromStores2]);
+  const floatingCTAProps = useFloatingCTAProps(stateFromStores2);
+  return memo != null || floatingCTAProps != null;
+}
+export { useFloatingCTAProps };
+export { getBadConnectionCTAProps };
+export { getDismissableCTAProps };

modules/voice_panel/native/controls/utils/createUseAnimatedScrollLock.tsx

@@ -0,0 +1,170 @@
+// Metro module 11276 (f11277).
+import { createContext } from "react";
+import * as _PlatformUtils from "../../../../../utils/PlatformUtils";
+import * as _ReanimatedRexport from "../../../../reanimated/ReanimatedRexport";
+import { useAnimatedRef, useAnimatedScrollHandler, useAnimatedProps } from "../../../../reanimated/ReanimatedRexport";
+let __initData, __initData2, __initData3, __initData4, __initData5;
+const isAndroid = _PlatformUtils.isAndroid();
+const context = createContext(() => ({}));
+__initData = {
+  code: "function onBeginDrag_createUseAnimatedScrollLockTsx1(_,context){const{isDragScrolling}=this.__closure;context.momentumEndCount=0;isDragScrolling.set(true);}"
+};
+__initData2 = {
+  code: "function onEndDrag_createUseAnimatedScrollLockTsx2(event){const{isDragScrolling,scrollLocked}=this.__closure;var _event$velocity$y,_event$velocity;isDragScrolling.set(false);if(Math.abs((_event$velocity$y=(_event$velocity=event.velocity)===null||_event$velocity===void 0?void 0:_event$velocity.y)!==null&&_event$velocity$y!==void 0?_event$velocity$y:0)===0){scrollLocked.set(false);}}"
+};
+__initData3 = {
+  code: "function onMomentumEnd_createUseAnimatedScrollLockTsx3(event,context){const{IS_ANDROID,scrollLocked}=this.__closure;if(IS_ANDROID){var _context$momentumEndC;let count=(_context$momentumEndC=context===null||context===void 0?void 0:context.momentumEndCount)!==null&&_context$momentumEndC!==void 0?_context$momentumEndC:0;count+=1;if(count===3){scrollLocked.set(false);}else if(context!=null){context.momentumEndCount=count;}}else{scrollLocked.set(false);}}"
+};
+__initData4 = {
+  code: "function onScroll_createUseAnimatedScrollLockTsx4(event){const{isDragScrolling,IS_ANDROID,scrollTo,scrollerRef,ScrollOffsetValue,scrollLocked,onScrollHandler,runOnJS,onScrollHandlerWorkletized}=this.__closure;var _onScrollHandlerWorkl;const newScrollPosition=event.contentOffset.y;if(isDragScrolling.get()!==true){let scrollPosition=newScrollPosition;if(IS_ANDROID&&scrollPosition<0){scrollPosition=0;scrollTo(scrollerRef,0,0,false);}ScrollOffsetValue.set(scrollPosition);}else{const isUp=newScrollPosition<ScrollOffsetValue.get();if(scrollLocked.get()||isUp&&newScrollPosition<=0){if(!scrollLocked.get()){scrollLocked.set(true);}scrollTo(scrollerRef,0,0,false);ScrollOffsetValue.set(0);}else{ScrollOffsetValue.set(newScrollPosition);}}const{width:width,height:height}=event.layoutMeasurement;const{width:contentWidth,height:contentHeight}=event.contentSize;onScrollHandler!=null&&runOnJS(onScrollHandler)({width:width,height:height,offset:newScrollPosition,contentWidth:contentWidth,contentHeight:contentHeight});(_onScrollHandlerWorkl=onScrollHandlerWorkletized)===null||_onScrollHandlerWorkl===void 0||_onScrollHandlerWorkl({width:width,height:height,offset:newScrollPosition,contentWidth:contentWidth,contentHeight:contentHeight});}"
+};
+__initData5 = {
+  code: "function createUseAnimatedScrollLockTsx5(){const{scrollLocked}=this.__closure;return{showsVerticalScrollIndicator:!scrollLocked.get()};}"
+};
+export { context as ControlsGestureScrollLock };
+export function createUseAnimatedScrollLock(gestureRef, scrollLocked, ScrollOffsetValue, isDragScrolling) {
+  return function(r2 = {}) {
+    const { onScrollHandler, onScrollHandlerWorkletized } = r2;
+    const animatedRef = useAnimatedRef();
+    const w = function w(a0, a1) {
+      a1.momentumEndCount = 0;
+      isDragScrolling.set(true);
+    };
+    w.__closure = {
+      isDragScrolling
+    };
+    w.__workletHash = 16433590303176;
+    w.__initData = __initData;
+    const H = function H(a0) {
+      isDragScrolling.set(false);
+      const r8 = Math;
+      let r14 = a0.velocity?.y;
+      if (r14 == null) {
+        r14 = 0;
+      }
+      if (r8.abs(r14) === 0) {
+        scrollLocked.set(false);
+      }
+    };
+    H.__closure = {
+      isDragScrolling,
+      scrollLocked
+    };
+    H.__workletHash = 1594981610850;
+    H.__initData = __initData2;
+    const D = function D(a0, a1) {
+      if (isAndroid) {
+        let r11 = a1?.momentumEndCount;
+        if (r11 == null) {
+          r11 = 0;
+        }
+        const momentumEndCount = r11 + 1;
+        if (momentumEndCount === 3) {
+          scrollLocked.set(false);
+        } else if (a1 != null) {
+          a1.momentumEndCount = momentumEndCount;
+        }
+      } else {
+        scrollLocked.set(false);
+      }
+    };
+    D.__closure = {
+      IS_ANDROID: isAndroid,
+      scrollLocked
+    };
+    D.__workletHash = 17525906195822;
+    D.__initData = __initData3;
+    const k = function k(a0) {
+      let offset;
+      L13: {
+        offset = a0.contentOffset.y;
+        if (isDragScrolling.get() !== true) {
+          let r41 = isAndroid;
+          if (isAndroid) {
+            r41 = offset < 0;
+          }
+          let r43 = offset;
+          if (r41) {
+            _ReanimatedRexport.scrollTo(animatedRef, 0, 0, false);
+            r43 = 0;
+          }
+          ScrollOffsetValue.set(r43);
+        } else {
+          L5: {
+            const r2 = offset < ScrollOffsetValue.get();
+            if (!scrollLocked.get()) {
+              if (r2 && offset <= 0) {
+                break L5;
+              }
+              ScrollOffsetValue.set(offset);
+              break L13;
+            }
+          }
+          if (!scrollLocked.get()) {
+            scrollLocked.set(true);
+          }
+          _ReanimatedRexport.scrollTo(animatedRef, 0, 0, false);
+          ScrollOffsetValue.set(0);
+        }
+      }
+      const layoutMeasurement = a0.layoutMeasurement;
+      const { width, height } = layoutMeasurement;
+      const contentSize = a0.contentSize;
+      const { width: width2, height: height2 } = contentSize;
+      if (onScrollHandler != null) {
+        _ReanimatedRexport.runOnJS(onScrollHandler)({
+          width,
+          height,
+          offset,
+          contentWidth: width2,
+          contentHeight: height2
+        });
+      }
+      if (onScrollHandlerWorkletized != null) {
+        onScrollHandlerWorkletized({
+          width,
+          height,
+          offset,
+          contentWidth: width2,
+          contentHeight: height2
+        });
+      }
+    };
+    k.__closure = {
+      isDragScrolling,
+      IS_ANDROID: isAndroid,
+      scrollTo: _ReanimatedRexport.scrollTo,
+      scrollerRef: animatedRef,
+      ScrollOffsetValue,
+      scrollLocked,
+      onScrollHandler,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      onScrollHandlerWorkletized
+    };
+    k.__workletHash = 13271628494164;
+    k.__initData = __initData4;
+    const r44 = {
+      onScroll: useAnimatedScrollHandler({
+        onBeginDrag: w,
+        onEndDrag: H,
+        onMomentumEnd: D,
+        onScroll: k
+      }),
+      animatedProps: null,
+      scrollerRef: null,
+      gestureRef: null
+    };
+    const L = () => ({
+      showsVerticalScrollIndicator: !scrollLocked.get()
+    });
+    L.__closure = {
+      scrollLocked
+    };
+    L.__workletHash = 3670657775473;
+    L.__initData = __initData5;
+    r44.animatedProps = useAnimatedProps(L);
+    r44.scrollerRef = animatedRef;
+    r44.gestureRef = gestureRef;
+    return r44;
+  };
+}

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;

modules/voice_panel/native/hooks/useCanConnect.tsx

@@ -0,0 +1,17 @@
+// Metro module 15952 (f15953).
+import ChannelStore from "../../../../stores/ChannelStore";
+import GuildStore from "../../../../stores/GuildStore";
+import PermissionStore from "../../../../stores/PermissionStore";
+import VoiceStateStore from "../../../../stores/VoiceStateStore";
+import { Permissions } from "../../../../_bundle/Module505";
+import { useStateFromStoresObject } from "../../../../_bundle/Module589";
+import { isChannelFull } from "../../../../utils/ChannelUtils";
+export default function useCanConnect(a0) {
+  return useStateFromStoresObject([ChannelStore, PermissionStore, GuildStore, VoiceStateStore], () => {
+    const channel = ChannelStore.getChannel(a0);
+    return {
+      canConnect: channel != null && (channel.isPrivate() || PermissionStore.can(Permissions.CONNECT, channel)),
+      isAtMaxCapacity: channel == null || isChannelFull(channel, VoiceStateStore, GuildStore)
+    };
+  }, [a0]);
+};

modules/voice_panel/native/hooks/useCanInviteMembers.tsx

@@ -0,0 +1,11 @@
+// Metro module 15928 (f15929).
+import ChannelStore from "../../../../stores/ChannelStore";
+import PermissionStore from "../../../../stores/PermissionStore";
+import { Permissions } from "../../../../_bundle/Module505";
+import { useStateFromStores } from "../../../../_bundle/defaultAreStatesEqual";
+export function useCanInviteMembers(a0) {
+  return useStateFromStores([ChannelStore, PermissionStore], () => {
+    const channel = ChannelStore.getChannel(a0);
+    return channel != null && PermissionStore.can(Permissions.CONNECT, channel) && PermissionStore.can(Permissions.CREATE_INSTANT_INVITE, channel);
+  }, [a0]);
+}

modules/voice_panel/native/hooks/useChatBadge.tsx

@@ -0,0 +1,6 @@
+// Metro module 15956 (f15957).
+import ReadStateStore from "../../../../stores/ReadStateStore";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+export default function useChatBadge(c22640_0) {
+  return useStateFromStores([ReadStateStore], () => ReadStateStore.getMentionCount(c22640_0) > 0 ? "mention" : ReadStateStore.hasUnread(c22640_0) ? "unread" : null);
+};

modules/voice_panel/native/hooks/useConsoleConnectingInfo.tsx

@@ -0,0 +1,41 @@
+// Metro module 15995 (f15996).
+import GameConsoleStore from "../../../game_console/GameConsoleStore";
+import SessionsStore from "../../../../stores/SessionsStore";
+import useVoiceStateForRemoteSession from "../../../game_console/hooks/useVoiceStateForRemoteSession";
+import { useStateFromStores } from "../../../../_bundle/defaultAreStatesEqual";
+import useShouldDisplayCancelConsoleTransfer from "../../../game_console/native/useShouldDisplayCancelConsoleTransfer";
+import getConsoleIcon from "../../../game_console/native/getConsoleIcon";
+import { getConsoleConnectingText } from "../../../game_console/native/getConsoleConnectingText";
+import getConsoleColor from "../../../game_console/native/getConsoleColor";
+export default function useConsoleConnectingInfo(a0) {
+  const voiceStateForRemoteSession = useVoiceStateForRemoteSession();
+  let c22705_0 = voiceStateForRemoteSession;
+  const channelId = voiceStateForRemoteSession?.channelId;
+  const stateFromStores = useStateFromStores([GameConsoleStore], () => GameConsoleStore.getAwaitingRemoteSessionInfo());
+  const stateFromStores2 = useStateFromStores([SessionsStore], () => {
+    let r7 = c22705_0?.sessionId;
+    if (r7 == null) {
+      r7 = "";
+    }
+    return SessionsStore.getSessionById(r7);
+  });
+  let r28 = stateFromStores?.type;
+  if (r28 == null) {
+    r28 = stateFromStores2 == null ? void 0 : stateFromStores2.clientInfo.os;
+  }
+  if (r28 == null) {
+    r28 = "";
+  }
+  const shouldDisplayCancelConsoleTransfer = useShouldDisplayCancelConsoleTransfer(stateFromStores);
+  const channelId2 = stateFromStores?.channelId;
+  const channelId3 = stateFromStores?.channelId;
+  const r41 = channelId === a0;
+  return {
+    isConnectingToConsole: channelId2 === a0,
+    isConnectingOrConnectedToConsole: channelId3 === a0 || r41,
+    icon: getConsoleIcon(r28),
+    text: getConsoleConnectingText(stateFromStores2, stateFromStores, r41),
+    color: getConsoleColor(r28),
+    displayCancel: shouldDisplayCancelConsoleTransfer
+  };
+};

modules/voice_panel/native/hooks/useControlAccessoryHeight.tsx

@@ -0,0 +1,36 @@
+// Metro module 16025 (f16026).
+import { useContext, useEffect } from "react";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import MobileVisualRefreshExperiment from "../../../themes/experiments/MobileVisualRefreshExperiment";
+import useConsoleConnectingInfo from "./useConsoleConnectingInfo";
+import { useSharedValue, useDerivedValue } from "../../../reanimated/ReanimatedRexport";
+import { CONSOLE_STATUS_HEIGHT } from "../controls/VoicePanelConsoleStatus";
+import { useShouldShowFloatingCTA } from "../controls/utils/VoicePanelFloatingCTAUtils";
+import { getFloatingCTATotalViewHeight } from "../controls/VoicePanelFloatingCTAContainer";
+const __initData = {
+  code: "function useControlAccessoryHeightTsx1(){const{consoleStatusHeight,floatingCTAHeight}=this.__closure;return consoleStatusHeight.get()+floatingCTAHeight.get();}"
+};
+export default function useControlAccessoryHeight() {
+  let shouldShowFloatingCTA, sharedValue2, floatingCTATotalViewHeight;
+  const channelId = useContext(VoicePanelStateContext).channelId;
+  const r10 = MobileVisualRefreshExperiment("useControlAccessoryHeight");
+  const isConnectingOrConnectedToConsole = useConsoleConnectingInfo(channelId).isConnectingOrConnectedToConsole;
+  const sharedValue = useSharedValue(0);
+  useEffect(() => {
+    sharedValue.set(isConnectingOrConnectedToConsole ? CONSOLE_STATUS_HEIGHT : 0);
+  }, [sharedValue, isConnectingOrConnectedToConsole]);
+  shouldShowFloatingCTA = useShouldShowFloatingCTA(channelId);
+  sharedValue2 = useSharedValue(0);
+  floatingCTATotalViewHeight = getFloatingCTATotalViewHeight(r10);
+  useEffect(() => {
+    sharedValue2.set(shouldShowFloatingCTA ? floatingCTATotalViewHeight : 0);
+  }, [sharedValue2, shouldShowFloatingCTA, floatingCTATotalViewHeight]);
+  const c = () => sharedValue.get() + sharedValue2.get();
+  c.__closure = {
+    consoleStatusHeight: sharedValue,
+    floatingCTAHeight: sharedValue2
+  };
+  c.__workletHash = 7974849446653;
+  c.__initData = __initData;
+  return useDerivedValue(c);
+};

modules/voice_panel/native/hooks/useControlsTranslation.tsx

@@ -0,0 +1,31 @@
+// Metro module 16001 (f16002).
+import { useContext } from "react";
+import { MODE_CHANGE_PHYSICS } from "../../VoicePanelConstants";
+import { CALL_TILE_GUTTER } from "../card/VoicePanelCardConstants";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+const __initData = {
+  code: "function useControlsTranslationTsx1(){const{withSpring,wrapperSpecs,MODE_CHANGE_PHYSICS,useReducedMotion,CALL_TILE_GUTTER,viewHeight}=this.__closure;return{transform:[{translateX:withSpring(wrapperSpecs.get().x,MODE_CHANGE_PHYSICS)},{translateY:withSpring(!useReducedMotion.get()&&wrapperSpecs.get().hidden?wrapperSpecs.get().height+CALL_TILE_GUTTER+viewHeight.get():wrapperSpecs.get().y,MODE_CHANGE_PHYSICS)}]};}"
+};
+export default function useControlsTranslation(a0, a1, a2) {
+  const useReducedMotion = useContext(VoicePanelStateContext).useReducedMotion;
+  const S = () => ({
+    transform: [{
+      translateX: _spring.withSpring(a1.get().x, MODE_CHANGE_PHYSICS)
+    }, {
+      translateY: _spring.withSpring(!useReducedMotion.get() && a1.get().hidden ? a1.get().height + CALL_TILE_GUTTER + a2.get() : a1.get().y, MODE_CHANGE_PHYSICS)
+    }]
+  });
+  S.__closure = {
+    withSpring: _spring.withSpring,
+    wrapperSpecs: a1,
+    MODE_CHANGE_PHYSICS,
+    useReducedMotion,
+    CALL_TILE_GUTTER,
+    viewHeight: a2
+  };
+  S.__workletHash = 11281989557090;
+  S.__initData = __initData;
+  return useAnimatedStyle(S);
+};

modules/voice_panel/native/hooks/useInviteMembersCallback.tsx

@@ -0,0 +1,14 @@
+// Metro module 15886 (f15887).
+import { useCallback } from "react";
+import ChannelStore from "../../../../stores/ChannelStore";
+import { AnalyticsPages, InstantInviteSources } from "../../../../Constants";
+import { navigateToNewGroupDM } from "../../../main_tabs_v2/helpers/NavigationRouteUtils.native";
+import { showInstantInviteActionSheet } from "../../../instant_invite/native/InstantInviteUtils";
+export function useInviteMembersCallback(a0) {
+  return useCallback(() => {
+    const channel = ChannelStore.getChannel(a0);
+    return channel != null ? channel.isPrivate() ? navigateToNewGroupDM(channel.id, AnalyticsPages.CHANNEL_CALL) : showInstantInviteActionSheet(channel, {
+      source: InstantInviteSources.VOICE_CHANNEL
+    }) : null;
+  }, [a0]);
+}

modules/voice_panel/native/hooks/useIsConnectedToVoiceChannel.tsx

@@ -0,0 +1,26 @@
+// Metro module 15863 (f15864).
+import AuthenticationStore from "../../../../stores/AuthenticationStore";
+import RTCConnectionStore from "../../../../stores/RTCConnectionStore";
+import VoiceStateStore from "../../../../stores/VoiceStateStore";
+import { RTCConnectionStates } from "../../../../Constants";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+export default function useIsConnectedToVoiceChannel(c22529_0) {
+  return useStateFromStores([RTCConnectionStore, VoiceStateStore, AuthenticationStore], () => {
+    const channelId = RTCConnectionStore.getChannelId();
+    let r6 = c22529_0;
+    if (r6 == null) {
+      r6 = channelId;
+    }
+    if (r6 !== channelId) {
+      return false;
+    }
+    if (VoiceStateStore.isInChannel(r6, AuthenticationStore.getId())) {
+      return true;
+    }
+    const state = RTCConnectionStore.getState();
+    if (RTCConnectionStates.DISCONNECTED !== state && RTCConnectionStates.NO_ROUTE !== state) {
+      return true;
+    }
+    return false;
+  });
+};

modules/voice_panel/native/hooks/useSoundboardConfig.tsx

@@ -0,0 +1,32 @@
+// Metro module 16020 (f16021).
+import { useCallback, useMemo } from "react";
+import ChannelStore from "../../../../stores/ChannelStore";
+import useIsConnectedToVoiceChannel from "./useIsConnectedToVoiceChannel";
+import { useIsDismissibleContentDismissed_UNSAFE } from "../../../dismissible_content/DismissibleContentUnsafeUtils";
+import { DismissibleContent } from "../../../../_bundle/Module1358";
+import { showSoundboardSoundPickerActionSheet } from "../../../soundboard/native/SoundboardActionCreators";
+import canChannelUseSoundboard from "../../../soundboard/canChannelUseSoundboard";
+let c11487_5 = {
+  VOICE_CONTROLS: "call control drawer",
+  VOICE_PANEL_CONTROLS: "voice panel controls"
+};
+export default function useSoundboardConfig(a0, a1) {
+  const analyticsSource = a1;
+  const isConnectedToVoiceChannel = useIsConnectedToVoiceChannel(a0);
+  const showIndicator = !useIsDismissibleContentDismissed_UNSAFE(DismissibleContent.SOUNDBOARD_MOBILE_NEW_BADGE);
+  return {
+    visible: isConnectedToVoiceChannel && (c11487_5.VOICE_CONTROLS !== a1 ? c11487_5.VOICE_PANEL_CONTROLS === a1 ? true : false : true),
+    handlePress: useCallback(() => {
+      const channel = ChannelStore.getChannel(a0);
+      if (channel != null) {
+        showSoundboardSoundPickerActionSheet({
+          channel,
+          analyticsSource
+        });
+      }
+    }, [a0, a1]),
+    disabled: useMemo(() => !canChannelUseSoundboard(ChannelStore.getChannel(a0)), [a0]),
+    showIndicator
+  };
+};
+export { c11487_5 as SoundboardButtonLocation };

modules/voice_panel/native/hooks/useSpeakerTooltips.tsx

@@ -0,0 +1,142 @@
+// Metro module 15948 (f15949).
+import { useContext, useState, useMemo, useEffect, useCallback } from "react";
+import { setVoiceUpsellDismissed, useConsoleVoiceUpsellStore } from "../../../game_console/ConsoleVoiceUpsellStore";
+import { VoicePanelControlsModes } from "../controls/VoicePanelControlsConstants";
+import { ContentDismissActionType } from "../../../dismissible_content/DismissibleContentConstants";
+import useConsoleConnectedAccountForVoiceUpsell from "../../../game_console/useConsoleConnectedAccountForVoiceUpsell";
+import useChannelFloatingCTAContent from "../../../video_calls/native/useChannelFloatingCTAContent";
+import { useIsVoicePanelFullscreen } from "../../VoicePanelUtils.native";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
+import { useSelectedDismissibleContent } from "../../../dismissible_content/hooks/useSelectedDismissibleContent";
+import useControlsLock from "../controls/useControlsLock";
+import { intl, t } from "../../../../intl/index.native";
+import { DismissibleContent } from "../../../../_bundle/Module1358";
+import VoicePanelConsoleFacepile, { getConsoleInfo } from "../header/VoicePanelConsoleFacepile";
+import { useCoachmark } from "../../../../design/components/Coachmark/native/useCoachmark.native";
+function $mk98252($env) {
+  return () => {
+    const r2 = $env[0];
+    if (r2.visible) {
+      r2.onDismiss();
+    }
+  };
+}
+function $mk98253($env) {
+  return () => {
+    const r1 = $env;
+    if (!r1[1]) {
+      (0, r1[2])();
+    }
+  };
+}
+const __initData = {
+  code: "function useSpeakerTooltipsTsx1(){const{controlsSpecs}=this.__closure;return controlsSpecs.get().mode;}"
+};
+const __initData2 = {
+  code: "function useSpeakerTooltipsTsx2(currentControlsMode,previous){const{runOnJS,setIsShowingControls,VoicePanelControlsModes}=this.__closure;if(currentControlsMode===previous)return;runOnJS(setIsShowingControls)(currentControlsMode===VoicePanelControlsModes.FLOATING_DEFAULT);}"
+};
+export default function useSpeakerTooltips(a0, a1) {
+  let c22634_6, c22634_7, c22634_8, memo, visible;
+  let r13 = a1;
+  let state = a1;
+  const consoleConnectedAccountForVoiceUpsell = useConsoleConnectedAccountForVoiceUpsell();
+  let c22634_1 = consoleConnectedAccountForVoiceUpsell;
+  const voiceUpsellDismissed = useConsoleVoiceUpsellStore().voiceUpsellDismissed;
+  const channelFloatingCTAContent = useChannelFloatingCTAContent(void 0);
+  let c22634_3 = channelFloatingCTAContent;
+  const isVoicePanelFullscreen = useIsVoicePanelFullscreen();
+  const controlsSpecs = useContext(VoicePanelStateContext).controlsSpecs;
+  const [state2, setState] = useState(true);
+  const v = () => controlsSpecs.get().mode;
+  v.__closure = {
+    controlsSpecs
+  };
+  v.__workletHash = 13952338295275;
+  v.__initData = __initData;
+  const b = function b(a0, a1) {
+    if (a0 !== a1) {
+      _ReanimatedRexport.runOnJS(setState)(a0 === VoicePanelControlsModes.FLOATING_DEFAULT);
+    }
+  };
+  b.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    setIsShowingControls: setState,
+    VoicePanelControlsModes
+  };
+  b.__workletHash = 5084069556209;
+  b.__initData = __initData2;
+  useAnimatedReaction(v, b);
+  if (a1) {
+    r13 = isVoicePanelFullscreen;
+  }
+  if (r13) {
+    r13 = state2;
+  }
+  state = r13;
+  const [r59, r60] = useSelectedDismissibleContent(useMemo(() => state ? c22634_3 : [], [r13, channelFloatingCTAContent]));
+  c22634_6 = r59;
+  c22634_7 = r60;
+  const controlsLock = useControlsLock();
+  c22634_8 = controlsLock;
+  memo = useMemo(() => ({
+    position: "bottom",
+    title: intl.string(t.O2WA4u),
+    description: intl.string(t.fr5bJy),
+    visible: state && c22634_6 === DismissibleContent.DONUT_MOBILE_NUX,
+    renderImgComponent: () => <VoicePanelConsoleFacepile />,
+    withBlurBackground: true,
+    onDismiss: () => c22634_7(ContentDismissActionType.UNKNOWN)
+  }), [r13, r60, r59]);
+  const memo2 = useMemo(() => {
+    const r4 = c22634_1 != null ? getConsoleInfo(c22634_1) : null;
+    const visible2 = state && !voiceUpsellDismissed && r4 != null && !memo.visible;
+    let title = r4?.connectLabel;
+    if (title == null) {
+      title = "";
+    }
+    let description = r4?.connectSublabel;
+    if (description == null) {
+      description = "";
+    }
+    return {
+      position: "bottom",
+      title,
+      description,
+      visible: visible2,
+      imgSource: r4?.icon,
+      withBlurBackground: true,
+      onDismiss: () => {
+        setVoiceUpsellDismissed(true);
+      }
+    };
+  }, [consoleConnectedAccountForVoiceUpsell, r13, voiceUpsellDismissed, memo.visible]);
+  const r73 = memo.visible || memo2.visible;
+  let env22635;
+  let env22636;
+  visible = r73;
+  useEffect(() => {
+    if (visible) {
+      c22634_8.lock(VoicePanelControlsModes.FLOATING_DEFAULT);
+    } else {
+      c22634_8.unlock();
+    }
+  }, [visible, controlsLock]);
+  const r79 = env22635 = {};
+  env22635[0] = memo;
+  env22635[1] = r13;
+  env22635[2] = void 0;
+  const callback = useCallback($mk98252(r79), [memo]);
+  env22635[2] = callback;
+  useEffect($mk98253(r79), [r13, callback]);
+  useCoachmark(a0, memo);
+  const r92 = env22636 = {};
+  env22636[0] = memo2;
+  env22636[1] = r13;
+  env22636[2] = void 0;
+  const callback2 = useCallback($mk98252(r92), [memo2]);
+  env22636[2] = callback2;
+  useEffect($mk98253(r92), [r13, callback2]);
+  useCoachmark(a0, memo2);
+};

modules/voice_panel/native/hooks/useTapGestures.tsx

@@ -0,0 +1,105 @@
+// Metro module 15962 (f15963).
+import { useContext, useRef, useLayoutEffect, useMemo } from "react";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { Gesture } from "../../../../_bundle/Module5273";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import * as _HapticUtils_native from "../../../haptics/HapticUtils.native";
+const __initData = {
+  code: "function useTapGesturesTsx1(){const{runOnJS,handleEvent}=this.__closure;return runOnJS(handleEvent)('double');}"
+};
+const __initData2 = {
+  code: "function useTapGesturesTsx2(event,manager){const{isFocusedVideoZoomed}=this.__closure;if(isFocusedVideoZoomed.get()){manager.fail();}}"
+};
+const __initData3 = {
+  code: "function useTapGesturesTsx3(){const{runOnJS,handleEvent}=this.__closure;return runOnJS(handleEvent)('single');}"
+};
+const __initData4 = {
+  code: "function useTapGesturesTsx4(){const{runOnJS,triggerHapticFeedback,HapticFeedbackTypes,handleEvent}=this.__closure;runOnJS(triggerHapticFeedback)(HapticFeedbackTypes.IMPACT_MEDIUM);runOnJS(handleEvent)('long');}"
+};
+export default function useTapGestures(a0) {
+  const current = a0;
+  const isFocusedVideoZoomed = useContext(VoicePanelStateContext).isFocusedVideoZoomed;
+  const ref = useRef(a0);
+  const r1 = a0.onSingleTap != null;
+  let c22656_3 = r1;
+  const r2 = a0.onDoubleTap != null;
+  let c22656_4 = r2;
+  const r20 = a0.onLongPress != null;
+  let c22656_5 = r20;
+  const gesturesEnabled = a0.gesturesEnabled;
+  useLayoutEffect(() => {
+    ref.current = current;
+  });
+  return useMemo(() => {
+    const handleEvent2 = function handleEvent(a0) {
+      if (a0 === "single") {
+        const current4 = ref.current;
+        const onSingleTap = current4.onSingleTap;
+        if (onSingleTap != null) {
+          onSingleTap.call(current4);
+        }
+      } else if (a0 === "double") {
+        const current3 = ref.current;
+        const onDoubleTap = current3.onDoubleTap;
+        if (onDoubleTap != null) {
+          onDoubleTap.call(current3);
+        }
+      } else if (a0 === "long") {
+        const current2 = ref.current;
+        const onLongPress = current2.onLongPress;
+        if (onLongPress != null) {
+          onLongPress.call(current2);
+        }
+      }
+    };
+    const r9 = Gesture.Tap();
+    let r12 = gesturesEnabled;
+    const r29 = r9.enabled(gesturesEnabled ? c22656_4 : gesturesEnabled).maxDistance(30).numberOfTaps(2);
+    const S = function S(a0, a1) {
+      if (isFocusedVideoZoomed.get()) {
+        a1.fail();
+      }
+    };
+    S.__closure = {
+      isFocusedVideoZoomed
+    };
+    S.__workletHash = 3236469126950;
+    S.__initData = __initData2;
+    const r34 = r29.onTouchesDown(S);
+    const b = () => _ReanimatedRexport.runOnJS(handleEvent2)("double");
+    b.__closure = {
+      runOnJS: _ReanimatedRexport.runOnJS,
+      handleEvent: handleEvent2
+    };
+    b.__workletHash = 13571114432746;
+    b.__initData = __initData;
+    const r43 = r34.onStart(b);
+    const r53 = Gesture.Tap().enabled(gesturesEnabled ? c22656_3 : gesturesEnabled).maxDistance(30);
+    const c = () => _ReanimatedRexport.runOnJS(handleEvent2)("single");
+    c.__closure = {
+      runOnJS: _ReanimatedRexport.runOnJS,
+      handleEvent: handleEvent2
+    };
+    c.__workletHash = 14109132753191;
+    c.__initData = __initData3;
+    const r61 = r53.onStart(c);
+    const r66 = Gesture.LongPress();
+    if (gesturesEnabled) {
+      r12 = c22656_5;
+    }
+    const r68 = r66.enabled(r12);
+    const n = function n() {
+      _ReanimatedRexport.runOnJS(_HapticUtils_native.triggerHapticFeedback)(_HapticUtils_native.HapticFeedbackTypes.IMPACT_MEDIUM);
+      _ReanimatedRexport.runOnJS(handleEvent2)("long");
+    };
+    n.__closure = {
+      runOnJS: _ReanimatedRexport.runOnJS,
+      triggerHapticFeedback: _HapticUtils_native.triggerHapticFeedback,
+      HapticFeedbackTypes: _HapticUtils_native.HapticFeedbackTypes,
+      handleEvent: handleEvent2
+    };
+    n.__workletHash = 1947700378974;
+    n.__initData = __initData4;
+    return Gesture.Exclusive(r43, r61, r68.onStart(n));
+  }, [r1, r2, r20, gesturesEnabled, isFocusedVideoZoomed]);
+};

modules/voice_panel/native/hooks/useVoicePanelCardUserStateIcons.tsx

@@ -0,0 +1,143 @@
+// Metro module 15932 (f15933).
+import { useContext, useCallback, useMemo } from "react";
+import RTCConnectionStore from "../../../../stores/RTCConnectionStore";
+import VoiceStateStore from "../../../../stores/VoiceStateStore";
+import { ParticipantTypes } from "../../../calls/CallConstants";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { useMuteDeafenIconState, useVideoIconState, VideoIconState, MuteDeafenIconState } from "../utils/VoiceStateIconUtils";
+import { useStateFromStores } from "../../../../_bundle/defaultAreStatesEqual";
+import useMuteAwareLocalVolume from "../../../media_engine/useMuteAwareLocalVolume";
+import { MediaEngineContextTypes } from "../../../../_bundle/Module4286";
+import MobileAudioOutputExperiment from "../../../media_engine/MobileAudioOutputExperiment";
+import { useIsRTCDisconnectedUIVisible } from "../../../voice_calls/RTCConnectionDesyncHooks";
+import { OverrideFloatingCTA } from "../controls/utils/VoicePanelFloatingCTAUtils";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { CircleErrorIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
+import Module712 from "../../../../_bundle/Module712";
+import { intl, t } from "../../../../intl/index.native";
+let c11414_8 = {
+  STREAM_ICON: "STREAM_ICON",
+  USER_VIDEO_ICON: "USER_VIDEO_ICON",
+  MUTE_DEAFEN_ICON: "MUTE_DEAFEN_ICON",
+  USER_DISCONNECTED_ICON: "DISCONNECTED_ICON",
+  SPEAKER_MUTE_ICON: "SPEAKER_MUTE_ICON"
+};
+export default function useVoicePanelCardUserStateIcons(a0, a1, a2) {
+  let stateFromStores2, c22619_8, isRTCDisconnectedUIVisible, callback, callback2;
+  let r12 = arguments[3];
+  if (r12 === void 0) {
+    r12 = null;
+  }
+  let c22619_2 = r12;
+  stateFromStores2 = void 0;
+  c22619_8 = void 0;
+  isRTCDisconnectedUIVisible = void 0;
+  callback = void 0;
+  callback2 = void 0;
+  const setShowFloatingCTA = useContext(VoicePanelStateContext).setShowFloatingCTA;
+  const muteDeafenIconState = useMuteDeafenIconState(a0 === ParticipantTypes.USER ? a1 : void 0, a2);
+  const videoIconState = useVideoIconState(a0 === ParticipantTypes.USER ? a1 : void 0, a2);
+  const stateFromStores = useStateFromStores([RTCConnectionStore], () => RTCConnectionStore.isConnected());
+  stateFromStores2 = useStateFromStores([VoiceStateStore], () => {
+    const r1 = c22619_2 != null;
+    let r2 = null;
+    if (r1) {
+      r2 = a1 != null ? VoiceStateStore.getVoicePlatformForChannel(c22619_2, a1) : null;
+    }
+    return r2;
+  }, [r12, a1]);
+  const effectiveVolume = useMuteAwareLocalVolume(a0 === ParticipantTypes.STREAM ? a1 : void 0, MediaEngineContextTypes.STREAM).effectiveVolume;
+  const r61 = MobileAudioOutputExperiment.useConfig({
+    location: "useVoicePanelCardUserStateIcons"
+  }).showTileVolumeIndicator && effectiveVolume === 0 && a0 === ParticipantTypes.STREAM;
+  c22619_8 = r61;
+  isRTCDisconnectedUIVisible = useIsRTCDisconnectedUIVisible(r12, a1);
+  callback = useCallback(() => {
+    setShowFloatingCTA(OverrideFloatingCTA.BAD_CONNECTION);
+  }, [setShowFloatingCTA]);
+  callback2 = useCallback(() => {
+    ToastActionCreators.open({
+      key: "user-disconnected-indicator",
+      icon: () => <CircleErrorIcon size="xs" color={Module712.colors.STATUS_WARNING} />,
+      content: intl.string(t.HFwRpk)
+    });
+  }, []);
+  return useMemo(() => {
+    if (stateFromStores) {
+      if (a0 === ParticipantTypes.STREAM) {
+        const r50 = [];
+        if (c22619_8) {
+          r50.push({
+            type: c11414_8.SPEAKER_MUTE_ICON,
+            onPress: () => {
+              ToastActionCreators.open({
+                key: `${a1}-stream-status`,
+                content: intl.string(t.Q8Uzof)
+              });
+            }
+          });
+        }
+        r50.push({
+          type: c11414_8.STREAM_ICON,
+          voicePlatform: stateFromStores2
+        });
+        return r50;
+      }
+      if (a0 !== ParticipantTypes.USER) {
+        return [];
+      }
+      const r15 = [];
+      if (isRTCDisconnectedUIVisible) {
+        r15.push({
+          type: c11414_8.USER_DISCONNECTED_ICON,
+          onPress: callback2
+        });
+      }
+      if (videoIconState != null && videoIconState !== VideoIconState.VIDEO_ACTIVE) {
+        r15.push({
+          type: c11414_8.USER_VIDEO_ICON,
+          videoIconState,
+          onPress: videoIconState === VideoIconState.VIDEO_DISABLED_LOCAL_AUTO ? callback : void 0
+        });
+      }
+      if (muteDeafenIconState != null) {
+        r15.push({
+          type: c11414_8.MUTE_DEAFEN_ICON,
+          muteDeafenIconState,
+          withLeftMargin: r15.length > 0,
+          onPress: () => {
+            if (MuteDeafenIconState.DEAFENED_SERVER === muteDeafenIconState) {
+              ToastActionCreators.open({
+                key: `${a1}-status`,
+                content: intl.string(t.btxSdB)
+              });
+            } else if (MuteDeafenIconState.DEAFENED === muteDeafenIconState) {
+              ToastActionCreators.open({
+                key: `${a1}-status`,
+                content: intl.string(t.NjmiOL)
+              });
+            } else if (MuteDeafenIconState.MUTED_SERVER === muteDeafenIconState) {
+              ToastActionCreators.open({
+                key: `${a1}-status`,
+                content: intl.string(t.uLddbQ)
+              });
+            } else if (MuteDeafenIconState.MUTED_LOCAL === muteDeafenIconState) {
+              ToastActionCreators.open({
+                key: `${a1}-status`,
+                content: intl.string(t.Q8Uzof)
+              });
+            } else if (MuteDeafenIconState.MUTED === muteDeafenIconState) {
+              ToastActionCreators.open({
+                key: `${a1}-status`,
+                content: intl.string(t.tjtv3P)
+              });
+            }
+          }
+        });
+      }
+      return r15;
+    }
+    return [];
+  }, [stateFromStores, a0, videoIconState, muteDeafenIconState, isRTCDisconnectedUIVisible, stateFromStores2, callback, a1, callback2, r61]);
+};
+export { c11414_8 as VoicePanelCardUserStateIconType };

modules/voice_panel/native/hooks/useVoicePanelNavArrowPressed.tsx

@@ -0,0 +1,18 @@
+// Metro module 15929 (f15930).
+import { useContext, useCallback } from "react";
+import { VoicePanelControlsModes } from "../controls/VoicePanelControlsConstants";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+export default function useVoicePanelNavArrowPressed() {
+  const context = useContext(VoicePanelStateContext);
+  const { focused, setFocused, dismissPanel, controlsSpecs } = context;
+  return useCallback(() => {
+    let r16;
+    if (focused.get()?.id != null && controlsSpecs.get().mode !== VoicePanelControlsModes.DRAWER) {
+      setFocused(null);
+      r16 = true;
+    } else {
+      r16 = dismissPanel();
+    }
+    return r16;
+  }, [focused, controlsSpecs, dismissPanel, setFocused]);
+};

modules/voice_panel/native/hooks/useVoicePanelParticipants.tsx

@@ -0,0 +1,151 @@
+// Metro module 15909 (f15910).
+import { useState, useEffect, useContext } from "react";
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import AuthenticationStore from "../../../../stores/AuthenticationStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import RTCConnectionStore from "../../../../stores/RTCConnectionStore";
+import VoiceStateStore from "../../../../stores/VoiceStateStore";
+import SortedVoiceStateStore from "../../../../stores/views/SortedVoiceStateStore";
+import { VoicePanelCTACard, VoicePanelCardItemType } from "../../VoicePanelConstants";
+import { RTCConnectionStates } from "../../../../Constants";
+import useIsConnectedToVoiceChannel from "./useIsConnectedToVoiceChannel";
+import { useStateFromStores, useStateFromStoresArray } from "../../../../_bundle/Module589";
+import { useDesyncedChannelParticipants } from "../../../voice_calls/RTCConnectionDesyncHooks";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { useManagerSubscription } from "../card/VoicePanelCardLayoutManager";
+let c11393_14;
+const getMemoizedParticipant = function getMemoizedParticipant(item, a1) {
+  const r10 = `${item.type}-${item.id}`;
+  let r12 = a1.get(r10);
+  if (r12 == null) {
+    a1.set(r10, item);
+    r12 = item;
+  }
+  return r12;
+};
+c11393_14 = [];
+export default function useVoicePanelCards(a0, a1) {
+  let stateFromStores, desyncedChannelParticipants;
+  const id = AuthenticationStore.getId();
+  const channel = ChannelStore.getChannel(a0);
+  let r13 = channel == null ? void 0 : channel.isDM();
+  if (r13 == null) {
+    r13 = false;
+  }
+  let c22594_3 = r13;
+  const isConnectedToVoiceChannel = useIsConnectedToVoiceChannel(a0);
+  let c22594_4 = isConnectedToVoiceChannel;
+  const [state] = useState(() => new Map());
+  useEffect(() => () => state.clear(), [state]);
+  stateFromStores = useStateFromStores([RTCConnectionStore], () => RTCConnectionStore.getState() === RTCConnectionStates.RTC_CONNECTED);
+  desyncedChannelParticipants = useDesyncedChannelParticipants(a0);
+  return {
+    items: useStateFromStoresArray([ChannelRTCStore, SortedVoiceStateStore], () => {
+      let r6 = void 0;
+      if (!c22594_4) {
+        let r33 = SortedVoiceStateStore.getVoiceStatesForChannelAlt(a0, a1).map((item) => {
+          const r2 = {
+            type: VoicePanelCardItemType.PARTICIPANT,
+            id: item.user.id
+          };
+          const r17 = `${r2.type}-${r2.id}`;
+          let r19 = state.get(r17);
+          if (r19 == null) {
+            state.set(r17, r2);
+            r19 = r2;
+          }
+          return r19;
+        });
+        if (!(r33.length > 0)) {
+          r33 = c11393_14;
+        }
+        return r33;
+      }
+      let r38 = ChannelRTCStore.getVoiceParticipantsHidden(a0);
+      const r39 = [];
+      for (const item of ChannelRTCStore.getFilteredParticipants(a0)) {
+        r39.push(item);
+      }
+      if (!r38 && desyncedChannelParticipants != null) {
+        for (const desyncedChannelParticipant of desyncedChannelParticipants) {
+          r39.push(desyncedChannelParticipant);
+        }
+      }
+      let r61 = [];
+      for (const item2 of r39) {
+        const memoizedParticipant = getMemoizedParticipant({
+          type: VoicePanelCardItemType.PARTICIPANT,
+          id: item2.id
+        }, state);
+        if (c22594_3 && memoizedParticipant.id === id) {
+          r6 = memoizedParticipant;
+          continue;
+        }
+        r61.push(memoizedParticipant);
+      }
+      if (r6 != null) {
+        r61.push(r6);
+      }
+      if (c22594_3 && stateFromStores && r61.length === 1) {
+        r61.push(getMemoizedParticipant({
+          type: VoicePanelCardItemType.CTA,
+          id: VoicePanelCTACard.CALLER_DISCONNECTED
+        }, state));
+      }
+      if (r38) {
+        r38 = r39.length === 0;
+      }
+      if (r38) {
+        r61.push(getMemoizedParticipant({
+          type: VoicePanelCardItemType.CTA,
+          id: VoicePanelCTACard.NO_VIDEO_PARTICIPANTS
+        }, state));
+      }
+      if (!(r61.length > 0)) {
+        r61 = c11393_14;
+      }
+      return r61;
+    }, [isConnectedToVoiceChannel, desyncedChannelParticipants, a0, a1, state, r13, id, stateFromStores]),
+    isConnected: isConnectedToVoiceChannel
+  };
+};
+export function useChunkedParticipants(a0, a1) {
+  const id2 = AuthenticationStore.getId();
+  const layoutManager = useContext(VoicePanelStateContext).layoutManager;
+  const managerSubscription = useManagerSubscription(layoutManager);
+  const [state2] = useState(() => new Map());
+  useEffect(() => () => state2.clear(), [state2]);
+  return useStateFromStoresArray([VoiceStateStore, ChannelRTCStore], () => {
+    if (managerSubscription < 0) {
+      return c11393_14;
+    }
+    const isInChannel = VoiceStateStore.isInChannel(a0, id2);
+    let r25 = [];
+    if (!isInChannel) {
+      return r25;
+    }
+    for (const item of new Set((() => {
+      const r2 = [];
+      let start = a1.start;
+      if (start <= a1.end) {
+        do {
+          r2.push.apply(r2, [...Array.from(layoutManager.getChunk(start))]);
+          start = start + 1;
+        } while (start <= a1.end);
+      }
+      return r2;
+    })())) {
+      r25.push(getMemoizedParticipant(item, state2));
+    }
+    if (ChannelRTCStore.getVoiceParticipantsHidden(a0) && r25.length === 0) {
+      r25.push(getMemoizedParticipant({
+        type: VoicePanelCardItemType.CTA,
+        id: VoicePanelCTACard.NO_VIDEO_PARTICIPANTS
+      }, state2));
+    }
+    if (!(r25.length > 0)) {
+      r25 = c11393_14;
+    }
+    return r25;
+  }, [a0, state2, layoutManager, a1, managerSubscription, id2]);
+}

modules/voice_panel/native/pip/VoicePanelPIP.tsx

@@ -0,0 +1,574 @@
+// Metro module 15986 (f15987).
+import * as Module19 from "react";
+import { useContext, useEffect, useMemo, useCallback, useState, useRef } from "react";
+import { StyleSheet, Platform } from "react-native";
+import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
+import FramesStore from "../../../frames/FramesStore";
+import VoicePanelStore from "../../VoicePanelStore";
+import { DRAWER_SPRING_PHYSICS, VoicePanelModes, SECONDARY_PIP_TOP_MARGIN } from "../../VoicePanelConstants";
+import { VoicePanelControlsModes } from "../controls/VoicePanelControlsConstants";
+import { VoicePanelPIPModes } from "./VoicePanelPIPConstants";
+import { ActivityPanelModes } from "../../../activities/panel/ActivityPanelConstants";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { usePIPState } from "./VoicePanelPIPStateContext";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useSharedValue, useAnimatedStyle, useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
+import * as _VoicePanelPIPUtils from "./VoicePanelPIPUtils";
+import * as _Module5273 from "../../../../_bundle/Module5273";
+import { Gesture, GestureDetector } from "../../../../_bundle/Module5273";
+import updateSharedValueIfChanged_native from "../../../reanimated/utils/updateSharedValueIfChanged.native";
+import triggerIOSHaptic from "../utils/triggerIOSHaptic";
+import ExternalPip_android from "../../../external_pip/ExternalPip.android";
+import { useStateFromStoresObject } from "../../../../_bundle/Module589";
+import { getEmbeddedActivityLocationChannelId } from "../../../activities/utils/embeddedActivityLocationUtils";
+import FramesActionCreators_native from "../../../frames/FramesActionCreators.native";
+import { updateActivityPanelMode } from "../../../activities/EmbeddedActivitiesActionCreators";
+import useStateFromSharedValue from "../../../reanimated/native/useStateFromSharedValue";
+import * as _index_native from "../../../../intl/index.native";
+import { intl } from "../../../../intl/index.native";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import VoicePanelPIPContent from "./VoicePanelPIPContent";
+import VoicePanelPIPPushToTalkOverlay from "./VoicePanelPIPPushToTalkOverlay";
+import NativeView from "../../../core/native/NativeView";
+import VoicePanelSecondaryPIPContent from "./VoicePanelSecondaryPIPContent";
+import * as _TransitionGroup from "../../../../design/components/TransitionGroup/TransitionGroup";
+import { TransitionItem } from "../../../../design/components/TransitionGroup/TransitionGroup";
+let LAYOUT_PHYSICS, layoutTransition, useStyles, __initData, __initData2, __initData3, __initData4, __initData5, __initData6, __initData7, __initData8, __initData9, __initData10, __initData11, __initData12, __initData13, __initData14, __initData15, Component, renderPIPWrapper;
+const VoicePanelPIP = function VoicePanelPIP() {
+  let stateFromStoresObject;
+  let callback, currentEmbeddedActivityIsNotInCurrentChannel, hasFrame, callback2;
+  const styles2 = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const { controlsSpecs: controlsSpecs2, setMode } = context;
+  const pIPState = usePIPState();
+  const mode = pIPState.mode;
+  callback = void 0;
+  currentEmbeddedActivityIsNotInCurrentChannel = void 0;
+  hasFrame = void 0;
+  callback2 = void 0;
+  const styles = useStyles();
+  const context2 = useContext(VoicePanelStateContext);
+  const { controlsSpecs, hideControls, pipAvoidanceSpecs, safeArea, setFocused, setMode: setMode2, showControls, windowDimensions, wrapperDimensions, wrapperOffset, channelId } = context2;
+  const pIPState2 = usePIPState();
+  const sharedValue = useSharedValue({
+    x: 0,
+    y: 0,
+    absoluteX: 0,
+    absoluteY: 0,
+    active: false,
+    pressed: false
+  });
+  const sharedValue2 = useSharedValue(0);
+  useEffect(() => {
+    let c30940_0 = setTimeout(() => {
+      sharedValue2.set(1);
+    }, 200);
+    return () => {
+      clearTimeout(c30940_0);
+    };
+  }, [sharedValue2]);
+  const U = function U() {
+    const width = pIPState2.width;
+    const height = pIPState2.showSecondaryPIP ? pIPState2.containerHeight : pIPState2.height;
+    const clampedPIPPosition = _VoicePanelPIPUtils.getClampedPIPPosition({
+      pipX: wrapperDimensions.get().pipX,
+      pipY: wrapperDimensions.get().pipY,
+      width,
+      height,
+      windowDimensions: windowDimensions.get(),
+      safeArea: safeArea.get(),
+      bottomAvoidanceRegion: pipAvoidanceSpecs.get().bottom,
+      topAvoidanceRegion: pipAvoidanceSpecs.get().top,
+      positionOffset: sharedValue.get().active ? sharedValue.get() : void 0
+    });
+    const { x: r13, y: r41 } = clampedPIPPosition;
+    return {
+      width,
+      height,
+      opacity: sharedValue2.get(),
+      transform: [{
+        translateX: _spring.withSpring(r13, sharedValue.get().active ? DRAWER_SPRING_PHYSICS : LAYOUT_PHYSICS)
+      }, {
+        translateY: _spring.withSpring(r41, sharedValue.get().active ? DRAWER_SPRING_PHYSICS : LAYOUT_PHYSICS)
+      }],
+      borderRadius: _VoicePanelPIPUtils.getVoicePanelPIPBorderRadius(width, height)
+    };
+  };
+  U.__closure = {
+    pipState: pIPState2,
+    getClampedPIPPosition: _VoicePanelPIPUtils.getClampedPIPPosition,
+    wrapperDimensions,
+    windowDimensions,
+    safeArea,
+    pipAvoidanceSpecs,
+    initialGestureOffset: sharedValue,
+    opacity: sharedValue2,
+    withSpring: _spring.withSpring,
+    DRAWER_SPRING_PHYSICS,
+    LAYOUT_PHYSICS,
+    getVoicePanelPIPBorderRadius: _VoicePanelPIPUtils.getVoicePanelPIPBorderRadius
+  };
+  U.__workletHash = 6729444248940;
+  U.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(U);
+  const j = function j() {
+    const { width, height } = pIPState2;
+    return {
+      width,
+      height,
+      borderRadius: _VoicePanelPIPUtils.getVoicePanelPIPBorderRadius(width, height)
+    };
+  };
+  j.__closure = {
+    pipState: pIPState2,
+    getVoicePanelPIPBorderRadius: _VoicePanelPIPUtils.getVoicePanelPIPBorderRadius
+  };
+  j.__workletHash = 1914976453427;
+  j.__initData = __initData2;
+  const animatedStyle2 = useAnimatedStyle(j);
+  const memo = useMemo(() => [styles.pipContentWrapper, {
+    width: pIPState2.width,
+    height: pIPState2.height,
+    borderRadius: _VoicePanelPIPUtils.getVoicePanelPIPBorderRadius(pIPState2.width, pIPState2.height)
+  }, styles.inAppElevationShadow], [styles, pIPState2.width, pIPState2.height]);
+  callback = useCallback(() => {
+    const shouldCancelWhenOutside = Gesture.Pan().enabled(true).manualActivation(true).maxPointers(1).shouldCancelWhenOutside(false);
+    const c = function c(a0) {
+      sharedValue.set({
+        x: 0,
+        y: 0,
+        absoluteX: a0.absoluteX,
+        absoluteY: a0.absoluteY,
+        active: false,
+        pressed: true
+      });
+    };
+    c.__closure = {
+      initialGestureOffset: sharedValue
+    };
+    c.__workletHash = 4684366251999;
+    c.__initData = __initData9;
+    const r30 = shouldCancelWhenOutside.onBegin(c);
+    const l = function l() {
+      updateSharedValueIfChanged_native(sharedValue, {
+        pressed: false
+      });
+    };
+    l.__closure = {
+      updateSharedValueIfChanged: updateSharedValueIfChanged_native,
+      initialGestureOffset: sharedValue
+    };
+    l.__workletHash = 17295075038028;
+    l.__initData = __initData8;
+    const r37 = r30.onTouchesUp(l);
+    const u = function u(a0, a1) {
+      if (a0.state === _Module5273.State.BEGAN && !sharedValue.get().active) {
+        const r23 = a0.changedTouches[0];
+        const { absoluteY, absoluteX } = r23;
+        if (Math.abs(sharedValue.get().absoluteX - absoluteX) > 10 || Math.abs(sharedValue.get().absoluteY - absoluteY) > 10) {
+          sharedValue.set({
+            x: 0,
+            y: 0,
+            absoluteX,
+            absoluteY,
+            pressed: true,
+            active: true
+          });
+          updateSharedValueIfChanged_native(wrapperOffset, {
+            gestureActive: true,
+            x: 0,
+            y: 0
+          });
+          a1.activate();
+          _ReanimatedRexport.runOnJS(triggerIOSHaptic)();
+        }
+      }
+    };
+    u.__closure = {
+      State: _Module5273.State,
+      initialGestureOffset: sharedValue,
+      MIN_GESTURE_START: 10,
+      updateSharedValueIfChanged: updateSharedValueIfChanged_native,
+      wrapperOffset,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      triggerIOSHaptic
+    };
+    u.__workletHash = 16714994610987;
+    u.__initData = __initData7;
+    const r53 = r37.onTouchesMove(u);
+    const r55 = function({ absoluteX, absoluteY }) {
+      updateSharedValueIfChanged_native(sharedValue, {
+        x: absoluteX - sharedValue.get().absoluteX,
+        y: absoluteY - sharedValue.get().absoluteY
+      });
+    };
+    r55.__closure = {
+      updateSharedValueIfChanged: updateSharedValueIfChanged_native,
+      initialGestureOffset: sharedValue
+    };
+    r55.__workletHash = 7822444262980;
+    r55.__initData = __initData6;
+    const r61 = r53.onChange(r55);
+    const r63 = function(a0) {
+      const r20 = _VoicePanelPIPUtils.calculatePIPPositionFromVelocity({
+        velocityX: a0.velocityX,
+        velocityY: a0.velocityY,
+        absoluteX: a0.absoluteX,
+        absoluteY: a0.absoluteY,
+        windowDimensions: windowDimensions.get(),
+        safeArea: safeArea.get()
+      });
+      updateSharedValueIfChanged_native(wrapperDimensions, {
+        pipX: r20.pipX,
+        pipY: r20.pipY
+      });
+      updateSharedValueIfChanged_native(wrapperOffset, {
+        gestureActive: false
+      });
+      updateSharedValueIfChanged_native(sharedValue, {
+        active: false,
+        pressed: false
+      });
+      _ReanimatedRexport.runOnJS(ExternalPip_android.updateSourceTrackingView)();
+    };
+    r63.__closure = {
+      calculatePIPPositionFromVelocity: _VoicePanelPIPUtils.calculatePIPPositionFromVelocity,
+      windowDimensions,
+      safeArea,
+      updateSharedValueIfChanged: updateSharedValueIfChanged_native,
+      wrapperDimensions,
+      wrapperOffset,
+      initialGestureOffset: sharedValue,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      updateSourceTrackingView: ExternalPip_android.updateSourceTrackingView
+    };
+    r63.__workletHash = 1502716164658;
+    r63.__initData = __initData5;
+    const r81 = r61.onEnd(r63);
+    const r83 = function n() {
+      updateSharedValueIfChanged_native(sharedValue, {
+        active: false,
+        pressed: false
+      });
+    };
+    r83.__closure = {
+      updateSharedValueIfChanged: updateSharedValueIfChanged_native,
+      initialGestureOffset: sharedValue
+    };
+    r83.__workletHash = 4606005866023;
+    r83.__initData = __initData4;
+    const r89 = r81.onTouchesCancelled(r83);
+    const r91 = function t() {
+      updateSharedValueIfChanged_native(sharedValue, {
+        active: false,
+        pressed: false
+      });
+    };
+    r91.__closure = {
+      updateSharedValueIfChanged: updateSharedValueIfChanged_native,
+      initialGestureOffset: sharedValue
+    };
+    r91.__workletHash = 5443656412422;
+    r91.__initData = __initData3;
+    return r89.onFinalize(r91);
+  }, [sharedValue, safeArea, windowDimensions, wrapperDimensions, wrapperOffset]);
+  const memo2 = useMemo(() => {
+    const r25 = Gesture.Tap().enabled(mode !== VoicePanelPIPModes.IN_APP).maxDistance(30);
+    const r27 = function() {
+      _ReanimatedRexport.runOnJS(setFocused)(null);
+    };
+    r27.__closure = {
+      runOnJS: _ReanimatedRexport.runOnJS,
+      setFocused
+    };
+    r27.__workletHash = 10703348418884;
+    r27.__initData = __initData10;
+    const r35 = r25.onStart(r27).numberOfTaps(2);
+    const r45 = Gesture.Tap().enabled(true).maxDistance(30);
+    const r47 = function n() {
+      if (mode === VoicePanelPIPModes.IN_APP) {
+        _ReanimatedRexport.runOnJS(setMode2)(VoicePanelModes.PANEL);
+      } else if (controlsSpecs.get().mode === VoicePanelControlsModes.HIDDEN) {
+        _ReanimatedRexport.runOnJS(showControls)();
+      } else {
+        _ReanimatedRexport.runOnJS(hideControls)();
+      }
+    };
+    r47.__closure = {
+      pipMode: mode,
+      VoicePanelPIPModes,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      setMode: setMode2,
+      VoicePanelModes,
+      controlsSpecs,
+      VoicePanelControlsModes,
+      showControls,
+      hideControls
+    };
+    r47.__workletHash = 9532493963151;
+    r47.__initData = __initData11;
+    return Gesture.Exclusive(r35, r45.onStart(r47), callback());
+  }, [controlsSpecs, hideControls, setFocused, showControls, mode, setMode2, callback]);
+  const stateFromStoresObject2 = useStateFromStoresObject([EmbeddedActivitiesStore, FramesStore], () => ({
+    currentEmbeddedActivityIsNotInCurrentChannel: getEmbeddedActivityLocationChannelId(EmbeddedActivitiesStore.getCurrentEmbeddedActivity()?.location) !== channelId,
+    hasFrame: FramesStore.getConnectedFrame() != null
+  }));
+  currentEmbeddedActivityIsNotInCurrentChannel = stateFromStoresObject2.currentEmbeddedActivityIsNotInCurrentChannel;
+  hasFrame = stateFromStoresObject2.hasFrame;
+  callback2 = useCallback(() => {
+    if (currentEmbeddedActivityIsNotInCurrentChannel) {
+      setMode2(VoicePanelModes.PIP);
+      setFocused(null);
+    }
+    if (hasFrame) {
+      FramesActionCreators_native.updateFramePanelMode(ActivityPanelModes.PANEL);
+    } else {
+      updateActivityPanelMode(ActivityPanelModes.PANEL);
+    }
+  }, [currentEmbeddedActivityIsNotInCurrentChannel, hasFrame, setMode2, setFocused]);
+  const memo3 = useMemo(() => {
+    const r7 = Gesture.Tap().maxDistance(30);
+    const r19 = function t() {
+      _ReanimatedRexport.runOnJS(callback2)();
+    };
+    r19.__closure = {
+      runOnJS: _ReanimatedRexport.runOnJS,
+      handleSecondaryPIPTap: callback2
+    };
+    r19.__workletHash = 8361527940381;
+    r19.__initData = __initData12;
+    return Gesture.Exclusive(r7.onStart(r19), callback());
+  }, [callback, callback2]);
+  let pushToTalk = useStateFromSharedValue(controlsSpecs2).pushToTalk;
+  const [state, setState] = useState(pIPState.mode != null);
+  useEffect(() => {
+    if (!(pIPState.mode == null || state)) {
+      setState(true);
+    }
+  }, [pIPState.mode, state]);
+  let r139 = pIPState.mode != null || state;
+  stateFromStoresObject = useStateFromStoresObject([FramesStore], () => FramesStore.getConnectedFrame() != null);
+  const Z = () => ({
+    borderRadius: _VoicePanelPIPUtils.getVoicePanelPIPBorderRadius(pIPState.width, pIPState.height)
+  });
+  Z.__closure = {
+    getVoicePanelPIPBorderRadius: _VoicePanelPIPUtils.getVoicePanelPIPBorderRadius,
+    pipState: pIPState
+  };
+  Z.__workletHash = 9598016909682;
+  Z.__initData = __initData13;
+  const animatedStyle3 = useAnimatedStyle(Z);
+  const memo4 = useMemo(() => ({
+    accessible: true,
+    accessibilityLabel: intl.string(_index_native.t.oN8bqe),
+    accessibilityRole: "button",
+    accessibilityActions: [{
+      name: "activate"
+    }],
+    onAccessibilityAction: () => {
+      setMode(VoicePanelModes.PANEL);
+    }
+  }), [setMode]);
+  const memo5 = useMemo(() => ({
+    accessible: true,
+    accessibilityLabel: intl.string(_index_native.t["3ejJer"]),
+    accessibilityActions: [{
+      name: "activate"
+    }],
+    onAccessibilityAction: () => {
+      if (stateFromStoresObject) {
+        FramesActionCreators_native.updateFramePanelMode(ActivityPanelModes.PANEL);
+      } else {
+        updateActivityPanelMode(ActivityPanelModes.PANEL);
+      }
+    }
+  }), [stateFromStoresObject]);
+  const r167 = VoicePanelStore((a0) => a0.isActivityFocused);
+  if (pushToTalk) {
+    pushToTalk = pIPState.mode !== VoicePanelPIPModes.IN_PANEL || r167;
+  }
+  if (r139) {
+    r139 = <ReanimatedNativeView style={[styles2.pipContentWrapper, styles2.inAppElevationShadow, animatedStyle2]} pointerEvents="box-none" layout={layoutTransition} {...memo4}>
+      <GestureDetector gesture={memo2}>
+        <ReanimatedNativeView style={[styles2.pipMask, animatedStyle3]} layout={layoutTransition}>
+          <VoicePanelPIPContent />
+        </ReanimatedNativeView>
+      </GestureDetector>
+      {pushToTalk ? <VoicePanelPIPPushToTalkOverlay /> : null}
+    </ReanimatedNativeView>;
+  }
+  return <ReanimatedNativeView pointerEvents="box-none" style={[styles2.multiPIPContainer, animatedStyle]} layout={layoutTransition}>
+    {r139}
+    {pIPState.showSecondaryPIP && <NativeView style={memo} {...memo5}>
+      <ReanimatedNativeView style={[styles2.pipMask, animatedStyle3]}>
+        <GestureDetector gesture={memo3}>
+          <NativeView style={StyleSheet.absoluteFill}>
+            <VoicePanelSecondaryPIPContent />
+          </NativeView>
+        </GestureDetector>
+      </ReanimatedNativeView>
+    </NativeView>}
+  </ReanimatedNativeView>;
+};
+renderPIPWrapper = function renderPIPWrapper(a0, a1, a2, a3) {
+  return <Component key={a0} pipMode={a1.pipMode} transitionState={a2} transitionCleanUp={a3} />;
+};
+Platform;
+LAYOUT_PHYSICS = {
+  mass: 0.3,
+  damping: 80,
+  stiffness: 150
+};
+const layoutTransition2 = function layoutTransition(a0) {
+  return {
+    animations: {
+      originX: _spring.withSpring(a0.targetOriginX, LAYOUT_PHYSICS),
+      originY: _spring.withSpring(a0.targetOriginY, LAYOUT_PHYSICS),
+      width: _spring.withSpring(a0.targetWidth, LAYOUT_PHYSICS),
+      height: _spring.withSpring(a0.targetHeight, LAYOUT_PHYSICS)
+    },
+    initialValues: {
+      originX: a0.currentOriginX,
+      originY: a0.currentOriginY,
+      width: a0.currentWidth,
+      height: a0.currentHeight
+    }
+  };
+};
+layoutTransition2.__closure = {
+  withSpring: _spring.withSpring,
+  LAYOUT_PHYSICS
+};
+layoutTransition2.__workletHash = 9346092352642;
+layoutTransition2.__initData = {
+  code: "function layoutTransition_VoicePanelPIPTsx1(values){const{withSpring,LAYOUT_PHYSICS}=this.__closure;return{animations:{originX:withSpring(values.targetOriginX,LAYOUT_PHYSICS),originY:withSpring(values.targetOriginY,LAYOUT_PHYSICS),width:withSpring(values.targetWidth,LAYOUT_PHYSICS),height:withSpring(values.targetHeight,LAYOUT_PHYSICS)},initialValues:{originX:values.currentOriginX,originY:values.currentOriginY,width:values.currentWidth,height:values.currentHeight}};}"
+};
+layoutTransition = layoutTransition2;
+useStyles = createStyles({
+  pipContentWrapper: {
+    backgroundColor: "black"
+  },
+  inAppElevationShadow: {},
+  pipMask: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: "hidden"
+  },
+  multiPIPContainer: {
+    position: "absolute",
+    zIndex: 10,
+    flexDirection: "column",
+    alignItems: "center",
+    gap: SECONDARY_PIP_TOP_MARGIN
+  }
+});
+__initData = {
+  code: "function VoicePanelPIPTsx2(){const{pipState,getClampedPIPPosition,wrapperDimensions,windowDimensions,safeArea,pipAvoidanceSpecs,initialGestureOffset,opacity,withSpring,DRAWER_SPRING_PHYSICS,LAYOUT_PHYSICS,getVoicePanelPIPBorderRadius}=this.__closure;const width=pipState.width;const height=!pipState.showSecondaryPIP?pipState.height:pipState.containerHeight;const{x:x,y:y}=getClampedPIPPosition({pipX:wrapperDimensions.get().pipX,pipY:wrapperDimensions.get().pipY,width:width,height:height,windowDimensions:windowDimensions.get(),safeArea:safeArea.get(),bottomAvoidanceRegion:pipAvoidanceSpecs.get().bottom,topAvoidanceRegion:pipAvoidanceSpecs.get().top,positionOffset:initialGestureOffset.get().active?initialGestureOffset.get():undefined});return{width:width,height:height,opacity:opacity.get(),transform:[{translateX:withSpring(x,initialGestureOffset.get().active?DRAWER_SPRING_PHYSICS:LAYOUT_PHYSICS)},{translateY:withSpring(y,initialGestureOffset.get().active?DRAWER_SPRING_PHYSICS:LAYOUT_PHYSICS)}],borderRadius:getVoicePanelPIPBorderRadius(width,height)};}"
+};
+__initData2 = {
+  code: "function VoicePanelPIPTsx3(){const{pipState,getVoicePanelPIPBorderRadius}=this.__closure;const{width:width,height:height}=pipState;return{width:width,height:height,borderRadius:getVoicePanelPIPBorderRadius(width,height)};}"
+};
+__initData3 = {
+  code: "function VoicePanelPIPTsx4(){const{updateSharedValueIfChanged,initialGestureOffset}=this.__closure;updateSharedValueIfChanged(initialGestureOffset,{active:false,pressed:false});}"
+};
+__initData4 = {
+  code: "function VoicePanelPIPTsx5(){const{updateSharedValueIfChanged,initialGestureOffset}=this.__closure;updateSharedValueIfChanged(initialGestureOffset,{active:false,pressed:false});}"
+};
+__initData5 = {
+  code: "function VoicePanelPIPTsx6({velocityX:velocityX,velocityY:velocityY,absoluteX:absoluteX,absoluteY:absoluteY}){const{calculatePIPPositionFromVelocity,windowDimensions,safeArea,updateSharedValueIfChanged,wrapperDimensions,wrapperOffset,initialGestureOffset,runOnJS,updateSourceTrackingView}=this.__closure;const{pipX:pipX,pipY:pipY}=calculatePIPPositionFromVelocity({velocityX:velocityX,velocityY:velocityY,absoluteX:absoluteX,absoluteY:absoluteY,windowDimensions:windowDimensions.get(),safeArea:safeArea.get()});updateSharedValueIfChanged(wrapperDimensions,{pipX:pipX,pipY:pipY});updateSharedValueIfChanged(wrapperOffset,{gestureActive:false});updateSharedValueIfChanged(initialGestureOffset,{active:false,pressed:false});runOnJS(updateSourceTrackingView)();}"
+};
+__initData6 = {
+  code: "function VoicePanelPIPTsx7({absoluteX:absoluteX,absoluteY:absoluteY}){const{updateSharedValueIfChanged,initialGestureOffset}=this.__closure;updateSharedValueIfChanged(initialGestureOffset,{x:absoluteX-initialGestureOffset.get().absoluteX,y:absoluteY-initialGestureOffset.get().absoluteY});}"
+};
+__initData7 = {
+  code: "function VoicePanelPIPTsx8(event,manager){const{State,initialGestureOffset,MIN_GESTURE_START,updateSharedValueIfChanged,wrapperOffset,runOnJS,triggerIOSHaptic}=this.__closure;if(event.state!==State.BEGAN||initialGestureOffset.get().active)return;const{absoluteY:absoluteY,absoluteX:absoluteX}=event.changedTouches[0];if(Math.abs(initialGestureOffset.get().absoluteX-absoluteX)>MIN_GESTURE_START||Math.abs(initialGestureOffset.get().absoluteY-absoluteY)>MIN_GESTURE_START){initialGestureOffset.set({x:0,y:0,absoluteX:absoluteX,absoluteY:absoluteY,pressed:true,active:true});updateSharedValueIfChanged(wrapperOffset,{gestureActive:true,x:0,y:0});manager.activate();runOnJS(triggerIOSHaptic)();}}"
+};
+__initData8 = {
+  code: "function VoicePanelPIPTsx9(){const{updateSharedValueIfChanged,initialGestureOffset}=this.__closure;updateSharedValueIfChanged(initialGestureOffset,{pressed:false});}"
+};
+__initData9 = {
+  code: "function VoicePanelPIPTsx10({absoluteX:absoluteX,absoluteY:absoluteY}){const{initialGestureOffset}=this.__closure;initialGestureOffset.set({x:0,y:0,absoluteX:absoluteX,absoluteY:absoluteY,active:false,pressed:true});}"
+};
+__initData10 = {
+  code: "function VoicePanelPIPTsx11(){const{runOnJS,setFocused}=this.__closure;runOnJS(setFocused)(null);}"
+};
+__initData11 = {
+  code: "function VoicePanelPIPTsx12(){const{pipMode,VoicePanelPIPModes,runOnJS,setMode,VoicePanelModes,controlsSpecs,VoicePanelControlsModes,showControls,hideControls}=this.__closure;if(pipMode===VoicePanelPIPModes.IN_APP){runOnJS(setMode)(VoicePanelModes.PANEL);}else{if(controlsSpecs.get().mode===VoicePanelControlsModes.HIDDEN){runOnJS(showControls)();}else{runOnJS(hideControls)();}}}"
+};
+__initData12 = {
+  code: "function VoicePanelPIPTsx13(){const{runOnJS,handleSecondaryPIPTap}=this.__closure;runOnJS(handleSecondaryPIPTap)();}"
+};
+__initData13 = {
+  code: "function VoicePanelPIPTsx14(){const{getVoicePanelPIPBorderRadius,pipState}=this.__closure;return{borderRadius:getVoicePanelPIPBorderRadius(pipState.width,pipState.height)};}"
+};
+__initData14 = {
+  code: "function VoicePanelPIPTsx15(){const{transitionState,TransitionStates,panelCardStillInPIP}=this.__closure;return transitionState===TransitionStates.YEETED&&!panelCardStillInPIP.get();}"
+};
+__initData15 = {
+  code: "function VoicePanelPIPTsx16(ready,prev){const{runOnJS,fireCleanup}=this.__closure;if(ready&&prev!==ready){runOnJS(fireCleanup)();}}"
+};
+Component = Module19.memo(function({ pipMode, transitionState, transitionCleanUp }) {
+  let ref, callback3, panelCardStillInPIP;
+  ref = void 0;
+  callback3 = void 0;
+  panelCardStillInPIP = void 0;
+  const [state, setState2] = useState(pipMode === VoicePanelPIPModes.IN_PANEL || transitionState === _TransitionGroup.TransitionStates.MOUNTED);
+  useEffect(() => {
+    let c28197_0 = setTimeout(() => setState2(true), 400);
+    return () => {
+      clearTimeout(c28197_0);
+    };
+  }, []);
+  ref = useRef(null);
+  callback3 = useCallback(() => {
+    if (ref.current != null) {
+      clearTimeout(ref.current);
+      ref.current = null;
+    }
+    transitionCleanUp();
+  }, [transitionCleanUp]);
+  useEffect(() => {
+    if (transitionState === _TransitionGroup.TransitionStates.YEETED) {
+      ref.current = setTimeout(callback3, 500);
+      return () => {
+        if (ref.current != null) {
+          clearTimeout(ref.current);
+          ref.current = null;
+        }
+      };
+    }
+  }, [transitionState, callback3]);
+  panelCardStillInPIP = useContext(VoicePanelStateContext).panelCardStillInPIP;
+  const I = () => transitionState === _TransitionGroup.TransitionStates.YEETED && !panelCardStillInPIP.get();
+  I.__closure = {
+    transitionState,
+    TransitionStates: _TransitionGroup.TransitionStates,
+    panelCardStillInPIP
+  };
+  I.__workletHash = 10653972388666;
+  I.__initData = __initData14;
+  const f = function f(a0, a1) {
+    if (a0 ? a1 !== a0 : a0) {
+      _ReanimatedRexport.runOnJS(callback3)();
+    }
+  };
+  f.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    fireCleanup: callback3
+  };
+  f.__workletHash = 1599147342710;
+  f.__initData = __initData15;
+  useAnimatedReaction(I, f);
+  return state ? <VoicePanelPIP /> : null;
+});
+const r89 = Module19.memo(function VoicePanelPIPWrapper() {
+  const pIPState3 = usePIPState();
+  const { mode: mode2, showSecondaryPIP } = pIPState3;
+  return <TransitionItem item={mode2 == null ? showSecondaryPIP ? {
+    pipMode: mode2
+  } : void 0 : {
+    pipMode: mode2
+  }} renderItem={renderPIPWrapper} />;
+});
+export default r89;

modules/voice_panel/native/pip/VoicePanelPIPConstants.tsx

@@ -0,0 +1,20 @@
+// Metro module 15914 (f15915).
+const r9 = {
+  IN_APP: "IN_APP",
+  IN_PANEL: "IN_PANEL"
+};
+export { r9 as VoicePanelPIPModes };
+export const PIP_OFFSET_BOTTOM = 44;
+export const PIPReferenceDimensions = {
+  width: 200,
+  height: 200
+};
+export const SquarePIPReferenceDimensions = {
+  width: 120,
+  height: 120
+};
+export const SquareActivityPIPReferenceDimensions = {
+  width: 96,
+  height: 96
+};
+export const DEFAULT_PIP_POSITION_OFFSET = 72;

modules/voice_panel/native/pip/VoicePanelPIPContent.tsx

@@ -0,0 +1,626 @@
+// Metro module 15987 (f15988).
+import * as Module19 from "react";
+import { useContext, useEffect, useMemo, useState, useCallback, useLayoutEffect, useRef } from "react";
+import { StyleSheet, PixelRatio } from "react-native";
+import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import ChannelCallLifecycleStore from "../../../video_calls/native/ChannelCallLifecycleStore";
+import ApplicationStreamingStore from "../../../../stores/ApplicationStreamingStore";
+import AuthenticationStore from "../../../../stores/AuthenticationStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import UserStore from "../../../../stores/UserStore";
+import { VoicePanelModes } from "../../VoicePanelConstants";
+import { VoicePanelPIPModes } from "./VoicePanelPIPConstants";
+import { ComponentActions, ApplicationStreamStates } from "../../../../Constants";
+import { OrientationLockState, ActivityLayoutMode } from "../../../activities/Constants";
+import { ParticipantTypes, isActivityParticipant } from "../../../calls/CallConstants";
+import { jsx } from "react/jsx-runtime";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { useSetHasActiveVideoOutputSink } from "../controller/VoicePanelStreamOutputSinkStack";
+import Module10566 from "../../../../_bundle/Module10566";
+import { ComponentDispatch } from "../../../../utils/ComponentDispatchUtils";
+import { TransitionStates, TransitionGroup } from "../../../../design/components/TransitionGroup/TransitionGroup";
+import { usePIPState } from "./VoicePanelPIPStateContext";
+import NativeView from "../../../core/native/NativeView";
+import { getVoicePanelPIPBorderRadius } from "./VoicePanelPIPUtils";
+import { useStateFromStores, useStateFromStoresObject } from "../../../../_bundle/defaultAreStatesEqual";
+import { getWindowDimensions } from "../../../screen/useWindowDimensions.native";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useAnimatedReaction, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import EmbeddedActivityView from "../../../activities/native/EmbeddedActivityView";
+import { useDominantColorFromImage, getCachedSourceFromURI } from "../card/DominantColorUtils";
+import { useSurfaceDirectRendererExperiment } from "../../../video_calls/native/SurfaceDirectRendererExperiment";
+import { useCanRenderParticipantVideo } from "../../../video_calls/participantHasVideo";
+import { Avatar, AvatarSizes, Icon } from "../../../../design/void/native";
+import Module8346 from "../../../../_bundle/Module8346";
+import { useTargetDimensionsSubscription } from "../card/VoicePanelCardLayoutManager";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import { updateVideoSize } from "../../../media/VideoActionCreators";
+import ExternalPip_android from "../../../external_pip/ExternalPip.android";
+import { StreamEnded } from "../../../../design/components/Illustration/native/redesign/generated/StreamEnded";
+import { StreamFailed } from "../../../../design/components/Illustration/native/redesign/generated/StreamFailed";
+function $mk98403($env) {
+  return () => {
+    const r7 = $env;
+    let env28198 = {
+      $parent: $env
+    };
+    const handleVideoReady = function handleVideoReady() {
+      clearTimeout(env28198[0]);
+      setTimeout($mk117136(env28198.$parent), 17);
+    };
+    env28198[1] = handleVideoReady;
+    const r9 = r7[0];
+    const r3 = $env.$parent;
+    const r5 = r3[0];
+    const r4 = r3[2];
+    if (r9 === r5(r4[22]).TransitionStates.YEETED) {
+      env28198[0] = setTimeout($mk112446(r7), 500);
+      r5(r4[21]).ComponentDispatch.subscribe(r3[16].VOICE_PANEL_PIP_CONTENT_READY, handleVideoReady);
+      return () => {
+        const r2 = env28198.$parent.$parent;
+        (0, r2[0])(r2[2][21]).ComponentDispatch.unsubscribe(r2[16].VOICE_PANEL_PIP_CONTENT_READY, env28198[1]);
+        clearTimeout(env28198[0]);
+      };
+    }
+  };
+}
+function $mk112446($env) {
+  return () => {
+    const r3 = $env[1];
+    return r3 == null ? void 0 : r3();
+  };
+}
+function $mk117136($env) {
+  return () => {
+    const r3 = $env[1];
+    return r3 == null ? void 0 : r3();
+  };
+}
+let markContentReady, InnerStroke, ActivityInVoice, User, AnimatedVideoWrapper, Stream, getFocusedKey, renderFocusedParticipant, areParticipantsEqual, useStyles, c11456_27, c11456_28, c11456_30, c11456_31, c11456_32, c11456_33, c11456_35, EmptyPIP;
+let env11456 = {};
+const VideoStream = function VideoStream(props) {
+  const streamOutputSinkStack = useContext(VoicePanelStateContext).streamOutputSinkStack;
+  const streamId = props.streamId;
+  const setHasActiveVideoOutputSink = useSetHasActiveVideoOutputSink(streamOutputSinkStack);
+  useEffect(() => {
+    if (streamId != null) {
+      setHasActiveVideoOutputSink(streamId, true);
+      return () => {
+        setHasActiveVideoOutputSink(streamId, false);
+      };
+    }
+  }, [setHasActiveVideoOutputSink, streamId]);
+  return <Module10566 {...props} />;
+};
+markContentReady = function markContentReady() {
+  ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_PIP_CONTENT_READY);
+};
+InnerStroke = function InnerStroke({ style }) {
+  const pIPState = usePIPState();
+  const { width, height } = pIPState;
+  const styles = useStyles();
+  let c22686_3 = styles;
+  return (0, jsx)(NativeView, {
+    style: useMemo(() => [c22686_3.innerStroke, {
+      borderRadius: getVoicePanelPIPBorderRadius(width, height) + 1
+    }, style], [width, height, styles.innerStroke, style])
+  });
+};
+ActivityInVoice = function ActivityInVoice(props) {
+  let state, setState, stateFromStores, stateFromStores2, callback, c22687_9;
+  let env22688;
+  const { participantId, transitionState: transitionState2, transitionCleanUp: transitionCleanUp2 } = props;
+  state = void 0;
+  setState = void 0;
+  stateFromStores = void 0;
+  stateFromStores2 = void 0;
+  callback = void 0;
+  c22687_9 = void 0;
+  const styles = useStyles();
+  const r22 = env22688 = {
+    $parent: env11456
+  };
+  env22688[0] = transitionState2;
+  env22688[1] = transitionCleanUp2;
+  useEffect($mk98403(r22), [transitionState2, transitionCleanUp2]);
+  const r13 = transitionState2 === TransitionStates.YEETED ? styles.onTop : styles.onBottom;
+  const context = useContext(VoicePanelStateContext);
+  const { channelId, layoutManager, windowDimensions } = context;
+  const stateFromStores3 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  [state, setState] = useState(transitionState2 === TransitionStates.MOUNTED);
+  stateFromStores = useStateFromStores([ChannelRTCStore], () => {
+    const participant = ChannelRTCStore.getParticipant(channelId, participantId);
+    return participant != null ? participant.type === ParticipantTypes.ACTIVITY ? participant.applicationId : participantId : participantId;
+  }, [channelId, participantId]);
+  stateFromStores2 = useStateFromStores([EmbeddedActivitiesStore], () => EmbeddedActivitiesStore.getPipOrientationLockStateForApp(stateFromStores), [stateFromStores]);
+  callback = useCallback((a0) => {
+    L11: {
+      const r3 = a0.width > a0.height;
+      if (OrientationLockState.LANDSCAPE === stateFromStores2) {
+        layoutManager.setTargetDimensions(stateFromStores, 16, 9);
+      } else if (OrientationLockState.PORTRAIT === stateFromStores2) {
+        layoutManager.setTargetDimensions(stateFromStores, 9, 16);
+      } else {
+        if (OrientationLockState.UNLOCKED !== stateFromStores2 && stateFromStores2 !== null) {
+          break L11;
+        }
+        layoutManager.setTargetDimensions(stateFromStores, r3 ? 16 : 9, r3 ? 9 : 16);
+      }
+    }
+  }, [layoutManager, stateFromStores2, stateFromStores]);
+  useLayoutEffect(() => {
+    const windowDimensions2 = getWindowDimensions();
+    callback({
+      ...windowDimensions2,
+      landscape: windowDimensions2.width > windowDimensions2.height
+    });
+  }, [callback]);
+  const r76 = () => windowDimensions.get();
+  r76.__closure = {
+    windowDimensions
+  };
+  r76.__workletHash = 20962628184;
+  r76.__initData = c11456_27;
+  const r80 = function(a0, a1) {
+    if (a0 !== a1) {
+      _ReanimatedRexport.runOnJS(callback)(a0);
+    }
+  };
+  r80.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    handleTargetAspectRatioParams: callback
+  };
+  r80.__workletHash = 10001753822389;
+  r80.__initData = c11456_28;
+  useAnimatedReaction(r76, r80);
+  let r88 = null;
+  const r89 = stateFromStores3 != null;
+  c22687_9 = r89;
+  useEffect(() => {
+    if (!state && c22687_9) {
+      ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_PIP_CONTENT_READY);
+    } else if (state) {
+      let c28199_0 = setTimeout(() => {
+        setState(false);
+        ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_PIP_CONTENT_READY);
+      }, 500);
+      return () => {
+        clearTimeout(c28199_0);
+      };
+    }
+  }, [r89, state]);
+  if (!state) {
+    r88 = r89 ? <NativeView style={[styles.activity, r13]}>
+      <EmbeddedActivityView channel={stateFromStores3} layoutMode={ActivityLayoutMode.PIP} />
+      <InnerStroke />
+    </NativeView> : (0, jsx)(User, {
+      participantId: AuthenticationStore.getId()
+    });
+  }
+  return r88;
+};
+User = function User(props) {
+  let props2;
+  let dominantColorFromImage, setState2, callback2, c22689_10;
+  let env22690;
+  const { participantId: participantId2, transitionState: transitionState2, transitionCleanUp: transitionCleanUp2 } = props;
+  dominantColorFromImage = void 0;
+  setState2 = void 0;
+  callback2 = void 0;
+  c22689_10 = void 0;
+  const styles = useStyles();
+  let c22689_1 = styles;
+  const r32 = env22690 = {
+    $parent: env11456
+  };
+  env22690[0] = transitionState2;
+  env22690[1] = transitionCleanUp2;
+  useEffect($mk98403(r32), [transitionState2, transitionCleanUp2]);
+  const onTop = transitionState2 === TransitionStates.YEETED ? styles.onTop : styles.onBottom;
+  const context = useContext(VoicePanelStateContext);
+  const { channelId: channelId2, guildId, focused, mode, layoutManager: layoutManager2 } = context;
+  const stateFromStores3 = useStateFromStores([ChannelRTCStore], () => {
+    let r8 = ChannelRTCStore.getParticipant(channelId2, participantId2);
+    if (r8 == null) {
+      r8 = void 0;
+    }
+    return r8?.type === ParticipantTypes.USER ? r8 : void 0;
+  });
+  let r29 = stateFromStores3?.user;
+  if (r29 == null) {
+    r29 = UserStore.getCurrentUser();
+  }
+  dominantColorFromImage = useDominantColorFromImage(r29 == null ? void 0 : r29.getAvatarURL(guildId, 80, false));
+  const memo = useMemo(() => [c22689_1.user, onTop, {
+    backgroundColor: dominantColorFromImage
+  }], [styles, onTop, dominantColorFromImage]);
+  let state;
+  [state, setState2] = useState(false);
+  const surfaceDirectRendererExperiment = useSurfaceDirectRendererExperiment(stateFromStores3 == null ? void 0 : stateFromStores3.user?.id, {
+    location: "VoicePanelPIPContent"
+  });
+  callback2 = useCallback((a0, a1) => {
+    const r6 = a0 != null ? ChannelRTCStore.getParticipant(channelId2, a0) : void 0;
+    setState2(r6 != null && (0, isActivityParticipant)(r6) && a1 === VoicePanelModes.PANEL);
+  }, [channelId2]);
+  const r84 = () => focused.get()?.id;
+  r84.__closure = {
+    focused
+  };
+  r84.__workletHash = 3980010676581;
+  r84.__initData = c11456_30;
+  const c = function c(a0, a1) {
+    if (a0 !== a1) {
+      _ReanimatedRexport.runOnJS(callback2)(a0, mode.get());
+    }
+  };
+  c.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    updateIsActivityFocused: callback2,
+    mode
+  };
+  c.__workletHash = 5971237403457;
+  c.__initData = c11456_31;
+  useAnimatedReaction(r84, c);
+  const I = () => mode.get();
+  I.__closure = {
+    mode
+  };
+  I.__workletHash = 8288240256860;
+  I.__initData = c11456_32;
+  const S = function S(a0, a1) {
+    if (a0 !== a1) {
+      _ReanimatedRexport.runOnJS(callback2)(focused.get()?.id, a0);
+    }
+  };
+  S.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    updateIsActivityFocused: callback2,
+    focused
+  };
+  S.__workletHash = 12552370107483;
+  S.__initData = c11456_33;
+  useAnimatedReaction(I, S);
+  const stateFromStoresObject = useStateFromStoresObject([ChannelCallLifecycleStore], () => ({
+    isReactingToThermalState: ChannelCallLifecycleStore.isReactingToThermalState(),
+    consumedRequestToRespondToSeriousThermalState: ChannelCallLifecycleStore.consumedRequestToRespondToSeriousThermalState()
+  }));
+  const { isReactingToThermalState, consumedRequestToRespondToSeriousThermalState } = stateFromStoresObject;
+  const callback4 = useCallback(({ nativeEvent }) => {
+    layoutManager2.setTargetDimensions(participantId2, nativeEvent.width, nativeEvent.height);
+  }, [layoutManager2, participantId2]);
+  const r125 = useCanRenderParticipantVideo(stateFromStores3) && !(state && isReactingToThermalState);
+  c22689_10 = r125;
+  useEffect(() => {
+    if (!c22689_10) {
+      ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_PIP_CONTENT_READY);
+    }
+  }, [r125]);
+  const r134 = {
+    style: null,
+    children: null
+  };
+  if (r125) {
+    r134.style = [styles.blackBackground, styles.user];
+    r134.children = [<AnimatedVideoWrapper style={onTop} participantId={participantId2}>
+      <VideoStream useSurfaceDirectRenderer={surfaceDirectRendererExperiment} streamId={stateFromStores3.streamId} style={[styles.video, void 0]} onSize={callback4} onReady={markContentReady} />
+    </AnimatedVideoWrapper>, <InnerStroke />];
+    props2 = r134;
+  } else {
+    r134.style = memo;
+    r134.children = [<NativeView style={styles.avatarWrapper}>
+      {r29 != null ? <Avatar source={getCachedSourceFromURI(r29.getAvatarURL(guildId, 80, false))} size={state ? AvatarSizes.LARGE : AvatarSizes.XLARGE} avatarDecoration={stateFromStores3?.userAvatarDecoration} /> : null}
+    </NativeView>, <InnerStroke style={styles.userOpacity} />, state ? consumedRequestToRespondToSeriousThermalState ? <NativeView style={styles.thermalAlertIconContainer}>
+      <Icon style={styles.thermalAlertIcon} source={Module8346} color={styles.thermalAlertIcon.color} />
+    </NativeView> : null : null];
+    props2 = r134;
+  }
+  return <NativeView {...props2} />;
+};
+AnimatedVideoWrapper = function AnimatedVideoWrapper({ participantId: participantId4, style: style2, children }) {
+  const targetDimensionsSubscription = useTargetDimensionsSubscription(participantId4, useContext(VoicePanelStateContext).layoutManager);
+  const u = function u() {
+    const r8 = targetDimensionsSubscription.get();
+    const { width: width3, height: height3 } = r8;
+    const r0 = height3 < width3;
+    let width4 = "100%";
+    let height4 = "auto";
+    if (r0) {
+      width4 = "auto";
+      height4 = "100%";
+    }
+    return {
+      position: "absolute",
+      aspectRatio: width3 / height3,
+      width: width4,
+      height: height4
+    };
+  };
+  u.__closure = {
+    targetDimensions: targetDimensionsSubscription
+  };
+  u.__workletHash = 10377220209728;
+  u.__initData = c11456_35;
+  return (0, jsx)(ReanimatedNativeView, {
+    style: [style2, useAnimatedStyle(u)],
+    children
+  });
+};
+Stream = function Stream(props) {
+  let streamId2, c22692_5, ref, ref2, callback3, c22692_9;
+  let env22693;
+  const { participantId: participantId3, transitionState: transitionState2, transitionCleanUp: transitionCleanUp2 } = props;
+  streamId2 = void 0;
+  c22692_5 = void 0;
+  ref = void 0;
+  ref2 = void 0;
+  callback3 = void 0;
+  c22692_9 = void 0;
+  const styles = useStyles();
+  const mode2 = usePIPState().mode;
+  const r25 = env22693 = {
+    $parent: env11456
+  };
+  env22693[0] = transitionState2;
+  env22693[1] = transitionCleanUp2;
+  useEffect($mk98403(r25), [transitionState2, transitionCleanUp2]);
+  const style2 = transitionState2 === TransitionStates.YEETED ? styles.onTop : styles.onBottom;
+  const context = useContext(VoicePanelStateContext);
+  const { channelId: channelId3, layoutManager: layoutManager3 } = context;
+  const stateFromStoresObject = useStateFromStoresObject([ChannelRTCStore], () => {
+    const participant = ChannelRTCStore.getParticipant(channelId3, participantId3);
+    const r0 = participant != null && participant.type === ParticipantTypes.STREAM;
+    return {
+      streamId: r0 ? participant.streamId : void 0,
+      userId: r0 ? participant.user?.id : void 0
+    };
+  });
+  streamId2 = stateFromStoresObject.streamId;
+  const surfaceDirectRendererExperiment = useSurfaceDirectRendererExperiment(stateFromStoresObject.userId, {
+    location: "VoicePanelPIPContent.Stream"
+  });
+  const stateFromStores3 = useStateFromStores([ApplicationStreamingStore], () => ApplicationStreamingStore.getActiveStreamForStreamKey(participantId3)?.state);
+  const callback4 = useCallback(({ nativeEvent }) => {
+    layoutManager3.setTargetDimensions(participantId3, nativeEvent.width, nativeEvent.height);
+  }, [layoutManager3, participantId3]);
+  const r19 = PixelRatio.get();
+  c22692_5 = r19;
+  ref = useRef(0);
+  ref2 = useRef(0);
+  const callback5 = useCallback((a0) => {
+    if (streamId2 != null) {
+      const layout = a0.nativeEvent.layout;
+      const { width: width3, height: height3 } = layout;
+      if (!(width3 === ref.current && height3 === ref2.current)) {
+        ref.current = width3;
+        ref2.current = height3;
+        if (mode2 === VoicePanelPIPModes.IN_APP) {
+          updateVideoSize(streamId2, {
+            width: width3 * c22692_5,
+            height: height3 * c22692_5
+          }, 1);
+        }
+      }
+    }
+  }, [streamId2, r19, mode2]);
+  callback3 = useCallback((a0) => {
+    if (!(streamId2 == null || a0 || mode2 !== VoicePanelPIPModes.IN_APP)) {
+      const current = ref.current;
+      updateVideoSize(streamId2, {
+        width: current * c22692_5,
+        height: ref2.current * c22692_5
+      }, 1);
+    }
+  }, [streamId2, r19, mode2]);
+  useEffect(() => {
+    let c28200_0 = ExternalPip_android.addOnPipModeChangedListener(callback3);
+    return () => {
+      if (c28200_0 != null) {
+        c28200_0.remove();
+      }
+    };
+  }, [callback3]);
+  const r80 = streamId2 != null;
+  c22692_9 = r80;
+  useEffect(() => {
+    if (c22692_9) {
+      ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_PIP_CONTENT_READY);
+    }
+  }, [r80]);
+  return stateFromStores3 === ApplicationStreamStates.ENDED ? (0, jsx)(StreamEnded, {
+    style: styles.streamEmptyImage,
+    resizeMode: "contain"
+  }) : stateFromStores3 === ApplicationStreamStates.FAILED ? (0, jsx)(StreamFailed, {
+    style: styles.streamEmptyImage,
+    resizeMode: "contain"
+  }) : r80 ? <AnimatedVideoWrapper style={style2} participantId={participantId3}>
+    <VideoStream useSurfaceDirectRenderer={surfaceDirectRendererExperiment} streamId={streamId2} style={styles.video} onSize={callback4} onLayout={callback5} />
+  </AnimatedVideoWrapper> : <User participantId={participantId3} />;
+};
+getFocusedKey = function getFocusedKey(a0) {
+  return a0.id;
+};
+renderFocusedParticipant = function renderFocusedParticipant(a0, a1, a2, a3) {
+  if (a1.id === "--voice-panel-pip-empty") {
+    return (0, jsx)(EmptyPIP, {
+      transitionState: a2,
+      transitionCleanUp: a3
+    }, a0);
+  }
+  const props = {
+    participantId: a1.id,
+    transitionState: a2,
+    transitionCleanUp: a3
+  };
+  const type = a1.type;
+  if (ParticipantTypes.ACTIVITY === type) {
+    return <ActivityInVoice key={a0} {...props} />;
+  }
+  if (ParticipantTypes.STREAM === type) {
+    return <Stream key={a0} {...props} />;
+  }
+  if (ParticipantTypes.USER !== type) {
+    ParticipantTypes.HIDDEN_STREAM;
+  }
+  return <User key={a0} {...props} />;
+};
+areParticipantsEqual = function areParticipantsEqual(a0, a1) {
+  if (a0.length !== a1.length) {
+    return false;
+  }
+  if (a0.length === 0) {
+    return true;
+  }
+  let r14 = 0;
+  for (const item of a0) {
+    if (item.id === a1[r14]?.id) {
+      r14 = r14 + 1;
+      continue;
+    }
+    return false;
+  }
+  return true;
+};
+useStyles = createStyles({
+  contentWrapper: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  userOpacity: {
+    opacity: 0.1
+  },
+  activity: {
+    position: "absolute",
+    width: "100%",
+    height: "100%"
+  },
+  user: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  video: {
+    position: "absolute",
+    width: "100%",
+    height: "100%"
+  },
+  avatarWrapper: {
+    position: "relative",
+    width: "56%",
+    height: "56%",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  thermalAlertIconContainer: {
+    width: 22,
+    height: 22,
+    backgroundColor: "rgba(78, 80, 88, 0.48)",
+    borderRadius: Module712.radii.round,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    top: 6,
+    left: 6
+  },
+  thermalAlertIcon: {
+    width: 14,
+    height: 14,
+    color: Module712.colors.WHITE
+  },
+  onTop: {
+    zIndex: 1
+  },
+  onBottom: {
+    zIndex: 0
+  },
+  streamEmptyImage: {
+    width: "50%"
+  },
+  emptyPip: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: Module712.colors.BLACK
+  },
+  innerStroke: {
+    position: "absolute",
+    top: -1,
+    left: -1,
+    bottom: -1,
+    right: -1,
+    borderWidth: 2,
+    borderColor: "white",
+    zIndex: 1,
+    opacity: 0.3
+  },
+  blackBackground: {
+    backgroundColor: "black"
+  }
+});
+c11456_27 = {
+  code: "function VoicePanelPIPContentTsx1(){const{windowDimensions}=this.__closure;return windowDimensions.get();}"
+};
+c11456_28 = {
+  code: "function VoicePanelPIPContentTsx2(windowDimensionsVal,previousWindowDimensionsVal){const{runOnJS,handleTargetAspectRatioParams}=this.__closure;if(windowDimensionsVal!==previousWindowDimensionsVal){runOnJS(handleTargetAspectRatioParams)(windowDimensionsVal);}}"
+};
+c11456_30 = {
+  code: "function VoicePanelPIPContentTsx3(){const{focused}=this.__closure;var _focused$get;return(_focused$get=focused.get())===null||_focused$get===void 0?void 0:_focused$get.id;}"
+};
+c11456_31 = {
+  code: "function VoicePanelPIPContentTsx4(focusedParticipantId,previousFocusedParticipantId){const{runOnJS,updateIsActivityFocused,mode}=this.__closure;if(focusedParticipantId!==previousFocusedParticipantId){runOnJS(updateIsActivityFocused)(focusedParticipantId,mode.get());}}"
+};
+c11456_32 = {
+  code: "function VoicePanelPIPContentTsx5(){const{mode}=this.__closure;return mode.get();}"
+};
+c11456_33 = {
+  code: "function VoicePanelPIPContentTsx6(modeVal,previousModeVal){const{runOnJS,updateIsActivityFocused,focused}=this.__closure;if(modeVal!==previousModeVal){var _focused$get;runOnJS(updateIsActivityFocused)((_focused$get=focused.get())===null||_focused$get===void 0?void 0:_focused$get.id,modeVal);}}"
+};
+c11456_35 = {
+  code: "function VoicePanelPIPContentTsx7(){const{targetDimensions}=this.__closure;const{width:targetWidth,height:targetHeight}=targetDimensions.get();let height='100%';let width='100%';if(targetHeight<targetWidth){width='auto';}else{height='auto';}return{position:'absolute',aspectRatio:targetWidth/targetHeight,width:width,height:height};}"
+};
+EmptyPIP = Module19.memo(function EmptyPIP({ transitionState, transitionCleanUp }) {
+  const styles = useStyles();
+  useEffect(() => {
+    if (transitionState === TransitionStates.YEETED) {
+      transitionCleanUp();
+    }
+  }, [transitionState, transitionCleanUp]);
+  return (0, jsx)(NativeView, {
+    style: styles.emptyPip
+  });
+});
+const r114 = Module19.memo(function VoicePanelPIPContent() {
+  const channelId4 = useContext(VoicePanelStateContext).channelId;
+  const pIPState = usePIPState();
+  const { id, width: width2, height: height2 } = pIPState;
+  const styles = useStyles();
+  let c22695_4 = styles;
+  const id2 = AuthenticationStore.getId();
+  const stateFromStores3 = useStateFromStores([ChannelRTCStore], () => {
+    let id3 = id;
+    let type = id != null ? ChannelRTCStore.getParticipant(channelId4, id)?.type : ParticipantTypes.USER;
+    if (type == null) {
+      type = ParticipantTypes.USER;
+    }
+    if (id == null) {
+      id3 = id2;
+    }
+    return [{
+      id: id3,
+      type
+    }];
+  }, [id, channelId4, id2], areParticipantsEqual);
+  return <NativeView style={useMemo(() => [[c22695_4.contentWrapper, {
+    borderRadius: getVoicePanelPIPBorderRadius(width2, height2)
+  }]], [width2, height2, styles.contentWrapper])} pointerEvents="none">
+    <TransitionGroup items={stateFromStores3} renderItem={renderFocusedParticipant} getItemKey={getFocusedKey} />
+  </NativeView>;
+});
+export default r114;

modules/voice_panel/native/pip/VoicePanelPIPPushToTalkOverlay.tsx

@@ -0,0 +1,168 @@
+// Metro module 15988 (f15989).
+import { useRef, useCallback, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { PUSH_TO_TALK_PIP_PHYSICS } from "../../VoicePanelConstants";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import NativeView from "../../../core/native/NativeView";
+import { Icon } from "../../../../design/void/native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { setPushToTalkState } from "../../../media_engine/MediaEngineActionCreators";
+import { usePIPState } from "./VoicePanelPIPStateContext";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import * as _VoicePanelPIPUtils from "./VoicePanelPIPUtils";
+import { GestureDetector, Gesture } from "../../../../_bundle/Module5273";
+import Module15989 from "../../../../_bundle/Module15989";
+const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(NativeView);
+const AnimatedComponent2 = ReanimatedRexport.createAnimatedComponent(Icon);
+const hitSlop = {
+  top: 6,
+  bottom: 6,
+  left: 6,
+  right: 6
+};
+const useStyles = createStyles({
+  iconContainer: {
+    position: "absolute",
+    width: 32,
+    height: 32,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: Module712.radii.round
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: Module712.colors.BLACK
+  }
+});
+const __initData = {
+  code: "function VoicePanelPIPPushToTalkOverlayTsx1(){const{isPushingToTalk,EXPANDED_ICON_SIZE,BASE_ICON_SIZE,withSpring,PUSH_TO_TALK_PIP_PHYSICS,white}=this.__closure;const padding=isPushingToTalk.get()?8*EXPANDED_ICON_SIZE/BASE_ICON_SIZE+8:8;return{right:withSpring(padding,PUSH_TO_TALK_PIP_PHYSICS),bottom:withSpring(padding,PUSH_TO_TALK_PIP_PHYSICS),transform:[{scale:withSpring(isPushingToTalk.get()?EXPANDED_ICON_SIZE/BASE_ICON_SIZE:1,PUSH_TO_TALK_PIP_PHYSICS)}],backgroundColor:withSpring(isPushingToTalk.get()?white:'rgba(0, 0, 0, 0.54)',PUSH_TO_TALK_PIP_PHYSICS)};}"
+};
+const __initData2 = {
+  code: "function VoicePanelPIPPushToTalkOverlayTsx2(){const{withSpring,isPushingToTalk,black,white,PUSH_TO_TALK_PIP_PHYSICS}=this.__closure;return{tintColor:withSpring(isPushingToTalk.get()?black:white,PUSH_TO_TALK_PIP_PHYSICS)};}"
+};
+const __initData3 = {
+  code: "function VoicePanelPIPPushToTalkOverlayTsx3(){const{withSpring,isPushingToTalk,PUSH_TO_TALK_PIP_PHYSICS,getVoicePanelPIPBorderRadius,pipState}=this.__closure;return{opacity:withSpring(isPushingToTalk.get()?0.5:0,PUSH_TO_TALK_PIP_PHYSICS),borderRadius:getVoicePanelPIPBorderRadius(pipState.width,pipState.height)};}"
+};
+const __initData4 = {
+  code: "function VoicePanelPIPPushToTalkOverlayTsx4(event,success){const{runOnJS,handlePushToTalk}=this.__closure;if(!success){return;}runOnJS(handlePushToTalk)(false);}"
+};
+const __initData5 = {
+  code: "function VoicePanelPIPPushToTalkOverlayTsx5(){const{runOnJS,handlePushToTalk}=this.__closure;runOnJS(handlePushToTalk)(false);}"
+};
+const __initData6 = {
+  code: "function VoicePanelPIPPushToTalkOverlayTsx6(){const{runOnJS,handlePushToTalk}=this.__closure;runOnJS(handlePushToTalk)(true);}"
+};
+export default function VoicePanelPIPPushToTalkOverlay() {
+  let c22696_1, WHITE, BLACK;
+  const pIPState = usePIPState();
+  const styles = useStyles();
+  const sharedValue = useSharedValue(false);
+  const ref = useRef(false);
+  let [isPushingToTalk, handlePushToTalk] = [sharedValue, useCallback((a0) => {
+    if (a0 !== ref.current) {
+      ref.current = a0;
+      setPushToTalkState(a0);
+      sharedValue.set(a0);
+    }
+  }, [sharedValue])];
+  c22696_1 = isPushingToTalk;
+  WHITE = Module712.unsafe_rawColors.WHITE;
+  BLACK = Module712.unsafe_rawColors.BLACK;
+  const r46 = function() {
+    const r0 = c22696_1.get() ? 20 : 8;
+    return {
+      right: _spring.withSpring(r0, PUSH_TO_TALK_PIP_PHYSICS),
+      bottom: _spring.withSpring(r0, PUSH_TO_TALK_PIP_PHYSICS),
+      transform: [{
+        scale: _spring.withSpring(c22696_1.get() ? 1.5 : 1, PUSH_TO_TALK_PIP_PHYSICS)
+      }],
+      backgroundColor: _spring.withSpring(c22696_1.get() ? WHITE : "rgba(0, 0, 0, 0.54)", PUSH_TO_TALK_PIP_PHYSICS)
+    };
+  };
+  r46.__closure = {
+    isPushingToTalk,
+    EXPANDED_ICON_SIZE: 48,
+    BASE_ICON_SIZE: 32,
+    withSpring: _spring.withSpring,
+    PUSH_TO_TALK_PIP_PHYSICS,
+    white: WHITE
+  };
+  r46.__workletHash = 3936373516983;
+  r46.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(r46);
+  const P = function P() {
+    return {
+      tintColor: _spring.withSpring(c22696_1.get() ? BLACK : WHITE, PUSH_TO_TALK_PIP_PHYSICS)
+    };
+  };
+  P.__closure = {
+    withSpring: _spring.withSpring,
+    isPushingToTalk,
+    black: BLACK,
+    white: WHITE,
+    PUSH_TO_TALK_PIP_PHYSICS
+  };
+  P.__workletHash = 11469896791985;
+  P.__initData = __initData2;
+  const animatedStyle2 = useAnimatedStyle(P);
+  const H = function H() {
+    return {
+      opacity: _spring.withSpring(c22696_1.get() ? 0.5 : 0, PUSH_TO_TALK_PIP_PHYSICS),
+      borderRadius: _VoicePanelPIPUtils.getVoicePanelPIPBorderRadius(pIPState.width, pIPState.height)
+    };
+  };
+  H.__closure = {
+    withSpring: _spring.withSpring,
+    isPushingToTalk,
+    PUSH_TO_TALK_PIP_PHYSICS,
+    getVoicePanelPIPBorderRadius: _VoicePanelPIPUtils.getVoicePanelPIPBorderRadius,
+    pipState: pIPState
+  };
+  H.__workletHash = 450590017248;
+  H.__initData = __initData3;
+  return <>
+    <AnimatedComponent pointerEvents="none" style={[styles.overlay, useAnimatedStyle(H)]} />
+    <GestureDetector gesture={useMemo(() => {
+      const r8 = Gesture.Tap().maxDistance(30);
+      const r23 = function(a0, a1) {
+        if (a1) {
+          _ReanimatedRexport.runOnJS(handlePushToTalk)(false);
+        }
+      };
+      r23.__closure = {
+        runOnJS: _ReanimatedRexport.runOnJS,
+        handlePushToTalk
+      };
+      r23.__workletHash = 13736796804739;
+      r23.__initData = __initData4;
+      const r29 = r8.onEnd(r23);
+      const shouldCancelWhenOutside = Gesture.Pan().maxPointers(1).shouldCancelWhenOutside(false);
+      const t = function t() {
+        _ReanimatedRexport.runOnJS(handlePushToTalk)(true);
+      };
+      t.__closure = {
+        runOnJS: _ReanimatedRexport.runOnJS,
+        handlePushToTalk
+      };
+      t.__workletHash = 246779667986;
+      t.__initData = __initData6;
+      const r46 = shouldCancelWhenOutside.onBegin(t);
+      const n = function n() {
+        _ReanimatedRexport.runOnJS(handlePushToTalk)(false);
+      };
+      n.__closure = {
+        runOnJS: _ReanimatedRexport.runOnJS,
+        handlePushToTalk
+      };
+      n.__workletHash = 12223608557562;
+      n.__initData = __initData5;
+      return Gesture.Exclusive(r29, r46.onFinalize(n));
+    }, [handlePushToTalk])}>
+      <AnimatedComponent style={[styles.iconContainer, animatedStyle]} hitSlop={hitSlop}>
+        <AnimatedComponent2 style={animatedStyle2} size={Icon.Sizes.SMALL_20} source={Module15989} disableColor />
+      </AnimatedComponent>
+    </GestureDetector>
+  </>;
+};

modules/voice_panel/native/pip/VoicePanelPIPStateContext.tsx

@@ -0,0 +1,14 @@
+// Metro module 15918 (f15919).
+import { createContext, useContext } from "react";
+const context = createContext({
+  id: void 0,
+  mode: void 0,
+  width: 0,
+  height: 0,
+  containerHeight: 0,
+  showSecondaryPIP: false
+});
+export { context as VoicePanelPIPStateContext };
+export function usePIPState() {
+  return useContext(context);
+}

modules/voice_panel/native/pip/VoicePanelPIPUtils.tsx

@@ -0,0 +1,361 @@
+// Metro module 15913 (f15914).
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import ApplicationStreamingStore from "../../../../stores/ApplicationStreamingStore";
+import AuthenticationStore from "../../../../stores/AuthenticationStore";
+import { SECONDARY_PIP_TOP_MARGIN, VoicePanelModes } from "../../VoicePanelConstants";
+import { PIPReferenceDimensions, SquareActivityPIPReferenceDimensions, SquarePIPReferenceDimensions, VoicePanelPIPModes } from "./VoicePanelPIPConstants";
+import { ParticipantTypes } from "../../../calls/CallConstants";
+import { MIN_PIP_TOSS_VELOCITY, PIP_WINDOW_OFFSET } from "../../../panels/morphable/native/MorphablePanelConstants";
+import { canRenderParticipantVideo } from "../../../video_calls/participantHasVideo";
+import { isActivityParticipantCurrentUserCurrentSession } from "../../../activities/isActivityParticipantCurrentUserCurrentSession";
+import Module712 from "../../../../_bundle/Module712";
+let clamp, getPIPWindowDimensions, pipXYtoAbsoluteXY, xl, lg;
+let c11397_14 = new Set();
+const clamp2 = function clamp(a0, a1, a2) {
+  return Math.min(Math.max(a0, a1), a2);
+};
+clamp2.__closure = {};
+clamp2.__workletHash = 10301627783217;
+clamp2.__initData = {
+  code: "function clamp_VoicePanelPIPUtilsTsx1(value,min,max){return Math.min(Math.max(value,min),max);}"
+};
+clamp = clamp2;
+const getPIPWindowDimensions2 = function getPIPWindowDimensions(a0, a1) {
+  const xOffset = Math.max(a1.left, PIP_WINDOW_OFFSET);
+  const yOffset = Math.max(a1.top, PIP_WINDOW_OFFSET);
+  return {
+    xOffset,
+    yOffset,
+    xRange: a0.width - xOffset - Math.max(a1.right, PIP_WINDOW_OFFSET),
+    yRange: a0.height - yOffset - Math.max(a1.bottom, PIP_WINDOW_OFFSET)
+  };
+};
+getPIPWindowDimensions2.__closure = {
+  PIP_WINDOW_OFFSET
+};
+getPIPWindowDimensions2.__workletHash = 10369369214675;
+getPIPWindowDimensions2.__initData = {
+  code: "function getPIPWindowDimensions_VoicePanelPIPUtilsTsx2(windowDimensions,safeArea){const{PIP_WINDOW_OFFSET}=this.__closure;const xOffset=Math.max(safeArea.left,PIP_WINDOW_OFFSET);const yOffset=Math.max(safeArea.top,PIP_WINDOW_OFFSET);return{xOffset:xOffset,yOffset:yOffset,xRange:windowDimensions.width-xOffset-Math.max(safeArea.right,PIP_WINDOW_OFFSET),yRange:windowDimensions.height-yOffset-Math.max(safeArea.bottom,PIP_WINDOW_OFFSET)};}"
+};
+getPIPWindowDimensions = getPIPWindowDimensions2;
+const pipXYtoAbsoluteXY2 = function pipXYtoAbsoluteXY({ pipX, pipY, windowDimensions, safeArea }) {
+  const r17 = Math.max(safeArea.left, PIP_WINDOW_OFFSET);
+  const r21 = Math.max(safeArea.top, PIP_WINDOW_OFFSET);
+  return {
+    x: r17 + pipX * (windowDimensions.width - r17 - Math.max(safeArea.right, PIP_WINDOW_OFFSET)),
+    y: r21 + pipY * (windowDimensions.height - r21 - Math.max(safeArea.bottom, PIP_WINDOW_OFFSET))
+  };
+};
+pipXYtoAbsoluteXY2.__closure = {
+  getPIPWindowDimensions
+};
+pipXYtoAbsoluteXY2.__workletHash = 13405407399530;
+pipXYtoAbsoluteXY2.__initData = {
+  code: "function pipXYtoAbsoluteXY_VoicePanelPIPUtilsTsx3({pipX:pipX,pipY:pipY,windowDimensions:windowDimensions,safeArea:safeArea}){const{getPIPWindowDimensions}=this.__closure;const{xOffset:xOffset,yOffset:yOffset,xRange:xRange,yRange:yRange}=getPIPWindowDimensions(windowDimensions,safeArea);return{x:xOffset+pipX*xRange,y:yOffset+pipY*yRange};}"
+};
+pipXYtoAbsoluteXY = pipXYtoAbsoluteXY2;
+export function getClampedPIPPosition({ pipX, pipY, width, height, windowDimensions, safeArea, bottomAvoidanceRegion = 0, topAvoidanceRegion = 0, positionOffset = {
+  x: 0,
+  y: 0
+} }) {
+  const pipX2 = pipX !== -1 ? pipX : 1;
+  const r3 = pipY === -1;
+  const r26 = pipXYtoAbsoluteXY({
+    pipX: pipX2,
+    pipY: r3 ? 0 : pipY,
+    windowDimensions,
+    safeArea
+  });
+  const { x: r27, y: r28 } = r26;
+  const r30 = r27 - width / 2;
+  const r32 = r3 ? r28 + 72 : r28 - height / 2;
+  const r18 = Math.max(safeArea.left, PIP_WINDOW_OFFSET);
+  const r42 = Math.max(safeArea.top, PIP_WINDOW_OFFSET);
+  const r47 = windowDimensions.width - r18 - Math.max(safeArea.right, PIP_WINDOW_OFFSET);
+  const r54 = windowDimensions.height - r42 - Math.max(safeArea.bottom, PIP_WINDOW_OFFSET);
+  const r57 = r18 + r47 - width;
+  const r65 = Math.min(Math.max(r30, r18), r57);
+  const r66 = r42 + topAvoidanceRegion;
+  const r69 = r42 + r54 - bottomAvoidanceRegion - height;
+  return {
+    x: r65 + positionOffset.x,
+    y: Math.min(Math.max(r32, r66), r69) + positionOffset.y
+  };
+}
+getClampedPIPPosition.__closure = {
+  pipXYtoAbsoluteXY,
+  getPIPWindowDimensions,
+  clamp
+};
+getClampedPIPPosition.__workletHash = 10462021389431;
+getClampedPIPPosition.__initData = {
+  code: "function getClampedPIPPosition_VoicePanelPIPUtilsTsx4({pipX:pipX,pipY:pipY,width:width,height:height,windowDimensions:windowDimensions,safeArea:safeArea,bottomAvoidanceRegion=0,topAvoidanceRegion=0,positionOffset={x:0,y:0}}){const{pipXYtoAbsoluteXY,getPIPWindowDimensions,clamp}=this.__closure;let{x:x,y:y}=pipXYtoAbsoluteXY({pipX:pipX===-1?1:pipX,pipY:pipY===-1?0:pipY,windowDimensions:windowDimensions,safeArea:safeArea});const halfWidth=width/2;const halfHeight=height/2;x-=halfWidth;if(pipY===-1){y+=72;}else{y-=halfHeight;}const pipRegion=getPIPWindowDimensions(windowDimensions,safeArea);x=clamp(x,pipRegion.xOffset,pipRegion.xOffset+pipRegion.xRange-width);y=clamp(y,pipRegion.yOffset+topAvoidanceRegion,pipRegion.yOffset+pipRegion.yRange-bottomAvoidanceRegion-height);x+=positionOffset.x;y+=positionOffset.y;return{x:x,y:y};}"
+};
+export function calculatePIPPositionFromVelocity({ velocityX, velocityY, absoluteX, absoluteY, windowDimensions, safeArea }) {
+  let r64, r65;
+  L33: {
+    const r24 = Math.max(safeArea.left, PIP_WINDOW_OFFSET);
+    const r27 = Math.max(safeArea.top, PIP_WINDOW_OFFSET);
+    const r32 = windowDimensions.width - r24 - Math.max(safeArea.right, PIP_WINDOW_OFFSET);
+    const r39 = windowDimensions.height - r27 - Math.max(safeArea.bottom, PIP_WINDOW_OFFSET);
+    const r40 = absoluteX - r24;
+    const r41 = absoluteY - r27;
+    if (Math.max(Math.abs(velocityY), Math.abs(velocityX)) < MIN_PIP_TOSS_VELOCITY) {
+      const r76 = {
+        left: Math.min(Math.max(r40, 0), r32),
+        right: Math.min(Math.max(r32 - r40, 0), r32),
+        top: Math.min(Math.max(r41, 0), r39),
+        bottom: Math.min(Math.max(r39 - r41, 0), r39)
+      };
+      const r103 = Math;
+      const r112 = r103.min.apply(r103, [...Object.values(r76)]);
+      const r115 = r76.left !== r112 ? r76.top !== r112 ? r76.right === r112 ? "right" : "bottom" : "top" : "left";
+      if (r115 === "left") {
+        r65 = r41 / r39;
+        r64 = 0;
+      } else if (r115 === "right") {
+        r65 = r41 / r39;
+        r64 = 1;
+      } else if (r115 === "top") {
+        r64 = r40 / r32;
+        r65 = 0;
+      } else {
+        r65 = 0;
+        r64 = 0;
+        if (r115 === "bottom") {
+          r64 = r40 / r32;
+          r65 = 1;
+        }
+      }
+    } else {
+      const r52 = velocityY / velocityX;
+      const r54 = velocityX > 0 ? r32 : 0;
+      const r57 = r41 + r52 * (r54 - r40);
+      if (r57 >= 0 && r57 <= r39) {
+        r64 = r54 / r32;
+        r65 = r57 / r39;
+        break L33;
+      }
+      const r58 = 1 / r52;
+      const r60 = velocityY > 0 ? r39 : 0;
+      r64 = (r40 + r58 * (r60 - r41)) / r32;
+      r65 = r60 / r39;
+    }
+  }
+  return {
+    pipX: Math.min(Math.max(r64, 0), 1),
+    pipY: Math.min(Math.max(r65, 0), 1)
+  };
+}
+calculatePIPPositionFromVelocity.__closure = {
+  getPIPWindowDimensions,
+  MIN_PIP_TOSS_VELOCITY,
+  clamp
+};
+calculatePIPPositionFromVelocity.__workletHash = 14615762848981;
+calculatePIPPositionFromVelocity.__initData = {
+  code: "function calculatePIPPositionFromVelocity_VoicePanelPIPUtilsTsx5({velocityX:velocityX,velocityY:velocityY,absoluteX:absoluteX,absoluteY:absoluteY,windowDimensions:windowDimensions,safeArea:safeArea}){const{getPIPWindowDimensions,MIN_PIP_TOSS_VELOCITY,clamp}=this.__closure;const pipRegion=getPIPWindowDimensions(windowDimensions,safeArea);const{xRange:xRange,yRange:yRange}=pipRegion;const x=absoluteX-pipRegion.xOffset;const y=absoluteY-pipRegion.yOffset;let pipX=0;let pipY=0;if(Math.max(Math.abs(velocityY),Math.abs(velocityX))<MIN_PIP_TOSS_VELOCITY){const closestEdge=function(specs){const minValue=Math.min(...Object.values(specs));if(specs.left===minValue){return'left';}if(specs.top===minValue){return'top';}if(specs.right===minValue){return'right';}return'bottom';}({left:clamp(x,0,xRange),right:clamp(xRange-x,0,xRange),top:clamp(y,0,yRange),bottom:clamp(yRange-y,0,yRange)});switch(closestEdge){case'left':pipX=0;pipY=y/yRange;break;case'right':pipX=1;pipY=y/yRange;break;case'top':pipY=0;pipX=x/xRange;break;case'bottom':pipY=1;pipX=x/xRange;break;}}else{const slope=velocityY/velocityX;let intersectionY=0;let intersectionX=0;intersectionX=velocityX>0?xRange:0;intersectionY=y+slope*(intersectionX-x);if(intersectionY>=0&&intersectionY<=yRange){pipX=intersectionX/xRange;pipY=intersectionY/yRange;}else{intersectionY=velocityY>0?yRange:0;intersectionX=x+1/slope*(intersectionY-y);pipX=intersectionX/xRange;pipY=intersectionY/yRange;}}return{pipX:clamp(pipX,0,1),pipY:clamp(pipY,0,1)};}"
+};
+xl = Module712.radii.xl;
+lg = Module712.radii.lg;
+export function getVoicePanelPIPBorderRadius(a0, a1) {
+  return a0 <= SquareActivityPIPReferenceDimensions.width && a1 <= SquareActivityPIPReferenceDimensions.height ? lg : xl;
+}
+getVoicePanelPIPBorderRadius.__closure = {
+  SquareActivityPIPReferenceDimensions,
+  lg,
+  xl
+};
+getVoicePanelPIPBorderRadius.__workletHash = 16698745361037;
+getVoicePanelPIPBorderRadius.__initData = {
+  code: "function getVoicePanelPIPBorderRadius_VoicePanelPIPUtilsTsx6(width,height){const{SquareActivityPIPReferenceDimensions,lg,xl}=this.__closure;if(width<=SquareActivityPIPReferenceDimensions.width&&height<=SquareActivityPIPReferenceDimensions.height){return lg;}return xl;}"
+};
+export { PIPReferenceDimensions };
+export { SquarePIPReferenceDimensions };
+export { SquareActivityPIPReferenceDimensions };
+export function computePIPSize(a0, a1, a2, a3) {
+  let height2, width2;
+  L15: {
+    const { width, height } = a0;
+    if (!a1 && width !== height) {
+      if (width >= height) {
+        const r20 = a2 ? SquareActivityPIPReferenceDimensions.width : PIPReferenceDimensions.width;
+        height2 = r20 * Math.max(0.5, a0.height / a0.width);
+        width2 = r20;
+        break L15;
+      }
+      height2 = a2 ? SquareActivityPIPReferenceDimensions.height : PIPReferenceDimensions.height;
+      width2 = height2 * Math.max(0.5, a0.width / a0.height);
+    } else {
+      const r29 = a2 ? SquareActivityPIPReferenceDimensions : SquarePIPReferenceDimensions;
+      width2 = r29.width;
+      height2 = r29.height;
+    }
+  }
+  return {
+    width: width2,
+    height: height2,
+    containerHeight: a3 ? 2 * height2 + SECONDARY_PIP_TOP_MARGIN : height2
+  };
+}
+export function computePIPParticipantToShow({ channelId, panelMode, lastParticipantId, speakingUserId, focusedParticipantId, blockList = c11397_14, showSecondaryPIP }) {
+  let r209;
+  const id = AuthenticationStore.getId();
+  const r35 = focusedParticipantId != null ? ChannelRTCStore.getParticipant(channelId, focusedParticipantId) : void 0;
+  if (panelMode === VoicePanelModes.PANEL && r35 == null) {
+    return void 0;
+  }
+  if (panelMode === VoicePanelModes.PANEL && focusedParticipantId != null && r35?.type === ParticipantTypes.STREAM && r35?.userVideo === true && !blockList.has(r35.user.id)) {
+    const participant = ChannelRTCStore.getParticipant(channelId, r35.user.id);
+    if (participant != null && canRenderParticipantVideo(participant)) {
+      return {
+        id: participant.id,
+        type: ParticipantTypes.USER
+      };
+    }
+  }
+  if (focusedParticipantId != null && r35 != null && !blockList.has(focusedParticipantId)) {
+    return {
+      id: focusedParticipantId,
+      type: r35.type
+    };
+  }
+  if (r35?.type !== ParticipantTypes.ACTIVITY && !showSecondaryPIP) {
+    for (const item of ChannelRTCStore.getActivityParticipants(channelId)) {
+      if (!item.participants.some((participant) => isActivityParticipantCurrentUserCurrentSession(participant))) {
+        continue;
+      }
+      if (blockList.has(item.id)) {
+        continue;
+      }
+      return {
+        id: item.id,
+        type: item.type
+      };
+    }
+  }
+  for (const item2 of ChannelRTCStore.getStreamParticipants(channelId)) {
+    if (blockList.has(item2.id)) {
+      continue;
+    }
+    if (ApplicationStreamingStore.getActiveStreamForUser(item2.user.id, item2.stream.guildId) == null) {
+      continue;
+    }
+    return {
+      id: item2.id,
+      type: item2.type
+    };
+  }
+  if (speakingUserId != null && !blockList.has(speakingUserId) && ChannelRTCStore.getParticipant(channelId, speakingUserId) != null) {
+    return {
+      id: speakingUserId,
+      type: ParticipantTypes.USER
+    };
+  }
+  const r131 = lastParticipantId != null ? ChannelRTCStore.getParticipant(channelId, lastParticipantId) : void 0;
+  if (r131 != null && !blockList.has(r131.id)) {
+    const type = r131.type;
+    if (ParticipantTypes.STREAM === type) {
+      if (ApplicationStreamingStore.getActiveStreamForUser(r131.user.id, r131.stream.guildId) != null && canRenderParticipantVideo(r131)) {
+        return {
+          id: r131.id,
+          type: r131.type
+        };
+      }
+    } else if (ParticipantTypes.ACTIVITY === type) {
+      if (r131.participants.some((participant) => isActivityParticipantCurrentUserCurrentSession(participant))) {
+        return {
+          id: r131.id,
+          type: r131.type
+        };
+      }
+    } else if (ParticipantTypes.USER === type) {
+      return {
+        id: r131.id,
+        type: r131.type
+      };
+    }
+  }
+  const participant2 = ChannelRTCStore.getParticipant(channelId, id);
+  if (!blockList.has(id) && participant2 != null && canRenderParticipantVideo(participant2)) {
+    return {
+      id,
+      type: ParticipantTypes.USER
+    };
+  }
+  for (const item3 of ChannelRTCStore.getVideoParticipants(channelId)) {
+    if (blockList.has(item3.id)) {
+      continue;
+    }
+    if (!canRenderParticipantVideo(item3)) {
+      continue;
+    }
+    return {
+      id: item3.id,
+      type: item3.type
+    };
+  }
+  L78: {
+    const r208 = blockList.has(id);
+    r209 = void 0;
+    if (!r208) {
+      const r210 = participant2 == null;
+      r209 = void 0;
+      if (!r210) {
+        if (panelMode === VoicePanelModes.PANEL) {
+          const type2 = r35?.type;
+          const ACTIVITY = ParticipantTypes.ACTIVITY;
+          r209 = void 0;
+          if (type2 !== ACTIVITY) {
+            break L78;
+          }
+        }
+        r209 = {
+          id,
+          type: ParticipantTypes.USER
+        };
+      }
+    }
+  }
+  return r209;
+}
+export function getPIPMode({ channelId, connected, manuallyFocusedId, mode, selfHasVideo }) {
+  if (connected) {
+    const r2 = manuallyFocusedId != null ? ChannelRTCStore.getParticipant(channelId, manuallyFocusedId) : void 0;
+    if (mode === VoicePanelModes.PANEL && r2 != null) {
+      if (r2.type === ParticipantTypes.ACTIVITY) {
+        return VoicePanelPIPModes.IN_PANEL;
+      }
+      if (r2.type === ParticipantTypes.STREAM && r2.userVideo) {
+        let r43 = ChannelRTCStore.getParticipant(channelId, r2.user.id);
+        if (r43 == null) {
+          r43 = void 0;
+        }
+        if (canRenderParticipantVideo(r43)) {
+          return VoicePanelPIPModes.IN_PANEL;
+        }
+      }
+      if (!selfHasVideo) {
+        return void 0;
+      }
+      if (r2.id !== AuthenticationStore.getId()) {
+        return VoicePanelPIPModes.IN_PANEL;
+      }
+      for (const item of ChannelRTCStore.getVideoParticipants(channelId)) {
+        if (item.id === AuthenticationStore.getId()) {
+          continue;
+        }
+        if (!canRenderParticipantVideo(item)) {
+          continue;
+        }
+        return VoicePanelPIPModes.IN_PANEL;
+      }
+      if (r2.id !== AuthenticationStore.getId()) {
+        return VoicePanelPIPModes.IN_PANEL;
+      }
+    }
+    return mode === VoicePanelModes.PIP ? VoicePanelPIPModes.IN_APP : void 0;
+  }
+}
+export { getPIPWindowDimensions };
+export { pipXYtoAbsoluteXY };

modules/voice_panel/native/pip/VoicePanelSecondaryPIPContent.tsx

@@ -0,0 +1,118 @@
+// Metro module 15990 (f15991).
+import { useContext, useMemo } from "react";
+import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
+import FramesStore from "../../../frames/FramesStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import { ActivityLayoutMode } from "../../../activities/Constants";
+import { ActivityPanelModes } from "../../../activities/panel/ActivityPanelConstants";
+import { FrameLayoutModes } from "../../../frames/FramesConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import { usePIPState } from "./VoicePanelPIPStateContext";
+import { useStateFromStoresObject, useStateFromStores } from "../../../../_bundle/Module589";
+import { getEmbeddedActivityLocationChannelId } from "../../../activities/utils/embeddedActivityLocationUtils";
+import roundToNearestPixel from "../utils/roundToNearestPixel";
+import isVoiceEmbeddedActivity from "../../../activities/utils/isVoiceEmbeddedActivity";
+import { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import getActivityContainerPIPStylesSpec from "../../../activities/panel/native/pip/getActivityContainerPIPStylesSpec";
+import NativeView from "../../../core/native/NativeView";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import FrameView from "../../../frames/native/FrameView";
+import EmbeddedActivityView from "../../../activities/native/EmbeddedActivityView";
+const useStyles = createStyles({
+  activityContainer: {
+    flex: 1
+  }
+});
+const __initData = {
+  code: "function VoicePanelSecondaryPIPContentTsx1(){const{getActivityContainerPipStylesSpec,pipState,activePipOrientationLockState,windowDimensions}=this.__closure;const{width:width,height:height,shouldVerticallyCenter:shouldVerticallyCenter,shouldHorizontallyCenter:shouldHorizontallyCenter,marginLeft:marginLeft,marginTop:marginTop}=getActivityContainerPipStylesSpec({pipWidth:pipState.width,pipHeight:pipState.height,pipOrientationLockState:activePipOrientationLockState,isLandscape:windowDimensions.get().landscape});return{width:width,height:height,left:shouldHorizontallyCenter?'50%':'0%',top:shouldVerticallyCenter?'50%':'0%',marginLeft:marginLeft,marginTop:marginTop};}"
+};
+export default function VoicePanelSecondaryPIPContent() {
+  let connectedEmbeddedActivityChannelId, width, height, framePipOrientationLockState;
+  const windowDimensions = useContext(VoicePanelStateContext).windowDimensions;
+  const pIPState = usePIPState();
+  const styles = useStyles();
+  const stateFromStoresObject = useStateFromStoresObject([EmbeddedActivitiesStore], () => {
+    const connectedActivityLocation = EmbeddedActivitiesStore.getConnectedActivityLocation();
+    const selfEmbeddedActivityForLocation = EmbeddedActivitiesStore.getSelfEmbeddedActivityForLocation(connectedActivityLocation);
+    const applicationId = selfEmbeddedActivityForLocation?.applicationId;
+    return {
+      connectedEmbeddedActivityChannelId: getEmbeddedActivityLocationChannelId(connectedActivityLocation),
+      connectedEmbeddedActivity: selfEmbeddedActivityForLocation,
+      pipOrientationLockState: applicationId == null ? void 0 : EmbeddedActivitiesStore.getPipOrientationLockStateForApp(applicationId),
+      panelMode: EmbeddedActivitiesStore.getActivityPanelMode()
+    };
+  });
+  connectedEmbeddedActivityChannelId = stateFromStoresObject.connectedEmbeddedActivityChannelId;
+  const connectedEmbeddedActivity = stateFromStoresObject.connectedEmbeddedActivity;
+  let pipOrientationLockState = stateFromStoresObject.pipOrientationLockState;
+  const panelMode = stateFromStoresObject.panelMode;
+  const stateFromStoresObject2 = useStateFromStoresObject([FramesStore], () => {
+    const connectedFrame = FramesStore.getConnectedFrame();
+    const applicationId = connectedFrame?.applicationId;
+    return {
+      connectedFrame,
+      framePanelMode: FramesStore.getActivityPanelMode(),
+      framePipOrientationLockState: applicationId == null ? void 0 : FramesStore.getPipOrientationLockStateForApp(applicationId)
+    };
+  });
+  const { connectedFrame, framePanelMode, framePipOrientationLockState: framePipOrientationLockState2 } = stateFromStoresObject2;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(connectedEmbeddedActivityChannelId));
+  width = pIPState.width;
+  height = pIPState.height;
+  const memo = useMemo(() => ({
+    width,
+    height,
+    position: "absolute",
+    left: "50%",
+    marginLeft: -1 * roundToNearestPixel(width / 2),
+    top: "50%",
+    marginTop: -1 * roundToNearestPixel(height / 2)
+  }), [width, height]);
+  const r2 = connectedEmbeddedActivity != null && !isVoiceEmbeddedActivity(connectedEmbeddedActivityChannelId) && panelMode === ActivityPanelModes.PIP;
+  const r3 = connectedFrame != null && framePanelMode === ActivityPanelModes.PIP;
+  if (r3) {
+    pipOrientationLockState = framePipOrientationLockState2;
+  }
+  framePipOrientationLockState = pipOrientationLockState;
+  const P = function P() {
+    const activityContainerPIPStylesSpec = getActivityContainerPIPStylesSpec({
+      pipWidth: pIPState.width,
+      pipHeight: pIPState.height,
+      pipOrientationLockState: framePipOrientationLockState,
+      isLandscape: windowDimensions.get().landscape
+    });
+    const { width: width2, height: height2, shouldVerticallyCenter, shouldHorizontallyCenter } = activityContainerPIPStylesSpec;
+    let top = "0%";
+    const left = shouldHorizontallyCenter ? "50%" : "0%";
+    if (shouldVerticallyCenter) {
+      top = "50%";
+    }
+    return {
+      width: width2,
+      height: height2,
+      left,
+      top,
+      marginLeft: activityContainerPIPStylesSpec.marginLeft,
+      marginTop: activityContainerPIPStylesSpec.marginTop
+    };
+  };
+  P.__closure = {
+    getActivityContainerPipStylesSpec: getActivityContainerPIPStylesSpec,
+    pipState: pIPState,
+    activePipOrientationLockState: framePipOrientationLockState,
+    windowDimensions
+  };
+  P.__workletHash = 12186082276755;
+  P.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(P);
+  return r2 ? <NativeView style={memo} pointerEvents="none">
+    <ReanimatedNativeView style={[styles.activityContainer, animatedStyle]}>
+      {r3 ? <FrameView layoutMode={FrameLayoutModes.PIP} /> : <EmbeddedActivityView channel={stateFromStores} layoutMode={ActivityLayoutMode.PIP} />}
+    </ReanimatedNativeView>
+  </NativeView> : r3 ? <NativeView style={memo} pointerEvents="none">
+    <ReanimatedNativeView style={[styles.activityContainer, animatedStyle]}>
+      {r3 ? <FrameView layoutMode={FrameLayoutModes.PIP} /> : <EmbeddedActivityView channel={stateFromStores} layoutMode={ActivityLayoutMode.PIP} />}
+    </ReanimatedNativeView>
+  </NativeView> : null;
+};

modules/voice_panel/native/pip/useControllerPIPState.tsx

@@ -0,0 +1,177 @@
+// Metro module 15910 (f15911).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import { useRef, useState, useInsertionEffect, useLayoutEffect, useEffect } from "react";
+import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import FramesStore from "../../../frames/FramesStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import SpeakingStore from "../../../../stores/SpeakingStore";
+import { VoicePanelModes } from "../../VoicePanelConstants";
+import { ActivityPanelModes } from "../../../activities/panel/ActivityPanelConstants";
+import useIsConnectedToVoiceChannel from "../hooks/useIsConnectedToVoiceChannel";
+import { useStateFromStores, BatchedStoreListener } from "../../../../_bundle/Module589";
+import { getEmbeddedActivityLocationChannelId } from "../../../activities/utils/embeddedActivityLocationUtils";
+import { isActivityInTextSupportedForChannel } from "../../../activities/ActivitiesInTextUtils";
+import { cheapWorkletShallowEqual } from "../../../reanimated/native/cheapWorkletShallowEqual";
+import useSelfHasVideo from "../utils/useSelfHasVideo";
+import throttle from "../../../../_bundle/throttle";
+import calculatePIPState from "../utils/calculatePIPState";
+import { getPIPMode } from "./VoicePanelPIPUtils";
+import useExternalPipAspectRatioUpdater_native from "../../../external_pip/useExternalPipAspectRatioUpdater.native";
+function $mk117092($env) {
+  return (a0) => {
+    const r1 = $env;
+    let r6 = r1[2].getTargetDimensions(r1[1]);
+    if (cheapWorkletShallowEqual(a0, r6)) {
+      r6 = a0;
+    }
+    return r6;
+  };
+}
+let env11394 = {};
+export function useControllerPIPState(a0) {
+  let channelId, mode, c22597_2;
+  let env22596 = {
+    $parent: env11394
+  };
+  const channelId2 = a0.channelId;
+  env22596[0] = channelId2;
+  const { connected, focusedId } = a0;
+  env22596[1] = focusedId;
+  const layoutManager = a0.layoutManager;
+  env22596[2] = layoutManager;
+  const mode2 = a0.mode;
+  env22596[3] = void 0;
+  env22596[4] = void 0;
+  env22596[5] = void 0;
+  env22596[6] = void 0;
+  env22596[7] = void 0;
+  const ref2 = useRef({
+    id: void 0,
+    mode: void 0,
+    width: 0,
+    height: 0,
+    containerHeight: 0,
+    showSecondaryPIP: false
+  });
+  const r33 = _slicedToArray(useState(void 0), 2);
+  const r18 = r33[0];
+  env22596[3] = r18;
+  env22596[4] = r33[1];
+  env22596[5] = useRef(r18);
+  useInsertionEffect(() => {
+    env22596[5].current = env22596[3];
+  });
+  channelId = channelId2;
+  mode = mode2;
+  c22597_2 = void 0;
+  const isConnectedToVoiceChannel = useIsConnectedToVoiceChannel(channelId);
+  c22597_2 = isConnectedToVoiceChannel;
+  const stateFromStores = useStateFromStores([EmbeddedActivitiesStore, FramesStore, ChannelStore], () => {
+    const channel = ChannelStore.getChannel(channelId);
+    if ((channel == null ? void 0 : channel.isVocal()) && !c22597_2) {
+      return false;
+    }
+    L9: {
+      const connectedFrame = FramesStore.getConnectedFrame();
+      const activityPanelMode = FramesStore.getActivityPanelMode();
+      if (connectedFrame != null && activityPanelMode === ActivityPanelModes.PIP) {
+        if (mode !== VoicePanelModes.PIP && mode !== VoicePanelModes.PANEL) {
+          break L9;
+        }
+        return true;
+      }
+    }
+    const connectedActivityLocation = EmbeddedActivitiesStore.getConnectedActivityLocation();
+    if (connectedActivityLocation == null) {
+      return false;
+    }
+    const embeddedActivityLocationChannelId = getEmbeddedActivityLocationChannelId(connectedActivityLocation);
+    const channel2 = ChannelStore.getChannel(embeddedActivityLocationChannelId);
+    const activityPanelMode2 = EmbeddedActivitiesStore.getActivityPanelMode();
+    let r37 = channel2 != null && isActivityInTextSupportedForChannel(channel2) && embeddedActivityLocationChannelId !== channelId;
+    const r43 = activityPanelMode2 === ActivityPanelModes.PIP && (mode === VoicePanelModes.PIP || embeddedActivityLocationChannelId !== channelId);
+    if (r37) {
+      r37 = r43;
+    }
+    return r37;
+  }, [channelId, isConnectedToVoiceChannel, mode]);
+  const selfHasVideo = useSelfHasVideo(channelId);
+  const [r57] = useState(() => throttle((a0) => a0(), 1000, {
+    leading: true
+  }));
+  env22596[6] = r57;
+  useLayoutEffect(() => () => env22596[6].cancel(), [r57]);
+  const r65 = _slicedToArray(useState(() => env22596[2].getTargetDimensions(env22596[1])), 2);
+  const participantTargetDimensions = r65[0];
+  env22596[7] = r65[1];
+  const r71 = calculatePIPState(channelId, layoutManager, focusedId, r18, {
+    connected,
+    mode,
+    focusedId,
+    participantTargetDimensions,
+    selfHasVideo,
+    showSecondaryPIP: stateFromStores
+  });
+  const { participant, dimensions } = r71;
+  const id = participant?.id;
+  let r74 = {
+    ...ref2.current,
+    ...dimensions,
+    id,
+    showSecondaryPIP: stateFromStores,
+    mode: getPIPMode({
+      channelId,
+      connected,
+      manuallyFocusedId: focusedId,
+      mode,
+      selfHasVideo
+    })
+  };
+  const current = r74;
+  const ref = ref2;
+  const r93 = cheapWorkletShallowEqual(current, ref.current);
+  let c22598_2 = !r93;
+  useEffect(() => {
+    if (c22598_2) {
+      ref.current = current;
+    }
+  });
+  if (r93) {
+    r74 = ref.current;
+  }
+  useEffect(() => {
+    let c28179_0;
+    const batchedStoreListener = new BatchedStoreListener([SpeakingStore, ChannelRTCStore], () => {
+      let c30933_0;
+      const r8 = (() => {
+        for (const item of SpeakingStore.getSpeakers()) {
+          if (ChannelRTCStore.getParticipant(env22596[0], item) == null) {
+            continue;
+          }
+          return item;
+        }
+      })();
+      c30933_0 = r8;
+      const r6 = env22596[5];
+      if (r8 !== r6.current && r8 != null) {
+        if (r6.current == null) {
+          (0, env22596[4])(r8);
+        } else {
+          (0, env22596[6])(() => (0, env22596[4])(c30933_0));
+        }
+      }
+    });
+    c28179_0 = batchedStoreListener;
+    batchedStoreListener.attach(`pipstate-change-listeners-${env22596[0]}`);
+    return () => c28179_0.detach();
+  }, [channelId, r57]);
+  useEffect(() => {
+    (0, env22596[7])($mk117092(env22596));
+    return env22596[2].subscribeFromItem(function updateParticipantDimensions() {
+      (0, env22596[7])($mk117092(env22596));
+    });
+  }, [focusedId, layoutManager, participantTargetDimensions]);
+  useExternalPipAspectRatioUpdater_native(channelId, layoutManager, focusedId);
+  return r74;
+}

modules/voice_panel/native/pip/usePIPAvoidanceSpecs.tsx

@@ -0,0 +1,80 @@
+// Metro module 15916 (f15917).
+import { VoicePanelModes } from "../../VoicePanelConstants";
+import { VoicePanelControlsModes } from "../controls/VoicePanelControlsConstants";
+import { PIP_WINDOW_OFFSET } from "../../../panels/morphable/native/MorphablePanelConstants";
+import { useSharedValue, useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
+import useAnimatedKeyboardHeight from "../../../keyboard/native/useAnimatedKeyboardHeight";
+import useScreenNameSharedValue from "../../../panels/morphable/native/useScreenNameSharedValue";
+import { useToken } from "../../../../design/tokens/native/useToken";
+import Module712 from "../../../../_bundle/Module712";
+import * as _cheapWorkletShallowEqual from "../../../reanimated/native/cheapWorkletShallowEqual";
+import getPIPBottomOffsetForPIPMode from "../../../panels/morphable/native/getPIPBottomOffsetForPIPMode";
+import getAdjustedBottomOffsets from "../../../panels/morphable/native/getAdjustedBottomOffsets";
+import calculateVoicePanelHeaderSpecs from "../header/calculateVoicePanelHeaderSpecs";
+import updateSharedValueIfChanged_native from "../../../reanimated/utils/updateSharedValueIfChanged.native";
+const __initData = {
+  code: "function usePIPAvoidanceSpecsTsx1(){const{mode,controlsSpecs,keyboardHeight,safeArea,screenName}=this.__closure;return{mode:mode.get(),controlsSpecs:controlsSpecs.get(),keyboardHeight:keyboardHeight.get(),safeArea:safeArea.get(),screenName:screenName.get()};}"
+};
+const __initData2 = {
+  code: "function usePIPAvoidanceSpecsTsx2(props,previous){const{cheapWorkletShallowEqual,VoicePanelModes,VoicePanelControlsModes,DEFAULT_CHANNEL_INPUT_HEIGHT,PIP_WINDOW_OFFSET,getPIPBottomOffsetForPIPMode,getAdjustedBottomOffsets,calculateVoicePanelHeaderSpecs,edgeGutter,updateSharedValueIfChanged,pipAvoidanceSpecs}=this.__closure;if(cheapWorkletShallowEqual(props,previous!==null&&previous!==void 0?previous:undefined))return;const{mode:mode,controlsSpecs:controlsSpecs,keyboardHeight:keyboardHeight,safeArea:safeArea,screenName:screenName}=props;const screenBottomOffset=function(){if(mode!==VoicePanelModes.PIP){if(mode===VoicePanelModes.PANEL&&controlsSpecs.mode===VoicePanelControlsModes.DRAWER){return DEFAULT_CHANNEL_INPUT_HEIGHT+PIP_WINDOW_OFFSET;}return 0;}return getPIPBottomOffsetForPIPMode(screenName);}();let{bottomOffset:bottomOffset}=getAdjustedBottomOffsets({screenBottomOffset:screenBottomOffset,safeAreaBottom:safeArea.bottom,keyboardHeight:keyboardHeight});if(keyboardHeight<=0&&mode===VoicePanelModes.PANEL&&controlsSpecs.mode===VoicePanelControlsModes.FLOATING_DEFAULT){bottomOffset+=controlsSpecs.height+PIP_WINDOW_OFFSET;}const{height:headerHeight}=calculateVoicePanelHeaderSpecs(safeArea,edgeGutter);updateSharedValueIfChanged(pipAvoidanceSpecs,{top:mode===VoicePanelModes.PANEL&&controlsSpecs.mode===VoicePanelControlsModes.FLOATING_DEFAULT?headerHeight:0,bottom:bottomOffset});}"
+};
+export default function usePIPAvoidanceSpecs({ mode, controlsSpecs, safeArea }) {
+  const sharedValue = useSharedValue({
+    top: 0,
+    bottom: 0
+  });
+  const animatedKeyboardHeight = useAnimatedKeyboardHeight();
+  let c22601_4 = animatedKeyboardHeight;
+  const screenNameSharedValue = useScreenNameSharedValue();
+  let c22601_5 = screenNameSharedValue;
+  const token = useToken(Module712.modules.mobile.VOICE_PANEL_GUTTER);
+  const r35 = () => ({
+    mode: mode.get(),
+    controlsSpecs: controlsSpecs.get(),
+    keyboardHeight: c22601_4.get(),
+    safeArea: safeArea.get(),
+    screenName: c22601_5.get()
+  });
+  r35.__closure = {
+    mode,
+    controlsSpecs,
+    keyboardHeight: animatedKeyboardHeight,
+    safeArea,
+    screenName: screenNameSharedValue
+  };
+  r35.__workletHash = 17017598468922;
+  r35.__initData = __initData;
+  const u = function u(a0, a1) {
+    if (!_cheapWorkletShallowEqual.cheapWorkletShallowEqual(a0, a1 == null ? void 0 : a1)) {
+      const { mode: mode2, controlsSpecs: controlsSpecs2, keyboardHeight, safeArea: safeArea2, screenName } = a0;
+      const bottomOffset = getAdjustedBottomOffsets({
+        screenBottomOffset: mode2 !== VoicePanelModes.PIP ? mode2 === VoicePanelModes.PANEL ? controlsSpecs2.mode === VoicePanelControlsModes.DRAWER ? 60 + PIP_WINDOW_OFFSET : 0 : 0 : getPIPBottomOffsetForPIPMode(screenName),
+        safeAreaBottom: safeArea2.bottom,
+        keyboardHeight
+      }).bottomOffset;
+      const bottom = keyboardHeight <= 0 && mode2 === VoicePanelModes.PANEL && controlsSpecs2.mode === VoicePanelControlsModes.FLOATING_DEFAULT ? bottomOffset + (controlsSpecs2.height + PIP_WINDOW_OFFSET) : bottomOffset;
+      const height = calculateVoicePanelHeaderSpecs(safeArea2, token).height;
+      updateSharedValueIfChanged_native(sharedValue, {
+        top: mode2 === VoicePanelModes.PANEL ? controlsSpecs2.mode === VoicePanelControlsModes.FLOATING_DEFAULT ? height : 0 : 0,
+        bottom
+      });
+    }
+  };
+  u.__closure = {
+    cheapWorkletShallowEqual: _cheapWorkletShallowEqual.cheapWorkletShallowEqual,
+    VoicePanelModes,
+    VoicePanelControlsModes,
+    DEFAULT_CHANNEL_INPUT_HEIGHT: 60,
+    PIP_WINDOW_OFFSET,
+    getPIPBottomOffsetForPIPMode,
+    getAdjustedBottomOffsets,
+    calculateVoicePanelHeaderSpecs,
+    edgeGutter: token,
+    updateSharedValueIfChanged: updateSharedValueIfChanged_native,
+    pipAvoidanceSpecs: sharedValue
+  };
+  u.__workletHash = 13029906729161;
+  u.__initData = __initData2;
+  useAnimatedReaction(r35, u);
+  return sharedValue;
+};

modules/voice_panel/native/prejoin/VoicePanelPreJoinContent.tsx

@@ -0,0 +1,516 @@
+// Metro module 15984 (f15985).
+import { useContext, useCallback, useState, memo, useEffect } from "react";
+import { StyleSheet } from "react-native";
+import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
+import GameConsoleStore from "../../../game_console/GameConsoleStore";
+import VoiceChannelBlockedUserStore from "../../../shared_space_warnings/VoiceChannelBlockedUserStore";
+import ApplicationStreamingStore from "../../../../stores/ApplicationStreamingStore";
+import AuthenticationStore from "../../../../stores/AuthenticationStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import PermissionStore from "../../../../stores/PermissionStore";
+import SessionsStore from "../../../../stores/SessionsStore";
+import UserStore from "../../../../stores/UserStore";
+import VoiceStateStore from "../../../../stores/VoiceStateStore";
+import SortedVoiceStateStore from "../../../../stores/views/SortedVoiceStateStore";
+import { MODE_CHANGE_PHYSICS } from "../../VoicePanelConstants";
+import { EDGE_GUTTER } from "../card/VoicePanelCardConstants";
+import { AnalyticEvents, AnalyticsSections, Permissions } from "../../../../Constants";
+import { VoiceChannelWarningSurfaces } from "../../../shared_space_warnings/SharedSpaceWarningConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { BASE_VOICE_PANEL_HEADER_HEIGHT } from "../header/calculateVoicePanelHeaderSpecs";
+import Module712 from "../../../../_bundle/Module712";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import SelectedChannelActionCreators from "../../../../actions/SelectedChannelActionCreators";
+import { watchStream } from "../../../../actions/StreamActionCreators";
+import { encodeStreamKey } from "../../../go_live/utils/StreamKeyUtils";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import NativeView from "../../../core/native/NativeView";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { t, intl } from "../../../../intl/index.native";
+import { VoicePanelStreamPreview } from "../shared/VoicePanelStreamPreview";
+import useGetOrFetchApplications from "../../../applications/useGetOrFetchApplications";
+import { getEmbeddedActivityLocationChannelId } from "../../../activities/utils/embeddedActivityLocationUtils";
+import useActivityUsers from "../../../activities/useActivityUsers";
+import { getWindowDimensions } from "../../../screen/useWindowDimensions.native";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useAnimatedReaction, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import { useEmbeddedActivityJoinability, EmbeddedActivityJoinability } from "../../../activities/utils/getEmbeddedActivityJoinability";
+import handlePressJoinActivity, { maybeJoinEmbeddedActivity } from "../../../activities/handlePressJoinActivity";
+import useEmbeddedActivityBackground from "../../../activities/utils/useEmbeddedActivityBackground";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import ActivityShelfItemBackground from "../controls/activities/ActivityShelfItemBackground";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import useTrackImpression from "../../../app_analytics/useTrackImpression";
+import { ImpressionNames } from "../../../../_bundle/Module503";
+import { CircleErrorIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
+import { VoicePanelFormSection, MemberRowItem } from "../shared/FormComponents";
+import NicknameUtils from "../../../../utils/NicknameUtils";
+import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
+import roundToNearestPixel from "../utils/roundToNearestPixel";
+import useShowChannelOptInNotice from "../../../opt_in_channels/useShowChannelOptInNotice";
+import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import VoicePanelChannelOptInNotice from "../shared/VoicePanelChannelOptInNotice";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import * as _TransitionGroup from "../../../../design/components/TransitionGroup/TransitionGroup";
+import { TransitionItem } from "../../../../design/components/TransitionGroup/TransitionGroup";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import useIsConnectedToVoiceChannel from "../hooks/useIsConnectedToVoiceChannel";
+import { areVoicePanelPreJoinContentPropsEqual } from "./VoicePanelPreJoinUtils";
+let useStyles, Component2, __initData, __initData2, ActivityInfo, Component, RoomMembersSection, RoomMembers, Component3, VoicePanelPreJoinContentInner, __initData3, __initData4, PreJoinTransitioner, renderItem;
+const StreamPreview = function StreamPreview(props) {
+  let stateFromStores;
+  const { voiceState, stream, channelId } = props;
+  stateFromStores = void 0;
+  const styles = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const { mode, setFocused } = context;
+  const callback = useCallback(() => {
+    SelectedChannelActionCreators.selectVoiceChannel(channelId);
+    watchStream(stream, {
+      forceMultiple: true
+    });
+    setFocused(encodeStreamKey(stream));
+  }, [channelId, stream, setFocused]);
+  stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  const stateFromStores2 = useStateFromStores([PermissionStore], () => PermissionStore.can(Permissions.CONNECT, stateFromStores));
+  const I0mOAs = t.I0mOAs;
+  let nick = voiceState.nick;
+  if (nick == null) {
+    nick = voiceState.user.username;
+  }
+  return <NativeView style={styles.activityInfoWrapper}>
+    <Text variant="text-sm/semibold" style={styles.activityInfoHeader} color="text-default">
+      {intl.format(I0mOAs, {
+        username: nick
+      })}
+    </Text>
+    <NativeView style={styles.previewImageWrapper}>
+      <VoicePanelStreamPreview mode={mode} disabled={!stateFromStores2} stream={stream} onPress={callback} />
+    </NativeView>
+  </NativeView>;
+};
+ActivityInfo = function ActivityInfo(props) {
+  let setState, embeddedActivityJoinability, c22675_7;
+  const { activity, analyticsLocations } = props;
+  setState = void 0;
+  embeddedActivityJoinability = void 0;
+  c22675_7 = void 0;
+  const styles = useStyles();
+  const [inputApplication] = useGetOrFetchApplications([activity.applicationId]);
+  const activityUsers = useActivityUsers(activity.applicationId, getEmbeddedActivityLocationChannelId(activity.location));
+  const context = useContext(VoicePanelStateContext);
+  const { channelId: channelId2, windowDimensions } = context;
+  let size;
+  [size, setState] = useState(() => getWindowDimensions().width - 2 * (EDGE_GUTTER + 16));
+  const u = () => windowDimensions.get().width;
+  u.__closure = {
+    windowDimensions
+  };
+  u.__workletHash = 16837592262556;
+  u.__initData = __initData;
+  const c = function c(a0, a1) {
+    if (a0 !== a1) {
+      _ReanimatedRexport.runOnJS(setState)(a0 - 2 * (EDGE_GUTTER + 16));
+    }
+  };
+  c.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    setActivityPreviewWidth: setState,
+    EDGE_GUTTER
+  };
+  c.__workletHash = 1481130207412;
+  c.__initData = __initData2;
+  useAnimatedReaction(u, c);
+  embeddedActivityJoinability = useEmbeddedActivityJoinability({
+    userId: AuthenticationStore.getId(),
+    channelId: channelId2,
+    application: inputApplication
+  });
+  const r2 = embeddedActivityJoinability === EmbeddedActivityJoinability.CAN_JOIN;
+  c22675_7 = r2;
+  const callback = useCallback(() => {
+    let c28195_0 = async () => {
+      L13: {
+        if (c22675_7) {
+          if (inputApplication != null) {
+            await maybeJoinEmbeddedActivity({
+              channelId: channelId2,
+              applicationId: inputApplication.id,
+              launchId: activity.launchId,
+              inputApplication,
+              analyticsLocations
+            });
+            break L13;
+          }
+        } else {
+          SelectedChannelActionCreators.selectVoiceChannel(channelId2);
+        }
+        return void 0;
+      }
+    };
+    handlePressJoinActivity({
+      embeddedActivityJoinability,
+      handleCanJoin: function() {
+        return c28195_0.apply(this, arguments);
+      }
+    });
+  }, [activity.launchId, analyticsLocations, inputApplication, r2, channelId2, embeddedActivityJoinability]);
+  const embeddedActivityBackground = useEmbeddedActivityBackground({
+    applicationId: activity.applicationId,
+    size,
+    names: ["embedded_background"]
+  });
+  const r3 = inputApplication == null;
+  let r87 = null;
+  if (!r3) {
+    const r111 = [<Text variant="text-sm/semibold" style={styles.activityInfoHeader} color="text-default">
+      {intl.format(t["n/IJ6Y"], {
+        n: activityUsers.length
+      })}
+    </Text>, ,];
+    const r126 = [<NativeView style={styles.previewImage}>
+      <ActivityShelfItemBackground imageBackground={embeddedActivityBackground} aspectRatio={1.7777777777777777} />
+    </NativeView>, ,];
+    const props2 = {
+      text: intl.formatToPlainString(t["YV/hE8"], {
+        name: inputApplication.name
+      }),
+      size: "sm",
+      iconPosition: "start",
+      variant: "primary-overlay",
+      icon: null,
+      onPress: null
+    };
+    const Icon = Button.Icon;
+    let uri = inputApplication.getIconURL(20);
+    if (uri == null) {
+      uri = void 0;
+    }
+    props2.icon = <Icon variant="entity" source={{
+      uri,
+      width: 20,
+      height: 20
+    }} />;
+    props2.onPress = callback;
+    r126[1] = <NativeView style={styles.joinButtonWrapper}>
+      <Button {...props2} />
+    </NativeView>;
+    r111[1] = <PressableOpacity activeOpacity={0.7} onPress={callback} style={styles.previewImageWrapper} accessible={false}>{r126}</PressableOpacity>;
+    r87 = <NativeView style={styles.activityInfoWrapper}>{r111}</NativeView>;
+  }
+  return r87;
+};
+RoomMembersSection = function RoomMembersSection(props) {
+  const { title, members, channelId: channelId3, guildId } = props;
+  return <VoicePanelFormSection title={title} hasIcons>
+    {(() => {
+      const r0 = [];
+      for (const member of members) {
+        const key = member;
+        const user = UserStore.getUser(member);
+        if (user != null) {
+          const user2 = user;
+          r0.push(<MemberRowItem key={key} user={user2} channelId={channelId3} guildId={guildId} nick={NicknameUtils.getName(guildId, channelId3, user2)} />);
+        }
+      }
+      return r0;
+    })()}
+  </VoicePanelFormSection>;
+};
+RoomMembers = function RoomMembers(props) {
+  const { members: members2, streamingMembers, blockedMembers, ignoredMembers } = props;
+  const context = useContext(VoicePanelStateContext);
+  const { channelId: channelId4, guildId: guildId2 } = context;
+  const [state, setState2] = useState(20);
+  const r36 = blockedMembers.size + ignoredMembers.size;
+  const r9 = members2.length - r36;
+  return <>
+    {[r36 > 0 && <Component channelId={channelId4} blockedUserIds={blockedMembers} ignoredUserIds={ignoredMembers} />, streamingMembers.map((streamingMember) => {
+      const [voiceState, stream2] = streamingMember;
+      return <StreamPreview key={stream2.ownerId} channelId={channelId4} voiceState={voiceState} stream={stream2} />;
+    }), blockedMembers.size > 0 && <RoomMembersSection title={intl.formatToPlainString(t.pGJ1Qy, {
+      n: blockedMembers.size
+    })} members={blockedMembers} channelId={channelId4} guildId={guildId2} />, ignoredMembers.size > 0 && <RoomMembersSection title={intl.formatToPlainString(t["/pXOCN"], {
+      n: ignoredMembers.size
+    })} members={ignoredMembers} channelId={channelId4} guildId={guildId2} />, r9 > 0 && <VoicePanelFormSection hasIcons title={r36 === 0 ? intl.formatToPlainString(t.vloEU7, {
+      n: members2.length
+    }) : intl.formatToPlainString(t.R0h4pE, {
+      n: r9
+    })}>
+      {(() => {
+        const r0 = [];
+        for (const item of members2) {
+          if (!(r0.length >= state)) {
+            if (blockedMembers.has(item.user.id) || ignoredMembers.has(item.user.id)) {
+              continue;
+            }
+            r0.push(<MemberRowItem key={item.user.id} user={item.user} channelId={channelId4} guildId={guildId2} nick={NicknameUtils.getName(guildId2, channelId4, item.user)} />);
+            continue;
+          }
+          break;
+        }
+        return r0;
+      })()}
+      {r9 > state && <TableRow label={intl.string(t.F4MCUO)} onPress={() => setState2(state + 20)} />}
+    </VoicePanelFormSection>]}
+  </>;
+};
+PreJoinTransitioner = function PreJoinTransitioner(props) {
+  const { transitionState, transitionCleanUp, ...props2 } = props;
+  const styles = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const { windowDimensions: windowDimensions2, controlsSpecs, safeArea, preJoinContentSize, useReducedMotion } = context;
+  const l = function l() {
+    const height = windowDimensions2.get().height;
+    const r38 = {
+      paddingBottom: height - roundToNearestPixel(0.8 * height) + controlsSpecs.get().height + safeArea.get().bottom,
+      opacity: null,
+      transform: null
+    };
+    const YEETED = _TransitionGroup.TransitionStates.YEETED;
+    let r46 = 1;
+    r38.opacity = _spring.withSpring(transitionState === YEETED ? 0 : 1);
+    if (!(!useReducedMotion.get() && transitionState === _TransitionGroup.TransitionStates.YEETED)) {
+      r46 = 0;
+    }
+    const r59 = _ReanimatedRexport.interpolate(r46, [0, 1], [0, 400]);
+    const r60 = function(r3 = false) {
+      if (r3) {
+        r3 = transitionState === _TransitionGroup.TransitionStates.YEETED;
+      }
+      if (r3) {
+        _ReanimatedRexport.runOnJS(transitionCleanUp)();
+      }
+    };
+    r60.__closure = {
+      transitionState,
+      TransitionStates: _TransitionGroup.TransitionStates,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      transitionCleanUp
+    };
+    r60.__workletHash = 2541522666097;
+    r60.__initData = __initData4;
+    r38.transform = [{
+      translateY: _spring.withSpring(r59, MODE_CHANGE_PHYSICS, "respect-motion-settings", r60)
+    }];
+    return r38;
+  };
+  l.__closure = {
+    windowDimensions: windowDimensions2,
+    roundToNearestPixel,
+    controlsSpecs,
+    safeArea,
+    withSpring: _spring.withSpring,
+    transitionState,
+    TransitionStates: _TransitionGroup.TransitionStates,
+    interpolate: _ReanimatedRexport.interpolate,
+    useReducedMotion,
+    MODE_CHANGE_PHYSICS,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    transitionCleanUp
+  };
+  l.__workletHash = 16643118377748;
+  l.__initData = __initData3;
+  return <ReanimatedNativeView style={useAnimatedStyle(l)} collapsable={false}>
+    <NativeView onLayout={useCallback((a0) => {
+      preJoinContentSize.set(roundToNearestPixel(a0.nativeEvent.layout.height));
+    }, [preJoinContentSize])} collapsable={false} style={styles.contentWrapper}>
+      <VoicePanelPreJoinContentInner {...props2} />
+    </NativeView>
+  </ReanimatedNativeView>;
+};
+renderItem = function renderItem(a0, a1, a2, a3) {
+  return <PreJoinTransitioner key={a0} transitionState={a2} transitionCleanUp={a3} {...a1} />;
+};
+useStyles = createStyles({
+  contentWrapper: {
+    paddingTop: EDGE_GUTTER + BASE_VOICE_PANEL_HEADER_HEIGHT + EDGE_GUTTER,
+    gap: 24,
+    paddingBottom: 16
+  },
+  channelInfoWrapper: {
+    paddingHorizontal: 16
+  },
+  subheading: {
+    textAlign: "center",
+    paddingTop: 16,
+    paddingBottom: 16
+  },
+  previewImageWrapper: {
+    position: "relative",
+    width: "100%",
+    aspectRatio: 1.7777777777777777,
+    borderRadius: Module712.radii.lg,
+    overflow: "hidden",
+    justifyContent: "center",
+    backgroundColor: Module712.colors.BLACK
+  },
+  previewImage: {
+    ...StyleSheet.absoluteFillObject,
+    opacity: 0.5
+  },
+  activityInfoWrapper: {
+    paddingHorizontal: 16
+  },
+  activityInfoHeader: {
+    marginBottom: 8
+  },
+  joinButtonWrapper: {
+    ...StyleSheet.absoluteFillObject,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  optInChannelsContainer: {
+    marginHorizontal: 16
+  },
+  blockedMemberWarning: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8,
+    padding: Module712.space.PX_8,
+    borderRadius: Module712.radii.xs,
+    borderColor: Module712.colors.ICON_FEEDBACK_WARNING,
+    borderWidth: 1,
+    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_WARNING,
+    marginHorizontal: Module712.space.PX_16
+  },
+  consolePreJoinPadding: {
+    height: 36
+  }
+});
+Component2 = memo(function({ hasMembers }) {
+  const styles = useStyles();
+  return hasMembers ? null : <NativeView style={styles.channelInfoWrapper}>
+    <Text variant="text-sm/medium" color="text-default" style={styles.subheading}>
+      {intl.string(t.sS2J0G)}
+    </Text>
+  </NativeView>;
+});
+__initData = {
+  code: "function VoicePanelPreJoinContentTsx1(){const{windowDimensions}=this.__closure;return windowDimensions.get().width;}"
+};
+__initData2 = {
+  code: "function VoicePanelPreJoinContentTsx2(width,previous){const{runOnJS,setActivityPreviewWidth,EDGE_GUTTER}=this.__closure;if(width===previous)return;runOnJS(setActivityPreviewWidth)(width-(EDGE_GUTTER+16)*2);}"
+};
+Component = memo(function({ channelId: channelId8, blockedUserIds, ignoredUserIds }) {
+  const styles = useStyles();
+  useTrackImpression({
+    name: ImpressionNames.VOICE_CHANNEL_BLOCKED_USER_WARNING,
+    properties: {
+      channel_id: channelId8,
+      blocked_user_ids: Array.from(blockedUserIds),
+      warning_surface: VoiceChannelWarningSurfaces.PRE_JOIN_SHEET
+    }
+  });
+  const size = ignoredUserIds.size;
+  const size2 = blockedUserIds.size;
+  const r38 = intl.string(t.CjrALd);
+  return <NativeView style={styles.blockedMemberWarning}>
+    <CircleErrorIcon color="text-feedback-warning" />
+    <Text variant="text-sm/bold" color="interactive-text-active" style={{
+      flexShrink: 1
+    }}>
+      {size2 > 0 && size > 0 ? intl.string(t.MpRfpC) : size > 0 ? intl.format(t.u9trAZ, {
+        n: size
+      }) : intl.format(t["6X29zb"], {
+        n: size2
+      })}
+      {" "}
+      {r38 != null ? <Text variant="heading-sm/semibold">{r38}</Text> : null}
+    </Text>
+  </NativeView>;
+});
+Component3 = memo(function({ channelId: channelId5 }) {
+  const styles = useStyles();
+  return useStateFromStores([AuthenticationStore, GameConsoleStore, VoiceStateStore, SessionsStore], () => {
+    let r13 = VoiceStateStore.getVoiceStateForSession(AuthenticationStore.getId(), GameConsoleStore.getRemoteSessionId());
+    if (r13 == null) {
+      r13 = void 0;
+    }
+    let r19 = GameConsoleStore.getAwaitingRemoteSessionInfo()?.channelId === channelId5;
+    if (!r19) {
+      let r21 = r13?.channelId === channelId5;
+      if (r21) {
+        let r24 = r13?.sessionId;
+        if (r24 == null) {
+          r24 = "";
+        }
+        r21 = SessionsStore.getSessionById(r24) != null;
+      }
+      r19 = r21;
+    }
+    return r19;
+  }, [channelId5]) ? <NativeView style={styles.consolePreJoinPadding} /> : null;
+});
+VoicePanelPreJoinContentInner = memo(function VoicePanelPreJoinContentInner(props) {
+  let analyticsLocations2;
+  const { members: members3, streamingMembers, blockedMembers: blockedMembers2, ignoredMembers: ignoredMembers2, activities } = props;
+  analyticsLocations2 = void 0;
+  const styles = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const { channelId: channelId6, guildId: guildId3 } = context;
+  const stateFromStores2 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId6));
+  const showChannelOptInNotice = useShowChannelOptInNotice(stateFromStores2);
+  analyticsLocations2 = useAnalyticsLocations(AnalyticsLocation.VOICE_PANEL_PRE_JOIN).analyticsLocations;
+  useEffect(() => {
+    AnalyticsUtils.track(AnalyticEvents.VIEW_VOICE_CHANNEL, {
+      guild_id: guildId3,
+      channel_id: channelId6,
+      location_stack: analyticsLocations2
+    });
+  }, [channelId6, guildId3, analyticsLocations2]);
+  return <>
+    <Component2 hasMembers={members3.length > 0} />
+    {showChannelOptInNotice ? <VoicePanelChannelOptInNotice style={styles.optInChannelsContainer} channel={stateFromStores2} analyticsSection={AnalyticsSections.CHANNEL} /> : null}
+    {activities.map((a0) => <ActivityInfo key={a0.launchId} activity={a0} analyticsLocations={analyticsLocations2} />)}
+    {(members3.length > 0 || blockedMembers2.size > 0 || ignoredMembers2.size > 0) && <RoomMembers members={members3} streamingMembers={streamingMembers} blockedMembers={blockedMembers2} ignoredMembers={ignoredMembers2} />}
+    <Component3 channelId={channelId6} />
+  </>;
+});
+__initData3 = {
+  code: "function VoicePanelPreJoinContentTsx3(){const{windowDimensions,roundToNearestPixel,controlsSpecs,safeArea,withSpring,transitionState,TransitionStates,interpolate,useReducedMotion,MODE_CHANGE_PHYSICS,runOnJS,transitionCleanUp}=this.__closure;const{height:windowHeight}=windowDimensions.get();return{paddingBottom:windowHeight-roundToNearestPixel(windowHeight*0.8)+controlsSpecs.get().height+safeArea.get().bottom,opacity:withSpring(transitionState===TransitionStates.YEETED?0:1),transform:[{translateY:withSpring(interpolate(!useReducedMotion.get()&&transitionState===TransitionStates.YEETED?1:0,[0,1],[0,400]),MODE_CHANGE_PHYSICS,'respect-motion-settings',function(finished=false){finished&&transitionState===TransitionStates.YEETED&&runOnJS(transitionCleanUp)();})}]};}"
+};
+__initData4 = {
+  code: "function VoicePanelPreJoinContentTsx4(finished=false){const{transitionState,TransitionStates,runOnJS,transitionCleanUp}=this.__closure;finished&&transitionState===TransitionStates.YEETED&&runOnJS(transitionCleanUp)();}"
+};
+const r150 = memo(function VoicePanelPreJoinWrapper() {
+  const context = useContext(VoicePanelStateContext);
+  const { channelId: channelId7, guildId: guildId4 } = context;
+  const isConnectedToVoiceChannel = useIsConnectedToVoiceChannel(channelId7);
+  let c22681_2 = isConnectedToVoiceChannel;
+  return <TransitionItem item={useStateFromStores([SortedVoiceStateStore, VoiceChannelBlockedUserStore, EmbeddedActivitiesStore, ApplicationStreamingStore], () => {
+    if (c22681_2) {
+      return void 0;
+    }
+    let r9 = guildId4;
+    if (guildId4 == null) {
+      r9 = void 0;
+    }
+    const voiceStatesForChannelAlt = SortedVoiceStateStore.getVoiceStatesForChannelAlt(channelId7, r9);
+    const blockedUsersForVoiceChannel = VoiceChannelBlockedUserStore.getBlockedUsersForVoiceChannel(channelId7);
+    const ignoredUsersForVoiceChannel = VoiceChannelBlockedUserStore.getIgnoredUsersForVoiceChannel(channelId7);
+    return {
+      members: voiceStatesForChannelAlt,
+      activities: EmbeddedActivitiesStore.getEmbeddedActivitiesForChannel(channelId7),
+      streamingMembers: (() => {
+        const r0 = [];
+        for (const item of voiceStatesForChannelAlt) {
+          if (item.voiceState.selfStream) {
+            const streamForUser = ApplicationStreamingStore.getStreamForUser(item.user.id, guildId4);
+            if (streamForUser != null) {
+              r0.push([item, streamForUser]);
+            }
+          }
+        }
+        return r0;
+      })(),
+      blockedMembers: blockedUsersForVoiceChannel,
+      ignoredMembers: ignoredUsersForVoiceChannel
+    };
+  }, [isConnectedToVoiceChannel, channelId7, guildId4], areVoicePanelPreJoinContentPropsEqual)} renderItem={renderItem} />;
+});
+export default r150;

modules/voice_panel/native/prejoin/VoicePanelPreJoinUtils.tsx

@@ -0,0 +1,24 @@
+// Metro module 15985 (f15986).
+import shallowEqual from "../../../../_bundle/shallowEqual";
+export function areVoicePanelPreJoinContentPropsEqual(a0, a1) {
+  if (a0 != null && a1 != null) {
+    if (!shallowEqual(a0, a1, ["streamingMembers"])) {
+      return false;
+    }
+    let r30 = 0;
+    for (const streamingMember of a0.streamingMembers) {
+      const r36 = streamingMember;
+      const r39 = a1.streamingMembers[r30];
+      if (r39 != null) {
+        if (r36[0] === r39[0] && r36[1] === r39[1]) {
+          r30 = r30 + 1;
+          continue;
+        }
+        return false;
+      }
+      return false;
+    }
+    return true;
+  }
+  return a0 === a1;
+}

modules/voice_panel/native/shared/CircleWithCutout.tsx

@@ -0,0 +1,46 @@
+// Metro module 16014 (f16015).
+import { memo } from "react";
+import { PixelRatio } from "react-native";
+import * as _CircleWithCutoutUtils from "./CircleWithCutoutUtils";
+import { getCutoutCenterX, getCutoutCenterY } from "./CircleWithCutoutUtils";
+import Module8531, { Defs, Mask, Rect, Circle } from "../../../../_bundle/Module8531";
+let c11481_5 = PixelRatio.get();
+const r26 = memo(function CircleWithCutout(props) {
+  const { fill, circleRadius, cutoutRadius, enableCutout, cutoutPositionInDegrees } = props;
+  let alignBadgeEdgeWithCircleEdge = props.alignBadgeEdgeWithCircleEdge;
+  if (alignBadgeEdgeWithCircleEdge === void 0) {
+    alignBadgeEdgeWithCircleEdge = false;
+  }
+  const { badgeRadius, scaleToPixelDensity = true } = props;
+  const r22 = scaleToPixelDensity ? c11481_5 : 1;
+  const cx = circleRadius * r22;
+  const r27 = badgeRadius != null ? badgeRadius * r22 : void 0;
+  const height = 2 * cx;
+  const cutoutCenterX = getCutoutCenterX(cx, cutoutPositionInDegrees);
+  const cutoutCenterY = getCutoutCenterY(cx, cutoutPositionInDegrees);
+  if (alignBadgeEdgeWithCircleEdge) {
+    alignBadgeEdgeWithCircleEdge = r27 != null;
+  }
+  let cy = cutoutCenterY;
+  let cx2 = cutoutCenterX;
+  if (alignBadgeEdgeWithCircleEdge) {
+    cx2 = 2 * cx - r27;
+    cy = r27;
+  }
+  return <Module8531 height={height} width={height} style={{
+    transform: [{
+      scale: 1 / r22
+    }]
+  }}>
+    <Defs>
+      <Mask id="mask">
+        <Rect width={height} height={height} fill="white" />
+        <Circle cx={cx2} cy={cy} r={cutoutRadius * r22} fill="black" />
+      </Mask>
+    </Defs>
+    <Circle cx={cx} cy={cx} r={cx} fill={fill} mask={enableCutout ? "url(#mask)" : void 0} />
+  </Module8531>;
+});
+export default r26;
+export const getBadgeLeft = _CircleWithCutoutUtils.getBadgeLeft;
+export const getBadgeTop = _CircleWithCutoutUtils.getBadgeTop;