yeet

modules/voice_panel/native/shared/CircleWithCutout.tsx

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

modules/voice_panel/native/shared/CircleWithCutoutUtils.tsx

@@ -0,0 +1,28 @@
+// Metro module 10530 (f10531).
+import Module8531, { Defs, Mask, Rect, Circle } from "../../../../_bundle/Module8531";
+let c7072_5 = Math.PI / 180;
+export default function CircleWithCutout(props) {
+  const { circleRadius, cutoutRadius, enableCutout, cutoutPositionInDegrees, circleFillColor } = props;
+  const height = 2 * circleRadius;
+  return <Module8531 height={height} width={height}>
+    <Defs>
+      <Mask id="mask">
+        <Rect width={height} height={height} fill="white" />
+        <Circle cx={circleRadius + circleRadius * Math.sin(cutoutPositionInDegrees * c7072_5)} cy={circleRadius - circleRadius * Math.cos(cutoutPositionInDegrees * c7072_5)} r={cutoutRadius} fill="black" />
+      </Mask>
+    </Defs>
+    <Circle cx={circleRadius} cy={circleRadius} r={circleRadius} fill={circleFillColor} mask={enableCutout ? "url(#mask)" : void 0} />
+  </Module8531>;
+};
+export function getBadgeTop(a0, a1, a2) {
+  return a1 - a1 * Math.cos(a2 * c7072_5) - a0;
+}
+export function getBadgeLeft(a0, a1, a2) {
+  return a1 + a1 * Math.sin(a2 * c7072_5) - a0;
+}
+export function getCutoutCenterX(a0, a1) {
+  return a0 + a0 * Math.sin(a1 * c7072_5);
+}
+export function getCutoutCenterY(a0, a1) {
+  return a0 - a0 * Math.cos(a1 * c7072_5);
+}

modules/voice_panel/native/shared/FormComponents.tsx

