yeet

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

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

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

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

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

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

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

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