yeet

modules/voice_panel/native/card/ActivityAccessibilityLayer.tsx

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

modules/voice_panel/native/card/DominantColorUtils.tsx

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

modules/voice_panel/native/card/VoicePanelAnimatedActivityCard.tsx

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

modules/voice_panel/native/card/VoicePanelCTACardCallerDisconnected.tsx

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

modules/voice_panel/native/card/VoicePanelCardConstants.tsx

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

modules/voice_panel/native/card/VoicePanelCardFloatingControls.tsx

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

modules/voice_panel/native/card/VoicePanelCardLayoutManager.tsx

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

modules/voice_panel/native/card/VoicePanelCardView.tsx

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

modules/voice_panel/native/card/VoicePanelNoVideoParticipantsCard.tsx

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