@@ -0,0 +1,127 @@
+// Metro module 8860 (f8861).
+import { useCallback, useMemo } from "react";
+import PresenceStore from "../../../../stores/PresenceStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import NativeView from "../../../core/native/NativeView";
+import { TableRowGroup } from "../../../../design/components/TableRow/native/TableRowGroup.native";
+import { MuteDeafenIcon, VideoIcon } from "./VoiceStateIcons";
+import { IconSizes, Avatar, AvatarSizes } from "../../../../design/void/native";
+import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
+import { useMuteDeafenIconState, useVideoIconState } from "../utils/VoiceStateIconUtils";
+import { useIsUserSecureFramesVerified } from "../../../rtc/hooks/useIsSecureFramesVerified";
+import { useCanRing } from "../../../calls/useCanRing";
+import useDisplayNameStyles from "../../../display_name_styles/hooks/useDisplayNameStyles";
+import { useDisplayNameStylesFont } from "../../../display_name_styles/native/useDisplayNameStylesFont";
+import showUserProfileActionSheet from "../../../user_profile/native/showUserProfileActionSheet";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { getStreamerActivityByUserId } from "../../../go_live/utils/StreamerApplicationSelectors";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import CallActionCreators from "../../../../actions/CallActionCreators";
+import { getName } from "../../../../utils/UserUtils";
+import GuildTag from "../../../guild_tag/native/GuildTag";
+import { ShieldLockIcon } from "../../../../design/components/Icon/native/redesign/generated/ShieldLockIcon";
+let useStyles;
+const VoiceBadges = function VoiceBadges(props) {
+  const { muteDeafenIconState, videoIconState } = props;
+  const styles = useStyles();
+  return <NativeView style={styles.voiceBadgesContainer}>
+    {muteDeafenIconState != null ? <NativeView style={styles.iconWrapper}>
+      <MuteDeafenIcon state={muteDeafenIconState} size={IconSizes.SMALL} style={styles.icon} />
+    </NativeView> : null}
+    {videoIconState != null ? <NativeView style={styles.iconWrapper}>
+      <VideoIcon state={videoIconState} size={IconSizes.SMALL} style={styles.icon} />
+    </NativeView> : null}
+  </NativeView>;
+};
+useStyles = createStyles({
+  container: {
+    marginHorizontal: 16
+  },
+  voiceBadgesContainer: {
+    flexDirection: "row"
+  },
+  iconWrapper: {
+    marginLeft: 8,
+    padding: 6,
+    backgroundColor: Module712.colors.MOBILE_VOICE_PANEL_BADGE_BACKGROUND,
+    borderRadius: Module712.radii.round
+  },
+  icon: {
+    width: 16,
+    height: 16,
+    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  },
+  notConnectedAvatar: {
+    opacity: 0.5
+  },
+  memberRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  }
+});
+export function VoicePanelFormSection(props) {
+  const { style, ...props2 } = props;
+  return <NativeView style={[useStyles().container, style]}>
+    <TableRowGroup {...props2} />
+  </NativeView>;
+}
+export function MemberRowItem(props) {
+  let stateFromStores;
+  const { user, channelId, selfStream = false } = props;
+  let c16834_2 = selfStream;
+  let nick = props.nick;
+  const { guildId, notConnected = false, showRing, showSecureFramesUI = false } = props;
+  stateFromStores = void 0;
+  const styles = useStyles();
+  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  const muteDeafenIconState = useMuteDeafenIconState(user.id, guildId);
+  const videoIconState = useVideoIconState(user.id, guildId);
+  const id = user.id;
+  const isUserSecureFramesVerified = useIsUserSecureFramesVerified({
+    userId: id,
+    channelId
+  });
+  const canRing = useCanRing(user, "MemberRowItem");
+  const displayNameStylesFont = useDisplayNameStylesFont({
+    displayNameStyles: useDisplayNameStyles({
+      userId: user.id,
+      guildId
+    })
+  });
+  const callback = useCallback(() => {
+    showUserProfileActionSheet({
+      userId: id,
+      channelId,
+      isVoiceContext: true,
+      sourceAnalyticsLocations: analyticsLocations
+    });
+  }, [id, channelId, analyticsLocations]);
+  stateFromStores = useStateFromStores([PresenceStore], () => getStreamerActivityByUserId(id, PresenceStore));
+  const props2 = {
+    onPress: callback,
+    icon: <Avatar user={user} guildId={guildId} size={AvatarSizes.REFRESH_MEDIUM_32} style={notConnected ? styles.notConnectedAvatar : void 0} />,
+    subLabel: useMemo(() => c16834_2 ? stateFromStores != null ? <Text variant="text-xs/medium" color="text-muted" lineClamp={1}>
+      {intl.format(t["0wJXSh"], {
+        name: stateFromStores.details != null && stateFromStores.details !== "" ? stateFromStores.details : stateFromStores.name
+      })}
+    </Text> : intl.string(t.eXan7B) : null, [stateFromStores, selfStream]),
+    trailing: showRing && canRing ? <Button size="sm" variant="secondary" onPress={() => CallActionCreators.ring(channelId, [user.id], "voice_panel_floating_cta")} text={intl.string(t.bHa9kN)} /> : muteDeafenIconState == null ? videoIconState != null ? <VoiceBadges muteDeafenIconState={muteDeafenIconState} videoIconState={videoIconState} /> : void 0 : <VoiceBadges muteDeafenIconState={muteDeafenIconState} videoIconState={videoIconState} />,
+    label: null
+  };
+  if (nick == null) {
+    nick = getName(user);
+  }
+  props2.label = <NativeView style={styles.memberRow}>
+    <Text variant="text-md/semibold" color={notConnected ? "text-muted" : "text-default"} style={displayNameStylesFont != null && {
+      fontFamily: displayNameStylesFont
+    }}>{nick}</Text>
+    <GuildTag userId={user.id} />
+    {showSecureFramesUI ? isUserSecureFramesVerified ? <ShieldLockIcon size="xs" style={styles.icon} /> : null : null}
+  </NativeView>;
+  return <TableRow {...props2} />;
+}

modules/voice_panel/native/shared/VoicePanelChannelOptInNotice.tsx

