yeet

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;
+  };
+}