yeet

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