@@ -0,0 +1,20 @@
+// Metro module 15941 (f15942).
+import { memo, useCallback } from "react";
+import { setOptInChannel } from "../../../opt_in_channels/OptInChannelsActionCreators";
+import NativeView from "../../../core/native/NativeView";
+import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
+import { intl, t } from "../../../../intl/index.native";
+import { TableRowIcon } from "../../../../design/components/TableRow/native/TableRowIcon.native";
+import { ChannelListMagnifyingGlassIcon } from "../../../../design/components/Icon/native/redesign/generated/ChannelListMagnifyingGlassIcon";
+const r20 = memo(function VoicePanelChannelOptInNotice(props) {
+  const { style, channel, analyticsSection } = props;
+  const callback = useCallback(() => {
+    setOptInChannel(channel.guild_id, channel.id, true, {
+      section: analyticsSection
+    });
+  }, [channel, analyticsSection]);
+  return <NativeView style={style}>
+    <TableRow label={intl.string(t["9mysCh"])} subLabel={intl.string(t.PDUCIN)} icon={<TableRowIcon IconComponent={ChannelListMagnifyingGlassIcon} />} onPress={callback} start end arrow />
+  </NativeView>;
+});
+export default r20;

modules/voice_panel/native/shared/VoicePanelDismissableContent.tsx

@@ -0,0 +1,53 @@
+// Metro module 15924 (f15925).
+import { memo, useContext, useState, useCallback } from "react";
+import ChannelRTCStore from "../../../calls/ChannelRTCStore";
+import { VoicePanelModes } from "../../VoicePanelConstants";
+import { isActivityParticipant } from "../../../calls/CallConstants";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
+import { useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
+import { DismissibleContent } from "../../../../_bundle/Module1358";
+import SelectedDismissibleContent from "../../../dismissible_content/native/SelectedDismissibleContent";
+import { DismissibleActionSheet } from "../../../dismissible_content/native/DismissibleActionSheet";
+let __initData, __initData2;
+const VoiceControlsNuxActionSheetImporter = function VoiceControlsNuxActionSheetImporter() {
+  return import("../../../activities/native/VoiceControlsToggleNuxActionSheet");
+};
+__initData = {
+  code: "function VoicePanelDismissableContentTsx1(){const{mode,VoicePanelModes,focused}=this.__closure;var _focused$get;return mode.get()===VoicePanelModes.PANEL?(_focused$get=focused.get())===null||_focused$get===void 0?void 0:_focused$get.id:undefined;}"
+};
+__initData2 = {
+  code: "function VoicePanelDismissableContentTsx2(manualId,previousManualId){const{runOnJS,handleFocusChange}=this.__closure;if(manualId!==previousManualId){runOnJS(handleFocusChange)(manualId);}}"
+};
+const r33 = memo(function VoicePanelDismissibleContent() {
+  const context = useContext(VoicePanelStateContext);
+  const { channelId, focused, mode } = context;
+  const [state, setState] = useState(false);
+  const callback = useCallback((a0) => {
+    setState(a0 != null && isActivityParticipant(ChannelRTCStore.getParticipant(channelId, a0)));
+  }, [channelId]);
+  const h = () => mode.get() === VoicePanelModes.PANEL ? focused.get()?.id : void 0;
+  h.__closure = {
+    mode,
+    VoicePanelModes,
+    focused
+  };
+  h.__workletHash = 11330064461661;
+  h.__initData = __initData;
+  const f = function f(a0, a1) {
+    if (a0 !== a1) {
+      _ReanimatedRexport.runOnJS(callback)(a0);
+    }
+  };
+  f.__closure = {
+    runOnJS: _ReanimatedRexport.runOnJS,
+    handleFocusChange: callback
+  };
+  f.__workletHash = 15579591345007;
+  f.__initData = __initData2;
+  useAnimatedReaction(h, f);
+  return <SelectedDismissibleContent contentTypes={state ? [DismissibleContent.ACTIVITIES_MOBILE_PIP_FAB_NUX] : []}>
+    {({ visibleContent, markAsDismissed }) => visibleContent === DismissibleContent.ACTIVITIES_MOBILE_PIP_FAB_NUX ? <DismissibleActionSheet markAsDismissed={markAsDismissed} importer={VoiceControlsNuxActionSheetImporter} actionSheetKey="VoiceControlToggleNuxActionSheet" /> : null}
+  </SelectedDismissibleContent>;
+});
+export default r33;

modules/voice_panel/native/shared/VoicePanelHeaderGlassBlur.tsx

@@ -0,0 +1,82 @@
+// Metro module 11435 (f11436).
+import { memo } from "react";
+import { StyleSheet } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import * as _PlatformUtils from "../../../../utils/PlatformUtils";
+import { useAnimatedStyle, useAnimatedProps } from "../../../reanimated/ReanimatedRexport";
+import * as _spring from "../../../../design/animation/reanimated/spring/spring";
+import useTheme from "../../../../hooks/useTheme";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import VisualEffectViewAnimated from "../../../visual_effect_view/native/VisualEffectViewAnimated";
+import { isThemeDark } from "../../../../design/shared";
+import NativeView from "../../../core/native/NativeView";
+const useStyles = createStyles({
+  blur: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0
+  },
+  strokeContainer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: -StyleSheet.hairlineWidth,
+    height: StyleSheet.hairlineWidth
+  },
+  stroke: {
+    height: StyleSheet.hairlineWidth,
+    opacity: 0.15,
+    backgroundColor: "white"
+  },
+  strokeAlt: {
+    height: StyleSheet.hairlineWidth,
+    opacity: 0.8,
+    backgroundColor: "black"
+  },
+  strokeAltLight: {
+    height: StyleSheet.hairlineWidth,
+    opacity: 0.2,
+    backgroundColor: "black"
+  }
+});
+const isAndroid = _PlatformUtils.isAndroid();
+const __initData = {
+  code: "function VoicePanelHeaderGlassBlurTsx1(){const{shown,IS_ANDROID}=this.__closure;return{opacity:shown.get()?IS_ANDROID?0.7:1:0};}"
+};
+const __initData2 = {
+  code: "function VoicePanelHeaderGlassBlurTsx2(){const{withSpring,shown}=this.__closure;return{blurAmount:withSpring(shown.get()?0.3:0)};}"
+};
+const r46 = memo(function HeaderGlassBlur(props) {
+  const { shown, blurStyle, style } = props;
+  const styles = useStyles();
+  const k = () => ({
+    opacity: shown.get() ? isAndroid ? 0.7 : 1 : 0
+  });
+  k.__closure = {
+    shown,
+    IS_ANDROID: isAndroid
+  };
+  k.__workletHash = 3451055086565;
+  k.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(k);
+  const r25 = () => ({
+    blurAmount: _spring.withSpring(shown.get() ? 0.3 : 0)
+  });
+  r25.__closure = {
+    withSpring: _spring.withSpring,
+    shown
+  };
+  r25.__workletHash = 5642055202507;
+  r25.__initData = __initData2;
+  const animatedProps = useAnimatedProps(r25);
+  const theme = useTheme();
+  return <ReanimatedNativeView style={[styles.blur, style, animatedStyle]}>
+    <VisualEffectViewAnimated blurStyle="ultra-thin" blurTheme={isThemeDark(theme) ? "dark" : "light"} style={[StyleSheet.absoluteFillObject, blurStyle]} animatedProps={animatedProps} />
+    <NativeView style={styles.strokeContainer}>
+      <NativeView style={styles.stroke} />
+      <NativeView style={isThemeDark(theme) ? styles.strokeAlt : styles.strokeAltLight} />
+    </NativeView>
+  </ReanimatedNativeView>;
+});
+export default r46;

modules/voice_panel/native/shared/VoicePanelIconButton.tsx

@@ -0,0 +1,15 @@
+// Metro module 15861 (f15862).
+import { memo, forwardRef } from "react";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import { IconButton } from "../../../../design/components/Button/native/IconButton.native";
+const r22 = memo(forwardRef(function(a0, a1) {
+  const { style, overrideVariant: _overrideVariant, layout, ...props } = a0;
+  let overrideVariant = a0.overrideVariant;
+  if (overrideVariant == null) {
+    overrideVariant = "secondary-overlay";
+  }
+  return <ReanimatedNativeView ref={a1} style={style} layout={layout}>
+    <IconButton {...props} size="sm" variant={overrideVariant} maxFontSizeMultiplier={2} />
+  </ReanimatedNativeView>;
+}));
+export default r22;

modules/voice_panel/native/shared/VoicePanelStreamPreview.tsx

@@ -0,0 +1,81 @@
+// Metro module 12031 (f12032).
+import { View, Pressable } from "react-native";
+import ApplicationStreamingStore from "../../../../stores/ApplicationStreamingStore";
+import AuthenticationStore from "../../../../stores/AuthenticationStore";
+import ReanimatedRexport, { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useFetchStreamPreview from "../../../go_live/useFetchStreamPreview";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { encodeStreamKey } from "../../../go_live/utils/StreamKeyUtils";
+import * as _timing from "../../../../design/animation/reanimated/timing/timing";
+import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Pressable);
+const AnimatedComponent2 = ReanimatedRexport.createAnimatedComponent(Button);
+const OPACITY_TIMING = {
+  duration: 200
+};
+const useStyles = createStyles({
+  roundedCard: {
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%",
+    backgroundColor: Module712.colors.VOICE_VIDEO_VIDEO_TILE_BACKGROUND
+  },
+  streamPreviewImage: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    opacity: 0.5
+  },
+  ownStreamTextContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_SCRIM,
+    borderRadius: Module712.radii.sm,
+    marginHorizontal: Module712.space.PX_16
+  },
+  ownStreamText: {
+    textAlign: "center",
+    paddingHorizontal: Module712.space.PX_16,
+    paddingVertical: Module712.space.PX_16
+  }
+});
+const __initData = {
+  code: "function VoicePanelStreamPreviewTsx1(){const{mode,withTiming,OPACITY_TIMING}=this.__closure;if(mode==null){return{opacity:1};}return{opacity:withTiming(mode.get()==='pip'?0:1,OPACITY_TIMING)};}"
+};
+export function VoicePanelStreamPreview(props) {
+  const { mode, stream, disabled, onPress, layout } = props;
+  const styles = useStyles();
+  const previewUrl = useFetchStreamPreview(stream?.guildId, stream?.channelId, stream?.ownerId).previewUrl;
+  const stateFromStores = useStateFromStores([ApplicationStreamingStore, AuthenticationStore], () => stream != null && stream.ownerId === AuthenticationStore.getId() && ApplicationStreamingStore.getStreamerActiveStreamMetadataForStream(encodeStreamKey(stream)) == null, [stream]);
+  const T = function T() {
+    return mode == null ? {
+      opacity: 1
+    } : {
+      opacity: _timing.withTiming(mode.get() === "pip" ? 0 : 1, OPACITY_TIMING)
+    };
+  };
+  T.__closure = {
+    mode,
+    withTiming: _timing.withTiming,
+    OPACITY_TIMING
+  };
+  T.__workletHash = 15496474861955;
+  T.__initData = __initData;
+  return <AnimatedComponent layout={layout} onPress={onPress} style={styles.roundedCard} disabled={disabled || stateFromStores} accessible={false}>
+    {previewUrl != null ? <ReanimatedRexport.Image layout={layout} source={{
+      uri: previewUrl
+    }} style={styles.streamPreviewImage} resizeMode="cover" /> : null}
+    <ReanimatedNativeView style={useAnimatedStyle(T)} layout={layout}>
+      {stateFromStores ? <View style={styles.ownStreamTextContainer}>
+        <Text variant="text-sm/semibold" color="text-overlay-light" style={styles.ownStreamText}>
+          {intl.string(t["ro/HN8"])}
+        </Text>
+      </View> : <AnimatedComponent2 layout={layout} disabled={disabled} text={intl.string(t["7Xq/nV"])} size="sm" variant="primary-overlay" onPress={onPress} />}
+    </ReanimatedNativeView>
+  </AnimatedComponent>;
+}

modules/voice_panel/native/shared/VoicePanelTitleButton.tsx

@@ -0,0 +1,159 @@
+// Metro module 15933 (f15934).
+import { useContext, memo, useCallback } from "react";
+import { View } from "react-native";
+import ApplicationStore from "../../../applications/ApplicationStore";
+import StageInstanceStore from "../../../stage_channels/StageInstanceStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import { ParticipantTypes } from "../../../calls/CallConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { ShieldLockIcon } from "../../../../design/components/Icon/native/redesign/generated/ShieldLockIcon";
+import { intl, t } from "../../../../intl/index.native";
+import { BaseTextButton } from "../../../../design/components/Button/native/BaseTextButton.native";
+import Module5229 from "../../../../_bundle/Module5229";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useChannelName from "../../../channel/useChannelName";
+import { useIsCallSecureFramesVerified } from "../../../rtc/hooks/useIsSecureFramesVerified";
+import { HeaderButton } from "../../../../design/components/experimental/native";
+import Module712 from "../../../../_bundle/Module712";
+import VoicePanelStateContext from "../VoicePanelStateContext";
+import NicknameUtils from "../../../../utils/NicknameUtils";
+import Module15934 from "../../../../_bundle/Module15934";
+import { Stack } from "../../../../design/components/Stack/native/Stack.native";
+import Module6614 from "../../../../_bundle/Module6614";
+import QuestActivityButton from "../../../frames/panel/native/QuestActivityButton";
+import { useVoicePanelHeaderUserStateIcons } from "../header/VoicePanelHeaderUserState";
+import Module4658 from "../../../../_bundle/Module4658";
+import { useDerivedStateFromSharedValue } from "../../../reanimated/native/useStateFromSharedValue";
+import { ChannelTypes } from "../../../../_bundle/Module692";
+import useStableParticipant from "../utils/useStableParticipant";
+import { openVoicePanelSettingsActionSheet } from "../header/VoicePanelSettingsActionCreators";
+let useStyles, ChannelButton, StreamButton, ActivityButton, UserButton, StageButton;
+const ChannelButtonIcons = function ChannelButtonIcons() {
+  return <View style={useStyles().channelButtons}>
+    <ShieldLockIcon size="xs" accessibilityLabel={intl.string(t.VHXh8a)} />
+    <BaseTextButton.Icon source={Module5229} />
+  </View>;
+};
+ChannelButton = function ChannelButton(props) {
+  const { channelId, onPress } = props;
+  let text = useChannelName(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId)));
+  const isCallSecureFramesVerified = useIsCallSecureFramesVerified({
+    channelId
+  });
+  const props2 = {
+    accessibilityRole: "button",
+    accessibilityHint: intl.string(t["Y2b7+e"]),
+    text: null,
+    icon: null,
+    iconOpticalOffsetMargin: null,
+    iconPosition: "end",
+    onPress: null,
+    maxFontSizeMultiplier: 2
+  };
+  if (text == null) {
+    text = "???";
+  }
+  props2.text = text;
+  props2.icon = isCallSecureFramesVerified ? <ChannelButtonIcons /> : Module5229;
+  props2.iconOpticalOffsetMargin = -Module712.space.PX_4;
+  props2.onPress = onPress;
+  return <HeaderButton {...props2} />;
+};
+StreamButton = function StreamButton(props) {
+  const { participant: participant2, onPress } = props;
+  const context = useContext(VoicePanelStateContext);
+  const name = NicknameUtils.useName(context.guildId, context.channelId, participant2.user);
+  return <HeaderButton accessibilityRole="button" accessibilityHint={intl.string(t["Y2b7+e"])} accessibilityLabel={intl.formatToPlainString(t.I0mOAs, {
+    username: name
+  })} text={name} icon={Module15934} iconPosition="start" onPress={onPress} />;
+};
+ActivityButton = function ActivityButton(props) {
+  const { participant, onPress } = props;
+  const stateFromStores = useStateFromStores([ApplicationStore], () => ApplicationStore.getApplication(participant.applicationId));
+  const props2 = {
+    accessibilityRole: "button",
+    accessibilityHint: intl.string(t["Y2b7+e"]),
+    text: null,
+    icon: null,
+    iconPosition: "start",
+    onPress: null,
+    shrink: true
+  };
+  let text = stateFromStores?.name;
+  if (text == null) {
+    text = "???";
+  }
+  props2.text = text;
+  props2.icon = Module6614;
+  props2.onPress = onPress;
+  return <Stack direction="horizontal" spacing={Module712.space.PX_8}>
+    <HeaderButton {...props2} />
+    <QuestActivityButton applicationId={participant.applicationId} />
+  </Stack>;
+};
+UserButton = function UserButton(props) {
+  const { participant: participant2, onPress } = props;
+  const styles = useStyles();
+  const context = useContext(VoicePanelStateContext);
+  const guildId2 = context.guildId;
+  const name = NicknameUtils.useName(guildId2, context.channelId, participant2.user);
+  const voicePanelHeaderUserStateIcons = useVoicePanelHeaderUserStateIcons(participant2, guildId2, styles.userIcons);
+  return <HeaderButton accessibilityRole="button" accessibilityHint={intl.string(t["Y2b7+e"])} icon={voicePanelHeaderUserStateIcons} iconPosition={voicePanelHeaderUserStateIcons != null ? "start" : void 0} text={name} onPress={onPress} />;
+};
+StageButton = function StageButton(props) {
+  const { channelId: channelId2, onPress } = props;
+  const stateFromStores = useStateFromStores([StageInstanceStore], () => StageInstanceStore.getStageInstanceByChannel(channelId2), [channelId2]);
+  const channelName = useChannelName(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId2)));
+  const props2 = {
+    accessibilityRole: "button",
+    accessibilityHint: intl.string(t["Y2b7+e"]),
+    text: null,
+    icon: null,
+    iconPosition: "start",
+    onPress: null
+  };
+  let text = stateFromStores?.topic;
+  if (text == null) {
+    text = channelName;
+  }
+  if (text == null) {
+    text = intl.string(t.zLZPmk);
+  }
+  props2.text = text;
+  props2.icon = Module4658;
+  props2.onPress = onPress;
+  return <HeaderButton {...props2} />;
+};
+useStyles = createStyles({
+  userIcons: {
+    marginLeft: -6
+  },
+  channelButtons: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 2
+  }
+});
+const r46 = memo(function VoicePanelTitleButton() {
+  const context = useContext(VoicePanelStateContext);
+  const { guildId, channelId: channelId3, channelType } = context;
+  const derivedStateFromSharedValue = useDerivedStateFromSharedValue(context.focused, (a0) => a0?.id);
+  const GUILD_STAGE_VOICE = ChannelTypes.GUILD_STAGE_VOICE;
+  const stableParticipant = useStableParticipant(derivedStateFromSharedValue, channelId3, guildId);
+  const callback = useCallback(() => {
+    openVoicePanelSettingsActionSheet(guildId, channelId3);
+  }, [guildId, channelId3]);
+  if (stableParticipant != null) {
+    if (stableParticipant.type === ParticipantTypes.STREAM) {
+      return <StreamButton participant={stableParticipant} onPress={callback} />;
+    }
+    if (stableParticipant.type === ParticipantTypes.ACTIVITY) {
+      return <ActivityButton participant={stableParticipant} onPress={callback} />;
+    }
+    if (stableParticipant.type === ParticipantTypes.USER) {
+      return <UserButton participant={stableParticipant} onPress={callback} />;
+    }
+  }
+  return channelType === GUILD_STAGE_VOICE ? <StageButton channelId={channelId3} onPress={callback} /> : <ChannelButton channelId={channelId3} onPress={callback} />;
+});
+export default r46;

modules/voice_panel/native/shared/VoicePanelVisualEffectView.tsx

@@ -0,0 +1,35 @@
+// Metro module 16002 (f16003).
+import { memo } from "react";
+import { View, StyleSheet } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useToken } from "../../../../design/tokens/native/useToken";
+import MobileVisualRefreshExperiment from "../../../themes/experiments/MobileVisualRefreshExperiment";
+import { BackgroundBlurFill } from "../../../../design/components/experimental/native";
+const useStyles = createStyles({
+  wrapper: {
+    ...StyleSheet.absoluteFillObject
+  },
+  border: {
+    ...StyleSheet.absoluteFillObject,
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_SUBTLE,
+    borderRadius: Module712.modules.mobile.VOICE_PANEL_CONTROLS_BORDER_RADIUS
+  }
+});
+const r49 = memo(function VoicePanelVisualEffectViewInner(props) {
+  let matchAppTheme = props.matchAppTheme;
+  if (matchAppTheme === void 0) {
+    matchAppTheme = false;
+  }
+  const blurTheme = matchAppTheme ? void 0 : "dark";
+  const token = useToken(Module712.colors.THEME_LOCKED_BLUR_FALLBACK);
+  const styles = useStyles();
+  const r22 = MobileVisualRefreshExperiment("VoicePanelVisualEffectView");
+  const r29 = <BackgroundBlurFill blurTheme={blurTheme} android_fallbackColor={matchAppTheme ? void 0 : token} />;
+  return r22 ? <View style={styles.wrapper}>
+    {r29}
+    <View style={styles.border} />
+  </View> : r29;
+});
+export { r49 as VoicePanelVisualEffectView };

modules/voice_panel/native/shared/VoiceStateIcons.tsx

@@ -0,0 +1,76 @@
+// Metro module 8861 (f8862).
+import { memo } from "react";
+import { StyleSheet } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { MuteDeafenIconState, VideoIconState } from "../utils/VoiceStateIconUtils";
+import { HeadphonesDenyIcon } from "../../../../design/components/Icon/native/redesign/generated/HeadphonesDenyIcon";
+import { HeadphonesSlashIcon } from "../../../../design/components/Icon/native/redesign/generated/HeadphonesSlashIcon";
+import { MicrophoneDenyIcon } from "../../../../design/components/Icon/native/redesign/generated/MicrophoneDenyIcon";
+import { MicrophoneSlashIcon } from "../../../../design/components/Icon/native/redesign/generated/MicrophoneSlashIcon";
+import { assertNever } from "../../../../utils/GlobalUtils";
+import { IconSizes, getIconStyle, Icon } from "../../../../design/void/native";
+import Module8531, { Path } from "../../../../_bundle/Module8531";
+import Module8871 from "../../../../_bundle/Module8871";
+import Module8872 from "../../../../_bundle/Module8872";
+let useStyles;
+const VideoDisabledSvgIcon = function VideoDisabledSvgIcon(props) {
+  const { size = IconSizes.MEDIUM, style, ...props2 } = props;
+  const styles = useStyles();
+  const iconStyle = getIconStyle(size);
+  const r27 = StyleSheet.flatten(style);
+  let fill = r27?.tintColor;
+  if (fill == null) {
+    fill = styles.defaultTint.tintColor;
+  }
+  return <Module8531 {...props2} style={[iconStyle, r27]} viewBox="0 0 24 24">
+    <Path d="M8.48485 19H13C15.2091 19 17 17.2091 17 15L19.563 17.0504C20.5451 17.8361 22 17.1368 22 15.8791V8.12094C22 7.35968 21.467 6.80301 20.8285 6.65636L8.48485 19Z" fill={fill} />
+    <Path d="M14.9873 5.52783C14.4019 5.192 13.7233 5 13 5H6C3.79086 5 2 6.79086 2 9V15C2 15.9811 2.35325 16.8798 2.93949 17.5757L14.9873 5.52783Z" fill={fill} />
+    <Path d="M21.2785 2.70712C20.888 2.31659 20.2549 2.31659 19.8643 2.70711L2.70711 19.8643C2.31658 20.2549 2.31658 20.888 2.70711 21.2785L2.72146 21.2929C3.11199 21.6834 3.74515 21.6834 4.13567 21.2929L21.2929 4.13568C21.6834 3.74515 21.6834 3.11199 21.2929 2.72147L21.2785 2.70712Z" fill={styles.redTint.tintColor} />
+  </Module8531>;
+};
+useStyles = createStyles({
+  redTint: {
+    tintColor: Module712.colors.ICON_FEEDBACK_CRITICAL
+  },
+  defaultTint: {
+    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  },
+  noTint: {
+    tintColor: void 0
+  }
+});
+const r41 = memo(function({ style, state, alwaysWhite = false }) {
+  const styles = useStyles();
+  if (MuteDeafenIconState.DEAFENED_SERVER === state) {
+    return <HeadphonesDenyIcon style={[style, alwaysWhite ? null : styles.redTint]} size="xs" />;
+  }
+  if (MuteDeafenIconState.DEAFENED === state) {
+    return <HeadphonesSlashIcon style={[style]} size="xs" />;
+  }
+  if (MuteDeafenIconState.MUTED_SERVER === state) {
+    return <MicrophoneDenyIcon style={[style, alwaysWhite ? null : styles.redTint]} size="xs" />;
+  }
+  if (MuteDeafenIconState.MUTED_LOCAL === state) {
+    return <MicrophoneDenyIcon style={[style]} size="xs" />;
+  }
+  if (MuteDeafenIconState.MUTED === state) {
+    return <MicrophoneSlashIcon style={[style]} size="xs" />;
+  }
+  assertNever(state);
+});
+const r44 = memo(function({ state, ...props }) {
+  const styles = useStyles();
+  if (VideoIconState.VIDEO_DISABLED_LOCAL_AUTO === state) {
+    return <Icon {...props} source={Module8871} style={[props.style, styles.noTint]} />;
+  }
+  if (VideoIconState.VIDEO_DISABLED_LOCAL === state) {
+    return <VideoDisabledSvgIcon {...props} />;
+  }
+  if (VideoIconState.VIDEO_ACTIVE === state) {
+    return <Icon {...props} source={Module8872} />;
+  }
+  assertNever(state);
+});
+export { r41 as MuteDeafenIcon };
+export { r44 as VideoIcon };